```
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
```
DARKMODE (PFLICHT)
- Alle Farben ausschließlich über :root-Variablen definieren
(--ink, --muted, --line, --bg-soft, Akzent-Variablen).
- Zusätzlich einen Dunkelmodus-Block ausliefern:
@media screen {
html[data-theme="dark"] { ...dunkle Variablenwerte... }
html[data-theme="dark"] body { background: #15171c; }
}
- Die App aktiviert ihn über data-theme="dark" auf .
KEIN prefers-color-scheme verwenden.
- Dunkle Werte: Hintergründe dunkel (#15171c / #23262e), Text hell (#e6e8ee),
Linien gedämpft (#2c3038). Akzentfarben so anheben, dass Überschriften und
Links auf dunklem Grund lesbar bleiben (Kontrast prüfen). Elemente mit hellem
Text auf Akzent-Hintergrund (z. B. Tabellenköpfe) dürfen ihre helle
Hintergrundfarbe behalten.
- Callout-/Infobox-Hintergründe nicht hartkodieren oder im Dunkelmodus
explizit abdunkeln (z. B. auf var(--bg-soft)); farbige Border bleibt.
- Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.