Post 9: Format 1:1 für die Anzeige und vier neue Varianten

- Format-Schalter 4:5 / 1:1 in Post 9, Stand auf 1:1 (Meta nimmt ein
  Carousel mit Video als Anzeige nur quadratisch), Video in 1:1
- animation.mjs baut das Format der Seite, Datei mit -1x1
- Variante 2/3: Kundengeschichte nach dem weclapp-Karussell, hell und dunkel
- Variante 4/5: Zahlen-Karussell nach HERO Insights mit KfW- und
  Bitkom-Zahlen, Noah als Teaser, hell und dunkel
- post9-varianten.html zeigt alle Varianten untereinander
- Menüs und Übersicht um die Varianten ergänzt, Regel zu 1:1 in rules.md

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

animation.mjs

@@ -3,6 +3,7 @@
  *
  *   node animation.mjs post6.html          alle animierten Slides
  *   node animation.mjs post6.html 5        nur Slide 6 (nullbasiert: 5)
+ *   node animation.mjs post9.html animWebinar 1x1   im Format 1:1
  *
  * WARUM MP4 UND NICHT GIF
  * Instagram nimmt kein GIF an. Was im Feed als "kurzer animierter Beitrag"
@@ -14,7 +15,11 @@
  * DIE WERTE
  *   Behaelter    MP4, H.264 High, yuv420p
  *   Bild         1080 x 1350, also 4:5 wie unsere Standbilder -- ein Carousel
- *                schneidet alle Elemente auf das Format des ersten zu
+ *                schneidet alle Elemente auf das Format des ersten zu.
+ *                Kennt die Seite ein zweites Format (window.SLIDE_FORMAT, bisher
+ *                nur Post 9 mit 1:1 fuer die Anzeige), gilt dessen Hoehe. Das
+ *                Format kommt aus dem Projektstand oder als drittes Argument,
+ *                die Datei traegt dann ein Kennzeichen (-1x1).
  *   Bildrate     30 fps
  *   Laenge       3 s ist das Minimum, 60 s je Element das Maximum; wir liegen
  *                bei 5
@@ -40,12 +45,16 @@ const SEITE = process.argv[2] || "post6.html";
    Slide mehr und hat deshalb auch keine Position im Streifen, die sich
    verschieben koennte. Ohne Angabe werden alle des Projekts gebaut. */
 const NUR   = process.argv[3] || null;
+/* Format, wenn die Seite mehrere kennt. Ohne Angabe gilt der Projektstand. */
+const FORMAT = process.argv[4] || null;
+const ZUSATZ = FORMAT ? "&format=" + encodeURIComponent(FORMAT) : "";
 const PROJEKT = SEITE.replace(/\.html$/, "");
 
 const CHROME = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
 const PORT = 9530;
 const FPS = 30;
-const BREITE = 1080, HOEHE = 1350;
+const BREITE = 1080;
+let HOEHE = 1350, DATEI_ZUSATZ = "";
 const DATENRATE = "12M";
 const ZIEL = path.join(process.cwd(), "animation");
 
@@ -138,8 +147,16 @@ try {
 
   // Erst die Liste holen. Ohne k rendert der Modus nichts, das Skript laeuft
   // aber vollstaendig durch und window.ANIM_LISTE steht bereit.
-  await laden(SEITE + "?nur=anim");
+  await laden(SEITE + "?nur=anim" + ZUSATZ);
   const alle = await cdp.werte("window.ANIM_LISTE ? window.ANIM_LISTE() : null");
+  /* Das Format der Seite. Posts ohne zweites Format melden nichts und
+     bleiben bei 4:5. */
+  const fmt = await cdp.werte("window.SLIDE_FORMAT ? window.SLIDE_FORMAT() : null");
+  if (fmt) {
+    HOEHE = fmt.hoehe; DATEI_ZUSATZ = fmt.datei || "";
+    await cdp.ruf("Emulation.setDeviceMetricsOverride",
+      { width: BREITE, height: HOEHE, deviceScaleFactor: 1, mobile: false });
+  }
   if (!alle) throw new Error(SEITE + " kennt keine Animationen (window.ANIM_LISTE fehlt)");
   const liste = alle.filter(a => NUR == null || a.key === NUR);
   if (!liste.length) throw new Error("keine Animation" +
@@ -150,7 +167,7 @@ try {
 
   for (const a of liste) {
     const anzahl = Math.round(a.dauer * FPS);
-    await laden(SEITE + "?nur=anim&k=" + encodeURIComponent(a.key));
+    await laden(SEITE + "?nur=anim&k=" + encodeURIComponent(a.key) + ZUSATZ);
 
     /* Nachsehen, dass wirklich ein Blatt dasteht und es die richtigen Masse
        hat. Ein leeres Fenster faellt sonst erst am fertigen Video auf. */
@@ -188,7 +205,7 @@ try {
         "UMLAUT_ERLAUBT. Einen Geviertstrich ersetzt ein Punkt oder ein Komma.");
 
     const ordner = await mkdtemp(path.join(tmpdir(), "postgrid-bilder-"));
-    process.stdout.write(`  ${a.key}: ${anzahl} Bilder `);
+    process.stdout.write(`  ${a.key}: ${anzahl} Bilder, ${BREITE} x ${HOEHE} `);
     for (let n = 0; n < anzahl; n++) {
       /* Das letzte Bild ist nicht t = 1, sondern eins davor: bei einer
          Schleife waeren t = 0 und t = 1 dasselbe Bild und es haekelte kurz. */
@@ -198,7 +215,7 @@ try {
                       Buffer.from(r.data, "base64"));
       if (n % 15 === 0) process.stdout.write(".");
     }
-    const datei = path.join(ZIEL, PROJEKT + "-" + a.key + ".mp4");
+    const datei = path.join(ZIEL, PROJEKT + "-" + a.key + DATEI_ZUSATZ + ".mp4");
     process.stdout.write(" kodiere ");
     await kodieren(ordner, datei, anzahl);
     await rm(ordner, { recursive: true, force: true });