Webinar-Seite: alle Varianten der Webinar-Anzeige (Post 9)

Fünf Varianten als Carousel je Zeile, Bilder und Videos in 1:1, exportiert
aus PostGrid mit posts/post9-hub.mjs. Damit Noah sie auf
hivegrid-marketing.pages.dev sieht. Neu exportieren, wenn sich die
Varianten ändern.

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

Dashboard/seiten/webinar.js

@@ -8,6 +8,8 @@ import { S } from "../app.js";
 import { esc, langDatum, dokLink, pille } from "../hilfen.js";
 
 const SLIDES = "/webinar/slides";
+// Die Anzeigen fürs Webinar, exportiert aus PostGrid (posts/post9-hub.mjs).
+const ANZEIGEN = "/webinar/anzeigen/post9";
 const url = (pfad) => "/" + pfad.split("/").map(encodeURIComponent).join("/");
 
 // Reihenfolge, Teile und Titel der Slides. Fehlt etwas, bleibt der Block leer
@@ -30,6 +32,34 @@ async function deckLesen() {
   }
 }
 
+// Liste der Varianten. Fehlt sie, entfällt der Block.
+async function anzeigenLesen() {
+  try {
+    return await fetch(`${ANZEIGEN}/varianten.json`, { cache: "no-store" }).then((r) => r.json());
+  } catch {
+    return null;
+  }
+}
+
+function anzeigenBlock(a) {
+  if (!a) return "";
+  const element = (s, i) => {
+    const pfad = `${ANZEIGEN}/${s.datei}`;
+    const bild = s.art === "video"
+      ? `<video src="${pfad}" muted loop autoplay playsinline preload="metadata"></video>`
+      : `<img src="${pfad}" alt="" loading="lazy">`;
+    return `<a class="anzeige-element" href="${pfad}" target="_blank" rel="noopener">
+      ${bild}<span><span class="nr">${i + 1}</span>${s.art === "video" ? "Video" : "Bild"}</span></a>`;
+  };
+  return `<section class="block"><h2>Anzeigen <span class="neben">${esc(a.titel)}, ${a.varianten.length} Varianten, Stand ${esc(a.stand.split("-").reverse().join("."))}</span></h2>
+    <p class="klein">${esc(a.hinweis)} Zum Vergrößern anklicken.</p>
+    ${a.varianten.map((v) => `
+      <div class="folien-teil">Variante ${v.nr} · ${esc(v.name)}</div>
+      <p class="klein anzeige-text">${esc(v.text)}</p>
+      <div class="anzeige-reihe">${v.slides.map(element).join("")}</div>`).join("")}
+  </section>`;
+}
+
 function unterlage(u) {
   const knoepfe = [];
   if (u.art === "ansehen") knoepfe.push(`<a class="knopf" href="${url(u.pfad)}" target="_blank" rel="noopener">Ansehen</a>`);
@@ -67,7 +97,7 @@ export async function zeichnen(main) {
     main.innerHTML = `<section class="block warnung"><h2>Keine Webinar-Daten</h2><p>daten/webinar.json fehlt.</p></section>`;
     return;
   }
-  const deck = await deckLesen();
+  const [deck, anzeigen] = await Promise.all([deckLesen(), anzeigenLesen()]);
   const nrVon = (id) => deck.folien.find((f) => f.id === id)?.nr;
   const ablauf = w.ablauf.map((a, i) => {
     const von = nrVon(a.start);
@@ -97,6 +127,8 @@ export async function zeichnen(main) {
       </section>
     </div>
 
+    ${anzeigenBlock(anzeigen)}
+
     <section class="block"><h2>Ablauf <span class="neben">${esc(w.dauer)}</span></h2>
       <div class="tab"><table class="daten">
         <thead><tr><th>Minute</th><th>Teil</th><th>Wer</th><th>Knackpunkt</th><th>Slides</th></tr></thead>

Dashboard/stil.css

@@ -450,5 +450,13 @@ input[type="date"]:focus { outline: none; border-color: var(--tinte); }
 .folie-vorschau img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--rand); border-radius: 4px; background: var(--flaeche-2); display: block; }
 .folie-vorschau:hover img { border-color: var(--tinte); }
 .folie-vorschau .nr { color: var(--grau-2); font-weight: 700; margin-right: 6px; }
+/* Anzeigen fürs Webinar: ein Carousel je Variante, quadratisch wie im Feed. */
+.anzeige-text { margin: -4px 0 10px; max-width: 760px; }
+.anzeige-reihe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
+.anzeige-element { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); font-size: 13px; min-width: 0; }
+.anzeige-element img, .anzeige-element video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--rand); border-radius: 4px; background: var(--flaeche-2); display: block; }
+.anzeige-element:hover img, .anzeige-element:hover video { border-color: var(--tinte); }
+.anzeige-element .nr { color: var(--grau-2); font-weight: 700; margin-right: 6px; }
+@media (max-width: 700px) { .anzeige-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 700px) { .zeile.unterlage { grid-template-columns: minmax(0, 1fr); } .zeile.unterlage .knoepfe { justify-content: flex-start; } }
 

