diff --git a/web/app/src/style.css b/web/app/src/style.css
index e67a973..3743aa9 100644
--- a/web/app/src/style.css
+++ b/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;