feat: F011 match card system

- MatchCardViewModel: typed view model decoupling card from raw API data
- Sub-components: MatchCardHeader, MatchScoreDisplay, MatchReasonList, TradeoffList, MatchDataQualitySummary, MatchActionToolbar, MatchCardSkeleton, MatchCardRestrictedState
- 4 variants: MatchCardCompact, MatchCardExpanded, MatchCardReview, MatchCardCompareMini
- MatchCard: main entry point with variant prop
- matchCardAdapter: buildMatchCardViewModel() converts UnifiedMatchResult -> ViewModel
- UnifiedResultCard: now thin wrapper using MatchCardCompact via adapter
- FUTURE_AVAILABILITY always shows non-dismissable disclaimer

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

src/components/match-card/MatchReasonList.tsx

@@ -0,0 +1,38 @@
+import { Box, Typography } from '@mui/material'
+import { CheckCircle2 } from 'lucide-react'
+import type { MatchCardReason } from './MatchCardViewModel'
+
+interface Props {
+  reasons: MatchCardReason[]
+  maxItems?: number
+}
+
+export function MatchReasonList({ reasons, maxItems = 3 }: Props) {
+  if (reasons.length === 0) return null
+  const shown = reasons.slice(0, maxItems)
+
+  return (
+    <Box>
+      <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block', mb: 0.75 }}>
+        Warum dieses Match
+      </Typography>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
+        {shown.map((r, i) => (
+          <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
+            <CheckCircle2 size={14} color="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} />
+            <Box>
+              <Typography variant="caption" sx={{ fontWeight: 600, color: '#1a7a4a' }}>
+                {r.label}
+              </Typography>
+              {r.explanation && (
+                <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
+                  {r.explanation}
+                </Typography>
+              )}
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  )
+}