Die Pfeile im Aufmacher warten, bis man hinzeigt

Sie liegen über dem Bild und damit über allem, was dort steht. Bei einem
einzeiligen Titel geht das gut. „Pirates of the Caribbean — Salazars
Rache" bricht um, die erste Zeile rückt nach oben — und der linke Pfeil
sitzt auf dem ersten Buchstaben.

Ständig sichtbar ist er dort ein Fleck, auf Zuruf ein Knopf. Also
erscheinen beide erst beim Überfahren des Aufmachers, in 150 ms, und
verschwinden wieder.

`hover: hover` ist dabei die ganze Vorsicht: auf einem Tablett gibt es
kein Überfahren, und ein Knopf, der nur dabei erscheint, wäre dort
schlicht nicht erreichbar. Dort bleibt alles, wie es war — unter 860
Bildpunkten gibt es die Pfeile ohnehin nicht, da wird gewischt.

Gemessen: in Ruhe Deckung 0, kein Zeigerziel. Zeiger über dem Aufmacher:
0,72 und anklickbar. Zeiger auf dem Pfeil: 1, dunklerer Grund, und der
Klick blättert tatsächlich weiter (Tastatur-Tabulator vom Knopf „Mehr"
aus: Deckung 1, `:focus-visible` greift, Umriss 2 px) — `pointer-events:
none` hält nur den Zeiger ab, nicht den Fokus.

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

web/app/src/style.css

@@ -1233,6 +1233,27 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
 .hero-pfeil-links { left: var(--s-regular); }
 .hero-pfeil-rechts { right: var(--s-regular); }
 
+/* **Erst beim Überfahren, und nur wo es ein Überfahren gibt.**
+ *
+ * Der Pfeil liegt über dem Bild und damit über allem, was dort steht. Bei
+ * einem einzeiligen Titel geht das gut; bei „Pirates of the Caribbean —
+ * Salazars Rache" bricht die Zeile um, die zweite rutscht nach unten, und
+ * der linke Pfeil sitzt auf dem ersten Buchstaben. Ständig sichtbar ist er
+ * dort ein Fleck, auf Zuruf ist er ein Knopf.
+ *
+ * `hover: hover` ist dabei die ganze Vorsicht: auf einem Tablett gibt es
+ * kein Überfahren, und ein Knopf, der nur beim Überfahren erscheint, wäre
+ * dort schlicht nicht erreichbar. Dort bleibt alles, wie es war.
+ *
+ * Mit der Tastatur erscheint er ebenfalls — `pointer-events: none` hält nur
+ * den Zeiger ab, nicht den Fokus. */
+@media (hover: hover) {
+  .hero-pfeil { opacity: 0; pointer-events: none; }
+  .hero:hover .hero-pfeil { opacity: .72; pointer-events: auto; }
+  .hero:hover .hero-pfeil:hover { opacity: 1; background: rgba(11, 11, 13, .8); }
+  .hero-pfeil:focus-visible { opacity: 1; pointer-events: auto; }
+}
+
 .hero-punkte {
   position: absolute; right: var(--s-page); bottom: calc(var(--s-page) - 12px);
   display: flex; gap: 6px;