update

templates/Format/Baustein.md

@@ -1,100 +1,109 @@
 ```
-BAUSTEIN-CARD-STIL (HTML+CSS, in Browser anzeigbar)
+BAUSTEIN CARD STYLE (HTML+CSS, viewable in a browser)
 
-ZWECK
+PURPOSE
-- Einzelner Baustein als kompakte Card-Darstellung
+- Single building block ("Baustein") as a compact card
-- Schnelles Nachschlagen einzelner Konzepte
+- Quick lookup of individual concepts
-- Card ist Teil einer größeren Baustein-Sammlung
+- The card is part of a larger collection of building blocks
-- Nicht zum Lernen, sondern zum Wiedererkennen
+- Not for learning, but for recognition
-- Pro Card genau 1 Baustein
+- Exactly 1 building block per card
 
 FORMAT
-- HTML mit eingebettetem CSS
+- HTML with embedded CSS
-- Im Browser anzeigbar (kein PDF-Output)
+- Viewable in a browser (no PDF output)
-- Card auf hellgrauem Hintergrund zentriert
+- Card centered on a light gray background
 - Max-width 1000px, padding 28px 36px
-- Border-radius 12px, dezenter Schatten
+- Border-radius 12px, subtle shadow
-- Page-Hintergrund #f0f0f5
+- Page background #f0f0f5
 
-STRUKTUR — STRIKT NUR DIESE 4 ELEMENTE
+STRUCTURE — STRICTLY ONLY THESE 4 ELEMENTS
-1. Titel (h1, fett, ohne Label, ohne Logo)
+1. Title (h1, bold, no label, no logo)
-2. Beschreibung (ein knapper Satz)
+2. Description (one concise sentence)
-3. Zweck (kursiv, grau, ein knapper Satz)
+3. Purpose (italic, gray, one concise sentence)
-4. Code-Beispiel (das eine relevanteste, mit Mini-Label oben)
+4. Code example (the single most relevant one, with a mini label on top)
 
-KEIN Logo, KEIN "Baustein"-Label, KEIN Sprach-Tag, KEINE Sektion-Überschriften ("Beschreibung", "Zweck", "Relevante Beispiele"), KEINE Info-Blöcke, KEINE Warn/Tip/Note-Boxen, KEINE Meta-Informationen, KEINE Trennlinien zwischen Sektionen.
+NO logo, NO "Baustein" label, NO language tag, NO section headings
+("Beschreibung", "Zweck", "Relevante Beispiele"), NO info blocks,
+NO warn/tip/note boxes, NO meta information, NO divider lines between
+sections.
 
-TYPOGRAFIE
+TYPOGRAPHY
 - Body: -apple-system, "Segoe UI", sans-serif, 14px, line-height 1.5
-- Titel h1: 28px, font-weight 800, letter-spacing -0.5px, line-height 1.1
+- Title h1: 28px, font-weight 800, letter-spacing -0.5px, line-height 1.1
-- Beschreibung: 14px, line-height 1.55
+- Description: 14px, line-height 1.55
-- Zweck: 14px, italic, color #5a6470
+- Purpose: 14px, italic, color #5a6470
 - Code: "SF Mono", Consolas, monospace, 12px, line-height 1.5
-- Code-Label: 10px, letter-spacing 1px
+- Code label: 10px, letter-spacing 1px
 
-FARBEN
+COLORS
-- Card-Hintergrund: #ffffff
+- Card background: #ffffff
-- Page-Hintergrund: #f0f0f5
+- Page background: #f0f0f5
 - Text: #1a1a1a
-- Muted (Zweck): #5a6470
+- Muted (purpose): #5a6470
-- Code-Hintergrund: #1e2a3a
+- Code background: #1e2a3a
-- Code-Text: #e6e6e6
+- Code text: #e6e6e6
-- Syntax-Highlighting:
+- Syntax highlighting:
   - Keywords (.k): #ff79c6 (pink)
-  - Variablen (.v): #ffb86c (orange)
+  - Variables (.v): #ffb86c (orange)
-  - Strings (.s): #f1c40f (gelb)
+  - Strings (.s): #f1c40f (yellow)
-  - Funktionen (.f): #50fa7b (grün)
+  - Functions (.f): #50fa7b (green)
-  - Typen (.t): #8be9fd (cyan)
+  - Types (.t): #8be9fd (cyan)
-  - Kommentare (.c): #6b8aae italic
+  - Comments (.c): #6b8aae italic
-- Label-Farbe in Code: #8be9fd (cyan)
+- Label color in code: #8be9fd (cyan)
 
-INHALTLICHE PRINZIPIEN
+CONTENT PRINCIPLES
-- Titel: GELÄUFIGSTER Kurzbegriff, max 1-2 Wörter, kein Präfix, keine Variante
+- Title: the MOST COMMON short term, max 1-2 words, no prefix, no variant
-  - Gut: "Header", "Variable", "Klasse", "for-Schleife"
+  - Good: "Header", "Variable", "Klasse", "for-Schleife"
-  - Schlecht: "Überschriften h1–h6", "Variablen-Deklaration mit Typ"
+  - Bad: "Überschriften h1–h6", "Variablen-Deklaration mit Typ"
-- Beschreibung: WAS macht es mechanisch? 1 Satz, max 5 Wörter, abstrakt/technisch
+- Description: WHAT does it do mechanically? 1 sentence, max 5 words,
-  - Gut: "Definiert eine Überschrift.", "Wiederholt einen Code-Block."
+  abstract/technical
-  - Schlecht: "Sechs Ebenen von der wichtigsten bis zur untergeordneten Überschrift."
+  - Good: "Definiert eine Überschrift.", "Wiederholt einen Code-Block."
-- Zweck: WANN brauche ich das? 1 Satz, max 5 Wörter, situativ/Problem-Trigger
+  - Bad: "Sechs Ebenen von der wichtigsten bis zur untergeordneten Überschrift."
-  - Gut: "Strukturiert die Seiteninhalte.", "Liste oder Bereich durchgehen."
+- Purpose: WHEN do I need this? 1 sentence, max 5 words,
-  - Schlecht: "Gliedert Inhalt in Hierarchie für Leser, SEO und Screenreader-Navigation."
+  situational/problem trigger
-- WICHTIG: Beschreibung und Zweck dürfen sich NICHT inhaltlich überschneiden
+  - Good: "Strukturiert die Seiteninhalte.", "Liste oder Bereich durchgehen."
-  - Schlecht (tautologisch): Beschreibung "Wiederholt Code." / Zweck "Etwas mehrfach tun."
+  - Bad: "Gliedert Inhalt in Hierarchie für Leser, SEO und Screenreader-Navigation."
-  - Gut (distinkt): Beschreibung "Wiederholt einen Code-Block." / Zweck "Liste oder Bereich durchgehen."
+- IMPORTANT: description and purpose must NOT overlap in content
-- Beide Sätze: jedes überflüssige Wort raus, keine Aufzählungen, keine Komma-Listen
+  - Bad (tautological): description "Wiederholt Code." / purpose "Etwas mehrfach tun."
-- Genau EIN Code-Beispiel: das relevanteste / häufigste / typischste
+  - Good (distinct): description "Wiederholt einen Code-Block." / purpose "Liste oder Bereich durchgehen."
-- Beispiel zeigt den Standard-Use-Case, nicht Edge-Cases
+- Both sentences: cut every superfluous word, no enumerations, no comma lists
-- Label über Beispiel: max 2-3 Wörter, einfach, beschreibend
+- Exactly ONE code example: the most relevant / most common / most typical
-  - Gut: "Alle Header", "Zuweisung", "Grund-Regel"
+- The example shows the standard use case, not edge cases
-  - Schlecht: "Alle Ebenen h1–h6", "Variable mit Typ-Hint deklarieren"
+- Label above the example: max 2-3 words, simple, descriptive
+  - Good: "Alle Header", "Zuweisung", "Grund-Regel"
+  - Bad: "Alle Ebenen h1–h6", "Variable mit Typ-Hint deklarieren"
 
-LAYOUT-DETAILS
+LAYOUT DETAILS
-- Header und Body keine separaten Sektionen, alles in einer Card
+- Header and body are not separate sections, everything in one card
-- Titel zuerst, darunter direkt Beschreibung, darunter Zweck (mit margin-bottom)
+- Title first, directly below it the description, below that the purpose
-- Margin-bottom Titel: 14px
+  (with margin-bottom)
-- Margin-bottom Beschreibung: 6px (eng zum Zweck)
+- Margin-bottom title: 14px
-- Margin-bottom Zweck: 22px (Abstand zu Code)
+- Margin-bottom description: 6px (close to the purpose)
-- Code-Block padding: 14px 16px, border-radius 8px
+- Margin-bottom purpose: 22px (distance to the code)
+- Code block padding: 14px 16px, border-radius 8px
 
-CODE-BEISPIEL
+CODE EXAMPLE
-- GENAU EIN Beispiel pro Card
+- EXACTLY ONE example per card
-- Das relevanteste, typischste, häufigste — nicht Edge-Cases
+- The most relevant, most typical, most common one — not edge cases
-- Sehr kurz: ideal 3-6 Zeilen, max 8 Zeilen
+- Very short: ideally 3-6 lines, max 8 lines
-- Mit kurzem Label oben (2-4 Wörter)
+- With a short label on top (2-4 words)
-- Syntax-Highlighting durch span-Klassen (.k, .v, .s, etc.)
+- Syntax highlighting via span classes (.k, .v, .s, etc.)
 
-HTML-ENTITIES IM CODE (PFLICHT bei HTML/XML/JSX/Vue/JSX-ähnlichem Code)
+HTML ENTITIES IN CODE (MANDATORY for HTML/XML/JSX/Vue/JSX-like code)
-- Wenn das Code-Beispiel SELBST HTML, XML, JSX oder ähnliche Tag-Syntax zeigt, MÜSSEN spitze Klammern als HTML-Entities geschrieben werden:
+- If the code example ITSELF shows HTML, XML, JSX, or similar tag syntax,
+  angle brackets MUST be written as HTML entities:
   - `<` → `&lt;`
   - `>` → `&gt;`
   - `&` → `&amp;`
-- Grund: der Code wird via v-html im Browser gerendert. Rohe `<h1>` werden sonst als echtes DOM-Element interpretiert und verschwinden.
+- Reason: the code is rendered via v-html in the browser. Raw `<h1>` would
-- Gut: `<span class="t">&lt;h1&gt;</span>Text<span class="t">&lt;/h1&gt;</span>`
+  otherwise be interpreted as a real DOM element and disappear.
-- Schlecht: `<span class="t"><h1></span>Text<span class="t"></h1></span>`
+- Good: `<span class="t">&lt;h1&gt;</span>Text<span class="t">&lt;/h1&gt;</span>`
-- Schlecht: `<h1>Text</h1>` (komplett ohne Spans und ohne Entities)
+- Bad: `<span class="t"><h1></span>Text<span class="t"></h1></span>`
-- Diese Regel gilt NUR für die Inhalte des Code-Beispiels, NICHT für die `<span class="...">`-Wrapper selbst
+- Bad: `<h1>Text</h1>` (entirely without spans and without entities)
+- This rule applies ONLY to the contents of the code example, NOT to the
+  `<span class="...">` wrappers themselves
 
-KONKRETES BEISPIEL — Baustein "Header" (HTML)
+CONCRETE EXAMPLE — building block "Header" (HTML)
 ```json
 {
   "title": "Header",
@@ -109,35 +118,35 @@ KONKRETES BEISPIEL — Baustein "Header" (HTML)
 }
 ```
 
-VERMEIDEN
+AVOID
-- Lange Erklärungstexte
+- Long explanatory texts
-- Mehrere Sätze für Beschreibung oder Zweck
+- Multiple sentences for description or purpose
-- Performance-Tipps, Trade-Offs, Edge Cases
+- Performance tips, trade-offs, edge cases
-- Verwandte Bausteine, Varianten, Anti-Patterns
+- Related building blocks, variants, anti-patterns
-- Tabellen, Listen, Aufzählungen
+- Tables, lists, enumerations
-- Icons, Emojis, Symbole
+- Icons, emojis, symbols
-- Komplexe Code-Beispiele (über 8 Zeilen)
+- Complex code examples (over 8 lines)
-- Mehrere Beispiele (Varianten, Alternativen)
+- Multiple examples (variants, alternatives)
 
-THEMENSPEZIFISCHE ANPASSUNGEN
+TOPIC-SPECIFIC ADJUSTMENTS
-- Bei anderen Sprachen: Syntax-Highlighting-Klassen anpassen
+- For other languages: adapt syntax highlighting classes
-- Titel-Größe und Spacing bleiben gleich
+- Title size and spacing stay the same
-- Card-Layout bleibt gleich
+- Card layout stays the same
-- Inhalte (Beschreibung, Zweck, Beispiel) sprachspezifisch
+- Content (description, purpose, example) is language-specific
 
-GENERIERUNG MIT FEEDBACK-LOOP
+GENERATION WITH FEEDBACK LOOP
-1. HTML schreiben
+1. Write the HTML
-2. In Browser anzeigen (Playwright-Screenshot oder direkt)
+2. View in a browser (Playwright screenshot or directly)
-3. Prüfen:
+3. Check:
-   - Wirklich nur 4 Elemente (Titel, Beschreibung, Zweck, Beispiel)?
+   - Really only 4 elements (title, description, purpose, example)?
-   - Beschreibung und Zweck je max 5 Wörter?
+   - Description and purpose each max 5 words?
-   - Titel max 1-2 Wörter, geläufiger Kurzbegriff?
+   - Title max 1-2 words, common short term?
-   - Label max 2-3 Wörter, simpel?
+   - Label max 2-3 words, simple?
-   - Code-Beispiel unter 8 Zeilen?
+   - Code example under 8 lines?
-   - Label über Code-Block kurz und prägnant?
+   - Label above the code block short and to the point?
-   - Card kompakt, kein leerer Raum?
+   - Card compact, no empty space?
-   - Ist das gewählte Beispiel wirklich das typischste?
+   - Is the chosen example really the most typical one?
-   - Bei HTML/XML/JSX-Code: alle `<` und `>` als `&lt;` und `&gt;` geschrieben?
+   - For HTML/XML/JSX code: all `<` and `>` written as `&lt;` and `&gt;`?
-4. Wenn etwas zu viel: weglassen, nicht hinzufügen
+4. If something is too much: remove it, don't add
-5. Bei jeder Iteration prüfen: lässt sich noch was weglassen?
+5. On every iteration check: can anything else be removed?
 ```

