update

frontend/src/components/TopicDetail.vue

@@ -200,7 +200,12 @@ async function send() {
         >
           <h2 class="chapter-title">{{ ch.title }}</h2>
           <div class="sections">
-            <article v-for="s in ch.sections" :key="s.num" class="section-card">
+            <article
+              v-for="s in ch.sections"
+              :key="s.num"
+              class="section-card"
+              :style="isOnePager && s.key ? { gridArea: s.key } : null"
+            >
               <h3>{{ s.title }}</h3>
               <div class="section-body markdown" v-html="renderMarkdown(s.md)"></div>
             </article>
@@ -326,16 +331,43 @@ async function send() {
   }
 }
 
-/* OnePager: dichtes Karten-Grid */
+/* OnePager: festes 3×3-Raster über volle Breite und Höhe */
+.guide-content.onepager {
+  max-width: none;
+  height: 100%;
+  padding: 0.9rem 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.guide-content.onepager .guide-head,
+.guide-content.onepager .chapter-title {
+  display: none; /* Thema steht in der Info-Karte — Platz fürs Raster */
+}
+
+.guide-content.onepager .chapter {
+  flex: 1;
+  min-height: 0;
+  margin-bottom: 0;
+}
+
 .guide-content.onepager .sections {
+  height: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  grid-template-areas:
+    "info beispiel voraussetzungen"
+    "eigenschaften beispiel modern"
+    "eigenschaften zusammenhaenge veraltet";
   gap: 0.6rem;
 }
 
 .guide-content.onepager .section-card {
   margin-bottom: 0;
   padding: 0.7rem 0.9rem;
+  min-height: 0;
+  overflow-y: auto;
 
   h3 {
     font-size: 0.88rem;
@@ -347,6 +379,23 @@ async function send() {
   }
 }
 
+/* Mobil: eine Spalte in Quellreihenfolge (info → … → veraltet) */
+@media (max-width: 900px) {
+  .guide-content.onepager {
+    height: auto;
+  }
+
+  .guide-content.onepager .sections {
+    height: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .guide-content.onepager .section-card {
+    overflow-y: visible;
+  }
+}
+
 .ch-toggle {
   display: block;
   width: 100%;
@@ -451,9 +500,23 @@ async function send() {
   padding: 2px 6px;
 }
 
+/* Lesbarkeit: ~17px Fließtext, Zeilenhöhe 1.6, Textspalte max. ~70 Zeichen —
+   Code-Blöcke dürfen die volle Kartenbreite nutzen */
 .section-body {
-  font-size: 0.92rem;
-  line-height: 1.55;
+  font-size: 1.0625rem;
+  line-height: 1.6;
+}
+
+.section-card .markdown :deep(p),
+.section-card .markdown :deep(ul),
+.section-card .markdown :deep(ol) {
+  max-width: 70ch;
+}
+
+.onepager .section-card .markdown :deep(p),
+.onepager .section-card .markdown :deep(ul),
+.onepager .section-card .markdown :deep(ol) {
+  max-width: none; /* OnePager-Zellen sind selbst schmal genug */
 }
 
 /* --- Chat --- */