Post 9: Webinar

Bewegtbild der vier Teile mit Noah und David, dazu die Slide zum Anmelden.
Termin, Uhrzeit und Dauer sind Platzhalter in WEBINAR. Die Uebersicht kennt
Post 8 und Post 9.

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

POST-webinar.md

@@ -0,0 +1,86 @@
+# Webinar-Post: Outline
+
+**Stand:** 17.10.2026. Gebaut als `post9.html`, Termin und Uhrzeit sind noch Platzhalter.
+
+## Gebaut (17.10.)
+
+Aufbau nach der Ad-Recherche im Hub (`webinar/Ad-Recherche.md`): zuerst das Bewegtbild, dann eine Slide zum Anmelden. Als Anzeige laufen beide hintereinander, die zweite ist das Endbild.
+
+| # | Element | Inhalt |
+|---|---|---|
+| 1 | **Bewegtbild** `animWebinar`, 8 s, `animation/post9-animWebinar.mp4` | Tag „Live-Webinar“, Überschrift „Automatisierung im Handwerk.“ Darunter ein Webinar-Fenster: Live-Marke, Termin oben rechts, die vier Teile von „Was heute kommt“ laufen als Folien durch. Unten Noah und David. Wer gerade spricht, hat einen dunklen Rand, wie im Skript: Noah eröffnet jedes Kapitel, dann David. |
+| 2 | **Anmeldung** | Tag „Jetzt anmelden“, Überschrift „Live zuschauen, live fragen.“, Untertitel des Webinars als Text. Karte mit Titel, Datum, Uhrzeit, Ort, beiden Sprechern, Knopf „Jetzt anmelden“ und „Link in der Bio“. |
+
+- **Platzhalter** stehen an einer Stelle, in `WEBINAR` in `post9.html`: Datum, Wochentag, Uhrzeit, Dauer.
+- **Nicht im Bild,** weil offen: „kostenlos“ und „mit Aufzeichnung“.
+- **David Bertram:** Nachname aus `app/ueber-uns/team.ts` der Website. Noch bestätigen, dass er spricht.
+- **Fotos:** `assets/eigene/portrait-ng.jpg` und `portrait-db.jpg`, ausgeschnitten aus den Teamkarten der Website.
+- **Für die Anzeige** muss „Link in der Bio“ raus, die Anzeige hat ihren eigenen Knopf. Außerdem fehlen 9:16 und das zusammengesetzte Video (Bewegtbild plus Endbild).
+- **Später:** Noah spricht rund 30 s in die Kamera (Variante 4 der Ad-Recherche).
+
+## Ursprüngliche Outline (12.10.)
+
+## Worum es geht
+
+- HiveGrid hostet ein Webinar auf WebinarGeek. Thema, Termin und Inhalt stehen
+  noch nicht fest.
+- Dejan schreibt zuerst Slides und Skript des Webinars. Danach bauen wir
+  diesen Post.
+- Der Post lädt zur Anmeldung ein. Er ist eine Ankündigung, wie F15 in der
+  Formatbibliothek des Hubs.
+- Er entsteht im neuen Look aus `hivegrid-cloud` (rules.md §1).
+
+## Leitlinien
+
+- **Der Titel nennt ein Problem aus dem Betrieb, keine Funktion.** So steht es
+  im Webinar-Konzept (`HiveGrid-Website/webinar.md` §1.2).
+- **Nur Fakten, die feststehen.** „Kostenlos“ oder „mit Aufzeichnung“ nur, wenn
+  es stimmt. Kein Countdown, keine erfundenen Zahlen.
+- **Ein Ziel: die Anmeldung.** Auf Instagram über den Link in der Bio, auf
+  LinkedIn direkt im Text.
+- **Format und Aufbau** wie in rules.md §5: 1080 × 1350, Tag, Überschrift,
+  Beschreibung, Bild.
+
+## Slide 1: die Einladung
+
+Sie muss allein tragen. Wer nicht weiterwischt, weiß trotzdem, was es ist,
+wann es ist und wo man sich anmeldet.
+
+| Baustein | Inhalt |
+|---|---|
+| Tag | WEBINAR |
+| Überschrift | der Titel des Webinars, ein Wort markiert |
+| Beschreibung | ein Satz: für wen und worum |
+| Bild | der Termin als Karte im Look der App. Datum groß, Uhrzeit, Dauer, „Online“. Unten ein schwarzer Knopf „Anmelden“ mit dem Hinweis auf den Link in der Bio. Gebaut aus Card, Badge und Button von `hivegrid-cloud`. |
+
+## Slide 2: was du mitnimmst
+
+| Baustein | Inhalt |
+|---|---|
+| Tag | DAS ERWARTET DICH |
+| Überschrift | der Nutzen in einem Satz |
+| Bild | drei Punkte aus dem Ablauf untereinander, als StepperVertical oder Liste in einer Card. Darunter, wer spricht: Foto, Name, Rolle (Avatar). Am Ende derselbe Knopf wie auf Slide 1. |
+
+## Als Einzelbild
+
+Reicht eine Slide, bekommt Slide 1 drei Zeilen Ablauf in die Karte. Der Rest
+kommt in die Bildunterschrift.
+
+## Kanäle und Zeitpunkt
+
+- Instagram und Facebook als Carousel oder Bild.
+- LinkedIn als L4 Anlass, mit dem Anmeldelink im Text.
+- Erscheinen kann der Post, sobald der Termin steht. Das Webinar-Konzept rät,
+  rund drei Wochen vorher zu werben. Die Hälfte der Anmeldungen kommt dort in
+  der letzten Woche (§1.4).
+
+## Was noch fehlt
+
+Kommt aus Dejans Slides und Skript:
+
+- Titel und das Problem dahinter
+- Datum, Uhrzeit, Dauer
+- wer spricht
+- drei Punkte aus dem Ablauf
+- der Anmeldelink bei WebinarGeek
+- ob es kostenlos ist und ob es eine Aufzeichnung gibt

