update

frontend/src/App.vue

@@ -275,10 +275,6 @@ function setAnsicht(modus) {
   if (selectedTopic.value) localStorage.setItem('ansicht_' + selectedTopic.value, modus)
 }
 
-function toggleAnsicht() {
-  setAnsicht(ansichtModus.value === 'kompakt' ? 'erklärend' : 'kompakt')
-}
-
 function handleOpenBausteineView() {
   if (!selectedTopic.value) return
   bausteineView.value = true
@@ -398,7 +394,7 @@ onMounted(async () => {
       :ansichtModus="ansichtModus"
       @setProvider="setProvider"
       @toggleDark="toggleDark"
-      @toggleAnsicht="toggleAnsicht"
+      @setAnsicht="setAnsicht"
       @select="selectTopic"
       @create="createTopic"
       @createThema="handleCreateThema"

frontend/src/components/TopicSidebar.vue

@@ -24,7 +24,7 @@ const props = defineProps({
   ansichtModus: { type: String, default: 'kompakt' }, // kompakt | erklärend
 })
 
-const emit = defineEmits(['select', 'create', 'createThema', 'updateQuelle', 'formatClick', 'bausteineClick', 'cancelBausteine', 'resetBausteine', 'deleteTopic', 'cancelGuide', 'deleteGuide', 'dismissError', 'dismissUiError', 'preview', 'openBausteineView', 'openElements', 'togglePin', 'sidebarLeave', 'toggleDark', 'toggleAnsicht', 'setProvider'])
+const emit = defineEmits(['select', 'create', 'createThema', 'updateQuelle', 'formatClick', 'bausteineClick', 'cancelBausteine', 'resetBausteine', 'deleteTopic', 'cancelGuide', 'deleteGuide', 'dismissError', 'dismissUiError', 'preview', 'openBausteineView', 'openElements', 'togglePin', 'sidebarLeave', 'toggleDark', 'setAnsicht', 'setProvider'])
 
 // Accordion: höchstens ein Panel offen. IDs: 'bausteine', 'fmt-<Format>', 'topic-<Name>'.
 const openPanel = ref(null)
@@ -222,7 +222,7 @@ function confirmDeleteTopic(topic) {
   armOrRun('topic-' + topic, () => emit('deleteTopic', topic))
 }
 
-// --- Thema-Edit: Klick auf ein Thema wählt es UND klappt die Quellen-Form auf ---
+// --- Thema-Edit: Name-Klick wählt nur; das Chevron klappt die Quellen-Form auf/zu (Default zu) ---
 const editTopic = ref(null)
 const editForm = ref({ type: 'thema', ort: '', spec: '' })
 const editLoading = ref(false)
@@ -231,7 +231,7 @@ const canSave = computed(() => {
   return true
 })
 
-async function onTopicClick(t) {
+async function toggleTopicPanel(t) {
   emit('select', t)
   if (openPanel.value === 'topic-' + t) { openPanel.value = null; return }
   openPanel.value = 'topic-' + t
@@ -283,13 +283,22 @@ function saveQuelle() {
         :title="dark ? 'Hellmodus' : 'Dunkelmodus'"
         @click="emit('toggleDark')"
       >{{ dark ? '☀' : '🌙' }}</button>
-      <button
+      <div v-if="selectedTopic" class="ansicht-toggle">
-        v-if="selectedTopic"
+        <button :class="{ active: ansichtModus === 'kompakt' }" title="Kurzer Text" @click="emit('setAnsicht', 'kompakt')">
-        class="theme-btn ansicht-btn"
+          <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
-        :class="{ erkl: ansichtModus === 'erklärend' }"
+            <rect x="2" y="5" width="12" height="1.6" rx="0.8" />
-        :title="ansichtModus === 'kompakt' ? 'Ansicht: kompakt — klicken für erklärend' : 'Ansicht: erklärend — klicken für kompakt'"
+            <rect x="2" y="9" width="7" height="1.6" rx="0.8" />
-        @click="emit('toggleAnsicht')"
+          </svg>
-      >{{ ansichtModus === 'kompakt' ? 'K' : 'E' }}</button>
+        </button>
+        <button :class="{ active: ansichtModus === 'erklärend' }" title="Langer Text" @click="emit('setAnsicht', 'erklärend')">
+          <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
+            <rect x="2" y="3" width="12" height="1.4" rx="0.7" />
+            <rect x="2" y="6.3" width="12" height="1.4" rx="0.7" />
+            <rect x="2" y="9.6" width="12" height="1.4" rx="0.7" />
+            <rect x="2" y="12.9" width="8" height="1.4" rx="0.7" />
+          </svg>
+        </button>
+      </div>
       <button class="new-topic-toggle" :class="{ active: dlg }" title="Thema erstellen" @click="toggleErstellen">+</button>
     </div>
 
@@ -446,9 +455,9 @@ function saveQuelle() {
         :key="t"
         :class="{ active: t === selectedTopic, 'li-open': isOpen('topic-' + t) }"
       >
-        <div class="topic-row" @click="onTopicClick(t)">
+        <div class="topic-row">
-          <span class="topic-name">{{ t }}</span>
+          <span class="topic-name" @click="emit('select', t)">{{ t }}</span>
-          <span class="panel-toggle" :class="{ open: isOpen('topic-' + t) }">▾</span>
+          <button class="panel-toggle" :class="{ open: isOpen('topic-' + t) }" title="Optionen" @click.stop="toggleTopicPanel(t)">▾</button>
         </div>
         <div v-if="isOpen('topic-' + t)" class="thema-panel edit-panel" @click.stop>
           <p v-if="editLoading" class="dlg-hint">Lade…</p>
@@ -563,8 +572,21 @@ function saveQuelle() {
   border-color: var(--accent-border);
 }
 
-.new-topic .ansicht-btn { font-weight: 700; }
+/* Ansicht-Umschalter: zwei Icon-Buttons (kurzer / langer Text) */
-.new-topic .ansicht-btn.erkl { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
+.ansicht-toggle { display: inline-flex; }
+.new-topic .ansicht-toggle button {
+  padding: 4px 7px;
+  background: var(--bg);
+  color: var(--text-muted);
+  border: 1px solid var(--border-strong);
+  display: inline-flex;
+  align-items: center;
+}
+.new-topic .ansicht-toggle button:first-child { border-radius: 6px 0 0 6px; }
+.new-topic .ansicht-toggle button:last-child { border-radius: 0 6px 6px 0; border-left: none; }
+.new-topic .ansicht-toggle button:hover { color: var(--accent-hover); }
+.new-topic .ansicht-toggle button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+.ansicht-toggle svg { fill: currentColor; display: block; }
 
 .stats-bar {
   display: flex;
@@ -574,12 +596,12 @@ function saveQuelle() {
 }
 
 .stat {
+  position: relative;
   flex: 1;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 1px;
+  justify-content: center;
-  padding: 4px 2px;
+  padding: 7px 2px 4px;
   background: var(--panel-soft);
   border: 1px solid var(--border);
   border-radius: 6px;
@@ -592,11 +614,18 @@ function saveQuelle() {
   color: var(--text);
 }
 
+/* Mini-Titel sitzt auf der oberen Kante des Badges (Legenden-Look) */
 .stat-label {
-  font-size: 0.58rem;
+  position: absolute;
+  top: -0.42rem;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0 3px;
+  font-size: 0.5rem;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   color: var(--text-faint);
+  background: var(--panel);
   white-space: nowrap;
 }
 
@@ -688,13 +717,13 @@ function saveQuelle() {
 
 .step-dots {
   display: inline-flex;
-  gap: 5px;
+  gap: 4px;
   flex: 1;
 }
 
 .step-dot {
-  width: 10px;
+  width: 7px;
-  height: 10px;
+  height: 7px;
   border-radius: 50%;
   background: var(--border-strong);
   flex-shrink: 0;
@@ -991,8 +1020,8 @@ function saveQuelle() {
 
 /* Erstellen — inline aufklappbar (kein Modal) */
 .new-topic-toggle {
-  flex: 1;
+  margin-left: auto;       /* rechtsbündig statt volle Breite */
-  padding: 6px 8px;
+  padding: 6px 12px;
   border: 1px solid transparent;
   border-radius: 6px;
   background: var(--accent);
@@ -1053,8 +1082,15 @@ function saveQuelle() {
 .dlg-create { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
 .dlg-create:disabled { opacity: 0.45; cursor: default; }
 
-/* Thema-Edit-Panel innerhalb der Themen-Liste */
+/* Thema-Edit-Panel: dezent in die Liste eingefügt — keine Box, nur ein linker Akzent */
-.edit-panel { margin: 0 0.75rem 0.5rem; }
+.edit-panel {
+  margin: 0;
+  padding: 0.5rem 1rem 0.7rem 1.25rem;
+  background: var(--accent-soft);
+  border: none;
+  border-left: 3px solid var(--accent-border);
+  border-radius: 0;
+}
 .dlg-delete { margin-right: auto; color: var(--danger); }
 .dlg-delete.armed { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 700; }
 select.dlg-input { cursor: pointer; }