feat(board): rework quick-peek modal (Linear-style) + board toolbar

Modal redesign — compact summary instead of two long cards:
- Topbar: breadcrumb + state pill + copyable task-id/link chip; review
  actions (approve / request changes) live in the modal header too
- Main column: title, meta chips (ball, created, last update), compact
  description, then square summary tiles (done/total with progress,
  active, open, blocked) + per-agent pills — details stay in Vollansicht
- Right sidebar: properties as slim Linear-style rows (status, priority,
  assignee, due, source) with hover-reveal controls; activity moved next
  to properties as a compact timeline with a new comment composer
  (POST tasks/{id}/activity via new store action postTaskActivity)
- Unified button system (32px: primary/ghost/approve/changes/icon)
- flattenBoard includes nested children again so quick-peek works for
  child rows inside master cards

Board (issue-tracker basics):
- Toolbar with search (title/detail/id/child titles) and ball filters:
  Alle / Du bist dran / Bei Iris / Haengt

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/stores/tasks.ts

@@ -321,6 +321,18 @@ export const useTaskStore = defineStore('tasks', {
       }
     },
 
+    /* ── API: Kommentar/Aktivität an Task posten ──── */
+    async postTaskActivity(id: string, message: string, type = 'comment') {
+      const res = await apiFetch(`/api/dashboard/tasks/${id}/activity`, {
+        method: 'POST',
+        body: JSON.stringify({ message, type }),
+      })
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}))
+        throw new Error(body.error || `HTTP ${res.status}`)
+      }
+    },
+
     /* ── API: Fetch agent workflow overview ──────── */
     async fetchAgentOverview(staleHours = 2) {
       this.agentOverviewLoading = true

frontend/src/views/TaskBoardView.vue

@@ -13,7 +13,7 @@
  *   - Waiting section for Iris overview
  */
 import { computed, onBeforeUnmount, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
-import { Plus, X, CalendarDays, Clock3, ExternalLink, Link2, ListChecks, Save, AlertTriangle, Eye, Bot, ShieldBan, MessageSquareText, RotateCcw } from '@lucide/vue'
+import { Plus, X, ExternalLink, Save, AlertTriangle, Eye, Bot, ShieldBan, RotateCcw, Check, Copy, Send, Search } from '@lucide/vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
 import { useTaskStore, type DashboardTaskDto } from '../stores/tasks'
@@ -213,13 +213,16 @@ function toDateInputValue(date?: string | null): string {
 }
 
 function flattenBoard() {
-  return [
+  const masters = [
     ...taskStore.board.offen,
     ...taskStore.board.inProgress,
     ...taskStore.board.review,
     ...taskStore.board.blocked,
     ...taskStore.board.done,
   ]
+  // Children sind keine eigenen Spalten-Karten mehr — fuer Quick-Peek
+  // (Klick auf Teilaufgabe) muessen sie hier trotzdem auffindbar sein.
+  return [...masters, ...masters.flatMap(m => m.childTasks ?? [])]
 }
 
 const allBoardTasks = computed(() => flattenBoard())
@@ -233,13 +236,63 @@ const canSaveDetail = computed(() => detailForm.title.trim().length > 0 && !deta
  */
 const canChangeState = computed(() => authStore.isIris || authStore.isBao)
 
+/* ── Board-Filter (Linear-Style Toolbar) ─────────── */
+const searchQuery = ref('')
+const ballFilter = ref<'all' | 'bao' | 'iris' | 'stalled'>('all')
+const ballFilters = [
+  { key: 'all', label: 'Alle' },
+  { key: 'bao', label: 'Du bist dran' },
+  { key: 'iris', label: 'Bei Iris' },
+  { key: 'stalled', label: 'Hängt' },
+] as const
+
+function minutesSince(dateStr?: string | null): number {
+  if (!dateStr) return Infinity
+  return (Date.now() - new Date(dateStr).getTime()) / 60000
+}
+
+function isStalledTask(t: DashboardTaskDto): boolean {
+  if (t.state.toLowerCase() !== 'in progress') return false
+  return minutesSince(t.lastActivityAt ?? t.updatedAt) > STALL_THRESHOLD_MIN
+}
+
+/** Ball = wer als Naechstes handeln muss (gleiche Logik wie BoardCard). */
+function ballOf(t: DashboardTaskDto): string | null {
+  const s = t.state.toLowerCase()
+  if (s === 'review') return 'bao'
+  if (s === 'done') return null
+  if (s === 'backlog') return t.expectedFrom || 'iris'
+  return t.expectedFrom || t.assignedTo || 'iris'
+}
+
+function matchesFilters(t: DashboardTaskDto): boolean {
+  const q = searchQuery.value.trim().toLowerCase()
+  if (q) {
+    const hay = [t.title, t.detail ?? '', t.id, ...(t.childTasks ?? []).map(c => c.title)]
+      .join(' ')
+      .toLowerCase()
+    if (!hay.includes(q)) return false
+  }
+  if (ballFilter.value === 'bao') return ballOf(t) === 'bao'
+  if (ballFilter.value === 'iris') return ballOf(t) === 'iris'
+  if (ballFilter.value === 'stalled') {
+    const children = t.childTasks ?? []
+    return children.length ? children.some(isStalledTask) : isStalledTask(t)
+  }
+  return true
+}
+
+function filterTasks(list: DashboardTaskDto[]): DashboardTaskDto[] {
+  return list.filter(matchesFilters)
+}
+
 /* Spalten-Konfiguration — Board zeigt nur Master-Tasks (Children nested in der Karte). */
 const columns = computed(() => [
-  { key: 'offen', name: 'Offen', tasks: taskStore.board.offen, dot: 'var(--st-queue)', ring: 'rgba(251,191,36,.25)' },
-  { key: 'inProgress', name: 'In Bearbeitung', tasks: taskStore.board.inProgress, dot: 'var(--st-work)', ring: 'rgba(61,220,151,.25)' },
-  { key: 'review', name: 'Review', tasks: taskStore.board.review, dot: '#fb923c', ring: 'rgba(251,146,60,.25)' },
-  { key: 'done', name: 'Erledigt', tasks: taskStore.board.done, dot: 'var(--st-work)', ring: 'rgba(61,220,151,.25)' },
-  { key: 'blocked', name: 'Blockiert', tasks: taskStore.board.blocked, dot: 'var(--st-block)', ring: 'rgba(251,113,133,.25)' },
+  { key: 'offen', name: 'Offen', tasks: filterTasks(taskStore.board.offen), dot: 'var(--st-queue)', ring: 'rgba(251,191,36,.25)' },
+  { key: 'inProgress', name: 'In Bearbeitung', tasks: filterTasks(taskStore.board.inProgress), dot: 'var(--st-work)', ring: 'rgba(61,220,151,.25)' },
+  { key: 'review', name: 'Review', tasks: filterTasks(taskStore.board.review), dot: '#fb923c', ring: 'rgba(251,146,60,.25)' },
+  { key: 'done', name: 'Erledigt', tasks: filterTasks(taskStore.board.done), dot: 'var(--st-work)', ring: 'rgba(61,220,151,.25)' },
+  { key: 'blocked', name: 'Blockiert', tasks: filterTasks(taskStore.board.blocked), dot: 'var(--st-block)', ring: 'rgba(251,113,133,.25)' },
 ])
 
 function hydrateDetailForm(task: BoardTask | null) {
@@ -335,6 +388,7 @@ async function openQuickPeek(taskId: string) {
 }
 
 function closeDetailPanel() {
+  commentText.value = ''
   showDetailPanel.value = false
   selectedTaskId.value = null
   childTasks.value = []
@@ -392,6 +446,55 @@ async function saveTaskDetail() {
   }
 }
 
+/* ── Detail-Modal: Kommentar, Link kopieren, Child-Summary ── */
+const commentText = ref('')
+const commentSending = ref(false)
+const linkCopied = ref(false)
+
+async function submitComment() {
+  const text = commentText.value.trim()
+  if (!text || !selectedTask.value || commentSending.value) return
+  commentSending.value = true
+  try {
+    await taskStore.postTaskActivity(selectedTask.value.id, text)
+    commentText.value = ''
+    taskActivity.value = await taskStore.fetchTaskActivity(selectedTask.value.id)
+  } catch (_err) {
+    detailError.value = 'Kommentar konnte nicht gespeichert werden'
+  } finally {
+    commentSending.value = false
+  }
+}
+
+function copyTaskLink() {
+  if (!selectedTask.value) return
+  navigator.clipboard?.writeText(`${window.location.origin}/tasks/${selectedTask.value.id}`)
+  linkCopied.value = true
+  setTimeout(() => { linkCopied.value = false }, 1500)
+}
+
+const childStats = computed(() => {
+  const list = childTasks.value
+  const done = list.filter(c => c.state === 'Done').length
+  const active = list.filter(c => c.state === 'In progress').length
+  const blocked = list.filter(c => c.state === 'Blocked').length
+  return { total: list.length, done, active, blocked, open: list.length - done - active - blocked }
+})
+
+const childAgentSummary = computed(() => {
+  const map = new Map<string, { done: number; total: number }>()
+  for (const c of childTasks.value) {
+    const key = c.assignedTo || 'unassigned'
+    const cur = map.get(key) ?? { done: 0, total: 0 }
+    cur.total++
+    if (c.state === 'Done') cur.done++
+    map.set(key, cur)
+  }
+  return [...map.entries()].map(([agent, stats]) => ({ agent, ...stats }))
+})
+
+const recentActivity = computed(() => taskActivity.value.slice(0, 8))
+
 function onGlobalKeydown(event: KeyboardEvent) {
   if (event.key === 'Escape' && showDetailPanel.value) {
     closeDetailPanel()
@@ -456,6 +559,23 @@ onUnmounted(() => {
       </div>
     </div>
 
+    <!-- Toolbar: Suche + Ball-Filter -->
+    <div class="board-toolbar">
+      <div class="tb-search">
+        <Search :size="14" />
+        <input v-model="searchQuery" type="text" placeholder="Tasks durchsuchen…" />
+        <button v-if="searchQuery" class="tb-clear" aria-label="Suche leeren" @click="searchQuery = ''">&times;</button>
+      </div>
+      <div class="tb-chips">
+        <button
+          v-for="f in ballFilters"
+          :key="f.key"
+          :class="['tb-chip', { active: ballFilter === f.key }]"
+          @click="ballFilter = f.key"
+        >{{ f.label }}</button>
+      </div>
+    </div>
+
     <!-- Status-Change Permission Banner -->
     <div v-if="!canChangeState" class="permission-banner">
       <ShieldBan :size="14" />
@@ -682,161 +802,145 @@ onUnmounted(() => {
     <Teleport to="body">
       <div v-if="showDetailPanel && selectedTask" class="detail-overlay" @click.self="closeDetailPanel">
         <aside class="detail-panel">
-          <div class="detail-topbar">
-            <div class="detail-breadcrumb">Task Board / {{ stateLabel(selectedTask.state) }}</div>
-            <button type="button" class="detail-close" @click="closeDetailPanel" aria-label="Detailansicht schließen">
-              <X :size="18" />
-            </button>
-          </div>
+          <!-- Topbar: Breadcrumb + ID + Aktionen -->
+          <header class="detail-topbar">
+            <div class="detail-crumb">
+              <span class="crumb-root">Task Board</span>
+              <span class="crumb-sep">/</span>
+              <span class="detail-state-pill" :class="statusTone(selectedTask.state)">{{ stateLabel(selectedTask.state) }}</span>
+              <button class="id-chip" :title="linkCopied ? 'Link kopiert!' : 'Link kopieren'" @click="copyTaskLink">
+                #{{ selectedTask.id.slice(0, 8) }}
+                <Check v-if="linkCopied" :size="11" />
+                <Copy v-else :size="11" />
+              </button>
+            </div>
+            <div class="detail-topbar-actions">
+              <template v-if="selectedTask.state === 'Review' && canChangeState">
+                <button class="btn btn-approve" @click="handleApprove(selectedTask.id); closeDetailPanel()"><Check :size="13" /> Abnehmen</button>
+                <button class="btn btn-changes" @click="openRequestChanges(selectedTask)"><RotateCcw :size="13" /> Änderung</button>
+              </template>
+              <button class="btn btn-ghost" @click="router.push('/tasks/' + selectedTask.id)"><ExternalLink :size="13" /> Vollansicht</button>
+              <button class="icon-btn" aria-label="Schließen" @click="closeDetailPanel"><X :size="16" /></button>
+            </div>
+          </header>
 
           <div class="detail-content">
-            <section class="detail-main">
-              <div class="detail-title-block">
-                <span class="detail-state-pill" :class="statusTone(selectedTask.state)">{{ stateLabel(selectedTask.state) }}</span>
-                <input v-model="detailForm.title" class="detail-title-input" maxlength="240" />
-                <div class="detail-meta-row">
-                  <span>#{{ selectedTask.id.slice(0, 8) }}</span>
-                  <span v-if="selectedTask.isAgentTask" class="meta-agent-tag">🤖 Agent-Task</span>
-                  <span v-if="selectedTask.expectedFrom" class="meta-expected">⏳ Erwartet: {{ selectedTask.expectedFrom }}</span>
-                  <span v-if="selectedTask.parentTaskId" class="meta-expected">↳ Child-Task</span>
-                  <span v-if="delegationBadge(selectedTask)" class="meta-expected">↳ {{ delegationBadge(selectedTask) }}</span>
-                  <span><Clock3 :size="13" /> Aktualisiert {{ formatDate(selectedTask.updatedAt, true) }}</span>
-                  <span><CalendarDays :size="13" /> Erstellt {{ formatDate(selectedTask.createdAt) }}</span>
-                  <span v-if="selectedTask.isAgentTask"><MessageSquareText :size="13" /> Letzter Status {{ relativeTime(selectedTask.lastActivityAt ?? selectedTask.updatedAt) }}</span>
-                </div>
-                <div v-if="selectedTask.isAgentTask || hasChildTasks(selectedTask.id)" class="detail-progress-banner">
-                  <strong>Letzter Fortschritt:</strong> {{ activityHint(selectedTask) }}
-                </div>
+            <!-- Hauptspalte: Titel, Chips, Beschreibung, Summary-Kacheln -->
+            <section class="detail-main v2-scroll">
+              <input v-model="detailForm.title" class="detail-title-input" maxlength="240" placeholder="Titel…" />
+
+              <div class="detail-chips">
+                <span v-if="ballOf(selectedTask)" class="meta-chip" :class="'ball-' + ballOf(selectedTask)">Ball: {{ expectedFromLabel(ballOf(selectedTask)) }}</span>
+                <span v-if="selectedTask.parentTaskId" class="meta-chip">Teilaufgabe</span>
+                <span v-else-if="selectedTask.isAgentTask" class="meta-chip">Agent-Task</span>
+                <span class="meta-chip dim">Erstellt {{ formatDate(selectedTask.createdAt) }}</span>
+                <span class="meta-chip dim">Update {{ relativeTime(selectedTask.lastActivityAt ?? selectedTask.updatedAt) }}</span>
               </div>
 
-              <div class="detail-section">
-                <div class="detail-section-header">Beschreibung</div>
-                <textarea
-                  v-model="detailForm.detail"
-                  class="detail-textarea"
-                  rows="8"
-                  placeholder="Mehr Kontext, Akzeptanzkriterien oder Notizen…"
-                ></textarea>
-              </div>
+              <textarea
+                v-model="detailForm.detail"
+                class="detail-desc"
+                rows="5"
+                placeholder="Beschreibung, Kontext, Akzeptanzkriterien…"
+              ></textarea>
 
-              <div class="detail-grid">
-                <section class="detail-section">
-                  <div class="detail-section-header"><ListChecks :size="14" /> Unteraufgaben</div>
-                  <div v-if="detailLoading" class="detail-empty">Lade…</div>
-                  <div v-else-if="childTasks.length" class="detail-stack">
-                    <article v-for="child in childTasks" :key="child.id" class="mini-card">
-                      <div class="mini-card-row">
-                        <span class="mini-title">{{ child.title }}</span>
-                        <span class="mini-state">{{ stateLabel(child.state) }}</span>
-                      </div>
-                      <p v-if="child.detail" class="mini-copy">{{ child.detail }}</p>
-                    </article>
+              <div v-if="detailLoading" class="detail-empty">Lade…</div>
+              <template v-else-if="childStats.total">
+                <div class="tile-grid">
+                  <div class="tile">
+                    <span class="tile-num">{{ childStats.done }}<small>/{{ childStats.total }}</small></span>
+                    <span class="tile-label">Fertig</span>
+                    <div class="tile-track"><div class="tile-fill" :style="{ width: Math.round(childStats.done / childStats.total * 100) + '%' }"></div></div>
                   </div>
-                  <div v-else class="detail-empty">Noch keine Unteraufgaben verknüpft.</div>
-                </section>
-
-                <section class="detail-section">
-                  <div class="detail-section-header"><Link2 :size="14" /> Aktivität</div>
-                  <div v-if="detailLoading" class="detail-empty">Lade…</div>
-                  <div v-else-if="taskActivity.length" class="activity-list">
-                    <article v-for="(entry, index) in taskActivity" :key="entry.id ?? index" class="activity-item">
-                      <div class="activity-dot"></div>
-                      <div>
-                        <div class="activity-message">{{ entry.message ?? 'Aktivität' }}</div>
-                        <div class="activity-time">{{ formatDate(entry.createdAt ?? entry.timestamp ?? null, true) }}</div>
-                      </div>
-                    </article>
-                  </div>
-                  <div v-else class="detail-empty">Noch keine Aktivität vorhanden.</div>
-                </section>
-              </div>
+                  <div class="tile"><span class="tile-num t-active">{{ childStats.active }}</span><span class="tile-label">Aktiv</span></div>
+                  <div class="tile"><span class="tile-num t-open">{{ childStats.open }}</span><span class="tile-label">Offen</span></div>
+                  <div class="tile"><span class="tile-num t-blocked">{{ childStats.blocked }}</span><span class="tile-label">Blockiert</span></div>
+                </div>
+                <div class="agent-summary">
+                  <button
+                    v-for="g in childAgentSummary"
+                    :key="g.agent"
+                    class="agent-pill"
+                    title="Details in der Vollansicht"
+                    @click="router.push('/tasks/' + selectedTask.id)"
+                  >{{ expectedFromLabel(g.agent) }} <b>{{ g.done }}/{{ g.total }}</b></button>
+                </div>
+              </template>
             </section>
 
-            <aside class="detail-sidebar">
-              <section class="sidebar-card">
-                <div class="sidebar-heading">Eigenschaften</div>
-                <label class="sidebar-field">
-                  <span>Status <span v-if="!canChangeState" class="readonly-tag">(nur Iris/Bao)</span></span>
-                  <select
-                    v-model="detailForm.state"
-                    class="field-input field-select slim"
-                    :disabled="!canChangeState"
-                    :title="!canChangeState ? 'Statusänderungen sind nur Iris und Bao vorbehalten' : ''"
-                  >
+            <!-- Seitenleiste: Eigenschaften + Aktivität -->
+            <aside class="detail-side v2-scroll">
+              <section class="side-block">
+                <div class="side-heading">Eigenschaften</div>
+                <div class="prop-row">
+                  <span class="prop-label">Status</span>
+                  <select v-model="detailForm.state" class="prop-control" :disabled="!canChangeState" :title="!canChangeState ? 'Nur Iris und Bao' : ''">
                     <option value="Backlog">Offen</option>
                     <option value="In progress">In Bearbeitung</option>
                     <option value="Review">Review</option>
                     <option value="Blocked">Blockiert</option>
                     <option value="Done">Erledigt</option>
                   </select>
-                </label>
-                <label class="sidebar-field">
-                  <span>Priorität</span>
-                  <select v-model="detailForm.priority" class="field-input field-select slim">
+                </div>
+                <div class="prop-row">
+                  <span class="prop-label">Priorität</span>
+                  <select v-model="detailForm.priority" class="prop-control">
                     <option value="High">High</option>
                     <option value="Medium">Medium</option>
                     <option value="Low">Low</option>
                   </select>
-                </label>
-                <label class="sidebar-field">
-                  <span>Zuständig</span>
-                  <select v-model="detailForm.assignedTo" class="field-input field-select slim">
-                    <option v-for="option in TASK_AGENT_OPTIONS" :key="option.id || 'unassigned'" :value="option.id">
-                      {{ option.label }}
-                    </option>
+                </div>
+                <div class="prop-row">
+                  <span class="prop-label">Zuständig</span>
+                  <select v-model="detailForm.assignedTo" class="prop-control">
+                    <option v-for="option in TASK_AGENT_OPTIONS" :key="option.id || 'none'" :value="option.id">{{ option.label }}</option>
                   </select>
-                </label>
-                <label class="sidebar-field">
-                  <span>Fällig am</span>
-                  <input v-model="detailForm.dueDate" type="date" class="field-input slim" />
-                </label>
+                </div>
+                <div class="prop-row">
+                  <span class="prop-label">Fällig</span>
+                  <input v-model="detailForm.dueDate" type="date" class="prop-control" />
+                </div>
+                <div class="prop-row">
+                  <span class="prop-label">Quelle</span>
+                  <span class="prop-static">{{ selectedTask.source || '—' }}</span>
+                </div>
               </section>
 
-              <section class="sidebar-card subtle">
-                <div class="sidebar-heading">Snapshot</div>
-                <dl class="snapshot-list">
-                  <div>
-                    <dt>Quelle</dt>
-                    <dd>{{ selectedTask.source || '—' }}</dd>
+              <section class="side-block side-activity">
+                <div class="side-heading">Aktivität <span v-if="taskActivity.length" class="side-count">{{ taskActivity.length }}</span></div>
+                <div v-if="detailLoading" class="detail-empty">Lade…</div>
+                <div v-else-if="recentActivity.length" class="mini-timeline v2-scroll">
+                  <div v-for="(entry, index) in recentActivity" :key="entry.id ?? index" class="mini-entry">
+                    <span class="mini-dot"></span>
+                    <div class="mini-body">
+                      <div class="mini-msg">{{ entry.message ?? 'Aktivität' }}</div>
+                      <div class="mini-time">{{ relativeTime(entry.createdAt ?? entry.timestamp ?? null) }}</div>
+                    </div>
                   </div>
-                  <div>
-                    <dt>Priorität</dt>
-                    <dd>{{ selectedTask.priority }}</dd>
-                  </div>
-                  <div>
-                    <dt>Fällig</dt>
-                    <dd>{{ formatDate(selectedTask.dueDate) }}</dd>
-                  </div>
-                  <div v-if="selectedTask.isAgentTask">
-                    <dt>Agent-Task</dt>
-                    <dd>🤖 Ja</dd>
-                  </div>
-                  <div v-if="selectedTask.expectedFrom">
-                    <dt>Erwartet von</dt>
-                    <dd>{{ selectedTask.expectedFrom }}</dd>
-                  </div>
-                  <div v-if="selectedTask.parentTaskId">
-                    <dt>Task-Typ</dt>
-                    <dd>Sichtbare Child-Task</dd>
-                  </div>
-                </dl>
+                </div>
+                <div v-else class="detail-empty">Noch keine Aktivität.</div>
+                <div class="comment-box">
+                  <input
+                    v-model="commentText"
+                    type="text"
+                    placeholder="Kommentar hinzufügen…"
+                    @keydown.enter.prevent="submitComment"
+                  />
+                  <button class="icon-btn send-btn" :disabled="!commentText.trim() || commentSending" aria-label="Kommentar senden" @click="submitComment"><Send :size="14" /></button>
+                </div>
               </section>
-
-              <p v-if="detailError" class="detail-flash error">{{ detailError }}</p>
-              <p v-else-if="detailSuccess" class="detail-flash success">{{ detailSuccess }}</p>
-
-              <div class="detail-actions">
-                <button type="button" class="btn-cancel" @click="closeDetailPanel">Schließen</button>
-                <button type="button" class="btn-ghost" @click="router.push('/tasks/' + selectedTask.id)">
-                  <ExternalLink :size="13" /> Vollansicht öffnen
-                </button>
-                <button type="button" class="btn-submit" :disabled="!canSaveDetail || (detailForm.state !== selectedTask.state && !canChangeState)" @click="saveTaskDetail">
-                  <Save :size="14" />
-                  {{ detailSaving ? 'Speichert…' : 'Speichern' }}
-                </button>
-              </div>
             </aside>
           </div>
+
+          <footer class="detail-footer">
+            <p v-if="detailError" class="detail-flash error">{{ detailError }}</p>
+            <p v-else-if="detailSuccess" class="detail-flash success">{{ detailSuccess }}</p>
+            <span class="footer-spacer"></span>
+            <button class="btn btn-ghost" @click="closeDetailPanel">Schließen</button>
+            <button class="btn btn-primary" :disabled="!canSaveDetail || (detailForm.state !== selectedTask.state && !canChangeState)" @click="saveTaskDetail">
+              <Save :size="13" /> {{ detailSaving ? 'Speichert…' : 'Speichern' }}
+            </button>
+          </footer>
         </aside>
       </div>
     </Teleport>
@@ -954,63 +1058,126 @@ select:disabled { opacity: .45; cursor: not-allowed; }
 .form-error, .detail-flash.error { color: var(--st-block); font-size: 11px; margin: 0; font-family: 'Manrope', sans-serif; }
 .detail-flash.success { color: #86efac; font-size: 11px; margin: 0; }
 .modal-actions, .detail-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
-.btn-cancel { padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: transparent; color: var(--tx-2); font-size: 12px; font-weight: 500; font-family: 'Manrope', sans-serif; cursor: pointer; transition: background .15s, color .15s; }
+.btn-cancel { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--tx-2); font-size: 12px; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer; transition: background .15s, color .15s; }
 .btn-cancel:hover { background: rgba(124,108,255,.08); color: var(--tx); }
-.btn-ghost { padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: transparent; color: var(--tx-2); font-size: 12px; font-weight: 500; font-family: 'Manrope', sans-serif; cursor: pointer; transition: background .15s, color .15s; display: inline-flex; align-items: center; gap: 6px; }
+.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--tx-2); font-size: 12px; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer; transition: background .15s, color .15s; }
 .btn-ghost:hover { background: rgba(124,108,255,.08); color: var(--tx); }
-.btn-submit { padding: 7px 18px; border: none; border-radius: var(--r-sm, 10px); background: var(--grad); color: #fff; font-size: 12px; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer; transition: opacity .15s, transform .15s; box-shadow: var(--glow-purple); display: inline-flex; align-items: center; gap: 6px; }
+.btn-submit { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 16px; border: none; border-radius: 9px; background: var(--grad); color: #fff; font-size: 12px; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer; transition: opacity .15s, transform .15s; box-shadow: var(--glow-purple); }
 .btn-submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
 .btn-submit:not(:disabled):hover { opacity: .85; transform: translateY(-1px); }
 
-/* Detail Panel */
-.detail-panel { width: min(1120px, calc(100vw - 48px)); height: min(88vh, 860px); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(13,11,28,.97), rgba(10,9,24,.96)); border: 1px solid rgba(124,108,255,.18); border-radius: 22px; box-shadow: 0 28px 90px rgba(0,0,0,.45); overflow: hidden; }
-.detail-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
-.detail-breadcrumb { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
-.detail-content { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; flex: 1; }
-.detail-main { padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
-.detail-sidebar { padding: 24px; border-left: 1px solid var(--line); background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: 14px; }
-.detail-title-block { display: flex; flex-direction: column; gap: 12px; }
-.detail-state-pill { width: fit-content; border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 700; letter-spacing: .03em; border: 1px solid transparent; }
+/* ── Toolbar (Suche + Ball-Filter) ── */
+.board-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.tb-search { display: flex; align-items: center; gap: 8px; flex: 0 1 320px; min-width: 200px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(124,108,255,.05); color: var(--tx-3); transition: border-color .15s; }
+.tb-search:focus-within { border-color: var(--a-mid); }
+.tb-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--tx); font-size: 12.5px; font-family: 'Manrope', sans-serif; }
+.tb-clear { border: none; background: transparent; color: var(--tx-3); font-size: 15px; cursor: pointer; padding: 0 2px; }
+.tb-clear:hover { color: var(--tx); }
+.tb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
+.tb-chip { height: 28px; padding: 0 12px; border-radius: 20px; border: 1px solid var(--line); background: transparent; color: var(--tx-2); font-size: 11.5px; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
+.tb-chip:hover { background: rgba(124,108,255,.08); color: var(--tx); }
+.tb-chip.active { background: linear-gradient(90deg, rgba(124,108,255,.22), rgba(124,108,255,.06)); border-color: rgba(124,108,255,.35); color: #fff; }
+
+/* ── Buttons (einheitliches System) ── */
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 9px; font-size: 12px; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer; border: 1px solid transparent; transition: background .15s, color .15s, filter .15s; }
+.btn-primary { border: none; background: var(--grad); color: #fff; box-shadow: var(--glow-purple); }
+.btn-primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
+.btn-primary:not(:disabled):hover { filter: brightness(1.08); }
+.btn-approve { border-color: rgba(61,220,151,.3); background: rgba(61,220,151,.14); color: var(--st-work); }
+.btn-approve:hover { background: rgba(61,220,151,.24); }
+.btn-changes { border-color: rgba(251,146,60,.3); background: rgba(251,146,60,.12); color: #fdba74; }
+.btn-changes:hover { background: rgba(251,146,60,.22); }
+.icon-btn { width: 30px; height: 30px; display: grid; place-items: center; border: none; border-radius: 8px; background: transparent; color: var(--tx-3); cursor: pointer; transition: background .15s, color .15s; }
+.icon-btn:hover { background: rgba(124,108,255,.1); color: var(--tx); }
+
+/* ── Detail Panel (Quick Peek — kompakte Zusammenfassung) ── */
+.detail-panel { width: min(880px, calc(100vw - 40px)); max-height: min(84vh, 780px); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(15,13,32,.97), rgba(10,9,24,.97)); border: 1px solid rgba(124,108,255,.18); border-radius: 18px; box-shadow: 0 28px 90px rgba(0,0,0,.5); overflow: hidden; }
+.detail-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
+.detail-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.crumb-root { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--tx-3); white-space: nowrap; }
+.crumb-sep { color: var(--tx-3); font-size: 11px; }
+.id-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line); background: rgba(124,108,255,.06); color: var(--tx-3); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; cursor: pointer; transition: color .15s, border-color .15s; }
+.id-chip:hover { color: var(--tx); border-color: var(--line-2); }
+.detail-topbar-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
+
+.detail-state-pill { border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; border: 1px solid transparent; white-space: nowrap; }
 .detail-state-pill.is-backlog { color: #fde68a; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.25); }
 .detail-state-pill.is-progress { color: #86efac; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); }
 .detail-state-pill.is-review { color: #fdba74; background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.25); }
 .detail-state-pill.is-blocked { color: #fda4af; background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.25); }
 .detail-state-pill.is-done { color: #86efac; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); }
-.detail-title-input { background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 0; color: var(--tx); font-family: 'Space Grotesk', sans-serif; font-size: 31px; font-weight: 700; letter-spacing: -0.03em; outline: none; }
-.detail-meta-row { display: flex; flex-wrap: wrap; gap: 14px; color: var(--tx-3); font-size: 11.5px; }
-.detail-meta-row span { display: inline-flex; align-items: center; gap: 5px; }
-.meta-agent-tag { color: #c084fc; }
-.meta-expected { color: #a78bfa; }
-.detail-progress-banner { padding: 10px 12px; border-radius: 12px; background: rgba(124,108,255,.08); border: 1px solid rgba(124,108,255,.14); color: var(--tx-2); font-size: 12px; }
-.detail-section { background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
-.detail-section-header, .sidebar-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--tx-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
-.detail-textarea { width: 100%; min-height: 180px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10,9,24,.55); color: var(--tx); padding: 14px; font-size: 14px; line-height: 1.6; outline: none; box-sizing: border-box; }
-.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
-.detail-stack, .activity-list { display: flex; flex-direction: column; gap: 10px; }
-.mini-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: rgba(10,9,24,.45); }
-.mini-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.mini-title { font-size: 13px; font-weight: 600; color: var(--tx); }
-.mini-state { font-size: 10px; color: var(--tx-3); text-transform: uppercase; letter-spacing: .05em; }
-.mini-copy { margin: 8px 0 0; font-size: 11.5px; color: var(--tx-2); line-height: 1.5; }
-.activity-item { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: start; }
-.activity-dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 5px; background: linear-gradient(135deg, #8b5cf6, #3b82f6); box-shadow: 0 0 0 4px rgba(124,108,255,.12); }
-.activity-message { color: var(--tx); font-size: 12.5px; line-height: 1.45; }
-.activity-time { color: var(--tx-3); font-size: 10.5px; margin-top: 4px; }
-.sidebar-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: rgba(10,9,24,.45); }
-.sidebar-card.subtle { background: rgba(255,255,255,.02); }
-.sidebar-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
-.sidebar-field:last-child { margin-bottom: 0; }
-.slim { min-height: 38px; }
-.snapshot-list { display: flex; flex-direction: column; gap: 12px; margin: 0; }
-.snapshot-list div { display: flex; justify-content: space-between; gap: 12px; }
-.snapshot-list dt { color: var(--tx-3); font-size: 11px; }
-.snapshot-list dd { margin: 0; color: var(--tx); font-size: 12px; text-align: right; }
+
+.detail-content { display: grid; grid-template-columns: minmax(0, 1fr) 292px; min-height: 0; flex: 1; }
+.detail-main { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
+.detail-title-input { background: transparent; border: none; padding: 0; color: var(--tx); font-family: 'Space Grotesk', sans-serif; font-size: 23px; font-weight: 700; letter-spacing: -0.02em; outline: none; width: 100%; }
+.detail-title-input:focus { box-shadow: none; }
+
+.detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.meta-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; background: rgba(124,108,255,.09); border: 1px solid rgba(124,108,255,.16); color: var(--tx-2); font-family: 'Manrope', sans-serif; }
+.meta-chip.dim { background: transparent; border-color: var(--line); color: var(--tx-3); font-weight: 500; }
+.meta-chip.ball-bao { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.3); color: #60a5fa; }
+.meta-chip.ball-iris { background: rgba(147,51,234,.14); border-color: rgba(147,51,234,.3); color: #c084fc; }
+
+.detail-desc { width: 100%; min-height: 96px; max-height: 220px; border-radius: 11px; border: 1px solid var(--line); background: rgba(10,9,24,.5); color: var(--tx); padding: 11px 13px; font-size: 12.5px; line-height: 1.6; outline: none; resize: vertical; box-sizing: border-box; font-family: 'Manrope', sans-serif; transition: border-color .15s; }
+.detail-desc:focus { border-color: var(--a-mid); box-shadow: none; }
+
+/* Summary-Kacheln (quadratisch) */
+.tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
+.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 1.15 / 1; border: 1px solid var(--line); border-radius: 13px; background: rgba(28,24,64,.28); padding: 10px; }
+.tile-num { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; color: var(--tx); line-height: 1; }
+.tile-num small { font-size: 14px; color: var(--tx-3); font-weight: 600; }
+.tile-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--tx-3); font-weight: 600; text-align: center; }
+.tile-track { width: 70%; height: 4px; border-radius: 2px; background: var(--space-3); overflow: hidden; margin-top: 4px; }
+.tile-fill { height: 100%; background: var(--grad); }
+.t-active { color: var(--st-think); }
+.t-open { color: var(--st-queue); }
+.t-blocked { color: var(--st-block); }
+
+.agent-summary { display: flex; flex-wrap: wrap; gap: 6px; }
+.agent-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 20px; border: 1px solid var(--line); background: rgba(16,185,129,.07); color: var(--tx-2); font-size: 11px; font-family: 'Manrope', sans-serif; cursor: pointer; transition: border-color .15s, color .15s; }
+.agent-pill b { color: var(--tx); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; }
+.agent-pill:hover { border-color: var(--line-2); color: var(--tx); }
+
+/* Seitenleiste: Eigenschaften + Aktivität */
+.detail-side { border-left: 1px solid var(--line); background: rgba(255,255,255,.015); padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
+.side-block { display: flex; flex-direction: column; gap: 2px; }
+.side-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: var(--tx-3); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
+.side-count { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; padding: 0 6px; border-radius: 8px; background: var(--glass-2); color: var(--tx-3); }
+.prop-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 32px; border-radius: 8px; padding: 0 6px; transition: background .15s; }
+.prop-row:hover { background: rgba(124,108,255,.05); }
+.prop-label { font-size: 11px; color: var(--tx-3); font-family: 'Manrope', sans-serif; }
+.prop-control { width: 100%; height: 28px; padding: 0 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--tx); font-size: 12px; font-family: 'Manrope', sans-serif; outline: none; cursor: pointer; transition: border-color .15s, background .15s; box-sizing: border-box; }
+.prop-row:hover .prop-control:not(:disabled) { border-color: var(--line); background: rgba(10,9,24,.5); }
+.prop-control:focus { border-color: var(--a-mid); background: rgba(10,9,24,.6); }
+.prop-control:disabled { opacity: .5; cursor: not-allowed; }
+select.prop-control option { background: var(--space-2); color: var(--tx); }
+.prop-static { font-size: 12px; color: var(--tx-2); padding: 0 7px; }
+
+.side-activity { flex: 1; min-height: 0; }
+.mini-timeline { display: flex; flex-direction: column; gap: 9px; overflow-y: auto; max-height: 236px; padding-right: 3px; }
+.mini-entry { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 8px; }
+.mini-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 5px; background: var(--a-mid); box-shadow: 0 0 0 3px rgba(124,108,255,.12); }
+.mini-msg { font-size: 11px; color: var(--tx-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.mini-time { font-size: 9.5px; color: var(--tx-3); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }
+.comment-box { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 4px 4px 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10,9,24,.5); transition: border-color .15s; flex: 0 0 auto; }
+.comment-box:focus-within { border-color: var(--a-mid); }
+.comment-box input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--tx); font-size: 12px; font-family: 'Manrope', sans-serif; }
+.send-btn { width: 26px; height: 26px; border-radius: 7px; background: rgba(124,108,255,.14); color: var(--a-mid); flex: 0 0 auto; }
+.send-btn:disabled { opacity: .4; cursor: not-allowed; }
+.send-btn:not(:disabled):hover { background: rgba(124,108,255,.24); color: var(--tx); }
+
+/* Footer */
+.detail-footer { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--line); flex: 0 0 auto; }
+.footer-spacer { flex: 1; }
+.detail-flash.error { color: var(--st-block); font-size: 11px; margin: 0; }
+.detail-flash.success { color: var(--st-work); font-size: 11px; margin: 0; }
+
 .board-columns::-webkit-scrollbar { height: 9px; }
 .board-columns::-webkit-scrollbar-thumb { background: rgba(124,108,255,.22); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
 .board-columns::-webkit-scrollbar-thumb:hover { background: rgba(124,108,255,.4); background-clip: padding-box; }
 .board-columns::-webkit-scrollbar-track { background: transparent; }
-@media (max-width: 1100px) { .detail-content { grid-template-columns: 1fr; } .detail-sidebar { border-left: none; border-top: 1px solid var(--line); } }
-@media (max-width: 860px) { .board-columns { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .col { min-width: 260px; } .detail-panel { width: 100vw; height: 100vh; border-radius: 0; } .detail-grid { grid-template-columns: 1fr; } .detail-main, .detail-sidebar { padding: 18px; } .detail-title-input { font-size: 24px; } }
+@media (max-width: 1100px) { .detail-content { grid-template-columns: 1fr; } .detail-side { border-left: none; border-top: 1px solid var(--line); } }
+@media (max-width: 860px) { .board-columns { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .col { min-width: 260px; } .detail-panel { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; } .detail-main { padding: 14px; } .detail-side { padding: 12px 14px; } .detail-title-input { font-size: 19px; } .tile-grid { grid-template-columns: repeat(2, 1fr); } }
 @media (max-width: 900px) { .iris-panel-grid { grid-template-columns: repeat(2, 1fr); } }
 @media (max-width: 600px) { .iris-panel-grid { grid-template-columns: 1fr; } }
 </style>