feat: merge Merkliste into Pipeline (SAVED stage) + Anfragen chat page

- Remove standalone Merkliste/Shortlists nav item; pipeline now covers the full funnel
- Add SAVED as first PipelineStage — 'Merken' on result cards lands here
- pipelineStore (Zustand) holds shared items; AddToPipelineDialog replaces AddToShortlistDialog in demand workspace
- New /demand/anfragen split-panel: searchable inquiry list + chat thread with compose
- Pipeline detail panel: KI insight, stage actions, editable notes, mock documents
- ShortlistItemCard: cards clickable → property detail, Anfrage button with inline dialog
- Supply workspace (FutureAvailability, Anfragencenter) unchanged

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/demand/Pipeline.tsx

@@ -1,244 +1,470 @@
 import { useState } from 'react'
-import { Box, Typography, Chip, Paper, Button } from '@mui/material'
+import {
+  Box, Typography, Chip, Paper, Button, IconButton,
+  TextField, Divider,
+} from '@mui/material'
+import { X, Sparkles, FileText, StickyNote, ChevronRight, TrendingUp, AlertTriangle, CheckCircle, Bookmark } from 'lucide-react'
+import { usePipelineStore } from '../../stores/pipelineStore'
+import { AddToPipelineDialog } from '../../components/shortlist'
 import type { PipelineItem, PipelineStage } from '../../domain/pipeline'
-import { mockPipelineItems } from '../../mock-data/pipelineItems'
+
+// ── Stage config ─────────────────────────────────────────────────────────────
 
 const STAGES = [
-  { key: 'DISCOVERED' as PipelineStage,  label: 'Entdeckt',     color: '#475569', bgColor: '#f8fafc' },
-  { key: 'QUALIFIED' as PipelineStage,   label: 'Qualifiziert',  color: '#1e3a5f', bgColor: '#eff6ff' },
-  { key: 'VISITED' as PipelineStage,     label: 'Besichtigt',    color: '#d97706', bgColor: '#fffbeb' },
-  { key: 'NEGOTIATION' as PipelineStage, label: 'Verhandlung',   color: '#7c3aed', bgColor: '#faf5ff' },
-  { key: 'CLOSED_WON' as PipelineStage,  label: 'Gewonnen',      color: '#1a7a4a', bgColor: '#f0fdf4' },
-  { key: 'CLOSED_LOST' as PipelineStage, label: 'Abgelehnt',     color: '#c0392b', bgColor: '#fef2f2' },
+  { key: 'SAVED' as PipelineStage, label: 'Gemerkt', color: '#475569', bgColor: '#f8fafc', icon: Bookmark },
+  { key: 'DISCOVERED' as PipelineStage, label: 'Entdeckt', color: '#0369a1', bgColor: '#f0f9ff', icon: null },
+  { key: 'QUALIFIED' as PipelineStage, label: 'Qualifiziert', color: '#1e3a5f', bgColor: '#eff6ff', icon: null },
+  { key: 'VISITED' as PipelineStage, label: 'Besichtigt', color: '#d97706', bgColor: '#fffbeb', icon: null },
+  { key: 'NEGOTIATION' as PipelineStage, label: 'Verhandlung', color: '#7c3aed', bgColor: '#faf5ff', icon: null },
+  { key: 'CLOSED_WON' as PipelineStage, label: 'Gewonnen', color: '#1a7a4a', bgColor: '#f0fdf4', icon: null },
+  { key: 'CLOSED_LOST' as PipelineStage, label: 'Abgelehnt', color: '#c0392b', bgColor: '#fef2f2', icon: null },
 ] as const
 
