From 2c426e6ac41b541d5279e8fe47fcbfa7e9bb5215 Mon Sep 17 00:00:00 2001
From: team3 <team3@mitho-media.de>
Date: Fri, 12 Jun 2026 08:15:31 +0200
Subject: [PATCH] Frontend: ElementsSidebar (1160 Z.) in 5 Komponenten
 gesplittet

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.vue                          |    2 +-
 frontend/src/components/ElementsSidebar.vue   | 1124 -----------------
 .../components/elements/ElementChatTab.vue    |  147 +++
 .../src/components/elements/ElementDetail.vue |  458 +++++++
 .../components/elements/ElementEditTab.vue    |  164 +++
 .../src/components/elements/ElementList.vue   |  198 +++
 .../{ => elements}/ElementSuggestion.vue      |    2 +-
 .../components/elements/ElementsSidebar.vue   |  156 +++
 8 files changed, 1125 insertions(+), 1126 deletions(-)
 delete mode 100644 frontend/src/components/ElementsSidebar.vue
 create mode 100644 frontend/src/components/elements/ElementChatTab.vue
 create mode 100644 frontend/src/components/elements/ElementDetail.vue
 create mode 100644 frontend/src/components/elements/ElementEditTab.vue
 create mode 100644 frontend/src/components/elements/ElementList.vue
 rename frontend/src/components/{ => elements}/ElementSuggestion.vue (98%)
 create mode 100644 frontend/src/components/elements/ElementsSidebar.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ba6ab1e..480e7a2 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -4,7 +4,7 @@ import { fetchGuides, fetchTopics, createTopic as apiCreateTopic, deleteTopic as
 import { usePolling } from './composables/usePolling.js'
 import TopicSidebar from './components/TopicSidebar.vue'
 import TopicDetail from './components/TopicDetail.vue'
-import ElementsSidebar from './components/ElementsSidebar.vue'
+import ElementsSidebar from './components/elements/ElementsSidebar.vue'
 import ElementsOverview from './components/ElementsOverview.vue'
 
 const guides = ref([])
diff --git a/frontend/src/components/ElementsSidebar.vue b/frontend/src/components/ElementsSidebar.vue
deleted file mode 100644
index 399bb03..0000000
--- a/frontend/src/components/ElementsSidebar.vue
+++ /dev/null
@@ -1,1124 +0,0 @@
-<script setup>
-import { ref, computed, watch, nextTick } from 'vue'
-import { fetchElements, createElement, chatElement, deleteElement, updateElement, checkElement, styleElement, refineSuggestion } from '../api.js'
-import { renderMarkdown } from '../markdown.js'
-import ElementSuggestion from './ElementSuggestion.vue'
-
-const props = defineProps({
-  topic: { type: String, required: true },
-  provider: { type: String, default: 'claude' },
-  openId: { type: String, default: null },   // Element-ID, die geöffnet werden soll
-  openTick: { type: Number, default: 0 },    // Erhöhung = openId (erneut) öffnen
-})
-
-const emit = defineEmits(['close', 'changed'])
-
-const elements = ref([])
-const query = ref('')
-const creating = ref(false)
-const selected = ref(null)
-const tab = ref('overview')          // 'overview' | 'chat' | 'edit'
-const edit = ref({ title: '', description: '', examples: [], hints: [] })
-const savingEdit = ref(false)
-
-watch(() => props.topic, load, { immediate: true })
-
-async function load() {
-  selected.value = null
-  query.value = ''
-  try {
-    elements.value = await fetchElements(props.topic)
-  } catch (e) {
-    console.error('Fehler beim Laden der Elemente:', e)
-  }
-  openFromProp()
-}
-
-// Aus der Übersicht im Hauptbereich angeklicktes Element öffnen
-watch(() => props.openTick, openFromProp)
-
-function openFromProp() {
-  if (!props.openId) return
-  const el = elements.value.find((e) => e.id === props.openId)
-  if (el) select(el)
-}
-
-// Markdown-Zeichen für Titel und Listen-Vorschau entfernen
-function plain(text) {
-  return (text || '').replace(/```[a-z]*\n?/g, '').replace(/[`*_#]/g, '')
-}
-
-const filtered = computed(() => {
-  const q = query.value.trim().toLowerCase()
-  if (!q) return elements.value
-  return elements.value.filter(
-    (el) => el.title.toLowerCase().includes(q) || el.description.toLowerCase().includes(q),
-  )
-})
-
-async function add() {
-  if (creating.value) return
-  creating.value = true
-  try {
-    const el = await createElement(props.topic, query.value.trim(), props.provider)
-    elements.value.unshift(el)
-    query.value = ''
-    emit('changed')
-  } catch (e) {
-    console.error('Fehler beim Erstellen des Elements:', e)
-  } finally {
-    creating.value = false
-  }
-}
-
-function select(el) {
-  selected.value = el
-  tab.value = 'overview'
-  messages.value = []
-  input.value = ''
-  resetCheck()
-}
-
-function back() {
-  selected.value = null
-  messages.value = []
-  resetCheck()
-}
-
-// --- Bearbeiten-Tab: Felder direkt editieren ---
-function loadEdit() {
-  if (!selected.value) return
-  edit.value = {
-    title: selected.value.title,
-    description: selected.value.description,
-    examples: [...selected.value.examples],
-    hints: [...selected.value.hints],
-  }
-}
-
-function openEdit() {
-  loadEdit()
-  tab.value = 'edit'
-}
-
-async function saveEdit() {
-  if (!selected.value || savingEdit.value) return
-  savingEdit.value = true
-  try {
-    const updated = await updateElement(selected.value.id, {
-      title: edit.value.title,
-      description: edit.value.description,
-      examples: edit.value.examples.filter((s) => s.trim()),
-      hints: edit.value.hints.filter((s) => s.trim()),
-    })
-    selected.value = updated
-    const idx = elements.value.findIndex((e) => e.id === updated.id)
-    if (idx !== -1) elements.value.splice(idx, 1, updated)
-    emit('changed')
-    tab.value = 'overview'
-  } catch (e) {
-    console.error('Speichern fehlgeschlagen:', e)
-  } finally {
-    savingEdit.value = false
-  }
-}
-
-// --- KI-Prüfung auf fehlende Infos (Ergebnisse landen als Inline-Vorschläge) ---
-const checking = ref(false)
-const statusMsg = ref(null)
-
-function resetCheck() {
-  checking.value = false
-  statusMsg.value = null
-  resetStyle()
-}
-
-let checkRun = 0 // laufende Prüfung identifizieren; Abbruch ignoriert ihr Ergebnis
-
-async function runCheck() {
-  if (!selected.value) return
-  if (checking.value) { // zweiter Klick = abbrechen
-    checkRun++
-    checking.value = false
-    return
-  }
-  const run = ++checkRun
-  checking.value = true
-  statusMsg.value = null
-  try {
-    const res = await checkElement(selected.value.id, props.provider)
-    if (run !== checkRun) return // abgebrochen oder neue Prüfung gestartet
-    const mapped = res.suggestions.map((s) => ({
-      text: s.text, action: 'hinzufuegen', target: s.target, index: null, content: s.content,
-    }))
-    if (mapped.length) styleChanges.value = [...(styleChanges.value || []), ...mapped]
-    else statusMsg.value = 'Keine wichtigen Lücken gefunden.'
-  } catch (e) {
-    if (run !== checkRun) return
-    console.error('Prüfung fehlgeschlagen:', e)
-    statusMsg.value = 'Prüfung fehlgeschlagen — bitte erneut versuchen.'
-  } finally {
-    if (run === checkRun) checking.value = false
-  }
-}
-
-// --- Stil-Prüfung: KI schlägt Änderungen vor, Nutzer bestätigt ---
-const styleChanges = ref(null) // null = noch nicht geprüft
-const styling = ref(false)
-const applyingStyle = ref(false)
-const refiningIdx = ref(null)
-let styleRun = 0
-
-function resetStyle() {
-  styleChanges.value = null
-  styling.value = false
-  applyingStyle.value = false
-  refiningIdx.value = null
-}
-
-function suggBusy(i) {
-  return applyingStyle.value || refiningIdx.value === i
-}
-
-// Einzelnen Vorschlag per Anweisung überarbeiten (Stift-Icon)
-async function refineChange(i, instruction) {
-  if (refiningIdx.value !== null || applyingStyle.value || !selected.value) return
-  refiningIdx.value = i
-  try {
-    const res = await refineSuggestion(selected.value.id, styleChanges.value[i], instruction, props.provider)
-    const next = [...styleChanges.value]
-    next[i] = res.change
-    styleChanges.value = next
-  } catch (e) {
-    console.error('Überarbeitung fehlgeschlagen:', e)
-    statusMsg.value = 'Überarbeitung fehlgeschlagen — bitte erneut versuchen.'
-  } finally {
-    refiningIdx.value = null
-  }
-}
-
-async function runStyle() {
-  if (!selected.value) return
-  if (styling.value) { // zweiter Klick = abbrechen
-    styleRun++
-    styling.value = false
-    return
-  }
-  const run = ++styleRun
-  styling.value = true
-  statusMsg.value = null
-  try {
-    const res = await styleElement(selected.value.id, props.provider)
-    if (run !== styleRun) return
-    if (res.changes.length) styleChanges.value = [...(styleChanges.value || []), ...res.changes]
-    else statusMsg.value = 'Stil passt bereits.'
-  } catch (e) {
-    if (run !== styleRun) return
-    console.error('Stil-Prüfung fehlgeschlagen:', e)
-    statusMsg.value = 'Stil-Prüfung fehlgeschlagen — bitte erneut versuchen.'
-  } finally {
-    if (run === styleRun) styling.value = false
-  }
-}
-
-// Vorschläge am Ziel-Ort anzeigen: anpassen/entfernen beim betroffenen Eintrag …
-function styleAt(target, index = null) {
-  if (!styleChanges.value) return []
-  return styleChanges.value
-    .map((c, i) => [i, c])
-    .filter(([, c]) => c.target === target && c.index === index && c.action !== 'hinzufuegen')
-}
-
-// … Ergänzungen am Ende der jeweiligen Sektion
-function styleAdds(target) {
-  if (!styleChanges.value) return []
-  return styleChanges.value
-    .map((c, i) => [i, c])
-    .filter(([, c]) => c.target === target && c.action === 'hinzufuegen')
-}
-
-function dismissStyleChange(i) {
-  styleChanges.value = styleChanges.value.filter((_, j) => j !== i)
-}
-
-async function applyStyleChange(i) {
-  if (applyingStyle.value || !selected.value) return
-  const c = styleChanges.value[i]
-  applyingStyle.value = true
-  try {
-    const STRING_TARGETS = ['title', 'description']
-    const fields = {
-      title: selected.value.title,
-      description: selected.value.description,
-      examples: [...selected.value.examples],
-      hints: [...selected.value.hints],
-    }
-    if (c.action === 'entfernen') fields[c.target].splice(c.index, 1)
-    else if (c.action === 'hinzufuegen') {
-      if (c.target === 'title') fields.title = c.content
-      else if (c.target === 'description')
-        fields[c.target] = fields[c.target] ? fields[c.target] + '\n\n' + c.content : c.content
-      else fields[c.target].push(c.content)
-    } else if (STRING_TARGETS.includes(c.target)) fields[c.target] = c.content
-    else fields[c.target][c.index] = c.content
-
-    const updated = await updateElement(selected.value.id, fields)
-    selected.value = updated
-    const idx = elements.value.findIndex((e) => e.id === updated.id)
-    if (idx !== -1) elements.value.splice(idx, 1, updated)
-
-    // Rest-Vorschläge behalten; Indizes hinter einer Entfernung rücken auf
-    const rest = styleChanges.value.filter((_, j) => j !== i)
-    if (c.action === 'entfernen') {
-      for (const r of rest) {
-        if (r.target === c.target && r.index !== null && r.index > c.index) r.index--
-      }
-    }
-    styleChanges.value = rest
-    emit('changed')
-  } catch (e) {
-    console.error('Übernehmen fehlgeschlagen:', e)
-  } finally {
-    applyingStyle.value = false
-  }
-}
-
-// Inline-Bestätigung wie in TopicSidebar: erster Klick „Sicher?", zweiter löscht
-const pendingDelete = ref(null)
-let deleteTimer = null
-
-async function confirmDelete(el) {
-  clearTimeout(deleteTimer)
-  if (pendingDelete.value === el.id) {
-    pendingDelete.value = null
-    await deleteElement(el.id)
-    elements.value = elements.value.filter((e) => e.id !== el.id)
-    if (selected.value?.id === el.id) back()
-    emit('changed')
-  } else {
-    pendingDelete.value = el.id
-    deleteTimer = setTimeout(() => { pendingDelete.value = null }, 3000)
-  }
-}
-
-// --- Chat zum Anpassen des Elements ---
-const messages = ref([])
-const input = ref('')
-const loading = ref(false)
-const messagesEl = ref(null)
-const inputEl = ref(null)
-
-async function scrollToBottom() {
-  await nextTick()
-  if (messagesEl.value) messagesEl.value.scrollTop = messagesEl.value.scrollHeight
-}
-
-let chatRun = 0 // laufende Anfrage identifizieren; Abbruch ignoriert ihr Ergebnis
-
-async function send() {
-  if (loading.value) { // zweiter Klick = abbrechen
-    chatRun++
-    loading.value = false
-    messages.value.push({ role: 'assistant', content: 'Abgebrochen.' })
-    return
-  }
-  const text = input.value.trim()
-  if (!text || !selected.value) return
-  const run = ++chatRun
-  messages.value.push({ role: 'user', content: text })
-  input.value = ''
-  loading.value = true
-  scrollToBottom()
-  try {
-    const res = await chatElement(selected.value.id, messages.value, props.provider)
-    if (run !== chatRun) return
-    messages.value.push({ role: 'assistant', content: res.reply || '…' })
-    if (res.changes?.length) {
-      styleChanges.value = [...(styleChanges.value || []), ...res.changes]
-    }
-  } catch {
-    if (run !== chatRun) return
-    messages.value.push({ role: 'assistant', content: 'Fehler bei der Anfrage.' })
-  } finally {
-    if (run === chatRun) {
-      loading.value = false
-      scrollToBottom()
-      nextTick(() => inputEl.value?.focus())
-    }
-  }
-}
-</script>
-
-<template>
-  <aside class="elements-sidebar">
-    <header class="el-header">
-      <button v-if="selected" class="el-back" title="Zur Liste" @click="back">←</button>
-      <span class="el-title">{{ selected ? plain(selected.title) : 'Elemente' }}</span>
-      <button
-        v-if="selected" class="el-tool" :class="{ busy: checking }"
-        :title="checking ? 'Prüfung abbrechen' : 'Auf fehlende Infos prüfen'" @click="runCheck"
-      >🔍</button>
-      <button
-        v-if="selected" class="el-tool" :class="{ busy: styling }"
-        :title="styling ? 'Prüfung abbrechen' : 'Stil prüfen & anpassen'" @click="runStyle"
-      >✨</button>
-      <button class="el-close" title="Schließen" @click="emit('close')">×</button>
-    </header>
-
-    <!-- Listen-Modus -->
-    <template v-if="!selected">
-      <div class="el-new">
-        <input
-          v-model="query"
-          placeholder="Suchen oder Stichwort…"
-          :disabled="creating"
-          @keyup.enter="add"
-        />
-        <button :disabled="creating" title="Element per KI erstellen" @click="add">+</button>
-      </div>
-      <div v-if="creating" class="el-creating">KI erstellt Element…</div>
-      <ul class="el-list">
-        <li v-for="el in filtered" :key="el.id" @click="select(el)">
-          <div class="el-item-main">
-            <span class="el-item-title">{{ plain(el.title) }}</span>
-            <span class="el-item-desc">{{ plain(el.description) }}</span>
-          </div>
-          <button
-            class="el-delete"
-            :class="{ armed: pendingDelete === el.id }"
-            title="Element löschen"
-            @click.stop="confirmDelete(el)"
-          >{{ pendingDelete === el.id ? 'Sicher?' : '×' }}</button>
-        </li>
-        <li v-if="!filtered.length && !creating" class="el-empty">
-          {{ elements.length ? 'Keine Treffer.' : 'Noch keine Elemente. Stichwort eingeben und + klicken.' }}
-        </li>
-      </ul>
-    </template>
-
-    <!-- Detail-Modus -->
-    <template v-else>
-      <nav class="el-tabs">
-        <button :class="{ active: tab === 'overview' }" @click="tab = 'overview'">Übersicht</button>
-        <button :class="{ active: tab === 'chat' }" @click="tab = 'chat'">Chat</button>
-        <button :class="{ active: tab === 'edit' }" @click="openEdit">Bearbeiten</button>
-      </nav>
-      <div v-show="tab === 'overview'" class="el-detail">
-        <div v-if="selected.description" class="el-desc markdown" v-html="renderMarkdown(selected.description)"></div>
-        <ElementSuggestion
-          v-for="[ci, c] in [...styleAt('title'), ...styleAt('description'), ...styleAdds('description')]"
-          :key="'sgd' + ci" :change="c" :busy="suggBusy(ci)"
-          @apply="applyStyleChange(ci)" @dismiss="dismissStyleChange(ci)" @refine="(t) => refineChange(ci, t)"
-        />
-        <template v-for="(ex, i) in selected.examples" :key="i">
-          <div class="el-entry markdown" v-html="renderMarkdown(ex)"></div>
-          <ElementSuggestion
-            v-for="[ci, c] in styleAt('examples', i)"
-            :key="'sge' + ci" :change="c" :busy="suggBusy(ci)"
-            @apply="applyStyleChange(ci)" @dismiss="dismissStyleChange(ci)" @refine="(t) => refineChange(ci, t)"
-          />
-        </template>
-        <ElementSuggestion
-          v-for="[ci, c] in styleAdds('examples')"
-          :key="'sgea' + ci" :change="c" :busy="suggBusy(ci)"
-          @apply="applyStyleChange(ci)" @dismiss="dismissStyleChange(ci)" @refine="(t) => refineChange(ci, t)"
-        />
-        <div v-if="selected.hints.length || styleAdds('hints').length" class="el-hints-block">
-          <h4>Hinweise</h4>
-          <ul class="el-hints">
-            <li v-for="(h, i) in selected.hints" :key="i">
-              <span class="markdown" v-html="renderMarkdown(h)"></span>
-              <ElementSuggestion
-                v-for="[ci, c] in styleAt('hints', i)"
-                :key="'sgh' + ci" :change="c" :busy="suggBusy(ci)"
-                @apply="applyStyleChange(ci)" @dismiss="dismissStyleChange(ci)" @refine="(t) => refineChange(ci, t)"
-              />
-            </li>
-          </ul>
-          <ElementSuggestion
-            v-for="[ci, c] in styleAdds('hints')"
-            :key="'sgha' + ci" :change="c" :busy="suggBusy(ci)"
-            @apply="applyStyleChange(ci)" @dismiss="dismissStyleChange(ci)" @refine="(t) => refineChange(ci, t)"
-          />
-        </div>
-
-        <div v-if="checking || styling || statusMsg" class="el-check">
-          <p v-if="checking" class="check-empty busy-text">Prüft auf fehlende Infos…</p>
-          <p v-if="styling" class="check-empty busy-text">Prüft den Stil…</p>
-          <p v-if="statusMsg && !checking && !styling" class="check-empty">{{ statusMsg }}</p>
-        </div>
-      </div>
-      <div v-show="tab === 'chat'" class="el-chat">
-        <div ref="messagesEl" class="chat-messages">
-          <p v-if="!messages.length" class="chat-hint">Schreib, was am Element geändert werden soll.</p>
-          <template v-for="(m, i) in messages" :key="i">
-            <div :class="['chat-msg', m.role]">{{ m.content }}</div>
-          </template>
-          <div v-if="loading" class="chat-msg assistant chat-typing">Passt an…</div>
-        </div>
-        <div class="chat-input">
-          <textarea
-            ref="inputEl"
-            v-model="input"
-            placeholder="Element anpassen…"
-            @keydown.enter.exact.prevent="send"
-          ></textarea>
-          <button
-            :disabled="!input.trim() && !loading"
-            :class="{ cancel: loading }"
-            :title="loading ? 'Abbrechen' : 'Senden'"
-            @click="send"
-          >{{ loading ? '✕' : '➤' }}</button>
-        </div>
-      </div>
-
-      <!-- Bearbeiten-Modus: Felder direkt editieren -->
-      <div v-show="tab === 'edit'" class="el-edit">
-        <button class="edit-save" :disabled="savingEdit" @click="saveEdit">
-          {{ savingEdit ? 'Speichert…' : 'Speichern' }}
-        </button>
-
-        <label>Titel</label>
-        <input v-model="edit.title" placeholder="Titel" />
-
-        <label>Beschreibung</label>
-        <textarea v-model="edit.description" placeholder="Beschreibung"></textarea>
-
-        <label>Beispiele</label>
-        <div v-for="(ex, i) in edit.examples" :key="'ex' + i" class="edit-row">
-          <textarea v-model="edit.examples[i]" placeholder="Beispiel"></textarea>
-          <button class="edit-del" title="Entfernen" @click="edit.examples.splice(i, 1)">×</button>
-        </div>
-        <button class="edit-add" @click="edit.examples.push('')">+ Beispiel</button>
-
-        <label>Hinweise</label>
-        <div v-for="(h, i) in edit.hints" :key="'hi' + i" class="edit-row">
-          <textarea v-model="edit.hints[i]" placeholder="Hinweis"></textarea>
-          <button class="edit-del" title="Entfernen" @click="edit.hints.splice(i, 1)">×</button>
-        </div>
-        <button class="edit-add" @click="edit.hints.push('')">+ Hinweis</button>
-      </div>
-    </template>
-  </aside>
-</template>
-
-<style scoped>
-.elements-sidebar {
-  width: 320px;
-  min-width: 320px;
-  height: 100dvh;
-  display: flex;
-  flex-direction: column;
-  background: var(--panel);
-  border-left: 1px solid var(--border);
-  /* Über dem Guide-Chat (FAB/Panel: z-index 20) */
-  position: relative;
-  z-index: 30;
-}
-
-/* Mobil/schmal: als Overlay über den Hauptinhalt legen, statt ihn
-   im Flex-Fluss einzuquetschen. */
-@media (max-width: 768px) {
-  .elements-sidebar {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: min(100vw, 380px);
-    min-width: 0;
-    box-shadow: -4px 0 16px var(--shadow);
-  }
-}
-
-.el-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0.6rem 0.9rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.el-title {
-  flex: 1;
-  font-weight: 600;
-  font-size: 0.9rem;
-  color: var(--text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.el-back,
-.el-close {
-  border: none;
-  background: none;
-  color: var(--text-faint);
-  font-size: 1.2rem;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0 4px;
-}
-
-.el-back:hover,
-.el-close:hover {
-  color: var(--text);
-}
-
-.el-tool {
-  border: none;
-  background: none;
-  font-size: 0.95rem;
-  line-height: 1;
-  cursor: pointer;
-  padding: 2px 3px;
-  border-radius: 6px;
-  filter: grayscale(0.4);
-}
-
-.el-tool:hover {
-  background: var(--panel-soft);
-  filter: none;
-}
-
-.el-tool.busy {
-  filter: none;
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-.busy-text {
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-.el-tabs {
-  display: flex;
-  border-bottom: 1px solid var(--border);
-}
-
-.el-tabs button {
-  flex: 1;
-  padding: 0.5rem 0.25rem;
-  border: none;
-  background: none;
-  color: var(--text-muted);
-  font-size: 0.8rem;
-  font-weight: 600;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-}
-
-.el-tabs button.active {
-  color: var(--accent);
-  border-bottom-color: var(--accent);
-}
-
-.el-tabs button:hover:not(.active) {
-  color: var(--text);
-}
-
-.el-new {
-  display: flex;
-  gap: 6px;
-  padding: 0.6rem 0.75rem;
-}
-
-.el-new input {
-  flex: 1;
-  padding: 8px 10px;
-  border: 1px solid var(--border-strong);
-  border-radius: 8px;
-  font-size: 0.85rem;
-  background: var(--panel);
-  color: var(--text);
-  outline: none;
-}
-
-.el-new input:focus {
-  border-color: var(--accent);
-}
-
-.el-new button {
-  width: 38px;
-  border: none;
-  border-radius: 8px;
-  background: var(--accent);
-  color: var(--on-accent);
-  font-size: 1.1rem;
-  cursor: pointer;
-}
-
-.el-new button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.el-creating {
-  padding: 0.4rem 0.75rem;
-  font-size: 0.78rem;
-  color: var(--warning);
-  background: var(--warning-soft);
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  50% { opacity: 0.35; }
-}
-
-.el-list {
-  flex: 1;
-  overflow-y: auto;
-  list-style: none;
-  margin: 0;
-  padding: 0.25rem 0;
-}
-
-.el-list li {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.el-list li:hover {
-  background: var(--panel-soft);
-}
-
-.el-item-main {
-  flex: 1;
-  min-width: 0;
-}
-
-.el-item-title {
-  display: block;
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.el-item-desc {
-  display: block;
-  font-size: 0.75rem;
-  color: var(--text-faint);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.el-delete {
-  border: none;
-  background: none;
-  color: var(--danger);
-  font-size: 1rem;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0 2px;
-  visibility: hidden;
-}
-
-.el-list li:hover .el-delete {
-  visibility: visible;
-}
-
-.el-delete.armed {
-  visibility: visible;
-  font-size: 0.7rem;
-  font-weight: 700;
-  background: var(--danger);
-  color: #fff;
-  border-radius: 4px;
-  padding: 2px 6px;
-}
-
-.el-empty {
-  cursor: default !important;
-  color: var(--text-faint);
-  font-size: 0.8rem;
-}
-
-.el-empty:hover {
-  background: none !important;
-}
-
-.el-detail {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.9rem;
-}
-
-.el-desc {
-  margin: 0 0 0.9rem;
-  font-size: 0.85rem;
-  line-height: 1.6;
-  color: var(--text);
-}
-
-.el-hints-block {
-  margin-top: 0.9rem;
-}
-
-.el-hints-block h4 {
-  margin: 0 0 0.35rem;
-  font-size: 0.72rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-faint);
-}
-
-.el-entry {
-  font-size: 0.82rem;
-  line-height: 1.5;
-  color: var(--text);
-  margin-bottom: 0.4rem;
-}
-
-.el-entry:last-child {
-  margin-bottom: 0;
-}
-
-.el-hints {
-  margin: 0;
-  padding-left: 1.1rem;
-}
-
-.el-hints li {
-  font-size: 0.82rem;
-  line-height: 1.5;
-  color: var(--text);
-  margin-bottom: 0.25rem;
-}
-
-/* Hinweis-Text inline neben dem Bullet halten (p ist sonst block) */
-.el-hints li > .markdown {
-  display: inline;
-}
-
-.el-hints li > .markdown :deep(p) {
-  display: inline;
-  margin: 0;
-}
-
-/* Markdown: Basis global (assets/markdown.css); schmale Sidebar → kompaktere Code-Blöcke */
-.markdown :deep(pre) {
-  padding: 8px 10px;
-}
-
-/* --- KI-Prüfung --- */
-.el-check {
-  margin-top: 1rem;
-  padding-top: 0.8rem;
-  border-top: 1px dashed var(--border-strong);
-}
-
-.check-btn {
-  width: 100%;
-  margin-bottom: 0.4rem;
-  padding: 7px 10px;
-  border: 1.5px dashed var(--border-strong);
-  border-radius: 8px;
-  background: var(--panel-soft);
-  color: var(--text-muted);
-  font-size: 0.8rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.12s;
-}
-
-.check-btn:hover:not(:disabled) {
-  border-color: var(--accent);
-  color: var(--accent);
-}
-
-.check-btn:disabled {
-  opacity: 0.6;
-  cursor: wait;
-}
-
-.check-empty {
-  margin: 0.6rem 0 0;
-  font-size: 0.78rem;
-  color: var(--text-faint);
-  text-align: center;
-}
-
-.sugg-list {
-  list-style: none;
-  margin: 0.6rem 0 0;
-  padding: 0;
-}
-
-.sugg-list li {
-  display: flex;
-  align-items: flex-start;
-  gap: 7px;
-  padding: 0.4rem 0.2rem;
-  font-size: 0.8rem;
-  line-height: 1.4;
-  color: var(--text);
-  cursor: pointer;
-  border-radius: 6px;
-}
-
-.sugg-list li:hover {
-  background: var(--panel-soft);
-}
-
-.sugg-list input {
-  margin-top: 2px;
-  accent-color: var(--accent);
-  cursor: pointer;
-}
-
-.sugg-text em {
-  color: var(--text-faint);
-  font-style: normal;
-  font-size: 0.72rem;
-}
-
-.check-btn.busy {
-  border-style: solid;
-  border-color: var(--warning);
-  color: var(--warning);
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-.sugg-actions {
-  display: flex;
-  gap: 6px;
-  margin-top: 0.5rem;
-}
-
-.dismiss-btn {
-  padding: 7px 10px;
-  border: 1px solid var(--border-strong);
-  border-radius: 8px;
-  background: none;
-  color: var(--text-muted);
-  font-size: 0.8rem;
-  cursor: pointer;
-}
-
-.dismiss-btn:hover {
-  border-color: var(--danger);
-  color: var(--danger);
-}
-
-.apply-btn {
-  flex: 1;
-  padding: 7px 10px;
-  border: none;
-  border-radius: 8px;
-  background: var(--accent);
-  color: var(--on-accent);
-  font-size: 0.8rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.apply-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-/* Chat-Tab (Muster: TopicDetail-Chat) */
-.el-chat {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-/* --- Bearbeiten-Tab --- */
-.el-edit {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.9rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
-
-.el-edit label {
-  font-size: 0.72rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-faint);
-  margin-top: 0.5rem;
-}
-
-.el-edit input,
-.el-edit textarea {
-  width: 100%;
-  padding: 8px 10px;
-  border: 1px solid var(--border-strong);
-  border-radius: 8px;
-  font-size: 0.85rem;
-  font-family: inherit;
-  background: var(--panel);
-  color: var(--text);
-  outline: none;
-}
-
-.el-edit textarea {
-  resize: vertical;
-  min-height: 120px;
-  overflow: auto;
-  line-height: 1.4;
-}
-
-.el-edit input:focus,
-.el-edit textarea:focus {
-  border-color: var(--accent);
-}
-
-.edit-row {
-  display: flex;
-  gap: 6px;
-  align-items: flex-start;
-}
-
-.edit-row textarea {
-  flex: 1;
-}
-
-.edit-del {
-  flex-shrink: 0;
-  width: 30px;
-  align-self: stretch;
-  border: 1px solid var(--border-strong);
-  border-radius: 8px;
-  background: none;
-  color: var(--danger);
-  font-size: 1rem;
-  cursor: pointer;
-}
-
-.edit-add {
-  align-self: flex-start;
-  padding: 5px 10px;
-  border: 1px dashed var(--border-strong);
-  border-radius: 8px;
-  background: none;
-  color: var(--text-muted);
-  font-size: 0.78rem;
-  cursor: pointer;
-}
-
-.edit-add:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-}
-
-.edit-save {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  margin-bottom: 0.3rem;
-  padding: 9px 10px;
-  border: none;
-  border-radius: 8px;
-  background: var(--accent);
-  color: var(--on-accent);
-  font-size: 0.85rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.edit-save:disabled {
-  opacity: 0.5;
-  cursor: wait;
-}
-
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.6rem 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.chat-hint {
-  color: var(--text-faint);
-  font-size: 0.78rem;
-  text-align: center;
-  margin-top: 0.5rem;
-}
-
-.chat-msg {
-  max-width: 85%;
-  padding: 6px 10px;
-  border-radius: 12px;
-  font-size: 0.82rem;
-  line-height: 1.4;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.chat-msg.user {
-  align-self: flex-end;
-  background: var(--accent);
-  color: var(--on-accent);
-  border-bottom-right-radius: 3px;
-}
-
-.chat-msg.assistant {
-  align-self: flex-start;
-  background: var(--panel-soft);
-  color: var(--text);
-  border-bottom-left-radius: 3px;
-}
-
-.chat-typing {
-  color: var(--text-faint);
-  font-style: italic;
-}
-
-.chat-input {
-  display: flex;
-  gap: 6px;
-  padding: 0.6rem;
-  border-top: 1px solid var(--border);
-}
-
-.chat-input textarea {
-  flex: 1;
-  resize: none;
-  height: 72px;
-  padding: 8px 10px;
-  border: 1px solid var(--border-strong);
-  border-radius: 8px;
-  font-size: 0.85rem;
-  font-family: inherit;
-  background: var(--panel);
-  color: var(--text);
-  outline: none;
-}
-
-.chat-input textarea:focus {
-  border-color: var(--accent);
-}
-
-.chat-input button {
-  width: 38px;
-  border: none;
-  border-radius: 8px;
-  background: var(--accent);
-  color: var(--on-accent);
-  font-size: 1rem;
-  cursor: pointer;
-}
-
-.chat-input button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.chat-input button.cancel {
-  background: var(--danger);
-}
-</style>
diff --git a/frontend/src/components/elements/ElementChatTab.vue b/frontend/src/components/elements/ElementChatTab.vue
new file mode 100644
index 0000000..487e66c
--- /dev/null
+++ b/frontend/src/components/elements/ElementChatTab.vue
@@ -0,0 +1,147 @@
+<script setup>
+import { watch } from 'vue'
+import { chatElement } from '../../api.js'
+import { useChat } from '../../composables/useChat.js'
+
+const props = defineProps({
+  element: { type: Object, required: true },
+  provider: { type: String, default: 'claude' },
+})
+
+const emit = defineEmits(['changes'])
+
+const chat = useChat((msgs) => chatElement(props.element.id, msgs, props.provider))
+const { messages, input, loading, messagesEl, inputEl } = chat
+
+// Anderes Element gewählt → Verlauf verwerfen
+watch(() => props.element.id, () => chat.reset())
+
+async function send() {
+  const res = await chat.send()
+  if (res?.changes?.length) emit('changes', res.changes)
+}
+</script>
+
+<template>
+  <div class="el-chat">
+    <div ref="messagesEl" class="chat-messages">
+      <p v-if="!messages.length" class="chat-hint">Schreib, was am Element geändert werden soll.</p>
+      <template v-for="(m, i) in messages" :key="i">
+        <div :class="['chat-msg', m.role]">{{ m.content }}</div>
+      </template>
+      <div v-if="loading" class="chat-msg assistant chat-typing">Passt an…</div>
+    </div>
+    <div class="chat-input">
+      <textarea
+        ref="inputEl"
+        v-model="input"
+        placeholder="Element anpassen…"
+        @keydown.enter.exact.prevent="send"
+      ></textarea>
+      <button
+        :disabled="!input.trim() && !loading"
+        :class="{ cancel: loading }"
+        :title="loading ? 'Abbrechen' : 'Senden'"
+        @click="send"
+      >{{ loading ? '✕' : '➤' }}</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.el-chat {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.6rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.chat-hint {
+  color: var(--text-faint);
+  font-size: 0.78rem;
+  text-align: center;
+  margin-top: 0.5rem;
+}
+
+.chat-msg {
+  max-width: 85%;
+  padding: 6px 10px;
+  border-radius: 12px;
+  font-size: 0.82rem;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.chat-msg.user {
+  align-self: flex-end;
+  background: var(--accent);
+  color: var(--on-accent);
+  border-bottom-right-radius: 3px;
+}
+
+.chat-msg.assistant {
+  align-self: flex-start;
+  background: var(--panel-soft);
+  color: var(--text);
+  border-bottom-left-radius: 3px;
+}
+
+.chat-typing {
+  color: var(--text-faint);
+  font-style: italic;
+}
+
+.chat-input {
+  display: flex;
+  gap: 6px;
+  padding: 0.6rem;
+  border-top: 1px solid var(--border);
+}
+
+.chat-input textarea {
+  flex: 1;
+  resize: none;
+  height: 72px;
+  padding: 8px 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-family: inherit;
+  background: var(--panel);
+  color: var(--text);
+  outline: none;
+}
+
+.chat-input textarea:focus {
+  border-color: var(--accent);
+}
+
+.chat-input button {
+  width: 38px;
+  border: none;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.chat-input button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.chat-input button.cancel {
+  background: var(--danger);
+}
+</style>
diff --git a/frontend/src/components/elements/ElementDetail.vue b/frontend/src/components/elements/ElementDetail.vue
new file mode 100644
index 0000000..922214f
--- /dev/null
+++ b/frontend/src/components/elements/ElementDetail.vue
@@ -0,0 +1,458 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { updateElement, checkElement, styleElement, refineSuggestion } from '../../api.js'
+import { renderMarkdown } from '../../markdown.js'
+import ElementSuggestion from './ElementSuggestion.vue'
+import ElementChatTab from './ElementChatTab.vue'
+import ElementEditTab from './ElementEditTab.vue'
+
+const props = defineProps({
+  element: { type: Object, required: true },
+  provider: { type: String, default: 'claude' },
+})
+
+const emit = defineEmits(['back', 'close', 'updated', 'changed'])
+
+const tab = ref('overview') // 'overview' | 'chat' | 'edit'
+const savingEdit = ref(false)
+
+// Markdown-Zeichen aus dem Header-Titel entfernen
+function plain(text) {
+  return (text || '').replace(/```[a-z]*\n?/g, '').replace(/[`*_#]/g, '')
+}
+
+// Anderes Element gewählt → Prüf-Zustand und Tab zurücksetzen
+watch(() => props.element.id, () => {
+  tab.value = 'overview'
+  resetCheck()
+})
+
+// --- KI-Prüfung auf fehlende Infos (Ergebnisse landen als Inline-Vorschläge) ---
+const checking = ref(false)
+const statusMsg = ref(null)
+
+function resetCheck() {
+  checking.value = false
+  statusMsg.value = null
+  resetStyle()
+}
+
+let checkRun = 0 // laufende Prüfung identifizieren; Abbruch ignoriert ihr Ergebnis
+
+async function runCheck() {
+  if (checking.value) { // zweiter Klick = abbrechen
+    checkRun++
+    checking.value = false
+    return
+  }
+  const run = ++checkRun
+  checking.value = true
+  statusMsg.value = null
+  try {
+    const res = await checkElement(props.element.id, props.provider)
+    if (run !== checkRun) return // abgebrochen oder neue Prüfung gestartet
+    const mapped = res.suggestions.map((s) => ({
+      text: s.text, action: 'hinzufuegen', target: s.target, index: null, content: s.content,
+    }))
+    if (mapped.length) styleChanges.value = [...(styleChanges.value || []), ...mapped]
+    else statusMsg.value = 'Keine wichtigen Lücken gefunden.'
+  } catch (e) {
+    if (run !== checkRun) return
+    console.error('Prüfung fehlgeschlagen:', e)
+    statusMsg.value = 'Prüfung fehlgeschlagen — bitte erneut versuchen.'
+  } finally {
+    if (run === checkRun) checking.value = false
+  }
+}
+
+// --- Stil-Prüfung: KI schlägt Änderungen vor, Nutzer bestätigt ---
+const styleChanges = ref(null) // null = noch nicht geprüft
+const styling = ref(false)
+const applyingStyle = ref(false)
+const refiningIdx = ref(null)
+let styleRun = 0
+
+function resetStyle() {
+  styleChanges.value = null
+  styling.value = false
+  applyingStyle.value = false
+  refiningIdx.value = null
+}
+
+function suggBusy(i) {
+  return applyingStyle.value || refiningIdx.value === i
+}
+
+// Einzelnen Vorschlag per Anweisung überarbeiten (Stift-Icon)
+async function refineChange(i, instruction) {
+  if (refiningIdx.value !== null || applyingStyle.value) return
+  refiningIdx.value = i
+  try {
+    const res = await refineSuggestion(props.element.id, styleChanges.value[i], instruction, props.provider)
+    const next = [...styleChanges.value]
+    next[i] = res.change
+    styleChanges.value = next
+  } catch (e) {
+    console.error('Überarbeitung fehlgeschlagen:', e)
+    statusMsg.value = 'Überarbeitung fehlgeschlagen — bitte erneut versuchen.'
+  } finally {
+    refiningIdx.value = null
+  }
+}
+
+async function runStyle() {
+  if (styling.value) { // zweiter Klick = abbrechen
+    styleRun++
+    styling.value = false
+    return
+  }
+  const run = ++styleRun
+  styling.value = true
+  statusMsg.value = null
+  try {
+    const res = await styleElement(props.element.id, props.provider)
+    if (run !== styleRun) return
+    if (res.changes.length) styleChanges.value = [...(styleChanges.value || []), ...res.changes]
+    else statusMsg.value = 'Stil passt bereits.'
+  } catch (e) {
+    if (run !== styleRun) return
+    console.error('Stil-Prüfung fehlgeschlagen:', e)
+    statusMsg.value = 'Stil-Prüfung fehlgeschlagen — bitte erneut versuchen.'
+  } finally {
+    if (run === styleRun) styling.value = false
+  }
+}
+
+// Chat-Vorschläge landen ebenfalls als Inline-Vorschläge in der Übersicht
+function onChatChanges(changes) {
+  styleChanges.value = [...(styleChanges.value || []), ...changes]
+}
+
+// Vorschläge am Ziel-Ort anzeigen: anpassen/entfernen beim betroffenen Eintrag …
+function styleAt(target, index = null) {
+  if (!styleChanges.value) return []
+  return styleChanges.value
+    .map((c, i) => [i, c])
+    .filter(([, c]) => c.target === target && c.index === index && c.action !== 'hinzufuegen')
+}
+
+// … Ergänzungen am Ende der jeweiligen Sektion
+function styleAdds(target) {
+  if (!styleChanges.value) return []
+  return styleChanges.value
+    .map((c, i) => [i, c])
+    .filter(([, c]) => c.target === target && c.action === 'hinzufuegen')
+}
+
+function dismissStyleChange(i) {
+  styleChanges.value = styleChanges.value.filter((_, j) => j !== i)
+}
+
+async function applyStyleChange(i) {
+  if (applyingStyle.value) return
+  const c = styleChanges.value[i]
+  applyingStyle.value = true
+  try {
+    const STRING_TARGETS = ['title', 'description']
+    const fields = {
+      title: props.element.title,
+      description: props.element.description,
+      examples: [...props.element.examples],
+      hints: [...props.element.hints],
+    }
+    if (c.action === 'entfernen') fields[c.target].splice(c.index, 1)
+    else if (c.action === 'hinzufuegen') {
+      if (c.target === 'title') fields.title = c.content
+      else if (c.target === 'description')
+        fields[c.target] = fields[c.target] ? fields[c.target] + '\n\n' + c.content : c.content
+      else fields[c.target].push(c.content)
+    } else if (STRING_TARGETS.includes(c.target)) fields[c.target] = c.content
+    else fields[c.target][c.index] = c.content
+
+    const updated = await updateElement(props.element.id, fields)
+    emit('updated', updated)
+
+    // Rest-Vorschläge behalten; Indizes hinter einer Entfernung rücken auf
+    const rest = styleChanges.value.filter((_, j) => j !== i)
+    if (c.action === 'entfernen') {
+      for (const r of rest) {
+        if (r.target === c.target && r.index !== null && r.index > c.index) r.index--
+      }
+    }
+    styleChanges.value = rest
+  } catch (e) {
+    console.error('Übernehmen fehlgeschlagen:', e)
+  } finally {
+    applyingStyle.value = false
+  }
+}
+
+// --- Bearbeiten-Tab: Felder direkt speichern ---
+async function saveEdit(fields) {
+  if (savingEdit.value) return
+  savingEdit.value = true
+  try {
+    const updated = await updateElement(props.element.id, fields)
+    emit('updated', updated)
+    tab.value = 'overview'
+  } catch (e) {
+    console.error('Speichern fehlgeschlagen:', e)
+  } finally {
+    savingEdit.value = false
+  }
+}
+</script>
+
+<template>
+  <header class="el-header">
+    <button class="el-back" title="Zur Liste" @click="emit('back')">←</button>
+    <span class="el-title">{{ plain(element.title) }}</span>
+    <button
+      class="el-tool" :class="{ busy: checking }"
+      :title="checking ? 'Prüfung abbrechen' : 'Auf fehlende Infos prüfen'" @click="runCheck"
+    >🔍</button>
+    <button
+      class="el-tool" :class="{ busy: styling }"
+      :title="styling ? 'Prüfung abbrechen' : 'Stil prüfen & anpassen'" @click="runStyle"
+    >✨</button>
+    <button class="el-close" title="Schließen" @click="emit('close')">×</button>
+  </header>
+
+  <nav class="el-tabs">
+    <button :class="{ active: tab === 'overview' }" @click="tab = 'overview'">Übersicht</button>
+    <button :class="{ active: tab === 'chat' }" @click="tab = 'chat'">Chat</button>
+    <button :class="{ active: tab === 'edit' }" @click="tab = 'edit'">Bearbeiten</button>
+  </nav>
+
+  <!-- Übersicht: untrennbar mit styleChanges/Apply verzahnt → bleibt hier -->
+  <div v-show="tab === 'overview'" class="el-detail">
+    <div v-if="element.description" class="el-desc markdown" v-html="renderMarkdown(element.description)"></div>
+    <ElementSuggestion
+      v-for="[ci, c] in [...styleAt('title'), ...styleAt('description'), ...styleAdds('description')]"
+      :key="'sgd' + ci" :change="c" :busy="suggBusy(ci)"
+      @apply="applyStyleChange(ci)" @dismiss="dismissStyleChange(ci)" @refine="(t) => refineChange(ci, t)"
+    />
+    <template v-for="(ex, i) in element.examples" :key="i">
+      <div class="el-entry markdown" v-html="renderMarkdown(ex)"></div>
+      <ElementSuggestion
+        v-for="[ci, c] in styleAt('examples', i)"
+        :key="'sge' + ci" :change="c" :busy="suggBusy(ci)"
+        @apply="applyStyleChange(ci)" @dismiss="dismissStyleChange(ci)" @refine="(t) => refineChange(ci, t)"
+      />
+    </template>
+    <ElementSuggestion
+      v-for="[ci, c] in styleAdds('examples')"
+      :key="'sgea' + ci" :change="c" :busy="suggBusy(ci)"
+      @apply="applyStyleChange(ci)" @dismiss="dismissStyleChange(ci)" @refine="(t) => refineChange(ci, t)"
+    />
+    <div v-if="element.hints.length || styleAdds('hints').length" class="el-hints-block">
+      <h4>Hinweise</h4>
+      <ul class="el-hints">
+        <li v-for="(h, i) in element.hints" :key="i">
+          <span class="markdown" v-html="renderMarkdown(h)"></span>
+          <ElementSuggestion
+            v-for="[ci, c] in styleAt('hints', i)"
+            :key="'sgh' + ci" :change="c" :busy="suggBusy(ci)"
+            @apply="applyStyleChange(ci)" @dismiss="dismissStyleChange(ci)" @refine="(t) => refineChange(ci, t)"
+          />
+        </li>
+      </ul>
+      <ElementSuggestion
+        v-for="[ci, c] in styleAdds('hints')"
+        :key="'sgha' + ci" :change="c" :busy="suggBusy(ci)"
+        @apply="applyStyleChange(ci)" @dismiss="dismissStyleChange(ci)" @refine="(t) => refineChange(ci, t)"
+      />
+    </div>
+
+    <div v-if="checking || styling || statusMsg" class="el-check">
+      <p v-if="checking" class="check-empty busy-text">Prüft auf fehlende Infos…</p>
+      <p v-if="styling" class="check-empty busy-text">Prüft den Stil…</p>
+      <p v-if="statusMsg && !checking && !styling" class="check-empty">{{ statusMsg }}</p>
+    </div>
+  </div>
+
+  <!-- v-show erhält den Chat-Verlauf beim Tab-Wechsel -->
+  <ElementChatTab
+    v-show="tab === 'chat'"
+    :element="element"
+    :provider="provider"
+    @changes="onChatChanges"
+  />
+
+  <!-- v-if lädt die Edit-Felder bei jedem Öffnen frisch -->
+  <ElementEditTab
+    v-if="tab === 'edit'"
+    :element="element"
+    :saving="savingEdit"
+    @save="saveEdit"
+  />
+</template>
+
+<style scoped>
+.el-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0.6rem 0.9rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.el-title {
+  flex: 1;
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.el-back,
+.el-close {
+  border: none;
+  background: none;
+  color: var(--text-faint);
+  font-size: 1.2rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 4px;
+}
+
+.el-back:hover,
+.el-close:hover {
+  color: var(--text);
+}
+
+.el-tool {
+  border: none;
+  background: none;
+  font-size: 0.95rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 2px 3px;
+  border-radius: 6px;
+  filter: grayscale(0.4);
+}
+
+.el-tool:hover {
+  background: var(--panel-soft);
+  filter: none;
+}
+
+.el-tool.busy {
+  filter: none;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.busy-text {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  50% { opacity: 0.35; }
+}
+
+.el-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+}
+
+.el-tabs button {
+  flex: 1;
+  padding: 0.5rem 0.25rem;
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+
+.el-tabs button.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+.el-tabs button:hover:not(.active) {
+  color: var(--text);
+}
+
+.el-detail {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.9rem;
+}
+
+.el-desc {
+  margin: 0 0 0.9rem;
+  font-size: 0.85rem;
+  line-height: 1.6;
+  color: var(--text);
+}
+
+.el-hints-block {
+  margin-top: 0.9rem;
+}
+
+.el-hints-block h4 {
+  margin: 0 0 0.35rem;
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-faint);
+}
+
+.el-entry {
+  font-size: 0.82rem;
+  line-height: 1.5;
+  color: var(--text);
+  margin-bottom: 0.4rem;
+}
+
+.el-entry:last-child {
+  margin-bottom: 0;
+}
+
+.el-hints {
+  margin: 0;
+  padding-left: 1.1rem;
+}
+
+.el-hints li {
+  font-size: 0.82rem;
+  line-height: 1.5;
+  color: var(--text);
+  margin-bottom: 0.25rem;
+}
+
+/* Hinweis-Text inline neben dem Bullet halten (p ist sonst block) */
+.el-hints li > .markdown {
+  display: inline;
+}
+
+.el-hints li > .markdown :deep(p) {
+  display: inline;
+  margin: 0;
+}
+
+/* Markdown: Basis global (assets/markdown.css); schmale Sidebar → kompaktere Code-Blöcke */
+.markdown :deep(pre) {
+  padding: 8px 10px;
+}
+
+/* --- KI-Prüfung --- */
+.el-check {
+  margin-top: 1rem;
+  padding-top: 0.8rem;
+  border-top: 1px dashed var(--border-strong);
+}
+
+.check-empty {
+  margin: 0.6rem 0 0;
+  font-size: 0.78rem;
+  color: var(--text-faint);
+  text-align: center;
+}
+</style>
diff --git a/frontend/src/components/elements/ElementEditTab.vue b/frontend/src/components/elements/ElementEditTab.vue
new file mode 100644
index 0000000..eb3b0b2
--- /dev/null
+++ b/frontend/src/components/elements/ElementEditTab.vue
@@ -0,0 +1,164 @@
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  element: { type: Object, required: true },
+  saving: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['save'])
+
+const edit = ref({ title: '', description: '', examples: [], hints: [] })
+
+watch(() => props.element, load, { immediate: true })
+
+function load() {
+  edit.value = {
+    title: props.element.title,
+    description: props.element.description,
+    examples: [...props.element.examples],
+    hints: [...props.element.hints],
+  }
+}
+
+function save() {
+  if (props.saving) return
+  emit('save', {
+    title: edit.value.title,
+    description: edit.value.description,
+    examples: edit.value.examples.filter((s) => s.trim()),
+    hints: edit.value.hints.filter((s) => s.trim()),
+  })
+}
+</script>
+
+<template>
+  <div class="el-edit">
+    <button class="edit-save" :disabled="saving" @click="save">
+      {{ saving ? 'Speichert…' : 'Speichern' }}
+    </button>
+
+    <label>Titel</label>
+    <input v-model="edit.title" placeholder="Titel" />
+
+    <label>Beschreibung</label>
+    <textarea v-model="edit.description" placeholder="Beschreibung"></textarea>
+
+    <label>Beispiele</label>
+    <div v-for="(ex, i) in edit.examples" :key="'ex' + i" class="edit-row">
+      <textarea v-model="edit.examples[i]" placeholder="Beispiel"></textarea>
+      <button class="edit-del" title="Entfernen" @click="edit.examples.splice(i, 1)">×</button>
+    </div>
+    <button class="edit-add" @click="edit.examples.push('')">+ Beispiel</button>
+
+    <label>Hinweise</label>
+    <div v-for="(h, i) in edit.hints" :key="'hi' + i" class="edit-row">
+      <textarea v-model="edit.hints[i]" placeholder="Hinweis"></textarea>
+      <button class="edit-del" title="Entfernen" @click="edit.hints.splice(i, 1)">×</button>
+    </div>
+    <button class="edit-add" @click="edit.hints.push('')">+ Hinweis</button>
+  </div>
+</template>
+
+<style scoped>
+.el-edit {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.9rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.el-edit label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-faint);
+  margin-top: 0.5rem;
+}
+
+.el-edit input,
+.el-edit textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-family: inherit;
+  background: var(--panel);
+  color: var(--text);
+  outline: none;
+}
+
+.el-edit textarea {
+  resize: vertical;
+  min-height: 120px;
+  overflow: auto;
+  line-height: 1.4;
+}
+
+.el-edit input:focus,
+.el-edit textarea:focus {
+  border-color: var(--accent);
+}
+
+.edit-row {
+  display: flex;
+  gap: 6px;
+  align-items: flex-start;
+}
+
+.edit-row textarea {
+  flex: 1;
+}
+
+.edit-del {
+  flex-shrink: 0;
+  width: 30px;
+  align-self: stretch;
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  background: none;
+  color: var(--danger);
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.edit-add {
+  align-self: flex-start;
+  padding: 5px 10px;
+  border: 1px dashed var(--border-strong);
+  border-radius: 8px;
+  background: none;
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+
+.edit-add:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.edit-save {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  margin-bottom: 0.3rem;
+  padding: 9px 10px;
+  border: none;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.edit-save:disabled {
+  opacity: 0.5;
+  cursor: wait;
+}
+</style>
diff --git a/frontend/src/components/elements/ElementList.vue b/frontend/src/components/elements/ElementList.vue
new file mode 100644
index 0000000..ecbe4c0
--- /dev/null
+++ b/frontend/src/components/elements/ElementList.vue
@@ -0,0 +1,198 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useConfirm } from '../../composables/useConfirm.js'
+
+const props = defineProps({
+  elements: { type: Array, required: true },
+  creating: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['select', 'create', 'remove'])
+
+const query = ref('')
+const { isArmed, armOrRun } = useConfirm()
+
+// Markdown-Zeichen für Titel und Listen-Vorschau entfernen
+function plain(text) {
+  return (text || '').replace(/```[a-z]*\n?/g, '').replace(/[`*_#]/g, '')
+}
+
+const filtered = computed(() => {
+  const q = query.value.trim().toLowerCase()
+  if (!q) return props.elements
+  return props.elements.filter(
+    (el) => el.title.toLowerCase().includes(q) || el.description.toLowerCase().includes(q),
+  )
+})
+
+function add() {
+  if (props.creating) return
+  emit('create', query.value.trim())
+  query.value = ''
+}
+
+// Inline-Bestätigung: erster Klick „Sicher?", zweiter löscht
+function confirmDelete(el) {
+  armOrRun('el-' + el.id, () => emit('remove', el))
+}
+</script>
+
+<template>
+  <div class="el-new">
+    <input
+      v-model="query"
+      placeholder="Suchen oder Stichwort…"
+      :disabled="creating"
+      @keyup.enter="add"
+    />
+    <button :disabled="creating" title="Element per KI erstellen" @click="add">+</button>
+  </div>
+  <div v-if="creating" class="el-creating">KI erstellt Element…</div>
+  <ul class="el-list">
+    <li v-for="el in filtered" :key="el.id" @click="emit('select', el)">
+      <div class="el-item-main">
+        <span class="el-item-title">{{ plain(el.title) }}</span>
+        <span class="el-item-desc">{{ plain(el.description) }}</span>
+      </div>
+      <button
+        class="el-delete"
+        :class="{ armed: isArmed('el-' + el.id) }"
+        title="Element löschen"
+        @click.stop="confirmDelete(el)"
+      >{{ isArmed('el-' + el.id) ? 'Sicher?' : '×' }}</button>
+    </li>
+    <li v-if="!filtered.length && !creating" class="el-empty">
+      {{ elements.length ? 'Keine Treffer.' : 'Noch keine Elemente. Stichwort eingeben und + klicken.' }}
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.el-new {
+  display: flex;
+  gap: 6px;
+  padding: 0.6rem 0.75rem;
+}
+
+.el-new input {
+  flex: 1;
+  padding: 8px 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  font-size: 0.85rem;
+  background: var(--panel);
+  color: var(--text);
+  outline: none;
+}
+
+.el-new input:focus {
+  border-color: var(--accent);
+}
+
+.el-new button {
+  width: 38px;
+  border: none;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: 1.1rem;
+  cursor: pointer;
+}
+
+.el-new button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.el-creating {
+  padding: 0.4rem 0.75rem;
+  font-size: 0.78rem;
+  color: var(--warning);
+  background: var(--warning-soft);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  50% { opacity: 0.35; }
+}
+
+.el-list {
+  flex: 1;
+  overflow-y: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem 0;
+}
+
+.el-list li {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.el-list li:hover {
+  background: var(--panel-soft);
+}
+
+.el-item-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.el-item-title {
+  display: block;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.el-item-desc {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.el-delete {
+  border: none;
+  background: none;
+  color: var(--danger);
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 2px;
+  visibility: hidden;
+}
+
+.el-list li:hover .el-delete {
+  visibility: visible;
+}
+
+.el-delete.armed {
+  visibility: visible;
+  font-size: 0.7rem;
+  font-weight: 700;
+  background: var(--danger);
+  color: #fff;
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+
+.el-empty {
+  cursor: default !important;
+  color: var(--text-faint);
+  font-size: 0.8rem;
+}
+
+.el-empty:hover {
+  background: none !important;
+}
+</style>
diff --git a/frontend/src/components/ElementSuggestion.vue b/frontend/src/components/elements/ElementSuggestion.vue
similarity index 98%
rename from frontend/src/components/ElementSuggestion.vue
rename to frontend/src/components/elements/ElementSuggestion.vue
index bebd653..a383d1d 100644
--- a/frontend/src/components/ElementSuggestion.vue
+++ b/frontend/src/components/elements/ElementSuggestion.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, nextTick } from 'vue'
-import { renderMarkdown } from '../markdown.js'
+import { renderMarkdown } from '../../markdown.js'
 
 const props = defineProps({
   change: { type: Object, required: true },
diff --git a/frontend/src/components/elements/ElementsSidebar.vue b/frontend/src/components/elements/ElementsSidebar.vue
new file mode 100644
index 0000000..604086d
--- /dev/null
+++ b/frontend/src/components/elements/ElementsSidebar.vue
@@ -0,0 +1,156 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { fetchElements, createElement, deleteElement } from '../../api.js'
+import ElementList from './ElementList.vue'
+import ElementDetail from './ElementDetail.vue'
+
+const props = defineProps({
+  topic: { type: String, required: true },
+  provider: { type: String, default: 'claude' },
+  openId: { type: String, default: null },   // Element-ID, die geöffnet werden soll
+  openTick: { type: Number, default: 0 },    // Erhöhung = openId (erneut) öffnen
+})
+
+const emit = defineEmits(['close', 'changed'])
+
+const elements = ref([])
+const creating = ref(false)
+const selected = ref(null)
+
+watch(() => props.topic, load, { immediate: true })
+
+async function load() {
+  selected.value = null
+  try {
+    elements.value = await fetchElements(props.topic)
+  } catch (e) {
+    console.error('Fehler beim Laden der Elemente:', e)
+  }
+  openFromProp()
+}
+
+// Aus der Übersicht im Hauptbereich angeklicktes Element öffnen
+watch(() => props.openTick, openFromProp)
+
+function openFromProp() {
+  if (!props.openId) return
+  const el = elements.value.find((e) => e.id === props.openId)
+  if (el) selected.value = el
+}
+
+async function create(hint) {
+  if (creating.value) return
+  creating.value = true
+  try {
+    const el = await createElement(props.topic, hint, props.provider)
+    elements.value.unshift(el)
+    emit('changed')
+  } catch (e) {
+    console.error('Fehler beim Erstellen des Elements:', e)
+  } finally {
+    creating.value = false
+  }
+}
+
+async function remove(el) {
+  await deleteElement(el.id)
+  elements.value = elements.value.filter((e) => e.id !== el.id)
+  if (selected.value?.id === el.id) selected.value = null
+  emit('changed')
+}
+
+// Bearbeitetes Element in Liste und Auswahl synchron halten
+function onUpdated(el) {
+  selected.value = el
+  const idx = elements.value.findIndex((e) => e.id === el.id)
+  if (idx !== -1) elements.value.splice(idx, 1, el)
+  emit('changed')
+}
+</script>
+
+<template>
+  <aside class="elements-sidebar">
+    <ElementDetail
+      v-if="selected"
+      :element="selected"
+      :provider="provider"
+      @back="selected = null"
+      @close="emit('close')"
+      @updated="onUpdated"
+      @changed="emit('changed')"
+    />
+    <template v-else>
+      <header class="el-header">
+        <span class="el-title">Elemente</span>
+        <button class="el-close" title="Schließen" @click="emit('close')">×</button>
+      </header>
+      <ElementList
+        :elements="elements"
+        :creating="creating"
+        @select="(el) => (selected = el)"
+        @create="create"
+        @remove="remove"
+      />
+    </template>
+  </aside>
+</template>
+
+<style scoped>
+.elements-sidebar {
+  width: 320px;
+  min-width: 320px;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  background: var(--panel);
+  border-left: 1px solid var(--border);
+  /* Über dem Guide-Chat (FAB/Panel: z-index 20) */
+  position: relative;
+  z-index: 30;
+}
+
+/* Mobil/schmal: als Overlay über den Hauptinhalt legen, statt ihn
+   im Flex-Fluss einzuquetschen. */
+@media (max-width: 768px) {
+  .elements-sidebar {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: min(100vw, 380px);
+    min-width: 0;
+    box-shadow: -4px 0 16px var(--shadow);
+  }
+}
+
+.el-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0.6rem 0.9rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.el-title {
+  flex: 1;
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.el-close {
+  border: none;
+  background: none;
+  color: var(--text-faint);
+  font-size: 1.2rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 4px;
+}
+
+.el-close:hover {
+  color: var(--text);
+}
+</style>