refactor: premium design polish — cards, results, grid view

- PropertyIntelligenceCard: aspect-ratio image, hover animation, compact
  data-completeness row, tighter body padding
- Results: replace verbose Card with compact active-search strip, remove
  DecisionContextPanel
- Properties: add 3/5/10 column toggle in grid view, persist to localStorage
- NeedInput, UnifiedResultCard/Feed, MatchCardViewModel: cleanup from
  earlier session

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

src/components/demand/NeedInput.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Box, Card, Chip, FormControlLabel, Slider, Stack, Switch, TextField, Typography } from '@mui/material'
+import { Box, Card, Chip, Slider, Stack, TextField, Typography } from '@mui/material'
 import type { ParsedNeedCriteria } from '../../domain/needBuilder'
 import { AssetType } from '../../domain/enums'
 import { NeedExtendedRequirements } from './NeedExtendedRequirements'
@@ -242,31 +242,7 @@ export function NeedInput({ criteria: c, onCriteriaChange: set }: Props) {
         </Stack>
       )}
 
-      {/* Anonymous search */}
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1, mt: 0.5, py: 1, px: 1.5, borderRadius: 1.5, bgcolor: c.isAnonymous ? 'rgba(124,58,237,0.07)' : '#f8fafc', border: `1px solid ${c.isAnonymous ? '#7c3aed' : '#e8e7e4'}` }}>
-        <Box>
-          <Typography variant="caption" sx={{ fontWeight: 700, color: c.isAnonymous ? '#7c3aed' : '#334155' }}>
-            Anonyme Suche
-          </Typography>
-          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', fontSize: '0.65rem' }}>
-            Firmenname wird nicht an Vermieter übermittelt
-          </Typography>
-        </Box>
-        <FormControlLabel
-          control={
-            <Switch
-              size="small"
-              checked={c.isAnonymous ?? false}
-              onChange={e => set({ ...c, isAnonymous: e.target.checked })}
-              sx={{ '& .MuiSwitch-thumb': { bgcolor: c.isAnonymous ? '#7c3aed' : undefined }, '& .Mui-checked + .MuiSwitch-track': { bgcolor: '#7c3aed' } }}
-            />
-          }
-          label=""
-          sx={{ m: 0 }}
-        />
-      </Box>
-
-      <NeedExtendedRequirements criteria={c} onChange={set} />
+<NeedExtendedRequirements criteria={c} onChange={set} />
     </Card>
   )
 }

src/components/match-card/MatchCardViewModel.ts