-const NEXT_STAGE_LABEL: Partial<Record<PipelineStage, string>> = {
-  DISCOVERED: 'Qualifizieren →',
-  QUALIFIED: 'Besichtigung planen →',
-  VISITED: 'Verhandlung →',
-  NEGOTIATION: 'Als gewonnen markieren →',
+const NEXT_STAGE: Partial<Record<PipelineStage, { key: PipelineStage; label: string }>> = {
+  SAVED: { key: 'DISCOVERED', label: 'Als entdeckt markieren' },
+  DISCOVERED: { key: 'QUALIFIED', label: 'Qualifizieren' },
+  QUALIFIED: { key: 'VISITED', label: 'Besichtigung planen' },
+  VISITED: { key: 'NEGOTIATION', label: 'Verhandlung starten' },
+  NEGOTIATION: { key: 'CLOSED_WON', label: 'Als gewonnen markieren' },
 }
 
-const RESULT_TYPE_LABEL: Record<PipelineItem['resultType'], string> = {
+const RESULT_TYPE_LABEL: Record<string, string> = {
   VERIFIED_PORTFOLIO: 'Portfolio',
   EXTERNAL_MARKET: 'Direktinserat',
   MAISON_WORK: 'Maison Work',
-  FUTURE_AVAILABILITY: 'Future Availability',
+  FUTURE_AVAILABILITY: 'Future',
 }
 
-const RESULT_TYPE_COLOR: Record<PipelineItem['resultType'], string> = {
+const RESULT_TYPE_COLOR: Record<string, string> = {
   VERIFIED_PORTFOLIO: '#1e3a5f',
   EXTERNAL_MARKET: '#d97706',
   MAISON_WORK: '#0369a1',
   FUTURE_AVAILABILITY: '#7c3aed',
 }
 
-function scoreColor(score: number): string {
-  if (score >= 80) return '#1a7a4a'
-  if (score >= 65) return '#d97706'
-  return '#c0392b'
+const MOCK_DOCS: Record<string, { name: string; date: string }[]> = {
+  'pl-001': [
+    { name: 'Expose_Zollstrasse12.pdf', date: '05.05.2026' },
+    { name: 'Grundriss_EG.pdf', date: '08.05.2026' },
+    { name: 'Mietvertrag_Entwurf.docx', date: '14.05.2026' },
+  ],
+  'pl-007': [
+    { name: 'Expose_Stadthaus_Bern.pdf', date: '12.04.2026' },
+    { name: 'Mietvertrag_unterschrieben.pdf', date: '02.05.2026' },
+  ],
 }
 
+function scoreColor(score: number) {
+  return score >= 80 ? '#1a7a4a' : score >= 65 ? '#d97706' : '#c0392b'
+}
+
+function getKiInsight(item: PipelineItem): { summary: string; positives: string[]; risks: string[] } {
+  if (item.stage === 'SAVED') {
+    return {
+      summary: `Merkliste-Eintrag mit ${item.matchScore}% Match. Prüfen Sie, ob dieses Objekt für die Qualifizierung geeignet ist.`,
+      positives: [`Match-Score ${item.matchScore}%`],
+      risks: ['Noch nicht qualifiziert — Eignung prüfen'],
+    }
+  }
+  if (item.stage === 'CLOSED_WON') {
+    return {
+      summary: `Abschluss erfolgreich. ${item.title} wurde zu ${item.matchScore}% Match-Score abgeschlossen.`,
+      positives: ['Vertraglich gesichert', `Match ${item.matchScore}%`, 'Alle Kriterien erfüllt'],
+      risks: [],
+    }
+  }
+  if (item.stage === 'CLOSED_LOST') {
+    return {
+      summary: item.notes ?? 'Objekt nicht realisiert.',
+      positives: [],
+      risks: ['Nicht verfügbar', 'Alternative Optionen prüfen'],
+    }
+  }
+  const s = item.matchScore
+  return {
+    summary: s >= 80
+      ? `Starkes Objekt (${s}%) — deckt die wesentlichen Suchkriterien ab. Prozess aktiv weitertreiben.`
+      : s >= 65
+        ? `Solides Objekt (${s}%) mit Potenzial. Gezielte Klärung offener Punkte empfohlen.`
+        : `Schwächerer Match (${s}%). Kritisch prüfen bevor weitere Ressourcen investiert werden.`,
+    positives: [
+      ...(s >= 80 ? [`Match ${s}% — hohe Übereinstimmung`] : []),
+      ...(item.areaLabel ? [`Fläche: ${item.areaLabel}`] : []),
+      ...(item.resultType === 'VERIFIED_PORTFOLIO' ? ['Geprüftes Portfolio-Objekt'] : []),
+      ...(item.stage === 'NEGOTIATION' ? ['Verhandlung läuft — kurz vor Abschluss'] : []),
+    ].slice(0, 3),
+    risks: [
+      ...(s < 80 ? [`Match ${s}% — Abweichungen prüfen`] : []),
+      ...(item.notes?.includes('Budget') ? ['Budget-Diskrepanz erwähnt'] : []),
+      ...(item.resultType === 'FUTURE_AVAILABILITY' ? ['Verfügbarkeit noch nicht bestätigt'] : []),
+    ].slice(0, 2),
+  }
+}
+
+// ── PipelineCard ─────────────────────────────────────────────────────────────
+
 function PipelineCard({
   item,
-  onAdvance,
+  isSelected,
+  onSelect,
 }: {
   item: PipelineItem
-  onAdvance: (id: string) => void
+  isSelected: boolean
+  onSelect: (item: PipelineItem) => void
 }) {
-  const stageConfig = STAGES.find((s) => s.key === item.stage)!
-  const showAdvance = item.stage !== 'CLOSED_WON' && item.stage !== 'CLOSED_LOST'
-
   return (
     <Paper
       elevation={0}
+      onClick={() => onSelect(item)}
       sx={{
-        p: 1.5,
-        borderRadius: 1.5,
-        border: '1px solid #e2e8f0',
-        cursor: 'default',
-        bgcolor: 'white',
+        p: 1.5, borderRadius: 1.5,
+        border: isSelected ? '2px solid #1e3a5f' : '1px solid #e2e8f0',
+        cursor: 'pointer',
+        bgcolor: isSelected ? '#eff6ff' : 'white',
+        '&:hover': { boxShadow: '0 2px 8px rgba(0,0,0,0.1)', borderColor: isSelected ? '#1e3a5f' : '#bfdbfe' },
+        transition: 'box-shadow 0.15s, border-color 0.15s',
       }}
     >
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 1 }}>
-        <Typography
-          variant="body2"
-          sx={{ fontWeight: 700, flex: 1, minWidth: 0 }}
-          noWrap
-        >
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 1, mb: 0.5 }}>
+        <Typography variant="body2" sx={{ fontWeight: 700, flex: 1, minWidth: 0, lineHeight: 1.3 }} noWrap>
           {item.title}
         </Typography>
-        <Typography
-          sx={{ fontWeight: 900, fontSize: '1rem', color: scoreColor(item.matchScore), flexShrink: 0 }}
-        >
+        <Typography sx={{ fontWeight: 900, fontSize: '0.9rem', color: scoreColor(item.matchScore), flexShrink: 0 }}>
           {item.matchScore}%
         </Typography>
       </Box>
-
-      <Typography variant="caption" color="text.secondary">
+      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
         {item.location}
       </Typography>
-
-      <Box>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
         <Chip
           size="small"
-          label={RESULT_TYPE_LABEL[item.resultType]}
-          sx={{
-            bgcolor: RESULT_TYPE_COLOR[item.resultType],
-            color: 'white',
-            fontSize: 10,
-            height: 18,
-            mt: 0.5,
-          }}
+          label={RESULT_TYPE_LABEL[item.resultType] ?? item.resultType}
+          sx={{ bgcolor: RESULT_TYPE_COLOR[item.resultType] ?? '#475569', color: 'white', fontSize: 10, height: 18 }}
         />
+        {item.areaLabel && <Typography variant="caption" sx={{ color: '#475569' }}>{item.areaLabel}</Typography>}
+        {item.rentLabel && <Typography variant="caption" sx={{ color: '#475569' }}>{item.rentLabel}</Typography>}
       </Box>
-
-      {(item.areaLabel || item.rentLabel) && (
-        <Box sx={{ display: 'flex', gap: 1, mt: 0.5 }}>
-          {item.areaLabel && (
-            <Typography variant="caption" sx={{ color: '#475569' }}>
-              {item.areaLabel}
-            </Typography>
-          )}
-          {item.rentLabel && (
-            <Typography variant="caption" sx={{ color: '#475569' }}>
-              {item.rentLabel}
-            </Typography>
-          )}
-        </Box>
-      )}
-
       {item.notes && (
-        <Typography
-          variant="caption"
-          sx={{ fontStyle: 'italic', color: 'text.secondary', mt: 0.5, display: 'block' }}
-        >
+        <Typography variant="caption" sx={{ fontStyle: 'italic', color: '#94a3b8', mt: 0.5, display: 'block' }} noWrap>
           {item.notes}
         </Typography>
       )}
-
-      {showAdvance && (
-        <Button
-          size="small"
-          variant="text"
-          onClick={() => onAdvance(item.id)}
-          sx={{
-            color: stageConfig.color,
-            fontSize: '0.7rem',
-            p: 0,
-            mt: 0.75,
-            minWidth: 0,
-            textTransform: 'none',
-          }}
-        >
-          {NEXT_STAGE_LABEL[item.stage]}
-        </Button>
-      )}
     </Paper>
   )
 }
 