state/post9.json

@@ -0,0 +1,31 @@
+{
+ "bandTon": "orange",
+ "bgState": [
+  {
+   "bg": "raster",
+   "int": "dezent"
+  }
+ ],
+ "current": 0,
+ "deck": [
+  {
+   "ref": "anmeldung",
+   "werte": {}
+  }
+ ],
+ "edits": [
+  {}
+ ],
+ "frameStyle": "chamfer",
+ "layoutState": [
+  "standard"
+ ],
+ "rasterAn": "punkte",
+ "superSample": 2,
+ "tagOut": "an",
+ "textMitte": "an",
+ "tilt": "an",
+ "v": 7,
+ "variant": "hell",
+ "view": "streifen"
+}

uebersicht.html

@@ -111,6 +111,8 @@
       <button type="button" data-gehe="./post5.html">Post 5 · Projektmanagement</button>
       <button type="button" data-gehe="./post6.html">Post 6 · Team-Chat</button>
       <button type="button" data-gehe="./post7.html">Post 7 · Form Builder</button>
+      <button type="button" data-gehe="./post8.html">Post 8 · E-Mail-Marketing</button>
+      <button type="button" data-gehe="./post9.html">Post 9 · Webinar</button>
       <hr>
       <button type="button" data-klick="neu">Streifen neu laden</button>
     </div>
@@ -139,6 +141,8 @@
     { datei: "./post5.html",     name: "Post 5 · Projektmanagement",        theme: "modern" },
     { datei: "./post6.html",     name: "Post 6 · Team-Chat",                theme: "modern" },
     { datei: "./post7.html",     name: "Post 7 · Form Builder",             theme: "modern" },
+    { datei: "./post8.html",     name: "Post 8 · E-Mail-Marketing",         theme: "modern" },
+    { datei: "./post9.html",     name: "Post 9 · Webinar",                  theme: "modern" },
   ];
 
   const flaeche = document.getElementById("flaeche");