Im Aufmacher steht in Ruhe nur, was läuft

Inhaltsangabe und Knöpfe blenden sich beim Überfahren ein und wieder aus.
In Ruhe bleibt oben nur, *was* läuft — Schriftzug oder Name, Jahr,
Laufzeit, Freigabe. Was man damit tun kann und worum es geht, kommt auf
Zuruf. So ist das Bild in Ruhe ein Bild und nicht eine Wand aus Text
darüber.

**Langsamer herein als hinaus**, 340 gegen 220 Millisekunden: das
Erscheinen soll man sehen, das Verschwinden nicht abwarten müssen. Die
Pfeile gehen denselben Takt mit; sie standen auf 150 ms und blitzten
dagegen auf.

**Der Platz bleibt reserviert.** Mit `display: none` spränge beim ersten
Überfahren der ganze Block nach oben; geschaltet wird nur die Deckung.
Gemessen an derselben Folie: 349,2 px hoch mit Deckung 0, 349,2 px mit
Deckung 1.

**Der Terminhinweis bleibt stehen.** „Ab Di., 6. Okt., 18:00 Uhr" ist
keine Handlung, sondern die Auskunft, warum hier nichts zu drücken ist —
die darf nicht erst auf Zuruf kommen. Darum trifft die Regel `.btn` und
nicht die ganze Knopfzeile.

**Der Fokus zählt wie der Zeiger.** Ein Knopf, der unsichtbar den Fokus
bekommt, ist eine Sackgasse. Gemessen, mit abgeschalteten Übergängen:
in Ruhe alles auf 0; Fokus im Aufmacher — Text 1, beide Knöpfe 1, beide
Pfeile 0,72; nach dem Verlassen wieder 0.

`hover: hover` wie bei den Pfeilen: ohne Zeiger gäbe es kein Überfahren,
und „Abspielen" wäre nicht mehr erreichbar. Dort steht alles wie immer.

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

web/app/src/style.css

@@ -1218,6 +1218,48 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
 .hero-bald span:not(.icon) { overflow: hidden; text-overflow: ellipsis; }
 .hero-bald .icon svg { width: 18px; height: 18px; }
 
+/* **Inhaltsangabe und Knöpfe kommen erst, wenn man hinzeigt.**
+ *
+ * In Ruhe steht oben nur, *was* läuft: Schriftzug oder Name, Jahr, Laufzeit.
+ * Was man damit tun kann und worum es geht, erscheint beim Überfahren — so
+ * ist das Bild in Ruhe ein Bild und nicht eine Wand aus Text darüber.
+ *
+ * **Der Platz bleibt reserviert.** Verschwinden würden die Zeilen nur mit
+ * `display: none` — und dann spränge beim ersten Überfahren der ganze Block
+ * nach oben. Hier wird nur die Deckung geschaltet; die Höhe steht still.
+ *
+ * **Der Termin bleibt sichtbar**, deshalb `.btn` und nicht die ganze
+ * Knopfzeile. „Ab Di., 6. Okt., 18:00 Uhr" ist keine Handlung, sondern die
+ * Auskunft, warum hier nichts zu drücken ist — die darf nicht erst auf
+ * Zuruf kommen. (Technisch ginge es ohnehin nicht anders: ein Kind kann
+ * nicht undurchsichtiger sein als sein Elternteil.)
+ *
+ * **Langsamer herein als hinaus**, 340 gegen 220 Millisekunden. Das
+ * Erscheinen soll man sehen, das Verschwinden nicht abwarten müssen.
+ *
+ * `hover: hover` wie bei den Pfeilen: ohne Zeiger gäbe es kein Überfahren,
+ * und „Abspielen" wäre nicht mehr erreichbar. Dort steht alles wie immer. */
+@media (hover: hover) {
+  .hero-text,
+  .hero-knoepfe .btn {
+    opacity: 0; pointer-events: none;
+    transition: opacity .22s ease;
+  }
+  /* **Der Fokus zählt wie der Zeiger.** Ein Knopf, der unsichtbar den Fokus
+     bekommt, ist eine Sackgasse: man drückt die Eingabetaste auf etwas, das
+     man nicht sieht. `pointer-events: none` hält nur den Zeiger ab, nicht
+     den Fokus — die Deckung muss es hier tun. Und wer mit der Tastatur
+     hineinspringt, soll dasselbe sehen wie der, der hinzeigt: nicht nur den
+     Knopf, sondern auch, worum es geht. */
+  .hero:hover .hero-text,
+  .hero:focus-within .hero-text,
+  .hero:hover .hero-knoepfe .btn,
+  .hero:focus-within .hero-knoepfe .btn {
+    opacity: 1; pointer-events: auto;
+    transition: opacity .34s ease;
+  }
+}
+
 /* **Pfeile am Bildrand.** Senkrecht mittig, damit sie nicht über dem Text
    liegen, und über allem anderen — sonst fängt der Textblock den Klick ab. */
 .hero-pfeil {
@@ -1226,7 +1268,7 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
   border: 0; border-radius: 50%;
   background: rgba(11, 11, 13, .55); color: var(--text);
   backdrop-filter: blur(6px);
-  opacity: .72; transition: opacity .15s ease, background .15s ease;
+  opacity: .72; transition: opacity .22s ease, background .22s ease;
 }
 .hero-pfeil:hover { opacity: 1; background: rgba(11, 11, 13, .8); }
 .hero-pfeil svg { width: 24px; height: 24px; }
@@ -1249,7 +1291,12 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
  * 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; }
+  /* Derselbe Takt wie Text und Knöpfe: langsamer herein, schneller hinaus. */
+  .hero:hover .hero-pfeil,
+  .hero:focus-within .hero-pfeil {
+    opacity: .72; pointer-events: auto;
+    transition: opacity .34s ease, background .22s ease;
+  }
   .hero:hover .hero-pfeil:hover { opacity: 1; background: rgba(11, 11, 13, .8); }
   .hero-pfeil:focus-visible { opacity: 1; pointer-events: auto; }
 }