Post 7: die Animation ist die Titelslide und traegt deren Ueberschrift

Sie ist das erste Element im Carousel, also muss sie die ganze Sache
tragen und nicht eine Einzelheit daraus. "Das Formular baust du selbst"
beschrieb die Bedienung -- das sieht man in der Animation ohnehin.

Fliesstext faellt weg, wie auf jeder Startslide. Damit sitzt die
Ueberschrift hoeher, und die Karte muss mit: visBottom 268 statt 168
macht aus 218 px Luft dazwischen 118, den Wert aller anderen Slides.

Die drei Pixel Hoehenversatz sind kein Wert aus der Vorlage, sondern
stecken bei Post 2 bis 6 im Projektstand als headline.dy -- gesetzt von
applyEdits, und da geht das Bewegtbild nicht durch. Gemessen sassen die
Startslides bei y 95, diese bei 92. Jetzt beide bei 95: im Stand fuer
die Slides, im animSlideBauen fuer die Animation. Dort direkt als
transform, weil die Regel hinter --ey an [data-edit] haengt und das
Attribut tagEditable() setzt -- noch eine Stelle, die das Bewegtbild
auslaesst.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv

post7.html

@@ -1460,9 +1460,29 @@ if (location.search.indexOf("nur=anim") >= 0)
     {
       key: "animForm", type: "feature", dauer: 6,
       eyebrow: "Form Builder",
-      head: 'Das Formular<br><span class="a">baust du selbst.</span>',
-      body: "Frage hinzufügen, Typ wählen, Optionen eintippen. Mehr braucht es nicht.",
-      vis: "animForm", visW: 896, visLeft: 92, visBottom: 168,
+      /* Die Ueberschrift des Bewegtbilds ist die Ueberschrift des Beitrags,
+         denn es ist das erste Element im Carousel. Sie muss also die ganze
+         Sache tragen und nicht eine Einzelheit daraus. "Das Formular baust du
+         selbst" stand hier zuerst und beschrieb die Bedienung -- das sieht man
+         in der Animation ohnehin, und als Aufmacher sagt es nichts darueber,
+         wozu das gut ist.
+
+         Anders als bei Post 6 gibt es dafuer keine Vorlage: lib/produkt-daten.ts
+         der Website kennt sechs Produkte, der Form Builder ist keins davon.
+         Der Satz ist also geschrieben und nicht zitiert. */
+      head: 'Anfragen, bei denen<br><span class="a">nichts mehr fehlt.</span>',
+      /* Kein Fliesstext: die Titelslide traegt nur die Ueberschrift, so wie
+         Slide 1 in Post 6 und die Titel-Slide in Post 4. Der leere body laesst
+         contentHtml den Absatz ganz weg -- stuende dort ein leerer Absatz,
+         schoebe sein Zeilenabstand die Zeichnung nach unten. */
+      body: "",
+      /* Weiter oben als die Slides: ohne Fliesstext sitzt die Ueberschrift
+         hoeher, und mit visBottom 168 klafften 218 px zwischen ihr und der
+         Karte. 268 macht daraus 118 -- derselbe Wert wie ueberall sonst. Der
+         gewonnene Platz steht dafuer unten, was hier verkraftbar ist: die
+         Karte ist am Anfang ohnehin zur Haelfte leer, weil sie den Raum fuer
+         die spaeter erscheinenden Optionen schon reserviert. */
+      vis: "animForm", visW: 896, visLeft: 92, visBottom: 268,
     },
   ];
 
@@ -5127,6 +5147,19 @@ if (location.search.indexOf("nur=anim") >= 0)
     content.innerHTML = contentHtml(a, 0);
     page.appendChild(content);
 
+    /* Die Ueberschrift drei Pixel tiefer, wie auf den Startslides von Post 2
+       bis 6. Dort steckt der Wert im Projektstand als headline.dy, gesetzt von
+       applyEdits -- und da geht das Bewegtbild nicht durch, es baut sein Blatt
+       selbst. Seit es das erste Element im Carousel ist, faellt der
+       Unterschied auf: gemessen sassen die anderen bei y 95, dieses bei 92.
+
+       Direkt als transform und nicht ueber --ey: die Regel, die daraus eine
+       Verschiebung macht, haengt an [data-edit], und das Attribut setzt
+       tagEditable() -- eine weitere Stelle, die das Bewegtbild nicht
+       durchlaeuft. Mit --ey allein passierte gar nichts. */
+    const kopf = content.querySelector(".headline");
+    if (kopf) kopf.style.transform = "translateY(3px)";
+
     const v = document.createElement("div");
     v.className = "vis vis-" + a.vis;
     v.style.cssText =

state/post7.json

@@ -35,18 +35,27 @@
     "dx": 0,
     "dy": 0
    },
+   "headline": {
+    "dy": 3
+   },
    "vis": {
     "dx": 0,
     "dy": -28
    }
   },
   {
+   "headline": {
+    "dy": 3
+   },
    "vis": {
     "dx": 0,
     "dy": -126
    }
   },
   {
+   "headline": {
+    "dy": 3
+   },
    "vis": {
     "dx": 0,
     "dy": -162