-export default function Pipeline() {
-  const [items, setItems] = useState<PipelineItem[]>(mockPipelineItems)
+// ── DetailPanel ───────────────────────────────────────────────────────────────
 
-  const activeCount = items.filter(
-    (i) => i.stage !== 'CLOSED_WON' && i.stage !== 'CLOSED_LOST'
-  ).length
+function DetailPanel({
+  item,
+  onClose,
+}: {
+  item: PipelineItem
+  onClose: () => void
+}) {
+  const { moveStage, updateNotes, loseItem } = usePipelineStore()
+  const [notes, setNotes] = useState(item.notes ?? '')
+  const stageConfig = STAGES.find(s => s.key === item.stage)!
+  const stageIndex = STAGES.findIndex(s => s.key === item.stage)
+  const nextStage = NEXT_STAGE[item.stage]
+  const ki = getKiInsight(item)
+  const docs = MOCK_DOCS[item.id] ?? []
+  const isClosed = item.stage === 'CLOSED_WON' || item.stage === 'CLOSED_LOST'
 
-  function handleAdvance(id: string) {
-    setItems((prev) =>
-      prev.map((item) => {
-        if (item.id !== id) return item
-        const idx = STAGES.findIndex((s) => s.key === item.stage)
-        if (idx === -1 || idx >= STAGES.length - 1) return item
-        return { ...item, stage: STAGES[idx + 1].key }
-      })
-    )
-  }
+  // progress bar: SAVED=0, DISCOVERED=1, QUALIFIED=2, VISITED=3, NEGOTIATION=4
+  const activeStages = STAGES.slice(0, 5)
+  const progressIdx = Math.min(stageIndex, 4)
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      <Box
-        sx={{
-          bgcolor: 'white',
-          borderBottom: '1px solid #e2e8f0',
-          px: 3,
-          py: 2,
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          flexShrink: 0,
-          position: 'sticky',
-          top: 0,
-          zIndex: 1,
-        }}
-      >
-        <Box>
-          <Typography variant="h5" sx={{ fontWeight: 700 }}>
-            Deal Pipeline
-          </Typography>
-          <Typography variant="body2" color="text.secondary">
-            Verfolgen Sie Objekte von der Entdeckung bis zum Abschluss
-          </Typography>
+    <Box sx={{
+      width: { xs: '100%', md: 340 }, flexShrink: 0,
+      display: 'flex', flexDirection: 'column',
+      bgcolor: 'white', borderLeft: '1px solid #e2e8f0',
+      overflow: 'hidden',
+    }}>
+      {/* Header */}
+      <Box sx={{ px: 2, py: 2, borderBottom: '1px solid #e2e8f0' }}>
+        <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1 }}>
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Typography variant="body1" sx={{ fontWeight: 700, lineHeight: 1.3, mb: 0.25 }}>
+              {item.title}
+            </Typography>
+            <Typography variant="caption" color="text.secondary">{item.location}</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}>
+            <Typography sx={{ fontWeight: 900, fontSize: '1.1rem', color: scoreColor(item.matchScore) }}>
+              {item.matchScore}%
+            </Typography>
+            <IconButton size="small" onClick={onClose} sx={{ color: '#94a3b8' }}>
+              <X size={16} />
+            </IconButton>
+          </Box>
+        </Box>
+
+        {/* Stage progress bar */}
+        <Box sx={{ mt: 2 }}>
+          <Box sx={{ display: 'flex', gap: 0.25, mb: 1 }}>
+            {activeStages.map((s, idx) => (
+              <Box
+                key={s.key}
+                sx={{
+                  flex: 1, height: 4, borderRadius: 2,
+                  bgcolor: idx <= progressIdx ? stageConfig.color : '#e2e8f0',
+                }}
+              />
+            ))}
+          </Box>
+          <Chip
+            label={stageConfig.label}
+            size="small"
+            sx={{ bgcolor: stageConfig.bgColor, color: stageConfig.color, fontWeight: 700, height: 22, fontSize: '0.75rem' }}
+          />
         </Box>
