refine(anfragencenter): property strip with image thumbnail + horizontal match rail

Compact strip redesign: left side shows 72x80px property thumbnail + key facts
+ "Ansehen" link. Right side shows a horizontal scroll rail (148px cards) with
placeholder/actual image, title, score, and top match reason for each
additional property. Uses imageUrl from AdditionalPropertyMatch domain.

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

src/components/anfragencenter/RelatedPropertyCardPanel.tsx

@@ -39,71 +39,97 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
 
   const image = property.images?.[0]
 
-  const detailRows = (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569', fontSize: '0.8125rem' }}>
-        <MapPin size={14} />
-        <Typography variant="body2" sx={{ fontSize: '0.8125rem' }}>
-          {property.location.city}
-          {property.location.district ? `, ${property.location.district}` : ''}
+  if (compact) {
+    return (
+      <Box sx={{ display: 'flex', bgcolor: 'white', minHeight: 0 }}>
+        {/* Left: current property with thumbnail */}
+        <Box sx={{ display: 'flex', gap: 1.5, p: 1.5, alignItems: 'flex-start', flexShrink: 0, width: '42%', minWidth: 200 }}>
+          <Box
+            sx={{
+              width: 72,
+              height: 80,
+              borderRadius: 1,
+              overflow: 'hidden',
+              flexShrink: 0,
+              bgcolor: '#e8e7e4',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundImage: image ? `url(${image})` : 'none',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+          >
+            {!image && <Building2 size={20} color="#94a3b8" />}
+          </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, minWidth: 0, flex: 1 }}>
+            <Typography
+              sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.85rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+            >
+              {property.title}
+            </Typography>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569' }}>
+              <MapPin size={11} style={{ flexShrink: 0 }} />
+              <Typography variant="caption" sx={{ fontSize: '0.72rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {property.location.city}{property.location.district ? `, ${property.location.district}` : ''}
               </Typography>
             </Box>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569', fontSize: '0.8125rem' }}>
-        <Ruler size={14} />
-        <Typography variant="body2" sx={{ fontSize: '0.8125rem' }}>
-          {property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/Jahr
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569' }}>
+              <Ruler size={11} style={{ flexShrink: 0 }} />
+              <Typography variant="caption" sx={{ fontSize: '0.72rem' }}>
+                {property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/J.
               </Typography>
             </Box>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569', fontSize: '0.8125rem' }}>
-        <Calendar size={14} />
-        <Typography variant="body2" sx={{ fontSize: '0.8125rem' }}>
-          Verfügbar ab {new Date(property.availabilityDate).toLocaleDateString('de-CH')}
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569' }}>
+              <Calendar size={11} style={{ flexShrink: 0 }} />
+              <Typography variant="caption" sx={{ fontSize: '0.72rem' }}>
+                ab {new Date(property.availabilityDate).toLocaleDateString('de-CH', { month: 'short', year: 'numeric' })}
               </Typography>
             </Box>
+            <Button
+              size="small"
+              endIcon={<ArrowRight size={11} />}
+              onClick={() => navigate('/supply/properties')}
+              sx={{ textTransform: 'none', fontSize: '0.72rem', p: 0, minWidth: 0, color: '#152642', alignSelf: 'flex-start', mt: 0.25 }}
+            >
+              Ansehen
+            </Button>
+          </Box>
         </Box>
-  )
 
-  const matchesSection = (
-    <>
-      <Typography variant="caption" sx={{ color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.68rem' }}>
+        {/* Vertical divider */}
+        <Box sx={{ width: '1px', bgcolor: '#e2e8f0', my: 1.5, flexShrink: 0 }} />
+
+        {/* Right: horizontal scroll rail */}
+        <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', p: 1.5, gap: 1, minWidth: 0 }}>
+          <Typography
+            variant="caption"
+            sx={{ color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem', flexShrink: 0 }}
+          >
             Weitere passende Objekte
           </Typography>
           {loadingMatches ? (
-        <CircularProgress size={16} sx={{ alignSelf: 'center' }} />
+            <CircularProgress size={16} />
           ) : additionalMatches.length === 0 ? (
-        <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.75rem' }}>
+            <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.72rem' }}>
               Keine weiteren Matches
             </Typography>
           ) : (
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            <Box
+              sx={{
+                display: 'flex',
+                gap: 1.5,
+                overflowX: 'auto',
+                pb: 0.5,
+                '&::-webkit-scrollbar': { height: 3 },
+                '&::-webkit-scrollbar-thumb': { bgcolor: '#cbd5e1', borderRadius: 2 },
+              }}
+            >
               {additionalMatches.map(m => (
-            <AdditionalMatchCard key={m.propertyId} match={m} />
+                <MatchRailCard key={m.propertyId} match={m} />
               ))}
             </Box>
           )}
-    </>
-  )
-
-  if (compact) {
-    return (
-      <Box sx={{ display: 'flex', gap: 2, p: 1.5, bgcolor: 'white' }}>
-        <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 0.75 }}>
-          <Typography sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.88rem', lineHeight: 1.3 }}>
-            {property.title}
-          </Typography>
-          {detailRows}
-          <Button
-            variant="outlined"
-            size="small"
-            endIcon={<ArrowRight size={14} />}
-            onClick={() => navigate('/supply/properties')}
-            sx={{ textTransform: 'none', alignSelf: 'flex-start', mt: 'auto' }}
-          >
-            Objekt ansehen
-          </Button>
-        </Box>
-        <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 1 }}>
-          {matchesSection}
         </Box>
       </Box>
     )
@@ -143,7 +169,27 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
         {property.title}
       </Typography>
 
-      {detailRows}
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569', fontSize: '0.8125rem' }}>
+          <MapPin size={14} />
+          <Typography variant="body2" sx={{ fontSize: '0.8125rem' }}>
+            {property.location.city}
+            {property.location.district ? `, ${property.location.district}` : ''}
+          </Typography>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569', fontSize: '0.8125rem' }}>
+          <Ruler size={14} />
+          <Typography variant="body2" sx={{ fontSize: '0.8125rem' }}>
+            {property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/Jahr
+          </Typography>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569', fontSize: '0.8125rem' }}>
+          <Calendar size={14} />
+          <Typography variant="body2" sx={{ fontSize: '0.8125rem' }}>
+            Verfügbar ab {new Date(property.availabilityDate).toLocaleDateString('de-CH')}
+          </Typography>
+        </Box>
+      </Box>
 
       {property.description && (
         <Typography variant="body2" sx={{ color: '#64748b', fontSize: '0.8125rem', lineHeight: 1.5 }}>
@@ -162,9 +208,75 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
       </Button>
 
       <Divider sx={{ my: 0.5 }} />
+      <Typography variant="caption" sx={{ color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.68rem' }}>
+        Weitere passende Objekte
+      </Typography>
+
+      {loadingMatches ? (
+        <CircularProgress size={16} sx={{ alignSelf: 'center' }} />
+      ) : additionalMatches.length === 0 ? (
+        <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.75rem' }}>
+          Keine weiteren Matches
+        </Typography>
+      ) : (
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-        {matchesSection}
+          {additionalMatches.map(m => (
+            <AdditionalMatchCard key={m.propertyId} match={m} />
+          ))}
         </Box>
+      )}
+    </Box>
+  )
+}
+
+function MatchRailCard({ match }: { match: AdditionalPropertyMatch }) {
+  const navigate = useNavigate()
+  return (
+    <Box
+      onClick={() => navigate('/supply/properties')}
+      sx={{
+        flexShrink: 0,
+        width: 148,
+        cursor: 'pointer',
+        '&:hover .rail-title': { color: '#2563eb' },
+      }}
+    >
+      <Box
+        sx={{
+          height: 44,
+          borderRadius: 1,
+          bgcolor: '#e8e7e4',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          mb: 0.75,
+          backgroundImage: match.imageUrl ? `url(${match.imageUrl})` : 'none',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }}
+      >
+        {!match.imageUrl && <Building2 size={16} color="#94a3b8" />}
+      </Box>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0.2 }}>
+        <Typography
+          className="rail-title"
+          sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.78rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, mr: 0.5, transition: 'color 0.1s' }}
+        >
+          {match.title}
+        </Typography>
+        <Typography sx={{ fontSize: '0.72rem', fontWeight: 700, color: '#152642', flexShrink: 0 }}>
+          {match.matchScore}%
+        </Typography>
+      </Box>
+      <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem', display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+        {match.location} · {match.areaSqm.toLocaleString('de-CH')} m²
+      </Typography>
+      {match.reasons[0] && (
+        <Typography variant="caption" sx={{ color: '#15803d', fontSize: '0.68rem', display: 'block', lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          + {match.reasons[0]}
+        </Typography>
+      )}
     </Box>
   )
 }