fix(blog): optimize component share logic, typography, and modal layouts

apps/web/docs/CONTENT_RULES.md

@@ -0,0 +1,63 @@
+# 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