update

backend/config.py

@@ -1,7 +1,7 @@
 from pathlib import Path
 
 PROJECT_ROOT = Path(__file__).resolve().parent.parent
-DOC_DIR = PROJECT_ROOT / "doc"
+TEMPLATES_DIR = PROJECT_ROOT / "templates"
 STORAGE_DIR = PROJECT_ROOT / "storage"
 DB_PATH = PROJECT_ROOT / "guides.db"
 

backend/generator.py

@@ -6,7 +6,7 @@ from pathlib import Path
 
 from config import (
     CLAUDE_CLI,
-    DOC_DIR,
+    TEMPLATES_DIR,
     GENERATION_TIMEOUTS,
     MAX_CONCURRENT_GENERATIONS,
     MAX_ITERATIONS,
@@ -80,8 +80,8 @@ async def _render_pngs(pdf_path: Path, preview_dir: Path) -> list[Path]:
 
 
 def _build_generator_prompt(topic: str, format_name: str, html_path: Path) -> str:
-    spec = (DOC_DIR / "Format" / f"{format_name}.md").read_text(encoding="utf-8")
-    reference = (DOC_DIR / "Referenz" / f"{format_name}.md").read_text(encoding="utf-8")
+    spec = (TEMPLATES_DIR / "Format" / f"{format_name}.md").read_text(encoding="utf-8")
+    reference = (TEMPLATES_DIR / "Referenz" / f"{format_name}.md").read_text(encoding="utf-8")
 
     return f"""Erstelle einen Lern-Guide zum Thema "{topic}" im Format "{format_name}".
 
@@ -111,7 +111,7 @@ Führe KEIN weasyprint aus, erzeuge KEINE PDF.
 
 
 def _build_review_prompt(format_name: str, png_paths: list[Path], page_count: int) -> str:
-    spec = (DOC_DIR / "Format" / f"{format_name}.md").read_text(encoding="utf-8")
+    spec = (TEMPLATES_DIR / "Format" / f"{format_name}.md").read_text(encoding="utf-8")
 
     png_list = "\n".join(str(p) for p in png_paths)
 

templates/Format/BeginnerGuide.md

@@ -0,0 +1,147 @@
+```
+ANFÄNGER-GUIDE-STIL (HTML/CSS → PDF via WeasyPrint)
+
+FORMAT
+- A4 Hochformat, mehrseitig
+- @page { size: A4; margin: 22mm 20mm 20mm 20mm; }
+- @page :first { margin: 0; } für Cover
+- Footer: Seitenzahl Mitte, Guide-Titel rechts (außer Cover)
+
+UMFANG
+- 8-12 Kapitel à ~15 Min Lesezeit
+- ~1500 Wörter Fließtext pro Kapitel
+- 2-3 Code-Beispiele pro Kapitel (kurz, 5-15 Zeilen)
+- 15-25 Seiten gesamt
+- ~2-3h Lesezeit gesamt
+
+EINSTIEGSNIVEAU
+- Setzt nur voraus, dass der Leser weiß, WAS das Thema ist
+- Kapitel 1 erklärt Setup und erste Schritte von Null
+- Keine Vorkenntnisse im Thema selbst
+- Erklärt Begriffe beim ersten Auftreten
+
+KAPITEL-PROGRESSION
+- Aufgeteilt in 3 Teile mit eigenen TOC-Sektionen:
+  - Teil 1: Grundlagen — Was ist es, wie startet man, erste Konzepte
+  - Teil 2: Strukturen/Bausteine — Die wichtigsten Mechanismen
+  - Teil 3: Echte Anwendungen — Integration, Tooling, kleine Projekte
+- Jedes Kapitel baut auf vorherigen auf
+- Tiefere Konzepte erst nach den Grundlagen
+- Letztes Kapitel idealerweise mit kleiner echter Anwendung
+
+STRUKTUR
+1. Cover: vollflächiger Hintergrund, Hero-Aussage, Outcome-Versprechen
+2. Inhaltsverzeichnis: 3 Teile, nummeriert, mit Zeit-Markern (15 Min)
+3. Kapitel 1-N
+4. Ending: Spaced-Repetition-Plan, nächste Schritte, Begleitmaterial
+
+KAPITEL-AUFBAU
+1. Kapitel-Head: große Nummer + Titel + Subtitle, Trennlinie
+2. Gap-Opener: kursiv eingerahmt, Information-Gap explizit
+3. 2-4 H2-Sektionen
+4. Pro Sektion: Erklärtext + Code-Beispiel + ggf. Callout
+5. Recall-Box am Ende (3 Fragen)
+
+ELEMENTE
+- Fließtext: justify mit Silbentrennung
+- Codeblöcke: dunkler Hintergrund, syntax highlighting
+- Inline-Code: heller Hintergrund, Hauptfarbe
+- Tabellen: Header farbig (Hauptfarbe-Dunkel), Zeilen mit dünner Trennlinie
+- Callouts in 3 Varianten: tip (grün), warn (rot), note (Hauptfarbe)
+- Recall-Box: dunkler Hintergrund mit Akzentfarbe
+
+TYPOGRAFIE
+- Body: 10.5pt Serif (Charter), line-height 1.55
+- H1 Kapitel: 22pt Sans-Serif bold, Hauptfarbe-Dunkel
+- H2 Sektion: 14pt Sans-Serif bold
+- H3 Subsektion: 11pt Sans-Serif bold
+- Code: 8.5pt Monospace, line-height 1.5
+- Inline-Code: 9pt Monospace
+- Recall/Callout-Labels: 8pt uppercase, letter-spacing 1pt
+- Cover-H1: 56pt Sans-Serif bold, letter-spacing -2pt
+
+FARBEN (max 3 + Neutrals)
+- Hauptfarbe: kräftig, an offizielle Farbe des Themas anlehnen
+- Hauptfarbe-Dunkel: dunklere Variante für Headings und Akzente
+- Hauptfarbe-Darker: noch dunkler für Cover-Verlauf und Recall-Box
+- Hintergrund-Soft: helle Variante der Hauptfarbe
+- Code-Hintergrund: #1e2a3a (dunkel)
+- Text: #1a1a1a / muted #5a6470 / Linie #d8dde3
+- Callout-Farben: grün/rot/Hauptfarbe
+
+INFORMATION-GAP-OPENER (PFLICHT pro Kapitel)
+- Kursiv, eingerahmt mit Hauptfarbe-Border
+- Stellt konkrete Frage, die das Kapitel beantwortet
+- Erzeugt Spannung (Information-Gap)
+- Niveau passend zum Kapitel:
+  - Kapitel 1: setzt nur Grundverständnis voraus
+  - Letztes Kapitel: darf auf alle vorherigen Kapitel aufbauen
+
+RECALL-BOX (PFLICHT pro Kapitel)
+- Am Kapitel-Ende
+- Dunkler Hintergrund mit Akzentfarbe
+- 3 nummerierte Fragen
+- Direkt auf Kapitel-Inhalt bezogen
+- Code-Snippets in Fragen mit Akzentfarbe hervorgehoben
+
+ENDING (PFLICHT)
+- Spaced-Repetition-Plan: 4 Karten (Heute, +1 Tag, +7 Tage, +30 Tage)
+- "Was als nächstes lernen" mit Spezialisierungs-Vorschlägen
+- Verweis auf Begleitmaterial (OnePager, Cheatsheet, Mini-Guide)
+
+CALLOUT-NUTZUNG
+- tip (grün): Best Practice, idiomatische Lösung
+- warn (rot): Fallen, häufige Bugs, Anti-Patterns
+- note (Hauptfarbe): Hintergrund-Info, Querverweis
+
+CALLOUT-CSS WICHTIG
+- .callout-body > b:first-child mit display:block für Label
+- NICHT .callout-body b global mit display:block (zerstört Inline-Bold)
+- Mehrzeiliger Body-Text in <p style="margin:0;"> wrappen wenn Inline-Bolds drin sind
+
+THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
+- Hauptfarbe: offizielle Farbe des Themas
+- Logo-Buchstabe(n): erstes Zeichen oder Kürzel
+- Version + Stand-Datum
+- 8-12 Kapitel-Titel mit progressivem Aufbau
+
+PFLICHT-ELEMENTE PRO KAPITEL
+- 1 Gap-Opener am Anfang
+- 2-3 Code-Beispiele (kurz, 5-15 Zeilen)
+- Mindestens 1 Callout
+- 1 Recall-Box am Ende
+
+VERMEIDEN
+- Einleitungs-Floskeln ("In diesem Kapitel lernen wir...")
+- Wiederholungen aus vorherigem Kapitel
+- Übersichts-Inhalt (steht im OnePager)
+- Reine Referenz-Tabellen (stehen im Cheatsheet)
+- Konzepte vorwegnehmen, die später dran sind
+- Vorausgesetztes Wissen über das Thema
+- page-break mitten in Codeblock oder Callout (page-break-inside: avoid)
+- Mehr als 3 Schriftgrößen pro Sektion
+- Floats oder absolute positioning (bricht in WeasyPrint)
+- Subscript/Superscript via Unicode (nicht alle Fonts unterstützen das)
+
+GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
+1. HTML schreiben
+2. weasyprint file.html file.pdf (Timeout 240s)
+3. PDF zu PNGs: alle Seiten konvertieren
+4. Mehrere Seiten ansehen (Cover, TOC, Kapitel 1, mittlere Seite, Ending)
+5. Prüfen:
+   - Cover randlos und ohne Footer?
+   - TOC zeigt alle 3 Teile?
+   - Kapitel 1 fängt wirklich bei Null an?
+   - Kapitel beginnen auf neuer Seite?
+   - Code-Blöcke nicht über Seitenumbruch zerrissen?
+   - Recall-Boxen vollständig sichtbar?
+   - Footer mit Seitenzahl korrekt?
+   - Inline-Bolds in Callouts korrekt (nicht als Blöcke)?
+   - Steigt der Schwierigkeitsgrad spürbar von Kapitel zu Kapitel?
+6. Bei Problemen: fixen, ab Schritt 2 wiederholen
+7. Nach max 3 Iterationen ausgeben
+
+INSTALLATION
+- pip install weasyprint pdf2image
+- apt install poppler-utils
+```

templates/Format/Cheatsheet.md

@@ -0,0 +1,104 @@
+```
+CHEATSHEET-STIL QUERFORMAT (HTML/CSS → PDF via WeasyPrint)
+
+FORMAT
+- A4 Querformat (297mm × 210mm)
+- @page { size: A4 landscape; margin: 0; }
+- Padding: 7mm 9mm 18mm 9mm (unten Platz für Footer)
+- Position relative für absoluten Footer
+
+LAYOUT
+- Grid: hero (auto) / main (4 Spalten) / footer (absolute)
+- Main: 4 Spalten gleich breit, gap 3mm
+- Spalten intern: flex-column, gap 3mm
+- 8-12 thematische Blöcke verteilt (2-3 pro Spalte)
+
+STRUKTUR (in dieser Reihenfolge)
+1. Hero: Logo links (15mm), Titel + Untertitel mittig, Version + Stand rechts
+2. Main-Grid: 8-12 Blöcke in 4 Spalten
+3. Footer: farbige Box mit Quick-Commands + Tag (absolute, unten)
+
+UNTERSCHIEDE ZU HOCHFORMAT-CHEATSHEET
+- 4 Spalten statt 3 (mehr horizontaler Platz)
+- 9-12 Blöcke statt 8-10
+- Footer mit 4 Quick-Commands statt 3
+- Kleinere Schriftgrößen (8pt Body statt 8.5pt)
+- Kompaktere Code-Blöcke (6.5pt statt 6.8pt)
+
+BLOCK-AUFBAU
+- Block-Head: Hauptfarbe-Hintergrund, weißer Text, Icon links (3.5mm)
+- Block-Body: weißer Hintergrund, dünner Rand, abgerundet 2mm
+- Inhalt: dichte Referenz, nicht Erklärung
+- Varianten: Referenz-Tabelle, Code-Block, Kachel-Grid, Plus/Minus
+
+FARBEN (max 3 + Neutrals)
+- Hauptfarbe: an offizielle Farbe des Themas anlehnen
+- Hauptfarbe-Dunkel: dunklere Variante für Headings
+- Hauptfarbe-Darker: noch dunkler für Footer
+- Akzentfarbe für Plus/Minus: grün/rot
+- Hintergrund-Soft: helle Variante der Hauptfarbe
+- Code-Hintergrund: #1e2a3a (dunkel)
+- Text: #1a1a1a / muted #5a6470 / Linie #d8dde3
+
+TYPOGRAFIE
+- Body: 8pt, line-height 1.35
+- Hero h1: 18pt bold
+- Block-Head: 8pt bold uppercase, letter-spacing 0.5pt
+- Tabellen: 7.5pt, Keys 7pt monospace
+- Code: 6.5pt monospace, line-height 1.4
+- Inline-Code: 7pt monospace, Hauptfarbe
+- Max 3 Schriftgrößen pro Block
+
+ICONS
+- SVG inline, stroke statt fill
+- 3.5mm in Block-Heads
+- 2mm in Tile-Icons (kleiner als Hochformat)
+- currentColor für automatische Anpassung
+
+BLOCK-TYPEN (für Variation nutzen)
+- Referenz-Tabelle: 2-spaltig (Befehl/Methode → Bedeutung)
+- Code-Block: vollständiges Beispiel mit Syntax-Highlighting
+- Kachel-Grid: 2x4 mit Icons (z.B. Ökosystem)
+- Direktiven-Grid: 2-spaltig kompakte Begriffe + Kurzbeschreibung
+- Plus/Minus-Split: 2-spaltig (idiomatisch vs vermeiden)
+
+THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
+- Hauptfarbe: offizielle Farbe des Themas
+- Logo-Buchstabe(n) oder Kürzel
+- Version + Stand-Datum
+- Block-Auswahl: 8-12 wichtigste Referenz-Themen
+- Quick-Commands im Footer: 4 wichtigste Kommandos
+
+VISUELLE ELEMENTE PFLICHT
+- Mindestens 1 Code-Block (oft mehrere im Querformat)
+- Mindestens 1 Kachel-Grid mit Icons
+- Mindestens 1 Plus/Minus-Split
+- Footer mit Quick-Commands
+- Versionsbadge in Hero
+
+VERMEIDEN
+- Reine Bullet-Listen ohne Struktur
+- Erklärtext (gehört in Guide, nicht Cheatsheet)
+- Mehr als 12 Blöcke (überfüllt)
+- Mehr als 3 Schriftgrößen
+- Vertikal sehr lange Blöcke (Spalten unbalanciert)
+- Floats oder absolute positioning (außer für Footer)
+
+GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
+1. HTML schreiben
+2. weasyprint file.html file.pdf
+3. PDF zu PNG: python -c "from pdf2image import convert_from_path; convert_from_path('file.pdf', dpi=120)[0].save('preview.png')"
+4. Preview ansehen mit Read-Tool
+5. Prüfen:
+   - Footer überlappt nicht mit Inhalt?
+   - 4 Spalten balanciert (ähnliche Höhe)?
+   - Alle Blöcke vollständig sichtbar?
+   - Code-Blöcke nicht abgeschnitten?
+   - Icons rendern?
+6. Bei Problemen: Inhalt straffen oder padding-bottom erhöhen, ab Schritt 2 wiederholen
+7. Nach max 3 Iterationen ausgeben
+
+INSTALLATION
+- pip install weasyprint pdf2image
+- apt install poppler-utils
+```

templates/Format/ExtendedGuide.md

@@ -0,0 +1,171 @@
+```
+EXTENDED-GUIDE-STIL (HTML/CSS → PDF via WeasyPrint)
+
+FORMAT
+- A4 Hochformat, mehrseitig
+- @page { size: A4; margin: 22mm 20mm 20mm 20mm; }
+- @page :first { margin: 0; } für Cover
+- Footer: Seitenzahl Mitte, Guide-Titel rechts (außer Cover)
+
+UMFANG
+- 15-20 Kapitel à ~15 Min Lesezeit
+- ~1500 Wörter Fließtext pro Kapitel (gleich wie alle anderen Stufen)
+- 2-3 Code-Beispiele pro Kapitel (gleich wie alle anderen, 5-15 Zeilen)
+- 50-70 Seiten gesamt
+- ~4-5h Lesezeit gesamt
+
+EINSTIEGSNIVEAU
+- Setzt Anfänger- UND Fortgeschritten-Guide voraus
+- Grundbegriffe und fortgeschrittene Patterns werden NICHT mehr erklärt
+- Verweist bei Bedarf auf vorherige Guides
+- Geht direkt in Internals, Spezial-Themen und Edge-Cases
+
+UNTERSCHIED ZU FORTGESCHRITTEN-GUIDE
+- Kapitel-Größe IDENTISCH (1500 Wörter, 2-3 Code-Beispiele, 15 Min)
+- Unterschied liegt nur in:
+  - THEMEN (Experten/Nischen, Internals, Sprach-Mechanismen)
+  - VORAUSGESETZTEM WISSEN (alle Patterns aus Fortgeschritten)
+  - KAPITEL-ANZAHL (15-20 statt 12-15)
+  - "WARUM" über "WIE" (mehr Trade-Offs, mehr Design-Entscheidungen)
+
+KAPITEL-PROGRESSION
+- Aufgeteilt in 3 Teile mit eigenen TOC-Sektionen
+- Beispiele für PHP:
+  - Teil 1: Sprach-Internals — Reflection, SPL, Stream-Wrapper, GC, FFI
+  - Teil 2: Performance & Async — OpCache, Fibers, ReactPHP, Profiling, Caching
+  - Teil 3: Architektur & Patterns — DI-Container, Event-Dispatcher, CQRS, DDD, Hexagonal, Event Sourcing
+- Jedes Kapitel geht in Bereiche, wo die meisten Entwickler nicht hingehen
+- Bewusst dort, wo Mainstream-Tutorials aufhören
+
+STRUKTUR
+1. Cover: vollflächiger Hintergrund, Hero-Aussage mit "an der Grenze" oder ähnlichem Tone
+2. Inhaltsverzeichnis: 3 Teile, nummeriert, Zeit-Marker (15 Min) - kann auf zwei Seiten brechen
+3. Kapitel 1-N
+4. Ending: Spaced-Repetition-Plan, nächste Schritte (außerhalb des offiziellen Lernpfads), Begleitmaterial
+
+KAPITEL-AUFBAU
+1. Kapitel-Head: große Nummer + Titel + Subtitle, Trennlinie
+2. Gap-Opener: kursiv eingerahmt, anspruchsvolles Problem oder Tief-Frage
+3. 3-5 H2-Sektionen (mehr als im Fortgeschritten-Guide)
+4. Pro Sektion: Erklärtext + Code-Beispiel + ggf. Callout
+5. Recall-Box am Ende (3 Fragen, anspruchsvoller als alle Stufen davor)
+
+CODE-BEISPIELE
+- Production-Code-Niveau, keine Demos
+- Echte Library-Namen (Symfony, Doctrine, ReactPHP, EventSauce)
+- Internals-Code zur Erklärung von PHP-Mechanismen
+- Vereinfachte Implementierungen echter Frameworks
+- Länge bleibt 5-15 Zeilen (wie alle anderen Stufen)
+
+ELEMENTE
+- Fließtext: justify mit Silbentrennung
+- Codeblöcke: dunkler Hintergrund, syntax highlighting
+- Inline-Code: heller Hintergrund, Hauptfarbe
+- Tabellen: Header farbig (Hauptfarbe-Dunkel), Vergleichstabellen mit Trade-Offs
+- Callouts in 3 Varianten: tip (grün), warn (rot), note (Hauptfarbe)
+- Recall-Box: dunkler Hintergrund mit Akzentfarbe
+
+TYPOGRAFIE
+- Body: 10.5pt Serif (Charter), line-height 1.55
+- H1 Kapitel: 22pt Sans-Serif bold, Hauptfarbe-Dunkel
+- H2 Sektion: 14pt Sans-Serif bold
+- H3 Subsektion: 11pt Sans-Serif bold
+- Code: 8.5pt Monospace, line-height 1.5
+- Inline-Code: 9pt Monospace
+- Recall/Callout-Labels: 8pt uppercase, letter-spacing 1pt
+- Cover-H1: 56pt Sans-Serif bold, letter-spacing -2pt
+
+FARBEN (max 3 + Neutrals)
+- Hauptfarbe: kräftig, an offizielle Farbe des Themas anlehnen
+- Hauptfarbe-Dunkel: dunklere Variante für Headings und Akzente
+- Hauptfarbe-Darker: noch dunkler für Cover-Verlauf und Recall-Box
+- Hintergrund-Soft: helle Variante der Hauptfarbe
+- Code-Hintergrund: #1e2a3a (dunkel)
+- Text: #1a1a1a / muted #5a6470 / Linie #d8dde3
+- Callout-Farben: grün/rot/Hauptfarbe
+
+INFORMATION-GAP-OPENER (PFLICHT pro Kapitel)
+- Kursiv, eingerahmt mit Hauptfarbe-Border
+- Anspruchsvolles Problem oder Internals-Frage als Aufhänger
+- Niveau: setzt fortgeschrittene Praxis voraus
+- Beispiele:
+  - "Wie weiß Symfony zur Laufzeit, welche Routen in deinem Controller stecken?"
+  - "PHP räumt Speicher automatisch auf – meistens. Aber in Long-Running-Prozessen..."
+  - "Anämische Entities sind in PHP weit verbreitet..."
+
+RECALL-BOX (PFLICHT pro Kapitel)
+- Am Kapitel-Ende
+- 3 Fragen, anspruchsvoller als Fortgeschritten
+- Fragen nach Warum/Wofür/Wann genau statt Was/Wie
+- Code-Snippets in Fragen mit Akzentfarbe hervorgehoben
+
+ENDING (PFLICHT)
+- Spaced-Repetition-Plan: 4 Karten (Heute, +7 Tage, +30 Tage, +90 Tage)
+  - Sehr langfristige Spacing-Abstände
+  - Aufgaben anspruchsvoll (eigenes Spezialprojekt, Source-Code lesen)
+- "Was als nächstes lernen" — bewusst außerhalb offizieller Lernpfade
+  (Source-Code, eigene Extensions, Sprach-Design, RFCs)
+- Verweis auf ALLE Begleitmaterialien (komplette Reihe)
+
+CALLOUT-NUTZUNG
+- tip (grün): Best Practice für Spezial-Cases, Library-Empfehlung
+- warn (rot): subtile Fallen, Architektur-Anti-Patterns, Komplexitäts-Warnungen
+- note (Hauptfarbe): Hintergrund-Info, alternative Lösung, "wann lohnt sich das"
+
+CALLOUT-CSS WICHTIG
+- .callout-body > b:first-child mit display:block für Label
+- NICHT .callout-body b global mit display:block (zerstört Inline-Bold)
+- Mehrzeiliger Body-Text in <p style="margin:0;"> wrappen wenn Inline-Bolds drin sind
+
+GAP-CSS WICHTIG
+- .gap > b:first-child mit display:block für "FRAGE ZUM EINSTIEG"-Label
+- NICHT .gap b global mit display:block (zerstört Inline-Bold im Frage-Text)
+- Bei Inline-Bolds im Gap-Text wird sonst jedes <b> zum Block
+
+THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
+- Hauptfarbe: offizielle Farbe des Themas
+- Logo-Buchstabe(n) oder Kürzel
+- Version + Stand-Datum
+- 15-20 Kapitel-Titel: Internals, Spezial-Themen, Production-Edge
+- Themen, die der Mainstream-Entwickler nicht täglich braucht
+
+PFLICHT-ELEMENTE PRO KAPITEL
+- 1 Gap-Opener am Anfang
+- 2-3 Code-Beispiele (5-15 Zeilen, gleich wie alle anderen Stufen)
+- Mindestens 1 Callout
+- 1 Recall-Box am Ende
+
+VERMEIDEN
+- Wiederholung von Anfänger- und Fortgeschritten-Themen
+- Einleitungs-Floskeln ("In diesem Kapitel lernen wir...")
+- Übersichts-Inhalt (steht im OnePager)
+- Reine Referenz-Tabellen (stehen im Cheatsheet)
+- Toy-Beispiele (Production-Niveau zeigen)
+- Themen, die der Mainstream-Entwickler täglich braucht
+  (gehören in Anfänger oder Fortgeschritten)
+- page-break mitten in Codeblock oder Callout (page-break-inside: avoid)
+- Mehr als 3 Schriftgrößen pro Sektion
+- Floats oder absolute positioning (bricht in WeasyPrint)
+
+GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
+1. HTML schreiben (sehr langes Dokument, ~3500-5000 Zeilen typisch)
+2. weasyprint file.html file.pdf (Timeout 300s, große Datei)
+3. PDF zu PNGs: alle Seiten konvertieren (dpi=90 für Memory-Effizienz)
+4. Schlüsselseiten ansehen: Cover, TOC, Kapitel 1, mittlere Seite, Ending
+5. Prüfen:
+   - Cover randlos und ohne Footer?
+   - TOC zeigt alle 3 Teile? (kann auf 2 Seiten brechen bei 15+ Kapiteln, OK)
+   - Kapitel beginnen auf neuer Seite?
+   - Code-Blöcke nicht über Seitenumbruch zerrissen?
+   - Recall-Boxen vollständig sichtbar?
+   - Footer mit Seitenzahl korrekt?
+   - Setzt der Guide spürbar Anfänger+Fortgeschritten-Wissen voraus?
+   - Sind Themen wirklich Experten-/Nischen-Niveau?
+   - Inline-Bolds in Gap-Openers und Callouts korrekt (nicht als Blöcke)?
+6. Bei Problemen: fixen, ab Schritt 2 wiederholen
+7. Nach max 3 Iterationen ausgeben
+
+INSTALLATION
+- pip install weasyprint pdf2image
+- apt install poppler-utils
+```

templates/Format/IntermediateGuide.md

@@ -0,0 +1,166 @@
+```
+FORTGESCHRITTEN-GUIDE-STIL (HTML/CSS → PDF via WeasyPrint)
+
+FORMAT
+- A4 Hochformat, mehrseitig
+- @page { size: A4; margin: 22mm 20mm 20mm 20mm; }
+- @page :first { margin: 0; } für Cover
+- Footer: Seitenzahl Mitte, Guide-Titel rechts (außer Cover)
+
+UMFANG
+- 12-15 Kapitel à ~15 Min Lesezeit
+- ~1500 Wörter Fließtext pro Kapitel (gleich wie Anfänger)
+- 2-3 Code-Beispiele pro Kapitel (gleich wie Anfänger, 5-15 Zeilen)
+- 30-50 Seiten gesamt
+- ~3-4h Lesezeit gesamt
+
+EINSTIEGSNIVEAU
+- Setzt Anfänger-Guide oder gleichwertiges Vorwissen voraus
+- Grundbegriffe werden NICHT mehr erklärt
+- Verweist bei Bedarf auf Anfänger-Guide
+- Geht direkt in fortgeschrittene Patterns und Production-Tools
+
+UNTERSCHIED ZU ANFÄNGER-GUIDE
+- Kapitel-Größe IDENTISCH (1500 Wörter, 2-3 Code-Beispiele, 15 Min)
+- Unterschied liegt nur in:
+  - THEMEN (anspruchsvoller, weniger bekannt)
+  - VORAUSGESETZTEM WISSEN (Grundlagen werden nicht wiederholt)
+  - REIFE der Code-Beispiele (Production-nah statt Demo)
+  - KAPITEL-ANZAHL (12-15 statt 8-12)
+
+KAPITEL-PROGRESSION
+- Aufgeteilt in 3 Teile mit eigenen TOC-Sektionen
+- Beispiele für PHP:
+  - Teil 1: OOP-Patterns — Interfaces, Traits, Enums, Attribute
+  - Teil 2: Funktional & Generators — Closures, Higher-Order, Generators, Generics
+  - Teil 3: Production-Tools — PDO, HTTP-Clients, Static Analysis, Tests
+- Jedes Kapitel ist tiefer als ein Anfänger-Kapitel
+- Mehr Edge Cases, mehr "warum genau so"
+- Production-Code-Niveau
+
+STRUKTUR
+1. Cover: vollflächiger Hintergrund, Hero-Aussage mit "tiefer" oder ähnlichem Tone
+2. Inhaltsverzeichnis: 3 Teile, nummeriert, mit Zeit-Markern (15 Min)
+3. Kapitel 1-12
+4. Ending: Spaced-Repetition-Plan, nächste Schritte, Begleitmaterial
+
+KAPITEL-AUFBAU
+1. Kapitel-Head: große Nummer + Titel + Subtitle, Trennlinie
+2. Gap-Opener: kursiv eingerahmt, konkretes Praxis-Problem
+3. 2-4 H2-Sektionen
+4. Pro Sektion: Erklärtext + Code-Beispiel + ggf. Callout
+5. Recall-Box am Ende (3 Fragen, anspruchsvoller als im Anfänger)
+
+CODE-BEISPIELE
+- Realistischer als im Anfänger-Guide (kein "foo/bar")
+- Production-nahe Patterns
+- TypeScript/Type-Hints idiomatisch
+- Echte Library-Namen (Guzzle, Doctrine, PHPStan, Symfony)
+- Mehr Edge Cases zeigen
+- Länge bleibt 5-15 Zeilen (wie Anfänger)
+
+ELEMENTE
+- Fließtext: justify mit Silbentrennung
+- Codeblöcke: dunkler Hintergrund, syntax highlighting
+- Inline-Code: heller Hintergrund, Hauptfarbe
+- Tabellen: Header farbig (Hauptfarbe-Dunkel)
+- Callouts in 3 Varianten: tip (grün), warn (rot), note (Hauptfarbe)
+- Recall-Box: dunkler Hintergrund mit Akzentfarbe
+
+TYPOGRAFIE
+- Body: 10.5pt Serif (Charter), line-height 1.55
+- H1 Kapitel: 22pt Sans-Serif bold, Hauptfarbe-Dunkel
+- H2 Sektion: 14pt Sans-Serif bold
+- H3 Subsektion: 11pt Sans-Serif bold
+- Code: 8.5pt Monospace, line-height 1.5
+- Inline-Code: 9pt Monospace
+- Recall/Callout-Labels: 8pt uppercase, letter-spacing 1pt
+- Cover-H1: 56pt Sans-Serif bold, letter-spacing -2pt
+
+FARBEN (max 3 + Neutrals)
+- Hauptfarbe: kräftig, an offizielle Farbe des Themas anlehnen
+- Hauptfarbe-Dunkel: dunklere Variante für Headings und Akzente
+- Hauptfarbe-Darker: noch dunkler für Cover-Verlauf und Recall-Box
+- Hintergrund-Soft: helle Variante der Hauptfarbe
+- Code-Hintergrund: #1e2a3a (dunkel)
+- Text: #1a1a1a / muted #5a6470 / Linie #d8dde3
+- Callout-Farben: grün/rot/Hauptfarbe
+
+INFORMATION-GAP-OPENER (PFLICHT pro Kapitel)
+- Kursiv, eingerahmt mit Hauptfarbe-Border
+- Konkretes Praxis-Problem als Aufhänger
+- Niveau: setzt Anfänger-Wissen voraus
+- Beispiele:
+  - "Du hast drei verschiedene Logger – Datei, Datenbank, Sentry..."
+  - "Du sollst die Zeilen einer 5-GB-Logdatei verarbeiten..."
+  - "SQL-Injection ist seit 20 Jahren die häufigste Web-Sicherheitslücke..."
+
+RECALL-BOX (PFLICHT pro Kapitel)
+- Am Kapitel-Ende
+- 3 Fragen, anspruchsvoller als im Anfänger-Guide
+- Fragen nach Wann/Warum/Wofür statt Was/Wie
+- Code-Snippets in Fragen mit Akzentfarbe hervorgehoben
+
+ENDING (PFLICHT)
+- Spaced-Repetition-Plan: 4 Karten (Heute, +3 Tage, +14 Tage, +60 Tage)
+  - Anspruchsvollere Spacing-Abstände als im Anfänger-Guide
+  - Aufgaben anspruchsvoller (echtes Projekt aufsetzen)
+- "Was als nächstes lernen" mit Spezialisierungs-Vorschlägen Richtung Extended
+- Verweis auf alle Begleitmaterialien (OnePager, Cheatsheet, Mini, Anfänger)
+
+CALLOUT-NUTZUNG
+- tip (grün): Best Practice, idiomatische Lösung, Library-Empfehlung
+- warn (rot): Fallen, häufige Anti-Patterns, Sicherheits-Risiken
+- note (Hauptfarbe): Hintergrund-Info, alternative Lösung, Querverweis
+
+CALLOUT-CSS WICHTIG
+- .callout-body > b:first-child mit display:block für Label
+- NICHT .callout-body b global mit display:block (zerstört Inline-Bold)
+- Mehrzeiliger Body-Text in <p style="margin:0;"> wrappen wenn Inline-Bolds drin sind
+
+THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
+- Hauptfarbe: offizielle Farbe des Themas
+- Logo-Buchstabe(n) oder Kürzel
+- Version + Stand-Datum
+- 12-15 Kapitel-Titel: fortgeschrittene Patterns, Tools, Production-Aspekte
+- Keine Wiederholung der Anfänger-Grundlagen
+
+PFLICHT-ELEMENTE PRO KAPITEL
+- 1 Gap-Opener am Anfang
+- 2-3 Code-Beispiele (5-15 Zeilen, gleich wie Anfänger)
+- Mindestens 1 Callout
+- 1 Recall-Box am Ende
+
+VERMEIDEN
+- Wiederholung von Grundlagen aus dem Anfänger-Guide
+- Einleitungs-Floskeln ("In diesem Kapitel lernen wir...")
+- Übersichts-Inhalt (steht im OnePager)
+- Reine Referenz-Tabellen (stehen im Cheatsheet)
+- Toy-Beispiele wie foo/bar (Production-Code zeigen)
+- Themen, die in Anfänger oder Extended besser passen
+- page-break mitten in Codeblock oder Callout (page-break-inside: avoid)
+- Mehr als 3 Schriftgrößen pro Sektion
+- Floats oder absolute positioning (bricht in WeasyPrint)
+
+GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
+1. HTML schreiben
+2. weasyprint file.html file.pdf (Timeout 300s)
+3. PDF zu PNGs: alle Seiten konvertieren
+4. Schlüsselseiten ansehen: Cover, TOC, Kapitel 1, mittlere Seite, Ending
+5. Prüfen:
+   - Cover randlos und ohne Footer?
+   - TOC zeigt alle 3 Teile?
+   - Kapitel beginnen auf neuer Seite?
+   - Code-Blöcke nicht über Seitenumbruch zerrissen?
+   - Recall-Boxen vollständig sichtbar?
+   - Footer mit Seitenzahl korrekt?
+   - Setzt der Guide spürbar Anfänger-Wissen voraus?
+   - Sind Code-Beispiele realistisch (kein foo/bar)?
+   - Inline-Bolds in Callouts korrekt (nicht als Blöcke)?
+6. Bei Problemen: fixen, ab Schritt 2 wiederholen
+7. Nach max 3 Iterationen ausgeben
+
+INSTALLATION
+- pip install weasyprint pdf2image
+- apt install poppler-utils
+```

templates/Format/MiniGuide.md

@@ -0,0 +1,148 @@
+```
+MINI-GUIDE-STIL (HTML/CSS → PDF via WeasyPrint)
+
+FORMAT
+- A4 Hochformat, 3-4 Seiten
+- @page { size: A4; margin: 18mm 18mm 16mm 18mm; }
+- Footer: Seitenzahl Mitte, Guide-Titel rechts
+
+UMFANG (einheitlich mit allen Guide-Stufen)
+- 1 Kapitel (oder besser: 4-6 Sektionen ohne Kapitel-Struktur)
+- ~1500 Wörter Fließtext
+- 5-7 Code-Beispiele (sehr kurz, 2-7 Zeilen)
+- ~15 Min Lesezeit
+- 3-4 Seiten
+
+ZIELGRUPPE — KOMPAKTER ANFÄNGER-EINSTIEG
+- Echte Anfänger ohne Programmier-Vorwissen im Thema
+- Setzt nur allgemeines Verständnis voraus ("was ist Programmieren")
+- Begriffe werden bei erstem Auftreten erklärt
+- KEIN Sprach-Charakter-Überblick für erfahrene Entwickler
+- KEINE fortgeschrittenen Features (auch wenn cool und kurz)
+
+INHALTLICHE PRINZIPIEN
+- Nur absolute Basics zeigen
+- Themen, die jemand nach 15 Min selbst nachmachen kann
+- Keine Tooling-Komplexität (Paketmanager, Build-Systeme, Compiler)
+- Keine Sprach-Spezialitäten (Type-Systeme, Decorators, Generics)
+- Keine OOP, wenn möglich (oder nur trivialste Form)
+- Erklär-Tiefe vor Feature-Breite
+- Lieber 5 Konzepte gründlich als 15 oberflächlich
+
+TYPISCHE 5-SEKTIONEN-STRUKTUR
+1. Sprache starten — Installation, erste Datei, erstes Programm
+2. Variablen — Konzept + 2-3 Basis-Typen
+3. Kontrollfluss — if/else mit einfachem Beispiel
+4. Listen + Iteration — Array + Schleife
+5. Funktionen — Deklaration + Aufruf + Rückgabe
+
+(Diese Reihenfolge baut aufeinander auf und endet mit etwas Sinnvollem.)
+
+STRUKTUR
+1. Kompakter Head: Logo links (16mm), Titel + Subtitle mittig, Badge + Zeit rechts
+2. Gap-Opener: Frage zum Einstieg, kursiv eingerahmt, niedrigschwellig
+3. 4-6 H2-Sektionen mit Erklärtext + Code-Beispiel + ggf. Callout
+
+ELEMENTE
+- Fließtext: justify mit Silbentrennung
+- Codeblöcke: dunkler Hintergrund, syntax highlighting, sehr kurz (2-7 Zeilen)
+- Inline-Code: heller Hintergrund, Hauptfarbe
+- Tabellen: nur wenn wirklich nötig (Vergleichs-Operatoren o.ä.)
+- Callouts in 3 Varianten: tip (grün), warn (rot), note (Hauptfarbe)
+
+TYPOGRAFIE
+- Body: 10.5pt Serif (Charter), line-height 1.55
+- Head h1: 20pt Sans-Serif bold
+- H2 Sektion: 13pt Sans-Serif bold
+- Code: 8.5pt Monospace, line-height 1.5
+- Inline-Code: 9pt Monospace
+- Callout-Labels: 8pt uppercase, letter-spacing 1pt
+
+FARBEN (max 3 + Neutrals)
+- Hauptfarbe: kräftig, an offizielle Farbe des Themas anlehnen
+- Hauptfarbe-Dunkel: dunklere Variante für Akzente
+- Hintergrund-Soft: helle Variante der Hauptfarbe
+- Code-Hintergrund: #1e2a3a
+- Text: #1a1a1a / muted #5a6470 / Linie #d8dde3
+- Callout-Farben: grün/rot/Hauptfarbe
+
+GAP-OPENER (PFLICHT)
+- Kursiv, eingerahmt mit Hauptfarbe-Border
+- Niedrigschwellige Frage, die der Guide beantwortet
+- Begeistert mit relevanter Statistik oder Praxis-Bezug
+- KEINE Fachbegriffe, die noch nicht erklärt sind
+- Beispiele:
+  - "PHP läuft hinter rund drei Viertel aller Webseiten..."
+  - "JavaScript ist die Sprache des Webs – aber wie schreibt man das eigentliche Code..."
+  - "Python ist die beliebteste Anfänger-Sprache..."
+
+ERKLÄR-TIEFE PRO KONZEPT
+- Konzept benennen (z.B. "Variable")
+- In einem Satz erklären, was es ist
+- Code-Beispiel mit Kommentaren
+- Sprach-Eigenheiten erwähnen (z.B. "in PHP beginnen Variablen mit $")
+- KEIN Verweis auf andere Konzepte, die noch kommen
+
+CALLOUT-NUTZUNG
+- tip (grün): Übungs-Anregung am Ende, ermutigend
+- warn (rot): Anfänger-Stolperfallen ("= vs ==", "vergessenes Semikolon")
+- note (Hauptfarbe): Hintergrund-Info, Erklärung einer Sprach-Eigenheit
+
+CALLOUT-CSS WICHTIG
+- .callout-body > b:first-child mit display:block für Label
+- NICHT .callout-body b global mit display:block (zerstört Inline-Bold)
+
+GAP-CSS WICHTIG
+- .gap > b:first-child mit display:block für "FRAGE ZUM EINSTIEG"-Label
+- NICHT .gap b global mit display:block (zerstört Inline-Bold im Frage-Text)
+
+THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
+- Hauptfarbe: offizielle Farbe des Themas
+- Logo-Buchstabe(n) oder Kürzel
+- Begrüßungs-Statistik im Gap-Opener
+- 4-6 Anfänger-Themen wählen (siehe Standard-Struktur)
+
+PFLICHT-ELEMENTE
+- 1 Gap-Opener am Anfang
+- 5-7 Code-Beispiele (kurz, 2-7 Zeilen, anfänger-tauglich)
+- Mindestens 1 Callout (oft: warn für Stolperfalle, tip für Übung am Ende)
+- Inline-Codes für Fachbegriffe
+
+VERMEIDEN
+- TOC oder Cover (überdimensioniert für 15 Min)
+- Einleitungs-Floskeln ("In diesem Mini-Guide lernen wir...")
+- Vollständigkeitsanspruch (gehört in größeren Guide)
+- Referenz-Tabellen ohne Erklärtext (gehört in Cheatsheet)
+- Recall oder Next-Step am Ende (Mini-Guide endet mit Inhalt)
+- Themen, die fortgeschritten sind (auch wenn cool):
+  - Type-Systems, Type-Hints, Generics
+  - OOP-Features (außer trivialster Form)
+  - Tooling (Paketmanager, Build, Linting)
+  - Sprach-Spezialitäten (PHP: strict_types, readonly, Composer, PSR-4)
+- page-break mitten in Codeblock oder Callout (page-break-inside: avoid)
+- Mehr als 3 Schriftgrößen pro Sektion
+- Floats oder absolute positioning (bricht in WeasyPrint)
+- Fachbegriffe ohne Erklärung
+- Verweise auf andere Konzepte, die noch kommen
+- Edge Cases und "aber"-Sätze
+
+GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
+1. HTML schreiben
+2. weasyprint file.html file.pdf
+3. PDF zu PNGs: alle Seiten konvertieren
+4. Alle Seiten ansehen
+5. Prüfen:
+   - Head sauber (Logo überlappt nicht mit Titel)?
+   - Code-Blöcke nicht über Seitenumbruch zerrissen?
+   - Callouts vollständig sichtbar?
+   - Inline-Bolds in Callouts/Gap korrekt (nicht als Blöcke)?
+   - Footer mit Seitenzahl korrekt?
+   - Würde ein echter Anfänger das verstehen?
+   - Wurden alle Fachbegriffe beim ersten Auftreten erklärt?
+6. Bei Problemen: fixen, ab Schritt 2 wiederholen
+7. Nach max 3 Iterationen ausgeben
+
+INSTALLATION
+- pip install weasyprint pdf2image
+- apt install poppler-utils
+```

templates/Format/OnePager.md

@@ -0,0 +1,96 @@
+```
+ONEPAGER-STIL QUERFORMAT (HTML/CSS → PDF via WeasyPrint)
+
+FORMAT
+- A4 Querformat (297mm × 210mm)
+- @page { size: A4 landscape; margin: 0; }
+- Padding: 9mm 11mm 9mm 11mm
+
+LAYOUT
+- Grid: hero+stats (auto) / divider / main (1fr, 3 Spalten) / footer (absolute)
+- Stats-Bar in Hero integriert (rechts), spart vertikalen Platz
+- Main: 3 Spalten gleich breit, gap 4mm
+- Spalten intern: flex-column, gap 4mm
+- 6 thematische Blöcke verteilt (2 pro Spalte)
+
+STRUKTUR (in dieser Reihenfolge)
+1. Hero: Logo links (22mm), Titel + Untertitel mittig, 4 Stats rechts
+2. Divider: 1.5pt schwarze Linie
+3. Main-Grid: 6 Blöcke in 3 Spalten
+4. Footer: farbige Box mit Kernaussage + Tag (absolute, unten)
+
+UNTERSCHIEDE ZU HOCHFORMAT
+- 3 Spalten statt 2 (mehr horizontaler Platz)
+- 6 Blöcke statt 4-5
+- Stats integriert in Hero statt eigene Zeile
+- Kleinere Schriftgrößen (9.5pt Body statt 10pt)
+- Kompaktere Code-Blöcke (7pt statt 7.5pt)
+
+BLOCK-AUFBAU
+- Titel: 9.5pt bold uppercase, Icon links, Hauptfarbe-Unterstreichung 2pt
+- Inhalt: visuell, nicht reine Textbullets
+- Varianten: Icon-Liste, Code-Block, Kachel-Grid, Plus/Minus-Spalten, Type-Grid
+
+FARBEN (max 3 + Neutrals)
+- Hauptfarbe: an offizielle Farbe des Themas anlehnen
+- Hauptfarbe-Dunkel: für Headings
+- Hauptfarbe-Darker: für Footer
+- Akzentfarbe: kontrastierend
+- Hintergrund-Soft: helle Variante der Hauptfarbe
+- Code-Hintergrund: #1e2a3a
+- Text: #1a1a1a / muted #5a6470 / Linie #e5e5e5
+
+TYPOGRAFIE
+- Body: 9.5pt, line-height 1.4
+- Hero h1: 20pt bold
+- Block-Titel: 9.5pt bold uppercase, letter-spacing 0.5pt
+- Stats-Zahl: 14pt bold, Label 6.5pt uppercase
+- Code: 7pt monospace, dunkler Hintergrund
+- Feature-Text: 8.5pt
+- Max 3 Schriftgrößen pro Block
+
+ICONS
+- SVG inline, stroke statt fill
+- 4mm in Block-Titeln (kleiner als Hochformat wegen kompakter Layout)
+- 2.8mm in Kachel-Icons
+- currentColor für automatische Anpassung
+
+THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
+- Hauptfarbe: offizielle Farbe des Themas
+- Logo-Buchstabe(n) oder Kürzel
+- 4 Stats: themen-relevante Zahlen
+- Block-Auswahl: 6 wichtigste Aspekte für Erstübersicht
+
+VISUELLE ELEMENTE PFLICHT
+- Mindestens 1 Code-Block
+- Mindestens 1 Kachel-Grid mit Icons (Ökosystem)
+- Mindestens 1 Plus/Minus-Split (Modern vs Legacy o.ä.)
+- Footer als farbige Box (visueller Anker)
+- Stats-Bar im Hero
+
+VERMEIDEN
+- Reine Bullet-Listen in jedem Block
+- Mehr als 6 Hauptblöcke (Querformat hat eh schon mehr Platz)
+- Mehr als 3 Schriftgrößen
+- Marketing-Floskeln in Hero
+- Floats oder absolute positioning (außer für Footer)
+- Vertikal sehr lange Blöcke (würden Spalten unbalanciert machen)
+
+GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
+1. HTML schreiben
+2. weasyprint file.html file.pdf
+3. PDF zu PNG: python -c "from pdf2image import convert_from_path; convert_from_path('file.pdf', dpi=120)[0].save('preview.png')"
+4. Preview ansehen mit Read-Tool
+5. Prüfen:
+   - Stats-Bar überlappt nicht mit Titel?
+   - 3 Spalten balanciert (ähnliche Höhe)?
+   - Footer nicht abgeschnitten?
+   - Code-Block lesbar?
+   - Alle Icons rendern?
+6. Bei Problemen: fixen, ab Schritt 2 wiederholen
+7. Nach max 3 Iterationen ausgeben
+
+INSTALLATION
+- pip install weasyprint pdf2image
+- apt install poppler-utils
+```

templates/Referenz/Cheatsheet.md

@@ -0,0 +1,537 @@
+```
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<title>PHP Cheatsheet</title>
+<style>
+@page { size: A4 landscape; margin: 0; }
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --php: #777BB4;
+  --php-dark: #4F5B93;
+  --php-darker: #2C3E66;
+  --ink: #1a1a1a;
+  --muted: #5a6470;
+  --line: #d8dde3;
+  --bg-soft: #f5f5fb;
+  --code-bg: #1e2a3a;
+  --code-fg: #e6e6e6;
+  --plus: #2c8a3e;
+  --minus: #c0392b;
+}
+
+html, body {
+  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
+  color: var(--ink);
+  font-size: 8pt;
+  line-height: 1.35;
+}
+
+.page {
+  width: 297mm;
+  height: 210mm;
+  padding: 7mm 9mm 18mm 9mm;
+  position: relative;
+}
+
+/* ===== HERO ===== */
+.hero {
+  display: table;
+  width: 100%;
+  border-bottom: 2pt solid var(--ink);
+  padding-bottom: 2.5mm;
+  margin-bottom: 4mm;
+}
+.hero-logo, .hero-text, .hero-meta {
+  display: table-cell;
+  vertical-align: middle;
+}
+.hero-logo { width: 18mm; padding-right: 4mm; }
+.hero-logo-box {
+  width: 15mm; height: 15mm;
+  background: linear-gradient(135deg, var(--php) 0%, var(--php-dark) 100%);
+  border-radius: 4mm;
+  display: flex; align-items: center; justify-content: center;
+  color: white; font-size: 12pt; font-weight: 800;
+}
+.hero h1 { font-size: 18pt; font-weight: 800; letter-spacing: -0.5pt; line-height: 1; }
+.hero h1 .accent { color: var(--php); }
+.hero .sub { font-size: 9pt; color: var(--muted); margin-top: 1mm; }
+.hero-meta { width: 35mm; text-align: right; }
+.hero-meta .ver {
+  display: inline-block;
+  background: var(--ink); color: white;
+  padding: 1mm 3mm; border-radius: 1.5mm;
+  font-size: 9pt; font-weight: 700;
+}
+.hero-meta .tag {
+  display: block; margin-top: 1mm;
+  font-size: 7pt; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5pt;
+}
+
+/* ===== MAIN GRID: 4 columns ===== */
+.main {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 3mm;
+}
+.col { display: flex; flex-direction: column; gap: 3mm; }
+
+/* ===== BLOCK ===== */
+.block {
+  background: white;
+  border: 0.5pt solid var(--line);
+  border-radius: 2mm;
+  overflow: hidden;
+}
+.block-head {
+  background: var(--php);
+  color: white;
+  padding: 1.3mm 2.5mm;
+  font-size: 8pt;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5pt;
+  display: flex; align-items: center; gap: 2mm;
+}
+.block-head .ico { width: 3.5mm; height: 3.5mm; flex-shrink: 0; }
+.block-body { padding: 1.8mm 2.5mm; }
+
+/* ===== TABLES ===== */
+table { width: 100%; border-collapse: collapse; font-size: 7.5pt; }
+td { padding: 0.8mm 1mm; vertical-align: top; border-bottom: 0.3pt solid var(--bg-soft); }
+tr:last-child td { border-bottom: none; }
+td.k {
+  font-family: "SF Mono", Consolas, monospace;
+  font-size: 7pt;
+  color: var(--php-dark);
+  font-weight: 600;
+  white-space: nowrap;
+  width: 50%;
+}
+td.v { color: var(--ink); }
+
+/* ===== CODE ===== */
+.code {
+  background: var(--code-bg);
+  color: var(--code-fg);
+  font-family: "SF Mono", Consolas, monospace;
+  font-size: 6.5pt;
+  line-height: 1.4;
+  padding: 1.5mm 2mm;
+  white-space: pre;
+  overflow: hidden;
+}
+.c { color: #6b8aae; font-style: italic; }
+.k { color: #ff79c6; }
+.s { color: #f1c40f; }
+.f { color: #50fa7b; }
+.t { color: #8be9fd; }
+.v { color: #ffb86c; }
+
+/* ===== INLINE CODE ===== */
+code.inline {
+  font-family: "SF Mono", Consolas, monospace;
+  font-size: 7pt;
+  background: var(--bg-soft);
+  padding: 0.3mm 1mm;
+  border-radius: 0.8mm;
+  color: var(--php-dark);
+}
+
+/* ===== KACHEL-GRID ===== */
+.tiles {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.2mm;
+}
+.tile {
+  background: var(--bg-soft);
+  border-left: 1.5pt solid var(--php);
+  border-radius: 1mm;
+  padding: 1.2mm 1.8mm;
+  display: flex; align-items: flex-start; gap: 1.5mm;
+}
+.tile-ico {
+  width: 3.5mm; height: 3.5mm; flex-shrink: 0;
+  background: var(--php-dark);
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  margin-top: 0.2mm;
+}
+.tile-ico svg { width: 2mm; height: 2mm; }
+.tile-text { font-size: 7pt; line-height: 1.25; }
+.tile-text b { color: var(--php-dark); display: block; font-size: 7.5pt; }
+.tile-text span { color: var(--muted); font-size: 6.3pt; }
+
+/* ===== DIRECTIVES GRID ===== */
+.dirgrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1mm;
+}
+.dir {
+  background: var(--bg-soft);
+  padding: 0.8mm 1.3mm;
+  border-radius: 1mm;
+  font-size: 6.5pt;
+}
+.dir b { font-family: "SF Mono", Consolas, monospace; color: var(--php-dark); display: block; font-size: 7.3pt; }
+.dir span { color: var(--muted); font-size: 6pt; }
+
+/* ===== SPLIT ===== */
+.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm; }
+.split-col h4 {
+  font-size: 6.5pt; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.4pt; margin-bottom: 0.8mm;
+}
+.split-col.plus h4 { color: var(--plus); }
+.split-col.minus h4 { color: var(--minus); }
+.split-col ul { list-style: none; }
+.split-col li {
+  font-size: 7pt; padding-left: 2.5mm; position: relative;
+  margin-bottom: 0.5mm; line-height: 1.25;
+}
+.split-col.plus li::before { content: "+"; position: absolute; left: 0; color: var(--plus); font-weight: 800; }
+.split-col.minus li::before { content: "−"; position: absolute; left: 0; color: var(--minus); font-weight: 800; }
+
+/* ===== FOOTER ===== */
+.footer {
+  position: absolute;
+  left: 9mm;
+  right: 9mm;
+  bottom: 7mm;
+  background: var(--php-darker);
+  color: white;
+  border-radius: 2mm;
+  padding: 2.5mm 4mm;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr auto;
+  gap: 4mm;
+  align-items: center;
+  font-size: 7pt;
+}
+.foot-item { line-height: 1.3; }
+.foot-item b { color: #F1C40F; display: block; font-size: 6.5pt; text-transform: uppercase; letter-spacing: 0.5pt; margin-bottom: 0.5mm; }
+.foot-item code {
+  font-family: "SF Mono", Consolas, monospace;
+  font-size: 6.5pt;
+  background: rgba(255,255,255,0.15);
+  padding: 0.3mm 1mm;
+  border-radius: 0.8mm;
+}
+.foot-tag {
+  background: var(--php); color: white;
+  padding: 1.5mm 3mm; border-radius: 1.5mm;
+  font-weight: 800; font-size: 8pt;
+}
+</style>
+</head>
+<body>
+<div class="page">
+
+  <!-- HERO -->
+  <header class="hero">
+    <div class="hero-logo"><div class="hero-logo-box">php</div></div>
+    <div class="hero-text">
+      <h1><span class="accent">PHP</span> Cheatsheet</h1>
+      <div class="sub">Syntax, OOP, Type-System, Standard-Funktionen &amp; Ökosystem auf einen Blick</div>
+    </div>
+    <div class="hero-meta">
+      <span class="ver">8.4</span>
+      <span class="tag">Stand 2026</span>
+    </div>
+  </header>
+
+  <!-- MAIN -->
+  <main class="main">
+
+    <!-- SPALTE 1 -->
+    <div class="col">
+
+      <section class="block">
+        <div class="block-head">
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path d="M3 6h18M3 12h18M3 18h18"/>
+          </svg>
+          Variablen &amp; Typen
+        </div>
+        <div class="block-body">
+          <table>
+            <tr><td class="k">$x = 42</td><td class="v">int</td></tr>
+            <tr><td class="k">$x = 3.14</td><td class="v">float</td></tr>
+            <tr><td class="k">$x = "Hi"</td><td class="v">string</td></tr>
+            <tr><td class="k">$x = true</td><td class="v">bool</td></tr>
+            <tr><td class="k">$x = null</td><td class="v">null</td></tr>
+            <tr><td class="k">$x = [1,2,3]</td><td class="v">array</td></tr>
+            <tr><td class="k">$x = ['k'=&gt;1]</td><td class="v">assoc array</td></tr>
+            <tr><td class="k">gettype($x)</td><td class="v">Typ-Name</td></tr>
+            <tr><td class="k">is_int($x)</td><td class="v">Typ-Check</td></tr>
+            <tr><td class="k">(int)$x</td><td class="v">Cast</td></tr>
+          </table>
+        </div>
+      </section>
+
+      <section class="block">
+        <div class="block-head">
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <polygon points="13,2 3,14 12,14 11,22 21,10 12,10"/>
+          </svg>
+          String-Funktionen
+        </div>
+        <div class="block-body">
+          <table>
+            <tr><td class="k">strlen($s)</td><td class="v">Länge</td></tr>
+            <tr><td class="k">strtolower</td><td class="v">klein</td></tr>
+            <tr><td class="k">strtoupper</td><td class="v">groß</td></tr>
+            <tr><td class="k">trim($s)</td><td class="v">Whitespace weg</td></tr>
+            <tr><td class="k">explode(',', $s)</td><td class="v">→ array</td></tr>
+            <tr><td class="k">implode(',', $a)</td><td class="v">→ string</td></tr>
+            <tr><td class="k">str_replace</td><td class="v">a → b</td></tr>
+            <tr><td class="k">str_contains</td><td class="v">enthält?</td></tr>
+            <tr><td class="k">sprintf("%d", 1)</td><td class="v">format</td></tr>
+            <tr><td class="k">"$name"</td><td class="v">Interpolation</td></tr>
+          </table>
+        </div>
+      </section>
+
+    </div>
+
+    <!-- SPALTE 2 -->
+    <div class="col">
+
+      <section class="block">
+        <div class="block-head">
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <polyline points="16,18 22,12 16,6"/><polyline points="8,6 2,12 8,18"/>
+          </svg>
+          Moderne Klasse (PHP 8)
+        </div>
+        <div class="block-body">
+<div class="code"><span class="k">class</span> <span class="t">User</span> {
+  <span class="k">public function</span> <span class="f">__construct</span>(
+    <span class="k">public readonly</span> <span class="t">string</span> <span class="v">$name</span>,
+    <span class="k">public readonly</span> <span class="t">int</span> <span class="v">$age</span>,
+    <span class="k">private</span> ?<span class="t">string</span> <span class="v">$email</span> = <span class="k">null</span>,
+  ) {}
+
+  <span class="k">public function</span> <span class="f">isAdult</span>(): <span class="t">bool</span> {
+    <span class="k">return</span> <span class="v">$this</span>-&gt;age &gt;= <span class="s">18</span>;
+  }
+}
+
+<span class="v">$u</span> = <span class="k">new</span> <span class="t">User</span>(name: <span class="s">'Marek'</span>, age: <span class="s">34</span>);</div>
+        </div>
+      </section>
+
+      <section class="block">
+        <div class="block-head">
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/>
+          </svg>
+          Array-Funktionen
+        </div>
+        <div class="block-body">
+          <table>
+            <tr><td class="k">count($a)</td><td class="v">Anzahl</td></tr>
+            <tr><td class="k">array_map(fn, $a)</td><td class="v">transform</td></tr>
+            <tr><td class="k">array_filter</td><td class="v">filtern</td></tr>
+            <tr><td class="k">array_reduce</td><td class="v">aggregieren</td></tr>
+            <tr><td class="k">array_keys</td><td class="v">→ Keys</td></tr>
+            <tr><td class="k">array_values</td><td class="v">→ Values</td></tr>
+            <tr><td class="k">in_array($x, $a)</td><td class="v">enthält?</td></tr>
+            <tr><td class="k">array_merge</td><td class="v">a + b</td></tr>
+            <tr><td class="k">sort / usort</td><td class="v">sortieren</td></tr>
+            <tr><td class="k">array_unique</td><td class="v">dedupe</td></tr>
+          </table>
+        </div>
+      </section>
+
+    </div>
+
+    <!-- SPALTE 3 -->
+    <div class="col">
+
+      <section class="block">
+        <div class="block-head">
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path d="M7 17l10-10M17 17H7V7"/>
+          </svg>
+          Control Flow
+        </div>
+        <div class="block-body">
+<div class="code"><span class="k">if</span> (<span class="v">$x</span> &gt; <span class="s">0</span>) { ... }
+<span class="k">elseif</span> (<span class="v">$x</span> &lt; <span class="s">0</span>) { ... }
+<span class="k">else</span> { ... }
+
+<span class="k">match</span>(<span class="v">$status</span>) {
+  <span class="s">'ok'</span>, <span class="s">'good'</span> =&gt; <span class="s">'positiv'</span>,
+  <span class="s">'err'</span> =&gt; <span class="s">'negativ'</span>,
+  <span class="k">default</span> =&gt; <span class="s">'?'</span>,
+};
+
+<span class="k">foreach</span> (<span class="v">$items</span> <span class="k">as</span> <span class="v">$k</span> =&gt; <span class="v">$v</span>) { ... }
+<span class="k">for</span> (<span class="v">$i</span>=<span class="s">0</span>; <span class="v">$i</span>&lt;<span class="s">10</span>; <span class="v">$i</span>++) { ... }
+<span class="k">while</span> (<span class="v">$cond</span>) { ... }</div>
+        </div>
+      </section>
+
+      <section class="block">
+        <div class="block-head">
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
+          </svg>
+          Enums &amp; Match
+        </div>
+        <div class="block-body">
+<div class="code"><span class="k">enum</span> <span class="t">Status</span>: <span class="t">string</span> {
+  <span class="k">case</span> <span class="t">Draft</span> = <span class="s">'draft'</span>;
+  <span class="k">case</span> <span class="t">Published</span> = <span class="s">'published'</span>;
+  <span class="k">case</span> <span class="t">Archived</span> = <span class="s">'archived'</span>;
+
+  <span class="k">public function</span> <span class="f">label</span>(): <span class="t">string</span> {
+    <span class="k">return match</span>(<span class="v">$this</span>) {
+      <span class="t">self</span>::<span class="t">Draft</span> =&gt; <span class="s">'Entwurf'</span>,
+      <span class="t">self</span>::<span class="t">Published</span> =&gt; <span class="s">'Veröffentlicht'</span>,
+      <span class="t">self</span>::<span class="t">Archived</span> =&gt; <span class="s">'Archiv'</span>,
+    };
+  }
+}</div>
+        </div>
+      </section>
+
+      <section class="block">
+        <div class="block-head">
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12" y2="16"/>
+          </svg>
+          Fehler &amp; Try/Catch
+        </div>
+        <div class="block-body">
+<div class="code"><span class="k">try</span> {
+  <span class="v">$result</span> = <span class="f">risky</span>();
+} <span class="k">catch</span> (\<span class="t">ValueError</span> <span class="v">$e</span>) {
+  <span class="f">log</span>(<span class="v">$e</span>-&gt;getMessage());
+} <span class="k">catch</span> (\<span class="t">Exception</span> <span class="v">$e</span>) {
+  <span class="k">throw new</span> \<span class="t">AppError</span>(...);
+} <span class="k">finally</span> {
+  <span class="f">cleanup</span>();
+}</div>
+        </div>
+      </section>
+
+    </div>
+
+    <!-- SPALTE 4 -->
+    <div class="col">
+
+      <section class="block">
+        <div class="block-head">
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="9"/>
+          </svg>
+          Ökosystem
+        </div>
+        <div class="block-body">
+          <div class="tiles">
+            <div class="tile">
+              <div class="tile-ico"><svg viewBox="0 0 24 24" fill="white"><polygon points="12,2 22,22 2,22"/></svg></div>
+              <div class="tile-text"><b>Composer</b><span>Paket-Manager</span></div>
+            </div>
+            <div class="tile">
+              <div class="tile-ico"><svg viewBox="0 0 24 24" fill="white"><circle cx="12" cy="12" r="10"/></svg></div>
+              <div class="tile-text"><b>Laravel</b><span>Full-Stack</span></div>
+            </div>
+            <div class="tile">
+              <div class="tile-ico"><svg viewBox="0 0 24 24" fill="white"><rect x="4" y="4" width="16" height="16"/></svg></div>
+              <div class="tile-text"><b>Symfony</b><span>Enterprise</span></div>
+            </div>
+            <div class="tile">
+              <div class="tile-ico"><svg viewBox="0 0 24 24" fill="white"><polygon points="12,2 22,22 2,22"/></svg></div>
+              <div class="tile-text"><b>PHPUnit</b><span>Tests</span></div>
+            </div>
+            <div class="tile">
+              <div class="tile-ico"><svg viewBox="0 0 24 24" fill="white"><circle cx="12" cy="12" r="10"/></svg></div>
+              <div class="tile-text"><b>PHPStan</b><span>Static-Analyse</span></div>
+            </div>
+            <div class="tile">
+              <div class="tile-ico"><svg viewBox="0 0 24 24" fill="white"><rect x="4" y="4" width="16" height="16"/></svg></div>
+              <div class="tile-text"><b>Shopware</b><span>E-Commerce</span></div>
+            </div>
+            <div class="tile">
+              <div class="tile-ico"><svg viewBox="0 0 24 24" fill="white"><polygon points="12,2 22,22 2,22"/></svg></div>
+              <div class="tile-text"><b>WordPress</b><span>CMS</span></div>
+            </div>
+            <div class="tile">
+              <div class="tile-ico"><svg viewBox="0 0 24 24" fill="white"><circle cx="12" cy="12" r="10"/></svg></div>
+              <div class="tile-text"><b>Doctrine</b><span>ORM &amp; DBAL</span></div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="block">
+        <div class="block-head">
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
+          </svg>
+          Idiome vs. Anti-Patterns
+        </div>
+        <div class="block-body">
+          <div class="split">
+            <div class="split-col plus">
+              <h4>Idiomatisch</h4>
+              <ul>
+                <li>strict_types=1</li>
+                <li>Type-Hints überall</li>
+                <li>readonly Properties</li>
+                <li>Composer Autoload</li>
+                <li>PSR-12 Coding-Style</li>
+                <li>match statt switch</li>
+              </ul>
+            </div>
+            <div class="split-col minus">
+              <h4>Vermeiden</h4>
+              <ul>
+                <li>mysql_* Funktionen</li>
+                <li>extract() von User</li>
+                <li>eval() jeglicher Art</li>
+                <li>Globals ($GLOBALS)</li>
+                <li>@-Suppression</li>
+                <li>include statt require_once</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+    </div>
+  </main>
+
+  <!-- FOOTER -->
+  <footer class="footer">
+    <div class="foot-item">
+      <b>Projekt starten</b>
+      <code>composer init</code>
+    </div>
+    <div class="foot-item">
+      <b>Server starten</b>
+      <code>php -S localhost:8000</code>
+    </div>
+    <div class="foot-item">
+      <b>Tests</b>
+      <code>vendor/bin/phpunit</code>
+    </div>
+    <div class="foot-item">
+      <b>Static Analysis</b>
+      <code>vendor/bin/phpstan analyse</code>
+    </div>
+    <div class="foot-tag">php.net</div>
+  </footer>
+
+</div>
+</body>
+</html>
+```

templates/Referenz/MiniGuide.md

@@ -0,0 +1,383 @@
+```
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<title>PHP Mini-Guide</title>
+<style>
+@page {
+  size: A4;
+  margin: 18mm 18mm 16mm 18mm;
+  @bottom-center {
+    content: counter(page) " / " counter(pages);
+    font-family: -apple-system, "Segoe UI", sans-serif;
+    font-size: 8pt;
+    color: #888;
+  }
+  @bottom-right {
+    content: "PHP Mini-Guide";
+    font-family: -apple-system, "Segoe UI", sans-serif;
+    font-size: 8pt;
+    color: #888;
+  }
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --php: #777BB4;
+  --php-dark: #4F5B93;
+  --php-darker: #2C3E66;
+  --ink: #1a1a1a;
+  --muted: #5a6470;
+  --line: #d8dde3;
+  --bg-soft: #f5f5fb;
+  --code-bg: #1e2a3a;
+  --code-fg: #e6e6e6;
+  --plus: #2c8a3e;
+  --minus: #c0392b;
+}
+
+html, body {
+  font-family: Charter, "Source Serif Pro", Georgia, serif;
+  color: var(--ink);
+  font-size: 10.5pt;
+  line-height: 1.55;
+}
+
+/* ===== HEAD ===== */
+.head {
+  display: table;
+  width: 100%;
+  border-bottom: 2pt solid var(--ink);
+  padding-bottom: 4mm;
+  margin-bottom: 5mm;
+}
+.head-logo, .head-title, .head-meta {
+  display: table-cell;
+  vertical-align: middle;
+}
+.head-logo {
+  width: 20mm;
+  padding-right: 5mm;
+}
+.head-logo-box {
+  width: 16mm; height: 16mm;
+  background: linear-gradient(135deg, var(--php) 0%, var(--php-dark) 100%);
+  border-radius: 4mm;
+  display: flex; align-items: center; justify-content: center;
+  font-family: -apple-system, sans-serif;
+  font-size: 11pt; font-weight: 800;
+  color: white;
+}
+.head-title h1 {
+  font-family: -apple-system, sans-serif;
+  font-size: 20pt;
+  font-weight: 800;
+  color: var(--php-dark);
+  letter-spacing: -0.5pt;
+  line-height: 1.1;
+}
+.head-title h1 .accent { color: var(--php); }
+.head-title .subtitle {
+  font-family: -apple-system, sans-serif;
+  font-size: 10pt;
+  color: var(--muted);
+  margin-top: 1mm;
+}
+.head-meta {
+  width: 35mm;
+  text-align: right;
+  font-family: -apple-system, sans-serif;
+}
+.head-meta .badge {
+  display: inline-block;
+  background: var(--ink);
+  color: white;
+  padding: 1.2mm 3mm;
+  border-radius: 1.5mm;
+  font-size: 8.5pt;
+  font-weight: 700;
+}
+.head-meta .time {
+  display: block;
+  font-size: 7.5pt;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 1pt;
+  margin-top: 1mm;
+}
+
+/* ===== GAP-OPENER ===== */
+.gap {
+  background: var(--bg-soft);
+  border-left: 3pt solid var(--php);
+  padding: 3.5mm 5mm;
+  margin: 0 0 6mm 0;
+  font-style: italic;
+  font-size: 10.5pt;
+}
+.gap > b:first-child {
+  font-style: normal;
+  color: var(--php-dark);
+  font-family: -apple-system, sans-serif;
+  text-transform: uppercase;
+  font-size: 8pt;
+  letter-spacing: 1pt;
+  display: block;
+  margin-bottom: 1.5mm;
+}
+
+/* ===== SECTIONS ===== */
+h2 {
+  font-family: -apple-system, sans-serif;
+  font-size: 13pt;
+  font-weight: 700;
+  color: var(--php-dark);
+  margin: 6mm 0 2.5mm 0;
+  page-break-after: avoid;
+}
+h3 {
+  font-family: -apple-system, sans-serif;
+  font-size: 10.5pt;
+  font-weight: 700;
+  color: var(--ink);
+  margin: 4mm 0 1.5mm 0;
+  page-break-after: avoid;
+}
+p {
+  margin-bottom: 2.5mm;
+  text-align: justify;
+  hyphens: auto;
+}
+p b { color: var(--php-dark); }
+ul, ol { margin: 1.5mm 0 3mm 6mm; }
+li { margin-bottom: 1mm; }
+
+/* ===== CODE ===== */
+pre {
+  background: var(--code-bg);
+  color: var(--code-fg);
+  font-family: "SF Mono", Consolas, monospace;
+  font-size: 8.5pt;
+  line-height: 1.5;
+  padding: 3mm 4mm;
+  border-radius: 2mm;
+  margin: 2.5mm 0 3.5mm 0;
+  white-space: pre;
+  overflow: hidden;
+  page-break-inside: avoid;
+}
+.c { color: #6b8aae; font-style: italic; }
+.k { color: #ff79c6; }
+.s { color: #f1c40f; }
+.f { color: #50fa7b; }
+.t { color: #8be9fd; }
+.v { color: #ffb86c; }
+
+code.inline {
+  font-family: "SF Mono", Consolas, monospace;
+  font-size: 9pt;
+  background: var(--bg-soft);
+  padding: 0.3mm 1.5mm;
+  border-radius: 1mm;
+  color: var(--php-dark);
+}
+
+/* ===== CALLOUT ===== */
+.callout {
+  border-radius: 2mm;
+  padding: 2.5mm 4mm;
+  margin: 3mm 0;
+  font-size: 10pt;
+  page-break-inside: avoid;
+  display: grid;
+  grid-template-columns: 6mm 1fr;
+  gap: 3mm;
+}
+.callout-icon {
+  font-family: -apple-system, sans-serif;
+  font-weight: 800;
+  font-size: 14pt;
+  line-height: 1;
+  text-align: center;
+}
+.callout-body > b:first-child {
+  font-family: -apple-system, sans-serif;
+  text-transform: uppercase;
+  font-size: 8pt;
+  letter-spacing: 1pt;
+  display: block;
+  margin-bottom: 1mm;
+}
+.callout.tip { background: #e8f4ea; border-left: 3pt solid var(--plus); }
+.callout.tip .callout-icon, .callout.tip .callout-body > b:first-child { color: var(--plus); }
+.callout.warn { background: #fdecea; border-left: 3pt solid var(--minus); }
+.callout.warn .callout-icon, .callout.warn .callout-body > b:first-child { color: var(--minus); }
+.callout.note { background: var(--bg-soft); border-left: 3pt solid var(--php); }
+.callout.note .callout-icon, .callout.note .callout-body > b:first-child { color: var(--php-dark); }
+</style>
+</head>
+<body>
+
+<!-- ===== HEAD ===== -->
+<header class="head">
+  <div class="head-logo"><div class="head-logo-box">php</div></div>
+  <div class="head-title">
+    <h1><span class="accent">PHP</span> in 15 Minuten</h1>
+    <div class="subtitle">Dein erstes PHP-Programm – Schritt für Schritt</div>
+  </div>
+  <div class="head-meta">
+    <span class="badge">Mini-Guide</span>
+    <span class="time">15 Min · von Null</span>
+  </div>
+</header>
+
+<!-- ===== GAP-OPENER ===== -->
+<div class="gap">
+  <b>Frage zum Einstieg</b>
+  PHP läuft hinter rund drei Viertel aller Webseiten – inklusive WordPress, Wikipedia und Facebook. Aber wie sieht PHP-Code überhaupt aus, und wie startet man? In 15 Minuten kannst du dein erstes Programm schreiben.
+</div>
+
+<!-- ===== SEKTION 1 ===== -->
+<h2>PHP starten</h2>
+
+<p>PHP ist eine Programmiersprache, die auf deinem Computer oder einem Webserver läuft. Im Gegensatz zu HTML oder CSS wird PHP nicht im Browser angezeigt – es <i>erzeugt</i> Ausgaben (zum Beispiel HTML), die dann ausgeliefert werden.</p>
+
+<p>Um anzufangen, brauchst du PHP auf deinem Computer. Auf Mac: <code class="inline">brew install php</code>. Auf Ubuntu: <code class="inline">apt install php8.4-cli</code>. Auf Windows: am einfachsten WSL2 mit Ubuntu darin nutzen.</p>
+
+<p>PHP-Code lebt in Dateien mit der Endung <code class="inline">.php</code>. Lege eine Datei <code class="inline">hallo.php</code> an mit diesem Inhalt:</p>
+
+<pre><span class="t">&lt;?php</span>
+
+<span class="k">echo</span> <span class="s">"Hallo Welt!"</span>;</pre>
+
+<p>Die erste Zeile <code class="inline">&lt;?php</code> sagt PHP: "ab hier kommt mein Code". Das Wort <code class="inline">echo</code> heißt: "gib das aus, was danach kommt". Strings (also Text) stehen in Anführungszeichen. Jede Anweisung endet mit einem Semikolon.</p>
+
+<p>Im Terminal ausführen mit:</p>
+
+<pre>php hallo.php</pre>
+
+<p>Du siehst "Hallo Welt!" – dein erstes PHP-Programm läuft.</p>
+
+<!-- ===== SEKTION 2 ===== -->
+<h2>Variablen</h2>
+
+<p>Eine <b>Variable</b> ist ein benannter Platz, an dem du einen Wert speicherst. In PHP beginnen Variablen immer mit einem Dollar-Zeichen <code class="inline">$</code>. Das macht sie im Code sofort erkennbar:</p>
+
+<pre><span class="t">&lt;?php</span>
+
+<span class="v">$name</span> = <span class="s">"Marek"</span>;
+<span class="v">$alter</span> = <span class="s">34</span>;
+<span class="v">$istAktiv</span> = <span class="k">true</span>;
+
+<span class="k">echo</span> <span class="v">$name</span>;</pre>
+
+<p>Variablen können verschiedene Arten von Werten enthalten. Die drei wichtigsten:</p>
+
+<ul>
+  <li><b>Strings</b> – Text in Anführungszeichen, z.B. <code class="inline">"Hallo"</code></li>
+  <li><b>Zahlen</b> – ganze Zahlen (<code class="inline">42</code>) oder Kommazahlen (<code class="inline">3.14</code>)</li>
+  <li><b>Wahrheitswerte</b> – <code class="inline">true</code> (wahr) oder <code class="inline">false</code> (falsch)</li>
+</ul>
+
+<p>Mit dem Punkt verbindest du Strings:</p>
+
+<pre><span class="v">$gruss</span> = <span class="s">"Hallo, "</span> . <span class="v">$name</span> . <span class="s">"!"</span>;
+<span class="k">echo</span> <span class="v">$gruss</span>;             <span class="c">// Hallo, Marek!</span></pre>
+
+<!-- ===== SEKTION 3 ===== -->
+<h2>Bedingungen</h2>
+
+<p>Programme müssen oft entscheiden: "wenn X zutrifft, mach Y, sonst Z". Dafür gibt es <code class="inline">if</code> und <code class="inline">else</code>:</p>
+
+<pre><span class="v">$alter</span> = <span class="s">17</span>;
+
+<span class="k">if</span> (<span class="v">$alter</span> &gt;= <span class="s">18</span>) {
+  <span class="k">echo</span> <span class="s">"Du bist erwachsen."</span>;
+} <span class="k">else</span> {
+  <span class="k">echo</span> <span class="s">"Du bist noch minderjährig."</span>;
+}</pre>
+
+<p>Die Klammer hinter <code class="inline">if</code> enthält die Bedingung. Die geschweiften Klammern <code class="inline">{ }</code> umschließen den Code, der ausgeführt wird, wenn die Bedingung wahr ist. <code class="inline">else</code> ist der Block, wenn sie falsch ist.</p>
+
+<p>Wichtige Vergleichs-Operatoren:</p>
+
+<ul>
+  <li><code class="inline">==</code> gleich</li>
+  <li><code class="inline">!=</code> ungleich</li>
+  <li><code class="inline">&lt;</code>, <code class="inline">&gt;</code> kleiner, größer</li>
+  <li><code class="inline">&lt;=</code>, <code class="inline">&gt;=</code> kleiner-gleich, größer-gleich</li>
+</ul>
+
+<div class="callout note">
+  <div class="callout-icon">i</div>
+  <div class="callout-body">
+    <b>Ein Gleichheitszeichen reicht nicht</b>
+    Zum Zuweisen nutzt du <code class="inline">=</code> (ein Gleichheitszeichen). Zum Vergleichen brauchst du <code class="inline">==</code> (zwei). Das ist eine häufige Verwechslung bei Anfängern.
+  </div>
+</div>
+
+<!-- ===== SEKTION 4 ===== -->
+<h2>Listen und Schleifen</h2>
+
+<p>Mehrere Werte fasst du in einer <b>Liste</b> zusammen. In PHP heißen Listen <code class="inline">array</code>:</p>
+
+<pre><span class="v">$obst</span> = [<span class="s">"Apfel"</span>, <span class="s">"Birne"</span>, <span class="s">"Kirsche"</span>];</pre>
+
+<p>Über jede Liste kannst du mit <code class="inline">foreach</code> Schritt für Schritt gehen:</p>
+
+<pre><span class="k">foreach</span> (<span class="v">$obst</span> <span class="k">as</span> <span class="v">$frucht</span>) {
+  <span class="k">echo</span> <span class="v">$frucht</span> . <span class="s">"\n"</span>;
+}</pre>
+
+<p>Das gibt "Apfel", "Birne", "Kirsche" untereinander aus. Das <code class="inline">\n</code> ist ein Zeilenumbruch. Die Variable <code class="inline">$frucht</code> bekommt bei jedem Durchlauf den nächsten Wert aus der Liste.</p>
+
+<p>Listen müssen nicht aus Strings bestehen. Zahlen gehen genauso:</p>
+
+<pre><span class="v">$zahlen</span> = [<span class="s">10</span>, <span class="s">20</span>, <span class="s">30</span>];
+<span class="v">$summe</span> = <span class="s">0</span>;
+
+<span class="k">foreach</span> (<span class="v">$zahlen</span> <span class="k">as</span> <span class="v">$zahl</span>) {
+  <span class="v">$summe</span> = <span class="v">$summe</span> + <span class="v">$zahl</span>;
+}
+
+<span class="k">echo</span> <span class="v">$summe</span>;                  <span class="c">// 60</span></pre>
+
+<!-- ===== SEKTION 5 ===== -->
+<h2>Funktionen</h2>
+
+<p>Wenn du denselben Code mehrfach brauchst, packst du ihn in eine <b>Funktion</b>. Du gibst der Funktion einen Namen und kannst sie dann beliebig oft aufrufen:</p>
+
+<pre><span class="k">function</span> <span class="f">begruessen</span>(<span class="v">$name</span>) {
+  <span class="k">echo</span> <span class="s">"Hallo, "</span> . <span class="v">$name</span> . <span class="s">"!\n"</span>;
+}
+
+<span class="f">begruessen</span>(<span class="s">"Marek"</span>);
+<span class="f">begruessen</span>(<span class="s">"Anna"</span>);
+<span class="f">begruessen</span>(<span class="s">"Tom"</span>);</pre>
+
+<p>Die Funktion <code class="inline">begruessen</code> nimmt einen <b>Parameter</b> entgegen (<code class="inline">$name</code>). Beim Aufruf übergibst du den konkreten Wert in den Klammern.</p>
+
+<p>Funktionen können auch Werte <b>zurückgeben</b>. Dafür gibt es <code class="inline">return</code>:</p>
+
+<pre><span class="k">function</span> <span class="f">addiere</span>(<span class="v">$a</span>, <span class="v">$b</span>) {
+  <span class="k">return</span> <span class="v">$a</span> + <span class="v">$b</span>;
+}
+
+<span class="v">$ergebnis</span> = <span class="f">addiere</span>(<span class="s">3</span>, <span class="s">5</span>);
+<span class="k">echo</span> <span class="v">$ergebnis</span>;                <span class="c">// 8</span></pre>
+
+<p>Die Funktion macht ihre Berechnung und liefert das Ergebnis zurück. Du fängst es in einer Variable auf und kannst damit weiterarbeiten.</p>
+
+<div class="callout tip">
+  <div class="callout-icon">✓</div>
+  <div class="callout-body">
+    <b>Übung macht den Meister</b>
+    Schreibe jetzt selbst ein kleines PHP-Programm. Zum Beispiel: eine Liste deiner Lieblings-Filme, die mit <code class="inline">foreach</code> ausgegeben werden. Oder eine Funktion, die das Doppelte einer Zahl zurückgibt. Praktisch ausprobieren ist der schnellste Weg, PHP zu lernen.
+  </div>
+</div>
+
+</body>
+</html>
+```

templates/Referenz/OnePager.md

@@ -0,0 +1,526 @@
+```
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<title>PHP OnePager</title>
+<style>
+@page { size: A4 landscape; margin: 0; }
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --php: #777BB4;
+  --php-dark: #4F5B93;
+  --php-darker: #2C3E66;
+  --accent: #F1C40F;
+  --ink: #1a1a1a;
+  --muted: #5a6470;
+  --line: #e5e5e5;
+  --bg-soft: #f5f5fb;
+}
+
+html, body {
+  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
+  color: var(--ink);
+  font-size: 9.5pt;
+  line-height: 1.4;
+}
+
+.page {
+  width: 297mm;
+  height: 210mm;
+  padding: 9mm 11mm 9mm 11mm;
+  position: relative;
+}
+
+/* ===== HERO ===== */
+.hero {
+  display: table;
+  width: 100%;
+  margin-bottom: 4mm;
+}
+.hero-logo, .hero-text, .hero-stats {
+  display: table-cell;
+  vertical-align: middle;
+}
+.hero-logo { width: 28mm; padding-right: 5mm; }
+.hero-logo-box {
+  width: 22mm; height: 22mm;
+  background: linear-gradient(135deg, var(--php) 0%, var(--php-dark) 100%);
+  border-radius: 5mm;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 18pt; font-weight: 800;
+  color: white;
+  letter-spacing: -1pt;
+}
+.hero h1 {
+  font-size: 20pt;
+  font-weight: 800;
+  letter-spacing: -0.5pt;
+  line-height: 1.1;
+}
+.hero h1 .accent { color: var(--php); }
+.hero p {
+  font-size: 9.5pt;
+  color: var(--muted);
+  margin-top: 1mm;
+}
+.hero-stats {
+  width: 110mm;
+  text-align: right;
+}
+.stats-row {
+  display: inline-table;
+  border-collapse: collapse;
+}
+.stat-cell {
+  display: table-cell;
+  padding: 0 5mm;
+  text-align: center;
+  border-right: 0.5pt solid var(--line);
+  vertical-align: middle;
+}
+.stat-cell:last-child { border-right: none; padding-right: 0; }
+.stat-cell:first-child { padding-left: 0; }
+.stat-num {
+  font-size: 14pt;
+  font-weight: 800;
+  color: var(--php);
+  line-height: 1;
+}
+.stat-label {
+  font-size: 6.5pt;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5pt;
+  margin-top: 1mm;
+}
+
+/* ===== Divider ===== */
+.divider {
+  height: 1.5pt;
+  background: var(--ink);
+  margin-bottom: 4mm;
+}
+
+/* ===== GRID 3-Spalten ===== */
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 4mm;
+  margin-bottom: 4mm;
+}
+.col { display: flex; flex-direction: column; gap: 4mm; }
+
+.block { display: flex; flex-direction: column; gap: 1.5mm; }
+.block h2 {
+  font-size: 9.5pt;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5pt;
+  color: var(--php);
+  display: flex;
+  align-items: center;
+  gap: 2mm;
+  border-bottom: 2pt solid var(--php);
+  padding-bottom: 1.2mm;
+}
+.block h2 .ico { width: 4mm; height: 4mm; flex-shrink: 0; }
+
+/* ===== FEATURE LIST ===== */
+.feature-list { display: flex; flex-direction: column; gap: 1.5mm; }
+.feature-row {
+  display: grid;
+  grid-template-columns: 4.5mm 1fr;
+  gap: 1.8mm;
+  align-items: start;
+}
+.feature-row .dot {
+  width: 4mm; height: 4mm; margin-top: 0.2mm;
+  background: var(--php);
+  border-radius: 1mm;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 6pt; font-weight: 800; color: white;
+}
+.feature-row .text { font-size: 8.5pt; line-height: 1.35; }
+.feature-row .text b { color: var(--php-dark); }
+.feature-row code {
+  font-family: "SF Mono", Consolas, monospace;
+  font-size: 7.5pt;
+  background: var(--bg-soft);
+  padding: 0 1mm;
+  border-radius: 1mm;
+  color: var(--php-dark);
+}
+
+/* ===== CODE ===== */
+.code {
+  background: #1e2a3a;
+  color: #e6e6e6;
+  font-family: "SF Mono", Consolas, monospace;
+  font-size: 7pt;
+  padding: 2.5mm 3mm;
+  border-radius: 1.5mm;
+  line-height: 1.5;
+}
+.code .c { color: #6b8aae; font-style: italic; }
+.code .k { color: #ff79c6; }
+.code .s { color: #f1c40f; }
+.code .f { color: #50fa7b; }
+.code .t { color: #8be9fd; }
+.code .v { color: #ffb86c; }
+
+/* ===== ECOSYSTEM ===== */
+.eco-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5mm;
+}
+.eco-item {
+  background: var(--bg-soft);
+  border-left: 1.5pt solid var(--php);
+  border-radius: 1mm;
+  padding: 1.5mm 2mm;
+  display: flex; align-items: center; gap: 2mm;
+}
+.eco-ico {
+  width: 5mm; height: 5mm; flex-shrink: 0;
+  background: var(--php-dark);
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+}
+.eco-text { display: flex; flex-direction: column; gap: 0.2mm; }
+.eco-name { font-weight: 700; font-size: 8pt; color: var(--php-dark); }
+.eco-desc { font-size: 6.5pt; color: var(--muted); }
+
+/* ===== TYPE TABLE ===== */
+.types {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5mm;
+}
+.type {
+  background: var(--bg-soft);
+  padding: 1.3mm 2mm;
+  border-radius: 1mm;
+  font-size: 7.5pt;
+}
+.type b {
+  font-family: "SF Mono", Consolas, monospace;
+  color: var(--php-dark);
+  display: block;
+  font-size: 8pt;
+}
+.type span { color: var(--muted); font-size: 6.8pt; }
+
+/* ===== SPLIT (composer/comparison) ===== */
+.split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2mm;
+}
+.split-col h4 {
+  font-size: 7.5pt;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.4pt;
+  margin-bottom: 1mm;
+}
+.split-col.modern h4 { color: var(--php); }
+.split-col.legacy h4 { color: var(--muted); }
+.split-col ul { list-style: none; }
+.split-col li {
+  font-size: 7.5pt;
+  padding-left: 3mm;
+  position: relative;
+  margin-bottom: 0.8mm;
+  line-height: 1.3;
+}
+.split-col.modern li::before {
+  content: "+";
+  position: absolute;
+  left: 0;
+  color: var(--php);
+  font-weight: 800;
+}
+.split-col.legacy li::before {
+  content: "·";
+  position: absolute;
+  left: 0;
+  color: var(--muted);
+  font-weight: 800;
+}
+
+/* ===== FOOTER ===== */
+.footer {
+  position: absolute;
+  left: 11mm;
+  right: 11mm;
+  bottom: 9mm;
+  background: var(--php-darker);
+  color: white;
+  padding: 3mm 5mm;
+  border-radius: 1.5mm;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 4mm;
+  align-items: center;
+}
+.footer-text { font-size: 8.5pt; line-height: 1.45; }
+.footer-text b { color: var(--accent); }
+.footer-tag {
+  background: var(--php);
+  color: white;
+  padding: 1.5mm 3mm;
+  border-radius: 1.5mm;
+  font-weight: 800;
+  font-size: 8.5pt;
+  white-space: nowrap;
+}
+</style>
+</head>
+<body>
+<div class="page">
+
+  <!-- HERO -->
+  <header class="hero">
+    <div class="hero-logo"><div class="hero-logo-box">php</div></div>
+    <div class="hero-text">
+      <h1><span class="accent">PHP</span> – Server-Sprache des Web</h1>
+      <p>Dynamische Webseiten · seit 1995 · 75% aller Websites · objektorientiert &amp; funktional</p>
+    </div>
+    <div class="hero-stats">
+      <div class="stats-row">
+        <div class="stat-cell">
+          <div class="stat-num">8.4</div>
+          <div class="stat-label">Aktuelle Version</div>
+        </div>
+        <div class="stat-cell">
+          <div class="stat-num">1995</div>
+          <div class="stat-label">Erstes Release</div>
+        </div>
+        <div class="stat-cell">
+          <div class="stat-num">75%</div>
+          <div class="stat-label">Aller Websites</div>
+        </div>
+        <div class="stat-cell">
+          <div class="stat-num">300k+</div>
+          <div class="stat-label">Composer-Pakete</div>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <div class="divider"></div>
+
+  <!-- MAIN GRID -->
+  <main class="grid">
+
+    <!-- ===== SPALTE 1 ===== -->
+    <div class="col">
+
+      <section class="block">
+        <h2>
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <polygon points="12,2 22,8 22,16 12,22 2,16 2,8"/>
+          </svg>
+          Kernkonzepte
+        </h2>
+        <div class="feature-list">
+          <div class="feature-row">
+            <div class="dot">1</div>
+            <div class="text"><b>Server-seitig</b> – läuft auf Webservern, generiert HTML pro Request</div>
+          </div>
+          <div class="feature-row">
+            <div class="dot">2</div>
+            <div class="text"><b>Dynamisch typisiert</b> – Typen zur Laufzeit, optional mit Type-Hints prüfbar</div>
+          </div>
+          <div class="feature-row">
+            <div class="dot">3</div>
+            <div class="text"><b>OOP &amp; funktional</b> – Klassen, Interfaces, Traits, Enums, First-Class-Funktionen</div>
+          </div>
+          <div class="feature-row">
+            <div class="dot">4</div>
+            <div class="text"><b>Composer</b> – moderner Paket-Manager für Dependencies und Autoloading</div>
+          </div>
+        </div>
+      </section>
+
+      <section class="block">
+        <h2>
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path d="M3 6h18M3 12h18M3 18h18"/>
+          </svg>
+          Datentypen
+        </h2>
+        <div class="types">
+          <div class="type"><b>int</b><span>Ganze Zahlen</span></div>
+          <div class="type"><b>float</b><span>Kommazahlen</span></div>
+          <div class="type"><b>string</b><span>Text in '' oder ""</span></div>
+          <div class="type"><b>bool</b><span>true / false</span></div>
+          <div class="type"><b>array</b><span>Liste oder Map</span></div>
+          <div class="type"><b>object</b><span>Klassen-Instanz</span></div>
+          <div class="type"><b>null</b><span>kein Wert</span></div>
+          <div class="type"><b>callable</b><span>Funktion / Closure</span></div>
+        </div>
+      </section>
+
+    </div>
+
+    <!-- ===== SPALTE 2 ===== -->
+    <div class="col">
+
+      <section class="block">
+        <h2>
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <polyline points="16,18 22,12 16,6"/><polyline points="8,6 2,12 8,18"/>
+          </svg>
+          Hello World
+        </h2>
+        <div class="code"><span class="t">&lt;?php</span><br>
+<span class="k">declare</span>(strict_types=<span class="s">1</span>);<br>
+<br>
+<span class="k">function</span> <span class="f">greet</span>(<span class="t">string</span> <span class="v">$name</span>): <span class="t">string</span> {<br>
+&nbsp;&nbsp;<span class="k">return</span> <span class="s">"Hallo, </span><span class="v">$name</span><span class="s">!"</span>;<br>
+}<br>
+<br>
+<span class="k">echo</span> <span class="f">greet</span>(<span class="s">'Marek'</span>);<br>
+<span class="c">// Hallo, Marek!</span></div>
+      </section>
+
+      <section class="block">
+        <h2>
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
+          </svg>
+          Moderne vs. Legacy
+        </h2>
+        <div class="split">
+          <div class="split-col modern">
+            <h4>Modern (8.x)</h4>
+            <ul>
+              <li>strict_types</li>
+              <li>Readonly Properties</li>
+              <li>Enums &amp; Match</li>
+              <li>Named Arguments</li>
+              <li>Promoted Constructor</li>
+              <li>Composer + PSR</li>
+            </ul>
+          </div>
+          <div class="split-col legacy">
+            <h4>Legacy (5.x)</h4>
+            <ul>
+              <li>magic_quotes</li>
+              <li>register_globals</li>
+              <li>mysql_* Funktionen</li>
+              <li>kein Typ-System</li>
+              <li>include/require Chaos</li>
+              <li>Spaghetti-Code</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+    </div>
+
+    <!-- ===== SPALTE 3 ===== -->
+    <div class="col">
+
+      <section class="block">
+        <h2>
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="9"/>
+            <line x1="12" y1="3" x2="12" y2="9"/><line x1="12" y1="15" x2="12" y2="21"/>
+            <line x1="3" y1="12" x2="9" y2="12"/><line x1="15" y1="12" x2="21" y2="12"/>
+          </svg>
+          Ökosystem
+        </h2>
+        <div class="eco-grid">
+          <div class="eco-item">
+            <div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
+            <div class="eco-text">
+              <span class="eco-name">Laravel</span>
+              <span class="eco-desc">Full-Stack Framework</span>
+            </div>
+          </div>
+          <div class="eco-item">
+            <div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
+            <div class="eco-text">
+              <span class="eco-name">Symfony</span>
+              <span class="eco-desc">Enterprise-Framework</span>
+            </div>
+          </div>
+          <div class="eco-item">
+            <div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
+            <div class="eco-text">
+              <span class="eco-name">Composer</span>
+              <span class="eco-desc">Paket-Manager</span>
+            </div>
+          </div>
+          <div class="eco-item">
+            <div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
+            <div class="eco-text">
+              <span class="eco-name">PHPUnit</span>
+              <span class="eco-desc">Testing-Framework</span>
+            </div>
+          </div>
+          <div class="eco-item">
+            <div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
+            <div class="eco-text">
+              <span class="eco-name">PHPStan</span>
+              <span class="eco-desc">Static Analysis</span>
+            </div>
+          </div>
+          <div class="eco-item">
+            <div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
+            <div class="eco-text">
+              <span class="eco-name">Shopware</span>
+              <span class="eco-desc">E-Commerce-Plattform</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="block">
+        <h2>
+          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+          </svg>
+          Einsatzgebiete
+        </h2>
+        <div class="feature-list">
+          <div class="feature-row">
+            <div class="dot">W</div>
+            <div class="text"><b>Web-Backends</b> – REST/GraphQL APIs, MVC-Apps mit Laravel oder Symfony</div>
+          </div>
+          <div class="feature-row">
+            <div class="dot">C</div>
+            <div class="text"><b>CMS</b> – WordPress, Drupal, TYPO3 für Content-Management</div>
+          </div>
+          <div class="feature-row">
+            <div class="dot">E</div>
+            <div class="text"><b>E-Commerce</b> – Shopware, Magento, WooCommerce</div>
+          </div>
+          <div class="feature-row">
+            <div class="dot">$</div>
+            <div class="text"><b>CLI-Tools</b> – Symfony Console, Laravel Artisan für Automation</div>
+          </div>
+        </div>
+      </section>
+
+    </div>
+
+  </main>
+
+  <!-- FOOTER -->
+  <footer class="footer">
+    <div class="footer-text">
+      <b>Wann PHP wählen?</b> Wenn du schnell ein Web-Backend brauchst, ein riesiges Ökosystem nutzen willst und eine reife Sprache mit großem Talent-Pool suchst. Moderne PHP 8 ist nicht das PHP von 2005.
+    </div>
+    <div class="footer-tag">php.net</div>
+  </footer>
+
+</div>
+</body>
+</html>
+```