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

apps/web/docs/AUDIENCE.md

@@ -0,0 +1,33 @@
+# Zielgruppe
+
+## Primäre Zielgruppe: Der deutsche Mittelstand
+
+Unsere Blog-Inhalte richten sich an Entscheider in kleinen und mittelständischen Unternehmen – nicht an Entwickler.
+
+### Wer liest das?
+
+- **Geschäftsführer** von Handwerksbetrieben, Kanzleien, Arztpraxen
+- **Marketing-Verantwortliche** in mittelständischen Unternehmen (10–250 Mitarbeiter)
+- **Online-Shop-Betreiber** mit 20k–500k€ Jahresumsatz
+- **Selbstständige** und Freiberufler mit eigener Website
+
+### Was sie NICHT sind
+
+- Keine Entwickler (kein Code-Jargon)
+- Keine Enterprise-Konzerne (kein "Amazon-Scale", keine "Millionen User")
+- Keine Marketing-Agenturen (kein Buzzword-Bingo)
+
+### Wie wir schreiben
+
+- **Know-how transportieren** ohne zu dozieren
+- **Technische Fakten verständlich machen** — ELI5 aber nicht herablassend
+- **Realistische Beispiele**: "Tischlerei Müller mit 30 Seitenbesuchern am Tag", nicht "globaler Marktführer mit 10M MAU"
+- **Probleme benennen** die sie kennen: langsame Website, schlechtes Google-Ranking, verlorene Anfragen
+- **Lösungen zeigen** die greifbar sind: konkrete Vorher/Nachher-Vergleiche, echte Zahlen
+
+### Tonalität gegenüber dem Leser
+
+- Auf Augenhöhe, nie von oben herab
+- Wie ein kompetenter Bekannter der einem beim Thema Website hilft
+- Ehrlich über Probleme, ohne Panik zu machen
+- Kein Verkaufsdruck, keine künstliche Dringlichkeit

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

apps/web/docs/KEYWORDS.md

@@ -0,0 +1,63 @@
+# High-Converting Keywords (Digital Architect / B2B)
+
+Diese 50 Keywords sind strategisch ausgewählt, um entscheidungsfreudige B2B-Kunden (Geschäftsführer, CMOs, CTOs) anzuziehen, die nach Premium-Lösungen, Performance-Architekturen und messbarem ROI suchen. Sie meiden den "Billig-Sektor" (wie "Wordpress Website günstig") und fokussieren sich auf High-End Tech und Business-Impact.
+
+## Kategorie 1: Enterprise Performance & Core Web Vitals (Pain Point: Sichtbarkeit & Speed)
+1. "Core Web Vitals Optimierung Agentur"
+2. "PageSpeed Insights 100 erreichen B2B"
+3. "Website Ladezeit verbessern Conversion Rate"
+4. "Mobile First Indexing Strategie 2026"
+5. "Headless Commerce Performance Optimierung"
+6. "Time to First Byte reduzieren Architektur"
+7. "Largest Contentful Paint optimieren Next.js"
+8. "Website Performance Audit B2B"
+9. "Static Site Generation vs Server Side Rendering SEO"
+10. "Enterprise SEO Performance Tech Stack"
+
+## Kategorie 2: Modern Tech Stack & Headless (Pain Point: Skalierbarkeit & Legacy-Code)
+11. "Next.js Agentur Deutschland"
+12. "Headless CMS Migration B2B"
+13. "Vercel Hosting Enterprise Architektur"
+14. "Directus CMS Agentur Setup"
+15. "React Server Components Vorteile B2B"
+16. "Decoupled Architecture E-Commerce"
+17. "Legacy CMS ablösen Strategie"
+18. "Wordpress headless machen Vor- und Nachteile"
+19. "Jamstack Entwicklung Enterprise"
+20. "Microservices Web Architektur"
+
+## Kategorie 3: B2B Conversion & Digital ROI (Pain Point: Umsatz & Leads)
+21. "B2B Website Relaunch Strategie"
+22. "Digital Architect Consulting B2B"
+23. "Conversion Rate Optimierung Tech Stack"
+24. "Lead Generierung B2B Website Architektur"
+25. "High-End Website Entwicklung Kosten"
+26. "ROI von Website Performance"
+27. "B2B Landingpage Architektur"
+28. "Website als Vertriebsmitarbeiter B2B"
+29. "Data Driven Design B2B"
+30. "UX/UI Architektur für hohe Conversion"
+
+## Kategorie 4: Infrastruktur, Sicherheit & Skalierbarkeit (Pain Point: Ausfälle & Security)
+31. "Cloudflare Enterprise Setup Agentur"
+32. "DDoS Schutz Web Architektur B2B"
+33. "Serverless Architecture Vorteile"
+34. "Hochverfügbare Website Architektur"
+35. "Edge Computing für Websiten"
+36. "Web Security Audit Enterprise"
+37. "Zero Trust Web Architektur"
+38. "Traefik Proxy Setup Next.js"
+39. "Dockerized CMS Deployment"
+40. "CI/CD Pipeline Webentwicklung B2B"
+
+## Kategorie 5: Spezifische Lösungen & "Digital Architect" Keywords (Nischen-Autorität)
+41. "Digital Architect Agentur Deutschland"
+42. "Mittelstand Digitalisierung Web-Infrastruktur"
+43. "Industrie 4.0 B2B Website"
+44. "Premium Webentwicklung Geschäftsführer"
+45. "Software Architektur Beratung B2B"
+46. "Web Vitals als Rankingfaktor Strategie"
+47. "Next.js Directus Integration"
+48. "High Performance Corporate Website"
+49. "Tech Stack Audit für Mittelstand"
+50. "Sustainable Web Design Architektur"

