feat(anfragencenter): 2-column layout — chat top, property strip bottom

Replace 3-panel side-by-side layout with a vertical stack on the right:
InquiryChat takes full height (flex:1), RelatedPropertyCardPanel becomes a
compact 200px bottom strip with a 2-column layout (property info left,
further matches right). Active row selection background deepened to #eef2f8
for clearer focus indication.

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

src/components/anfragencenter/InquiryCard.tsx

@@ -96,19 +96,9 @@ export function InquiryCard({ inquiry, selected, onClick }: InquiryCardProps) {
           {formatInquiryDate(inquiry.createdAt)}
         </Typography>
         {inquiry.matchScore !== undefined && (
-          <Box
+          <Typography sx={{ fontSize: '0.75rem', fontWeight: 700, color: '#152642' }}>
-            sx={{
+            {inquiry.matchScore}%
-              px: 1,
+          </Typography>
-              py: 0.25,
-              borderRadius: 1,
-              bgcolor: '#e0e7ff',
-              color: '#3730a3',
-              fontWeight: 600,
-              fontSize: '0.7rem',
-            }}
-          >
-            Match {inquiry.matchScore}%
-          </Box>
         )}
       </Box>
     </Paper>

src/components/anfragencenter/InquiryDetailPanel.tsx

@@ -92,17 +92,18 @@ export function InquiryDetailPanel({ inquiryId }: InquiryDetailPanelProps) {
           )}
         </Box>
 
-        <Box sx={{ flex: 1, display: 'flex', flexDirection: { xs: 'column', md: 'row' }, overflow: 'hidden' }}>
+        <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
           <InquiryChat
             inquiry={inquiry}
             onCreateOffer={() => setOfferWizardOpen(true)}
             pendingAttachment={pendingAttachment}
             onPendingAttachmentConsumed={() => setPendingAttachment(null)}
           />
-          <Box sx={{ width: { xs: '100%', md: 300 }, flexShrink: 0, borderTop: { xs: '1px solid #e2e8f0', md: 'none' }, maxHeight: { xs: 280, md: 'none' }, overflowY: 'auto' }}>
+          <Box sx={{ flexShrink: 0, maxHeight: 200, overflowY: 'auto', borderTop: '1px solid #e2e8f0' }}>
             <RelatedPropertyCardPanel
               propertyId={inquiry.propertyId}
               inquiryId={inquiry.id}
+              compact
             />
           </Box>
         </Box>

src/components/anfragencenter/InquiryListRow.tsx

