feat(ui): V2 Design-Fundament — UI-Komponenten konsolidieren und tokenisieren

## Neue wiederverwendbare Komponenten in components/ui/:
- StatusDot.vue — Animierte Status-Punkte (work/think/idle/block/queue)
- PageHeading.vue — Standardisierter Gradient-Seiten-Header
- EmptyState.vue — Shared Empty-State mit Icon/Title/Description/Action
- ActivityTimeline.vue — Wiederverwendbarer Aktivitäts-Feed
- SectionHeader.vue — Spalten-/Sektions-Header (dot + label + count)

## Token-Konformität hergestellt:
- Badge.vue: +12 nexus-token-basierte Varianten (work/think/blocked/queue/done/review/iris/bao/agent/priority*)
- Card.vue: glass-panel/raised/subtle Varianten via nexus-tokens.css
- button/index.ts: +gradient, +icon, +ghostSubtle, +danger Varianten
- nexus-tokens.css: Buttons + --clr-* Semantic Colors (iris/bao/agent/review/stale/other)

## Hartkodierte Farben eliminiert (0 verbleibend):
- dashboard/v2/*: alle #hex → var(--)* ersetzt
- components/ui/*: alle #hex → var(--)* ersetzt

Task: ea7c2063
Build: ✅ grün

frontend/src/components/ui/SectionHeader.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+/**
+ * SectionHeader — Titelzeile für Sektionen/Spalten im Dashboard V2
+ *
+ * Kapselt wiederholtes Muster: dot + label + count aus TaskBoard-Spalten
+ * und Iris-Panel-Sektionen. Verwendet ausschließlich Token-Farben.
+ */
+
+withDefaults(defineProps<{
+  label: string
+  /** Status-Farbe des Dots: 'work' | 'think' | 'idle' | 'block' | 'queue' | 'review' | 'iris' | 'bao' */
+  dotColor?: 'work' | 'think' | 'idle' | 'block' | 'queue' | 'review' | 'iris' | 'bao'
+  /** Numerischer Count (rechts) */
+  count?: number
+  /** Variante: 'column' (Spalten-Header) oder 'section' (Iris-Panel) */
+  variant?: 'column' | 'section'
+}>(), {
+  variant: 'column',
+})
+
+function dotColorVar(color: string): string {
+  const map: Record<string, string> = {
+    work: 'var(--st-work)',
+    think: 'var(--st-think)',
+    idle: 'var(--st-idle)',
+    block: 'var(--st-block)',
+    queue: 'var(--st-queue)',
+    review: 'var(--st-queue)',    // orange-ähnlich
+    iris: 'var(--a-purple)',
+    bao: 'var(--a-blue)',
+  }
+  return map[color] || 'var(--st-idle)'
+}
+
+function dotRingVar(color: string): string {
+  const map: Record<string, string> = {
+    work: 'rgba(61, 220, 151, .25)',
+    think: 'rgba(52, 214, 245, .25)',
+    idle: 'rgba(107, 103, 150, .25)',
+    block: 'rgba(251, 113, 133, .25)',
+    queue: 'rgba(251, 191, 36, .25)',
+    review: 'rgba(251, 146, 60, .25)',
+    iris: 'rgba(181, 87, 246, .25)',
+    bao: 'rgba(79, 124, 255, .25)',
+  }
+  return map[color] || 'rgba(107, 103, 150, .25)'
+}
+</script>
+
+<template>
+  <div class="section-header" :class="variant">
+    <span
+      class="section-dot"
+      :style="{
+        background: dotColorVar(dotColor || 'idle'),
+        boxShadow: `0 0 0 2px ${dotRingVar(dotColor || 'idle')}`,
+      }"
+    ></span>
+    <span class="section-label">{{ label }}</span>
+    <span v-if="count !== undefined" class="section-count">{{ count }}</span>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.section-header.column {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--line);
+}
+
+.section-header.section {
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--line);
+}
+
+.section-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+}
+
+.section-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: var(--tx-2);
+  font-family: 'Space Grotesk', sans-serif;
+}
+
+.section-header.section .section-label {
+  font-size: 11px;
+}
+
+.section-count {
+  margin-left: auto;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: var(--glass-2);
+  color: var(--tx-2);
+  border: 1px solid var(--line);
+}
+</style>