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>
This commit is contained in:
dejanandClaude Opus 5.5 committed 2026-11-06 21:51:51 +01:00
1 parent f9f48609dd
commit 07deacde41
39 files changed
+18434 -205

No files matched your search

+118 -46
View File
@@ -1063,6 +1063,8 @@ if (location.search.indexOf("nur=anim") >= 0)
<button type="button" data-gehe="./post9-v3.html">Post 9 · Variante 3 · Kundengeschichte dunkel</button>
<button type="button" data-gehe="./post9-v4.html">Post 9 · Variante 4 · Zahlen</button>
<button type="button" data-gehe="./post9-v5.html">Post 9 · Variante 5 · Zahlen dunkel</button>
<button type="button" data-gehe="./post9-v6.html">Post 9 · Variante 6 · Arbeitsheft</button>
<button type="button" data-gehe="./post9-v7.html">Post 9 · Variante 7 · Arbeitsheft dunkel</button>
<button type="button" data-gehe="./post9-varianten.html">Post 9 · Varianten im Vergleich</button>
<hr>
<button type="button" data-gehe="./uebersicht.html">Alle Projekte im Streifen</button>
@@ -1466,7 +1468,7 @@ if (location.search.indexOf("nur=anim") >= 0)
const VORLAGEN = [
V4_VORLAGE("titel", "Titel"),
V4_VORLAGE("buerokratie", "Bürokratie"),
V4_VORLAGE("ki", "Künstliche Intelligenz"),
V4_VORLAGE("ki", "KI im Handwerk"),
V4_VORLAGE("zeit", "Zeit"),
V4_VORLAGE("webinar", "Jetzt anmelden"),
];
@@ -1485,11 +1487,17 @@ if (location.search.indexOf("nur=anim") >= 0)
Carousel stehen sie an Stelle 2 und 3, die Standbilder im Streifen
zeigen ihren Endstand. Mit Video bleibt die Anzeige im Instagram-Feed
1:1 und laeuft nicht in Reels (rules.md 5). */
/* Seit 06.11.2026 laeuft auch der Titel als Video (Dejan): eine gelbe
Lichtwelle durchs Wabenmuster. Bild 0 ist der fertige Titel, damit die
Vorschau im Feed vollstaendig ist. */
const ANIMS = [
Object.assign({ key: "animBuerokratie", type: "feature", dauer: 6, eyebrow: "Bürokratie",
Object.assign({ key: "animTitel", type: "feature", dauer: 6, eyebrow: "Titel",
layouts: [{ id: "standard", label: "Standard" }], vis: "v4titelAnim" },
{ head: "", body: "", visW: 1080, visLeft: 0, visBottom: 0, quadrat: { visW: 1080, visLeft: 0, visBottom: 0 } }),
Object.assign({ key: "animBuerokratie", type: "feature", dauer: 8, eyebrow: "Bürokratie",
layouts: [{ id: "standard", label: "Standard" }], vis: "v4buerokratieAnim" },
{ head: "", body: "", visW: 1080, visLeft: 0, visBottom: 0, quadrat: { visW: 1080, visLeft: 0, visBottom: 0 } }),
Object.assign({ key: "animKi", type: "feature", dauer: 6, eyebrow: "Künstliche Intelligenz",
Object.assign({ key: "animKi", type: "feature", dauer: 8, eyebrow: "KI im Handwerk",
layouts: [{ id: "standard", label: "Standard" }], vis: "v4kiAnim" },
{ head: "", body: "", visW: 1080, visLeft: 0, visBottom: 0, quadrat: { visW: 1080, visLeft: 0, visBottom: 0 } }),
];
@@ -5166,6 +5174,10 @@ if (location.search.indexOf("nur=anim") >= 0)
titelGrund: "#30313D", gelb: "#F1B729", text: "#1A1A1A", text2: "#555555", text3: "#858589",
balkenDunkel: "#1A1A1A", balkenDunkelText: "#FFFFFF", spur: "#F0F0F0", linie: "#E5E5E5",
spurWabe: "#ECECEC",
/* Seit 06.11.2026 fuer die Waben, die herausstechen sollen (Bürokratie,
KI). Warm, damit es neben dem Gelb steht und nicht wie eine
Fehlermeldung wirkt. */
rot: "#E2462F",
};
const V4_DUNKEL = Object.assign({}, V4_HELL, {
titelGrund: "#0F1A2E", text: "#FFFFFF", text2: "#B9BDC9", text3: "#8A93A6",
@@ -5201,24 +5213,41 @@ if (location.search.indexOf("nur=anim") >= 0)
/* Ein Wabenfeld als Struktur auf dem Titelbild, nach links unten
auslaufend. Das Gegenstueck zum hellen Schleier auf dem Titel von HERO. */
function v4Struktur() {
/* t: Stand der Animation (0 bis 1) oder null fuer das Standbild. Eine
gelbe Welle laeuft schraeg von rechts oben nach links unten durchs Muster
(1,2 bis 4,8 s): In den Waben im Band waechst eine gelbe auf und
schrumpft wieder, die vier gelben wippen mit. Die Groesse folgt dem
Verlauf der Maske, damit die Welle dort ausklingt, wo das Muster
ausklingt. Bei 0 und 1 steht
das Standbild, die Schleife setzt also ohne Sprung neu an. */
function v4Struktur(t) {
const r = 54, w = r * Math.sqrt(3), sx = 1.5 * r;
const id = "v4verlauf" + (++v2Nr);
let m = "", voll = "";
let m = "", voll = "", glanz = "";
const band = t == null ? null : -260 + stufe(t, 0.2, 0.8) * 2360;
const welle = (cx, cy) => band == null ? 0 : Math.max(0, 1 - Math.abs((1080 - cx) + cy - band) / 170);
const maske = (cx, cy) => 0.9 * (1 - Math.max(0, Math.min(1, ((cx - 1080) * -700 + cy * 760) / (700 * 700 + 760 * 760))));
/* Die gelben liegen ueber dem Verlauf, sonst wirkten sie olivgruen. */
const gelb = new Set(["12,1", "15,3", "10,4", "14,0"]);
for (let sp = 0; sp * sx < 1080 + r; sp++) {
for (let z = -1; z * w < 760; z++) {
const cx = sp * sx, cy = z * w + (sp % 2 ? w / 2 : 0);
if (gelb.has(sp + "," + z)) voll += v2Wabe(cx, cy, r - 6, V4.gelb);
else m += v2Wabe(cx, cy, r - 6, "none", { stroke: "#FFFFFF", sw: 1.6 });
const cx = sp * sx, cy = z * w + (sp % 2 ? w / 2 : 0), e = welle(cx, cy);
if (gelb.has(sp + "," + z)) { voll += v2Wabe(cx, cy, (r - 6) * (1 + 0.16 * e), V4.gelb); continue; }
m += v2Wabe(cx, cy, r - 6, "none", { stroke: "#FFFFFF", sw: 1.6 });
/* Voll gelb und ueber die Groesse ein- und ausgeblendet: Halb
durchsichtiges Gelb wirkt auf dem dunklen Grund olivgruen. */
/* Vor Logo, Etikett und Ueberschrift laeuft die Welle aus, sonst
stehen gelbe Waben hinter der gelben Schrift. */
const frei = Math.max(0, Math.min(1, (cx - (cy < 250 ? 400 : 600)) / 130));
const s = e * frei * (0.35 + 0.65 * maske(cx, cy) / 0.9);
if (s > 0.06) glanz += v2Wabe(cx, cy, (r - 6) * Math.min(1, s * 1.15), V4.gelb);
}
}
return '<linearGradient id="' + id + 'g" gradientUnits="userSpaceOnUse" x1="1080" y1="0" x2="380" y2="760">' +
'<stop offset="0" stop-color="#FFFFFF" stop-opacity=".9"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient>' +
'<mask id="' + id + '" maskUnits="userSpaceOnUse" x="0" y="0" width="1080" height="1080">' +
'<rect width="1080" height="1080" fill="url(#' + id + 'g)"/></mask>' +
'<g mask="url(#' + id + ')" stroke-opacity=".16">' + m + "</g>" + voll;
'<g mask="url(#' + id + ')" stroke-opacity=".16">' + m + "</g>" + glanz + voll;
}
/* Ein Feld aus 100 Waben, 20 Spalten zu 5 Reihen, als Mengenbild: jede
@@ -5226,12 +5255,18 @@ if (location.search.indexOf("nur=anim") >= 0)
gezaehlt wird spaltenweise von links. Dejan, 02.11.2026: weniger Zahlen,
mehr Grafik, aber nichts erfunden. Die Grafik zeigt nur den Prozentwert
der Quelle, auf ganze Waben gerundet. */
function v4Hundert(y0, art, zeit) {
const r = 28, sx = 1.5 * r, w = r * Math.sqrt(3);
const x0 = V2_RAND + r + (1080 - 2 * V2_RAND - (19 * sx + 2 * r)) / 2;
/* o.reihen, o.r, o.x0: Form des Felds. Ohne o das breite Band, 20 Spalten
zu 5 Reihen, mittig. Seit 04.11.2026 zeigt Slide 3 dasselbe Feld als
Block 10 x 10 (Dejan: „dass das back to back gleich aussieht, finde ich
nicht so gut, einzelne Slides stechen dadurch nicht raus“). */
function v4Hundert(y0, art, zeit, o) {
o = o || {};
const reihen = o.reihen || 5, spalten = 100 / reihen;
const r = o.r || 28, sx = 1.5 * r, w = r * Math.sqrt(3);
const x0 = o.x0 != null ? o.x0 : V2_RAND + r + (1080 - 2 * V2_RAND - ((spalten - 1) * sx + 2 * r)) / 2;
let g = "", oben = "";
for (let i = 0; i < 100; i++) {
const sp = Math.floor(i / 5), z = i % 5;
const sp = Math.floor(i / reihen), z = i % reihen;
const cx = x0 + sp * sx, cy = y0 + w / 2 + z * w + (sp % 2 ? w / 2 : 0);
const a = art(i);
/* p: wie weit diese Wabe schon da ist, 0 bis 1. Ohne zeit (Standbild)
@@ -5243,6 +5278,7 @@ if (location.search.indexOf("nur=anim") >= 0)
if (!a || p <= 0) continue;
const sk = rueck(p);
oben += a === "voll" ? v2Wabe(cx, cy, (r - 4) * sk, V4.gelb)
: a === "rot" ? v2Wabe(cx, cy, (r - 4) * sk, V4.rot)
: v2Wabe(cx, cy, (r - 6) * sk, "none", { stroke: V4.gelb, sw: 3 });
}
return g + oben;
@@ -5259,6 +5295,8 @@ if (location.search.indexOf("nur=anim") >= 0)
if (jetzt - zuletzt > 33) {
zuletzt = jetzt;
const t = ((jetzt - start) / 1000 % V4_DAUER) / V4_DAUER;
const tt = ((jetzt - start) / 1000 % 6) / 6;
document.querySelectorAll(".vis.vis-v4titel").forEach(v => { v.innerHTML = v4Titel(tt); });
document.querySelectorAll(".vis.vis-v4buerokratie").forEach(v => { v.innerHTML = v4Buerokratie(t); });
document.querySelectorAll(".vis.vis-v4ki").forEach(v => { v.innerHTML = v4Ki(t); });
}
@@ -5271,21 +5309,36 @@ if (location.search.indexOf("nur=anim") >= 0)
Sekunden. Die Waben kommen nacheinander (start, abstand, je dauer), am
Ende ziehen sich alle zusammen zurueck, damit die Schleife auf
Instagram weich neu ansetzt statt zu springen. */
const V4_DAUER = 6;
/* Seit 06.11.2026 8 statt 6 Sekunden (Dejan: zu langweilig, zu wenig
Waben farbig). Erst laufen alle uebrigen Waben gelb durch, dann kommen
die roten, langsamer und einzeln. */
const V4_DAUER = 8;
const v4Welle = (t, k, start, abstand, dauer) => {
const rein = stufe(t, start + k * abstand, start + k * abstand + dauer);
const raus = 1 - daempfen(stufe(t, 0.92, 1));
const raus = 1 - daempfen(stufe(t, 0.925, 1));
return rein * raus;
};
/* Zeitplan fuer ein Feld mit roten Waben: Die gelben laufen in einer Welle
von links nach rechts durch (0,3 bis 3 s), die roten danach eine nach der
anderen, jede fast eine Sekunde lang (ab 3,4 s). */
const v4Zeitplan = (t, rot, abstandRot) => {
const gelbe = [], rote = [];
for (let i = 0; i < 100; i++) (rot(i) ? rote : gelbe).push(i);
return i => {
const r = rote.indexOf(i);
return r >= 0 ? v4Welle(t, r, 0.425, abstandRot, 0.12)
: v4Welle(t, gelbe.indexOf(i), 0.04, 0.30 / gelbe.length, 0.07);
};
};
/* 1 · Titel. Noah freigestellt vor der grossen gelben Wabe, wie in
Variante 2 auf der Zitat-Karte: Er traegt Schwarz und braucht das Gelb
dahinter. Die Karte teasert das Webinar, die Zahlen kommen danach. */
function v4Titel() {
function v4Titel(t) {
v4Ton();
const H = SLIDE_H;
let g = '<rect width="1080" height="' + H + '" fill="' + V4.titelGrund + '"/>';
g += v4Struktur();
g += v4Struktur(t == null ? null : t);
g += v2Wabe(800, H - 170, 330, V4.gelb);
const pb = 1000, ph = pb * 1049 / 1600;
/* Gespiegelt an x 800 (Dejan, 02.11.2026): Noah schaut so zum Text. */
@@ -5310,45 +5363,60 @@ if (location.search.indexOf("nur=anim") >= 0)
v4Ton();
let g = v4Kopf("Zeitfresser Bürokratie", "Im Bau: 8 von 100 Arbeitsstunden", "gehen für Bürokratie drauf.");
/* Grafik und Legende stehen mittig zwischen Kopf (bis 306) und Fuss (ab 952). */
/* Animiert: die 8 gelben ab 0,6 s nacheinander, je 0,5 s. */
g += v4Hundert(456, i => i >= 92 ? "voll" : "",
t == null ? null : i => v4Welle(t, i - 92, 0.10, 0.035, 0.08));
g += v2Wabe(V2_RAND + 13, 777, 13, V4.gelb);
g += uiText(V2_RAND + 40, 785, "Jede Wabe ist eine Arbeitsstunde. Gelb ist Bürokratie.", 24, 600, V4.text2);
/* Animiert: erst die 92 Stunden gelb, dann die 8 roten langsam. */
const rot = i => i >= 92;
g += v4Hundert(456, i => rot(i) ? "rot" : "voll", t == null ? null : v4Zeitplan(t, rot, 0.04));
g += v2Wabe(V2_RAND + 13, 777, 13, V4.rot);
g += uiText(V2_RAND + 40, 785, "Jede Wabe ist eine Arbeitsstunde. Rot ist Bürokratie.", 24, 600, V4.text2);
g += v4Fuss(["Quelle: KfW-Mittelstandspanel, KfW Research Nr. 495, April 2025.",
"Anteil der Arbeitszeit für Bürokratie im mittelständischen Baugewerbe: 8,1 %."]);
return v2Svg(g);
}
/* 3 · KI. Bitkom: 4 % nutzen KI, 9 % planen es. Dasselbe Bild, jede Wabe
ein Betrieb. */
/* 3 · KI. Bitkom: 4 % nutzen KI. Dasselbe Bild wie Slide 2, jede Wabe ein
Betrieb, und derselbe Satzbau in den Balken. Bis 04.11.2026 standen
dazu die 9 % mit Plaenen als umrandete Waben, mit eigener Legende
(Dejan: zu viel Text). */
/* Anders als Slide 2: links die Zahl gross, wie die KI-Karte bei HERO
Insights („96 % > nur 2 %“), rechts dieselben 100 Waben als Block,
10 x 10, groesser. So stehen die beiden Wabenbilder nicht gleich
hintereinander. */
function v4Ki(t) {
v4Ton();
let g = v4Kopf("Künstliche Intelligenz", "KI ist im Handwerk kaum angekommen.", "4 von 100 Betrieben nutzen sie.");
/* Animiert: erst die 4 vollen, dann die 9 umrandeten. */
g += v4Hundert(456, i => i < 4 ? "voll" : i < 13 ? "rand" : "",
t == null ? null : i => i < 4 ? v4Welle(t, i, 0.10, 0.05, 0.08) : v4Welle(t, i - 4, 0.40, 0.03, 0.07));
g += v2Wabe(V2_RAND + 13, 777, 13, V4.gelb);
g += uiText(V2_RAND + 40, 785, "nutzen KI", 24, 600, V4.text2);
g += v2Wabe(V2_RAND + 213, 777, 11, "none", { stroke: V4.gelb, sw: 3 });
g += uiText(V2_RAND + 240, 785, "planen es", 24, 600, V4.text2);
g += uiText(1080 - V2_RAND, 785, "Jede Wabe ist ein Betrieb.", 24, 600, V4.text3, { anker: "end" });
let g = v4Kopf("KI im Handwerk", "Erst 4 von 100 Betrieben", "nutzen sie.");
const r = 30, bw = 9 * 1.5 * r + 2 * r, bh = 10.5 * r * Math.sqrt(3);
const bx = 1080 - V2_RAND - bw, by = 640 - bh / 2;
/* Animiert: erst die 96 gelb, dann die 4 roten oben links, langsam. */
const rot = i => i < 4;
g += v4Hundert(by, i => rot(i) ? "rot" : "voll", t == null ? null : v4Zeitplan(t, rot, 0.07),
{ reihen: 10, r, x0: bx + r });
g += v2Text(V2_RAND - 14, 660, "4", 330, V4.rot, { sperr: "-0.04em" });
g += v2Text(V2_RAND, 740, "von 100", 56, V4.text);
g += v2Text(V2_RAND, 802, "Betrieben", 56, V4.text);
g += v2Wabe(V2_RAND + 13, 862, 13, V4.rot);
g += uiText(V2_RAND + 40, 870, "Rot nutzt KI.", 24, 600, V4.text2);
g += v4Fuss(["Quelle: Bitkom Research, Digitalisierung des Handwerks,", "504 Handwerksbetriebe, Sommer 2025."]);
return v2Svg(g);
}
/* 4 · Zeit. Nur noch der Widerspruch: Zeitersparnis gilt als Vorteil,
und die meisten haben keine Zeit dafuer. Der Ring zeigt die 72 %. */
/* 4 · Zeit. Bitkom, Abbildung 19: 72 % sagen „Wir haben zu viel zu tun, um
uns mit der Digitalisierung zu beschäftigen“ (im Text: „zu stark
ausgelastet“). Die Balken tragen den Satz in einfachen Worten, der Kasten
die Zahl.
Bis 04.11.2026 zuerst zwei Ringe mit Wortspiel, dann 72 von 100 Waben
(Dejan: „die dritte Slide hintereinander mit derselben Grafik“). Vorbilder
aus der Werbebibliothek: HERO Insights, Karte 4 (ID 3818182885142025,
die Zahl gross im gelben Kasten), die Umfrage von HERO (ID
1480540019958925, Aussage, dann „sagen“ und die Zahl) und GL-Webinnovate
(ID 2200760394202873, dieselbe Bitkom-Zahl als „Zu ausgelastet“). */
function v4Zeit() {
v4Ton();
let g = v4Kopf("Digitalisierung und Zeit", "76 % sagen: Digitalisierung spart Zeit.", "Aber 72 % fehlt die Zeit dafür.");
const cx = V2_RAND + 170, cy = 600, r = 150, sw = 44, u = 2 * Math.PI * r;
g += '<circle cx="' + cx + '" cy="' + cy + '" r="' + r + '" fill="none" stroke="' + V4.spur + '" stroke-width="' + sw + '"/>';
g += '<circle cx="' + cx + '" cy="' + cy + '" r="' + r + '" fill="none" stroke="' + V4.gelb + '" stroke-width="' + sw +
'" stroke-dasharray="' + n1(u * 0.72) + " " + n1(u) + '" transform="rotate(-90 ' + cx + " " + cy + ')"/>';
g += v2Text(cx, cy + 28, "72 %", 76, V4.text, { anker: "middle" });
["„Wir haben zu viel", "zu tun, um uns mit", "der Digitalisierung", "zu beschäftigen.“"].forEach((z, i) => {
g += v2Text(V2_RAND + 400, 530 + i * 48, z, 38, V4.text, { gew: 800 });
let g = v4Kopf("Zu ausgelastet", "Wir haben zu viel zu tun,", "um uns um Neues zu kümmern.");
const x = V2_RAND, y = 470, b = 1080 - 2 * V2_RAND, h = 300;
g += v2Chamfer(x, y, b, h, 22, V4.gelb);
g += v2Text(x + 56, y + 212, "72 %", 190, "#1A1A1A", { sperr: "-0.04em" });
["der Betriebe", "im Handwerk", "sagen das."].forEach((z, i) => {
g += v2Text(x + 560, y + 108 + i * 50, z, 42, "#1A1A1A", { gew: 700 });
});
g += v4Fuss(["Quelle: Bitkom Research, Digitalisierung des Handwerks,", "504 Handwerksbetriebe, Sommer 2025."]);
return v2Svg(g);
@@ -5358,8 +5426,11 @@ if (location.search.indexOf("nur=anim") >= 0)
der Anmeldekarte von Variante 1. */
function v4Webinar() {
v4Ton();
let g = v4Kopf("Im Webinar", "Automatisierung im Handwerk.", "Mit dem Programm, das du hast.");
["Von der Anfrage zum Auftrag", "Das Herzstück: Automatisierung", "Chat, Personal, Passwörter"].forEach((z, i) => {
/* Bis 04.11.2026 „Automatisierung im Handwerk.“ und „Das Herzstück:
Automatisierung“ (Dejan: zu technisch, alles ganz einfach). Die
Punkte sind dieselben drei Teile des Webinars. */
let g = v4Kopf("Im Webinar", "Weniger Zeit im Büro.", "Mit dem Programm, das du hast.");
["Von der Anfrage zum Auftrag", "Was von selbst laufen kann", "Chat, Urlaub, Passwörter"].forEach((z, i) => {
const y = 400 + i * 56;
g += v2Wabe(V2_RAND + 13, y - 10, 13, V4.gelb);
g += uiText(V2_RAND + 50, y, z, 28, 700, V4.text);
@@ -5429,7 +5500,8 @@ if (location.search.indexOf("nur=anim") >= 0)
animMail: (j, t) => animMail(j, t),
anmeldung: () => visAnmeldung(),
animWebinar: (j, t) => animWebinar(j, t),
v4titel: () => v4Titel(),
v4titel: () => v4Titel(null),
v4titelAnim: (j, t) => v4Titel(t),
v4buerokratie: () => v4Buerokratie(null),
v4buerokratieAnim: (j, t) => v4Buerokratie(t),
v4ki: () => v4Ki(null),