refine(anfragencenter): clearer selection, card-style property strip, 2-item slider

- InquiryListRow: selected state now uses bright blue (4px #2563eb border,
  #eff6ff bg, blue tenant name) — unmistakable at a glance
- RelatedPropertyCardPanel compact: left panel is a mini property card matching
  supply card style (border, borderRadius 2, hover shadow, 78px image);
  right panel shows exactly 2 match slider cards with ChevronLeft/Right nav
  when more than 2 exist; match cards mirror property card visual language
- Strip maxHeight raised to 260px; reply composer rows 4→5

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

src/components/anfragencenter/InquiryDetailPanel.tsx

@@ -99,7 +99,7 @@ export function InquiryDetailPanel({ inquiryId }: InquiryDetailPanelProps) {
             pendingAttachment={pendingAttachment}
             onPendingAttachmentConsumed={() => setPendingAttachment(null)}
           />
-          <Box sx={{ flexShrink: 0, maxHeight: 200, overflowY: 'auto', borderTop: '1px solid #e2e8f0' }}>
+          <Box sx={{ flexShrink: 0, maxHeight: 260, borderTop: '1px solid #e2e8f0' }}>
             <RelatedPropertyCardPanel
               propertyId={inquiry.propertyId}
               inquiryId={inquiry.id}

src/components/anfragencenter/InquiryListRow.tsx

@@ -19,9 +19,8 @@ export function InquiryListRow({ inquiry, selected, onClick }: InquiryListRowPro
         px: 2,
         py: 1,
         borderBottom: '1px solid #e2e8f0',
-        borderLeft: '3px solid',
+        borderLeft: selected ? '4px solid #2563eb' : `3px solid ${hasUnread ? '#2563eb' : 'transparent'}`,
-        borderLeftColor: selected ? '#152642' : hasUnread ? '#2563eb' : 'transparent',
+        bgcolor: selected ? '#eff6ff' : 'white',
-        bgcolor: selected ? '#eef2f8' : 'white',
         cursor: 'pointer',
         transition: 'background-color 0.15s, border-color 0.15s',
         '&:hover': { bgcolor: selected ? '#f1f5f9' : '#f8fafc' },
@@ -30,7 +29,7 @@ export function InquiryListRow({ inquiry, selected, onClick }: InquiryListRowPro
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.5 }}>
         <Typography
           variant="body2"
-          sx={{ fontWeight: hasUnread ? 700 : 600, color: '#0f172a', fontSize: '0.85rem' }}
+          sx={{ fontWeight: selected || hasUnread ? 700 : 600, color: selected ? '#1d4ed8' : '#0f172a', fontSize: '0.85rem' }}
         >
           {inquiry.tenantName}
           {inquiry.tenantCompany ? ` · ${inquiry.tenantCompany}` : ''}

src/components/anfragencenter/InquiryReplyComposer.tsx

@@ -109,7 +109,7 @@ export function InquiryReplyComposer({
         value={body}
         onChange={e => setBody(e.target.value)}
         multiline
-        rows={4}
+        rows={5}
         placeholder="Antwort verfassen..."
         fullWidth
       />

src/components/anfragencenter/RelatedPropertyCardPanel.tsx

@@ -1,5 +1,6 @@
-import { Box, Button, CircularProgress, Divider, Typography } from '@mui/material'
+import { useState } from 'react'
-import { ArrowRight, Building2, Calendar, MapPin, Ruler } from 'lucide-react'
+import { Box, Button, CircularProgress, Divider, IconButton, Typography } from '@mui/material'
+import { ArrowRight, Building2, Calendar, ChevronLeft, ChevronRight, MapPin, Ruler } from 'lucide-react'
 import { useNavigate } from 'react-router'
 import { usePropertyById } from '../../hooks/useProperties'
 import { useAdditionalMatchesForInquiry } from '../../hooks/useMatches'
@@ -14,6 +15,7 @@ interface RelatedPropertyCardPanelProps {
 export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: RelatedPropertyCardPanelProps) {
   const { data: property, isLoading } = usePropertyById(propertyId)
   const navigate = useNavigate()
+  const [sliderIndex, setSliderIndex] = useState(0)
   const {
     data: additionalMatches = [],
     isLoading: loadingMatches,
@@ -40,93 +42,119 @@ 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', minHeight: 0 }}>
+      <Box sx={{ display: 'flex', bgcolor: 'white' }}>
-        {/* Left: current property with thumbnail */}
+        {/* Left: current property card */}
-        <Box sx={{ display: 'flex', gap: 1.5, p: 1.5, alignItems: 'flex-start', flexShrink: 0, width: '42%', minWidth: 200 }}>
+        <Box sx={{ width: '44%', flexShrink: 0, minWidth: 0, p: 1.5 }}>
           <Box
             sx={{
-              width: 72,
+              border: '1px solid #e8e7e4',
-              height: 80,
+              borderRadius: 2,
-              borderRadius: 1,
               overflow: 'hidden',
-              flexShrink: 0,
+              bgcolor: 'white',
-              bgcolor: '#e8e7e4',
+              cursor: 'pointer',
-              display: 'flex',
+              transition: 'border-color 0.15s, box-shadow 0.15s',
-              alignItems: 'center',
+              '&:hover': { borderColor: '#b0aead', boxShadow: '0 4px 14px rgba(0,0,0,0.09)' },
-              justifyContent: 'center',
-              backgroundImage: image ? `url(${image})` : 'none',
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
             }}
+            onClick={() => navigate('/supply/properties')}
           >
-            {!image && <Building2 size={20} color="#94a3b8" />}
+            <Box
-          </Box>
+              sx={{
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, minWidth: 0, flex: 1 }}>
+                height: 78,
-            <Typography
+                bgcolor: '#f4f3f0',
-              sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.85rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundImage: image ? `url(${image})` : 'none',
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+              }}
             >
-              {property.title}
+              {!image && <Building2 size={22} color="#94a3b8" />}
-            </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: 0.5, color: '#475569' }}>
+            <Box sx={{ p: 1 }}>
-              <Ruler size={11} style={{ flexShrink: 0 }} />
+              <Typography
-              <Typography variant="caption" sx={{ fontSize: '0.72rem' }}>
+                sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.82rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', mb: 0.5 }}
-                {property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/J.
+              >
+                {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 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>
 
         {/* Vertical divider */}
         <Box sx={{ width: '1px', bgcolor: '#e2e8f0', my: 1.5, flexShrink: 0 }} />
 
-        {/* Right: horizontal scroll rail */}
+        {/* Right: match slider showing 2 at a time */}
-        <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', p: 1.5, gap: 1, minWidth: 0 }}>
+        <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', p: 1.5, gap: 1 }}>
-          <Typography
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
-            variant="caption"
+            <Typography variant="caption" sx={{ color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem' }}>
-            sx={{ color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem', flexShrink: 0 }}
+              Weitere passende Objekte
-          >
+            </Typography>
-            Weitere passende Objekte
+            {additionalMatches.length > 2 && (
-          </Typography>
+              <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 ? (
-            <CircularProgress size={16} />
+            <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
+            <Box sx={{ display: 'flex', gap: 1, flex: 1 }}>
-              sx={{
+              {visibleMatches.map(m => (
-                display: 'flex',
+                <MatchSliderCard key={m.propertyId} match={m} />
-                gap: 1.5,
-                overflowX: 'auto',
-                pb: 0.5,
-                '&::-webkit-scrollbar': { height: 3 },
-                '&::-webkit-scrollbar-thumb': { bgcolor: '#cbd5e1', borderRadius: 2 },
-              }}
-            >
-              {additionalMatches.map(m => (
-                <MatchRailCard key={m.propertyId} match={m} />
               ))}
             </Box>
           )}
@@ -170,20 +198,20 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
       </Typography>
 
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569', fontSize: '0.8125rem' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569' }}>
           <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' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569' }}>
           <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' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569' }}>
           <Calendar size={14} />
           <Typography variant="body2" sx={{ fontSize: '0.8125rem' }}>
             Verfügbar ab {new Date(property.availabilityDate).toLocaleDateString('de-CH')}
@@ -229,28 +257,33 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
   )
 }
 
-function MatchRailCard({ match }: { match: AdditionalPropertyMatch }) {
+function MatchSliderCard({ match }: { match: AdditionalPropertyMatch }) {
   const navigate = useNavigate()
   return (
     <Box
       onClick={() => navigate('/supply/properties')}
       sx={{
-        flexShrink: 0,
+        flex: '1 1 0',
-        width: 148,
+        minWidth: 0,
+        border: '1px solid #e8e7e4',
+        borderRadius: 2,
+        overflow: 'hidden',
         cursor: 'pointer',
-        '&:hover .rail-title': { color: '#2563eb' },
+        bgcolor: 'white',
+        transition: 'border-color 0.15s, box-shadow 0.15s',
+        '&:hover': {
+          borderColor: '#b0aead',
+          boxShadow: '0 4px 14px rgba(0,0,0,0.09)',
+        },
       }}
     >
       <Box
         sx={{
-          height: 44,
+          height: 52,
-          borderRadius: 1,
+          bgcolor: '#f4f3f0',
-          bgcolor: '#e8e7e4',
-          overflow: 'hidden',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          mb: 0.75,
           backgroundImage: match.imageUrl ? `url(${match.imageUrl})` : 'none',
           backgroundSize: 'cover',
           backgroundPosition: 'center',
@@ -258,25 +291,26 @@ function MatchRailCard({ match }: { match: AdditionalPropertyMatch }) {
       >
         {!match.imageUrl && <Building2 size={16} color="#94a3b8" />}
       </Box>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0.2 }}>
+      <Box sx={{ p: 1 }}>
-        <Typography
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0.25 }}>
-          className="rail-title"
+          <Typography
-          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' }}
+            sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.78rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, mr: 0.5 }}
-        >
+          >
-          {match.title}
+            {match.title}
-        </Typography>
+          </Typography>
-        <Typography sx={{ fontSize: '0.72rem', fontWeight: 700, color: '#152642', flexShrink: 0 }}>
+          <Typography sx={{ fontSize: '0.72rem', fontWeight: 700, color: '#152642', flexShrink: 0 }}>
-          {match.matchScore}%
+            {match.matchScore}%
+          </Typography>
+        </Box>
+        <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem', display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {match.location}
         </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>
-      <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>
   )
 }