update

frontend/src/components/WheelTab.vue

@@ -120,10 +120,27 @@ const segmente = computed(() => {
     // Auf der linken Hälfte stünde die Schrift kopfüber — dort läuft sie
     // von außen nach innen
     const gespiegelt = mitte > 180
+    // Das Cover liegt als Rechteck radial im Stück: von der Nabe nach
+    // außen, so breit wie die Sehne am Rand. So landet die Postermitte
+    // auf halbem Radius — dort, wo das Stück am besten zu sehen ist.
+    // Ein einziger Vorschlag ist ein Vollkreis — da gibt es keine Sehne,
+    // das Bild deckt dann den ganzen Kreis als Quadrat ab.
+    const voll = n === 1
+    const sehne = 2 * RADIUS * Math.sin(((schritt / 2) * Math.PI) / 180)
+    const bildBreite = voll ? 2 * RADIUS : Math.max(sehne + 12, 60)
     return {
       item,
       farbe: FARBEN[i % FARBEN.length],
       pfad: kreisstueck(start, ende),
+      bild: posterUrl(item.poster_path, 'w342'),
+      bildX: MITTE - bildBreite / 2,
+      bildY: MITTE - RADIUS - (voll ? 0 : 6),
+      bildBreite,
+      bildHoehe: voll ? 2 * RADIUS : RADIUS + 6,
+      // Im Vollkreis läge die Segmentmitte bei 180° — das Cover stünde
+      // kopfüber. Ohne Drehung bleibt es aufrecht.
+      bildDreh: voll ? 0 : mitte,
+      mitte,
       textDreh: gespiegelt ? mitte + 90 : mitte - 90,
       gespiegelt,
       // Unter dieser Segmentbreite passt kein lesbares Wort mehr hinein
@@ -245,9 +262,41 @@ async function oeffnen(item) {
             transitionDuration: `${dauer}s`,
           }"
         >
+          <defs>
+            <!-- Zur Nabe hin wird es dunkel, damit der Titel lesbar bleibt -->
+            <radialGradient
+              id="rad-schatten"
+              gradientUnits="userSpaceOnUse"
+              :cx="MITTE"
+              :cy="MITTE"
+              :r="RADIUS"
+            >
+              <stop offset="0" stop-color="#0a0a0c" stop-opacity="0.92" />
+              <stop offset="0.45" stop-color="#0a0a0c" stop-opacity="0.55" />
+              <stop offset="1" stop-color="#0a0a0c" stop-opacity="0.1" />
+            </radialGradient>
+            <clipPath v-for="seg in segmente" :id="`seg-${seg.item.id}`" :key="seg.item.id">
+              <path :d="seg.pfad" />
+            </clipPath>
+          </defs>
           <circle :cx="MITTE" :cy="MITTE" :r="RADIUS" fill="var(--bg-soft)" />
           <g v-for="(seg, i) in segmente" :key="seg.item.id">
-            <path :d="seg.pfad" :fill="seg.farbe" stroke="#0a0a0c" stroke-width="2" />
+            <g :clip-path="`url(#seg-${seg.item.id})`">
+              <path :d="seg.pfad" :fill="seg.farbe" />
+              <image
+                v-if="seg.bild"
+                :href="seg.bild"
+                :x="seg.bildX"
+                :y="seg.bildY"
+                :width="seg.bildBreite"
+                :height="seg.bildHoehe"
+                preserveAspectRatio="xMidYMid slice"
+                :transform="`rotate(${seg.bildDreh} ${MITTE} ${MITTE})`"
+              />
+              <path :d="seg.pfad" fill="url(#rad-schatten)" />
+            </g>
+            <!-- Der farbige Rand ist das Gegenstück zum Punkt in der Liste -->
+            <path :d="seg.pfad" fill="none" :stroke="seg.farbe" stroke-width="3" />
             <text
               v-if="seg.breit"
               :transform="`rotate(${seg.textDreh} ${MITTE} ${MITTE})`"
@@ -383,9 +432,11 @@ async function oeffnen(item) {
   fill: #fff;
   font-size: 13px;
   font-weight: 600;
+  /* Unter der Schrift liegt jetzt ein Cover statt einer Fläche — die
+     Kontur muss auch auf hellen Bildstellen tragen */
   paint-order: stroke;
-  stroke: rgba(0, 0, 0, 0.45);
-  stroke-width: 3px;
+  stroke: rgba(0, 0, 0, 0.75);
+  stroke-width: 3.5px;
 }
 
 .zeiger {
@@ -567,10 +618,12 @@ async function oeffnen(item) {
 /* Schon gelaufen — die Ziehung überspringt diesen Film */
 .eintrag.gesehen {
   opacity: 0.45;
+  filter: grayscale(1);
 }
 
 .eintrag.gesehen:hover {
   opacity: 1;
+  filter: none;
 }
 
 .eintrag:hover {