update

frontend/src/components/BausteinPanel.vue

@@ -290,6 +290,15 @@ function antwortAbgeben() {
   pruefSenden(antwortPayload(), bewerten)
 }
 
+// Lief schon eine Diskussion? Dann darf der Verlauf direkt bewertet werden.
+const hatDiskussion = computed(() => pruefMessages.value.some((m) => m.kind === 'nachfrage' || m.kind === 'diskussion'))
+
+// „Verlauf bewerten": den bisherigen Dialog als Antwort werten (Feld wird ignoriert).
+function verlaufBewerten() {
+  if (pruefLoading.value) return
+  pruefSenden(antwortPayload(), bewerten)
+}
+
 // „Gründlich prüfen": dieselbe Antwort, aber vom starken Modell (role guide) verbindlich neu bewerten.
 function gruendlichPruefen() {
   if (pruefLoading.value) return
@@ -431,6 +440,7 @@ function onPruefKey(e) {
             <button v-if="pruefLoading" class="bp-action cancel" @click="pruefAbbrechen">Abbrechen</button>
             <template v-else-if="pruefPhase === 'frage_offen'">
               <button class="bp-action" :disabled="!pruefInput.trim()" @click="nachfragen">Nachfragen</button>
+              <button v-if="hatDiskussion" class="bp-action" @click="verlaufBewerten">Verlauf bewerten</button>
               <button class="bp-action primary" :disabled="!pruefInput.trim()" @click="antwortAbgeben">Antwort abgeben</button>
             </template>
             <template v-else>

frontend/src/components/TopicDetail.vue

@@ -246,6 +246,9 @@ function extractContext() {
   /* Kein horizontales Pannen der ganzen Seite — Code-Blöcke scrollen intern */
   overflow-x: hidden;
   background: var(--bg-preview);
+  /* Container-Query-Bezug fürs Baustein-Panel: misst die echte Inhaltsbreite
+     (ElementsSidebar schmälert sie, ohne dass die Fensterbreite sinkt). */
+  container-type: inline-size;
 }
 
 .guide-content {
@@ -384,6 +387,32 @@ function extractContext() {
   }
 }
 
+/* Desktop: geöffnetes Baustein-Panel rechts neben dem Guide-Text statt darunter.
+   Greift nur, wenn ein Tab offen ist (.bp-panel existiert dann via v-if).
+   Tab-Buttons bleiben unten links, Panel rechts mit eigener Höhe + Scroll. */
+@container (min-width: 1024px) {
+  .guide-content:not(.onepager) .section-card:has(.bp-panel) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-rows: auto auto auto; /* h3 / body / toggles */
+    column-gap: 1.25rem;
+    align-items: start;
+  }
+  .guide-content:not(.onepager) .section-card:has(.bp-panel) > h3 { grid-column: 1; grid-row: 1; }
+  .guide-content:not(.onepager) .section-card:has(.bp-panel) > .section-body { grid-column: 1; grid-row: 2; }
+  .guide-content:not(.onepager) .section-card:has(.bp-panel) :deep(.bp) { display: contents; }
+  .guide-content:not(.onepager) .section-card:has(.bp-panel) :deep(.bp-toggles) { grid-column: 1; grid-row: 3; }
+  .guide-content:not(.onepager) .section-card:has(.bp-panel) :deep(.bp-panel) {
+    grid-column: 2;
+    grid-row: 1 / 4;
+    margin-top: 0;
+    align-self: stretch;
+    min-height: 14rem;
+    max-height: calc(100dvh - 8rem);
+    overflow-y: auto;
+  }
+}
+
 /* OnePager: festes 3×3-Raster über volle Breite und Höhe.
    Kein Lese-Zoom (bricht 100%-Höhen) — stattdessen sind die Schriften unten 1.2× skaliert. */
 .guide-content.onepager {