Post 9: Varianten überarbeitet, Variante 6 und 7 nach Noahs Arbeitsheft

- Variante 2/3: Webinar statt HiveGrid, Noahs Satz zum Kopf des Chefs,
  vorher und heute am Beispiel „Angebot nachfassen“ als Schema
- Variante 4/5: drei verschiedene Grafiken, Wabenanimation gelb dann rot,
  Titel mit Wabenwelle animiert
- Variante 6/7: Aussagen, Zeichnungen und Schriften aus „Jede Frage lief
  über meinen Tisch“, Titel dunkel, Pfeile werden gezeichnet (Test)
- post9-hub.mjs legt alle Varianten als Bilder und Videos ins Marketing-Hub
- Menüs aller Posts und Übersicht mit Variante 6 und 7

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

post9-varianten.html

@@ -66,13 +66,15 @@
   <a href="./post9-v3.html">Variante 3 bearbeiten</a>
   <a href="./post9-v4.html">Variante 4 bearbeiten</a>
   <a href="./post9-v5.html">Variante 5 bearbeiten</a>
+  <a href="./post9-v6.html">Variante 6 bearbeiten</a>
+  <a href="./post9-v7.html">Variante 7 bearbeiten</a>
 </div>
 
 <main class="stage" id="stage">
   <div class="flaeche">
     <div class="kopf">
       <h1>Post 9 · Webinar-Anzeige</h1>
-      <p id="meta">Fünf Varianten derselben Anzeige. Lade Streifen ...</p>
+      <p id="meta">Sieben Varianten derselben Anzeige. Lade Streifen ...</p>
     </div>
 
     <section class="variante">
@@ -87,9 +89,12 @@
 
     <section class="variante">
       <h2><b>Variante 2</b> · <span>Kundengeschichte</span> · angelehnt an weclapp</h2>
-      <p>Komposition wie das Karussell von weclapp zu PV Green (Werbebibliothek, ID 792638160291622): Logo mit Etikett
-        und Foto, Zitat mit freigestellter Person, Ausgangslage, mit HiveGrid, Anmeldung. Farben, Schrift und Formen
-        von uns: Gelb und Dunkel, Manrope, Waben, Chamfer. Fünf Bilder, kein Video, als Anzeige also auch in 4:5 möglich.</p>
+      <p>Komposition wie das Karussell von weclapp zu PV Green (Werbebibliothek, ID 792638160291622): Etikett
+        „Live-Webinar“ und Foto, Zitat mit freigestellter Person, Vorher, Heute, Anmeldung. Seit 04.11. ohne HiveGrid
+        im Text und ohne Fachwörter. Die Geschichte: Noah kriegt nicht in die Ausführung, was in seinem Kopf ist.
+        Vorher hing das Nachfassen am Chef (Karte wie bei weclapp), heute laufen dieselben drei Schritte als Kette von selbst
+        (Schema wie bei Zapier), wie der Ablauf „Angebot nachfassen“ im Webinar Teil 2. Farben, Schrift und Formen von uns. Fünf Bilder, kein Video, als Anzeige also auch in
+        4:5 möglich.</p>
       <div class="reihe">
         <div class="rahmen"><iframe id="f2" src="./post9-v2.html?nur=streifen" loading="eager"></iframe></div>
       </div>
@@ -108,8 +113,10 @@
       <h2><b>Variante 4</b> · <span>Zahlen</span> · angelehnt an HERO Insights</h2>
       <p>Komposition wie das Karussell „HERO Insights“ (Werbebibliothek, ID 3818182885142025): dunkles Titelbild,
         dann Karten mit Titel, schwarzem und gelbem Balken und einer Grafik. Titelbild mit Noah als Teaser fürs Webinar,
-        Zahlen als Wabenbild (100 Waben) und Ring statt Tabellen. Thema: Zeit, die Betriebe verlieren, und wie wenig KI bisher
-        genutzt wird. Zahlen aus KfW Research (April 2025) und Bitkom (504 Betriebe, 2025), Quelle auf jeder Karte.</p>
+        dann 100 Waben als Band für 8 Stunden Bürokratie, eine große 4 mit den 100 Waben als Block für KI, zuletzt 72 %
+        „zu ausgelastet“ groß im gelben Kasten. Jede Karte sieht anders aus. Titel, Bürokratie und KI laufen als Video:
+        eine gelbe Welle durchs Wabenmuster, dann die Waben erst gelb, die wichtigen zuletzt rot.
+        Zahlen aus KfW Research (April 2025) und Bitkom (504 Betriebe, 2025), Quelle auf jeder Karte.</p>
       <div class="reihe">
         <div class="rahmen"><iframe id="f4" src="./post9-v4.html?nur=streifen" loading="eager"></iframe></div>
       </div>
