update

frontend/src/components/Guide.vue

@@ -46,14 +46,6 @@ function html(s) {
   return htmlCache.get(key)
 }
 
-// „Prüfe dich"-Antworten ebenfalls cachen — sonst rechnet jeder Scroll-Tick
-// Markdown+KaTeX für alle sichtbaren Antworten neu (genau der Kostenpfad oben).
-function htmlAntwort(s, fi) {
-  const key = `a|${s.baustein}|${fi}`
-  if (!htmlCache.has(key)) htmlCache.set(key, render(s.fragen[fi].antwort))
-  return htmlCache.get(key)
-}
-
 // Mermaid rendert asynchron ins DOM — nach jedem Einblenden (Scroll/Level/Ansicht)
 // die noch nicht verarbeiteten ```mermaid-Blöcke im sichtbaren Bereich rendern.
 async function renderMermaid() {
@@ -124,7 +116,7 @@ watch([level, ansicht, daten], () => {
   nextTick(() => { if (scrollEl.value) scrollEl.value.scrollTop = 0 })
 })
 
-// Lesezeit des SICHTBAREN Umfangs: 150 Wörter/min (technischer Text)
+// Lesezeit des SICHTBAREN Umfangs: 100 Wörter/min (technischer Text)
 // + 5 s je Display-Formel (Medium ~265 wpm gilt nicht für Mathe)
 const stats = computed(() => {
   const je = anzeige.value.map((kap) => {
@@ -135,7 +127,7 @@ const stats = computed(() => {
       woerter += st.woerter
       formeln += st.displayFormeln
     }
-    return { woerter, minuten: woerter / 150 + (formeln * 5) / 60 }
+    return { woerter, minuten: woerter / 100 + (formeln * 5) / 60 }
   })
   return {
     je,
@@ -219,13 +211,6 @@ function onScroll(e) {
             <div v-for="s in kap.sections" :key="s.baustein" class="guide-section">
               <h3 style="margin-top: 0">{{ s.titel }}</h3>
               <div :class="ansicht === 'kompakt' ? 'kompakt' : 'markdown'" v-html="html(s)"></div>
-              <details v-if="ansicht === 'erklaerend' && s.fragen?.length" class="antworten">
-                <summary>Antworten zu „Prüfe dich"</summary>
-                <div v-for="(f, fi) in s.fragen" :key="fi" class="antwort">
-                  <div class="frage">{{ f.frage }}</div>
-                  <div v-html="htmlAntwort(s, fi)"></div>
-                </div>
-              </details>
             </div>
           </template>
           <div v-else class="kapitel-platzhalter" :style="{ height: hoehe(i) + 'px' }"></div>

frontend/src/markdown.js

@@ -64,7 +64,7 @@ const MARKER = /<!--\s*atom:.*?-->/g
 export function lesestat(text) {
   let displayFormeln = 0
   const t = (text || '')
-    .replace(/```mermaid[\s\S]*?```/g, ' ')  // Diagramm-Quelltext zählt nicht als Text
+    .replace(/```[\s\S]*?```/g, ' ')  // Code-/Diagramm-Fences zählen nicht als Text
     .replace(MARKER, ' ')
     .replace(/\$\$[\s\S]+?\$\$/g, () => { displayFormeln += 1; return ' ' })
     .replace(/\\\[[\s\S]+?\\\]/g, () => { displayFormeln += 1; return ' ' })

frontend/src/style.css

@@ -232,8 +232,10 @@ body.nav-zu .hauptbereich { padding-top: 38px; }
 .markdown blockquote p { margin: 4px 0; }
 .markdown :is(code):not(.hljs) { background: var(--karte); padding: 1px 5px; border-radius: 4px; }
 .markdown pre { background: var(--code-bg); padding: 10px; border-radius: 6px; overflow-x: auto; }
-.markdown table { border-collapse: collapse; }
+.markdown table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
 .markdown td, .markdown th { border: 1px solid var(--rand); padding: 4px 10px; }
+.markdown thead th { background: var(--karte); text-align: left; }
+.markdown tbody tr:nth-child(even) { background: color-mix(in srgb, var(--karte) 45%, transparent); }
 
 .flash {
   background: var(--panel); border: 1px solid var(--rand); border-radius: 10px;