# Content-Regeln für Blog-Post-Generierung

## 1. Visuelle Balance

- **Max 1 visuelle Komponente pro 3–4 Textabsätze**
- Visualisierungen dürfen **niemals direkt hintereinander** stehen
- Zwischen zwei visuellen Elementen müssen mindestens 2 Textabsätze liegen
- Nicht mehr als 5–6 visuelle Komponenten pro Blog-Post insgesamt

### Erlaubte visuelle Komponenten
- `Mermaid` / `DiagramFlow` / `DiagramSequence` — für Prozesse und Architektur
- `ArticleMeme` — echte Meme-Bilder (memegen.link), kurze und knackige Texte
- `BoldNumber` — einzelne Hero-Statistik mit Quelle
- `PremiumComparisonChart` / `MetricBar` — für Vergleiche
- `WebVitalsScore` — für Performance-Audits (max 1x pro Post)
- `WaterfallChart` — für Ladezeiten-Visualisierung (max 1x pro Post)
- `StatsGrid` — für 2–4 zusammengehörige Statistiken
- `ComparisonRow` — für Vorher/Nachher-Vergleiche

### Verboten
- `MemeCard` (text-basierte Memes) — nur echte Bild-Memes verwenden
- AI-generierte Bilder im Content — nur Thumbnails erlaubt
- `DiagramPie` — vermeiden, zu generisch

## 2. Zahlen und Statistiken

- **Niemals nackte Zahlen** — jede Statistik braucht Kontext und Vergleich
- `BoldNumber` nur für DIE eine zentrale Statistik des Abschnitts
- Mehrere Zahlen → `StatsGrid` oder `PremiumComparisonChart` verwenden
- Jede Zahl braucht eine **Quelle** (`source` + `sourceUrl` Pflicht)
- Vergleiche sind immer besser als Einzelwerte: "33% vs. 92%", nicht nur "92%"

## 3. Zitate und Quellen

- Alle Zitate brauchen klare Attribution: `author`, `source`, `sourceUrl`
- Bei übersetzten Zitaten: "(übersetzt)" im Zitat oder als Hinweis
- `ExternalLink` für alle externen Referenzen im Fließtext
- Keine erfundenen Zitate — nur verifizierbare Quellen

## 4. Mermaid-Diagramme

- **Extrem kompakt halten**: Strikt max 3–4 Nodes pro Diagramm
- **Ausschließlich vertikale Layouts** (TD) — besser für Mobile
- Deutsche Labels verwenden
- Keine verschachtelten Subgraphs
- Jedes Diagramm braucht einen aussagekräftigen `title`

## 5. Memes

- Nur echte Bilder via `ArticleMeme` (memegen.link API)
- **Extreme Sarkasmus-Pflicht** — mach dich über schlechte Agentur-Arbeit oder Legacy-Tech lustig
- **Kurze, knackige Captions** — max 6 Wörter pro Zeile
- Deutsche Captions verwenden
- Bewährte Templates: `drake`, `disastergirl`, `fine`, `daily-struggle`
- Max 2–3 Memes pro Blog-Post

## 6. Textstruktur

- Jeder Abschnitt startet mit einer klaren H2/H3
- `LeadParagraph` nur am Anfang (1–2 Stück)
- Normaler Text in `Paragraph`-Komponenten
- `Marker` sparsam einsetzen — max 2–3 pro Abschnitt
- `IconList` für Aufzählungen mit Pro/Contra