Vorschlag umschaltbar, Wertungen einzeln löschbar

Wer einen Film aufs Rad gesetzt hat, kann ihn dort auch wieder runternehmen.
Im Raster tragen alle Filme auf dem Rad jetzt eine Marke, nicht nur der
eigene Vorschlag — so sieht man auf einen Blick, was schon vorgeschlagen
ist. Die Karten hören dafür am Live-Kanal mit.

Dazu: der Host löscht einzelne Wertungen, das Cover dockt oben an statt
mittig, und die Suche heißt schlicht "Globale Suche".

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

frontend/src/components/MovieCard.vue

@@ -4,6 +4,7 @@ import { posterUrl } from '../images'
 
 const props = defineProps({
   movie: { type: Object, required: true },
+  aufDemRad: { type: Boolean, default: false },
 })
 
 defineEmits(['open'])
@@ -21,7 +22,13 @@ const meta = computed(() =>
 </script>
 
 <template>
-  <button class="card" type="button" @click="$emit('open', movie)">
+  <button
+    class="card"
+    :class="{ '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>
@@ -37,6 +44,7 @@ const meta = computed(() =>
 
 <style scoped>
 .card {
+  position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -47,6 +55,27 @@ const meta = computed(() =>
   transition: transform 0.15s ease, border-color 0.15s ease;
 }
 
+/* Steht der Film auf dem Rad, soll man das im Raster sehen */
+.card.auf-dem-rad {
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+.rad-marke {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  z-index: 1;
+  padding: 0.1rem 0.4rem;
+  color: #fff;
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: var(--accent);
+  border-radius: 4px;
+}
+
 .card:hover,
 .card:focus-visible {
   transform: translateY(-4px);