diff --git a/backend/app/features.py b/backend/app/features.py
new file mode 100644
index 0000000..444709a
--- /dev/null
+++ b/backend/app/features.py
@@ -0,0 +1,80 @@
+"""Was der Seite noch fehlt.
+
+Jeder darf aufschreiben, was er sich wünscht. Alle sehen alle Wünsche,
+ändern darf jeder nur die eigenen — wie bei den Filmsammlungen.
+"""
+
+from datetime import datetime, timezone
+
+from .db import connect
+
+SCHEMA = """
+CREATE TABLE IF NOT EXISTS features (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    session_id TEXT NOT NULL,
+    text       TEXT NOT NULL,
+    created_at TEXT NOT NULL
+);
+"""
+
+MAX_LAENGE = 500
+
+
+def init():
+    with connect() as conn:
+        conn.executescript(SCHEMA)
+
+
+def alle(session_id):
+    """Alle Wünsche, jeder mit dem Namen seines Verfassers."""
+    with connect() as conn:
+        rows = conn.execute(
+            "SELECT f.*, u.name FROM features f "
+            "LEFT JOIN user_sessions s ON s.session_id = f.session_id "
+            "LEFT JOIN users u ON u.id = s.user_id "
+            "ORDER BY f.created_at DESC"
+        ).fetchall()
+    return [
+        {
+            **{k: v for k, v in dict(r).items() if k != "session_id"},
+            "mine": r["session_id"] == session_id,
+        }
+        for r in rows
+    ]
+
+
+def anlegen(session_id, text):
+    """Gibt None zurück, wenn nichts dasteht."""
+    text = (text or "").strip()[:MAX_LAENGE]
+    if not text:
+        return None
+    with connect() as conn:
+        conn.execute(
+            "INSERT INTO features (session_id, text, created_at) VALUES (?, ?, ?)",
+            (
+                session_id,
+                text,
+                datetime.now(timezone.utc).isoformat(timespec="seconds"),
+            ),
+        )
+    return alle(session_id)
+
+
+def aendern(feature_id, text):
+    """Der Host räumt auf: Tippfehler, Dopplungen, unklare Formulierungen."""
+    text = (text or "").strip()[:MAX_LAENGE]
+    if not text:
+        return 0
+    with connect() as conn:
+        return conn.execute(
+            "UPDATE features SET text = ? WHERE id = ?", (text, feature_id)
+        ).rowcount
+
+
+def loeschen(feature_id):
+    """Ohne Sitzungsbindung — den Knopf zeigt die Oberfläche nur dem
+    Verfasser und dem Host."""
+    with connect() as conn:
+        return conn.execute(
+            "DELETE FROM features WHERE id = ?", (feature_id,)
+        ).rowcount
diff --git a/backend/app/main.py b/backend/app/main.py
index e57dae9..6ce4c3b 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -9,7 +9,18 @@ from fastapi.middleware.cors import CORSMiddleware
 from fastapi.middleware.gzip import GZipMiddleware
 from fastapi.staticfiles import StaticFiles
 
-from . import db, events, search, streamproxy, suggestions, sync, watched
+from . import (
+    db,
+    events,
+    features,
+    search,
+    streamproxy,
+    suggestions,
+    sync,
+    users,
+    watched,
+    wishlist,
+)
 from .config import IMAGE_BASE, STATIC_DIR
 
 logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s")
@@ -71,6 +82,9 @@ async def startup():
     db.init()
     suggestions.init()
     watched.init()
+    users.init()
+    wishlist.init()
+    features.init()
     scheduler.add_job(guarded_sync, "cron", hour=4, minute=30, id="daily-sync")
     scheduler.start()
     if not db.get_meta("last_sync"):
