update

frontend/src/components/BausteinFokus.vue

@@ -10,6 +10,7 @@ const props = defineProps({
   tier2: { type: Boolean, default: false },
   tier3: { type: Boolean, default: false },
   tab: { type: String, default: 'pruefung' },
+  ansicht: { type: String, default: 'kompakt' }, // kompakt | erklärend — linke Guide-Spalte
   hasPrev: { type: Boolean, default: false },
   hasNext: { type: Boolean, default: false },
   fortschritt: { type: Object, default: () => ({ total: 0, absolviert: 0, verstanden: 0, gemeistert: 0 }) },
@@ -17,7 +18,7 @@ const props = defineProps({
 
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-const emit = defineEmits(['close', 'prev', 'next', 'statusChanged'])
+const emit = defineEmits(['close', 'prev', 'next', 'statusChanged', 'setAnsicht'])
 
 const guideEl = ref(null)  // linke Guide-Spalte (Scroll-Ziel für ALT+↑/↓)
 const rightEl = ref(null)  // rechte Spalte (Prüfungs-Panel mit Eingabefeld)
@@ -88,7 +89,7 @@ const standFarbe = computed(() => {
     </div>
     <div class="fokus-body">
       <div ref="guideEl" class="fokus-col left">
-        <div class="markdown" v-html="renderMarkdown(baustein.md)"></div>
+        <div class="markdown" v-html="renderMarkdown(ansicht === 'kompakt' ? (baustein.kompakt || baustein.md) : baustein.md)"></div>
       </div>
       <div ref="rightEl" class="fokus-col right">
         <BausteinPanel
@@ -98,10 +99,13 @@ const standFarbe = computed(() => {
           :topic="topic"
           :baustein="baustein.title"
           :section="baustein.md"
+          :section-kompakt="baustein.kompakt || ''"
           :provider="provider"
           :status="status"
           :tier2="tier2"
           :tier3="tier3"
+          :ansicht="ansicht"
+          @set-ansicht="$emit('setAnsicht', $event)"
           @status-changed="$emit('statusChanged', $event)"
         />
       </div>