templates/Format/Cheatsheet.md

@@ -1,123 +1,123 @@
 ```
-CHEATSHEET-STIL QUERFORMAT (HTML/CSS → PDF via WeasyPrint)
+CHEATSHEET STYLE LANDSCAPE (HTML/CSS → PDF via WeasyPrint)
 
 FORMAT
-- A4 Querformat (297mm × 210mm)
+- A4 landscape (297mm × 210mm)
 - @page { size: A4 landscape; margin: 0; }
-- Padding: 7mm 9mm 18mm 9mm (unten Platz für Footer)
+- Padding: 7mm 9mm 18mm 9mm (room for the footer at the bottom)
-- Position relative für absoluten Footer
+- Position relative for the absolute footer
 
 LAYOUT
-- Grid: hero (auto) / main (4 Spalten) / footer (absolute)
+- Grid: hero (auto) / main (4 columns) / footer (absolute)
-- Main: 4 Spalten gleich breit, gap 3mm
+- Main: 4 equal-width columns, gap 3mm
-- Spalten intern: flex-column, gap 3mm
+- Columns internally: flex-column, gap 3mm
-- 8-12 thematische Blöcke verteilt (2-3 pro Spalte)
+- 8-12 thematic blocks distributed (2-3 per column)
 
-STRUKTUR (in dieser Reihenfolge)
+STRUCTURE (in this order)
-1. Hero: Logo links (15mm), Titel + Untertitel mittig, Version + Stand rechts
+1. Hero: logo left (15mm), title + subtitle center, version + date right
-2. Main-Grid: 8-12 Blöcke in 4 Spalten
+2. Main grid: 8-12 blocks in 4 columns
-3. Footer: farbige Box mit Quick-Commands + Tag (absolute, unten)
+3. Footer: colored box with quick commands + tag (absolute, bottom)
 
-UNTERSCHIEDE ZU HOCHFORMAT-CHEATSHEET
+DIFFERENCES FROM THE PORTRAIT CHEATSHEET
-- 4 Spalten statt 3 (mehr horizontaler Platz)
+- 4 columns instead of 3 (more horizontal space)
-- 9-12 Blöcke statt 8-10
+- 9-12 blocks instead of 8-10
-- Footer mit 4 Quick-Commands statt 3
+- Footer with 4 quick commands instead of 3
-- Kleinere Schriftgrößen (8pt Body statt 8.5pt)
+- Smaller font sizes (8pt body instead of 8.5pt)
-- Kompaktere Code-Blöcke (6.5pt statt 6.8pt)
+- More compact code blocks (6.5pt instead of 6.8pt)
 
-BLOCK-AUFBAU
+BLOCK STRUCTURE
-- Block-Head: Hauptfarbe-Hintergrund, weißer Text, Icon links (3.5mm)
+- Block head: accent-color background, white text, icon left (3.5mm)
-- Block-Body: weißer Hintergrund, dünner Rand, abgerundet 2mm
+- Block body: white background, thin border, rounded 2mm
-- Inhalt: dichte Referenz, nicht Erklärung
+- Content: dense reference, not explanation
-- Varianten: Referenz-Tabelle, Code-Block, Kachel-Grid, Plus/Minus
+- Variants: reference table, code block, tile grid, plus/minus
 
-FARBEN (max 3 + Neutrals)
+COLORS (max 3 + neutrals)
-- Hauptfarbe: an offizielle Farbe des Themas anlehnen
+- Accent color: lean on the topic's official color
-- Hauptfarbe-Dunkel: dunklere Variante für Headings
+- Accent dark: darker variant for headings
-- Hauptfarbe-Darker: noch dunkler für Footer
+- Accent darker: even darker for the footer
-- Akzentfarbe für Plus/Minus: grün/rot
+- Accent color for plus/minus: green/red
-- Hintergrund-Soft: helle Variante der Hauptfarbe
+- Background soft: light variant of the accent color
-- Code-Hintergrund: #1e2a3a (dunkel)
+- Code background: #1e2a3a (dark)
-- Text: #1a1a1a / muted #5a6470 / Linie #d8dde3
+- Text: #1a1a1a / muted #5a6470 / line #d8dde3
 
-TYPOGRAFIE
+TYPOGRAPHY
 - Body: 8pt, line-height 1.35
 - Hero h1: 18pt bold
-- Block-Head: 8pt bold uppercase, letter-spacing 0.5pt
+- Block head: 8pt bold uppercase, letter-spacing 0.5pt
-- Tabellen: 7.5pt, Keys 7pt monospace
+- Tables: 7.5pt, keys 7pt monospace
 - Code: 6.5pt monospace, line-height 1.4
-- Inline-Code: 7pt monospace, Hauptfarbe
+- Inline code: 7pt monospace, accent color
-- Max 3 Schriftgrößen pro Block
+- Max 3 font sizes per block
 
 ICONS
-- SVG inline, stroke statt fill
+- SVG inline, stroke instead of fill
-- 3.5mm in Block-Heads
+- 3.5mm in block heads
-- 2mm in Tile-Icons (kleiner als Hochformat)
+- 2mm in tile icons (smaller than portrait)
-- currentColor für automatische Anpassung
+- currentColor for automatic adaptation
 
-BLOCK-TYPEN (für Variation nutzen)
+BLOCK TYPES (use for variation)
-- Referenz-Tabelle: 2-spaltig (Befehl/Methode → Bedeutung)
+- Reference table: 2 columns (command/method → meaning)
-- Code-Block: vollständiges Beispiel mit Syntax-Highlighting
+- Code block: complete example with syntax highlighting
-- Kachel-Grid: 2x4 mit Icons (z.B. Ökosystem)
+- Tile grid: 2x4 with icons (e.g. ecosystem)
-- Direktiven-Grid: 2-spaltig kompakte Begriffe + Kurzbeschreibung
+- Directive grid: 2 columns, compact terms + short description
-- Plus/Minus-Split: 2-spaltig (idiomatisch vs vermeiden)
+- Plus/minus split: 2 columns (idiomatic vs avoid)
 
-THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
+TOPIC-SPECIFIC ADJUSTMENTS (choose before generating)
-- Hauptfarbe: offizielle Farbe des Themas
+- Accent color: the topic's official color
-- Logo-Buchstabe(n) oder Kürzel
+- Logo letter(s) or abbreviation
-- Version + Stand-Datum
+- Version + as-of date
-- Block-Auswahl: 8-12 wichtigste Referenz-Themen
+- Block selection: the 8-12 most important reference topics
-- Quick-Commands im Footer: 4 wichtigste Kommandos
+- Quick commands in the footer: the 4 most important commands
 
-VISUELLE ELEMENTE PFLICHT
+REQUIRED VISUAL ELEMENTS
-- Mindestens 1 Code-Block (oft mehrere im Querformat)
+- At least 1 code block (often several in landscape)
-- Mindestens 1 Kachel-Grid mit Icons
+- At least 1 tile grid with icons
-- Mindestens 1 Plus/Minus-Split
+- At least 1 plus/minus split
-- Footer mit Quick-Commands
+- Footer with quick commands
-- Versionsbadge in Hero
+- Version badge in the hero
 
-VERMEIDEN
+AVOID
-- Reine Bullet-Listen ohne Struktur
+- Plain bullet lists without structure
-- Erklärtext (gehört in Guide, nicht Cheatsheet)
+- Explanatory text (belongs in a guide, not a cheatsheet)
-- Mehr als 12 Blöcke (überfüllt)
+- More than 12 blocks (overcrowded)
-- Mehr als 3 Schriftgrößen
+- More than 3 font sizes
-- Vertikal sehr lange Blöcke (Spalten unbalanciert)
+- Vertically very long blocks (unbalanced columns)
-- Floats oder absolute positioning (außer für Footer)
+- Floats or absolute positioning (except for the footer)
 
-GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
+GENERATION WITH FEEDBACK LOOP (max 3 iterations)
-1. HTML schreiben
+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')"
+3. PDF to 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
+4. View the preview with the Read tool
-5. Prüfen:
+5. Check:
-   - Footer überlappt nicht mit Inhalt?
+   - Footer does not overlap the content?
-   - 4 Spalten balanciert (ähnliche Höhe)?
+   - 4 columns balanced (similar height)?
-   - Alle Blöcke vollständig sichtbar?
+   - All blocks fully visible?
-   - Code-Blöcke nicht abgeschnitten?
+   - Code blocks not cut off?
-   - Icons rendern?
+   - Icons render?
-6. Bei Problemen: Inhalt straffen oder padding-bottom erhöhen, ab Schritt 2 wiederholen
+6. On problems: tighten the content or increase padding-bottom, repeat from step 2
-7. Nach max 3 Iterationen ausgeben
+7. Output after max 3 iterations
 
 INSTALLATION
 - pip install weasyprint pdf2image
 - apt install poppler-utils
 ```
 