-        <Chip label={`${activeCount} aktiv`} size="small" />
       </Box>
 
-      <Box
-        sx={{
-          display: 'flex',
-          gap: 2,
-          px: 3,
-          py: 2,
-          overflowX: 'auto',
-          flex: 1,
-          alignItems: 'flex-start',
-        }}
-      >
-        {STAGES.map((stage) => {
-          const columnItems = items.filter((i) => i.stage === stage.key)
-          return (
-            <Box
-              key={stage.key}
-              sx={{
-                minWidth: 240,
-                maxWidth: 280,
-                flexShrink: 0,
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-            >
-              <Box
-                sx={{
-                  py: 1,
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 1,
-                }}
-              >
-                <Typography sx={{ fontWeight: 700, color: stage.color }}>
-                  {stage.label}
-                </Typography>
-                <Chip
-                  label={columnItems.length}
-                  size="small"
-                  sx={{
-                    bgcolor: stage.bgColor,
-                    color: stage.color,
-                    border: `1px solid ${stage.color}30`,
-                    fontWeight: 600,
-                  }}
-                />
-              </Box>
-
-              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, overflowY: 'auto' }}>
-                {columnItems.map((item) => (
-                  <PipelineCard key={item.id} item={item} onAdvance={handleAdvance} />
-                ))}
-              </Box>
+      <Box sx={{ flex: 1, overflowY: 'auto' }}>
+        {/* KI insight */}
+        <Box sx={{ px: 2, pt: 2, pb: 1.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1 }}>
+            <Sparkles size={13} color="#7c3aed" />
+            <Typography variant="caption" sx={{ fontWeight: 700, color: '#7c3aed', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem' }}>
+              KI Einschätzung
+            </Typography>
+          </Box>
+          <Box sx={{ bgcolor: '#faf5ff', border: '1px solid #ddd6fe', borderRadius: 2, p: 1.5, mb: 1 }}>
+            <Typography variant="caption" sx={{ color: '#4c1d95', lineHeight: 1.6 }}>{ki.summary}</Typography>
+          </Box>
+          {ki.positives.map((p, i) => (
+            <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75, mb: 0.375 }}>
+              <CheckCircle size={12} color="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} />
+              <Typography variant="caption" sx={{ color: '#166534', lineHeight: 1.4 }}>{p}</Typography>
             </Box>
-          )
-        })}
+          ))}
+          {ki.risks.map((r, i) => (
+            <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75, mb: 0.375 }}>
+              <AlertTriangle size={12} color="#d97706" style={{ marginTop: 2, flexShrink: 0 }} />
+              <Typography variant="caption" sx={{ color: '#92400e', lineHeight: 1.4 }}>{r}</Typography>
+            </Box>
+          ))}
+        </Box>
+
+        <Divider />
+
+        {/* Stage actions */}
+        {!isClosed && (
+          <Box sx={{ px: 2, py: 1.5 }}>
+            <Typography variant="caption" sx={{ fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem', display: 'block', mb: 1 }}>
+              Nächste Aktion
+            </Typography>
+            <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+              {nextStage && (
+                <Button
+                  size="small"
+                  variant="contained"
+                  endIcon={<ChevronRight size={14} />}
+                  onClick={() => moveStage(item.id, nextStage.key)}
+                  sx={{ bgcolor: stageConfig.color, '&:hover': { filter: 'brightness(0.9)' }, fontSize: '0.75rem', py: 0.5 }}
+                >
+                  {nextStage.label}
+                </Button>
+              )}
+              <Button
+                size="small"
+                variant="outlined"
+                onClick={() => loseItem(item.id)}
+                sx={{ color: '#c0392b', borderColor: '#c0392b', fontSize: '0.75rem', py: 0.5 }}
+              >
+                Ablehnen
+              </Button>
+            </Box>
+          </Box>
+        )}
+
+        <Divider />
+
+        {/* Notes */}
+        <Box sx={{ px: 2, py: 1.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1 }}>
+            <StickyNote size={13} color="#475569" />
+            <Typography variant="caption" sx={{ fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem' }}>
+              Notizen
+            </Typography>
+          </Box>
+          <TextField
+            size="small"
+            multiline
+            minRows={3}
+            fullWidth
+            placeholder="Notiz hinzufügen…"
+            value={notes}
+            onChange={e => setNotes(e.target.value)}
+            onBlur={() => updateNotes(item.id, notes)}
+            sx={{ '& .MuiOutlinedInput-root': { fontSize: '0.8rem', borderRadius: 1.5 } }}
+          />
+        </Box>
+
+        <Divider />
+
+        {/* Documents */}
+        <Box sx={{ px: 2, py: 1.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1 }}>
+            <FileText size={13} color="#475569" />
+            <Typography variant="caption" sx={{ fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem' }}>
+              Dokumente
+            </Typography>
+          </Box>
+          {docs.length === 0 ? (
+            <Typography variant="caption" color="text.secondary" sx={{ fontStyle: 'italic' }}>
+              Noch keine Dokumente.
+            </Typography>
+          ) : (
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+              {docs.map((doc, i) => (
+                <Box
+                  key={i}
+                  sx={{
+                    display: 'flex', alignItems: 'center', gap: 1,
+                    px: 1.5, py: 0.75, bgcolor: '#f8fafc',
+                    borderRadius: 1.5, border: '1px solid #e2e8f0',
+                    cursor: 'pointer', '&:hover': { bgcolor: '#f1f5f9' },
+                  }}
+                >
+                  <FileText size={13} color="#475569" />
+                  <Typography variant="caption" sx={{ flex: 1, color: '#1e293b' }} noWrap>{doc.name}</Typography>
+                  <Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>{doc.date}</Typography>
+                </Box>
+              ))}
+            </Box>
+          )}
+          <Button size="small" variant="text" sx={{ mt: 0.75, color: '#1e3a5f', fontSize: '0.75rem', p: 0 }}>
+            + Dokument hochladen
+          </Button>
+        </Box>
+
+        {/* Meta */}
+        <Box sx={{ px: 2, pb: 2 }}>
+          <Divider sx={{ mb: 1.5 }} />
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+            {item.availabilityLabel && (
+              <Typography variant="caption" color="text.secondary">
+                <strong>Verfügbar:</strong> {item.availabilityLabel}
+              </Typography>
+            )}
+            {item.assignedTo && (
+              <Typography variant="caption" color="text.secondary">
+                <strong>Verantwortlich:</strong> {item.assignedTo}
+              </Typography>
+            )}
+            <Typography variant="caption" color="text.secondary">
+              <strong>Hinzugefügt:</strong> {new Date(item.addedAt).toLocaleDateString('de-CH')}
+            </Typography>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+// ── Pipeline page ─────────────────────────────────────────────────────────────
+
+export default function Pipeline() {
+  const { items } = usePipelineStore()
+  const [selectedItem, setSelectedItem] = useState<PipelineItem | null>(null)
+
+  const activeCount = items.filter(i => i.stage !== 'CLOSED_WON' && i.stage !== 'CLOSED_LOST').length
+  const wonCount = items.filter(i => i.stage === 'CLOSED_WON').length
+  const wonScore = wonCount > 0
+    ? Math.round(items.filter(i => i.stage === 'CLOSED_WON').reduce((sum, i) => sum + i.matchScore, 0) / wonCount)
+    : 0
+
+  function handleSelect(item: PipelineItem) {
+    setSelectedItem(prev => prev?.id === item.id ? null : item)
+  }
+
+  // Keep selected item in sync when store updates (stage change, notes, etc.)
+  const syncedSelected = selectedItem
+    ? items.find(i => i.id === selectedItem.id) ?? null
+    : null
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
+      <AddToPipelineDialog />
+
+      {/* Header */}
+      <Box sx={{
+        bgcolor: 'white', borderBottom: '1px solid #e2e8f0',
+        px: 3, py: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0,
+      }}>
+        <Box>
+          <Typography variant="h5" sx={{ fontWeight: 700 }}>Deal Pipeline</Typography>
+          <Typography variant="body2" color="text.secondary">
+            Von der ersten Idee bis zum Abschluss — alles in einer Ansicht
+          </Typography>
+        </Box>
+        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+          {wonCount > 0 && (
+            <Chip
+              icon={<TrendingUp size={12} />}
+              label={`${wonCount} gewonnen · ø ${wonScore}%`}
+              size="small"
+              sx={{ bgcolor: '#f0fdf4', color: '#1a7a4a', fontWeight: 600, border: '1px solid #86efac' }}
+            />
+          )}
+          <Chip label={`${activeCount} aktiv`} size="small" sx={{ fontWeight: 600 }} />
+        </Box>
+      </Box>
+
+      {/* Body */}
+      <Box sx={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
+        {/* Kanban */}
+        <Box sx={{ flex: 1, display: 'flex', gap: 2, px: 3, py: 2, overflowX: 'auto', alignItems: 'flex-start' }}>
+          {STAGES.map(stage => {
+            const columnItems = items.filter(i => i.stage === stage.key)
+            return (
+              <Box
+                key={stage.key}
+                sx={{ minWidth: syncedSelected ? 190 : 230, maxWidth: syncedSelected ? 230 : 270, flexShrink: 0, display: 'flex', flexDirection: 'column' }}
+              >
+                <Box sx={{ py: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <Typography sx={{ fontWeight: 700, color: stage.color, fontSize: '0.8125rem' }}>
+                    {stage.label}
+                  </Typography>
+                  <Chip
+                    label={columnItems.length}
+                    size="small"
+                    sx={{ bgcolor: stage.bgColor, color: stage.color, border: `1px solid ${stage.color}30`, fontWeight: 600, height: 20, fontSize: '0.7rem' }}
+                  />
+                </Box>
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, overflowY: 'auto' }}>
+                  {columnItems.map(item => (
+                    <PipelineCard
+                      key={item.id}
+                      item={item}
+                      isSelected={syncedSelected?.id === item.id}
+                      onSelect={handleSelect}
+                    />
+                  ))}
+                  {columnItems.length === 0 && (
+                    <Box sx={{ py: 2, textAlign: 'center' }}>
+                      <Typography variant="caption" color="text.secondary" sx={{ fontStyle: 'italic' }}>
+                        Leer
+                      </Typography>
+                    </Box>
+                  )}
+                </Box>
+              </Box>
+            )
+          })}
+        </Box>
+
+        {/* Detail panel */}
+        {syncedSelected && (
+          <DetailPanel
+            item={syncedSelected}
+            onClose={() => setSelectedItem(null)}
+          />
+        )}
       </Box>
     </Box>
   )