From b0f675c3197e8c58d2720fc09ab7eff6cecf040b Mon Sep 17 00:00:00 2001
From: Benjamin Sutter <beni_sutter@hotmail.com>
Date: Wed, 10 Jun 2026 23:43:29 +0200
Subject: [PATCH] refine(anfragencenter): property bar top, matches-only
 bottom, AI draft button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Layout: property context bar (44x44 thumbnail + title + key facts + Ansehen)
sits between inquiry header and chat. Bottom strip now shows only the
2-card matches slider — no duplicate property info. Images use objectFit:cover
via <img> for consistent non-distorted rendering. Match score shown as badge
overlay on image. Reply composer gains KI-Entwurf button (Sparkles, purple)
that fills a salutation-prefixed template; an inline label marks it as
AI-generated until the user edits.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/anfragencenter/InquiryChat.tsx |   1 +
 .../anfragencenter/InquiryDetailPanel.tsx     |  90 ++++++-
 .../anfragencenter/InquiryReplyComposer.tsx   |  62 ++++-
 .../RelatedPropertyCardPanel.tsx              | 253 +++++++-----------
 4 files changed, 234 insertions(+), 172 deletions(-)

diff --git a/src/components/anfragencenter/InquiryChat.tsx b/src/components/anfragencenter/InquiryChat.tsx
index 88bd2ae..3ce0e0c 100644
--- a/src/components/anfragencenter/InquiryChat.tsx
+++ b/src/components/anfragencenter/InquiryChat.tsx
@@ -56,6 +56,7 @@ export function InquiryChat({
       <InquiryReplyComposer
         inquiryId={inquiry.id}
         defaultSubject={inquiry.subject}
+        tenantName={inquiry.tenantName}
         pendingAttachment={pendingAttachment}
         onPendingAttachmentConsumed={onPendingAttachmentConsumed}
       />
diff --git a/src/components/anfragencenter/InquiryDetailPanel.tsx b/src/components/anfragencenter/InquiryDetailPanel.tsx
index c87b2a4..2c197fc 100644
--- a/src/components/anfragencenter/InquiryDetailPanel.tsx
+++ b/src/components/anfragencenter/InquiryDetailPanel.tsx
@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react'
 import { Box, Button, CircularProgress, Typography } from '@mui/material'
-import { ClipboardList } from 'lucide-react'
+import { ArrowRight, Building2, ClipboardList, MapPin, Ruler } from 'lucide-react'
+import { useNavigate } from 'react-router'
 import { useInquiryById, useMarkThreadAsRead } from '../../hooks/useInquiries'
+import { usePropertyById } from '../../hooks/useProperties'
 import { InquiryChat } from './InquiryChat'
 import { RelatedPropertyCardPanel } from './RelatedPropertyCardPanel'
 import type { Attachment } from '../../domain/inquiry'
@@ -12,7 +14,9 @@ interface InquiryDetailPanelProps {
 
 export function InquiryDetailPanel({ inquiryId }: InquiryDetailPanelProps) {
   const { data: inquiry, isLoading } = useInquiryById(inquiryId)
+  const { data: property } = usePropertyById(inquiry?.propertyId ?? '')
   const markRead = useMarkThreadAsRead()
+  const navigate = useNavigate()
   const [preparationOpen, setPreparationOpen] = useState(false)
   const [offerWizardOpen, setOfferWizardOpen] = useState(false)
   const [pendingAttachment, setPendingAttachment] = useState<Attachment | null>(null)
@@ -43,10 +47,13 @@ export function InquiryDetailPanel({ inquiryId }: InquiryDetailPanelProps) {
   }
 
   const isLatentInquiry = !!inquiry.needId
+  const propertyImage = property?.images?.[0]
 
   return (
     <>
       <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
+
+        {/* Header: tenant + subject + action */}
         <Box
           sx={{
             px: 2.5,
@@ -92,20 +99,85 @@ export function InquiryDetailPanel({ inquiryId }: InquiryDetailPanelProps) {
           )}
         </Box>
 
-        <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+        {/* Property context bar */}
+        <Box
+          sx={{
+            px: 2,
+            py: 1,
+            borderBottom: '1px solid #e2e8f0',
+            bgcolor: '#f8fafc',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1.5,
+            flexShrink: 0,
+          }}
+        >
+          <Box
+            sx={{
+              width: 44,
+              height: 44,
+              borderRadius: 1,
+              overflow: 'hidden',
+              flexShrink: 0,
+              bgcolor: '#e8e7e4',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {propertyImage ? (
+              <Box
+                component="img"
+                src={propertyImage}
+                alt={property?.title}
+                sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+              />
+            ) : (
+              <Building2 size={18} color="#94a3b8" />
+            )}
+          </Box>
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Typography
+              sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.85rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.3 }}
+            >
+              {property?.title ?? '—'}
+            </Typography>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#64748b' }}>
+              <MapPin size={11} style={{ flexShrink: 0 }} />
+              <Typography variant="caption" sx={{ fontSize: '0.72rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {property?.location.city}
+                {property?.areaSqm ? ` · ${property.areaSqm.toLocaleString('de-CH')} m²` : ''}
+                {property?.rentPricePerSqm ? ` · CHF ${property.rentPricePerSqm}/m²/J.` : ''}
+              </Typography>
+            </Box>
+          </Box>
+          <Button
+            size="small"
+            endIcon={<ArrowRight size={12} />}
+            onClick={() => navigate('/supply/properties')}
+            sx={{ textTransform: 'none', fontSize: '0.75rem', color: '#152642', whiteSpace: 'nowrap', flexShrink: 0 }}
+          >
+            Objekt ansehen
+          </Button>
+        </Box>
+
+        {/* Chat (flex: 1) */}
+        <Box sx={{ flex: 1, overflow: 'hidden' }}>
           <InquiryChat
             inquiry={inquiry}
             onCreateOffer={() => setOfferWizardOpen(true)}
             pendingAttachment={pendingAttachment}
             onPendingAttachmentConsumed={() => setPendingAttachment(null)}
           />
-          <Box sx={{ flexShrink: 0, maxHeight: 260, borderTop: '1px solid #e2e8f0' }}>
-            <RelatedPropertyCardPanel
-              propertyId={inquiry.propertyId}
-              inquiryId={inquiry.id}
-              compact
-            />
-          </Box>
+        </Box>
+
+        {/* Bottom: weitere passende Objekte */}
+        <Box sx={{ flexShrink: 0, borderTop: '1px solid #e2e8f0' }}>
+          <RelatedPropertyCardPanel
+            propertyId={inquiry.propertyId}
+            inquiryId={inquiry.id}
+            compact
+          />
         </Box>
       </Box>
 
diff --git a/src/components/anfragencenter/InquiryReplyComposer.tsx b/src/components/anfragencenter/InquiryReplyComposer.tsx
index 38615a9..7980363 100644
--- a/src/components/anfragencenter/InquiryReplyComposer.tsx
+++ b/src/components/anfragencenter/InquiryReplyComposer.tsx
@@ -7,7 +7,7 @@ import {
   TextField,
   Typography,
 } from '@mui/material'
-import { Send, Paperclip, X } from 'lucide-react'
+import { Paperclip, Send, Sparkles, X } from 'lucide-react'
 import { useSendInquiryReply } from '../../hooks/useInquiries'
 import { useToastStore } from '../../stores/toastStore'
 import type { Attachment } from '../../domain/inquiry'
@@ -16,6 +16,7 @@ import { formatFileSize } from './inquiryUtils'
 interface InquiryReplyComposerProps {
   inquiryId: string
   defaultSubject: string
+  tenantName?: string
   onSent?: () => void
   pendingAttachment?: Attachment | null
   onPendingAttachmentConsumed?: () => void
@@ -24,6 +25,7 @@ interface InquiryReplyComposerProps {
 export function InquiryReplyComposer({
   inquiryId,
   defaultSubject,
+  tenantName,
   onSent,
   pendingAttachment,
   onPendingAttachmentConsumed,
@@ -33,6 +35,7 @@ export function InquiryReplyComposer({
   )
   const [body, setBody] = useState('')
   const [attachments, setAttachments] = useState<Attachment[]>([])
+  const [isAIDraft, setIsAIDraft] = useState(false)
 
   const sendReply = useSendInquiryReply()
   const showToast = useToastStore(s => s.showToast)
@@ -49,6 +52,14 @@ export function InquiryReplyComposer({
 
   const sending = sendReply.isPending
 
+  function handleAIDraft() {
+    const salutation = tenantName ? `Sehr geehrte/r ${tenantName}` : 'Sehr geehrte Damen und Herren'
+    setBody(
+      `${salutation},\n\nVielen Dank für Ihre Anfrage. Gerne bestätigen wir, dass das Objekt zum gewünschten Zeitpunkt verfügbar ist.\n\nWir würden Ihnen gerne einen Besichtigungstermin vorschlagen — bitte teilen Sie uns Ihre Verfügbarkeit mit, damit wir einen passenden Termin finden können.\n\nFür Rückfragen stehen wir Ihnen jederzeit gerne zur Verfügung.\n\nMit freundlichen Grüssen`
+    )
+    setIsAIDraft(true)
+  }
+
   const handleAddMockAttachment = () => {
     const name = `Anhang_${attachments.length + 1}.pdf`
     setAttachments(prev => [
@@ -82,6 +93,7 @@ export function InquiryReplyComposer({
     showToast('Antwort gesendet', 'success')
     setBody('')
     setAttachments([])
+    setIsAIDraft(false)
     onSent?.()
   }
 
@@ -103,15 +115,26 @@ export function InquiryReplyComposer({
         onChange={e => setSubject(e.target.value)}
         fullWidth
       />
+
+      {isAIDraft && (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
+          <Sparkles size={12} color="#7c3aed" />
+          <Typography variant="caption" sx={{ color: '#7c3aed', fontSize: '0.7rem', fontWeight: 500 }}>
+            KI-Entwurf — bitte prüfen und anpassen
+          </Typography>
+        </Box>
+      )}
+
       <TextField
         size="small"
         label="Nachricht"
         value={body}
-        onChange={e => setBody(e.target.value)}
+        onChange={e => { setBody(e.target.value); setIsAIDraft(false) }}
         multiline
         rows={5}
         placeholder="Antwort verfassen..."
         fullWidth
+        sx={isAIDraft ? { '& .MuiOutlinedInput-root': { borderColor: '#ddd6fe' }, '& fieldset': { borderColor: '#ddd6fe !important' } } : {}}
       />
 
       {attachments.length > 0 && (
@@ -149,15 +172,32 @@ export function InquiryReplyComposer({
         </Box>
       )}
 
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, justifyContent: 'space-between' }}>
-        <Button
-          size="small"
-          startIcon={<Paperclip size={14} />}
-          onClick={handleAddMockAttachment}
-          sx={{ textTransform: 'none' }}
-        >
-          Anhang
-        </Button>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, justifyContent: 'space-between' }}>
+        <Box sx={{ display: 'flex', gap: 0.75 }}>
+          <Button
+            size="small"
+            startIcon={<Sparkles size={13} />}
+            onClick={handleAIDraft}
+            sx={{
+              textTransform: 'none',
+              fontSize: '0.75rem',
+              color: '#7c3aed',
+              borderColor: '#ddd6fe',
+              '&:hover': { bgcolor: '#f5f3ff', borderColor: '#c4b5fd' },
+            }}
+            variant="outlined"
+          >
+            KI-Entwurf
+          </Button>
+          <Button
+            size="small"
+            startIcon={<Paperclip size={13} />}
+            onClick={handleAddMockAttachment}
+            sx={{ textTransform: 'none', fontSize: '0.75rem' }}
+          >
+            Anhang
+          </Button>
+        </Box>
         <Button
           variant="contained"
           size="small"
diff --git a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
index b7e92c4..3c3a14b 100644
--- a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
+++ b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
@@ -21,7 +21,7 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
     isLoading: loadingMatches,
   } = useAdditionalMatchesForInquiry(inquiryId, { minScore: 80, excludePropertyId: propertyId })
 
-  if (isLoading) {
+  if (isLoading && !compact) {
     return (
       <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', p: 4 }}>
         <CircularProgress size={20} />
@@ -29,6 +29,61 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
     )
   }
 
+  if (compact) {
+    const visibleMatches = additionalMatches.slice(sliderIndex, sliderIndex + 2)
+    const canGoBack = sliderIndex > 0
+    const canGoForward = sliderIndex + 2 < additionalMatches.length
+
+    return (
+      <Box sx={{ p: 1.5, bgcolor: 'white' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
+          <Typography
+            variant="caption"
+            sx={{ color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem' }}
+          >
+            Weitere passende Objekte
+          </Typography>
+          {additionalMatches.length > 2 && (
+            <Box sx={{ display: 'flex', gap: 0.25 }}>
+              <IconButton
+                size="small"
+                disabled={!canGoBack}
+                onClick={() => setSliderIndex(i => i - 1)}
+                sx={{ p: 0.25, color: canGoBack ? '#152642' : '#cbd5e1' }}
+              >
+                <ChevronLeft size={14} />
+              </IconButton>
+              <IconButton
+                size="small"
+                disabled={!canGoForward}
+                onClick={() => setSliderIndex(i => i + 1)}
+                sx={{ p: 0.25, color: canGoForward ? '#152642' : '#cbd5e1' }}
+              >
+                <ChevronRight size={14} />
+              </IconButton>
+            </Box>
+          )}
+        </Box>
+
+        {loadingMatches ? (
+          <Box sx={{ display: 'flex', justifyContent: 'center', py: 1.5 }}>
+            <CircularProgress size={16} />
+          </Box>
+        ) : additionalMatches.length === 0 ? (
+          <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.72rem' }}>
+            Keine weiteren Matches
+          </Typography>
+        ) : (
+          <Box sx={{ display: 'flex', gap: 1.5 }}>
+            {visibleMatches.map(m => (
+              <MatchSliderCard key={m.propertyId} match={m} />
+            ))}
+          </Box>
+        )}
+      </Box>
+    )
+  }
+
   if (!property) {
     return (
       <Box sx={{ p: 2 }}>
@@ -41,128 +96,6 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
 
   const image = property.images?.[0]
 
-  if (compact) {
-    const visibleMatches = additionalMatches.slice(sliderIndex, sliderIndex + 2)
-    const canGoBack = sliderIndex > 0
-    const canGoForward = sliderIndex + 2 < additionalMatches.length
-
-    return (
-      <Box sx={{ display: 'flex', bgcolor: 'white' }}>
-        {/* Left: current property card */}
-        <Box sx={{ width: '44%', flexShrink: 0, minWidth: 0, p: 1.5 }}>
-          <Box
-            sx={{
-              border: '1px solid #e8e7e4',
-              borderRadius: 2,
-              overflow: 'hidden',
-              bgcolor: 'white',
-              cursor: 'pointer',
-              transition: 'border-color 0.15s, box-shadow 0.15s',
-              '&:hover': { borderColor: '#b0aead', boxShadow: '0 4px 14px rgba(0,0,0,0.09)' },
-            }}
-            onClick={() => navigate('/supply/properties')}
-          >
-            <Box
-              sx={{
-                height: 78,
-                bgcolor: '#f4f3f0',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundImage: image ? `url(${image})` : 'none',
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-              }}
-            >
-              {!image && <Building2 size={22} color="#94a3b8" />}
-            </Box>
-            <Box sx={{ p: 1 }}>
-              <Typography
-                sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.82rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', mb: 0.5 }}
-              >
-                {property.title}
-              </Typography>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569', mb: 0.25 }}>
-                <MapPin size={11} style={{ flexShrink: 0 }} />
-                <Typography variant="caption" sx={{ fontSize: '0.7rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                  {property.location.city}{property.location.district ? `, ${property.location.district}` : ''}
-                </Typography>
-              </Box>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569', mb: 0.25 }}>
-                <Ruler size={11} style={{ flexShrink: 0 }} />
-                <Typography variant="caption" sx={{ fontSize: '0.7rem' }}>
-                  {property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/J.
-                </Typography>
-              </Box>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569', mb: 0.75 }}>
-                <Calendar size={11} style={{ flexShrink: 0 }} />
-                <Typography variant="caption" sx={{ fontSize: '0.7rem' }}>
-                  ab {new Date(property.availabilityDate).toLocaleDateString('de-CH', { month: 'short', year: 'numeric' })}
-                </Typography>
-              </Box>
-              <Button
-                size="small"
-                endIcon={<ArrowRight size={11} />}
-                onClick={e => { e.stopPropagation(); navigate('/supply/properties') }}
-                sx={{ textTransform: 'none', fontSize: '0.7rem', p: 0, minWidth: 0, color: '#152642' }}
-              >
-                Ansehen
-              </Button>
-            </Box>
-          </Box>
-        </Box>
-
-        {/* Vertical divider */}
-        <Box sx={{ width: '1px', bgcolor: '#e2e8f0', my: 1.5, flexShrink: 0 }} />
-
-        {/* Right: match slider showing 2 at a time */}
-        <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', p: 1.5, gap: 1 }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
-            <Typography variant="caption" sx={{ color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem' }}>
-              Weitere passende Objekte
-            </Typography>
-            {additionalMatches.length > 2 && (
-              <Box sx={{ display: 'flex', gap: 0.25 }}>
-                <IconButton
-                  size="small"
-                  disabled={!canGoBack}
-                  onClick={() => setSliderIndex(i => i - 1)}
-                  sx={{ p: 0.25, color: canGoBack ? '#152642' : '#cbd5e1' }}
-                >
-                  <ChevronLeft size={14} />
-                </IconButton>
-                <IconButton
-                  size="small"
-                  disabled={!canGoForward}
-                  onClick={() => setSliderIndex(i => i + 1)}
-                  sx={{ p: 0.25, color: canGoForward ? '#152642' : '#cbd5e1' }}
-                >
-                  <ChevronRight size={14} />
-                </IconButton>
-              </Box>
-            )}
-          </Box>
-
-          {loadingMatches ? (
-            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }}>
-              <CircularProgress size={16} />
-            </Box>
-          ) : additionalMatches.length === 0 ? (
-            <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.72rem' }}>
-              Keine weiteren Matches
-            </Typography>
-          ) : (
-            <Box sx={{ display: 'flex', gap: 1, flex: 1 }}>
-              {visibleMatches.map(m => (
-                <MatchSliderCard key={m.propertyId} match={m} />
-              ))}
-            </Box>
-          )}
-        </Box>
-      </Box>
-    )
-  }
-
   return (
     <Box
       sx={{
@@ -185,12 +118,14 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          backgroundImage: image ? `url(${image})` : 'none',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
         }}
       >
-        {!image && <Building2 size={32} color="#94a3b8" />}
+        {image ? (
+          <Box component="img" src={image} alt={property.title}
+            sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
+        ) : (
+          <Building2 size={32} color="#94a3b8" />
+        )}
       </Box>
 
       <Typography variant="body1" sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.95rem' }}>
@@ -277,36 +212,50 @@ function MatchSliderCard({ match }: { match: AdditionalPropertyMatch }) {
         },
       }}
     >
-      <Box
-        sx={{
-          height: 52,
-          bgcolor: '#f4f3f0',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundImage: match.imageUrl ? `url(${match.imageUrl})` : 'none',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }}
-      >
-        {!match.imageUrl && <Building2 size={16} color="#94a3b8" />}
+      {/* Image with consistent aspect ratio */}
+      <Box sx={{ position: 'relative', height: 72, overflow: 'hidden', bgcolor: '#f4f3f0' }}>
+        {match.imageUrl ? (
+          <Box
+            component="img"
+            src={match.imageUrl}
+            alt={match.title}
+            sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+          />
+        ) : (
+          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Building2 size={20} color="#94a3b8" />
+          </Box>
+        )}
+        {/* Score badge overlay */}
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 6,
+            right: 6,
+            bgcolor: 'rgba(15,23,42,0.72)',
+            color: 'white',
+            fontSize: '0.7rem',
+            fontWeight: 700,
+            px: 0.75,
+            py: 0.25,
+            borderRadius: '4px',
+            lineHeight: 1.4,
+          }}
+        >
+          {match.matchScore}%
+        </Box>
       </Box>
       <Box sx={{ p: 1 }}>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0.25 }}>
-          <Typography
-            sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.78rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, mr: 0.5 }}
-          >
-            {match.title}
-          </Typography>
-          <Typography sx={{ fontSize: '0.72rem', fontWeight: 700, color: '#152642', flexShrink: 0 }}>
-            {match.matchScore}%
-          </Typography>
-        </Box>
+        <Typography
+          sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.78rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', mb: 0.25 }}
+        >
+          {match.title}
+        </Typography>
         <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem', display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-          {match.location}
+          {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' }}>
+          <Typography variant="caption" sx={{ color: '#15803d', fontSize: '0.68rem', display: 'block', lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', mt: 0.25 }}>
             + {match.reasons[0]}
           </Typography>
         )}