-DARKMODE (PFLICHT)
+DARK MODE (REQUIRED)
-- Alle Farben ausschließlich über :root-Variablen definieren
+- Define all colors exclusively via :root variables
-  (--ink, --muted, --line, --bg-soft, Akzent-Variablen).
+  (--ink, --muted, --line, --bg-soft, accent variables).
-- Zusätzlich einen Dunkelmodus-Block ausliefern:
+- 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>.
+- The app enables it via data-theme="dark" on <html>.
-  KEIN prefers-color-scheme verwenden.
+  Do NOT use prefers-color-scheme.
-- Dunkle Werte: Hintergründe dunkel (#15171c / #23262e), Text hell (#e6e8ee),
+- Dark values: dark backgrounds (#15171c / #23262e), light text (#e6e8ee),
-  Linien gedämpft (#2c3038). Akzentfarben so anheben, dass Überschriften und
+  muted lines (#2c3038). Lift accent colors so headings and links stay
-  Links auf dunklem Grund lesbar bleiben (Kontrast prüfen). Elemente mit hellem
+  readable on a dark background (check contrast). Elements with light text on
-  Text auf Akzent-Hintergrund (z. B. Tabellenköpfe) dürfen ihre helle
+  accent backgrounds (e.g. table headers) may keep their light background
-  Hintergrundfarbe behalten.
+  color.
-- Callout-/Infobox-Hintergründe nicht hartkodieren oder im Dunkelmodus
+- Do not hardcode callout/infobox backgrounds — or darken them explicitly in
-  explizit abdunkeln (z. B. auf var(--bg-soft)); farbige Border bleibt.
+  dark mode (e.g. to var(--bg-soft)); the colored border stays.
-- Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.
+- Only inside @media screen — print/PDF stays light.

templates/Format/EndGuide.md

@@ -1,179 +1,190 @@
-END-GUIDE-STIL (HTML/CSS → PDF via WeasyPrint)
+END-GUIDE STYLE (HTML/CSS → PDF via WeasyPrint)
 
 FORMAT
-- A4 Hochformat, 50–250 Seiten (themenabhängig — kleines Thema kurz,
+- A4 portrait, 50–250 pages (topic-dependent — small topic short,
-  großes Thema lang; die Seitenzahl folgt aus dem Inventar)
+  large topic long; the page count follows from the inventory)
 - @page { size: A4; margin: 18mm; }
-- Cover-Seite + automatisches Inhaltsverzeichnis
+- Cover page + automatic table of contents
-- Footer: Seitenzahl Mitte, "<Thema> EndGuide" rechts
+- Footer: page number center, "<Topic> EndGuide" right
 
-ABDECKUNG (höchste Guide-Stufe)
+COVERAGE (highest guide tier)
-- ALLE Bausteine des Themas — vollständig, "lieber zu viel als zu wenig".
+- ALL building blocks of the topic — complete, "rather too much than too little".
-- Von der ersten Zeile bis zu Experten-Themen (Architektur, Interna, Betrieb —
+- From the very first line up to expert topics (architecture, internals,
-  was immer beim Thema die Expertenstufe ist).
+  operations — whatever the expert tier is for the topic).
-- Aktuelle Version des Themas als Zielversion nennen.
+- Name the current version of the topic as the target version.
 
-THEMENINVENTAR (verbindlich)
+TOPIC INVENTORY (binding)
-- Das Inventar wird vorab von einem Recherche-Agenten erstellt und mitgeliefert.
+- The inventory is produced beforehand by a research agent and supplied with
-  Es ist die verbindliche Stoffliste: 1 Inventar-Punkt = 1 EIGENE H2-Sektion
+  the task. It is the binding list of material: 1 inventory item = 1 OWN H2
-  nach dem Muster Titel·Erklärung·Beispiel.
+  section following the pattern Title·Explanation·Example.
-- Punkte beim Schreiben NICHT zusammenfassen, kürzen oder eindampfen — wirkt
+- Do NOT merge, trim, or condense items while writing — if the workload feels
-  das Pensum zu groß, Teil für Teil abarbeiten statt komprimieren.
+  too large, work part by part instead of compressing.
-- Teile und Kapitel aus dem Inventar ableiten: verwandte Punkte zu Kapiteln
+- Derive parts and chapters from the inventory: group related items into
-  gruppieren, Kapitel zu Teilen. Es gibt KEINE Vorgabe-Zahl für Teile/Kapitel.
+  chapters, chapters into parts. There is NO default number of parts/chapters.
 
-ZIELGRUPPE — VOM ANFÄNGER ZUM EXPERTEN
+TARGET AUDIENCE — FROM BEGINNER TO EXPERT
-- Beginnt bei null, steigert sich progressiv über die Teile
+- Starts at zero, progresses step by step across the parts
-- Frühe Teile erklären jeden Begriff; spätere setzen Vorheriges voraus
+- Early parts explain every term; later ones assume what came before
-- Verweise nach hinten ("eigener Teil") erlaubt – der Guide wird durchgelesen
+- Forward references ("own part") are allowed — the guide is read cover to
-  oder nachgeschlagen
+  cover or used for lookup
 
-KERNPRINZIP — TITEL · ERKLÄRUNG · BEISPIEL (das definierende Muster)
+CORE PRINCIPLE — TITLE · EXPLANATION · EXAMPLE (the defining pattern)
-- JEDES Konzept in genau dieser Reihenfolge:
+- EVERY concept in exactly this order:
-  1. Titel: reiner Konzept-/Verb-/Typname. Nichts sonst.
+  1. Title: pure concept/verb/type name. Nothing else.
-  2. Erklärung: 1–3 Sätze Prosa. Nennt die Funktionen/Bausteine und was sie tun.
+  2. Explanation: max. 3 short main clauses, simply worded, no nested
-  3. Beispiel: lauffähiger Code (bzw. konkretes Beispiel) mit sichtbarem
+     sentences. Names the functions/building blocks and what they do.
-     Ergebnis als Kommentar.
+     Recommendations, real-world problems, and warnings do NOT belong in the
-- Die Überschrift trägt NIE die Funktionsliste oder die Definition:
+     explanation — that is what callouts (tip/warn/note) are for.
-  - schlecht: "Ersetzen: str_replace & substr_replace"
+  3. Example: runnable code (or a concrete example) with the visible result
-              "object – Instanz einer Klasse"
+     as a comment.
-  - gut:      "Ersetzen"  + Erklärung nennt die Funktionen + Beispiel
+- The heading NEVER carries the function list or the definition:
-              "object"     + Erklärung "Instanz einer Klasse" + Beispiel
+  - bad:  "Ersetzen: str_replace & substr_replace"
+          "object – Instanz einer Klasse"
+  - good: "Ersetzen"  + explanation names the functions + example
+          "object"     + explanation "Instanz einer Klasse" + example
 
-INHALTLICHE PRINZIPIEN
+CONTENT PRINCIPLES
-- Vollständigkeit: aufzählbare Mengen IMMER komplett (alle Operatoren, alle
+- Completeness: enumerable sets ALWAYS complete (all operators, all variants,
-  Varianten, alle Modi …). Nur sehr große Mengen (z. B. hunderte
+  all modes …). Only very large sets (e.g. hundreds of format characters) as
-  Formatzeichen) als Auswahl + Verweis auf die Doku.
+  a selection + reference to the docs.
-- Mechanik zeigen: Beispiele sind echte, lauffähige Mini-Demos MIT Ausgabe –
+- Show the mechanics: examples are real, runnable mini-demos WITH output —
-  nicht nur Signaturen oder leere Interfaces. Bei Mustern/Interfaces:
+  not just signatures or empty interfaces. For patterns/interfaces:
-  Vertrag + konkrete Implementierung + Aufruf mit sichtbarem Ergebnis.
+  contract + concrete implementation + call with visible result.
-- Tiefe vor Aufzählung: erst erklären warum/wann, dann zeigen.
+- Depth before enumeration: explain why/when first, then show.
-- Keine Performance-Zahlen ohne Quelle.
+- No performance numbers without a source.
 
-CODE-KONVENTIONEN (bei technischen Themen)
+CODE CONVENTIONS (for technical topics)
-- Bezeichner englisch: Variablen, Funktionen, Klassen, Methoden, Konstanten.
+- Identifiers in English: variables, functions, classes, methods, constants.
-- Deutsch bleibt: Fließtext, Überschriften, Code-Kommentare, Ausgabetexte,
+- German stays: prose, headings, code comments, output strings,
-  Beispieldaten ("Anna", "Köln", "Hallo Welt").
+  sample data ("Anna", "Köln", "Hallo Welt").
-- Unverändert: themen-/spracheigene Namen (Built-ins, Standard-APIs);
+- Unchanged: topic-/language-native names (built-ins, standard APIs);
-  Tabellen-/Spaltennamen in Strings (= Daten, keine Bezeichner).
+  table/column names in strings (= data, not identifiers).
-- Ergebnis-Kommentar an jedem Beispiel:  // 19.99 €
+- Result comment on every example:  // 19.99 €
-- Neutrale Daten: Namen Anna/Ben/Tom, Orte Köln/Hamburg, mail@example.com.
+- Neutral data: names Anna/Ben/Tom, places Köln/Hamburg, mail@example.com.
-  Keine personenbezogenen oder echten Daten.
+  No personal or real data.
-- Moderne Syntax der aktuellen Zielversion bevorzugen; Versionsabhängiges
+- Prefer modern syntax of the current target version; mark version-dependent
-  kennzeichnen ("seit Version X").
+  features ("seit Version X").
 
-STRUKTUR
+STRUCTURE
-1. Cover: Logo, Titel "<Thema> — Der EndGuide", Subtitle, Badge
+1. Cover: logo, title "<Topic> — Der EndGuide", subtitle, badge
-   "<N> Teile · <M> Kapitel" (Zahlen aus dem Inventar)
+   "<N> Teile · <M> Kapitel" (numbers taken from the inventory)
-2. Inhaltsverzeichnis (automatisch aus der Struktur erzeugt)
+2. Table of contents (generated automatically from the structure)
-3. Pro Teil: Trennseite (Teil-Nummer · Titel · Beschreibung · Kapitel-Liste)
+3. Per part: divider page (part number · title · description · chapter list)
-4. Pro Kapitel: Kapitel-Nummer + Titel, kurzer Lead-Satz, dann H2-Sektionen
+4. Per chapter: chapter number + title, short lead sentence, then H2 sections
-   nach dem Muster Titel·Erklärung·Beispiel
+   following the pattern Title·Explanation·Example
 
-NUMMERIERUNG
+NUMBERING
-- Teile und Kapitel sind GETRENNTE Zähler.
+- Parts and chapters are SEPARATE counters.
-- Kapitel laufen über den ganzen Guide durch – sie starten NICHT je Teil neu.
+- Chapters run through the whole guide — they do NOT restart per part.
 - "Teil 7" ≠ "Kapitel 7".
 
-ELEMENTE
+ELEMENTS
-- Fließtext: justify; Erklärungen als Prosa, Aufzählungen sparsam.
+- Body text: justify; explanations as prose, bullet lists sparingly.
-- Codeblöcke: dunkler Hintergrund, Syntax-Highlighting, mit Ergebnis-Kommentaren.
+- Code blocks: dark background, syntax highlighting, with result comments.
-- Inline-Code: heller Hintergrund, Hauptfarbe – für jeden Fachbegriff und
+- Inline code: light background, accent color — for every technical term and
-  Funktionsnamen im Fließtext.
+  function name in prose.
-- Callouts in 3 Varianten: tip (✓), warn (!), note (i). Sparsam, höchstens
+- Callouts in 3 flavors: tip (✓), warn (!), note (i). Sparingly, at most
-  einer pro Sektion.
+  one per section.
-- KEINE Übersichts- oder Referenztabellen. Jede Funktion/jedes Feature bekommt
+- NO overview or reference tables. Every function/feature gets
-  Erklärung + Beispiel inline.
+  explanation + example inline.
 
-TYPOGRAFIE & FARBEN (max 3 + Neutrals)
+TYPOGRAPHY & COLORS (max 3 + neutrals)
-- Hauptfarbe: an offizielle Farbe des Themas anlehnen; dunkle Code-Blöcke
+- Accent color: lean on the topic's official color; dark code blocks
-  (#1e2a3a-Familie).
+  (#1e2a3a family).
-- Body Serif; Überschriften Sans-Serif bold; Code Monospace.
+- Body serif; headings sans-serif bold; code monospace.
-- max. 3 Schriftgrößen pro Sektion.
+- max. 3 font sizes per section.
 
-CALLOUT-NUTZUNG
+CALLOUT USAGE
-- tip (✓):  Best Practice / Empfehlung.
+- tip (✓):  best practice / recommendation.
-- warn (!): Sicherheits- oder Stolperfalle.
+- warn (!): security issue or pitfall.
-- note (i): Hintergrund / Abgrenzung.
+- note (i): background / distinction.
+- MANDATORY: sentences like "Empfehlung: …", "In der Praxis problematisch: …",
+  "Achtung: …" ALWAYS go into the matching callout, never into the running
+  prose of the explanation. This keeps the explanation short and the hints
+  scannable.
 
-BUILD-ARCHITEKTUR (strukturgetrieben)
+BUILD ARCHITECTURE (structure-driven)
-- Eine Quelle der Wahrheit: STRUCTURE in build.py = Liste aus
+- One source of truth: STRUCTURE in build.py = list of
-  (Teil-Kicker, Titel, Beschreibung, [Kapiteltitel]) — direkt aus dem
+  (part kicker, title, description, [chapter titles]) — derived directly from
-  Inventar abgeleitet. Daraus entstehen Reihenfolge, Nummern,
+  the inventory. Order, numbers, table of contents, and divider pages are
-  Inhaltsverzeichnis und Trennseiten automatisch.
+  generated from it automatically.
-- Inhalt in Modulen content_partN.py:  CHAPTERS = { "Kapiteltitel": body_html }.
+- Content in modules content_partN.py:  CHAPTERS = { "chapter title": body_html }.
-  Teil für Teil schreiben — nie den ganzen Guide in einem Stück. Nach jedem
+  Write part by part — never the whole guide in one go. After each part:
-  Teil: H2-Sektionen gegen die Inventar-Punkte des Teils zählen, Fehlendes
+  count the H2 sections against that part's inventory items, add anything
-  sofort ergänzen, erst dann den nächsten Teil beginnen.
+  missing immediately, only then start the next part.
-- build.py meldet am Ende die Gesamtzahl der H2-Sektionen; sie muss der
+- build.py reports the total number of H2 sections at the end; it must match
-  Anzahl der Inventar-Punkte entsprechen.
+  the number of inventory items.
-- Highlight-Span-Klassen im Code:
+- Highlight span classes in code:
-  c=Kommentar, k=Keyword, s=String/Zahl, f=Funktion,
+  c=comment, k=keyword, s=string/number, f=function,
-  t=Typ/Klasse/Konstante, v=Variable, a=Attribut.
+  t=type/class/constant, v=variable, a=attribute.
-  Inline-Code im Text: <code class="inline">.
+  Inline code in prose: <code class="inline">.
-- Escaping im Code: < > & als &lt; &gt; &amp; (z. B. -&gt;, =&gt;, &amp;&amp;).
+- Escaping in code: < > & as &lt; &gt; &amp; (e.g. -&gt;, =&gt;, &amp;&amp;).
-- scrub() filtert beim Bauen personenbezogene Reste (Namen/Orte/Mails) heraus.
+- scrub() filters out personal leftovers (names/places/emails) during build.
 
-VERMEIDEN
+AVOID
-- Feste Teile-/Kapitel-/Seitenzahlen als Ziel (der Umfang folgt aus dem
+- Fixed part/chapter/page counts as a target (scope follows from the
-  Inventar, nicht umgekehrt).
+  inventory, not the other way around).
-- Inventar-Punkte zusammenfassen oder weglassen.
+- Merging or dropping inventory items.
-- Funktionsliste oder Definition in der Überschrift (Titel bleibt rein).
+- Function list or definition in the heading (the title stays pure).
-- Übersichts-/Referenztabellen ohne Erklärtext.
+- Explanations longer than 3 sentences or with nested sentences.
-- Deutsche Code-Bezeichner.
+- Recommendations/warnings in running prose instead of in a callout.
-- Personenbezogene oder echte Daten.
+- Overview/reference tables without explanatory text.
-- Unvollständige aufzählbare Mengen.
+- German code identifiers.
-- Reine Interface-/Signatur-Stubs ohne Aufruf + Ausgabe.
+- Personal or real data.
-- Performance-Zahlen ohne Quelle.
+- Incomplete enumerable sets.
-- Codeblock oder Callout über einen Seitenumbruch zerrissen
+- Pure interface/signature stubs without call + output.
+- Performance numbers without a source.
+- Code block or callout torn across a page break
   (page-break-inside: avoid).
 
-GENERIERUNG & PRÜFUNG
+GENERATION & VERIFICATION
-1. Inventar lesen, STRUCTURE daraus ableiten.
+1. Read the inventory, derive STRUCTURE from it.
-2. python3 build.py            → guide.html (meldet Kapitel/Teile + Sektionen)
+2. python3 build.py            → guide.html (reports chapters/parts + sections)
 3. weasyprint guide.html guide.pdf
-4. Verifizieren — die Sollwerte kommen aus dem Inventar:
+4. Verify — the target values come from the inventory:
-   - grep -c 'toc-part'    == Anzahl Teile in STRUCTURE
+   - grep -c 'toc-part'    == number of parts in STRUCTURE
-   - grep -c 'chapter-num' == Anzahl Kapitel in STRUCTURE
+   - grep -c 'chapter-num' == number of chapters in STRUCTURE
-   - grep -c '<h2'         == Anzahl Inventar-Punkte (1 Punkt = 1 Sektion;
+   - grep -c '<h2'         == number of inventory items (1 item = 1 section;
-     bei Differenz: fehlende Punkte ausarbeiten — NICHT das Inventar kürzen)
+     on mismatch: write out the missing items — do NOT trim the inventory)
    - grep -c '<table>'     == 0
-   - keine echten Namen/Orte/Mails
+   - no real names/places/emails
-   - Seitenzahl (pdfinfo) im Rahmen 50–250
+   - page count (pdfinfo) within the 50–250 range
-5. Stichproben rendern (pdftoppm) und ansehen:
+5. Render samples (pdftoppm) and inspect:
-   - Überschrift = reiner Titel, Erklärung darunter, dann Beispiel?
+   - Heading = pure title, explanation below it, then the example?
-   - Code englisch, Erklärung und Kommentare deutsch?
+   - Code in English, explanation and comments in German?
-   - Codeblöcke/Callouts nicht über Seitenumbruch zerrissen?
+   - Code blocks/callouts not torn across page breaks?
-   - Cover, Inhaltsverzeichnis und Teil-Trennseiten korrekt?
+   - Cover, table of contents, and part dividers correct?
 
-CHECKLISTE PRO ABSCHNITT
+CHECKLIST PER SECTION
-- [ ] Überschrift ist ein reiner Titel (keine Funktionsliste, keine Definition)
+- [ ] Heading is a pure title (no function list, no definition)
-- [ ] Erklärung in Prosa vorhanden, nennt die Bausteine
+- [ ] Explanation in prose present, names the building blocks
-- [ ] lauffähiges Beispiel mit Ergebnis-Kommentar
+- [ ] Explanation max. 3 short main clauses, no nested sentences
-- [ ] keine Tabelle
+- [ ] Recommendations/warnings as callout, not in running prose
-- [ ] englische Bezeichner, deutsche Erklärung/Kommentare/Daten
+- [ ] runnable example with result comment
-- [ ] aufzählbare Menge vollständig
+- [ ] no table
-- [ ] neutrale Beispieldaten
+- [ ] English identifiers, German explanation/comments/data
+- [ ] enumerable set complete
+- [ ] neutral sample data
 
 INSTALLATION
 - pip install weasyprint
 - apt install poppler-utils   (pdfinfo, pdftoppm, pdftotext)
 
-DARKMODE (PFLICHT)
+DARK MODE (REQUIRED)
-- Alle Farben ausschließlich über :root-Variablen definieren
+- Define all colors exclusively via :root variables
-  (--ink, --muted, --line, --bg-soft, Akzent-Variablen).
+  (--ink, --muted, --line, --bg-soft, accent variables).
-- Zusätzlich einen Dunkelmodus-Block ausliefern:
+- 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>.
+- The app enables it via data-theme="dark" on <html>.
-  KEIN prefers-color-scheme verwenden.
+  Do NOT use prefers-color-scheme.
-- Dunkle Werte: Hintergründe dunkel (#15171c / #23262e), Text hell (#e6e8ee),
+- Dark values: dark backgrounds (#15171c / #23262e), light text (#e6e8ee),
-  Linien gedämpft (#2c3038). Akzentfarben so anheben, dass Überschriften und
+  muted lines (#2c3038). Lift accent colors so headings and links stay
-  Links auf dunklem Grund lesbar bleiben (Kontrast prüfen). Elemente mit hellem
+  readable on a dark background (check contrast). Elements with light text on
-  Text auf Akzent-Hintergrund (z. B. Tabellenköpfe) dürfen ihre helle
+  accent backgrounds (e.g. table headers) may keep their light background
-  Hintergrundfarbe behalten.
+  color.
-- Callout-/Infobox-Hintergründe nicht hartkodieren oder im Dunkelmodus
+- Do not hardcode callout/infobox backgrounds — or darken them explicitly in
-  explizit abdunkeln (z. B. auf var(--bg-soft)); farbige Border bleibt.
+  dark mode (e.g. to var(--bg-soft)); the colored border stays.
-- Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.
+- Only inside @media screen — print/PDF stays light.

templates/Format/Guide.md

@@ -47,7 +47,8 @@ A **topic inventory** is produced beforehand by a research agent and supplied to
 - Open each chapter with a one- or two-sentence **lead** (`.lead`) that frames why the topic matters.
 - Explain each new term the first time it appears. Assume an intelligent reader who is new to *this* subject.
 - Prefer **short, concrete examples** over abstract description. For technical topics that means small code snippets; for non-technical topics it means worked examples, sample dialogues, before/after comparisons, small tables, checklists, or step lists.
-- Use **callouts** to highlight tips, warnings, side-notes, and deeper digressions — not more than one or two per chapter.
+- **Explanations are short and simple**: max. 3 short main clauses per concept, no nested sentences. Plain language over precision-flexing.
+- Use **callouts** to highlight tips, warnings, side-notes, and deeper digressions — not more than one or two per chapter. Sentences like "Empfehlung: …", "In der Praxis problematisch: …", "Achtung: …" ALWAYS go into the matching callout (tip/warn/note), never into running explanation text.
 - Keep prose tight. This is a reference people skim and return to, not an essay.
 
 ---
@@ -752,6 +753,7 @@ Example (PHP-flavored, but the pattern is language-agnostic):
 - [ ] TOC lists every part and every chapter, sequential numbering
 - [ ] Each part has a divider; each chapter starts with `.chapter-head` + `.lead`
 - [ ] Callouts used sparingly (≤ ~2 per chapter), correct flavor
+- [ ] Explanations ≤ 3 short main clauses; recommendations/warnings live in callouts, not prose
 - [ ] Tables for comparisons/lists; code blocks only if technical, short, escaped
 - [ ] Prose in the reader's language; terms explained on first use
 - [ ] Built with WeasyPrint and **visually verified** by rendering pages

templates/Format/MiniGuide.md

@@ -1,168 +1,170 @@
 ```
-MINI-GUIDE-STIL (HTML/CSS → PDF via WeasyPrint)
+MINI-GUIDE STYLE (HTML/CSS → PDF via WeasyPrint)
 
 FORMAT
-- A4 Hochformat, 3-5 Seiten
+- A4 portrait, 3-5 pages
 - @page { size: A4; margin: 18mm 18mm 16mm 18mm; }
-- Footer: Seitenzahl Mitte, Guide-Titel rechts
+- Footer: page number center, guide title right
 
-ABDECKUNG (niedrigste Guide-Stufe)
+COVERAGE (lowest guide tier)
-- ALLE Kern-Bausteine des Themas — was man braucht, um anzufangen.
+- ALL core building blocks of the topic — what you need to get started.
-  Welche das sind, hängt vom Thema ab.
+  Which ones those are depends on the topic.
-- Das Themeninventar wird vorab von einem Recherche-Agenten erstellt und
+- The topic inventory is produced beforehand by a research agent and
-  mitgeliefert. Es ist verbindlich: jeder Punkt bekommt eine Sektion.
+  supplied. It is binding: every item gets a section.
-- Sektionen ohne Kapitel-Struktur; Code-Beispiele sehr kurz (2-7 Zeilen)
+- Sections without chapter structure; code examples very short (2-7 lines)
-- ~15-25 Min Lesezeit, 3-5 Seiten — diese Obergrenze gilt immer
+- ~15-25 min reading time, 3-5 pages — this upper limit always applies
 
-ZIELGRUPPE — KOMPAKTER ANFÄNGER-EINSTIEG
+TARGET AUDIENCE — COMPACT BEGINNER INTRO
-- Echte Anfänger ohne Programmier-Vorwissen im Thema
+- Real beginners with no programming experience in the topic
-- Setzt nur allgemeines Verständnis voraus ("was ist Programmieren")
+- Assumes only general understanding ("what is programming")
-- Begriffe werden bei erstem Auftreten erklärt
+- Terms are explained on first appearance
-- KEIN Sprach-Charakter-Überblick für erfahrene Entwickler
+- NO language-character overview for experienced developers
-- KEINE fortgeschrittenen Features (auch wenn cool und kurz)
+- NO advanced features (even if cool and short)
 
-INHALTLICHE PRINZIPIEN
+CONTENT PRINCIPLES
-- Nur absolute Basics zeigen
+- Show only absolute basics
-- Themen, die jemand nach 15 Min selbst nachmachen kann
+- Topics someone can reproduce themselves after 15 min
-- Keine Tooling-Komplexität (Paketmanager, Build-Systeme, Compiler)
+- No tooling complexity (package managers, build systems, compilers)
-- Keine Sprach-Spezialitäten (Type-Systeme, Decorators, Generics)
+- No language specialties (type systems, decorators, generics)
-- Keine OOP, wenn möglich (oder nur trivialste Form)
+- No OOP if possible (or only the most trivial form)
-- Erklär-Tiefe vor Feature-Breite
+- Depth of explanation before breadth of features
-- Lieber 5 Konzepte gründlich als 15 oberflächlich
+- Better 5 concepts thoroughly than 15 superficially
 
-TYPISCHE 5-SEKTIONEN-STRUKTUR
+TYPICAL 5-SECTION STRUCTURE
-1. Sprache starten — Installation, erste Datei, erstes Programm
+1. Starting the language — installation, first file, first program
-2. Variablen — Konzept + 2-3 Basis-Typen
+2. Variables — concept + 2-3 basic types
-3. Kontrollfluss — if/else mit einfachem Beispiel
+3. Control flow — if/else with a simple example
-4. Listen + Iteration — Array + Schleife
+4. Lists + iteration — array + loop
-5. Funktionen — Deklaration + Aufruf + Rückgabe
+5. Functions — declaration + call + return value
 
-(Diese Reihenfolge baut aufeinander auf und endet mit etwas Sinnvollem.)
+(This order builds on itself and ends with something meaningful.)
 
-STRUKTUR
+STRUCTURE
-1. Kompakter Head: Logo links (16mm), Titel + Subtitle mittig, Badge + Zeit rechts
+1. Compact head: logo left (16mm), title + subtitle center, badge + time right
-2. Gap-Opener: Frage zum Einstieg, kursiv eingerahmt, niedrigschwellig
+2. Gap opener: opening question, italic and framed, low-threshold
-3. 4-6 H2-Sektionen mit Erklärtext + Code-Beispiel + ggf. Callout
+3. 4-6 H2 sections with explanatory text + code example + optional callout
 
-ELEMENTE
+ELEMENTS
-- Fließtext: justify mit Silbentrennung
+- Body text: justify with hyphenation
-- Codeblöcke: dunkler Hintergrund, syntax highlighting, sehr kurz (2-7 Zeilen)
+- Code blocks: dark background, syntax highlighting, very short (2-7 lines)
-- Inline-Code: heller Hintergrund, Hauptfarbe
+- Inline code: light background, accent color
-- Tabellen: nur wenn wirklich nötig (Vergleichs-Operatoren o.ä.)
+- Tables: only if truly necessary (comparison operators etc.)
-- Callouts in 3 Varianten: tip (grün), warn (rot), note (Hauptfarbe)
+- Callouts in 3 flavors: tip (green), warn (red), note (accent color)
 
-TYPOGRAFIE
+TYPOGRAPHY
-- Body: 10.5pt Serif (Charter), line-height 1.55
+- Body: 10.5pt serif (Charter), line-height 1.55
-- Head h1: 20pt Sans-Serif bold
+- Head h1: 20pt sans-serif bold
-- H2 Sektion: 13pt Sans-Serif bold
+- H2 section: 13pt sans-serif bold
-- Code: 8.5pt Monospace, line-height 1.5
+- Code: 8.5pt monospace, line-height 1.5
-- Inline-Code: 9pt Monospace
+- Inline code: 9pt monospace
-- Callout-Labels: 8pt uppercase, letter-spacing 1pt
+- Callout labels: 8pt uppercase, letter-spacing 1pt
 
-FARBEN (max 3 + Neutrals)
+COLORS (max 3 + neutrals)
-- Hauptfarbe: kräftig, an offizielle Farbe des Themas anlehnen
+- Accent color: strong, leaning on the topic's official color
-- Hauptfarbe-Dunkel: dunklere Variante für Akzente
+- Accent dark: darker variant for accents
-- Hintergrund-Soft: helle Variante der Hauptfarbe
+- Background soft: light variant of the accent color
-- Code-Hintergrund: #1e2a3a
+- Code background: #1e2a3a
-- Text: #1a1a1a / muted #5a6470 / Linie #d8dde3
+- Text: #1a1a1a / muted #5a6470 / line #d8dde3
-- Callout-Farben: grün/rot/Hauptfarbe
+- Callout colors: green/red/accent
 
-GAP-OPENER (PFLICHT)
+GAP OPENER (REQUIRED)
-- Kursiv, eingerahmt mit Hauptfarbe-Border
+- Italic, framed with an accent-color border
-- Niedrigschwellige Frage, die der Guide beantwortet
+- Low-threshold question that the guide answers
-- Begeistert mit relevanter Statistik oder Praxis-Bezug
+- Sparks interest with a relevant statistic or practical angle
-- KEINE Fachbegriffe, die noch nicht erklärt sind
+- NO technical terms that have not been explained yet
-- Beispiele:
+- Examples:
   - "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
+EXPLANATION DEPTH PER CONCEPT
-- Konzept benennen (z.B. "Variable")
+- Name the concept (e.g. "Variable")
-- In einem Satz erklären, was es ist
+- Explain in one sentence what it is
-- Code-Beispiel mit Kommentaren
+- Code example with comments
-- Sprach-Eigenheiten erwähnen (z.B. "in PHP beginnen Variablen mit $")
+- Mention language quirks (e.g. "in PHP beginnen Variablen mit $")
-- KEIN Verweis auf andere Konzepte, die noch kommen
+- NO reference to concepts that come later
 
-CALLOUT-NUTZUNG
+CALLOUT USAGE
-- tip (grün): Übungs-Anregung am Ende, ermutigend
+- tip (green): practice suggestion at the end, encouraging
-- warn (rot): Anfänger-Stolperfallen ("= vs ==", "vergessenes Semikolon")
+- warn (red): beginner pitfalls ("= vs ==", "vergessenes Semikolon")
-- note (Hauptfarbe): Hintergrund-Info, Erklärung einer Sprach-Eigenheit
+- note (accent): background info, explanation of a language quirk
 
-CALLOUT-CSS WICHTIG
+CALLOUT CSS IMPORTANT
-- .callout-body > b:first-child mit display:block für Label
+- .callout-body > b:first-child with display:block for the label
-- NICHT .callout-body b global mit display:block (zerstört Inline-Bold)
+- NOT .callout-body b globally with display:block (destroys inline bold)
 
-GAP-CSS WICHTIG
+GAP CSS IMPORTANT
-- .gap > b:first-child mit display:block für "FRAGE ZUM EINSTIEG"-Label
+- .gap > b:first-child with display:block for the "FRAGE ZUM EINSTIEG" label
-- NICHT .gap b global mit display:block (zerstört Inline-Bold im Frage-Text)
+- NOT .gap b globally with display:block (destroys inline bold in the
+  question text)
 
-THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
+TOPIC-SPECIFIC ADJUSTMENTS (choose before generating)
-- Hauptfarbe: offizielle Farbe des Themas
+- Accent color: the topic's official color
-- Logo-Buchstabe(n) oder Kürzel
+- Logo letter(s) or abbreviation
-- Begrüßungs-Statistik im Gap-Opener
+- Welcome statistic in the gap opener
-- 4-6 Anfänger-Themen wählen (siehe Standard-Struktur)
+- Choose 4-6 beginner topics (see standard structure)
 
-PFLICHT-ELEMENTE
+REQUIRED ELEMENTS
-- 1 Gap-Opener am Anfang
+- 1 gap opener at the start
-- 5-7 Code-Beispiele (kurz, 2-7 Zeilen, anfänger-tauglich)
+- 5-7 code examples (short, 2-7 lines, beginner-friendly)
-- Mindestens 1 Callout (oft: warn für Stolperfalle, tip für Übung am Ende)
+- At least 1 callout (often: warn for a pitfall, tip for practice at the end)
-- Inline-Codes für Fachbegriffe
+- Inline code for technical terms
 
-VERMEIDEN
+AVOID
-- TOC oder Cover (überdimensioniert für 15 Min)
+- TOC or cover (oversized for 15 min)
-- Einleitungs-Floskeln ("In diesem Mini-Guide lernen wir...")
+- Introductory filler ("In diesem Mini-Guide lernen wir...")
-- Vollständigkeitsanspruch (gehört in größeren Guide)
+- Claims of completeness (belongs in a larger guide)
-- Referenz-Tabellen ohne Erklärtext (gehört in Cheatsheet)
+- Reference tables without explanatory text (belongs in a cheatsheet)
-- Recall oder Next-Step am Ende (Mini-Guide endet mit Inhalt)
+- Recall or next-step at the end (a mini-guide ends with content)
-- Themen, die fortgeschritten sind (auch wenn cool):
+- Topics that are advanced (even if cool):
-  - Type-Systems, Type-Hints, Generics
+  - Type systems, type hints, generics
-  - OOP-Features (außer trivialster Form)
+  - OOP features (except the most trivial form)
-  - Tooling (Paketmanager, Build, Linting)
+  - Tooling (package managers, build, linting)
-  - Sprach-Spezialitäten (PHP: strict_types, readonly, Composer, PSR-4)
+  - Language specialties (PHP: strict_types, readonly, Composer, PSR-4)
-- page-break mitten in Codeblock oder Callout (page-break-inside: avoid)
+- page break in the middle of a code block or callout
-- Mehr als 3 Schriftgrößen pro Sektion
+  (page-break-inside: avoid)
-- Floats oder absolute positioning (bricht in WeasyPrint)
+- More than 3 font sizes per section
-- Fachbegriffe ohne Erklärung
+- Floats or absolute positioning (breaks in WeasyPrint)
-- Verweise auf andere Konzepte, die noch kommen
+- Technical terms without explanation
-- Edge Cases und "aber"-Sätze
+- References to concepts that come later
+- Edge cases and "but" sentences
 
-GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
+GENERATION WITH FEEDBACK LOOP (max 3 iterations)
-1. HTML schreiben
+1. Write the HTML
 2. weasyprint file.html file.pdf
-3. PDF zu PNGs: alle Seiten konvertieren
+3. PDF to PNGs: convert all pages
-4. Alle Seiten ansehen
+4. View all pages
-5. Prüfen:
+5. Check:
-   - Head sauber (Logo überlappt nicht mit Titel)?
+   - Head clean (logo does not overlap the title)?
-   - Code-Blöcke nicht über Seitenumbruch zerrissen?
+   - Code blocks not torn across page breaks?
-   - Callouts vollständig sichtbar?
+   - Callouts fully visible?
-   - Inline-Bolds in Callouts/Gap korrekt (nicht als Blöcke)?
+   - Inline bolds in callouts/gap correct (not rendered as blocks)?
-   - Footer mit Seitenzahl korrekt?
+   - Footer with page number correct?
-   - Würde ein echter Anfänger das verstehen?
+   - Would a real beginner understand this?
-   - Wurden alle Fachbegriffe beim ersten Auftreten erklärt?
+   - Were all technical terms explained on first appearance?
-6. Bei Problemen: fixen, ab Schritt 2 wiederholen
+6. On problems: fix, repeat from step 2
-7. Nach max 3 Iterationen ausgeben
+7. Output after max 3 iterations
 
 INSTALLATION
 - pip install weasyprint pdf2image
 - apt install poppler-utils
 ```
 
-DARKMODE (PFLICHT)
+DARK MODE (REQUIRED)
-- Alle Farben ausschließlich über :root-Variablen definieren
+- Define all colors exclusively via :root variables
-  (--ink, --muted, --line, --bg-soft, Akzent-Variablen).
+  (--ink, --muted, --line, --bg-soft, accent variables).
-- Zusätzlich einen Dunkelmodus-Block ausliefern:
+- 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>.
+- The app enables it via data-theme="dark" on <html>.
-  KEIN prefers-color-scheme verwenden.
+  Do NOT use prefers-color-scheme.
-- Dunkle Werte: Hintergründe dunkel (#15171c / #23262e), Text hell (#e6e8ee),
+- Dark values: dark backgrounds (#15171c / #23262e), light text (#e6e8ee),
-  Linien gedämpft (#2c3038). Akzentfarben so anheben, dass Überschriften und
+  muted lines (#2c3038). Lift accent colors so headings and links stay
-  Links auf dunklem Grund lesbar bleiben (Kontrast prüfen). Elemente mit hellem
+  readable on a dark background (check contrast). Elements with light text on
-  Text auf Akzent-Hintergrund (z. B. Tabellenköpfe) dürfen ihre helle
+  accent backgrounds (e.g. table headers) may keep their light background
-  Hintergrundfarbe behalten.
+  color.
-- Callout-/Infobox-Hintergründe nicht hartkodieren oder im Dunkelmodus
+- Do not hardcode callout/infobox backgrounds — or darken them explicitly in
-  explizit abdunkeln (z. B. auf var(--bg-soft)); farbige Border bleibt.
+  dark mode (e.g. to var(--bg-soft)); the colored border stays.
-- Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.
+- Only inside @media screen — print/PDF stays light.

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)
+- Grid: hero+stats (auto) / divider / main (1fr, 3 columns) / footer (absolute)
-- Stats-Bar in Hero integriert (rechts), spart vertikalen Platz
+- Stats bar integrated into the hero (right), saves vertical space
-- Main: 3 Spalten gleich breit, gap 4mm
+- Main: 3 equal-width columns, gap 4mm
-- Spalten intern: flex-column, gap 4mm
+- Columns internally: flex-column, gap 4mm
-- 6 thematische Blöcke verteilt (2 pro Spalte)
+- 6 thematic blocks distributed (2 per column)
 
-STRUKTUR (in dieser Reihenfolge)
+STRUCTURE (in this order)
-1. Hero: Logo links (22mm), Titel + Untertitel mittig, 4 Stats rechts
+1. Hero: logo left (22mm), title + subtitle center, 4 stats right
-2. Divider: 1.5pt schwarze Linie
+2. Divider: 1.5pt black line
-3. Main-Grid: 6 Blöcke in 3 Spalten
+3. Main grid: 6 blocks in 3 columns
-4. Footer: farbige Box mit Kernaussage + Tag (absolute, unten)
+4. Footer: colored box with key message + tag (absolute, bottom)
 
-UNTERSCHIEDE ZU HOCHFORMAT
+DIFFERENCES FROM PORTRAIT
-- 3 Spalten statt 2 (mehr horizontaler Platz)
+- 3 columns instead of 2 (more horizontal space)
-- 6 Blöcke statt 4-5
+- 6 blocks instead of 4-5
-- Stats integriert in Hero statt eigene Zeile
+- Stats integrated into the hero instead of their own row
-- Kleinere Schriftgrößen (9.5pt Body statt 10pt)
+- Smaller font sizes (9.5pt body instead of 10pt)
-- Kompaktere Code-Blöcke (7pt statt 7.5pt)
+- More compact code blocks (7pt instead of 7.5pt)
 
-BLOCK-AUFBAU
+BLOCK STRUCTURE
-- Titel: 9.5pt bold uppercase, Icon links, Hauptfarbe-Unterstreichung 2pt
+- Title: 9.5pt bold uppercase, icon left, accent-color underline 2pt
-- Inhalt: visuell, nicht reine Textbullets
+- Content: visual, not plain text bullets
-- Varianten: Icon-Liste, Code-Block, Kachel-Grid, Plus/Minus-Spalten, Type-Grid
+- Variants: icon list, code block, tile grid, plus/minus columns, type grid
 
-FARBEN (max 3 + Neutrals)
+COLORS (max 3 + neutrals)
-- Hauptfarbe: an offizielle Farbe des Themas anlehnen
+- Accent color: lean on the topic's official color
-- Hauptfarbe-Dunkel: für Headings
+- Accent dark: for headings
-- Hauptfarbe-Darker: für Footer
+- Accent darker: for the footer
-- Akzentfarbe: kontrastierend
+- Accent color: contrasting
-- Hintergrund-Soft: helle Variante der Hauptfarbe
+- Background soft: light variant of the accent color
-- Code-Hintergrund: #1e2a3a
+- Code background: #1e2a3a
-- Text: #1a1a1a / muted #5a6470 / Linie #e5e5e5
+- 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
+- Block title: 9.5pt bold uppercase, letter-spacing 0.5pt
-- Stats-Zahl: 14pt bold, Label 6.5pt uppercase
+- Stats number: 14pt bold, label 6.5pt uppercase
-- Code: 7pt monospace, dunkler Hintergrund
+- Code: 7pt monospace, dark background
-- Feature-Text: 8.5pt
+- Feature text: 8.5pt
-- Max 3 Schriftgrößen pro Block
+- Max 3 font sizes per block
 
 ICONS
-- SVG inline, stroke statt fill
+- SVG inline, stroke instead of fill
-- 4mm in Block-Titeln (kleiner als Hochformat wegen kompakter Layout)
+- 4mm in block titles (smaller than portrait due to compact layout)
-- 2.8mm in Kachel-Icons
+- 2.8mm in tile icons
-- currentColor für automatische Anpassung
+- currentColor for automatic adaptation
 
-THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
+TOPIC-SPECIFIC ADJUSTMENTS (choose before generating)
-- Hauptfarbe: offizielle Farbe des Themas
+- Accent color: the topic's official color
-- Logo-Buchstabe(n) oder Kürzel
+- Logo letter(s) or abbreviation
-- 4 Stats: themen-relevante Zahlen
+- 4 stats: topic-relevant numbers
-- Block-Auswahl: 6 wichtigste Aspekte für Erstübersicht
+- Block selection: the 6 most important aspects for a first overview
 
-VISUELLE ELEMENTE PFLICHT
+REQUIRED VISUAL ELEMENTS
-- Mindestens 1 Code-Block
+- At least 1 code block
-- Mindestens 1 Kachel-Grid mit Icons (Ökosystem)
+- At least 1 tile grid with icons (ecosystem)
-- Mindestens 1 Plus/Minus-Split (Modern vs Legacy o.ä.)
+- At least 1 plus/minus split (modern vs legacy etc.)
-- Footer als farbige Box (visueller Anker)
+- Footer as a colored box (visual anchor)
-- Stats-Bar im Hero
+- Stats bar in the hero
 
-VERMEIDEN
+AVOID
-- Reine Bullet-Listen in jedem Block
+- Plain bullet lists in every block
-- Mehr als 6 Hauptblöcke (Querformat hat eh schon mehr Platz)
+- More than 6 main blocks (landscape already has more space)
-- Mehr als 3 Schriftgrößen
+- More than 3 font sizes
-- Marketing-Floskeln in Hero
+- Marketing filler in the hero
-- Floats oder absolute positioning (außer für Footer)
+- Floats or absolute positioning (except for the footer)
-- Vertikal sehr lange Blöcke (würden Spalten unbalanciert machen)
+- Vertically very long blocks (would unbalance the columns)
 
-GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
+GENERATION WITH FEEDBACK LOOP (max 3 iterations)
-1. HTML schreiben
+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')"
+3. PDF to 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
+4. View the preview with the Read tool
-5. Prüfen:
+5. Check:
-   - Stats-Bar überlappt nicht mit Titel?
+   - Stats bar does not overlap the title?
-   - 3 Spalten balanciert (ähnliche Höhe)?
+   - 3 columns balanced (similar height)?
-   - Footer nicht abgeschnitten?
+   - Footer not cut off?
-   - Code-Block lesbar?
+   - Code block readable?
-   - Alle Icons rendern?
+   - All icons render?
-6. Bei Problemen: fixen, ab Schritt 2 wiederholen
+6. On problems: fix, repeat from step 2
-7. Nach max 3 Iterationen ausgeben
+7. Output after max 3 iterations
 
 INSTALLATION
 - pip install weasyprint pdf2image
 - apt install poppler-utils
 ```
 
-DARKMODE (PFLICHT)
+DARK MODE (REQUIRED)
-- Alle Farben ausschließlich über :root-Variablen definieren
+- Define all colors exclusively via :root variables
-  (--ink, --muted, --line, --bg-soft, Akzent-Variablen).
+  (--ink, --muted, --line, --bg-soft, accent variables).
-- Zusätzlich einen Dunkelmodus-Block ausliefern:
+- 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>.
+- The app enables it via data-theme="dark" on <html>.
-  KEIN prefers-color-scheme verwenden.
+  Do NOT use prefers-color-scheme.
-- Dunkle Werte: Hintergründe dunkel (#15171c / #23262e), Text hell (#e6e8ee),
+- Dark values: dark backgrounds (#15171c / #23262e), light text (#e6e8ee),
-  Linien gedämpft (#2c3038). Akzentfarben so anheben, dass Überschriften und
+  muted lines (#2c3038). Lift accent colors so headings and links stay
-  Links auf dunklem Grund lesbar bleiben (Kontrast prüfen). Elemente mit hellem
+  readable on a dark background (check contrast). Elements with light text on
-  Text auf Akzent-Hintergrund (z. B. Tabellenköpfe) dürfen ihre helle
+  accent backgrounds (e.g. table headers) may keep their light background
-  Hintergrundfarbe behalten.
+  color.
-- Callout-/Infobox-Hintergründe nicht hartkodieren oder im Dunkelmodus
+- Do not hardcode callout/infobox backgrounds — or darken them explicitly in
-  explizit abdunkeln (z. B. auf var(--bg-soft)); farbige Border bleibt.
+  dark mode (e.g. to var(--bg-soft)); the colored border stays.
-- Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.
+- Only inside @media screen — print/PDF stays light.

templates/Format/Suche.md

@@ -1,43 +1,44 @@
-Du erstellst eine Themen-Taxonomie. Ein Nutzer beschreibt ein Problem oder
+You create a topic taxonomy. A user describes a problem or learning goal.
-Lernziel. Leite daraus 7 THEMEN-NAMEN ab, zu denen jeweils ein vollständiger
+Derive 7 TOPIC NAMES from it, each of which could become a complete learning
-Lern-Guide erstellt werden kann, der das Thema komplett vermittelt, um das
+guide that fully teaches the topic in order to solve the problem.
-Problem zu lösen.
 
-Problem des Nutzers:
+The user's problem:
 {problem}
 
-BEREITS VORHANDENE THEMEN (Referenz – diese NICHT erneut vorschlagen):
+ALREADY EXISTING TOPICS (reference — do NOT propose these again):
 {existing}
 
-GRUNDPRINZIP – MECE (Mutually Exclusive, Collectively Exhaustive):
+CORE PRINCIPLE — MECE (Mutually Exclusive, Collectively Exhaustive):
-Die Themen müssen sich gegenseitig ausschließen (kein Thema ist ein Unterthema
+The topics must be mutually exclusive (no topic is a subtopic of another, no
-eines anderen, keine inhaltliche Überschneidung) und zusammen das Problem
+content overlap) and together cover the problem sensibly. All topics sit on
-sinnvoll abdecken. Alle Themen stehen auf der GLEICHEN Abstraktionsebene –
+the SAME level of abstraction — equal-ranking main topics, never a mix of
-gleichrangige Hauptthemen, niemals eine Mischung aus Ober- und Unterthemen.
+parent and child topics.
 
-Stil der Themen-Namen:
+Style of the topic names:
-- KURZ und prägnant: 1–3 Wörter, wie ein Buchregal-Etikett, KEIN Satz.
+- SHORT and concise: 1–3 words, like a bookshelf label, NOT a sentence.
-- Thema VOLLSTÄNDIG benennen, keine Teilmenge. Jeder Guide deckt sein Thema
+- Name the topic COMPLETELY, not a subset. Each guide covers its topic in
-  komplett ab, daher KEINE Zusätze wie "Grundlagen", "Basics", "Einführung".
+  full, so NO additions like "Grundlagen", "Basics", "Einführung".
-  Richtig: "CSS"  —  Falsch: "CSS Grundlagen".
+  Right: "CSS"  —  Wrong: "CSS Grundlagen".
-- KEIN Doppelpunkt, KEINE Erklärung, KEINE Marketing-Sprache im Titel.
+- NO colon, NO explanation, NO marketing language in the title.
-- Beispiele für guten Stil: "HTML", "CSS", "JavaScript", "Deployment", "Git".
+- Examples of good style: "HTML", "CSS", "JavaScript", "Deployment", "Git".
 
-Inhaltliche Anforderungen:
+Content requirements:
-- Treffe das konkrete Problem, nicht nur das Oberthema.
+- Address the concrete problem, not just the broad subject area.
-- Bei vagem Problem: Themen für die wahrscheinlichsten Interpretationen.
+- For a vague problem: topics for the most likely interpretations.
-- Die Themen müssen NICHT existieren – wähle gut benennbare, präzise Titel.
+- The topics do NOT have to exist already — choose well-nameable,
+  precise titles.
 
-PFLICHT-PRÜFSCHRITT vor der Ausgabe (intern, NICHT mit ausgeben):
+MANDATORY CHECK before output (internal, do NOT include in the output):
-Erstelle zuerst einen Entwurf von 7 Themen. Prüfe dann JEDES Paar (A, B):
+First draft 7 topics. Then check EVERY pair (A, B):
-Könnte Thema A sinnvoll als Kapitel im Guide zu Thema B behandelt werden?
+Could topic A reasonably be covered as a chapter inside the guide for
-Wenn ja, verletzt das die MECE-Regel → ersetze A durch ein gleichrangiges,
+topic B? If yes, that violates the MECE rule → replace A with an
-disjunktes Thema. Wiederhole, bis kein Thema mehr ein Unterthema eines anderen
+equal-ranking, disjoint topic. Repeat until no topic is a subtopic of
-ist. Beispiele für Verstöße: "Responsive Design" gehört in "CSS";
+another. Examples of violations: "Responsive Design" belongs in "CSS";
-"Domain & DNS" gehört in "Deployment". Gib erst danach das finale Set aus.
+"Domain & DNS" belongs in "Deployment". Only then output the final set.
 
-AUSGABE:
+OUTPUT:
-Antworte AUSSCHLIESSLICH mit einem JSON-Array von 7 Elementen. Jedes Element:
+Respond EXCLUSIVELY with a JSON array of 7 elements. Each element:
-- "title": kurzer Themen-Name (max. 30 Zeichen, 1–3 Wörter)
+- "title": short topic name (max. 30 characters, 1–3 words)
-- "reason": ein Satz, wie dieser Guide das Problem konkret löst
+- "reason": one sentence describing how this guide concretely solves the problem
-Kein weiterer Text, nur das JSON-Array.
+Write "title" and "reason" in German.
+No other text, only the JSON array.