update

frontend/src/components/BausteineUebersicht.vue

@@ -11,12 +11,14 @@ const items = ref([])
 const loading = ref(true)
 const error = ref(null)
 
-// Stufen-Reihenfolge + Anzeige-Label (Farbe via CSS-Klasse st-<key>)
+// Lernpfad-Stufen: Reihenfolge + Label (Farbe via CSS-Klasse st-<key>).
 const STUFEN = [
-  { key: 'einfach', label: 'Einfach' },
-  { key: 'mittel', label: 'Mittel' },
-  { key: 'schwer', label: 'Schwer' },
+  { key: 'anfaenger', label: 'Anfänger' },
+  { key: 'fortgeschritten', label: 'Fortgeschritten' },
+  { key: 'experte', label: 'Experte' },
 ]
+// Alt-Themen tragen noch einfach/mittel/schwer → auf die neuen Keys mappen.
+const ALT_STUFE = { einfach: 'anfaenger', mittel: 'fortgeschritten', schwer: 'experte' }
 
 watch(() => props.topic, load, { immediate: true })
 
@@ -43,7 +45,7 @@ function relevant(b) {
 // Nur nicht-leere Stufen-Gruppen je Baustein (v-if + v-for nicht auf einem Element)
 function gruppen(b) {
   return STUFEN
-    .map((st) => ({ ...st, subs: (b.subbausteine || []).filter((s) => s.stufe === st.key) }))
+    .map((st) => ({ ...st, subs: (b.subbausteine || []).filter((s) => (ALT_STUFE[s.stufe] || s.stufe) === st.key) }))
     .filter((g) => g.subs.length)
 }
 
@@ -185,9 +187,9 @@ const subTotal = computed(() => items.value.reduce((n, b) => n + (b.subbausteine
   border-left: 3px solid var(--st);
   padding-left: 0.6rem;
 }
-.bk-stufe.st-einfach { --st: var(--success-border); }
-.bk-stufe.st-mittel { --st: var(--warning-border); }
-.bk-stufe.st-schwer { --st: var(--danger); }
+.bk-stufe.st-anfaenger { --st: var(--stufe-anfaenger); }
+.bk-stufe.st-fortgeschritten { --st: var(--stufe-fortgeschritten); }
+.bk-stufe.st-experte { --st: var(--stufe-experte); }
 
 .bk-stufe-label {
   font-size: 0.66rem;