update

frontend/src/assets/markdown.css

@@ -95,7 +95,8 @@
 .sub-stufe {
   position: relative;
   border-left: 3px solid color-mix(in srgb, var(--stufe-farbe) 55%, transparent);
-  padding-left: 0.75rem;
+  background: color-mix(in srgb, var(--stufe-farbe) 8%, transparent);
+  padding: 0.15rem 0.5rem 0.15rem 0.75rem;
   margin: 0.5rem 0;
   border-radius: 2px;
 }
@@ -116,7 +117,8 @@
 .sub-neu {
   position: relative;
   border-left: 3px solid var(--neu-farbe);
-  padding-left: 0.75rem;
+  background: color-mix(in srgb, var(--neu-farbe) 12%, transparent);
+  padding: 0.15rem 0.5rem 0.15rem 0.75rem;
   margin: 0.5rem 0;
   border-radius: 2px;
 }

frontend/src/components/BlockFocus.vue

@@ -18,6 +18,7 @@ const props = defineProps({
   hasPrev: { type: Boolean, default: false },
   hasNext: { type: Boolean, default: false },
   fortschritt: { type: Object, default: () => ({ total: 0, beginner: 0, advanced: 0, expert: 0, master: 0 }) },
+  stufe: { type: Number, default: 4 },  // höchste sichtbare Stufe (1=A … 4=V) — wie die Standardansicht
 })
 
 import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
@@ -111,8 +112,10 @@ const segments = computed(() => {
   const anchor = compact ? (props.block.anker_compact || '') : (props.block.anchor || '')
   if (anchor.trim()) out.push(seg('', anchor))
   for (const sub of subs) {
+    const rank = SUB_RANK[sub.level] || 1
+    if (rank > props.stufe) continue          // Stufen-Filter (wie die Standardansicht)
     const body = compact ? (sub.compact || sub.md) : (sub.md || sub.compact)
-    if (body && body.trim()) out.push(seg(sub.level, body))
+    if (body && body.trim()) out.push(seg(sub.level, body))  // jede Stufe A/F/E/V markiert (Filter bleibt)
   }
   return out
 })

frontend/src/components/TopicDetail.vue

@@ -2,7 +2,7 @@
 import { computed, reactive, ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { fetchGuideContent, chatGuide, fetchBlockLearnState } from '../api.js'
 import { renderMarkdown } from '../markdown.js'
-import { stufeFuer, schwelle, SUB_RANK, VIEW_KURZ, VIEW_FARBE, viewLevelFuer } from '../levels.js'
+import { stufeFuer, schwelle, SUB_RANK, VIEW_KURZ, VIEW_FARBE } from '../levels.js'
 import { useChat } from '../composables/useChat.js'
 import BlockPanel from './BlockPanel.vue'
 import BlockFocus from './BlockFocus.vue'
@@ -36,8 +36,9 @@ let mdObserver = null
 // Auto: Ansichtsstufe des Blocks folgt dem Prüfungs-Score (Erreicht + 1); Override = global fest.
 function viewLevelFor(title) {
   if (props.stufeAnsicht !== 'auto') return Number(props.stufeAnsicht)
-  const l = learnstate.value[title]
+  // Auto = real freigeschaltete Stufe je Baustein (Backend `freie_level` aus dem Prüf-Score):
-  return viewLevelFuer(l?.good_answers || 0, l?.cap || 10)
+  // Stufe A initial, die nächste Stufe erst, wenn die Prüf-Grenze erreicht ist.
+  return learnstate.value[title]?.freie_level || 1
 }
 
 function htmlFor(s) {
@@ -55,13 +56,12 @@ function htmlFor(s) {
       const rank = SUB_RANK[sub.level] || 1
       if (rank > lvl) continue
       const body = renderMarkdown(compact ? (sub.compact || sub.md) : (sub.md || sub.compact))
-      if (props.stufeAnsicht === 'auto' && lvl > 1 && rank === lvl) {
+      if (props.stufeAnsicht === 'auto' && rank > 1 && rank === lvl) {
+        // gerade neu freigeschaltete Stufe: kräftiger hervorheben
         parts.push(`<div class="sub-neu" style="--neu-farbe:${VIEW_FARBE[rank]}"><span class="sub-neu-badge" title="Neu ab Stufe ${VIEW_KURZ[rank]}">${VIEW_KURZ[rank]}</span>${body}</div>`)
-      } else if (Number(props.stufeAnsicht) === 4) {
-        // Vollansicht: jede Stufe dezent kennzeichnen (Rand + Badge in Stufen-Farbe)
-        parts.push(`<div class="sub-stufe" style="--stufe-farbe:${VIEW_FARBE[rank]}"><span class="sub-stufe-badge" title="Stufe ${VIEW_KURZ[rank]}">${VIEW_KURZ[rank]}</span>${body}</div>`)
       } else {
-        parts.push(body)
+        // jede Stufe A/F/E/V leicht in ihrer Farbe kennzeichnen (Rand + Färbung + Badge)
+        parts.push(`<div class="sub-stufe" style="--stufe-farbe:${VIEW_FARBE[rank]}"><span class="sub-stufe-badge" title="Stufe ${VIEW_KURZ[rank]}">${VIEW_KURZ[rank]}</span>${body}</div>`)
       }
     }
     h = parts.join('')
@@ -335,6 +335,7 @@ function extractContext() {
       :fortschritt="progress"
       :status="learnstate[focusBlock.title]"
       :cap="capOf(focusBlock.title)"
+      :stufe="viewLevelFor(focusBlock.title)"
       :tab="focusTab"
       :ansicht="ansichtModus"
       :has-prev="focusIndex > 0"

frontend/src/levels.js

@@ -35,11 +35,3 @@ export const VIEW_FARBE = {
   1: 'var(--level-beginner)', 2: 'var(--level-advanced)',
   3: 'var(--level-expert)', 4: 'var(--level-master)',
 }
-
-// Auto view level per block: reached learning level + 1 (nothing reached → A).
-// beginner → F unlocked, advanced → E, expert/master → V.
-export function viewLevelFuer(score, cap) {
-  const s = stufeFuer(score, cap)
-  if (!s) return 1
-  return Math.min(4, LEVELS.findIndex((l) => l.key === s.key) + 2)
-}