update

frontend/src/components/Guide.vue

@@ -41,7 +41,7 @@ const sichtbar = (i) => Math.abs(i - aktiv.value) <= 1
 
 function hoehe(i) {
   const st = stats.value.je[i]
-  const sections = daten.value?.kapitel?.[i]?.sections?.length || 1
+  const sections = anzeige.value[i]?.sections?.length || 1
   return Math.round((st?.woerter || 200) / 11 * 28 + sections * 180)
 }
 
@@ -56,10 +56,24 @@ function levelToggle() {
   laden()
 }
 
+// Nur Kapitel/Bausteine mit Inhalt im gewählten Umfang anzeigen — der
+// Level-Filter ließe sonst leere Titel-Hüllen stehen (36/66 Bausteine ohne E)
+const anzeige = computed(() => {
+  const out = []
+  for (const kap of daten.value?.kapitel || []) {
+    const sections = kap.sections.filter((s) => ansicht.value === 'kompakt'
+      ? (s.kompakt || s.lang || '').trim()
+      : lesestat(gefiltert(s.lang, level.value)).woerter >= 10)
+    if (sections.length) out.push({ ...kap, sections })
+  }
+  return out
+})
+watch([level, ansicht, daten], () => { kapEls.length = 0; aktiv.value = 0 })
+
 // Lesezeit des SICHTBAREN Umfangs: 150 Wörter/min (technischer Text)
 // + 5 s je Display-Formel (Medium ~265 wpm gilt nicht für Mathe)
 const stats = computed(() => {
-  const je = (daten.value?.kapitel || []).map((kap) => {
+  const je = anzeige.value.map((kap) => {
     let woerter = ansicht.value === 'kompakt' ? 0 : lesestat(kap.intro).woerter
     let formeln = 0
     for (const s of kap.sections) {
@@ -102,7 +116,7 @@ function onScroll(e) {
 
 <template>
   <div class="guide-layout" :class="{ fokus }">
-    <nav v-if="daten?.kapitel?.length" class="guide-nav">
+    <nav v-if="anzeige.length" class="guide-nav">
       <div class="schalter-zeile">
         <div class="schalter">
           <button :class="{ aktiv: ansicht === 'erklaerend' }" title="ausführlich (viel Text)"
@@ -126,10 +140,10 @@ function onScroll(e) {
                 @click="fokus = true">⛶</button>
       </div>
       <div class="fortschritt">
-        <div>Kapitel {{ aktiv + 1 }} / {{ daten.kapitel.length }}</div>
+        <div>Kapitel {{ aktiv + 1 }} / {{ anzeige.length }}</div>
         <div>{{ stats.woerter.toLocaleString('de-DE') }} Wörter · {{ zeit(stats.minuten) }}</div>
       </div>
-      <a v-for="(kap, i) in daten.kapitel" :key="i" :class="{ aktiv: i === aktiv }"
+      <a v-for="(kap, i) in anzeige" :key="kap.kapitel_id" :class="{ aktiv: i === aktiv }"
          @click="springe(i)">
         <span>{{ i + 1 }}. {{ kap.titel }}</span>
         <span class="zeit">{{ zeit(stats.je[i]?.minuten || 0) }}</span>
@@ -139,7 +153,7 @@ function onScroll(e) {
       <button v-if="fokus" class="fokus-aus" title="Fokus beenden"
               @click="fokus = false">✕</button>
       <template v-if="daten">
-        <div v-for="(kap, i) in daten.kapitel" :key="i" class="kapitel"
+        <div v-for="(kap, i) in anzeige" :key="kap.kapitel_id" class="kapitel"
              :ref="(el) => setKapEl(i, el)">
           <h2 class="kapitel-titel">{{ i + 1 }}. {{ kap.titel }}</h2>
           <template v-if="sichtbar(i)">
@@ -152,7 +166,7 @@ function onScroll(e) {
           </template>
           <div v-else class="kapitel-platzhalter" :style="{ height: hoehe(i) + 'px' }"></div>
         </div>
-        <div v-if="!daten.kapitel.length" class="guide-section">Noch kein Guide generiert.</div>
+        <div v-if="!anzeige.length" class="guide-section">Noch kein Guide generiert.</div>
       </template>
     </div>
   </div>