@@ -122,6 +129,26 @@
         <div class="rahmen"><iframe id="f5" src="./post9-v5.html?nur=streifen" loading="eager"></iframe></div>
       </div>
     </section>
+
+    <section class="variante">
+      <h2><b>Variante 6</b> · <span>Arbeitsheft</span> · angelehnt an Noahs E-Book</h2>
+      <p>Aussagen und Zeichnungen aus Noahs Arbeitsheft „Jede Frage lief über meinen Tisch“: Titel dunkel wie der
+        Umschlag, mit den drei Fragen in Handschrift, der Rest weiß, dann Engpass, Inseln, Bewegungsmelder, zehn Handgriffe bei einer Wärmepumpe
+        und die Anmeldung. Manrope, Literata und Caveat wie im Heft, Skizzen-Kästen und gelbe Pfeile nach der Website.
+        Der Titel läuft als Video, die Pfeile werden wie mit dem Stift gezogen (Test).</p>
+      <div class="reihe">
+        <div class="rahmen"><iframe id="f6" src="./post9-v6.html?nur=streifen" loading="eager"></iframe></div>
+      </div>
+    </section>
+
+    <section class="variante">
+      <h2><b>Variante 7</b> · <span>Arbeitsheft dunkel</span> · wie Variante 6</h2>
+      <p>Dieselben sechs Slides auf dem dunklen Grund. Die Zeichnungen liegen auf weißen Karten, wie im Heft auf den
+        dunklen Seiten.</p>
+      <div class="reihe">
+        <div class="rahmen"><iframe id="f7" src="./post9-v7.html?nur=streifen" loading="eager"></iframe></div>
+      </div>
+    </section>
   </div>
 </main>
 
@@ -137,6 +164,8 @@
     f3: { el: document.getElementById("f3"), w: 5400, h: 1080, da: false },
     f4: { el: document.getElementById("f4"), w: 5400, h: 1080, da: false },
     f5: { el: document.getElementById("f5"), w: 5400, h: 1080, da: false },
+    f6: { el: document.getElementById("f6"), w: 6480, h: 1080, da: false },
+    f7: { el: document.getElementById("f7"), w: 6480, h: 1080, da: false },
   };
   const video = document.getElementById("anim1"), videoRahmen = document.getElementById("video1");
 
@@ -151,7 +180,7 @@
 
   /* Alle Slides im selben Massstab, eingepasst an die laengste Reihe. */
   function legen() {
-    const breit = Math.max(st.f1.w + 1080, st.f2.w, st.f3.w, st.f4.w, st.f5.w);
+    const breit = Math.max(st.f1.w + 1080, st.f2.w, st.f3.w, st.f4.w, st.f5.w, st.f6.w, st.f7.w);
     const k = Math.min((stage.clientWidth - 108) / breit, 0.42);
     Object.values(st).forEach(r => {
       r.el.style.width = r.w + "px";
@@ -167,9 +196,9 @@
     if (!video.src.endsWith(quelle.slice(1))) { video.src = quelle; video.play().catch(() => {}); }
     const fertig = Object.values(st).every(r => r.da);
     meta.textContent = fertig
-      ? "Fünf Varianten derselben Anzeige · Variante 1: 1 Video, 1 Bild · Varianten 2 bis 5: je 5 Bilder · Format " +
+      ? "Sieben Varianten derselben Anzeige · Variante 1: 1 Video, 1 Bild · Varianten 2 bis 5: je 5 Elemente · 6 und 7: je 6 Bilder · Format " +
         Object.values(st).map(r => r.h === 1080 ? "1:1" : "4:5").join(", ")
-      : "Fünf Varianten derselben Anzeige. Lade Streifen ...";
+      : "Sieben Varianten derselben Anzeige. Lade Streifen ...";
   }
   window.addEventListener("resize", legen);
   legen();