CMS-Baukasten: Block-Katalog (Stand 2026-07-02)

Status: UMGESETZT. Alle Blöcke unten (inkl. CTA- und Newsletter-Varianten) sind als Payload-Blocks im layout-Feld von gewerk_page/funktion_page auswählbar (payload-seo-cms src/blocks/page-blocks.ts) und werden im work7-Frontend gerendert (components/marketing/gewerk/GewerkBlocks.tsx, Parsing lib/marketing/gewerk-page.ts). Newsletter-Submit ist vorerst ein mailto-Fallback (Mail-Anbieter offen); Cal.com-Embed im bookingCard-Block braucht CALCOM_LINK.

Ziel: Marketing-Unterseiten (v. a. /funktionen/*, /loesungen/*) sollen im Payload CMS frei aus Blöcken zusammengesetzt werden können. Jeder Block = eine Section im Frontend (GewerkBlockRenderer wird zum generischen Block-Renderer). Die Blöcke unten sind aus den real existierenden Sections der Website abgeleitet — es wird nichts erfunden, was das Frontend nicht schon kann oder mit wenig Aufwand können wird.

Status-Legende: ✅ existiert bereits als CMS-Block · 🔨 neu zu bauen

Querschnitt (gilt für alle Blöcke)

• Gemeinsame optionale Felder: eyebrow (Mono-Label), heading, anchorId (Sprungziel), background (weiß / paper / dunkel) — statt für hell/dunkel eigene Blöcke zu bauen.
• Blocks hängen am layout-Feld der Content-Items (Typen gewerk_page, funktion_page); unbekannte Blöcke werden im Frontend beim Parsen übersprungen (zod), neue CMS-Blöcke brechen alte Frontends also nicht.
• FAQ-Blöcke fließen automatisch in die zentrale /faq-Seite ein (Aggregator).

1. Vorhandene Blöcke ✅

#	Block	Zweck	Felder
1	gewerkHero	Hero mit Agent-Demo rechts	eyebrow, heading, headingAccent (grüne Zeile), intro, primaryCta, secondaryCta, demoCaption, scenarios[]
2	painPoints	„Kommt dir das bekannt vor?"-Karten	eyebrow, heading, items[] (Text je Karte)
3	featureList	Checkliste mit grünen Haken	eyebrow, heading, items[], cta
4	faqSection	FAQ-Akkordeon + FAQPage-JSON-LD	eyebrow, heading, items[{question, answer}]
5	ctaSection	Abschluss-CTA	eyebrow, heading, text, cta
6	markdownSection	Freier Text-Fallback	eyebrow, heading, body (Markdown)

2. Neue Blöcke 🔨 — Priorität A (für frei baubare Funktionsseiten)

7. agentDemo — work7-Agent-Chat (standalone)

Das animierte WhatsApp-Chat-Element einzeln platzierbar (heute nur im Hero).

• eyebrow / heading / lead (optional, Section-Kopf)
• scenarios[] — je Szenario:
  • prompt — User-Nachricht, wird unten in der Eingabezeile „getippt"
  • title — Kopfzeile der Agent-Antwort (z. B. „Rapport erfasst")
  • lines[] — Antwortzeilen der Agent-Nachricht (Emojis erlaubt)
  • kind — action (Bestätigung) / answer (KPI/Auskunft)
  • scenarioId — stabile ID
• caption — Bildunterschrift unter dem Chat
• variant — hell / dunkel, zentriert / neben Text

7b. waChat — statischer WhatsApp-Verlauf (Nachrichten-Typen)

Neben der Agent-Animation gibt es den statischen Verlauf mit frei kombinierbaren Nachrichten-Typen (alle im Showcase unter 07c–07g zu sehen):

• voice — Sprachnachricht (Dauer, Zeit)
• text — Textnachricht (ein-/ausgehend)
• card — Bestätigungskarte mit grünen Haken
• form — Daten-Maske: strukturierter Entwurf (Titel, Feldzeilen Label+Wert, Fußzeile) mit optionalen Antwort-Buttons — z. B. Rapport-Entwurf, Rechnungs-Positionen
• buttons — Rückfrage mit WhatsApp-Antwort-Buttons (Frage + Button-Liste)
• buttonReply — vom User angetippter Button (als ausgehende Antwort)
• document — Dokument-Nachricht (Dateiname, Meta, Caption) — z. B. fertige Rechnungs-PDF
• image — Foto-Nachricht (Thumbnail, Anzahl, Caption) — z. B. Baustellenfotos

8. iconCardGrid — Karten-Raster mit Icons

Von den Funktionen-Karten der Landing (Baudoku, Rapporte, …).

• eyebrow, heading, lead
• items[]: icon (Auswahl aus kuratiertem Lucide-Set), title, text, href (optional → Karte verlinkt)
• columns (2/3/4)

9. steps — „So funktioniert's" (Schritt-Rotation)

Von HowItWorks (4 Schritte mit Auto-Rotation + Chat-Bubble-Beispiel).

• eyebrow, heading, lead
• steps[]: icon, title, text, beispiel (Bubble-Text), outgoing (Bubble-Richtung)

10. splitFeature — Zweispalter Text + Visual

Von der „Kernstück Sprachsteuerung"-Karte (dunkler Zweispalter mit Bullets + Chat-Bubbles).

• badge (z. B. „Kernstück"), heading, text, bullets[]
• visual: Bild (Media) oder WhatsApp-Bubble-Paar (bubbleOut, bubbleIn)
• reverse (Visual links/rechts)

11. statsRow — Zahlen-Karten

Von „1 Chat fürs ganze Büro / 0 Onboarding / KI Import".

• items[]: value (kurz: Zahl oder Wort), label

12. logoGrid — Integrationen/Logos

Von der Integrationen-Section.

• eyebrow, heading, lead
• items[]: name, logo (Media oder Auswahl aus vorhandenem Integrations-Set)

13. comparisonTable — Vergleichstabelle

Von den /vergleiche/*-Seiten (work7 vs. Wettbewerber).

• heading, lead, Spaltentitel links/rechts (z. B. „work7" / „Andere")
• rows[]: criterion, work7, other

3. Neue Blöcke 🔨 — Priorität B (später)

14. trustBadges — Vertrauens-Karten

Von der Vertrauen-Section (Pilotphase / DSGVO / WhatsApp mit Absicht).

• items[]: icon, title, text, optionaler Link im Text

15. bookingCard — Demo-Termin-Karte

Von „Risikofrei starten" (Kalender-Icon, Text, CTA); Option: Cal.com-Embed statt Link, sobald CALCOM_LINK gesetzt ist.

• heading, text, cta, calcomEmbed (bool)

16. pricing — Preis-Section

Empfehlung: kein frei editierbarer Block, sondern Referenz-Block ohne eigene Felder (zieht die zentralen PRICING-Daten), damit Preise nur an einer Stelle gepflegt werden. Optional: highlightPlan-Auswahl.

17. productShowcase — Produkt-Tabs

Von „So sieht's aus, wenn's läuft" (Tabs: Chat / Agent / Dashboard / Rapport). CMS-Variante realistisch nur mit Screenshots statt Live-Mocks:

• tabs[]: label, image (Media), caption

18. mediaSection — Bild/Video mit Caption

• media, caption, maxWidth

CTA-Varianten (Erweiterung von Block 5 / 15)

Im Showcase als 24a–24d; im CMS sinnvoll als ein CTA-Block mit variant-Feld:

• ctaBanner — dunkler Abschluss-Banner (großer Titel, Sub, 1–2 Buttons)
• ctaSplitCard — Karte: Text links, Buttons rechts (kompakt, mitten im Inhalt)
• ctaWhatsApp — Direktkontakt: WhatsApp-Button + Telefonnummer
• ctaDouble — zwei Wege nebeneinander (Demo buchen / WhatsApp schreiben)

25. newsletterForm — Newsletter-Anmeldung

Im Showcase als 25a–25c; im CMS ein Block mit variant-Feld:

• inline — schmale Zeile: E-Mail-Feld + Button + Hinweiszeile
• card — dunkle Karte mit explizitem DSGVO-Einverständnis (Checkbox)
• split — Text/Bullets links, Formular-Karte rechts (Name optional + E-Mail + Checkbox)

Felder: heading, text, bullets (nur split), buttonLabel, consentText. Offen bei Umsetzung: Mailing-Anbindung (Anbieter? Double-Opt-in?) — die Showcase-Formulare sind statische Mockups ohne Backend.

19. testimonial — Zitat

Noch nicht einsetzen (Pilotphase, ehrliche Claims!) — vorbereiten für echte Kundenstimmen.

• quote, name, betrieb/rolle, avatar (Media)

4. Bewusst NICHT als Block

• Navbar/Footer — global, kein Seiteninhalt.
• Differenzierungs-Grafik („Inseln vs. Knotenpunkt", SVG-Verbindungslinien) — zu speziell/handgebaut; bleibt Landing-only. Falls gewünscht: als starrer Block ohne Felder.
• Preistexte frei im Block — Preiskonsistenz (siehe Nr. 16).

5. Empfohlene Ausbaureihenfolge

1. agentDemo (der USP-Baustein, expliziter Wunsch)
2. iconCardGrid + statsRow (decken die meisten „Karten"-Bedürfnisse ab)
3. splitFeature + steps (erzählende Sections)
4. logoGrid + comparisonTable
5. Priorität B nach Bedarf