@@ -227,13 +241,12 @@ def liste_vorschlaege(response: Response, filmabend_sid: str | None = Cookie(Non
 async def vorschlagen(
     response: Response,
     movie_id: int = Body(..., embed=True),
-    name: str | None = Body(None, embed=True),
     filmabend_sid: str | None = Cookie(None),
 ):
     sid = sitzung(response, filmabend_sid)
     movie = await film_holen(movie_id)
     # Ein zweiter Vorschlag ersetzt den ersten, statt abgelehnt zu werden
-    eintrag = suggestions.ersetzen(sid, movie, name)
+    eintrag = suggestions.ersetzen(sid, movie, users.name_von(sid))
     events.senden("suggestions")
     return {k: v for k, v in eintrag.items() if k != "session_id"}
 
@@ -258,6 +271,110 @@ async def film_holen(movie_id: int):
         raise HTTPException(status_code=404, detail="Film nicht gefunden")
 
 
+@app.get("/api/features")
+def wuensche(response: Response, filmabend_sid: str | None = Cookie(None)):
+    sid = sitzung(response, filmabend_sid)
+    return features.alle(sid)
+
+
+@app.post("/api/features")
+def wunsch_anlegen(
+    response: Response,
+    text: str = Body(..., embed=True),
+    filmabend_sid: str | None = Cookie(None),
+):
+    sid = sitzung(response, filmabend_sid)
+    liste = features.anlegen(sid, text)
+    if liste is None:
+        raise HTTPException(status_code=400, detail="Kein Text")
+    events.senden("features")
+    return liste
+
+
+@app.patch("/api/features/{feature_id}")
+def wunsch_aendern(feature_id: int, text: str = Body(..., embed=True)):
+    if not features.aendern(feature_id, text):
+        raise HTTPException(status_code=404, detail="Wunsch nicht gefunden")
+    events.senden("features")
+    return {"ok": True}
+
+
+@app.delete("/api/features/{feature_id}")
+def wunsch_loeschen(feature_id: int):
+    entfernt = features.loeschen(feature_id)
+    if entfernt:
+        events.senden("features")
+    return {"removed": entfernt}
+
+
+@app.get("/api/wishlist")
+def merkliste(response: Response, filmabend_sid: str | None = Cookie(None)):
+    """Was diese Sitzung sich vorgemerkt hat."""
+    sid = sitzung(response, filmabend_sid)
+    return wishlist.alle(sid)
+
+
+@app.post("/api/wishlist")
+async def merken(
+    response: Response,
+    movie_id: int = Body(..., embed=True),
+    filmabend_sid: str | None = Cookie(None),
+):
+    sid = sitzung(response, filmabend_sid)
+    return wishlist.merken(sid, await film_holen(movie_id))
+
+
+@app.delete("/api/wishlist/{movie_id}")
+def vergessen(
+    movie_id: int,
+    response: Response,
+    filmabend_sid: str | None = Cookie(None),
+):
+    sid = sitzung(response, filmabend_sid)
+    return {"removed": wishlist.vergessen(sid, movie_id)}
+
+
+@app.get("/api/users")
+def runde(response: Response, filmabend_sid: str | None = Cookie(None)):
+    sid = sitzung(response, filmabend_sid)
+    return {"items": users.alle(), "mine": users.aktuell(sid)}
+
+
+@app.post("/api/users")
+def name_anlegen(name: str = Body(..., embed=True)):
+    """Der Host erweitert die Runde."""
+    benutzer = users.anlegen(name)
+    if not benutzer:
+        raise HTTPException(status_code=400, detail="Name leer oder schon vergeben")
+    events.senden("users")
+    return benutzer
+
+
+@app.delete("/api/users/{user_id}")
+def name_entfernen(user_id: int):
+    if not users.entfernen(user_id):
+        raise HTTPException(status_code=404, detail="Unbekannter Name")
+    events.senden("users")
+    return {"removed": 1}
+
+
+@app.post("/api/users/waehlen")
+def name_waehlen(
+    response: Response,
+    user_id: int | None = Body(None, embed=True),
+    filmabend_sid: str | None = Cookie(None),
+):
+    """Wer bin ich? Ohne user_id wieder anonym."""
+    sid = sitzung(response, filmabend_sid)
+    if user_id is None:
+        users.abwaehlen(sid)
+        return {"mine": None}
+    benutzer = users.waehlen(sid, user_id)
+    if not benutzer:
+        raise HTTPException(status_code=404, detail="Unbekannter Name")
+    return {"mine": benutzer}
+
+
 @app.get("/api/watched")
 def liste_gesehen(response: Response, filmabend_sid: str | None = Cookie(None)):
     sid = sitzung(response, filmabend_sid)
@@ -303,12 +420,12 @@ def bewerten(
     watched_id: int,
     response: Response,
     stars: int = Body(..., embed=True),
-    name: str | None = Body(None, embed=True),
     filmabend_sid: str | None = Cookie(None),
 ):
     sid = sitzung(response, filmabend_sid)
     stars = max(1, min(watched.MAX_STERNE, stars))
-    eintrag = watched.bewerten(watched_id, sid, stars, name)
+    # Der Name kommt aus der Runde, nicht aus der Anfrage
+    eintrag = watched.bewerten(watched_id, sid, stars, users.name_von(sid))
     if not eintrag:
         raise HTTPException(status_code=404, detail="Film steht nicht in der Liste")
     events.senden("watched")
diff --git a/backend/app/users.py b/backend/app/users.py
new file mode 100644
index 0000000..42ade8b
--- /dev/null
+++ b/backend/app/users.py
@@ -0,0 +1,112 @@
+"""Die Runde: wer mitmacht, und wer gerade wer ist.
+
+Der Host pflegt die Namensliste. Alle anderen wählen sich einen davon aus.
+Kein Passwort — für acht Freunde, die sich ohnehin über Discord hören, wäre
+das nur eine Hürde ohne Nutzen.
+
+Die Zuordnung hängt an derselben Cookie-Sitzung wie Vorschläge und
+Wertungen. Damit steht der Name serverseitig fest und kommt nicht mehr aus
+einem Textfeld, in das jeder schreiben kann, was er will.
+"""
+
+import sqlite3
+from datetime import datetime, timezone
+
+from .db import connect
+
+SCHEMA = """
+CREATE TABLE IF NOT EXISTS users (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    name       TEXT NOT NULL UNIQUE,
+    created_at TEXT NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS user_sessions (
+    session_id TEXT PRIMARY KEY,
+    user_id    INTEGER NOT NULL,
+    seit       TEXT NOT NULL
+);
+"""
+
+
+def init():
+    with connect() as conn:
+        conn.executescript(SCHEMA)
+
+
+def alle():
+    with connect() as conn:
+        rows = conn.execute("SELECT * FROM users ORDER BY name COLLATE NOCASE").fetchall()
+        return [dict(r) for r in rows]
+
+
+def anlegen(name):
+    """Gibt None zurück, wenn der Name schon vergeben ist."""
+    name = (name or "").strip()[:40]
+    if not name:
+        return None
+    try:
+        with connect() as conn:
+            conn.execute(
+                "INSERT INTO users (name, created_at) VALUES (?, ?)",
+                (name, datetime.now(timezone.utc).isoformat(timespec="seconds")),
+            )
+    except sqlite3.IntegrityError:
+        return None
+    return von_name(name)
+
+
+def von_name(name):
+    with connect() as conn:
+        row = conn.execute("SELECT * FROM users WHERE name = ?", (name,)).fetchone()
+        return dict(row) if row else None
+
+
+def entfernen(user_id):
+    with connect() as conn:
+        conn.execute("DELETE FROM user_sessions WHERE user_id = ?", (user_id,))
+        return conn.execute("DELETE FROM users WHERE id = ?", (user_id,)).rowcount
+
+
+def waehlen(session_id, user_id):
+    """Gibt None zurück, wenn es den Namen nicht gibt."""
+    with connect() as conn:
+        da = conn.execute("SELECT * FROM users WHERE id = ?", (user_id,)).fetchone()
+        if not da:
+            return None
+        conn.execute(
+            "INSERT INTO user_sessions (session_id, user_id, seit) VALUES (?, ?, ?) "
+            "ON CONFLICT (session_id) DO UPDATE SET "
+            "user_id = excluded.user_id, seit = excluded.seit",
+            (
+                session_id,
+                user_id,
+                datetime.now(timezone.utc).isoformat(timespec="seconds"),
+            ),
+        )
+        return dict(da)
+
+
+def abwaehlen(session_id):
+    with connect() as conn:
+        return conn.execute(
+            "DELETE FROM user_sessions WHERE session_id = ?", (session_id,)
+        ).rowcount
+
+
+def aktuell(session_id):
+    """Der Benutzer dieser Sitzung, oder None."""
+    with connect() as conn:
+        row = conn.execute(
+            "SELECT u.* FROM users u "
+            "JOIN user_sessions s ON s.user_id = u.id "
+            "WHERE s.session_id = ?",
+            (session_id,),
+        ).fetchone()
+        return dict(row) if row else None
+
+
+def name_von(session_id):
+    """Nur der Name, für Vorschläge und Wertungen."""
+    benutzer = aktuell(session_id)
+    return benutzer["name"] if benutzer else None
diff --git a/backend/app/wishlist.py b/backend/app/wishlist.py
new file mode 100644
index 0000000..ce32119
--- /dev/null
+++ b/backend/app/wishlist.py
@@ -0,0 +1,91 @@
+"""Was jeder für sich sehen möchte.
+
+Alle sehen alle Sammlungen — man merkt so, worauf die anderen Lust haben.
+Ändern darf jeder nur die eigene. Der Vorschlag fürs Rad ist eine andere
+Sache: davon gibt es einen je Person, und er landet im Glücksrad.
+
+Titel und Poster kommen mit in die Zeile. Ein gemerkter Film soll lesbar
+bleiben, auch wenn er nie im Katalog stand oder Netflix ihn abgibt.
+"""
+
+import sqlite3
+from datetime import datetime, timezone
+
+from .db import connect
+
+SCHEMA = """
+CREATE TABLE IF NOT EXISTS wishlist (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    session_id  TEXT NOT NULL,
+    movie_id    INTEGER NOT NULL,
+    title       TEXT NOT NULL,
+    year        INTEGER,
+    poster_path TEXT,
+    created_at  TEXT NOT NULL,
+    UNIQUE (session_id, movie_id)
+);
+"""
+
+
+def init():
+    with connect() as conn:
+        conn.executescript(SCHEMA)
+
+
+def alle(session_id):
+    """Alle Sammlungen, jede mit dem Namen ihres Besitzers."""
+    with connect() as conn:
+        rows = conn.execute(
+            "SELECT w.*, u.name FROM wishlist w "
+            "LEFT JOIN user_sessions s ON s.session_id = w.session_id "
+            "LEFT JOIN users u ON u.id = s.user_id "
+            "ORDER BY w.created_at DESC"
+        ).fetchall()
+    return [
+        {
+            **{k: v for k, v in dict(r).items() if k != "session_id"},
+            "mine": r["session_id"] == session_id,
+        }
+        for r in rows
+    ]
+
+
+def merken(session_id, movie):
+    """Ein zweites Mal merken ändert nichts."""
+    try:
+        with connect() as conn:
+            conn.execute(
+                "INSERT INTO wishlist "
+                "(session_id, movie_id, title, year, poster_path, created_at) "
+                "VALUES (?, ?, ?, ?, ?, ?)",
+                (
+                    session_id,
+                    movie["id"],
+                    movie["title"],
+                    movie.get("year"),
+                    movie.get("poster_path"),
+                    datetime.now(timezone.utc).isoformat(timespec="seconds"),
+                ),
+            )
+    except sqlite3.IntegrityError:
+        pass
+    return alle(session_id)
+
+
+def vergessen(session_id, movie_id):
+    with connect() as conn:
+        return conn.execute(
+            "DELETE FROM wishlist WHERE session_id = ? AND movie_id = ?",
+            (session_id, movie_id),
+        ).rowcount
+
+
+def ids(session_id):
+    """movie_ids der gemerkten Filme, für die Detailansicht."""
+    with connect() as conn:
+        return [
+            r["movie_id"]
+            for r in conn.execute(
+                "SELECT movie_id FROM wishlist WHERE session_id = ?", (session_id,)
+            )
+        ]
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 0a64c3e..6c5b9ae 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,7 +3,11 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { abonnieren } from './live'
 import MovieCard from './components/MovieCard.vue'
 import FilterSidebar from './components/FilterSidebar.vue'
+import MerklisteTab from './components/MerklisteTab.vue'
 import MovieDetail from './components/MovieDetail.vue'
+import NamensWahl from './components/NamensWahl.vue'
+import VerwaltungTab from './components/VerwaltungTab.vue'
+import WuenscheTab from './components/WuenscheTab.vue'
 import SearchTab from './components/SearchTab.vue'
 import StreamTab from './components/StreamTab.vue'
 import WatchedTab from './components/WatchedTab.vue'
@@ -16,10 +20,19 @@ const loading = ref(true)
 const error = ref('')
 const search = ref('')
 const sort = ref('random')
+
+// Kompakt zeigt viele Karten nebeneinander, Details dafür mehr je Film
+const ANSICHT_SCHLUESSEL = 'filmabend_ansicht'
+const ansicht = ref(localStorage.getItem(ANSICHT_SCHLUESSEL) || 'kompakt')
+
+watch(ansicht, (wert) => localStorage.setItem(ANSICHT_SCHLUESSEL, wert))
 const selected = ref(null)
 // Nach dem Neuladen soll derselbe Reiter offen sein
 const TAB_SCHLUESSEL = 'filmabend_tab'
-const TAB_IDS = ['netflix', 'canon', 'search', 'wheel', 'watched', 'stream']
+const TAB_IDS = [
+  'netflix', 'canon', 'search', 'wheel', 'merkliste', 'watched', 'wuensche',
+  'verwaltung', 'stream',
+]
 const gemerkterTab = localStorage.getItem(TAB_SCHLUESSEL)
 const activeTab = ref(TAB_IDS.includes(gemerkterTab) ? gemerkterTab : 'netflix')
 
@@ -200,9 +213,14 @@ const tabs = computed(() => [
   { id: 'netflix', label: 'Netflix', count: netflixMovies.value.length },
   { id: 'canon', label: 'Horror-Kanon', count: canonGroups.value.length },
   { id: 'search', label: 'Suche', count: null },
+  ...(host.value
+    ? []
+    : [{ id: 'merkliste', label: 'Sammlungen', count: null }]),
   { id: 'wheel', label: 'Rad', count: null },
-  { id: 'watched', label: 'Gesehen', count: gesehenZahl.value },
   { id: 'stream', label: 'Stream', count: null },
+  { id: 'watched', label: 'Gesehen', count: gesehenZahl.value },
+  { id: 'wuensche', label: 'Wünsche', count: wuensche.value.length },
+  ...(host.value ? [{ id: 'verwaltung', label: 'Verwaltung', count: null }] : []),
 ])
 
 const rad = ref(null)
@@ -227,16 +245,43 @@ const gesehenZahl = computed(
 
 // Wer den Abend leitet, darf drehen und die Runde leeren. Kein Login —
 // die Tastenkombination reicht, die Seite steht ohnehin nur Freunden offen.
-// Ein Name für alles: Vorschläge und Wertungen. Ohne Namen läuft es
-// anonym, das ist ausdrücklich erlaubt.
-const NAME_SCHLUESSEL = 'filmabend_name'
-const name = ref(localStorage.getItem(NAME_SCHLUESSEL) || '')
+// Die Runde: der Host pflegt die Namen, alle anderen wählen sich einen aus.
+// Den Namen setzt danach der Server an Vorschläge und Wertungen.
+const runde = ref([])
+const ich = ref(null)
 
-watch(name, (wert) => localStorage.setItem(NAME_SCHLUESSEL, wert))
+async function michSetzen(id) {
+  await fetch('/api/users/waehlen', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ user_id: id ?? null }),
+  })
+  ladeRunde()
+}
+
+async function ladeRunde() {
+  try {
+    const resp = await fetch('/api/users')
+    if (!resp.ok) return
+    const daten = await resp.json()
+    runde.value = daten.items
+    ich.value = daten.mine
+  } catch {
+    /* dann eben ohne */
+  }
+}
 
 const HOST_SCHLUESSEL = 'filmabend_host'
 const host = ref(localStorage.getItem(HOST_SCHLUESSEL) === '1')
 
