posts/POST-2.md

Post 2 · Die Geschichte

Erscheint Mi 12.08.2026, 12:00 Uhr. Carousel, 6 Slides, 1080 × 1350 px. Zweiter Beitrag des Kontos hivegrid.de (nach „Vom Handwerker für Handwerker").

Diese Datei ist die Übergabe: alles, was zum Beitrag bekannt ist, damit man ohne den Gesprächsverlauf weiterarbeiten kann. Der Redaktionsplan drumherum steht in redaktionsplan/.

---

1. Worum es geht

Die Herkunft, nicht die Funktionen. Warum es HiveGrid gibt: ein SHK-Betrieb in vierter Generation, der sein Branchenprogramm nicht wechseln konnte und deshalb drumherum gebaut hat.

Vorlage ist der Text von der Website (HiveGrid-Website, app/playground/PlaygroundClient.tsx, Abschnitt „Warum es HiveGrid gibt"). Der vollständige Text gehört unter den Beitrag, nicht auf die Slides.

Auf den Slides steht die Zuspitzung, in der Bildunterschrift der ganze Text. Ein früherer Stand hatte die Website-Absätze wörtlich auf den Slides. Das war falsch: Auf einer Slide muss eine Zeile im Vorbeiscrollen sitzen.

---

2. Die sechs Slides

#	Schlüssel	Überschrift	Fließtext	Visualisierung
1	titel	Die Geschichte fängt auf der Baustelle an.	Noah Geerkens, SHK-Betrieb in vierter Generation.	karte
2	prozesse	Nicht sinnvoll. Nur so gewachsen.	Die Software gibt den Takt vor. Nicht der Betrieb.	schiene
3	wechseln	Wechseln? Kannst du vergessen.	Jahre an Daten und Wissen hängen drin. Am Ende dasselbe, nur woanders.	ersetzen
4	mehr	Wir wollten nicht weg. Wir wollten mehr.	KI, CRM, Automatisierung. Und Tools, die miteinander reden.	lose
5	verbinden	Dein ERP bleibt. Der Rest kommt dazu.	Nichts wird ersetzt. Alles wird verbunden.	verbinden
6	warteliste	Gebaut im Betrieb. Für den Betrieb.	Setz dich auf die Warteliste.	warteliste

Fett = das mit dem Marker hervorgehobene Akzentwort (<span class="a">).

Zeilenlängen sind geprüft. Bei 74 px und -0.03em passen rund 26 Zeichen in eine Zeile, mit Marker etwas weniger. Keine Zeile hier ist länger als 22, es bricht also nichts um und alle Überschriften bleiben zweizeilig. Gemessen wurde mit der echten Manrope (variables Latin-Subset, Gewicht 800) über die Vorschubbreiten, nicht geschätzt.

---

3. Die Visualisierungen

Kein Bildmaterial außer Noahs Karte. Alles andere ist HTML und CSS. Damit bleibt es beim 3-fachen Export so scharf wie die Schrift, und jede Visualisierung lässt sich im Canvas verschieben und in der Breite ändern wie jedes andere Element. Sie heißt dort „Visualisierung".

Gebaut aus derselben Formensprache wie die Slides: chamferte Kästen, Sechsecke, der eine gelbe Akzent. Durchgezogene Balken heißen verbunden, gestrichelte offen.

Name	Was zu sehen ist	Gedanke dahinter
karte	Noahs Teamkarte von der Über-uns-Seite	Ein Gesicht, kein Symbol
schiene	Drei Schritte an einer Schiene mit der Beschriftung „seit Jahren so"	Die Schiene gibt die Reihenfolge vor, nicht der Betrieb
ersetzen	Schwerer Bestand, durchgestrichener Pfeil, leeres Ziel	Das Kreuz liegt auf dem Pfeil, nicht auf dem Ziel: der Wechsel scheitert, nicht das neue System
lose	Vier Kacheln, deren gestrichelte Stummel ins Leere laufen	KI, CRM, Automation, ERP wissen nichts voneinander
verbinden	ERP als Sechseck in der Mitte, das Neue drumherum	Der Kern bleibt, außen kommt dazu
warteliste	Eingabefeld, Knopf, Adresse	Der Abschluss ist ein Feld, kein Bild

Noahs Karte

Nachbau der Karte von der Über-uns-Seite im aktiven Zustand. Werte direkt aus HiveGrid-Website/app/ueber-uns/TeamCards.tsx:

Hintergrund  grayscale(.04) saturate(.74) brightness(.73)
Person       saturate(1) contrast(1.01)
Kartengrund  #0f1a2e        Radius außen 38 px, innen 27 px
Namensschild gelb, links unten, "Noah" + "CEO"

Bilder liegen unter assets/team/noah-bg.webp und noah-person.webp.

Ohne die weichgezeichnete Ellipse des Originals. Die hängt an backdrop-filter, und was html-to-image daraus macht, ist nicht verlässlich.

---

4. Maße, gemessen

Der Inhaltsblock (Überschrift plus Fließtext) endet je nach Textlänge bei y 415 bis 460. Unten bleiben 92 px Rand. Für die Visualisierung stehen also rund 800 px Höhe zur Verfügung, und die soll sie auch füllen.

Slide	Visualisierung: oben	Höhe	Luft zum Text	Abstand nach unten
1	499	775	84	76
2	548	682	133	120
3	566	664	106	120
4	502	700	70	120
5	470	732	83	120
6	603	466	188	281

Slide 6 ist bewusst kleiner und steht dafür mittig in der freien Fläche. Ein Formularfeld auf 700 px aufzublasen sieht aufgeblasen aus.

Wie nachmessen: Eine Kopie von post2.html anlegen, vor </body> ein Skript hängen, das getBoundingClientRect der Elemente in document.title schreibt, und mit Google\ Chrome --headless --dump-dom auslesen. Auf .holder .slide warten, die Seite baut asynchron auf.

---

5. Stand der Dinge

Fertig: Alle sechs Slides sind gebaut, die Texte auf Slide-Länge, die Visualisierungen füllen das Format, Noahs Karte sitzt.

Offen:

1. Die Bildunterschrift. Noahs vollständiger Text von der Website, plus Hashtags. Vorgaben aus dem Redaktionsplan: Haken in den ersten 125 Zeichen, 300 bis 800 Zeichen gesamt, 5 bis 10 Hashtags ganz unten, Suchwörter zusätzlich im Fließtext. Die Bildunterschrift von Post 1 steht als Muster im Gesprächsverlauf und folgt genau diesem Aufbau.
2. Export und Kontrolle. Über Datei → Alle Slides als ZIP, 3-fach. Danach jede Slide ansehen: der Export hat schon zweimal Bilder verschluckt, die Prüfung meldet das inzwischen, aber ein Blick schadet nicht.
3. Mitgestalter. Falls Noahs Betriebsprofil mit drauf soll, beim Posten einladen. Nachträglich geht es zwar, aber der Beitrag erscheint dann erst nach der Annahme bei dessen Followern und die Ausspielung ist vorbei.

---

6. Fallen, die schon zugeschnappt sind

• Der offene Tab überschreibt die Datei. state/post2.json gewinnt nur beim Laden. Wer die Datei von außen ändert und dann im offenen Tab klickt, bekommt den alten Stand zurückgeschrieben. Also erst neu laden, dann klicken. Änderungen, die sicher ankommen müssen, gehören in den Ladepfad (migrateState).
• Probier-Verschiebungen bleiben im Stand. Slide 1 war unten abgeschnitten, weil die Karte auf 700 px vergrößert und 250 px nach unten geschoben war. Wenn eine Vorgabe im Code nicht wirkt, zuerst edits im Stand prüfen.
• Der Server verschluckt Fehler. Ein Filter in log_message ist über HTTPStatus gestolpert und hat den Thread mitgerissen; die Seite blieb dann ohne Meldung bei „Lade Screens ..." stehen. Behoben, aber wenn die Seite wieder hängt: zuerst serve.py neu starten und in die Ausgabe schauen.
• Texte von der Website gehören nicht auf Slides. Siehe oben.

---

7. Was danach kommt

Der Redaktionsplan sieht als nächsten Beitrag Fr 14.08. „Verbinden statt ersetzen" vor, ein Einzelbild mit der Kernaussage. Der Satz „Verbinden statt ersetzen" ist dafür reserviert und taucht deshalb in keiner Bildunterschrift vorher wörtlich auf.