Eine Folge ist weder ein Film noch eine Serie

Die App meldete auf der Startseite „Dieser Titel ist auf dem Server nicht
mehr vorhanden" — über eine Folge, die sie selbst gerade anzeigte.

Gemessen im Quelltext: `item(id:)` probiert `/movies/{id}`, dann
`/series/{id}`, und wirft sonst `.notFound`. In „Weiterschauen" steht
eine Folge mit ihrer eigenen Kennung, und einen Endpunkt für eine
einzelne Folge gab es gar nicht. Jetzt gibt es `GET /api/v1/episodes/{id}`
— mit `SeriesId`, denn ohne die Serie fehlen der Folge Titel und Bild.
Im Simulator nachgestellt und nachgeprüft: die Seite steht.

**Zuletzt hinzugefügt.** Die App zeigte „Filme" und „Serien" — den Anfang
der Mediathek in der Reihenfolge der Datenbank, also immer denselben.
Jetzt je Mediathek eine Reihe „Neu in …", sortiert nach Zugang. Die
Kennungen beginnen nun mit `latest`, und daran hängen zwei Einstellungen,
die an einem Flaro-Server deshalb nichts taten: „Gesehenes in Neuzugängen
ausblenden" und „Aufmacher nur aus Neuzugängen".

**Geplante Titel.** `MediaItem` kennt jetzt `availableFrom`. Aufmacher und
Detailseite zeigen statt des Knopfes „Bald ist es soweit" mit dem Termin.
Die Kachel spielte trotzdem los — im Simulator kam der Spieler bis „Wird
vorbereitet …" —, also zählt ein geplanter Titel jetzt wie eine Sammlung:
nichts zu starten, der Tipp führt auf die Seite.

**Und das Bild im Aufmacher.** Bei einer angefangenen Folge stand dort ihr
Standbild statt des Bildes der Serie; wer der Serie eines ausgesucht
hatte, fand ein anderes vor. Die Kachel behält das Standbild — sie zeigt,
wo man steht —, der Aufmacher bekommt `SeriesBackdropImage`.

**Die Punkte im Karussell waren 26 × 3 Pixel.** Von drei Klicks auf
denselben Punkt traf nur der auf der Mittellinie; fünf Pixel daneben
geschah nichts. Der Knopf ist jetzt 27 Pixel hoch, sichtbar bleiben 3.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/src/api.ts

@@ -107,6 +107,8 @@ export type Angefangen = {
   durationSeconds?: number | null;
   /** Ab wann abspielbar. In der Zukunft heisst: noch nicht. */
   publishAt?: string | null;
+  /** Das breite Bild der Serie — für den Aufmacher, nicht für die Kachel. */
+  seriesBackdropImage?: string | null;
 };
 export type Bibliothek = {
   id: string; name: string;

web/app/src/hero.ts

@@ -268,7 +268,11 @@ export function angefangenAlsHero(eintrag: Angefangen): Heroeintrag {
     id: folge ? eintrag.seriesId ?? eintrag.id : eintrag.id,
     titel: eintrag.title,
     schriftzug: null,
-    hintergrund: eintrag.backdropImage ?? '',
+    // **Das Bild der Serie, nicht das der Folge.** `backdropImage` ist bei
+    // einer Folge ihr eigenes Standbild — richtig für die Kachel, falsch für
+    // eine Fläche über den halben Bildschirm: wer der Serie ein Bild
+    // ausgesucht hat, fand hier ein anderes vor.
+    hintergrund: eintrag.seriesBackdropImage ?? eintrag.backdropImage ?? '',
     jahr: eintrag.year,
     laufzeit: null,
     freigabe: null,

web/app/src/style.css

@@ -1147,16 +1147,26 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
 .hero-knoepfe .btn { height: 40px; padding: 0 var(--s-section); gap: 6px; }
 
 .hero-punkte {
-  position: absolute; right: var(--s-page); bottom: var(--s-page);
+  position: absolute; right: var(--s-page); bottom: calc(var(--s-page) - 12px);
   display: flex; gap: 6px;
 }
+
+/* **Der Strich ist drei Pixel hoch, die Fläche darf es nicht sein.**
+   Gemessen: von drei Klicks auf denselben Punkt traf nur der genau auf der
+   Mittellinie; fünf Pixel darüber oder darunter geschah nichts. Der Knopf
+   trägt deshalb jetzt 27 Pixel Höhe, von denen man 3 sieht. */
 .hero-punkt {
-  width: 26px; height: 3px; padding: 0; border: 0; border-radius: 2px;
+  width: 26px; height: 27px; padding: 0; border: 0;
+  background: none;
+  display: flex; align-items: center;
+}
+.hero-punkt::before {
+  content: ''; flex: 1; height: 3px; border-radius: 2px;
   background: rgba(255, 255, 255, .28);
   transition: background .2s ease;
 }
-.hero-punkt.an { background: var(--text); }
-.hero-punkt:hover { background: rgba(255, 255, 255, .6); }
+.hero-punkt.an::before { background: var(--text); }
+.hero-punkt:hover::before { background: rgba(255, 255, 255, .6); }
 
 @media (max-width: 860px) {
   .hero {
@@ -1164,7 +1174,7 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
     margin: calc(var(--s-loose) * -1) calc(var(--s-loose) * -1) var(--s-section);
   }
   .hero-inhalt { padding: var(--s-loose); max-width: none; }
-  .hero-punkte { right: var(--s-loose); bottom: var(--s-loose); }
+  .hero-punkte { right: var(--s-loose); bottom: calc(var(--s-loose) - 12px); }
 }
 
 /* --- Kontextmenü ---------------------------------------------------------