apps/web/docs/STYLEGUIDE.md

@@ -72,3 +72,14 @@ Standardized containers ensure consistency across different screen sizes.
 - **Background Grid**: A subtle, low-opacity grid pattern provides a technical "blueprint" feel to the pages.
 - **Micro-interactions**: Hovering over icons or tags should trigger subtle scales (`105%-110%`) and color shifts.
 
+## 7. Thumbnail & Illustration Style
+
+Blog post thumbnails are generated via AI image generation. They should follow these style rules:
+
+- **Style**: Technical blueprint / architectural illustration — clean lines, monochrome base with one highlighter accent color
+- **No photos**: Abstract, geometric, or diagrammatic illustrations only
+- **Color palette**: Slate grays + one accent from the highlighter palette (yellow, pink, or green)
+- **Feel**: "Engineering notebook sketch" — precise, minimal, professional
+- **No text in images**: Titles and labels are handled by the website layout
+- **Aspect ratio**: 16:9 for blog headers, 1:1 for social media cards
+- **No AI-generated photos of people, products, or realistic scenes** — only abstract/technical visualizations

apps/web/docs/TONE.md

@@ -39,4 +39,15 @@ Es gibt keine versteckten Prioritäten, Sonderregeln oder impliziten Erwartungsh
 7. Langfristige Perspektive
 
 Die Kommunikation ist auf nachhaltige Zusammenarbeit ausgelegt, nicht auf kurzfristige Zustimmung.
-Entscheidungen und Empfehlungen orientieren sich am langfristigen Nutzen des Kunden.
+Entscheidungen und Empfehlungen orientieren sich am langfristigen Nutzen des Kunden.
+
+8. Persona: Marc Mintel
+
+- Mitte 30, deutsch, bodenständig
+- Umgangssprachlich aber professionell — wie ein Gespräch unter Kollegen, nicht wie ein Vortrag
+- Technisch kompetent, erklärt aber auf Augenhöhe statt zu dozieren
+- Der hilfreiche technische Nachbar, nicht der Silicon-Valley-Guru
+- Keine Arroganz, kein Belehren — Wissen teilen statt damit angeben. Wir machen unsere Dinge auch nicht größer als Sie sind. Wir sind bescheiden.
+- Spricht Probleme direkt an, ohne dramatisch zu werden
+- Nutzt "ich" statt "wir" oder Passivkonstruktionen
+- Vermeidet englische Buzzwords wo deutsche Begriffe existieren: "Kunden verlieren" statt "Churn Rate", "Ladezeit" statt "Time to Interactive"