Die Knöpfe bleiben, die Inhaltsangabe klappt auf

Ich hatte „die Beschreibung nur beim Hovern" gelesen und daraufhin
Beschreibung *und* Knöpfe ausgeblendet. Die Knöpfe gehören immer dahin: in
Ruhe steht oben, was läuft und was man damit tun kann.

Die Inhaltsangabe dagegen steht erst da, wenn man es will. Zwei Sekunden
auf dem Titel stehenbleiben, dann fährt er hoch und darunter klappt sie
auf; wer nur vorbeifährt, sieht nichts. Gibt es keine, passiert gar
nichts — der Absatz fällt dann ganz aus dem Fluss.

**Angefasst wird am Titel, losgelassen am ganzen Aufmacher.** Das ist die
ganze Vorsicht an dieser Stelle. Beim Aufklappen wächst der Block nach
oben, der Titel rückt um 77 Bildpunkte weg und steht nicht mehr unter dem
Zeiger. Hinge das Zuklappen an seinem `:hover`, wäre das die erste Hälfte
einer Schaukel. Der Aufmacher selbst kann das nicht: gemessen, offen wie
zu, 476 px hoch ab 48 — auf den Bildpunkt derselbe Kasten.

**Die Höhe wird gemessen, nicht geraten.** Nach `auto` lässt sich nicht
überblenden, und eine feste Obergrenze wäre bei einer einzeiligen Angabe
zu drei Vierteln Leerlauf. Gemessen wird bei jedem Folienwechsel und bei
jeder Fensteränderung; `scrollHeight` ginge nicht, der meldet bei einem
`-webkit-box` die ungeklammerte Höhe.

**Der Rasterabstand wandert mit.** Gemessen: zugeklappt stehen zwischen
Eckdaten und Knopfzeile 16 px — mit Inhaltsangabe wie ohne, und genau so
viele wie vorher. Aufgeklappt sind es 12 über und 16 unter dem Text, und
die Knopfzeile steht still (Unterkante 492 in beiden Zuständen).

Nebenbei kommt das Abbruchsignal endlich an: `hero()` nahm eines
entgegen, aber `main.ts` baute die Startseite ohne. Sie wird gemerkt — ihr
Neun-Sekunden-Takt lief also weiter, während man längst woanders war.

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

web/app/src/style.css

@@ -1218,45 +1218,44 @@ 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.**
+/* **Die Inhaltsangabe klappt auf, wenn man auf dem Titel stehenbleibt.**
  *
- * 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.
+ * In Ruhe steht da, *was* läuft und *was man tun kann*: Schriftzug oder Name,
+ * Eckdaten — und die Knöpfe, immer. Worum es geht, steht nicht da und nimmt
+ * auch keinen Platz. Wer zwei Sekunden auf dem Titel stehenbleibt, bekommt
+ * es; wer vorbeifährt, nicht.
  *
- * **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.
+ * **Die zwei Sekunden stehen nicht hier, sondern in `hero.ts`.** Eine
+ * `transition-delay` käme auch dann zum Zug, wenn der Zeiger nur quer über den
+ * Titel streicht — die Verzögerung soll aber eine Absicht abwarten und nicht
+ * eine Bewegung aussitzen. Sie überlebt dadurch auch „Bewegung reduzieren":
+ * die globale Regel oben flacht die Überblendung ab, nicht die Geduld.
  *
- * **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.)
+ * **Die Höhe kommt gemessen aus `hero.ts`.** Nach `auto` lässt sich nicht
+ * überblenden, und eine feste Obergrenze wäre bei einer einzeiligen Angabe zu
+ * drei Vierteln Leerlauf: die Bewegung stünde nach 100 ms und liefe weitere
+ * 240 ms unsichtbar weiter. Gemessen wird bei jedem Folienwechsel und bei
+ * jeder Fensteränderung — drei Zeilen sind bei 620 px Breite andere als bei
+ * 380.
  *
- * **Langsamer herein als hinaus**, 340 gegen 220 Millisekunden. Das
- * Erscheinen soll man sehen, das Verschwinden nicht abwarten müssen.
+ * **Der Rasterabstand wandert mit.** `.hero-inhalt` setzt 12 px zwischen alle
+ * Kinder; eine Zeile ohne Höhe hätte trotzdem zwei davon um sich, und in Ruhe
+ * stünden 24 px zwischen Eckdaten und Knopfzeile statt 12. Der negative
+ * `margin-top` zieht sie ab und gibt sie im selben Takt zurück. Mit `padding`
+ * ginge das nicht — Polster lässt sich nicht wegkürzen.
  *
- * `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. */
+ * `hover: hover` wie bei den Pfeilen: wo es kein Überfahren gibt, gibt es auch
+ * kein Aufklappen — dort steht die Inhaltsangabe wie eh und je da. */
 @media (hover: hover) {
-  .hero-text,
-  .hero-knoepfe .btn {
-    opacity: 0; pointer-events: none;
-    transition: opacity .22s ease;
+  .hero-text {
+    height: 0;
+    margin-top: calc(var(--s-regular) * -1);
+    transition: height .22s ease, margin-top .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;
+  .hero-inhalt.aufgeklappt .hero-text {
+    height: var(--hero-texthoehe, 0px);
+    margin-top: 0;
+    transition: height .34s ease, margin-top .34s ease;
   }
 }
 
@@ -1291,7 +1290,8 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
  * den Zeiger ab, nicht den Fokus. */
 @media (hover: hover) {
   .hero-pfeil { opacity: 0; pointer-events: none; }
-  /* Derselbe Takt wie Text und Knöpfe: langsamer herein, schneller hinaus. */
+  /* Langsamer herein als hinaus: das Erscheinen soll man sehen, das
+     Verschwinden nicht abwarten müssen. */
   .hero:hover .hero-pfeil,
   .hero:focus-within .hero-pfeil {
     opacity: .72; pointer-events: auto;