fix: correct rent unit labels and monthly/annual calculation consistency

- NeedAlignmentPanel: display budget row in monthly (CHF/m²/Mt.) to match
  the Preis section, use exact division (no Math.round) to avoid 13×12≠152
- MatchDetailPropertySections + PropertyDetailPublicSections: replace
  Math.round(rentPricePerSqm/12) with exact division; show 2 decimal places
  when monthly is not a whole number (e.g. CHF 12.67 instead of CHF 13)
- Add /Jahr suffix to all 15 displays showing rentPricePerSqm or maxPerSqm
  without a time unit across results, compare, match-detail, supply, and
  anfragencenter components

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

src/components/anfragencenter/MockPdfPreview.tsx

@@ -73,7 +73,7 @@ export function MockPdfPreview({ fields, fallbackFields }: MockPdfPreviewProps)
             variant="body2"
             sx={{ fontSize: '0.875rem', mb: 0.5, lineHeight: 1.5 }}
           >
-            <strong>{p.title}</strong> — {p.location.city}, {p.areaSqm.toLocaleString('de-CH')} m², CHF {p.rentPricePerSqm}/m²
+            <strong>{p.title}</strong> — {p.location.city}, {p.areaSqm.toLocaleString('de-CH')} m², CHF {p.rentPricePerSqm}/m²/Jahr
           </Typography>
         ))}
         {properties.length === 0 && (

src/components/anfragencenter/RelatedPropertyCardPanel.tsx

@@ -94,7 +94,7 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId }: RelatedPrope
         <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²
+            {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' }}>
@@ -190,7 +190,7 @@ function AdditionalMatchCard({ match }: { match: AdditionalPropertyMatch }) {
           </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²
+          {match.location} · {match.areaSqm.toLocaleString('de-CH')} m² · CHF {match.rentPricePerSqm}/m²/Jahr
         </Typography>
         {match.reasons.length > 0 && (
           <Box sx={{ mb: 0.5 }}>

src/components/compare/CompareColumnHeader.tsx

@@ -43,7 +43,7 @@ export function CompareColumnHeader({ item, onRemove }: Props) {
       propertyId: prop?.id,
       propertyAddress: prop ? `${title}, ${subtitle}${district ? `, ${district}` : ''}` : undefined,
       areaLabel: prop?.areaSqm ? `${prop.areaSqm.toLocaleString('de-CH')} m²` : undefined,
-      rentLabel: prop?.rentPricePerSqm ? `CHF ${prop.rentPricePerSqm}/m²` : undefined,
+      rentLabel: prop?.rentPricePerSqm ? `CHF ${prop.rentPricePerSqm}/m²/Jahr` : undefined,
       availabilityLabel: prop?.availabilityDate ?? undefined,
     })
   }

src/components/compare/CompareTableBody.tsx

@@ -155,7 +155,7 @@ export function CompareTableBody({
         return (
           <Box>
             <Typography variant="body2" sx={{ fontWeight: 600 }}>
-              CHF {prop.rentPricePerSqm}/m²
+              CHF {prop.rentPricePerSqm}/m²/Jahr
             </Typography>
             {prop.totalRentMonthly && (
               <Typography variant="caption" color="text.secondary">

src/components/demand/CriteriaReviewPanel.tsx

@@ -38,7 +38,7 @@ function displayAreaRange(v: ParsedNeedCriteria['areaRange']): string {
   return v ? `${v.min}–${v.max} m²` : ''
 }
 function displayBudget(v: ParsedNeedCriteria['budgetRange']): string {
-  return v ? `CHF ${v.maxPerSqm}/m²` : ''
+  return v ? `CHF ${v.maxPerSqm}/m²/Jahr` : ''
 }
 function displayTiming(v: ParsedNeedCriteria['timing']): string {
   if (!v) return ''

src/components/demand/NeedCardPreview.tsx

@@ -95,7 +95,7 @@ export function NeedCardPreview({ criteria: c, weights, confidenceByField, missi
               <Wallet size={16} color="#64748b" style={{ flexShrink: 0, marginTop: 2 }} />
               <Box>
                 <Typography variant="caption" color="text.secondary">Budget</Typography>
-                <Typography variant="body2">max. CHF {c.budgetRange.maxPerSqm}/m²</Typography>
+                <Typography variant="body2">max. CHF {c.budgetRange.maxPerSqm}/m²/Jahr</Typography>
               </Box>
             </Box>
           )}

src/components/match-detail/LocationIntelligencePanel.tsx

@@ -241,7 +241,7 @@ export function LocationIntelligencePanel({ property }: Props) {
                   {p.title}
                 </Typography>
                 <Typography variant="caption" color="text.secondary">
-                  {p.areaSqm} m² · CHF {p.rentPricePerSqm}/m²
+                  {p.areaSqm} m² · CHF {p.rentPricePerSqm}/m²/Jahr
                   {p.rentPricePerSqm < property.rentPricePerSqm && ' · günstiger'}
                   {p.rentPricePerSqm > property.rentPricePerSqm && ' · teurer'}
                 </Typography>

src/components/match-detail/MatchDetailPropertySections.tsx

@@ -17,8 +17,11 @@ export function MatchDetailPropertySections({ property, match }: MatchDetailProp
   const flexibleUnits = units.filter(u => u.isFlexible && u.minLettableSqm != null)
   const preMarketUnits = units.filter(u => u.schattenmarktRelease?.enabled)
   const otherUnits = units.filter(u => !u.schattenmarktRelease?.enabled)
-  const monthlyPerSqm = Math.round(property.rentPricePerSqm / 12)
   const totalMonthly = Math.round(property.areaSqm * property.rentPricePerSqm / 12)
+  const rawMonthlyPerSqm = property.rentPricePerSqm / 12
+  const monthlyPerSqmLabel = Number.isInteger(rawMonthlyPerSqm)
+    ? `CHF ${rawMonthlyPerSqm}.–`
+    : `CHF ${rawMonthlyPerSqm.toLocaleString('de-CH', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
   const minLettable = property.areaSqmMin ?? (flexibleUnits.length > 0 ? Math.min(...flexibleUnits.map(u => u.minLettableSqm!)) : undefined)
   const sourceLabel = property.sourceLabel ?? property.sourceMeta?.sourceLabel ?? SOURCE_LABELS[property.sourceType] ?? property.sourceType
 
@@ -31,7 +34,7 @@ export function MatchDetailPropertySections({ property, match }: MatchDetailProp
           <Typography variant="h6" sx={{ fontWeight: 700 }}>Preis</Typography>
         </Box>
         <KeyFactRow label="Monatliche Miete" value={`CHF ${totalMonthly.toLocaleString('de-CH')}.–`} />
-        <KeyFactRow label="Pro m²/Monat" value={`CHF ${monthlyPerSqm.toLocaleString('de-CH')}.–`} />
+        <KeyFactRow label="Pro m²/Monat" value={monthlyPerSqmLabel} />
         <KeyFactRow label="Pro m²/Jahr" value={`CHF ${property.rentPricePerSqm.toLocaleString('de-CH')}.–`} />
         {property.ancillaryCosts != null && (
           <KeyFactRow label="Nebenkosten" value={`CHF ${Math.round(property.areaSqm * property.ancillaryCosts / 12).toLocaleString('de-CH')}/Mt. (CHF ${property.ancillaryCosts}/m²/a)`} />

src/components/match-detail/NeedAlignmentPanel.tsx

@@ -56,16 +56,22 @@ function buildRows(need: Need, property: Property): AlignmentRow[] {
     fit: locationFit,
   })
 
-  // Budget
+  // Budget — both values are annual CHF/m²; display as monthly for consistency with Preis section
   const budgetFit: FitStatus = property.rentPricePerSqm <= need.budgetRange.maxPerSqm
     ? 'MATCH'
     : property.rentPricePerSqm <= need.budgetRange.maxPerSqm * 1.1
     ? 'PARTIAL'
     : 'NO_MATCH'
+  function fmtMt(annual: number): string {
+    const m = annual / 12
+    return Number.isInteger(m)
+      ? `CHF ${m}.–/m²/Mt.`
+      : `CHF ${m.toLocaleString('de-CH', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}/m²/Mt.`
+  }
   rows.push({
     label: 'Budget',
-    needValue: `max. CHF ${need.budgetRange.maxPerSqm}/m²`,
+    needValue: `max. ${fmtMt(need.budgetRange.maxPerSqm)}`,
-    resultValue: `CHF ${property.rentPricePerSqm}/m²`,
+    resultValue: fmtMt(property.rentPricePerSqm),
     fit: budgetFit,
   })
 

src/components/match-detail/PropertyDetailPublicSections.tsx

@@ -37,8 +37,11 @@ export function PropertyDetailPublicSections({ property, highlightUnitId }: Prop
   const otherUnits = (property.units ?? []).filter(u => !u.schattenmarktRelease?.enabled)
   const flexibleUnits = (property.units ?? []).filter(u => u.isFlexible && u.minLettableSqm !== undefined)
 
-  const monthlyPerSqm = Math.round(property.rentPricePerSqm / 12)
   const totalMonthly = Math.round(property.areaSqm * property.rentPricePerSqm / 12)
+  const rawMonthlyPerSqm = property.rentPricePerSqm / 12
+  const monthlyPerSqmLabel = Number.isInteger(rawMonthlyPerSqm)
+    ? `CHF ${rawMonthlyPerSqm}.–`
+    : `CHF ${rawMonthlyPerSqm.toLocaleString('de-CH', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
   const minLettable = property.areaSqmMin
     ?? (flexibleUnits.length > 0
       ? Math.min(...flexibleUnits.map(u => u.minLettableSqm!))
@@ -58,7 +61,7 @@ export function PropertyDetailPublicSections({ property, highlightUnitId }: Prop
           <Typography variant="h6" sx={{ fontWeight: 700 }}>Preis</Typography>
         </Box>
         <KeyFactRow label="Monatliche Miete" value={`CHF ${totalMonthly.toLocaleString('de-CH')}.–`} />
-        <KeyFactRow label="Pro m²/Monat" value={`CHF ${monthlyPerSqm.toLocaleString('de-CH')}.–`} />
+        <KeyFactRow label="Pro m²/Monat" value={monthlyPerSqmLabel} />
         <KeyFactRow label="Pro m²/Jahr" value={`CHF ${property.rentPricePerSqm.toLocaleString('de-CH')}.–`} />
         {property.ancillaryCosts != null && (
           <KeyFactRow

src/components/match-detail/PropertyOverviewPanel.tsx

@@ -39,7 +39,7 @@ export function PropertyOverviewPanel({ match, property, signal }: Props) {
   ] : [
     { icon: <MapPin size={15} />, label: 'Standort', value: property ? `${property.location.city}${property.location.district ? `, ${property.location.district}` : ''}` : '–' },
     { icon: <Maximize2 size={15} />, label: 'Nutzfläche', value: property ? `${property.areaSqm} m²` : '–' },
-    { icon: <Banknote size={15} />, label: 'Mietpreis', value: property?.rentPricePerSqm ? `CHF ${property.rentPricePerSqm}/m²` : '–' },
+    { icon: <Banknote size={15} />, label: 'Mietpreis', value: property?.rentPricePerSqm ? `CHF ${property.rentPricePerSqm}/m²/Jahr` : '–' },
     { icon: <Calendar size={15} />, label: 'Verfügbar ab', value: property?.availabilityDate ?? '–' },
     { icon: <Tag size={15} />, label: 'Objekttyp', value: property?.assetType ?? '–' },
   ]

src/components/results/UnifiedResultCard.tsx

@@ -44,7 +44,7 @@ export function UnifiedResultCard({ result, view = 'list' }: Props) {
           propertyId: prop?.id,
           propertyAddress: prop ? `${prop.title}, ${prop.location?.city ?? ''}` : undefined,
           areaLabel: prop?.areaSqm ? `${prop.areaSqm.toLocaleString('de-CH')} m²` : undefined,
-          rentLabel: prop?.rentPricePerSqm ? `CHF ${prop.rentPricePerSqm}/m²` : undefined,
+          rentLabel: prop?.rentPricePerSqm ? `CHF ${prop.rentPricePerSqm}/m²/Jahr` : undefined,
         })
       },
     },

src/components/supply/NegotiationInsightsPanel.tsx

@@ -50,7 +50,7 @@ export function NegotiationInsightsPanel({ property }: Props) {
           <Box sx={{ flex: 1, p: 1.5, bgcolor: '#f8fafc', borderRadius: 1.5, border: '1px solid #e2e8f0', minWidth: 120 }}>
             <Typography variant="caption" color="text.secondary">Ihr Preis</Typography>
             <Typography variant="h6" sx={{ fontWeight: 700, color: '#0f1923' }}>
-              CHF {property.rentPricePerSqm}/m²
+              CHF {property.rentPricePerSqm}/m²/Jahr
             </Typography>
           </Box>
           {marketRent && (
@@ -130,7 +130,7 @@ export function NegotiationInsightsPanel({ property }: Props) {
                   <Typography variant="caption" sx={{ fontWeight: 500 }}>{n.companyName}</Typography>
                   <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
                     {n.requiredArea?.min ?? 0}–{n.requiredArea?.max ?? 0} m²
-                    {n.budgetRange?.maxPerSqm ? ` · max. CHF ${n.budgetRange.maxPerSqm}/m²` : ''}
+                    {n.budgetRange?.maxPerSqm ? ` · max. CHF ${n.budgetRange.maxPerSqm}/m²/Jahr` : ''}
                   </Typography>
                 </Box>
                 <Chip

src/components/supply/PropertyIntelligenceCard.tsx

@@ -92,7 +92,7 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({
         {/* Key specs */}
         <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mb: 1.25 }}>
           <Chip label={`${p.areaSqm} m²`} size="small" sx={{ fontSize: 11, bgcolor: '#f1f5f9', height: 22 }} />
-          <Chip label={`CHF ${p.rentPricePerSqm}/m²`} size="small" sx={{ fontSize: 11, bgcolor: '#f1f5f9', height: 22 }} />
+          <Chip label={`CHF ${p.rentPricePerSqm}/m²/Jahr`} size="small" sx={{ fontSize: 11, bgcolor: '#f1f5f9', height: 22 }} />
           {p.contractDurationMonths && (
             <Chip label={`${p.contractDurationMonths}M Vertrag`} size="small" sx={{ fontSize: 11, bgcolor: '#f1f5f9', height: 22 }} />
           )}

src/pages/demand/MatchDetail.tsx

@@ -108,7 +108,7 @@ export default function MatchDetail() {
       matchScore: match.matchScore,
       location: property?.location?.city,
       areaLabel: property?.areaSqm ? `${property.areaSqm.toLocaleString('de-CH')} m²` : undefined,
-      rentLabel: property?.rentPricePerSqm ? `CHF ${property.rentPricePerSqm}/m²` : undefined,
+      rentLabel: property?.rentPricePerSqm ? `CHF ${property.rentPricePerSqm}/m²/Jahr` : undefined,
     })
   }
 

src/pages/demand/Results.tsx

@@ -155,7 +155,7 @@ export default function Results() {
                   </Typography>
                   {activeNeed.budgetRange && activeNeed.budgetRange.maxPerSqm > 0 && (
                     <Typography variant="caption" color="text.secondary">
-                      <strong>Budget:</strong> max. CHF {activeNeed.budgetRange.maxPerSqm}/m²
+                      <strong>Budget:</strong> max. CHF {activeNeed.budgetRange.maxPerSqm}/m²/Jahr
                     </Typography>
                   )}
                   {activeNeed.timing?.earliestMoveIn && !isNaN(new Date(activeNeed.timing.earliestMoveIn).getTime()) && (