webinar/anzeigen/post9/varianten.json

@@ -0,0 +1,130 @@
+{
+ "titel": "Post 9 · Webinar-Anzeige",
+ "stand": "2026-11-04",
+ "hinweis": "Format 1:1 für die Anzeige. Datum und Uhrzeit des Webinars sind noch Platzhalter.",
+ "varianten": [
+  {
+   "nr": 1,
+   "name": "Webinar-Fenster",
+   "text": "Das Bewegtbild zeigt das Webinar mit seinen Teilen und beiden Sprechern, danach die Anmeldung.",
+   "slides": [
+    {
+     "art": "video",
+     "datei": "v1-1.mp4"
+    },
+    {
+     "art": "bild",
+     "datei": "v1-2.png"
+    }
+   ]
+  },
+  {
+   "nr": 2,
+   "name": "Kundengeschichte",
+   "text": "Angelehnt an ein Karussell von weclapp. Noah als Gesicht, dann vorher und heute am Beispiel „Angebot nachfassen“, dann die Anmeldung.",
+   "slides": [
+    {
+     "art": "bild",
+     "datei": "v2-1.png"
+    },
+    {
+     "art": "bild",
+     "datei": "v2-2.png"
+    },
+    {
+     "art": "bild",
+     "datei": "v2-3.png"
+    },
+    {
+     "art": "bild",
+     "datei": "v2-4.png"
+    },
+    {
+     "art": "bild",
+     "datei": "v2-5.png"
+    }
+   ]
+  },
+  {
+   "nr": 3,
+   "name": "Kundengeschichte dunkel",
+   "text": "Wie Variante 2, auf dunklem Grund.",
+   "slides": [
+    {
+     "art": "bild",
+     "datei": "v3-1.png"
+    },
+    {
+     "art": "bild",
+     "datei": "v3-2.png"
+    },
+    {
+     "art": "bild",
+     "datei": "v3-3.png"
+    },
+    {
+     "art": "bild",
+     "datei": "v3-4.png"
+    },
+    {
+     "art": "bild",
+     "datei": "v3-5.png"
+    }
+   ]
+  },
+  {
+   "nr": 4,
+   "name": "Zahlen",
+   "text": "Angelehnt an HERO Insights. Noah als Teaser, dann drei Zahlen aus Studien zur Zeit im Handwerk, dann die Anmeldung. Slide 2 und 3 sind kurze Videos.",
+   "slides": [
+    {
+     "art": "bild",
+     "datei": "v4-1.png"
+    },
+    {
+     "art": "video",
+     "datei": "v4-2.mp4"
+    },
+    {
+     "art": "video",
+     "datei": "v4-3.mp4"
+    },
+    {
+     "art": "bild",
+     "datei": "v4-4.png"
+    },
+    {
+     "art": "bild",
+     "datei": "v4-5.png"
+    }
+   ]
+  },
+  {
+   "nr": 5,
+   "name": "Zahlen dunkel",
+   "text": "Wie Variante 4, auf dunklem Grund.",
+   "slides": [
+    {
+     "art": "bild",
+     "datei": "v5-1.png"
+    },
+    {
+     "art": "video",
+     "datei": "v5-2.mp4"
+    },
+    {
+     "art": "video",
+     "datei": "v5-3.mp4"
+    },
+    {
+     "art": "bild",
+     "datei": "v5-4.png"
+    },
+    {
+     "art": "bild",
+     "datei": "v5-5.png"
+    }
+   ]
+  }
+ ]
+}