From 40d109f6b7c5b2f1591792ca0c0aba451431c68e Mon Sep 17 00:00:00 2001
From: Team3 <team3@mitho-media.de>
Date: Sun, 7 Jun 2026 09:13:27 +0200
Subject: [PATCH] update

---
 frontend/src/components/TopicDetail.vue   | 21 ++++++++++++++++++---
 templates/Prompt/OnePager-Bauen.md        |  9 ++++++++-
 templates/Prompt/OnePager-Verifikation.md |  3 ++-
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/TopicDetail.vue b/frontend/src/components/TopicDetail.vue
index 8ab0a44..789939f 100644
--- a/frontend/src/components/TopicDetail.vue
+++ b/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;
   }
 }
 
diff --git a/templates/Prompt/OnePager-Bauen.md b/templates/Prompt/OnePager-Bauen.md
index f971b55..1832131 100644
--- a/templates/Prompt/OnePager-Bauen.md
+++ b/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}
 
diff --git a/templates/Prompt/OnePager-Verifikation.md b/templates/Prompt/OnePager-Verifikation.md
index d2be111..f68dc90 100644
--- a/templates/Prompt/OnePager-Verifikation.md
+++ b/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).