Benutzer, Sammlungen, Wünsche und zwei Kartenansichten

Die Runde ist jetzt benannt. Der Host pflegt die Namensliste im neuen Reiter
"Verwaltung", alle anderen wählen sich oben rechts einen aus. Der Name landet
serverseitig an Vorschlägen und Wertungen, statt aus einem Textfeld zu
kommen, in das jeder schreiben konnte, was er wollte.

Dazu zwei Sammelstellen, beide nach Person gruppiert und für alle sichtbar,
aber nur selbst bearbeitbar:
- "Sammlungen": Filme, die man sehen möchte. Getrennt vom Rad-Vorschlag,
  von dem es weiterhin einen je Person gibt.
- "Wünsche": was der Seite noch fehlt. Der Host darf hier alle Einträge
  ändern und löschen.

Die Filmliste hat jetzt zwei Ansichten. Kompakt ist die gewohnte Karte,
Details stellt Cover, Text und vier Szenenbilder nebeneinander — eine Karte
so breit wie vier kompakte oder die halbe Reihe, je nachdem was zuerst
zutrifft. Reihen und Einzelfilme sind dabei exakt gleich hoch; die
Blätterleiste liegt dafür über dem Cover statt darunter.

Die Filmansicht nutzt die Breite: links Cover, Text und Knöpfe, rechts der
Trailer, darunter die Bilder. Ein Klick zeigt ein Bild in voller Größe.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013XVnRop5c3or3B8xE2hpgZ

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);

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>

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>

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>

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>

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>

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>

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
 })

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>

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.'