update

frontend/src/components/TopicDetail.vue

@@ -18,6 +18,17 @@ marked.use(markedHighlight({
 }))
 marked.setOptions({ breaks: true, gfm: true })
 
+// Rohes HTML im Markdown (z. B. <p>, <img> ohne Backticks aus Agenten-Output)
+// als Text anzeigen statt rendern — sonst verschluckt der Browser den Inhalt.
+marked.use({
+  renderer: {
+    html(token) {
+      const text = typeof token === 'string' ? token : token.text
+      return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    },
+  },
+})
+
 function renderMarkdown(text) {
   return DOMPurify.sanitize(marked.parse(text || ''))
 }
@@ -278,6 +289,8 @@ async function send() {
   max-width: 880px;
   margin: 0 auto;
   padding: 2rem 2.5rem 5rem;
+  /* Lese-Zoom nur für den Inhalt — Sidebar/Chat bleiben unverändert */
+  zoom: 1.33;
 }
 
 @media (max-width: 600px) {
@@ -331,10 +344,12 @@ async function send() {
   }
 }
 
-/* OnePager: festes 3×3-Raster über volle Breite und Höhe */
+/* OnePager: festes 3×3-Raster über volle Breite und Höhe.
+   Kein Lese-Zoom (bricht 100%-Höhen) — stattdessen sind die Schriften unten 1.33× skaliert. */
 .guide-content.onepager {
   max-width: none;
   height: 100%;
+  zoom: 1;
   padding: 0.9rem 1rem;
   display: flex;
   flex-direction: column;
@@ -370,12 +385,12 @@ async function send() {
   overflow-y: auto;
 
   h3 {
-    font-size: 0.88rem;
+    font-size: 1.17rem;
     margin-bottom: 0.3rem;
   }
 
   .section-body {
-    font-size: 0.82rem;
+    font-size: 1.09rem;
   }
 }
 

templates/Prompt/OnePager-Bauen.md

@@ -12,7 +12,14 @@ Erstelle GENAU diese 7 Karten (JSON-Schlüssel exakt so):
 - "modern" — Titel: "Moderne Features". Was aktuell ist und heute verwendet wird.
 - "veraltet" — Titel: "Veraltete Features". Was es noch gibt, aber nicht mehr verwendet werden sollte. Gibt es nichts Veraltetes: ehrlich "Keine." mit einem Satz Begründung — nichts erfinden.
 
-Inhalt pro Karte kompakt (Markdown erlaubt), auf DEUTSCH, alles aus der Faktenbasis belegbar.
+KOMPAKTHEIT — der OnePager muss OHNE Scrollen auf eine Bildschirmseite passen:
+- Maximal 5 Stichpunkte pro Karte, je maximal ~8 Wörter (Schlagwort + halber Satz).
+- Nur das Wichtigste — nicht alle Varianten aufzählen. Weglassen schlägt Vollständigkeit.
+- Keine Tabellen, keine verschachtelten Listen, keine Einleitungssätze.
+- Codebeispiel maximal ~12 kurze Zeilen.
+
+Inhalt auf DEUTSCH, alles aus der Faktenbasis belegbar.
+Code-Bezeichner und HTML-Tags im Text IMMER in Backticks (`<p>`, `src`) — nie roh.
 
 Schreibe NUR die JSON-Datei nach: {out_path}
 

templates/Prompt/OnePager-Verifikation.md

@@ -9,7 +9,8 @@ ONEPAGER-KARTEN:
 Prüfe:
 1. Sind alle 7 Karten vollständig ausgefüllt (keine abgebrochenen oder leeren Inhalte, keine Platzhalter)?
 2. Stimmen alle Aussagen mit der Faktenbasis überein? Nichts Erfundenes?
-3. Ist jede Karte kompakt und für sich verständlich? Ist das Beispiel ein lauffähig plausibler Codeblock?
+3. Ist jede Karte KOMPAKT — maximal 5 kurze Stichpunkte (je ~8 Wörter), keine Tabellen, Beispiel maximal ~12 Zeilen? Zu lange Karten sind ein Problem.
+4. Ist jede Karte für sich verständlich? Ist das Beispiel ein lauffähig plausibler Codeblock?
 
 Du PRÜFST nur und notierst Probleme — du änderst nichts. Nenne die betroffene Karte über ihren Schlüssel (info, eigenschaften, beispiel, zusammenhaenge, voraussetzungen, modern, veraltet).