@@ -17,11 +17,11 @@ export function InquiryListRow({ inquiry, selected, onClick }: InquiryListRowPro
       onClick={onClick}
       sx={{
         px: 2,
-        py: 1.5,
+        py: 1,
         borderBottom: '1px solid #e2e8f0',
         borderLeft: '3px solid',
         borderLeftColor: selected ? '#152642' : hasUnread ? '#2563eb' : 'transparent',
-        bgcolor: selected ? '#f1f5f9' : 'white',
+        bgcolor: selected ? '#eef2f8' : 'white',
         cursor: 'pointer',
         transition: 'background-color 0.15s, border-color 0.15s',
         '&:hover': { bgcolor: selected ? '#f1f5f9' : '#f8fafc' },
@@ -76,20 +76,9 @@ export function InquiryListRow({ inquiry, selected, onClick }: InquiryListRowPro
           {propertyLabelFromId(inquiry.propertyId)}
         </Typography>
         {inquiry.matchScore !== undefined && (
-          <Box
+          <Typography sx={{ ml: 'auto', fontSize: '0.75rem', fontWeight: 700, color: '#152642' }}>
-            sx={{
-              ml: 'auto',
-              px: 0.75,
-              py: 0.125,
-              borderRadius: 1,
-              bgcolor: '#e0e7ff',
-              color: '#3730a3',
-              fontWeight: 600,
-              fontSize: '0.7rem',
-            }}
-          >
             {inquiry.matchScore}%
-          </Box>
+          </Typography>
         )}
       </Box>
       <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem', mt: 0.5, display: 'block' }}>

src/components/anfragencenter/RelatedPropertyCardPanel.tsx

@@ -1,5 +1,5 @@
 import { Box, Button, CircularProgress, Divider, Typography } from '@mui/material'
-import { ArrowRight, Building2, Calendar, MapPin, Ruler, Trophy } from 'lucide-react'
+import { ArrowRight, Building2, Calendar, MapPin, Ruler } from 'lucide-react'
 import { useNavigate } from 'react-router'
 import { usePropertyById } from '../../hooks/useProperties'
 import { useAdditionalMatchesForInquiry } from '../../hooks/useMatches'
@@ -8,9 +8,10 @@ import type { AdditionalPropertyMatch } from '../../domain/additionalMatch'
 interface RelatedPropertyCardPanelProps {
   propertyId: string
   inquiryId: string
+  compact?: boolean
 }
 
-export function RelatedPropertyCardPanel({ propertyId, inquiryId }: RelatedPropertyCardPanelProps) {
+export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: RelatedPropertyCardPanelProps) {
   const { data: property, isLoading } = usePropertyById(propertyId)
   const navigate = useNavigate()
   const {
@@ -38,6 +39,76 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId }: RelatedPrope
 
   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}` : ''}
+        </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>
+  )
+
+  const matchesSection = (
+    <>
+      <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 }}>
+          {additionalMatches.map(m => (
+            <AdditionalMatchCard 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>
+    )
+  }
+
   return (
     <Box
       sx={{
@@ -51,13 +122,9 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId }: RelatedPrope
         overflowY: 'auto',
       }}
     >
-      <Typography variant="caption" sx={{ color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5 }}>
-        Bezogenes Objekt
-      </Typography>
-
       <Box
         sx={{
-          height: 140,
+          height: 80,
           borderRadius: 1.5,
           overflow: 'hidden',
           bgcolor: '#e8e7e4',
@@ -76,27 +143,7 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId }: RelatedPrope
         {property.title}
       </Typography>
 
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
+      {detailRows}
-        <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 }}>
@@ -114,28 +161,10 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId }: RelatedPrope
         Objekt ansehen
       </Button>
 
-      {/* Weitere Matches */}
       <Divider sx={{ my: 0.5 }} />
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-        <Trophy size={14} color="#d97706" />
+        {matchesSection}
-        <Typography variant="caption" sx={{ color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.68rem' }}>
-          Weitere passende Objekte
-        </Typography>
       </Box>
-
-      {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 }}>
-          {additionalMatches.map(m => (
-            <AdditionalMatchCard key={m.propertyId} match={m} />
-          ))}
-        </Box>
-      )}
     </Box>
   )
 }
@@ -145,69 +174,35 @@ function AdditionalMatchCard({ match }: { match: AdditionalPropertyMatch }) {
   return (
     <Box
       sx={{
-        border: '1px solid #e2e8f0',
+        borderTop: '1px solid #f1f5f9',
-        borderRadius: 1.5,
+        pt: 1,
-        overflow: 'hidden',
+        '&:first-of-type': { borderTop: 'none', pt: 0 },
-        bgcolor: 'white',
       }}
     >
-      {match.imageUrl && (
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0.25 }}>
-        <Box
+        <Typography sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.8rem', lineHeight: 1.3, mr: 0.5 }}>
-          sx={{
+          {match.title}
-            height: 70,
+        </Typography>
-            backgroundImage: `url(${match.imageUrl})`,
+        <Typography sx={{ fontSize: '0.75rem', fontWeight: 700, color: '#152642', flexShrink: 0 }}>
-            backgroundSize: 'cover',
+          {match.matchScore}%
-            backgroundPosition: 'center',
-          }}
-        />
-      )}
-      <Box sx={{ p: 1 }}>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 0.5 }}>
-          <Typography variant="caption" sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.75rem', lineHeight: 1.3 }}>
-            {match.title}
-          </Typography>
-          <Box
-            sx={{
-              px: 0.75,
-              py: 0.125,
-              borderRadius: 1,
-              bgcolor: match.matchScore >= 90 ? '#fef3c7' : '#e0e7ff',
-              color: match.matchScore >= 90 ? '#92400e' : '#3730a3',
-              fontWeight: 700,
-              fontSize: '0.65rem',
-              flexShrink: 0,
-              ml: 0.5,
-            }}
-          >
-            {match.matchScore}%
-          </Box>
-        </Box>
-        <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem', display: 'block', mb: 0.5 }}>
-          {match.location} · {match.areaSqm.toLocaleString('de-CH')} m² · CHF {match.rentPricePerSqm}/m²/Jahr
         </Typography>
-        {match.reasons.length > 0 && (
-          <Box sx={{ mb: 0.5 }}>
-            {match.reasons.map((r, i) => (
-              <Typography key={i} variant="caption" sx={{ color: '#15803d', fontSize: '0.68rem', display: 'block', lineHeight: 1.4 }}>
-                + {r}
-              </Typography>
-            ))}
-          </Box>
-        )}
-        {match.topUncertainty && (
-          <Typography variant="caption" sx={{ color: '#92400e', fontSize: '0.68rem', display: 'block', lineHeight: 1.4, mb: 0.25 }}>
-            ⚠ {match.topUncertainty}
-          </Typography>
-        )}
-        <Button
-          size="small"
-          endIcon={<ArrowRight size={11} />}
-          onClick={() => navigate('/supply/properties')}
-          sx={{ textTransform: 'none', fontSize: '0.7rem', mt: 0.5, p: 0, minWidth: 0, color: '#152642' }}
-        >
-          Ansehen
-        </Button>
       </Box>
+      <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.72rem', display: 'block', mb: 0.375 }}>
+        {match.location} · {match.areaSqm.toLocaleString('de-CH')} m²
+      </Typography>
+      {match.reasons[0] && (
+        <Typography variant="caption" sx={{ color: '#15803d', fontSize: '0.7rem', display: 'block', mb: 0.375, lineHeight: 1.4 }}>
+          + {match.reasons[0]}
+        </Typography>
+      )}
+      <Button
+        size="small"
+        endIcon={<ArrowRight size={10} />}
+        onClick={() => navigate('/supply/properties')}
+        sx={{ textTransform: 'none', fontSize: '0.7rem', p: 0, minWidth: 0, color: '#152642' }}
+      >
+        Ansehen
+      </Button>
     </Box>
   )
 }