update

templates/Format/OnePager.md

@@ -1,115 +1,115 @@
 ```
-ONEPAGER-STIL QUERFORMAT (HTML/CSS → PDF via WeasyPrint)
+ONEPAGER STYLE LANDSCAPE (HTML/CSS → PDF via WeasyPrint)
 
 FORMAT
-- A4 Querformat (297mm × 210mm)
+- A4 landscape (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)
+- Grid: hero+stats (auto) / divider / main (1fr, 3 columns) / footer (absolute)
+- Stats bar integrated into the hero (right), saves vertical space
+- Main: 3 equal-width columns, gap 4mm
+- Columns internally: flex-column, gap 4mm
+- 6 thematic blocks distributed (2 per column)
 
-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)
+STRUCTURE (in this order)
+1. Hero: logo left (22mm), title + subtitle center, 4 stats right
+2. Divider: 1.5pt black line
+3. Main grid: 6 blocks in 3 columns
+4. Footer: colored box with key message + tag (absolute, bottom)
 
-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)
+DIFFERENCES FROM PORTRAIT
+- 3 columns instead of 2 (more horizontal space)
+- 6 blocks instead of 4-5
+- Stats integrated into the hero instead of their own row
+- Smaller font sizes (9.5pt body instead of 10pt)
+- More compact code blocks (7pt instead of 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
+BLOCK STRUCTURE
+- Title: 9.5pt bold uppercase, icon left, accent-color underline 2pt
+- Content: visual, not plain text bullets
+- Variants: icon list, code block, tile grid, plus/minus columns, 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
+COLORS (max 3 + neutrals)
+- Accent color: lean on the topic's official color
+- Accent dark: for headings
+- Accent darker: for the footer
+- Accent color: contrasting
+- Background soft: light variant of the accent color
+- Code background: #1e2a3a
+- Text: #1a1a1a / muted #5a6470 / line #e5e5e5
 
-TYPOGRAFIE
+TYPOGRAPHY
 - 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
+- Block title: 9.5pt bold uppercase, letter-spacing 0.5pt
+- Stats number: 14pt bold, label 6.5pt uppercase
+- Code: 7pt monospace, dark background
+- Feature text: 8.5pt
+- Max 3 font sizes per 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
+- SVG inline, stroke instead of fill
+- 4mm in block titles (smaller than portrait due to compact layout)
+- 2.8mm in tile icons
+- currentColor for automatic adaptation
 
-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
+TOPIC-SPECIFIC ADJUSTMENTS (choose before generating)
+- Accent color: the topic's official color
+- Logo letter(s) or abbreviation
+- 4 stats: topic-relevant numbers
+- Block selection: the 6 most important aspects for a first overview
 
-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
+REQUIRED VISUAL ELEMENTS
+- At least 1 code block
+- At least 1 tile grid with icons (ecosystem)
+- At least 1 plus/minus split (modern vs legacy etc.)
+- Footer as a colored box (visual anchor)
+- Stats bar in the 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)
+AVOID
+- Plain bullet lists in every block
+- More than 6 main blocks (landscape already has more space)
+- More than 3 font sizes
+- Marketing filler in the hero
+- Floats or absolute positioning (except for the footer)
+- Vertically very long blocks (would unbalance the columns)
 
-GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
-1. HTML schreiben
+GENERATION WITH FEEDBACK LOOP (max 3 iterations)
+1. Write the HTML
 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
+3. PDF to PNG: python -c "from pdf2image import convert_from_path; convert_from_path('file.pdf', dpi=120)[0].save('preview.png')"
+4. View the preview with the Read tool
+5. Check:
+   - Stats bar does not overlap the title?
+   - 3 columns balanced (similar height)?
+   - Footer not cut off?
+   - Code block readable?
+   - All icons render?
+6. On problems: fix, repeat from step 2
+7. Output after max 3 iterations
 
 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:
+DARK MODE (REQUIRED)
+- Define all colors exclusively via :root variables
+  (--ink, --muted, --line, --bg-soft, accent variables).
+- Additionally ship a dark-mode block:
   @media screen {
-    html[data-theme="dark"] { ...dunkle Variablenwerte... }
+    html[data-theme="dark"] { ...dark variable values... }
     html[data-theme="dark"] body { background: #15171c; }
   }
-- Die App aktiviert ihn über data-theme="dark" auf <html>.
-  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.
+- The app enables it via data-theme="dark" on <html>.
+  Do NOT use prefers-color-scheme.
+- Dark values: dark backgrounds (#15171c / #23262e), light text (#e6e8ee),
+  muted lines (#2c3038). Lift accent colors so headings and links stay
+  readable on a dark background (check contrast). Elements with light text on
+  accent backgrounds (e.g. table headers) may keep their light background
+  color.
+- Do not hardcode callout/infobox backgrounds — or darken them explicitly in
+  dark mode (e.g. to var(--bg-soft)); the colored border stays.
+- Only inside @media screen — print/PDF stays light.