Ein Klick auf einen Vorschlag sah aus wie gar kein Klick

Hinter der Auswahl steckt ein Abruf bei TMDB, der Titel, Besetzung und
Bilder nachlädt — mehrere Sekunden, in denen die Oberfläche aussah wie
vorher. Wer nichts sieht, klickt noch einmal, und dann laufen zwei.
Jetzt tritt die Liste zurück, die gewählte Zeile bekommt einen
Akzentrahmen und daneben steht „Wird zugeordnet…" mit laufendem Kreis.

Dazu das Plakat je Vorschlag. „Dark" von 2017 und „Dark Shadows" von
1966 sind an einer Textzeile kaum zu unterscheiden, am Bild in einer
Zehntelsekunde — und der Server lieferte die Adresse ohnehin schon mit,
sie wurde nur weggeworfen.

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

web/app/src/style.css

@@ -649,6 +649,8 @@ h2 { font-size: var(--t-abschnitt); font-weight: 700; letter-spacing: -.015em; m
   border-radius: 50%; animation: dreh .7s linear infinite;
 }
 @keyframes dreh { to { transform: rotate(360deg); } }
+/* Derselbe Kreis, nur neben Text statt über einer leeren Fläche. */
+.spinner.klein { width: 14px; height: 14px; margin: 0; flex: none; }
 
 .attribution {
   display: flex; align-items: center; gap: var(--s-snug);
@@ -988,6 +990,38 @@ h2 { font-size: var(--t-abschnitt); font-weight: 700; letter-spacing: -.015em; m
 
 .dlg-breit { width: min(860px, 100vw - 48px); }
 
+/* ---------- Ein Vorschlag im Zuordnungsdialog ----------
+ *
+ * Mit Plakat: „Dark" von 2017 und „Dark Shadows" von 1966 sind an einer
+ * Textzeile kaum zu unterscheiden, am Bild sofort.
+ */
+.vorschlag {
+  display: flex; gap: var(--s-regular); align-items: flex-start; width: 100%;
+  background: var(--raised); border: 1px solid transparent;
+  border-radius: var(--r-karte); padding: var(--s-regular); text-align: left;
+}
+.vorschlag:hover { background: var(--elevated); border-color: var(--line); }
+.vorschlag:disabled { opacity: .4; }
+/* Die laufende Zeile bleibt hell, während die anderen zurücktreten — sonst
+ * sähe genau die, auf die man geklickt hat, am totesten aus. */
+.vorschlag.laeuft { opacity: 1; border-color: var(--accent); background: var(--elevated); }
+
+.vorschlag-bild {
+  width: 54px; aspect-ratio: 2 / 3; flex: none;
+  border-radius: var(--r-knopf); overflow: hidden; background: var(--placeholder);
+}
+.vorschlag-bild img { width: 100%; height: 100%; object-fit: cover; opacity: 0; }
+.vorschlag-bild.geladen img { opacity: 1; transition: opacity .18s ease; }
+
+.vorschlag-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.vorschlag-text .hinweis { margin: 0; }
+
+.vorschlag-lauf {
+  display: flex; align-items: center; gap: var(--s-snug); flex: none;
+  color: var(--accent); font-size: var(--t-klein); font-weight: 600;
+  align-self: center;
+}
+
 /* Die Herkunft im Zuordnungsdialog — der Pfad bricht um statt abzuschneiden,
  * weil ausgerechnet das Ende die Antwort trägt. */
 .quelle {