refactor: split PropertyDetailView (998→192 lines) and MatchDetail (464→236 lines)

PropertyDetailView.tsx extracted into 5 focused components:
- PropertyDetailHelpers: Field, FieldGrid, SectionTitle, floorLabel
- UnitStructurePanel: floor structure with unit matching
- PreMarketPanel: schattenmarkt release controls
- PropertyDetailOverview: overview tab content
- MatchabilityTabPanel: need matches tab

MatchDetail.tsx extracted into 2 focused components:
- MatchDetailHero: image/map, header, key facts strip
- MatchDetailPropertySections: Preis/Hauptangaben/Eigenschaften/etc.

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

src/components/match-detail/MatchDetailHero.tsx

@@ -0,0 +1,128 @@
+import { Box, Button, Chip, Divider, Typography } from '@mui/material'
+import { Bookmark, Columns2 } from 'lucide-react'
+import { PropertyMap } from '../shared'
+import { MatchScoreDisplay } from '../match-card/MatchScoreDisplay'
+import { useMatchDetail } from '../../hooks/useMatches'
+import type { Property } from '../../domain/property'
+import type { FutureSignal } from '../../domain/futureSignal'
+
+type Match = NonNullable<ReturnType<typeof useMatchDetail>['data']>
+
+interface MatchDetailHeroProps {
+  match: Match
+  property: Property | undefined
+  signal: FutureSignal | null
+  isFuture: boolean
+  title: string
+  location: string
+  rt: { label: string; color: string }
+  keyFacts: Array<{ label: string; value: string }>
+  onCompare: () => void
+  onShortlist: () => void
+}
+
+export function MatchDetailHero({
+  match,
+  property,
+  signal: _signal,
+  isFuture,
+  title,
+  location,
+  rt,
+  keyFacts,
+  onCompare,
+  onShortlist,
+}: MatchDetailHeroProps) {
+  return (
+    <>
+      {/* Hero: image first, map fallback */}
+      {!isFuture && (
+        property?.images?.[0] ? (
+          <Box sx={{ width: '100%', height: 400, overflow: 'hidden', bgcolor: '#e2e8f0', flexShrink: 0 }}>
+            <img
+              src={property.images[0]}
+              alt={property.title}
+              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+            />
+          </Box>
+        ) : property?.location?.coordinates ? (
+          <PropertyMap
+            lat={property.location.coordinates.lat}
+            lng={property.location.coordinates.lng}
+            label={property.title}
+            height={340}
+          />
+        ) : null
+      )}
+
+      {/* Property header — white section below hero */}
+      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0' }}>
+        <Box sx={{ px: { xs: 2, sm: 3 }, pt: 2.5, pb: 2 }}>
+          <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, alignItems: { xs: 'flex-start', sm: 'flex-start' }, justifyContent: 'space-between', gap: 2 }}>
+            {/* Left: title + address + chips */}
+            <Box sx={{ flex: 1, minWidth: 0 }}>
+              <Typography variant="h5" sx={{ fontWeight: 700, mb: 0.25, lineHeight: 1.3 }}>
+                {title}
+              </Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ mb: 1.25 }}>
+                {location}
+              </Typography>
+              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, alignItems: 'center' }}>
+                <Chip label={rt.label} size="small" sx={{ bgcolor: rt.color, color: 'white', fontWeight: 600, fontSize: '0.72rem' }} />
+                {property?.assetType && (
+                  <Chip label={property.assetType} size="small" variant="outlined" sx={{ fontSize: '0.72rem' }} />
+                )}
+              </Box>
+            </Box>
+
+            {/* Right: score + actions */}
+            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 1.5, flexShrink: 0 }}>
+              <MatchScoreDisplay score={match.matchScore} size="lg" />
+              <Box sx={{ display: 'flex', gap: 1 }}>
+                <Button
+                  variant="outlined"
+                  size="small"
+                  startIcon={<Bookmark size={14} />}
+                  onClick={onShortlist}
+                  sx={{ textTransform: 'none' }}
+                >
+                  Shortlist
+                </Button>
+                <Button
+                  variant="contained"
+                  size="small"
+                  startIcon={<Columns2 size={14} />}
+                  onClick={onCompare}
+                  sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' }, textTransform: 'none' }}
+                >
+                  Vergleichen
+                </Button>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+
+        {/* Key facts strip */}
+        <Divider />
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', px: { xs: 2, sm: 3 }, py: 1.5, gap: 0 }}>
+          {keyFacts.map((fact, i) => (
+            <Box key={fact.label} sx={{
+              flex: '1 1 120px',
+              pl: i === 0 ? 0 : { xs: 1.5, sm: 2 },
+              pr: { xs: 1.5, sm: 2 },
+              py: { xs: 0.5, sm: 0 },
+              borderLeft: i === 0 ? 'none' : '1px solid #e2e8f0',
+            }}>
+              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1.2 }}>
+                {fact.label}
+              </Typography>
+              <Typography variant="body1" sx={{ fontWeight: 700, mt: 0.25 }}>
+                {fact.value}
+              </Typography>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </>
+  )
+}

