update

frontend/src/components/TopicSidebar.vue

@@ -6,9 +6,10 @@ const props = defineProps({
   selectedTopic: { type: String, default: null },
   guidesByFormat: { type: Object, default: () => ({}) },
   allGuides: { type: Array, default: () => [] },
+  bausteineActive: { type: Boolean, default: false },
 })
 
-const emit = defineEmits(['select', 'create', 'formatClick', 'deleteTopic', 'cancelGuide', 'deleteGuide', 'preview', 'rework'])
+const emit = defineEmits(['select', 'create', 'formatClick', 'deleteTopic', 'cancelGuide', 'deleteGuide', 'preview', 'rework', 'showBausteine'])
 
 const formats = [
   { key: 'OnePager', label: 'OnePager' },
@@ -155,6 +156,13 @@ function submit() {
           />
         </div>
       </div>
+      <div class="bausteine-btn-wrapper">
+        <button
+          class="bausteine-btn"
+          :class="{ active: bausteineActive }"
+          @click="emit('showBausteine')"
+        >Bausteine</button>
+      </div>
     </div>
   </aside>
 </template>
@@ -399,4 +407,34 @@ function submit() {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.65; }
 }
+
+.bausteine-btn-wrapper {
+  padding: 0.5rem 0.75rem;
+  border-top: 1px solid #e2e5e9;
+}
+
+.bausteine-btn {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #d8dde3;
+  border-radius: 6px;
+  background: #f8f9fb;
+  color: #4b5563;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.bausteine-btn:hover {
+  background: #ede9fe;
+  border-color: #a5b4fc;
+  color: #4f46e5;
+}
+
+.bausteine-btn.active {
+  background: #6366f1;
+  border-color: #6366f1;
+  color: white;
+}
 </style>