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