@@ -86,6 +86,10 @@ export interface MatchCardViewModel {
   preMarketUnit?: PropertyUnit   // specific unit being released pre-market
   preMarketAllUnits?: PropertyUnit[] // all units of the backing property
 
+  // Key metrics for compact display (Ginesta-style metric line)
+  areaSqm?: number
+  rentPerSqm?: number
+
   // Score transparency
   scoreBreakdown?: {
     hardMatchScore: number

src/components/results/UnifiedResultCard.tsx

@@ -125,16 +125,6 @@ export function UnifiedResultCard({ result, view = 'list' }: Props) {
   const listImageUrl = result.resultType !== 'FUTURE_AVAILABILITY'
     ? result.property.images?.[0]
     : undefined
-  const listOverlay = result.resultType !== 'FUTURE_AVAILABILITY'
-    ? resolveImageLabel({
-        assetType: result.property.assetType,
-        city: result.property.location.city,
-        district: result.property.location.district,
-        prestige: result.property.softFactors?.prestige,
-        floorLevel: result.property.floorLevel,
-        propertyId: result.property.id,
-      })
-    : null
 
-  return <MatchCardCompact vm={vm} imageUrl={listImageUrl} overlayTypeLabel={listOverlay?.type} />
+  return <MatchCardCompact vm={vm} imageUrl={listImageUrl} />
 }

src/components/results/UnifiedResultFeed.tsx

@@ -86,7 +86,7 @@ export function UnifiedResultFeed({ results, view = 'list' }: Props) {
         ))}
       </Box>
     ) : (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         {items.map(result => (
           <UnifiedResultCard key={result.matchId} result={result} view="list" />
         ))}

src/components/supply/PropertyIntelligenceCard.tsx

@@ -43,19 +43,26 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({
     <Box
       onClick={() => onSelect(p.id)}
       sx={{
-        borderRadius: 1,
+        borderRadius: 2,
         overflow: 'hidden',
         border: `1px solid ${DS_BORDER.default}`,
         bgcolor: '#ffffff',
         display: 'flex',
         flexDirection: 'column',
         cursor: 'pointer',
-        transition: 'border-color 0.15s',
-        '&:hover': { borderColor: '#c8c7c4' },
+        position: 'relative',
+        zIndex: 0,
+        transition: 'transform 0.18s ease, box-shadow 0.18s ease, border-color 0.15s',
+        '&:hover': {
+          borderColor: '#b0aead',
+          transform: 'scale(1.025)',
+          boxShadow: '0 10px 32px rgba(0,0,0,0.13)',
+          zIndex: 1,
+        },
       }}
     >
       {/* ── Image — clean, no text overlay ── */}
-      <Box sx={{ position: 'relative', height: 150, flexShrink: 0, bgcolor: '#f4f3f0', overflow: 'hidden' }}>
+      <Box sx={{ position: 'relative', aspectRatio: '3/2', flexShrink: 0, bgcolor: '#f4f3f0', overflow: 'hidden' }}>
         {hasImage ? (
           <Box component="img" src={p.images![0]} alt={p.title}
             sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
@@ -78,7 +85,7 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({
       </Box>
 
       {/* ── Body ── */}
-      <Box sx={{ px: 1.75, pt: 1.5, pb: 1.75, display: 'flex', flexDirection: 'column', gap: 1.125, flex: 1 }}>
+      <Box sx={{ px: 2.25, pt: 1.75, pb: 2, display: 'flex', flexDirection: 'column', gap: 1.5, flex: 1 }}>
 
         {/* Title + location + status inline */}
         <Box>
@@ -130,36 +137,32 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({
           </Tooltip>
         </Box>
 
-        {/* Property spec chips */}
-        <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
-          {p.hardFacts?.fitOut && (() => {
-            const meta = FIT_OUT_META[p.hardFacts!.fitOut!] ?? { label: p.hardFacts!.fitOut!, tip: '' }
-            return (
-              <Tooltip title={meta.tip} placement="top" arrow>
-                <Chip label={meta.label} size="small"
-                  sx={{ height: 20, fontSize: '0.68rem', bgcolor: '#f4f3f0', color: DS_TEXT.secondary, border: `1px solid ${DS_BORDER.default}`, cursor: 'help' }} />
-              </Tooltip>
-            )
-          })()}
-          {p.contractDurationMonths && (
-            <Chip label={`${p.contractDurationMonths}M Vertrag`} size="small"
-              sx={{ height: 20, fontSize: '0.68rem', bgcolor: '#f4f3f0', color: DS_TEXT.secondary, border: `1px solid ${DS_BORDER.default}` }} />
-          )}
-        </Box>
-
-        {/* Data completeness */}
-        <Box sx={{ mt: 'auto' }}>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.5 }}>
-            <Typography sx={{ fontSize: '0.62rem', color: DS_TEXT.disabled, letterSpacing: '0.03em' }}>
-              Datenvollständigkeit
-            </Typography>
-            <Typography sx={{ fontSize: '0.75rem', fontWeight: 700, color: p.confidenceScore >= 0.75 ? '#b8975a' : DS_TEXT.muted }}>
+        {/* Chips + Datenvollständigkeit in einer Zeile */}
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1, mt: 'auto' }}>
+          <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', alignItems: 'center' }}>
+            {p.hardFacts?.fitOut && (() => {
+              const meta = FIT_OUT_META[p.hardFacts!.fitOut!] ?? { label: p.hardFacts!.fitOut!, tip: '' }
+              return (
+                <Tooltip title={meta.tip} placement="top" arrow>
+                  <Chip label={meta.label} size="small"
+                    sx={{ height: 20, fontSize: '0.68rem', bgcolor: '#f4f3f0', color: DS_TEXT.secondary, border: `1px solid ${DS_BORDER.default}`, cursor: 'help' }} />
+                </Tooltip>
+              )
+            })()}
+            {p.contractDurationMonths && (
+              <Chip label={`${p.contractDurationMonths}M Vertrag`} size="small"
+                sx={{ height: 20, fontSize: '0.68rem', bgcolor: '#f4f3f0', color: DS_TEXT.secondary, border: `1px solid ${DS_BORDER.default}` }} />
+            )}
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexShrink: 0 }}>
+            <Typography sx={{ fontSize: '0.62rem', color: DS_TEXT.disabled }}>Daten</Typography>
+            <LinearProgress variant="determinate" value={confPct}
+              sx={{ width: 40, height: 3, borderRadius: 1, bgcolor: '#f4f3f0',
+                '& .MuiLinearProgress-bar': { bgcolor: '#152642', borderRadius: 1 } }} />
+            <Typography sx={{ fontSize: '0.72rem', fontWeight: 700, color: p.confidenceScore >= 0.75 ? '#b8975a' : DS_TEXT.muted }}>
               {confPct}%
             </Typography>
           </Box>
-          <LinearProgress variant="determinate" value={confPct}
-            sx={{ height: 3, borderRadius: 1, bgcolor: '#f4f3f0',
-              '& .MuiLinearProgress-bar': { bgcolor: '#152642', borderRadius: 1 } }} />
         </Box>
       </Box>
     </Box>