refactor: split large page components + taxonomy/HeatBadge/FutureAvailability improvements

- Taxonomy: merge VERIFIED_PORTFOLIO + EXTERNAL_MARKET display → 'Plattform' (dark blue) across all surfaces
- HeatBadge: new flame indicator for hot properties (grid, list, pipeline views)
- FutureAvailabilityContextPanel: richer detail page with AI summary, strategic assessment, sources
- Refactor Pipeline.tsx (630→152 lines) → pipeline/PipelineCard, PipelineColumn, PipelineDetailPanel, pipelineConstants, pipelineUtils
- Refactor IntelligenceMatchCard.tsx (483→179 lines) → FutureAvailabilityCard extracted
- Refactor MatchDetail.tsx (559→464 lines) → useMatchDetailData hook, MatchDetailPropertyDetails
- Refactor Compare.tsx (638→485 lines) → compareUtils, CompareCriteriaCard extracted

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

src/components/shared/HeatBadge.tsx

@@ -0,0 +1,42 @@
+import { Box, Tooltip, Typography } from '@mui/material'
+import { Flame } from 'lucide-react'
+import { getHeatLevel, heatTooltip } from '../../lib/propertyHeat'
+
+interface Props {
+  propertyId: string | undefined
+  size?: 'sm' | 'md'
+}
+
+export function HeatBadge({ propertyId, size = 'md' }: Props) {
+  const level = getHeatLevel(propertyId)
+  if (!level || !propertyId) return null
+
+  const isVeryHot = level === 'VERY_HOT'
+  const tooltip = heatTooltip(propertyId)
+
+  const iconSize  = size === 'sm' ? 10 : 12
+  const fontSize  = size === 'sm' ? '0.6rem' : '0.65rem'
+  const label     = isVeryHot ? 'Sehr gefragt' : 'Gefragt'
+  const bgColor   = isVeryHot ? '#fef3c7' : '#fff7ed'
+  const border    = isVeryHot ? '1px solid #fcd34d' : '1px solid #fed7aa'
+  const iconColor = isVeryHot ? '#d97706' : '#ea580c'
+  const textColor = isVeryHot ? '#92400e' : '#c2410c'
+
+  return (
+    <Tooltip title={tooltip} placement="top" arrow>
+      <Box
+        sx={{
+          display: 'inline-flex', alignItems: 'center', gap: 0.35,
+          bgcolor: bgColor, border, borderRadius: 1,
+          px: size === 'sm' ? 0.6 : 0.75, py: 0.15,
+          cursor: 'default',
+        }}
+      >
+        <Flame size={iconSize} color={iconColor} fill={isVeryHot ? iconColor : 'none'} />
+        <Typography sx={{ fontSize, fontWeight: 700, color: textColor, lineHeight: 1.2 }}>
+          {label}
+        </Typography>
+      </Box>
+    </Tooltip>
+  )
+}

src/components/shared/index.ts

@@ -1,4 +1,5 @@
 export { ViewToggle } from './ViewToggle'
+export { HeatBadge } from './HeatBadge'
 export { LocationPreview } from './LocationPreview'
 export { PropertyMap } from './PropertyMap'
 export { getScoreTier, SCORE_THEME } from './scoreTheme'