+// Die Verwaltung verschwindet mit dem Hostmodus. Bleibt sie offen, sieht
+// ein Gast sie weiter, ohne dass ein Reiter markiert wäre.
+watch(host, (an) => {
+  // Verwaltung sieht nur der Host, Vorschläge nur die Gäste
+  const weg = an ? 'merkliste' : 'verwaltung'
+  if (activeTab.value === weg) activeTab.value = 'netflix'
+})
+
 function tastatur(e) {
   // e.code statt e.key: mit drei Zusatztasten liefert das Layout sonst
   // je nach System ein anderes Zeichen
@@ -253,6 +298,30 @@ const meinVorschlag = ref(null)
 // Alle Filme auf dem Rad, damit die Karten es zeigen können
 const aufDemRad = ref([])
 
+// Die eigene Merkliste — was man selbst sehen möchte, unabhängig vom Rad
+const merkliste = ref([])
+
+// Was der Seite noch fehlt
+const wuensche = ref([])
+
+async function ladeWuensche() {
+  try {
+    const resp = await fetch('/api/features')
+    if (resp.ok) wuensche.value = await resp.json()
+  } catch {
+    /* dann eben ohne */
+  }
+}
+
+async function ladeMerkliste() {
+  try {
+    const resp = await fetch('/api/wishlist')
+    if (resp.ok) merkliste.value = await resp.json()
+  } catch {
+    /* dann eben ohne */
+  }
+}
+
 async function ladeVorschlag() {
   try {
     const resp = await fetch('/api/suggestions')
@@ -397,9 +466,14 @@ onMounted(() => {
   load()
   ladeVorschlag()
   ladeGesehen()
+  ladeRunde()
+  ladeMerkliste()
+  ladeWuensche()
   // Schlägt jemand anders etwas vor, sollen es auch die Karten zeigen
   abbestellen = abonnieren((nachricht) => {
     if (nachricht.type === 'suggestions' || nachricht.type === 'reset') ladeVorschlag()
+    else if (nachricht.type === 'users') ladeRunde()
+    else if (nachricht.type === 'features') ladeWuensche()
   })
   window.addEventListener('keydown', tastatur)
 })
@@ -411,7 +485,11 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="page" :class="{ breit: ['search', 'wheel', 'stream', 'watched'].includes(activeTab) }">
+  <div class="page" :class="{
+      breit: [
+        'search', 'wheel', 'stream', 'watched', 'merkliste', 'wuensche', 'verwaltung',
+      ].includes(activeTab),
+    }">
     <nav class="tabs">
       <button
         v-for="tab in tabs"
@@ -423,14 +501,8 @@ onUnmounted(() => {
         {{ tab.label }}
         <span v-if="tab.count !== null" class="count">{{ tab.count }}</span>
       </button>
-      <input
-        v-model.trim="name"
-        type="text"
-        class="name"
-        placeholder="Dein Name"
-        maxlength="40"
-      />
-      <span v-if="host" class="host">Host</span>
+      <NamensWahl v-if="!host" :items="runde" :mine="ich" @waehlen="michSetzen" />
+      <span v-else class="host">Host</span>
     </nav>
 
     <SearchTab v-if="activeTab === 'search'" @open="selected = $event" />
@@ -446,11 +518,28 @@ onUnmounted(() => {
     <WatchedTab
       v-else-if="activeTab === 'watched'"
       :host="host"
-      :name="name"
       @open="selected = $event"
       @changed="ladeGesehen"
     />
 
+    <MerklisteTab
+      v-else-if="activeTab === 'merkliste'"
+      :items="merkliste"
+      :ich="ich"
+      @open="selected = $event"
+      @changed="ladeMerkliste"
+    />
+
+    <WuenscheTab
+      v-else-if="activeTab === 'wuensche'"
+      :items="wuensche"
+      :ich="ich"
+      :host="host"
+      @changed="ladeWuensche"
+    />
+
+    <VerwaltungTab v-else-if="activeTab === 'verwaltung'" :items="runde" />
+
     <StreamTab v-else-if="activeTab === 'stream'" />
 
     <div v-else class="layout">
@@ -464,7 +553,7 @@ onUnmounted(() => {
         Nichts gefunden{{ search ? ` für „${search}“` : '' }}.
       </p>
 
-      <div class="grid">
+      <div class="grid" :class="ansicht">
         <template
           v-for="entry in activeTab === 'netflix' ? visible : visibleCanon"
           :key="entry.group"
@@ -473,6 +562,7 @@ onUnmounted(() => {
             v-if="entry.parts.length === 1"
             :movie="entry.parts[0]"
             :auf-dem-rad="aufDemRad.includes(entry.parts[0].id)"
+            :ansicht="ansicht"
             @open="selected = $event"
           />
           <SeriesCard
@@ -480,6 +570,7 @@ onUnmounted(() => {
             :parts="entry.parts"
             :start="entry.best"
             :auf-dem-rad="aufDemRad"
+            :ansicht="ansicht"
             @open="selected = $event"
           />
         </template>
@@ -490,6 +581,7 @@ onUnmounted(() => {
         v-if="genreOptions.length"
         v-model:search="search"
         v-model:sort="sort"
+        v-model:ansicht="ansicht"
         v-model:ranges="ranges"
         :regler="REGLER"
         :grenzen="grenzen"
@@ -510,8 +602,9 @@ onUnmounted(() => {
       @open="selected = $event"
       :mein-vorschlag="meinVorschlag"
       :host="host"
-      :name="name"
       :gesehen="gesehen.some((e) => e.movie_id === selected.id)"
+      :gemerkt="merkliste.some((e) => e.mine && e.movie_id === selected.id)"
+      @gemerkt="ladeMerkliste"
       @suggested="nachVorschlag"
       @watched="ladeGesehen"
     />
@@ -557,15 +650,9 @@ onUnmounted(() => {
   border-bottom-color: var(--accent);
 }
 
-.tabs .name {
-  width: 11rem;
-  margin: 0 0 0.35rem auto;
-  padding: 0.35rem 0.6rem;
-  font-size: 0.82rem;
-}
-
 .host {
   align-self: center;
+  margin-left: 0.4rem;
   padding: 0.15rem 0.5rem;
   color: var(--accent);
   font-size: 0.7rem;
@@ -629,6 +716,15 @@ onUnmounted(() => {
   gap: 1.1rem;
 }
 
+/* Eine Detailkarte ist so breit wie vier kompakte Karten nebeneinander —
+   oder die halbe Reihe, falls die schmaler ist. */
+.grid.details {
+  grid-template-columns: repeat(
+    auto-fill,
+    min(calc(50% - 0.55rem), calc(4 * 190px + 3 * 1.1rem))
+  );
+}
+
 .note {
   padding: 2.5rem 0;
   color: var(--muted);
diff --git a/frontend/src/components/FilterSidebar.vue b/frontend/src/components/FilterSidebar.vue
index 8166f0b..179e513 100644
--- a/frontend/src/components/FilterSidebar.vue
+++ b/frontend/src/components/FilterSidebar.vue
@@ -14,6 +14,7 @@ const emit = defineEmits(['toggle', 'all', 'reset'])
 
 const search = defineModel('search', { type: String, default: '' })
 const sort = defineModel('sort', { type: String, default: 'random' })
+const ansicht = defineModel('ansicht', { type: String, default: 'kompakt' })
 const ranges = defineModel('ranges', { type: Object, default: () => ({}) })
 
 // Auch ein verschobener Regler zählt als aktiver Filter
@@ -53,6 +54,23 @@ function beschriften(regler) {
         <option value="oldest">Älteste zuerst</option>
         <option value="title">Titel A–Z</option>
       </select>
+
+      <div class="ansicht">
+        <button
+          type="button"
+          :class="{ an: ansicht === 'kompakt' }"
+          @click="ansicht = 'kompakt'"
+        >
+          Kompakt
+        </button>
+        <button
+          type="button"
+          :class="{ an: ansicht === 'details' }"
+          @click="ansicht = 'details'"
+        >
+          Details
+        </button>
+      </div>
     </div>
 
     <div class="head">
@@ -237,4 +255,29 @@ h4 {
   border-color: #4a4a56;
   text-decoration: line-through;
 }
+
+.ansicht {
+  display: flex;
+  gap: 0.3rem;
+}
+
+.ansicht button {
+  flex: 1;
+  padding: 0.4rem 0.5rem;
+  color: var(--muted);
+  font-size: 0.8rem;
+  background: var(--bg-soft);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+
+.ansicht button:hover {
+  color: var(--text);
+}
+
+.ansicht button.an {
+  color: var(--text);
+  font-weight: 600;
+  border-color: var(--accent);
+}
 </style>
diff --git a/frontend/src/components/MerklisteTab.vue b/frontend/src/components/MerklisteTab.vue
new file mode 100644
index 0000000..c3b3645
--- /dev/null
+++ b/frontend/src/components/MerklisteTab.vue
@@ -0,0 +1,189 @@
+<script setup>
+import { computed } from 'vue'
+import { posterUrl } from '../images'
+
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  ich: { type: Object, default: null },
+})
+
+// Nach Person gruppiert, die eigene Sammlung zuerst
+const gruppen = computed(() => {
+  const nach = new Map()
+  for (const item of props.items) {
+    const schluessel = item.mine ? '\u0000eigene' : item.name || 'Anonym'
+    if (!nach.has(schluessel)) {
+      nach.set(schluessel, {
+        titel: item.mine
+          ? `${props.ich?.name || 'Anonym'} (Deine)`
+          : item.name || 'Anonym',
+        mine: item.mine,
+        filme: [],
+      })
+    }
+    nach.get(schluessel).filme.push(item)
+  }
+  return [...nach.values()].sort((a, b) => b.mine - a.mine)
+})
+
+const emit = defineEmits(['open', 'changed'])
+
+async function vergessen(item) {
+  await fetch(`/api/wishlist/${item.movie_id}`, { method: 'DELETE' })
+  emit('changed')
+}
+
+async function oeffnen(item) {
+  const resp = await fetch(`/api/search/${item.movie_id}`)
+  if (resp.ok) emit('open', await resp.json())
+}
+</script>
+
+<template>
+  <div class="merkliste-tab">
+    <p v-if="!items.length" class="note">
+      Noch nichts gemerkt. Öffne einen Film und klicke auf „Merken“.
+    </p>
+
+    <section v-for="gruppe in gruppen" :key="gruppe.titel">
+      <h3>
+        {{ gruppe.titel }}
+        <span class="anzahl">{{ gruppe.filme.length }}</span>
+      </h3>
+
+      <div class="grid">
+        <article v-for="item in gruppe.filme" :key="item.id" class="karte">
+          <button type="button" class="cover" @click="oeffnen(item)">
+            <img
+              v-if="posterUrl(item.poster_path, 'w342')"
+              :src="posterUrl(item.poster_path, 'w342')"
+              :alt="item.title"
+              loading="lazy"
+            />
+            <span v-else class="kein-cover">Kein Cover</span>
+          </button>
+
+          <div class="text">
+            <h4 @click="oeffnen(item)">{{ item.title }}</h4>
+            <p v-if="item.year" class="jahr">{{ item.year }}</p>
+            <button
+              v-if="item.mine"
+              type="button"
+              class="weg"
+              @click="vergessen(item)"
+            >
+              Entfernen
+            </button>
+          </div>
+        </article>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
+}
+
+.karte {
+  display: flex;
+  gap: 0.9rem;
+  align-items: flex-start;
+  padding: 0.8rem;
+  background: var(--bg-soft);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+}
+
+.cover {
+  flex-shrink: 0;
+  width: 82px;
+  padding: 0;
+}
+
+.cover img,
+.kein-cover {
+  width: 82px;
+  aspect-ratio: 2 / 3;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+.kein-cover {
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+  font-size: 0.7rem;
+  background: var(--bg);
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  min-width: 0;
+}
+
+section {
+  margin-bottom: 1.75rem;
+}
+
+h3 {
+  display: flex;
+  gap: 0.45rem;
+  align-items: center;
+  margin-bottom: 0.7rem;
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.anzahl {
+  padding: 0.1rem 0.45rem;
+  letter-spacing: 0;
+  background: var(--bg-soft);
+  border: 1px solid var(--line);
+  border-radius: 20px;
+}
+
+h4 {
+  font-size: 0.98rem;
+  line-height: 1.25;
+  cursor: pointer;
+}
+
+h4:hover {
+  color: var(--accent);
+}
+
+.jahr {
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.weg {
+  align-self: flex-start;
+  margin-top: 0.35rem;
+  padding: 0.28rem 0.6rem;
+  color: var(--muted);
+  font-size: 0.75rem;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+
+.weg:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.note {
+  padding: 2.5rem 0;
+  color: var(--muted);
+  text-align: center;
+}
+</style>
diff --git a/frontend/src/components/MovieCard.vue b/frontend/src/components/MovieCard.vue
index f4a122c..0bc930e 100644
--- a/frontend/src/components/MovieCard.vue
+++ b/frontend/src/components/MovieCard.vue
@@ -1,10 +1,11 @@
 <script setup>
 import { computed } from 'vue'
-import { posterUrl } from '../images'
+import { backdropUrl, posterUrl } from '../images'
 
 const props = defineProps({
   movie: { type: Object, required: true },
   aufDemRad: { type: Boolean, default: false },
+  ansicht: { type: String, default: 'kompakt' },
 })
 
 defineEmits(['open'])
@@ -14,6 +15,11 @@ const rating = computed(() =>
   props.movie.vote_average ? props.movie.vote_average.toFixed(1) : null
 )
 
+// Drei reichen: mehr macht die Karte hoch, ohne mehr zu zeigen
+const shots = computed(() =>
+  (props.movie.images || []).slice(0, 4).map((pfad) => backdropUrl(pfad, 'w300'))
+)
+
 const meta = computed(() =>
   [props.movie.year || 'Jahr unbekannt', props.movie.runtime && `${props.movie.runtime} Min.`]
     .filter(Boolean)
@@ -24,25 +30,108 @@ const meta = computed(() =>
 <template>
   <button
     class="card"
-    :class="{ 'auf-dem-rad': aufDemRad }"
+    :class="[ansicht, { 'auf-dem-rad': aufDemRad }]"
     type="button"
     @click="$emit('open', movie)"
   >
     <span v-if="aufDemRad" class="rad-marke" title="Steht auf dem Rad">Rad</span>
-    <div class="poster">
-      <img v-if="poster" :src="poster" :alt="movie.title" loading="lazy" />
-      <span v-else class="placeholder">Kein Cover</span>
-      <span v-if="rating" class="rating">{{ rating }}</span>
+    <div class="haupt">
+      <div class="poster">
+        <img v-if="poster" :src="poster" :alt="movie.title" loading="lazy" />
+        <span v-else class="placeholder">Kein Cover</span>
+        <span v-if="rating" class="rating">{{ rating }}</span>
+      </div>
+      <div class="body">
+        <h2>{{ movie.title }}</h2>
+        <p class="meta">{{ meta }}</p>
+        <template v-if="ansicht === 'details'">
+          <p v-if="movie.genres?.length" class="genres">
+            {{ movie.genres.join(' · ') }}
+          </p>
+          <p v-if="movie.vote_count" class="stimmen">
+            ★ {{ rating }} aus {{ movie.vote_count.toLocaleString('de-DE') }} Stimmen
+          </p>
+        </template>
+        <p class="teaser">{{ movie.teaser || movie.overview }}</p>
+      </div>
     </div>
-    <div class="body">
-      <h2>{{ movie.title }}</h2>
-      <p class="meta">{{ meta }}</p>
-      <p class="teaser">{{ movie.teaser || movie.overview }}</p>
+
+    <div v-if="ansicht === 'details' && shots.length" class="shots">
+      <img
+        v-for="(shot, i) in shots"
+        :key="shot"
+        :src="shot"
+        :alt="`${movie.title} – Szenenbild ${i + 1}`"
+        loading="lazy"
+      />
     </div>
   </button>
 </template>
 
 <style scoped>
+/* Details: breite Karte, Poster links, alles lesbar statt abgeschnitten */
+.haupt {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Details: vier Spalten — Cover, Text, dann zweimal zwei Bilder.
+   .haupt löst sich auf, damit Cover und Text eigene Spalten sind. */
+.card.details {
+  display: grid;
+  grid-template-columns: 150px minmax(180px, 1fr) 340px;
+  /* Feste Zeilenhöhe nach dem Cover: sonst sind Reihen höher als
+     Einzelfilme, weil bei ihnen die Teil-Zeile dazukommt */
+  grid-template-rows: 225px;
+  gap: 0.9rem;
+  align-items: stretch;
+  padding: 0.8rem;
+}
+
+.card.details .haupt {
+  display: contents;
+}
+
+.card.details .poster {
+  width: 150px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* Feste 16:9 statt Streckung — sonst zieht ein langer Teaser die Bilder
+   in die Länge */
+/* Zwei Spalten mit je zwei Bildern untereinander */
+.shots {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.shots img {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border-radius: 6px;
+}
+
+/* Der Teaser bleibt auf vier Zeilen — sonst wird die Karte höher als die
+   kompakte, und die soll das Maß bleiben */
+
+.card.details .body {
+  padding: 0;
+}
+
+.genres,
+.stimmen {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.stimmen {
+  color: #f5c518;
+}
+
 .card {
   position: relative;
   display: flex;
@@ -105,8 +194,8 @@ const meta = computed(() =>
 
 .rating {
   position: absolute;
+  top: 0.5rem;
   right: 0.5rem;
-  bottom: 0.5rem;
   padding: 0.15rem 0.45rem;
   font-size: 0.8rem;
   font-weight: 600;
@@ -150,4 +239,9 @@ h2 {
   font-size: 0.85rem;
   line-height: 1.45;
 }
+
+.card.details .body,
+.card.details .shots {
+  overflow: hidden;
+}
 </style>
diff --git a/frontend/src/components/MovieDetail.vue b/frontend/src/components/MovieDetail.vue
index f86e9b8..ef1cb96 100644
--- a/frontend/src/components/MovieDetail.vue
+++ b/frontend/src/components/MovieDetail.vue
@@ -7,11 +7,11 @@ const props = defineProps({
   series: { type: Array, default: () => [] },
   meinVorschlag: { type: Object, default: null },
   host: { type: Boolean, default: false },
-  name: { type: String, default: '' },
   gesehen: { type: Boolean, default: false },
+  gemerkt: { type: Boolean, default: false },
 })
 
-const emit = defineEmits(['close', 'open', 'suggested', 'watched'])
+const emit = defineEmits(['close', 'open', 'suggested', 'watched', 'gemerkt'])
 
 const vorschlagen = ref({ zustand: 'bereit' })
 
@@ -19,6 +19,16 @@ const schonVorgeschlagen = computed(
   () => props.meinVorschlag?.movie_id === props.movie.id
 )
 
+async function merkenUmschalten() {
+  const weg = props.gemerkt
+  await fetch(weg ? `/api/wishlist/${props.movie.id}` : '/api/wishlist', {
+    method: weg ? 'DELETE' : 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: weg ? undefined : JSON.stringify({ movie_id: props.movie.id }),
+  })
+  emit('gemerkt')
+}
+
 async function zuruecknehmen() {
   vorschlagen.value = { zustand: 'laeuft' }
   try {
@@ -37,11 +47,7 @@ async function abschicken() {
     const resp = await fetch('/api/suggestions', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        movie_id: props.movie.id,
-        // Der Name steht oben rechts, einmal für alles
-        name: props.name || null,
-      }),
+      body: JSON.stringify({ movie_id: props.movie.id }),
     })
     if (!resp.ok) throw new Error()
     vorschlagen.value = { zustand: 'fertig' }
@@ -73,6 +79,13 @@ const poster = computed(() => posterUrl(props.movie.poster_path, 'w342'))
 const shots = computed(() =>
   (props.movie.images || []).map((path) => backdropUrl(path, 'w780'))
 )
+
+// Ein angeklicktes Bild legt sich in voller Größe über die Ansicht
+const grossesBild = ref(null)
+
+function bildZeigen(index) {
+  grossesBild.value = backdropUrl((props.movie.images || [])[index], 'original')
+}
 const trailer = computed(() =>
   props.movie.trailer_key
     ? `https://www.youtube-nocookie.com/embed/${props.movie.trailer_key}`
@@ -83,7 +96,9 @@ const runtime = computed(() =>
 )
 
 function onKey(event) {
-  if (event.key === 'Escape') emit('close')
+  if (event.key !== 'Escape') return
+  if (grossesBild.value) grossesBild.value = null
+  else emit('close')
 }
 
 function openPart(part) {
@@ -126,7 +141,7 @@ onUnmounted(() => {
           </p>
           <p class="genres">{{ (movie.genres || []).join(' · ') }}</p>
           <p v-if="movie.teaser" class="teaser">{{ movie.teaser }}</p>
-          <div class="links">
+          <div class="spalte-links">
             <a
               v-if="movie.on_netflix"
               class="netflix"
@@ -147,7 +162,10 @@ onUnmounted(() => {
             </a>
           </div>
 
-          <div class="vorschlag">
+          <div v-if="!host" class="vorschlag">
+            <button type="button" class="merken" :class="{ an: gemerkt }" @click="merkenUmschalten">
+              {{ gemerkt ? 'Gemerkt' : 'Merken' }}
+            </button>
             <template v-if="schonVorgeschlagen || vorschlagen.zustand === 'fertig'">
               <span class="ok">Steht auf dem Rad.</span>
               <button
@@ -195,6 +213,7 @@ onUnmounted(() => {
         </div>
       </header>
 
+      <div class="links">
       <section v-if="series.length">
         <h3>{{ movie.collection_name || 'Die Reihe' }}</h3>
         <div class="series">
@@ -223,9 +242,9 @@ onUnmounted(() => {
         <h3>Handlung</h3>
         <p class="overview">{{ movie.overview }}</p>
       </section>
+      </div>
 
-      <section v-if="trailer">
-        <h3>Trailer</h3>
+      <section v-if="trailer" class="rechts">
         <div class="video">
           <iframe
             :src="trailer"
@@ -235,21 +254,29 @@ onUnmounted(() => {
           ></iframe>
         </div>
       </section>
-      <p v-else class="no-trailer">Für diesen Film liegt kein Trailer vor.</p>
 
-      <section v-if="shots.length">
-        <h3>Bilder</h3>
+      <section v-if="shots.length" class="shots-section">
         <div class="shots">
-          <img
+          <button
             v-for="(shot, index) in shots"
             :key="shot"
-            :src="shot"
-            :alt="`${movie.title} – Szenenbild ${index + 1}`"
-            loading="lazy"
-          />
+            type="button"
+            class="shot"
+            @click="bildZeigen(index)"
+          >
+            <img
+              :src="shot"
+              :alt="`${movie.title} – Szenenbild ${index + 1}`"
+              loading="lazy"
+            />
+          </button>
         </div>
       </section>
     </article>
+
+    <div v-if="grossesBild" class="lupe" @click="grossesBild = null">
+      <img :src="grossesBild" :alt="movie.title" />
+    </div>
   </div>
 </template>
 
@@ -268,7 +295,11 @@ onUnmounted(() => {
 
 .sheet {
   position: relative;
-  width: min(880px, 100%);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 0 1.75rem;
+  align-content: start;
+  width: min(1700px, 100%);
   height: fit-content;
   padding: 1.75rem;
   background: var(--bg-soft);
@@ -276,6 +307,35 @@ onUnmounted(() => {
   border-radius: 14px;
 }
 
+/* Links Cover, Text und Knöpfe, rechts der Trailer, darunter die Bilder */
+.sheet > header,
+.sheet > .spalte-links {
+  grid-column: 1;
+}
+
+.sheet > .rechts {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+}
+
+.sheet > .shots-section {
+  grid-column: 1 / -1;
+}
+
+@media (max-width: 1100px) {
+  .sheet {
+    grid-template-columns: 1fr;
+  }
+
+  .sheet > .rechts,
+  .sheet > .shots-section,
+  .sheet > header,
+  .sheet > .spalte-links {
+    grid-column: 1;
+    grid-row: auto;
+  }
+}
+
 .close {
   position: absolute;
   top: 0.5rem;
@@ -297,7 +357,8 @@ header {
 
 .poster {
   flex-shrink: 0;
-  width: 160px;
+  align-self: flex-start;
+  width: 130px;
   border-radius: 10px;
 }
 
@@ -391,6 +452,24 @@ h2 {
   cursor: default;
 }
 
+.merken {
+  padding: 0.45rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 7px;
+}
+
+.merken:hover {
+  border-color: var(--accent);
+}
+
+.merken.an {
+  color: #6bbf7a;
+  border-color: #6bbf7a;
+}
+
 .gesehen {
   display: flex;
   flex-wrap: wrap;
@@ -516,8 +595,8 @@ h3 {
 
 .shots {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.7rem;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 0.6rem;
 }
 
 .shots img {
@@ -539,11 +618,6 @@ h3 {
   border-radius: 8px;
 }
 
-.no-trailer {
-  color: var(--muted);
-  font-size: 0.88rem;
-}
-
 @media (max-width: 620px) {
   header {
     flex-direction: column;
@@ -557,4 +631,31 @@ h3 {
     grid-template-columns: 1fr;
   }
 }
+
+.shot {
+  display: block;
+  padding: 0;
+  cursor: zoom-in;
+}
+
+.shot:hover img {
+  outline: 2px solid var(--accent);
+}
+
+.lupe {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  padding: 2rem;
+  cursor: zoom-out;
+  background: rgba(0, 0, 0, 0.9);
+}
+
+.lupe img {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 8px;
+}
 </style>
diff --git a/frontend/src/components/NamensWahl.vue b/frontend/src/components/NamensWahl.vue
new file mode 100644
index 0000000..04c2568
--- /dev/null
+++ b/frontend/src/components/NamensWahl.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  mine: { type: Object, default: null },
+})
+
+const emit = defineEmits(['waehlen'])
+
+// Firefox zeichnet die Optionsliste eines <select> unter Linux im
+// System-Theme, hell und blau. Deshalb ein eigenes Menü.
+const offen = ref(false)
+const halter = ref(null)
+
+function waehlen(id) {
+  offen.value = false
+  emit('waehlen', id)
+}
+
+function daneben(e) {
+  if (halter.value && !halter.value.contains(e.target)) offen.value = false
+}
+
+function escape(e) {
+  if (e.key === 'Escape') offen.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('click', daneben)
+  document.addEventListener('keydown', escape)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', daneben)
+  document.removeEventListener('keydown', escape)
+})
+</script>
+
+<template>
+  <div ref="halter" class="wahl">
+    <button type="button" class="knopf" :class="{ offen }" @click="offen = !offen">
+      {{ mine ? mine.name : 'Anonym' }}
+    </button>
+
+    <ul v-if="offen" class="menue">
+      <li>
+        <button type="button" :class="{ aktiv: !mine }" @click="waehlen(null)">
+          Anonym
+        </button>
+      </li>
+      <li v-for="u in items" :key="u.id">
+        <button type="button" :class="{ aktiv: mine?.id === u.id }" @click="waehlen(u.id)">
+          {{ u.name }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.wahl {
+  position: relative;
+  align-self: center;
+  margin-left: auto;
+}
+
+.knopf {
+  padding: 0.32rem 0.7rem;
+  color: var(--text);
+  font-size: 0.82rem;
+  background: var(--bg-soft);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+
+.knopf:hover,
+.knopf.offen {
+  border-color: var(--accent);
+}
+
+.menue {
+  position: absolute;
+  top: calc(100% + 0.3rem);
+  right: 0;
+  z-index: 40;
+  min-width: 9rem;
+  max-height: 60vh;
+  overflow-y: auto;
+  padding: 0.25rem;
+  list-style: none;
+  background: var(--bg-soft);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+
+.menue button {
+  display: block;
+  width: 100%;
+  padding: 0.4rem 0.6rem;
+  color: var(--text);
+  font-size: 0.85rem;
+  text-align: left;
+  border-radius: 5px;
+}
+
+.menue button:hover {
+  background: var(--bg);
+}
+
+.menue button.aktiv {
+  color: var(--accent);
+  font-weight: 600;
+}
+</style>
diff --git a/frontend/src/components/SeriesCard.vue b/frontend/src/components/SeriesCard.vue
index 41f3bbe..20a20fb 100644
--- a/frontend/src/components/SeriesCard.vue
+++ b/frontend/src/components/SeriesCard.vue
@@ -1,12 +1,13 @@
 <script setup>
 import { computed, ref } from 'vue'
-import { posterUrl } from '../images'
+import { backdropUrl, posterUrl } from '../images'
 
 const props = defineProps({
   parts: { type: Array, required: true },
   // Die Karte öffnet mit dem stärksten Teil, nicht mit dem ersten
   start: { type: Number, default: 0 },
   aufDemRad: { type: Array, default: () => [] },
+  ansicht: { type: String, default: 'kompakt' },
 })
 
 defineEmits(['open'])
@@ -20,6 +21,10 @@ const rating = computed(() =>
 
 const stehtAufDemRad = computed(() => props.aufDemRad.includes(current.value.id))
 
+const shots = computed(() =>
+  (current.value.images || []).slice(0, 4).map((pfad) => backdropUrl(pfad, 'w300'))
+)
+
 const meta = computed(() =>
   [current.value.year || 'Jahr unbekannt', current.value.runtime && `${current.value.runtime} Min.`]
     .filter(Boolean)
@@ -33,35 +38,54 @@ function step(delta) {
 </script>
 
 <template>
-  <article class="card" :class="{ 'auf-dem-rad': stehtAufDemRad }">
+  <article class="card" :class="[ansicht, { 'auf-dem-rad': stehtAufDemRad }]">
     <span v-if="stehtAufDemRad" class="rad-marke" title="Steht auf dem Rad">Rad</span>
-    <button class="poster" type="button" @click="$emit('open', current)">
-      <img v-if="poster" :src="poster" :alt="current.title" loading="lazy" />
-      <span v-else class="placeholder">Kein Cover</span>
-      <span v-if="rating" class="rating">{{ rating }}</span>
-    </button>
+    <div class="haupt">
+      <button class="poster" type="button" @click="$emit('open', current)">
+        <img v-if="poster" :src="poster" :alt="current.title" loading="lazy" />
+        <span v-else class="placeholder">Kein Cover</span>
+        <span v-if="rating" class="rating">{{ rating }}</span>
+      </button>
 
-    <div class="nav">
-      <button type="button" aria-label="Vorheriger Teil" @click="step(-1)">‹</button>
-      <div class="dots">
-        <button
-          v-for="(part, i) in parts"
-          :key="part.id"
-          type="button"
-          class="dot"
-          :class="{ on: i === index }"
-          :title="part.title"
-          @click="index = i"
-        ></button>
+      <div class="nav">
+        <button type="button" aria-label="Vorheriger Teil" @click="step(-1)">‹</button>
+        <div class="dots">
+          <button
+            v-for="(part, i) in parts"
+            :key="part.id"
+            type="button"
+            class="dot"
+            :class="{ on: i === index }"
+            :title="part.title"
+            @click="index = i"
+          ></button>
+        </div>
+        <button type="button" aria-label="Nächster Teil" @click="step(1)">›</button>
+      </div>
+
+      <div class="body">
+        <h2 @click="$emit('open', current)">{{ current.title }}</h2>
+        <p class="meta">{{ meta }}</p>
+        <template v-if="ansicht === 'details'">
+          <p v-if="current.genres?.length" class="genres">
+            {{ current.genres.join(' · ') }}
+          </p>
+          <p v-if="current.vote_count" class="stimmen">
+            ★ {{ rating }} aus {{ current.vote_count.toLocaleString('de-DE') }} Stimmen
+          </p>
+        </template>
+        <p class="teaser">{{ current.teaser || current.overview }}</p>
       </div>
-      <button type="button" aria-label="Nächster Teil" @click="step(1)">›</button>
     </div>
 
-    <div class="body">
-      <p class="counter">Teil {{ index + 1 }} von {{ parts.length }}</p>
-      <h2 @click="$emit('open', current)">{{ current.title }}</h2>
-      <p class="meta">{{ meta }}</p>
-      <p class="teaser">{{ current.teaser || current.overview }}</p>
+    <div v-if="ansicht === 'details' && shots.length" class="shots">
+      <img
+        v-for="(shot, i) in shots"
+        :key="shot"
+        :src="shot"
+        :alt="`${current.title} – Szenenbild ${i + 1}`"
+        loading="lazy"
+      />
     </div>
   </article>
 </template>
@@ -108,8 +132,8 @@ function step(delta) {
 
 .rating {
   position: absolute;
+  top: 0.5rem;
   right: 0.5rem;
-  bottom: 0.5rem;
   padding: 0.15rem 0.45rem;
   font-size: 0.8rem;
   font-weight: 600;
@@ -125,14 +149,6 @@ function step(delta) {
   padding: 0.85rem;
 }
 
-.counter {
-  color: var(--accent);
-  font-size: 0.7rem;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
 h2 {
   /* Feste Höhe für drei Zeilen: sonst rutschen die Kacheln einer Reihe
      unterschiedlich weit nach unten */
@@ -169,29 +185,37 @@ h2:hover {
   line-height: 1.45;
 }
 
+/* Die Leiste liegt über dem unteren Cover-Rand. Der negative Abstand
+   entspricht ihrer Höhe, damit Reihen genauso hoch sind wie Einzelfilme —
+   sonst zieht eine Reihe die ganze Zeile mit in die Länge. */
 .nav {
+  position: relative;
+  z-index: 1;
   display: flex;
+  height: 2rem;
+  margin: -2rem 0.4rem 0;
   align-items: center;
   gap: 0.4rem;
-  padding: 0.5rem 0.6rem;
-  border-bottom: 1px solid var(--line);
+  padding: 0 0.5rem;
+  /* Auf hellen Covern ging die Leiste sonst unter */
+  background: rgba(0, 0, 0, 0.88);
+  border-radius: 6px;
 }
 
 .nav > button {
   width: 1.7rem;
   height: 1.7rem;
   flex-shrink: 0;
-  color: var(--muted);
+  color: #fff;
   font-size: 1.2rem;
   line-height: 1;
-  background: var(--bg);
-  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.12);
+  border: 0;
   border-radius: 6px;
 }
 
 .nav > button:hover {
-  color: var(--text);
-  border-color: var(--accent);
+  background: var(--accent);
 }
 
 .dots {
@@ -206,7 +230,7 @@ h2:hover {
   width: 0.42rem;
   height: 0.42rem;
   padding: 0;
-  background: var(--line);
+  background: rgba(255, 255, 255, 0.35);
   border-radius: 50%;
 }
 
@@ -215,7 +239,7 @@ h2:hover {
 }
 
 .dot:hover {
-  background: var(--muted);
+  background: #fff;
 }
 
 .card.auf-dem-rad {
@@ -237,4 +261,87 @@ h2:hover {
   background: #6bbf7a;
   border-radius: 4px;
 }
+
+.haupt {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Details: links die gewohnte Karte, rechts die Bilder */
+/* Details: vier Spalten — Cover, Text, dann zweimal zwei Bilder.
+   .haupt löst sich auf, damit Cover und Text eigene Spalten sind. */
+.card.details {
+  display: grid;
+  grid-template-columns: 150px minmax(180px, 1fr) 340px;
+  /* Feste Zeilenhöhe nach dem Cover: sonst sind Reihen höher als
+     Einzelfilme, weil bei ihnen die Teil-Zeile dazukommt */
+  grid-template-rows: 225px;
+  gap: 0.9rem;
+  align-items: stretch;
+  padding: 0.8rem;
+}
+
+.card.details .haupt {
+  display: contents;
+}
+
+.card.details .poster {
+  grid-area: 1 / 1;
+  width: 150px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* Die Blätterleiste liegt über dem unteren Cover-Rand. In einer eigenen
+   Zeile würde sie die Reihenkarten höher machen als die anderen. */
+.card.details .nav {
+  grid-area: 1 / 1;
+  align-self: end;
+  margin: 0 0.4rem 0.4rem;
+}
+
+.card.details .body {
+  grid-area: 1 / 2;
+}
+
+.card.details .shots {
+  grid-area: 1 / 3;
+}
+
+.card.details .body {
+  padding: 0;
+}
+
+/* Der Teaser bleibt auf vier Zeilen — sonst wird die Karte höher als die
+   kompakte, und die soll das Maß bleiben */
+
+.genres,
+.stimmen {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.stimmen {
+  color: #f5c518;
+}
+
+/* Zwei Spalten mit je zwei Bildern untereinander */
+.shots {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.shots img {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border-radius: 6px;
+}
+
+.card.details .body,
+.card.details .shots {
+  overflow: hidden;
+}
 </style>
diff --git a/frontend/src/components/StreamTab.vue b/frontend/src/components/StreamTab.vue
index 0144b97..4ca8d86 100644
--- a/frontend/src/components/StreamTab.vue
+++ b/frontend/src/components/StreamTab.vue
@@ -18,6 +18,37 @@ const lautstaerke = ref(1)
 const vollbild = ref(false)
 
 let hls = null
+let neustart = null
+let wache = null
+
+// Mehrere Fehler kurz hintereinander sollen nicht mehrere Timer anlegen
+function spaeterNeuLaden() {
+  if (neustart) return
+  neustart = window.setTimeout(() => {
+    neustart = null
+    hls?.startLoad()
+  }, 3000)
+}
+
+// hls.js meldet nicht jeden Hänger als Fehler. Manchmal steht die Playlist,
+// aber es kommt kein Segment — dann bleibt der Player einfach stehen, ohne
+// dass irgendetwas davon erfährt. Wer die Seite offen hat, bevor gesendet
+// wird, sitzt sonst vor einem toten Bild.
+function wacheStarten() {
+  let letzte = -1
+  let stillstand = 0
+  wache = window.setInterval(() => {
+    const v = video.value
+    if (!v || v.paused || zustand.value === 'bereit') return
+    if (v.currentTime === letzte) stillstand++
+    else stillstand = 0
+    letzte = v.currentTime
+    if (stillstand >= 5) {
+      stillstand = 0
+      hls?.startLoad()
+    }
+  }, 1000)
+}
 
 // Was der Server sendet, läuft. Wer anhält, fällt aus dem Gleichlauf und
 // müsste den Rückstand hinterher mit erhöhtem Tempo aufholen. Also lassen
@@ -90,7 +121,7 @@ function verbinden() {
     if (daten.type === Hls.ErrorTypes.NETWORK_ERROR) {
       zustand.value = 'wartet'
       // Nicht sofort neu anfragen — sonst hämmert der Browser den Server
-      window.setTimeout(() => hls?.startLoad(), 3000)
+      spaeterNeuLaden()
     } else if (daten.type === Hls.ErrorTypes.MEDIA_ERROR) {
       hls.recoverMediaError()
     } else {
@@ -99,6 +130,11 @@ function verbinden() {
     }
   })
 
+  // Kommen wieder Daten, ist die Wartemeldung überholt
+  hls.on(Hls.Events.FRAG_BUFFERED, () => {
+    if (zustand.value === 'wartet') zustand.value = 'laeuft'
+  })
+
   hls.on(Hls.Events.MANIFEST_PARSED, () => {
     zustand.value = 'laeuft'
     video.value.play().catch(() => {
@@ -126,6 +162,7 @@ function vollbildGewechselt() {
 
 onMounted(() => {
   verbinden()
+  wacheStarten()
   document.addEventListener('fullscreenchange', vollbildGewechselt)
   window.addEventListener('keydown', tasteAbfangen)
 })
@@ -133,6 +170,8 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener('fullscreenchange', vollbildGewechselt)
   window.removeEventListener('keydown', tasteAbfangen)
+  window.clearInterval(wache)
+  window.clearTimeout(neustart)
   hls?.destroy()
   hls = null
 })
diff --git a/frontend/src/components/VerwaltungTab.vue b/frontend/src/components/VerwaltungTab.vue
new file mode 100644
index 0000000..5e223cc
--- /dev/null
+++ b/frontend/src/components/VerwaltungTab.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  items: { type: Array, default: () => [] },
+})
+
+const neuerName = ref('')
+const fehler = ref('')
+
+async function anlegen() {
+  fehler.value = ''
+  const resp = await fetch('/api/users', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name: neuerName.value }),
+  })
+  if (resp.ok) neuerName.value = ''
+  else fehler.value = 'Der Name ist leer oder schon vergeben.'
+}
+
+async function entfernen(user) {
+  await fetch(`/api/users/${user.id}`, { method: 'DELETE' })
+}
+</script>
+
+<template>
+  <div class="verwaltung-tab">
+    <section>
+      <h3>Benutzer</h3>
+
+      <div class="anlegen">
+        <input
+          v-model="neuerName"
+          type="text"
+          placeholder="Name hinzufügen"
+          maxlength="40"
+          @keyup.enter="anlegen"
+        />
+        <button type="button" @click="anlegen">Hinzufügen</button>
+      </div>
+      <p v-if="fehler" class="fehler">{{ fehler }}</p>
+
+      <ul v-if="items.length" class="liste">
+        <li v-for="u in items" :key="u.id">
+          <span class="name">{{ u.name }}</span>
+          <button
+            type="button"
+            class="weg"
+            title="Aus der Runde nehmen"
+            @click="entfernen(u)"
+          >
+            ×
+          </button>
+        </li>
+      </ul>
+      <p v-else class="leer">Noch niemand in der Runde.</p>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.verwaltung-tab {
+  max-width: 26rem;
+}
+
+h3 {
+  margin-bottom: 0.8rem;
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.anlegen {
+  display: flex;
+  gap: 0.4rem;
+  margin-bottom: 1.25rem;
+}
+
+.anlegen input {
+  flex: 1;
+  padding: 0.55rem 0.8rem;
+  font-size: 0.92rem;
+}
+
+.anlegen button {
+  padding: 0.55rem 1rem;
+  font-size: 0.88rem;
+  font-weight: 600;
+  background: var(--bg-soft);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+
+.anlegen button:hover {
+  border-color: var(--accent);
+}
+
+.liste {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  list-style: none;
+}
+
+.liste li {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.55rem 0.85rem;
+  background: var(--bg-soft);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+
+.name {
+  flex: 1;
+  font-size: 0.95rem;
+}
+
+.weg {
+  padding: 0.15rem 0.4rem;
+  color: var(--muted);
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.weg:hover {
+  color: var(--accent);
+}
+
+.leer,
+.fehler {
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+
+.fehler {
+  margin-bottom: 0.8rem;
+  color: var(--accent);
+}
+</style>
diff --git a/frontend/src/components/WatchedTab.vue b/frontend/src/components/WatchedTab.vue
index b1337eb..ea7f300 100644
--- a/frontend/src/components/WatchedTab.vue
+++ b/frontend/src/components/WatchedTab.vue
@@ -3,7 +3,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { posterUrl } from '../images'
 import { abonnieren } from '../live'
 
-const props = defineProps({ host: Boolean, name: { type: String, default: '' } })
+const props = defineProps({ host: Boolean })
 const emit = defineEmits(['open', 'changed'])
 
 const items = ref([])
@@ -47,7 +47,7 @@ async function bewerten(item, sterne) {
     await fetch(`/api/watched/${item.id}/rating`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ stars: sterne, name: props.name || null }),
+      body: JSON.stringify({ stars: sterne }),
     })
   } catch {
     fehler.value = 'Bewerten hat nicht geklappt.'
diff --git a/frontend/src/components/WuenscheTab.vue b/frontend/src/components/WuenscheTab.vue
new file mode 100644
index 0000000..36e6a36
Binary files /dev/null and b/frontend/src/components/WuenscheTab.vue differ