src/components/match-detail/MatchDetailPropertySections.tsx

@@ -0,0 +1,166 @@
+import { Box, Button, Chip, Paper, Typography } from '@mui/material'
+import { Building2, Clock, ExternalLink, Info, Layers, Tag, Train, TrendingUp } from 'lucide-react'
+import { useMatchDetail } from '../../hooks/useMatches'
+import type { Property } from '../../domain/property'
+import { FLOOR_LABEL, ASSET_LABELS, RISK_LABELS, SOURCE_LABELS, PASSERBY_LABELS, KeyFactRow, UnitRow } from './MatchDetailPropertyDetails'
+
+type Match = NonNullable<ReturnType<typeof useMatchDetail>['data']>
+
+interface MatchDetailPropertySectionsProps {
+  property: Property
+  match: Match
+}
+
+export function MatchDetailPropertySections({ property, match }: MatchDetailPropertySectionsProps) {
+  const units = property.units ?? []
+  const matchedUnit = units.find(u => u.id === match.unitId)
+  const flexibleUnits = units.filter(u => u.isFlexible && u.minLettableSqm != null)
+  const preMarketUnits = units.filter(u => u.schattenmarktRelease?.enabled)
+  const otherUnits = units.filter(u => !u.schattenmarktRelease?.enabled)
+  const monthlyPerSqm = Math.round(property.rentPricePerSqm / 12)
+  const totalMonthly = Math.round(property.areaSqm * property.rentPricePerSqm / 12)
+  const minLettable = property.areaSqmMin ?? (flexibleUnits.length > 0 ? Math.min(...flexibleUnits.map(u => u.minLettableSqm!)) : undefined)
+  const sourceLabel = property.sourceLabel ?? property.sourceMeta?.sourceLabel ?? SOURCE_LABELS[property.sourceType] ?? property.sourceType
+
+  return (
+    <>
+      {/* Preis */}
+      <Paper sx={{ p: 2.5 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+          <Tag size={15} color="#374151" />
+          <Typography variant="h6" sx={{ fontWeight: 700 }}>Preis</Typography>
+        </Box>
+        <KeyFactRow label="Monatliche Miete" value={`CHF ${totalMonthly.toLocaleString('de-CH')}.–`} />
+        <KeyFactRow label="Pro m²/Monat" value={`CHF ${monthlyPerSqm.toLocaleString('de-CH')}.–`} />
+        <KeyFactRow label="Pro m²/Jahr" value={`CHF ${property.rentPricePerSqm.toLocaleString('de-CH')}.–`} />
+        {property.ancillaryCosts != null && (
+          <KeyFactRow label="Nebenkosten" value={`CHF ${Math.round(property.areaSqm * property.ancillaryCosts / 12).toLocaleString('de-CH')}/Mt. (CHF ${property.ancillaryCosts}/m²/a)`} />
+        )}
+      </Paper>
+
+      {/* Hauptangaben */}
+      <Paper sx={{ p: 2.5 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+          <Info size={15} color="#374151" />
+          <Typography variant="h6" sx={{ fontWeight: 700 }}>Hauptangaben</Typography>
+        </Box>
+        <KeyFactRow label="Verfügbarkeit" value={property.availabilityDate ? new Date(property.availabilityDate).toLocaleDateString('de-CH', { day: 'numeric', month: 'long', year: 'numeric' }) : 'Auf Anfrage'} />
+        <KeyFactRow label="Objekttyp" value={ASSET_LABELS[property.assetType] ?? property.assetType} />
+        <KeyFactRow label="Nutzfläche" value={`${property.areaSqm.toLocaleString('de-CH')} m²`} />
+        {minLettable != null && <KeyFactRow label="Mindestnutzfläche" value={`${minLettable.toLocaleString('de-CH')} m²`} />}
+        {property.contractDurationMonths != null && <KeyFactRow label="Mietdauer" value={`${property.contractDurationMonths} Monate`} />}
+        {(property.floorLevel != null || matchedUnit) && (
+          <KeyFactRow label="Stockwerk" value={FLOOR_LABEL((matchedUnit?.floorLevel ?? property.floorLevel)!)} />
+        )}
+        {property.currentTenant && <KeyFactRow label="Aktueller Mieter" value={property.currentTenant} />}
+        {property.leaseEndDate && <KeyFactRow label="Mietvertragsende" value={new Date(property.leaseEndDate).toLocaleDateString('de-CH', { month: 'long', year: 'numeric' })} />}
+        {property.breakoutOption && <KeyFactRow label="Break-out Option" value={property.breakoutOptionDate ? new Date(property.breakoutOptionDate).toLocaleDateString('de-CH', { month: 'long', year: 'numeric' }) : 'Ja'} />}
+        {property.riskLevel && <KeyFactRow label="Risikoeinschätzung" value={RISK_LABELS[property.riskLevel] ?? property.riskLevel} />}
+        {property.expansionPotentialSqm != null && <KeyFactRow label="Ausbaupotenzial" value={`+${property.expansionPotentialSqm.toLocaleString('de-CH')} m²`} />}
+      </Paper>
+
+      {/* Eigenschaften */}
+      {property.softFactors && (
+        <Paper sx={{ p: 2.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+            <TrendingUp size={15} color="#374151" />
+            <Typography variant="h6" sx={{ fontWeight: 700 }}>Eigenschaften</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+            {property.softFactors.publicTransportMinutes != null && (
+              <Chip size="small" icon={<Train size={11} />} label={`ÖV: ${property.softFactors.publicTransportMinutes} Min. zu Fuss`} sx={{ bgcolor: '#eff6ff', color: '#1d4ed8', border: '1px solid #bfdbfe', fontWeight: 500 }} />
+            )}
+            {property.softFactors.parkingSpots != null && property.softFactors.parkingSpots > 0 && (
+              <Chip size="small" label={`${property.softFactors.parkingSpots} Parkplätze`} sx={{ bgcolor: '#f8fafc', color: '#374151', border: '1px solid #e2e8f0', fontWeight: 500 }} />
+            )}
+            {property.softFactors.prestige != null && property.softFactors.prestige >= 80 && (
+              <Chip size="small" label="Prestigestandort" sx={{ bgcolor: '#fef9c3', color: '#92400e', border: '1px solid #fde68a', fontWeight: 500 }} />
+            )}
+            {property.softFactors.visibilityScore != null && property.softFactors.visibilityScore >= 80 && (
+              <Chip size="small" label="Hohe Sichtbarkeit" sx={{ bgcolor: '#fef9c3', color: '#92400e', border: '1px solid #fde68a', fontWeight: 500 }} />
+            )}
+            {property.softFactors.passerbyFrequency && (
+              <Chip size="small" label={`Laufkundschaft: ${PASSERBY_LABELS[property.softFactors.passerbyFrequency]}`} sx={{ bgcolor: '#f0fdf4', color: '#1a7a4a', border: '1px solid #bbf7d0', fontWeight: 500 }} />
+            )}
+            {property.softFactors.talentAccess != null && property.softFactors.talentAccess >= 80 && (
+              <Chip size="small" label={`Talentindex: ${property.softFactors.talentAccess}`} sx={{ bgcolor: '#faf5ff', color: '#5b21b6', border: '1px solid #e9d5ff', fontWeight: 500 }} />
+            )}
+          </Box>
+        </Paper>
+      )}
+
+      {/* Wegzeit */}
+      {property.softFactors?.publicTransportMinutes != null && (
+        <Paper sx={{ p: 2.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+            <Clock size={15} color="#374151" />
+            <Typography variant="h6" sx={{ fontWeight: 700 }}>Wegzeit</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: '50%', bgcolor: '#eff6ff', border: '1px solid #bfdbfe', flexShrink: 0 }}>
+              <Train size={18} color="#1d4ed8" />
+            </Box>
+            <Box>
+              <Typography variant="body2" sx={{ fontWeight: 600 }}>{property.softFactors.publicTransportMinutes} Min. zu Fuss</Typography>
+              <Typography variant="caption" color="text.secondary">Nächster ÖV-Anschluss — {property.location.city}</Typography>
+            </Box>
+          </Box>
+          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
+            Die Zeiten beziehen sich auf die Strecke zu Fuss.
+          </Typography>
+        </Paper>
+      )}
+
+      {/* Einheiten */}
+      {units.length > 0 && (
+        <Paper sx={{ p: 2.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+            <Layers size={15} color="#374151" />
+            <Typography variant="h6" sx={{ fontWeight: 700 }}>Einheiten</Typography>
+          </Box>
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 80px 110px 120px auto', gap: 1.5, px: 2, mb: 0.75 }}>
+            {['Einheit', 'Fläche', 'Miete', 'Verfügbar ab', 'Status'].map(h => (
+              <Typography key={h} variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>{h}</Typography>
+            ))}
+          </Box>
+          {preMarketUnits.map(u => <UnitRow key={u.id} unit={u} highlighted={u.id === match.unitId || preMarketUnits.length === 1} />)}
+          {otherUnits.map(u => <UnitRow key={u.id} unit={u} highlighted={u.id === match.unitId} />)}
+        </Paper>
+      )}
+
+      {/* Beschreibung */}
+      {property.description && (
+        <Paper sx={{ p: 2.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+            <Building2 size={15} color="#374151" />
+            <Typography variant="h6" sx={{ fontWeight: 700 }}>Beschreibung</Typography>
+          </Box>
+          <Typography variant="body2" sx={{ lineHeight: 1.75, color: '#374151', whiteSpace: 'pre-wrap' }}>
+            {property.description}
+          </Typography>
+        </Paper>
+      )}
+
+      {/* Quelle & Referenz */}
+      <Paper sx={{ p: 2.5 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+          <Info size={15} color="#374151" />
+          <Typography variant="h6" sx={{ fontWeight: 700 }}>Quelle & Referenz</Typography>
+        </Box>
+        <KeyFactRow label="Datenquelle" value={sourceLabel} />
+        {property.propertyNumber && <KeyFactRow label="Objektnummer" value={property.propertyNumber} />}
+        {property.importedFrom && <KeyFactRow label="Importiert aus" value={property.importedFrom} />}
+        {property.dataQuality.lastVerifiedAt && (
+          <KeyFactRow label="Zuletzt verifiziert" value={new Date(property.dataQuality.lastVerifiedAt).toLocaleDateString('de-CH', { day: 'numeric', month: 'long', year: 'numeric' })} />
+        )}
+        {property.sourceUrl && (
+          <Box sx={{ mt: 1.25 }}>
+            <Button size="small" variant="outlined" endIcon={<ExternalLink size={12} />} href={property.sourceUrl} target="_blank" rel="noopener noreferrer" sx={{ textTransform: 'none', fontSize: '0.8rem', borderColor: '#cbd5e1', color: '#374151' }}>
+              Zum Originalinserat
+            </Button>
+          </Box>
+        )}
+      </Paper>
+    </>
+  )
+}