Ein Klick, der nichts tat, und niemand sagte warum

Eine Serienkachel kannte der Server als Titel nicht: „als gesehen markieren"
lief in eine 404, und weil das Kontextmenü die Ablehnung verschluckte, geschah
sichtbar gar nichts. Dasselbe beim Favoriten. UserItemState bekommt eine
Serienkennung, das Häkchen zieht alle Folgen mit, und was wirft, erscheint als
Meldung statt in der Browserkonsole.

Dazu eine Mehrfachauswahl in der Mediathek — gesehen, ungesehen, Metadaten
neu holen für das Gewählte, in einer Anfrage statt in zweihundert. Ein neues
Plakat steht sofort auf der Kachel, und ein Titel, den es nicht mehr gibt,
endet nicht mehr in einer Sackgasse.

Gemessen: ein POST auf /refresh ohne Rumpf antwortete nach der Erweiterung mit
404 — also genau der Aufruf „alles auffrischen", den es länger gibt als die
Auswahl. Der Rumpf wird jetzt von Hand gelesen, und beide Formen stehen in
einer Prüfung.

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

web/app/src/style.css

@@ -1186,3 +1186,103 @@ input[type="datetime-local"].feld::-webkit-calendar-picker-indicator:hover {
 @media (hover: none) {
   .kachel-mehr { opacity: .85; }
 }
+
+/* ---------- Kurze Meldungen am unteren Rand ----------
+ *
+ * **Für alles, was keinen Ort auf der Seite hat.** Eine Aktion aus einem
+ * Kontextmenü wirkt, nachdem das Menü schon zu ist — scheitert sie, gäbe es
+ * sonst nirgends Platz dafür. Vorher verschwand so ein Fehler spurlos.
+ *
+ * Über allem ausser den Dialogen (`z-index: 200`): eine Meldung, die hinter
+ * einem Dialog aufgeht, hat niemand gesehen. Dialoge liegen in der obersten
+ * Ebene des Browsers und bleiben dennoch darüber — deshalb erscheinen
+ * Meldungen aus einem Dialog weiterhin in seiner eigenen Fehlerzeile. */
+.hinweise {
+  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
+  z-index: 200; display: flex; flex-direction: column; gap: 8px;
+  align-items: center; pointer-events: none; max-width: min(520px, calc(100vw - 32px));
+}
+.hinweiszeile {
+  background: var(--raised); color: var(--text);
+  border: 1px solid var(--line); border-radius: var(--r-control);
+  padding: 10px 16px; font-size: 14px; line-height: 1.4;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
+  animation: hinweis-auf .18s ease-out;
+}
+.hinweiszeile.fehler {
+  background: #3A1B1E; border-color: rgba(229, 72, 77, .45); color: #FFB3B5;
+}
+.hinweiszeile.geht { opacity: 0; transform: translateY(6px); transition: all .2s ease-in; }
+@keyframes hinweis-auf { from { opacity: 0; transform: translateY(8px); } }
+
+@media (prefers-reduced-motion: reduce) {
+  .hinweiszeile { animation: none; }
+  .hinweiszeile.geht { transition: none; }
+}
+
+/* ---------- Mehrfachauswahl in der Mediathek ----------
+ *
+ * **Die Marke sitzt oben links**, gegenüber von Haken und Folgenzahl. Beide
+ * in dieselbe Ecke zu legen hiesse, dass die Auswahl verdeckt, was man
+ * auswählt. */
+.wahlmarke {
+  position: absolute; top: 8px; left: 8px; z-index: 4;
+  width: 26px; height: 26px; border-radius: 50%;
+  display: grid; place-items: center;
+  background: rgba(10, 10, 12, .62);
+  border: 2px solid rgba(255, 255, 255, .72);
+  backdrop-filter: blur(4px);
+  transition: background .15s ease-out, border-color .15s ease-out;
+}
+.wahlmarke svg { width: 15px; height: 15px; color: #fff; opacity: 0; transition: opacity .15s; }
+
+.kachel.gewaehlt .wahlmarke {
+  background: var(--accent); border-color: var(--accent);
+}
+.kachel.gewaehlt .wahlmarke svg { opacity: 1; }
+
+/* **Im Auswahlmodus kein Abspielknopf und kein Griff.** Beide führten
+   woandershin, und ein Klick darauf wählt jetzt nur noch aus. */
+.raster.auswahl .schweber,
+.raster.auswahl .kachel-mehr { display: none; }
+.raster.auswahl .kachel { cursor: pointer; }
+.raster.auswahl .kachel:hover .plakat { transform: scale(1.02); }
+
+/* Das Gewählte deutlich abheben — Rahmen und leichtes Abdunkeln, damit es
+   auch ohne Farbwahrnehmung zu erkennen ist. */
+.kachel.gewaehlt .plakat {
+  outline: 3px solid var(--accent); outline-offset: -3px;
+}
+.kachel.gewaehlt .plakat img { filter: brightness(.72); }
+
+/* **Die Leiste klebt unten**, über dem Inhalt, damit sie beim Scrollen durch
+   vierhundert Kacheln nicht verschwindet. */
+.auswahlleiste {
+  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
+  z-index: 90; display: flex; align-items: center; gap: var(--s-regular);
+  flex-wrap: wrap; justify-content: center;
+  max-width: min(760px, calc(100vw - 24px));
+  padding: 10px 16px;
+  background: var(--elevated); border: 1px solid var(--line);
+  border-radius: var(--r-karte);
+  box-shadow: 0 10px 32px rgba(0, 0, 0, .55);
+}
+.auswahlzahl { font-size: 14px; font-weight: 600; white-space: nowrap; }
+
+@media (max-width: 640px) {
+  .auswahlleiste { left: 12px; right: 12px; transform: none; max-width: none; }
+  .auswahlleiste .knopfreihe { width: 100%; }
+  .auswahlleiste .btn { flex: 1 1 auto; justify-content: center; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wahlmarke, .wahlmarke svg { transition: none; }
+}
+
+/* **Die Meldung weicht der Auswahlleiste aus.** Beide wollen den unteren
+   Rand; die Meldung lag zwar davor, verdeckte aber genau die Knöpfe, die man
+   als Nächstes drückt. */
+body:has(.auswahlleiste:not(.hidden)) .hinweise { bottom: 104px; }
+@media (max-width: 640px) {
+  body:has(.auswahlleiste:not(.hidden)) .hinweise { bottom: 148px; }
+}