From da50f3b5ead2aebc394230a82168ef94447ce86f Mon Sep 17 00:00:00 2001
From: Benjamin Sutter <beni_sutter@hotmail.com>
Date: Tue, 9 Jun 2026 22:26:30 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20premium=20redesign=20=E2=80=94=20DM=20S?=
 =?UTF-8?q?erif,=20refined=20palette,=20flat=20score=20badges?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Design tokens (ds.ts, theme.ts, scoreTheme.ts): new warm palette
  (#152642 navy, #f9f8f6 warm white, #e8e7e4 borders, #b8975a gold accent),
  flat score tier badges replacing CSS gradients, Inter + DM Serif Display typography
- Card components: white-background cards, DM Serif score numbers, max-2 badge
  chips with +N overflow tooltip, editorial score badge positioning
- Layout shell: gold left-accent nav active state, 64px top bar, outlined
  workspace chip, DM Serif page titles
- Shared atoms: GenericBadge (outlined/solid variants), ResultFilterBar
  (simplified chip styles), DecisionContextPanel (dot metrics, no left accent)
- Global replacement (118 files): #1e3a5f→#152642, #e2e8f0→#e8e7e4,
  #f4f6f9→#f9f8f6 — all handled via Node.js for proper UTF-8 safety

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../ai-monitoring/AIOutputTable.tsx           |   2 +-
 .../ai-monitoring/AIReviewActionToolbar.tsx   |   2 +-
 .../anfragencenter/ActiveInquiriesTab.tsx     |   6 +-
 src/components/anfragencenter/InquiryCard.tsx |   4 +-
 src/components/anfragencenter/InquiryChat.tsx |   2 +-
 .../anfragencenter/InquiryDetailPanel.tsx     |   2 +-
 .../anfragencenter/InquiryListRow.tsx         |   2 +-
 .../anfragencenter/InquiryMessageBubble.tsx   |   2 +-
 .../anfragencenter/InquiryReplyComposer.tsx   |   2 +-
 .../anfragencenter/LatentInquiriesTab.tsx     |   2 +-
 .../anfragencenter/MockPdfPreview.tsx         |   4 +-
 .../anfragencenter/OfferChatComposer.tsx      |   2 +-
 .../anfragencenter/OfferCreationPanel.tsx     |   2 +-
 .../anfragencenter/OfferCreationWizard.tsx    |   6 +-
 .../OfferFieldSelectionStep.tsx               |   2 +-
 .../anfragencenter/OfferPdfReviewStep.tsx     |   2 +-
 .../OfferPropertySelectionStep.tsx            |   2 +-
 .../anfragencenter/OfferWizardPdfStep.tsx     |  10 +-
 .../anfragencenter/OwnPropertyMatchList.tsx   |   4 +-
 .../anfragencenter/PreparationWizard.tsx      |  10 +-
 .../anfragencenter/PublicNeedCard.tsx         |   4 +-
 .../anfragencenter/PublicNeedDetail.tsx       |   8 +-
 .../anfragencenter/PublicNeedList.tsx         |   2 +-
 .../RelatedPropertyCardPanel.tsx              |   4 +-
 .../SelectablePropertyMatchCard.tsx           |   6 +-
 .../anfragencenter/latentNeedUtils.ts         |   2 +-
 .../assistant/AssistantActionCards.tsx        |   2 +-
 .../assistant/AssistantMessageList.tsx        |   2 +-
 .../assistant/GlobalAIAssistantDrawer.tsx     |   2 +-
 src/components/auth/DemoRoleSwitcher.tsx      |   4 +-
 src/components/auth/SessionExpired.tsx        |   2 +-
 src/components/cards/MetricCard.tsx           |   2 +-
 src/components/cards/SourceTypeBadge.tsx      |   2 +-
 .../compare/CompareColumnHeader.tsx           |   2 +-
 .../compare/CompareCriteriaCard.tsx           |   2 +-
 src/components/compare/CompareEmptyState.tsx  |   2 +-
 src/components/compare/CompareTableBody.tsx   |   2 +-
 .../data-quality/DataQualityPanel.tsx         |   2 +-
 .../data-quality/DataQualityProgress.tsx      |   4 +-
 .../data-quality/ProvenancePanel.tsx          |   2 +-
 src/components/demand/AISearchActionBar.tsx   |   2 +-
 src/components/demand/AISearchSavePreview.tsx |   4 +-
 src/components/demand/FollowUpPanel.tsx       |   2 +-
 .../demand/NeedBuilderErrorState.tsx          |   2 +-
 src/components/demand/NeedCardPreview.tsx     |   6 +-
 src/components/demand/NeedInput.tsx           |  12 +-
 src/components/demand/VoiceNeedInput.tsx      |  10 +-
 src/components/demand/WeightingEditor.tsx     |   2 +-
 src/components/forms/PriorityChipGroup.tsx    |   2 +-
 .../future-signals/FutureSignalFilterBar.tsx  |   4 +-
 src/components/layout/AppShellSidebar.tsx     |  22 +-
 src/components/layout/AppShellTopBar.tsx      |   9 +-
 src/components/layout/CompareTray.tsx         |   4 +-
 .../layout/OrganizationContextBadge.tsx       |   2 +-
 src/components/layout/PageHeader.tsx          |   4 +-
 src/components/layout/UserMenu.tsx            |   2 +-
 src/components/layout/appShellConfig.ts       |   2 +-
 .../match-card/FutureAvailabilityCard.tsx     |   1 -
 .../match-card/IntelligenceMatchCard.tsx      | 152 ++++++------
 .../match-card/MatchActionToolbar.tsx         |   2 +-
 .../match-card/MatchCardCompact.tsx           | 229 ++++++++----------
 .../match-card/MatchCardCompareMini.tsx       |   2 +-
 src/components/match-card/MatchCardHeader.tsx |   4 +-
 .../match-card/ScoreInlineBreakdown.tsx       |   8 +-
 .../match-card/SignalQualityDots.tsx          |   2 +-
 src/components/match-center/MatchListCard.tsx |   2 +-
 .../match-center/MatchStatusBadge.tsx         |   2 +-
 .../match-detail/ExecutiveSummaryPanel.tsx    |   2 +-
 .../match-detail/InquiryQuickDialog.tsx       |   2 +-
 .../match-detail/MatchDetailHeader.tsx        |   4 +-
 .../match-detail/MatchDetailHero.tsx          |   4 +-
 .../match-detail/NextActionsPanel.tsx         |   2 +-
 .../match-detail/scoreBreakdownConstants.ts   |   2 +-
 src/components/onboarding/WelcomeDialog.tsx   |   4 +-
 src/components/ops/DataCategoryBadgeList.tsx  |   2 +-
 .../ops/MarketSignalDetailPanel.tsx           |   2 +-
 src/components/ops/MarketSignalFilterBar.tsx  |   4 +-
 src/components/ops/ReviewGatePanel.tsx        |   2 +-
 src/components/ops/SignalConversionPanel.tsx  |   2 +-
 src/components/ops/SignalInbox.tsx            |   2 +-
 src/components/ops/SignalPipelineStepper.tsx  |   8 +-
 src/components/ops/SignalPipelineView.tsx     |   2 +-
 .../ops/SignalToMatchAuditTrail.tsx           |   2 +-
 src/components/ops/SourceCard.tsx             |   2 +-
 src/components/ops/SourceDetailPanel.tsx      |   6 +-
 src/components/ops/SourceList.tsx             |   2 +-
 src/components/pipeline/PipelineCard.tsx      |  12 +-
 src/components/results/ResultFilterBar.tsx    |  46 ++--
 src/components/review/ReviewDetailPanel.tsx   |   2 +-
 .../review/ReviewEntityTypeBadge.tsx          |   2 +-
 src/components/review/ReviewTaskCard.tsx      |   2 +-
 src/components/scores/ScoreBar.tsx            |   2 +-
 src/components/shared/GenericBadge.tsx        |  32 +--
 src/components/shared/LocationPreview.tsx     |   2 +-
 src/components/shared/PropertyMap.tsx         |   2 +-
 src/components/shared/ViewToggle.tsx          |   4 +-
 .../shortlist/AddToPipelineDialog.tsx         |   2 +-
 .../shortlist/AddToShortlistDialog.tsx        |   2 +-
 .../shortlist/DecisionBriefDraftPanel.tsx     |   2 +-
 src/components/shortlist/ShortlistCard.tsx    |   2 +-
 src/components/shortlist/ShortlistDetail.tsx  |   4 +-
 .../shortlist/ShortlistItemCard.tsx           |   8 +-
 src/components/shortlist/ShortlistList.tsx    |   4 +-
 .../shortlist/ShortlistStatusBadge.tsx        |   2 +-
 src/components/supply/BerichtDialog.tsx       |   2 +-
 src/components/supply/MarketKpiPanel.tsx      |   6 +-
 .../supply/PropertyActivityLogPanel.tsx       |   6 +-
 .../supply/PropertyDetailOverview.tsx         |   6 +-
 src/components/supply/PropertyDetailView.tsx  |   2 +-
 src/components/supply/PropertyFilterBar.tsx   |   2 +-
 .../supply/PropertyIntelligenceCard.tsx       |  87 ++++---
 .../supply/PropertyMarketSignalsTab.tsx       |   2 +-
 .../supply/ReminderDetailDrawer.tsx           |   4 +-
 src/components/supply/ReminderFeed.tsx        |   2 +-
 src/components/supply/ReminderTypeBadge.tsx   |   2 +-
 src/components/supply/SignalCard.tsx          |   4 +-
 src/components/supply/propertyHelpers.ts      |   2 +-
 .../supply/reminderDetailHelpers.tsx          |   2 +-
 src/components/tables/TableToolbar.tsx        |   2 +-
 src/components/ui/DecisionContextPanel.tsx    |  47 ++--
 src/index.css                                 |   2 +
 src/lib/ds.ts                                 | 185 +++++++-------
 src/lib/scoreTheme.ts                         |  42 ++--
 src/lib/theme.ts                              |  68 +++---
 src/lib/utils.ts                              |  28 +--
 src/pages/auth/LoginScreen.tsx                |   6 +-
 src/pages/demand/PropertyDetail.tsx           |   2 +-
 src/pages/demand/Results.tsx                  |   4 +-
 src/pages/supply/DataQuality.tsx              |   2 +-
 src/pages/supply/MarketIntelligence.tsx       |  36 +--
 src/pages/supply/MyListings.tsx               |   4 +-
 src/pages/supply/Properties.tsx               |   2 +-
 132 files changed, 659 insertions(+), 711 deletions(-)

diff --git a/src/components/ai-monitoring/AIOutputTable.tsx b/src/components/ai-monitoring/AIOutputTable.tsx
index 1a6e9a0..f6b3672 100644
--- a/src/components/ai-monitoring/AIOutputTable.tsx
+++ b/src/components/ai-monitoring/AIOutputTable.tsx
@@ -23,7 +23,7 @@ const TYPE_LABELS: Record<AIOutputType, string> = {
 }
 
 const TYPE_COLORS: Record<AIOutputType, string> = {
-  NEED_PARSE:           '#1e3a5f',
+  NEED_PARSE:           '#152642',
   FOLLOW_UP_QUESTIONS:  '#0891b2',
   MATCH_EXPLANATION:    '#4f46e5',
   COMPARE_SUMMARY:      '#1a7a4a',
diff --git a/src/components/ai-monitoring/AIReviewActionToolbar.tsx b/src/components/ai-monitoring/AIReviewActionToolbar.tsx
index 8ab9a59..1e8ae69 100644
--- a/src/components/ai-monitoring/AIReviewActionToolbar.tsx
+++ b/src/components/ai-monitoring/AIReviewActionToolbar.tsx
@@ -61,7 +61,7 @@ export function AIReviewActionToolbar({ output, onUpdateStatus, onCopyJson, isSu
           variant="outlined"
           onClick={onCopyJson}
           startIcon={<Copy size={13} />}
-          sx={{ textTransform: 'none', fontSize: '0.75rem', color: '#64748b', borderColor: '#e2e8f0', '&:hover': { bgcolor: '#f8fafc' } }}
+          sx={{ textTransform: 'none', fontSize: '0.75rem', color: '#64748b', borderColor: '#e8e7e4', '&:hover': { bgcolor: '#f8fafc' } }}
         >
           JSON
         </Button>
diff --git a/src/components/anfragencenter/ActiveInquiriesTab.tsx b/src/components/anfragencenter/ActiveInquiriesTab.tsx
index dab929c..7d39749 100644
--- a/src/components/anfragencenter/ActiveInquiriesTab.tsx
+++ b/src/components/anfragencenter/ActiveInquiriesTab.tsx
@@ -93,18 +93,18 @@ export function ActiveInquiriesTab() {
             <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a' }}>
               Anfragen
             </Typography>
-            <Box sx={{ px: 1, py: 0.125, borderRadius: 1, bgcolor: '#1e3a5f', color: 'white', fontWeight: 600, fontSize: '0.7rem' }}>
+            <Box sx={{ px: 1, py: 0.125, borderRadius: 1, bgcolor: '#152642', color: 'white', fontWeight: 600, fontSize: '0.7rem' }}>
               {inquiries.length}
             </Box>
           </Box>
           <Box sx={{ display: 'flex', gap: 0.5 }}>
             <Tooltip title="Listenansicht">
-              <IconButton size="small" onClick={() => setView('list')} sx={{ bgcolor: view === 'list' ? '#e0e7ff' : 'transparent', color: view === 'list' ? '#1e3a5f' : '#64748b' }}>
+              <IconButton size="small" onClick={() => setView('list')} sx={{ bgcolor: view === 'list' ? '#e0e7ff' : 'transparent', color: view === 'list' ? '#152642' : '#64748b' }}>
                 <ListIcon size={16} />
               </IconButton>
             </Tooltip>
             <Tooltip title="Kartenansicht">
-              <IconButton size="small" onClick={() => setView('grid')} sx={{ bgcolor: view === 'grid' ? '#e0e7ff' : 'transparent', color: view === 'grid' ? '#1e3a5f' : '#64748b' }}>
+              <IconButton size="small" onClick={() => setView('grid')} sx={{ bgcolor: view === 'grid' ? '#e0e7ff' : 'transparent', color: view === 'grid' ? '#152642' : '#64748b' }}>
                 <LayoutGrid size={16} />
               </IconButton>
             </Tooltip>
diff --git a/src/components/anfragencenter/InquiryCard.tsx b/src/components/anfragencenter/InquiryCard.tsx
index 8395fee..348100d 100644
--- a/src/components/anfragencenter/InquiryCard.tsx
+++ b/src/components/anfragencenter/InquiryCard.tsx
@@ -20,12 +20,12 @@ export function InquiryCard({ inquiry, selected, onClick }: InquiryCardProps) {
         p: 2,
         borderRadius: 1.5,
         border: '1px solid',
-        borderColor: selected ? '#1e3a5f' : '#e2e8f0',
+        borderColor: selected ? '#152642' : '#e8e7e4',
         bgcolor: selected ? '#f1f5f9' : 'white',
         cursor: 'pointer',
         transition: 'all 0.15s',
         '&:hover': {
-          borderColor: selected ? '#1e3a5f' : '#94a3b8',
+          borderColor: selected ? '#152642' : '#94a3b8',
           boxShadow: '0 2px 6px rgba(15,23,42,0.06)',
         },
         display: 'flex',
diff --git a/src/components/anfragencenter/InquiryChat.tsx b/src/components/anfragencenter/InquiryChat.tsx
index d3c1872..88bd2ae 100644
--- a/src/components/anfragencenter/InquiryChat.tsx
+++ b/src/components/anfragencenter/InquiryChat.tsx
@@ -42,7 +42,7 @@ export function InquiryChat({
                     fontSize: '0.75rem',
                     borderColor: '#cbd5e1',
                     color: '#475569',
-                    '&:hover': { borderColor: '#1e3a5f', color: '#1e3a5f', bgcolor: '#f0f4f8' },
+                    '&:hover': { borderColor: '#152642', color: '#152642', bgcolor: '#f0f4f8' },
                   }}
                 >
                   Angebot erstellen
diff --git a/src/components/anfragencenter/InquiryDetailPanel.tsx b/src/components/anfragencenter/InquiryDetailPanel.tsx
index cea0dcd..7336ea5 100644
--- a/src/components/anfragencenter/InquiryDetailPanel.tsx
+++ b/src/components/anfragencenter/InquiryDetailPanel.tsx
@@ -85,7 +85,7 @@ export function InquiryDetailPanel({ inquiryId }: InquiryDetailPanelProps) {
               variant="outlined"
               startIcon={<ClipboardList size={14} />}
               onClick={() => setPreparationOpen(true)}
-              sx={{ textTransform: 'none', whiteSpace: 'nowrap', borderColor: '#1e3a5f', color: '#1e3a5f', '&:hover': { bgcolor: '#f0f4f8' } }}
+              sx={{ textTransform: 'none', whiteSpace: 'nowrap', borderColor: '#152642', color: '#152642', '&:hover': { bgcolor: '#f0f4f8' } }}
             >
               Vorbereitung starten
             </Button>
diff --git a/src/components/anfragencenter/InquiryListRow.tsx b/src/components/anfragencenter/InquiryListRow.tsx
index 775eb53..d462237 100644
--- a/src/components/anfragencenter/InquiryListRow.tsx
+++ b/src/components/anfragencenter/InquiryListRow.tsx
@@ -20,7 +20,7 @@ export function InquiryListRow({ inquiry, selected, onClick }: InquiryListRowPro
         py: 1.5,
         borderBottom: '1px solid #e2e8f0',
         borderLeft: '3px solid',
-        borderLeftColor: selected ? '#1e3a5f' : hasUnread ? '#2563eb' : 'transparent',
+        borderLeftColor: selected ? '#152642' : hasUnread ? '#2563eb' : 'transparent',
         bgcolor: selected ? '#f1f5f9' : 'white',
         cursor: 'pointer',
         transition: 'background-color 0.15s, border-color 0.15s',
diff --git a/src/components/anfragencenter/InquiryMessageBubble.tsx b/src/components/anfragencenter/InquiryMessageBubble.tsx
index 7398050..170ae91 100644
--- a/src/components/anfragencenter/InquiryMessageBubble.tsx
+++ b/src/components/anfragencenter/InquiryMessageBubble.tsx
@@ -38,7 +38,7 @@ export function InquiryMessageBubble({ message }: InquiryMessageBubbleProps) {
       <Box
         sx={{
           maxWidth: '75%',
-          bgcolor: isTenant ? '#f1f5f9' : '#1e3a5f',
+          bgcolor: isTenant ? '#f1f5f9' : '#152642',
           color: isTenant ? '#0f172a' : 'white',
           px: 1.75,
           py: 1.25,
diff --git a/src/components/anfragencenter/InquiryReplyComposer.tsx b/src/components/anfragencenter/InquiryReplyComposer.tsx
index 27f9f8c..774f763 100644
--- a/src/components/anfragencenter/InquiryReplyComposer.tsx
+++ b/src/components/anfragencenter/InquiryReplyComposer.tsx
@@ -166,7 +166,7 @@ export function InquiryReplyComposer({
           }
           onClick={handleSend}
           disabled={sending || !body.trim()}
-          sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+          sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
         >
           Antwort senden
         </Button>
diff --git a/src/components/anfragencenter/LatentInquiriesTab.tsx b/src/components/anfragencenter/LatentInquiriesTab.tsx
index c2e03f4..c448599 100644
--- a/src/components/anfragencenter/LatentInquiriesTab.tsx
+++ b/src/components/anfragencenter/LatentInquiriesTab.tsx
@@ -47,7 +47,7 @@ export function LatentInquiriesTab() {
             <Box sx={{ px: 2, py: 1.5, borderTop: '1px solid #e2e8f0', flexShrink: 0 }}>
               <Box
                 onClick={() => setMobileView('properties')}
-                sx={{ p: 1.25, bgcolor: '#1e3a5f', color: 'white', borderRadius: 1, textAlign: 'center', cursor: 'pointer', fontSize: '0.85rem', fontWeight: 600 }}
+                sx={{ p: 1.25, bgcolor: '#152642', color: 'white', borderRadius: 1, textAlign: 'center', cursor: 'pointer', fontSize: '0.85rem', fontWeight: 600 }}
               >
                 Eigene Objekte anzeigen →
               </Box>
diff --git a/src/components/anfragencenter/MockPdfPreview.tsx b/src/components/anfragencenter/MockPdfPreview.tsx
index 1e0bb76..a4d4415 100644
--- a/src/components/anfragencenter/MockPdfPreview.tsx
+++ b/src/components/anfragencenter/MockPdfPreview.tsx
@@ -164,11 +164,11 @@ export function MockPdfPreview({ fields, fallbackFields, fieldSelections }: Mock
       {hasPropertyPage && (
         <>
           <Box sx={{ my: 3, display: 'flex', alignItems: 'center', gap: 1.5 }}>
-            <Divider sx={{ flex: 1, borderColor: '#1e3a5f', borderWidth: 1 }} />
+            <Divider sx={{ flex: 1, borderColor: '#152642', borderWidth: 1 }} />
             <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.68rem', whiteSpace: 'nowrap', letterSpacing: 0.5, textTransform: 'uppercase' }}>
               Seite 2 — Objektdetails
             </Typography>
-            <Divider sx={{ flex: 1, borderColor: '#1e3a5f', borderWidth: 1 }} />
+            <Divider sx={{ flex: 1, borderColor: '#152642', borderWidth: 1 }} />
           </Box>
 
           <Box
diff --git a/src/components/anfragencenter/OfferChatComposer.tsx b/src/components/anfragencenter/OfferChatComposer.tsx
index 96d158f..828f2f9 100644
--- a/src/components/anfragencenter/OfferChatComposer.tsx
+++ b/src/components/anfragencenter/OfferChatComposer.tsx
@@ -116,7 +116,7 @@ export function OfferChatComposer() {
                       py: 0.75,
                     }}
                   >
-                    <FileText size={14} color="#1e3a5f" />
+                    <FileText size={14} color="#152642" />
                     <Typography variant="caption" sx={{ fontSize: '0.8rem', fontWeight: 500 }}>
                       {a.fileName}
                     </Typography>
diff --git a/src/components/anfragencenter/OfferCreationPanel.tsx b/src/components/anfragencenter/OfferCreationPanel.tsx
index 6277340..0421034 100644
--- a/src/components/anfragencenter/OfferCreationPanel.tsx
+++ b/src/components/anfragencenter/OfferCreationPanel.tsx
@@ -35,7 +35,7 @@ export function OfferCreationPanel({ selectedCount, needId, needTitle }: OfferCr
         onClick={() => open(needId, needTitle)}
         sx={{
           textTransform: 'none',
-          bgcolor: '#1e3a5f',
+          bgcolor: '#152642',
           fontWeight: 600,
           '&:hover': { bgcolor: '#16304d' },
         }}
diff --git a/src/components/anfragencenter/OfferCreationWizard.tsx b/src/components/anfragencenter/OfferCreationWizard.tsx
index 31db3e0..5101a7c 100644
--- a/src/components/anfragencenter/OfferCreationWizard.tsx
+++ b/src/components/anfragencenter/OfferCreationWizard.tsx
@@ -255,7 +255,7 @@ export function OfferCreationWizard({ inquiryId, propertyId, tenantName, onClose
               variant="contained"
               disabled={loading}
               onClick={() => setStep(1)}
-              sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+              sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
             >
               Weiter
             </Button>
@@ -264,7 +264,7 @@ export function OfferCreationWizard({ inquiryId, propertyId, tenantName, onClose
             <Button
               variant="contained"
               onClick={() => setStep(2)}
-              sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+              sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
             >
               Weiter
             </Button>
@@ -273,7 +273,7 @@ export function OfferCreationWizard({ inquiryId, propertyId, tenantName, onClose
             <Button
               variant="contained"
               onClick={handleGeneratePdf}
-              sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+              sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
             >
               PDF erstellen
             </Button>
diff --git a/src/components/anfragencenter/OfferFieldSelectionStep.tsx b/src/components/anfragencenter/OfferFieldSelectionStep.tsx
index 1d07224..af19a71 100644
--- a/src/components/anfragencenter/OfferFieldSelectionStep.tsx
+++ b/src/components/anfragencenter/OfferFieldSelectionStep.tsx
@@ -77,7 +77,7 @@ export function OfferFieldSelectionStep() {
         <Button
           variant="contained"
           onClick={() => setStep('pdf_review')}
-          sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+          sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
         >
           Weiter
         </Button>
diff --git a/src/components/anfragencenter/OfferPdfReviewStep.tsx b/src/components/anfragencenter/OfferPdfReviewStep.tsx
index ed9bd9a..ad20ded 100644
--- a/src/components/anfragencenter/OfferPdfReviewStep.tsx
+++ b/src/components/anfragencenter/OfferPdfReviewStep.tsx
@@ -179,7 +179,7 @@ export function OfferPdfReviewStep() {
           endIcon={markChecked.isPending ? <CircularProgress size={14} sx={{ color: 'white' }} /> : <Send size={14} />}
           onClick={handleNext}
           disabled={!pdfReady || markChecked.isPending}
-          sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+          sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
         >
           {markChecked.isPending ? 'Wird geprüft…' : 'Angebot senden →'}
         </Button>
diff --git a/src/components/anfragencenter/OfferPropertySelectionStep.tsx b/src/components/anfragencenter/OfferPropertySelectionStep.tsx
index 41b30b8..2e29dff 100644
--- a/src/components/anfragencenter/OfferPropertySelectionStep.tsx
+++ b/src/components/anfragencenter/OfferPropertySelectionStep.tsx
@@ -141,7 +141,7 @@ export function OfferPropertySelectionStep() {
           endIcon={createDraft.isPending ? <CircularProgress size={14} sx={{ color: 'white' }} /> : <ArrowRight size={14} />}
           onClick={handleNext}
           disabled={selectedIds.length === 0 || createDraft.isPending}
-          sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+          sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
         >
           Weiter
         </Button>
diff --git a/src/components/anfragencenter/OfferWizardPdfStep.tsx b/src/components/anfragencenter/OfferWizardPdfStep.tsx
index 91f7119..e03f1b4 100644
--- a/src/components/anfragencenter/OfferWizardPdfStep.tsx
+++ b/src/components/anfragencenter/OfferWizardPdfStep.tsx
@@ -18,8 +18,8 @@ export function OfferWizardPdfStep({ generating, progress, ready, draft, propert
     <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 3 }}>
       {generating ? (
         <>
-          <CircularProgress size={48} sx={{ color: '#1e3a5f' }} />
-          <Typography variant="body1" sx={{ fontWeight: 600, color: '#1e3a5f' }}>
+          <CircularProgress size={48} sx={{ color: '#152642' }} />
+          <Typography variant="body1" sx={{ fontWeight: 600, color: '#152642' }}>
             PDF wird generiert…
           </Typography>
           <Box sx={{ width: '100%', maxWidth: 400 }}>
@@ -44,7 +44,7 @@ export function OfferWizardPdfStep({ generating, progress, ready, draft, propert
               overflow: 'hidden',
             }}
           >
-            <Box sx={{ bgcolor: '#1e3a5f', px: 2, py: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Box sx={{ bgcolor: '#152642', px: 2, py: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
               <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: '#ef4444' }} />
               <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: '#f59e0b' }} />
               <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: '#10b981' }} />
@@ -53,7 +53,7 @@ export function OfferWizardPdfStep({ generating, progress, ready, draft, propert
               </Typography>
             </Box>
             <Box sx={{ flex: 1, p: 3 }}>
-              <Typography variant="body2" sx={{ fontWeight: 700, color: '#1e3a5f', mb: 1 }}>
+              <Typography variant="body2" sx={{ fontWeight: 700, color: '#152642', mb: 1 }}>
                 Angebotsschreiben
               </Typography>
               {draft?.editableFields.slice(0, 3).map(f => (
@@ -83,7 +83,7 @@ export function OfferWizardPdfStep({ generating, progress, ready, draft, propert
               variant="contained"
               startIcon={<Download size={16} />}
               onClick={onDownload}
-              sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+              sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
             >
               Herunterladen
             </Button>
diff --git a/src/components/anfragencenter/OwnPropertyMatchList.tsx b/src/components/anfragencenter/OwnPropertyMatchList.tsx
index 5beb133..87bd35a 100644
--- a/src/components/anfragencenter/OwnPropertyMatchList.tsx
+++ b/src/components/anfragencenter/OwnPropertyMatchList.tsx
@@ -62,7 +62,7 @@ export function OwnPropertyMatchList({ need }: OwnPropertyMatchListProps) {
           flexShrink: 0,
         }}
       >
-        <Target size={14} color="#1e3a5f" />
+        <Target size={14} color="#152642" />
         <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a' }}>
           Eigene Objekte
         </Typography>
@@ -72,7 +72,7 @@ export function OwnPropertyMatchList({ need }: OwnPropertyMatchListProps) {
             px: 1,
             py: 0.125,
             borderRadius: 1,
-            bgcolor: '#1e3a5f',
+            bgcolor: '#152642',
             color: 'white',
             fontWeight: 600,
             fontSize: '0.7rem',
diff --git a/src/components/anfragencenter/PreparationWizard.tsx b/src/components/anfragencenter/PreparationWizard.tsx
index 9e1975e..2506c16 100644
--- a/src/components/anfragencenter/PreparationWizard.tsx
+++ b/src/components/anfragencenter/PreparationWizard.tsx
@@ -159,8 +159,8 @@ export function PreparationWizard({ inquiryId, inquiry, onClose }: Props) {
           <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 3 }}>
             {generating ? (
               <>
-                <CircularProgress size={48} sx={{ color: '#1e3a5f' }} />
-                <Typography variant="body1" sx={{ fontWeight: 600, color: '#1e3a5f' }}>
+                <CircularProgress size={48} sx={{ color: '#152642' }} />
+                <Typography variant="body1" sx={{ fontWeight: 600, color: '#152642' }}>
                   Bericht wird erstellt…
                 </Typography>
                 <Box sx={{ width: '100%', maxWidth: 400 }}>
@@ -234,7 +234,7 @@ export function PreparationWizard({ inquiryId, inquiry, onClose }: Props) {
                 fullWidth
                 startIcon={<Download size={16} />}
                 onClick={() => showToast('PDF wird heruntergeladen…', 'info')}
-                sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+                sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
               >
                 Herunterladen
               </Button>
@@ -271,7 +271,7 @@ export function PreparationWizard({ inquiryId, inquiry, onClose }: Props) {
               variant="contained"
               disabled={selectedIds.length === 0}
               onClick={handleGenerate}
-              sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+              sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
             >
               Weiter
             </Button>
@@ -282,7 +282,7 @@ export function PreparationWizard({ inquiryId, inquiry, onClose }: Props) {
               disabled={finalizing}
               onClick={handleFinalize}
               startIcon={finalizing ? <CircularProgress size={14} sx={{ color: 'white' }} /> : undefined}
-              sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+              sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
             >
               Finalisieren
             </Button>
diff --git a/src/components/anfragencenter/PublicNeedCard.tsx b/src/components/anfragencenter/PublicNeedCard.tsx
index 8998a37..b7d8798 100644
--- a/src/components/anfragencenter/PublicNeedCard.tsx
+++ b/src/components/anfragencenter/PublicNeedCard.tsx
@@ -19,12 +19,12 @@ export function PublicNeedCard({ need, selected, onClick }: PublicNeedCardProps)
         p: 1.5,
         borderRadius: 1.5,
         border: '1px solid',
-        borderColor: selected ? '#1e3a5f' : '#e2e8f0',
+        borderColor: selected ? '#152642' : '#e8e7e4',
         bgcolor: selected ? '#f1f5f9' : 'white',
         cursor: 'pointer',
         transition: 'all 0.15s',
         '&:hover': {
-          borderColor: selected ? '#1e3a5f' : '#94a3b8',
+          borderColor: selected ? '#152642' : '#94a3b8',
           boxShadow: '0 2px 6px rgba(15,23,42,0.06)',
         },
         display: 'flex',
diff --git a/src/components/anfragencenter/PublicNeedDetail.tsx b/src/components/anfragencenter/PublicNeedDetail.tsx
index e7a7219..347fbc2 100644
--- a/src/components/anfragencenter/PublicNeedDetail.tsx
+++ b/src/components/anfragencenter/PublicNeedDetail.tsx
@@ -174,7 +174,7 @@ export function PublicNeedDetail({ need }: PublicNeedDetailProps) {
                         variant="caption"
                         sx={{
                           fontWeight: 700,
-                          color: '#1e3a5f',
+                          color: '#152642',
                           fontSize: '0.75rem',
                           bgcolor: '#e0e7ff',
                           px: 1,
@@ -189,7 +189,7 @@ export function PublicNeedDetail({ need }: PublicNeedDetailProps) {
                       sx={{
                         height: 6,
                         borderRadius: 3,
-                        bgcolor: '#e2e8f0',
+                        bgcolor: '#e8e7e4',
                         overflow: 'hidden',
                       }}
                     >
@@ -197,7 +197,7 @@ export function PublicNeedDetail({ need }: PublicNeedDetailProps) {
                         sx={{
                           width: `${pct}%`,
                           height: '100%',
-                          bgcolor: '#1e3a5f',
+                          bgcolor: '#152642',
                           transition: 'width 0.3s',
                         }}
                       />
@@ -229,7 +229,7 @@ export function PublicNeedDetail({ need }: PublicNeedDetailProps) {
             disabled={disabled}
             sx={{
               textTransform: 'none',
-              bgcolor: '#1e3a5f',
+              bgcolor: '#152642',
               fontWeight: 600,
               '&:hover': { bgcolor: '#16304d' },
             }}
diff --git a/src/components/anfragencenter/PublicNeedList.tsx b/src/components/anfragencenter/PublicNeedList.tsx
index 9103435..16a2f87 100644
--- a/src/components/anfragencenter/PublicNeedList.tsx
+++ b/src/components/anfragencenter/PublicNeedList.tsx
@@ -47,7 +47,7 @@ export function PublicNeedList({ selectedNeedId, onSelect, fullWidth }: PublicNe
             px: 1,
             py: 0.125,
             borderRadius: 1,
-            bgcolor: '#1e3a5f',
+            bgcolor: '#152642',
             color: 'white',
             fontWeight: 600,
             fontSize: '0.7rem',
diff --git a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
index 5465151..572bdaf 100644
--- a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
+++ b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
@@ -60,7 +60,7 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId }: RelatedPrope
           height: 140,
           borderRadius: 1.5,
           overflow: 'hidden',
-          bgcolor: '#e2e8f0',
+          bgcolor: '#e8e7e4',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -203,7 +203,7 @@ function AdditionalMatchCard({ match }: { match: AdditionalPropertyMatch }) {
           size="small"
           endIcon={<ArrowRight size={11} />}
           onClick={() => navigate('/supply/properties')}
-          sx={{ textTransform: 'none', fontSize: '0.7rem', mt: 0.5, p: 0, minWidth: 0, color: '#1e3a5f' }}
+          sx={{ textTransform: 'none', fontSize: '0.7rem', mt: 0.5, p: 0, minWidth: 0, color: '#152642' }}
         >
           Ansehen
         </Button>
diff --git a/src/components/anfragencenter/SelectablePropertyMatchCard.tsx b/src/components/anfragencenter/SelectablePropertyMatchCard.tsx
index 20d02b0..3a9b8b5 100644
--- a/src/components/anfragencenter/SelectablePropertyMatchCard.tsx
+++ b/src/components/anfragencenter/SelectablePropertyMatchCard.tsx
@@ -31,12 +31,12 @@ export function SelectablePropertyMatchCard({
         p: 1.25,
         borderRadius: 1.5,
         border: '1px solid',
-        borderColor: selected ? '#1e3a5f' : '#e2e8f0',
+        borderColor: selected ? '#152642' : '#e8e7e4',
         bgcolor: selected ? '#eff6ff' : 'white',
         cursor: 'pointer',
         transition: 'all 0.15s',
         '&:hover': {
-          borderColor: selected ? '#1e3a5f' : '#94a3b8',
+          borderColor: selected ? '#152642' : '#94a3b8',
         },
         display: 'flex',
         gap: 1.25,
@@ -57,7 +57,7 @@ export function SelectablePropertyMatchCard({
           height: 40,
           flexShrink: 0,
           borderRadius: 1,
-          bgcolor: '#e2e8f0',
+          bgcolor: '#e8e7e4',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
diff --git a/src/components/anfragencenter/latentNeedUtils.ts b/src/components/anfragencenter/latentNeedUtils.ts
index 7cc1a6c..b8a672e 100644
--- a/src/components/anfragencenter/latentNeedUtils.ts
+++ b/src/components/anfragencenter/latentNeedUtils.ts
@@ -21,7 +21,7 @@ export function latentStatusBadge(status: 'public' | 'paused' | 'expired'): {
 } {
   if (status === 'public') return { label: 'Öffentlich', bg: '#dcfce7', fg: '#166534' }
   if (status === 'paused') return { label: 'Pausiert', bg: '#fed7aa', fg: '#9a3412' }
-  return { label: 'Abgelaufen', bg: '#e2e8f0', fg: '#475569' }
+  return { label: 'Abgelaufen', bg: '#e8e7e4', fg: '#475569' }
 }
 
 // Deterministic pseudo-random match score from string IDs (range 60–96)
diff --git a/src/components/assistant/AssistantActionCards.tsx b/src/components/assistant/AssistantActionCards.tsx
index c2dfbeb..7db3520 100644
--- a/src/components/assistant/AssistantActionCards.tsx
+++ b/src/components/assistant/AssistantActionCards.tsx
@@ -9,7 +9,7 @@ interface Props {
 }
 
 const ACTION_COLORS: Record<string, string> = {
-  NAVIGATE: '#1e3a5f',
+  NAVIGATE: '#152642',
   OPEN_REVIEW: '#7c3aed',
   ADD_TO_SHORTLIST: '#1a7a4a',
   REQUEST_DATA: '#d97706',
diff --git a/src/components/assistant/AssistantMessageList.tsx b/src/components/assistant/AssistantMessageList.tsx
index 858c493..4241341 100644
--- a/src/components/assistant/AssistantMessageList.tsx
+++ b/src/components/assistant/AssistantMessageList.tsx
@@ -25,7 +25,7 @@ function MessageBubble({ message }: { message: AssistantMessage }) {
             px: 1.5,
             py: 1,
             borderRadius: isUser ? '8px 8px 2px 8px' : '2px 8px 8px 8px',
-            bgcolor: isUser ? '#1e3a5f' : '#f1f5f9',
+            bgcolor: isUser ? '#152642' : '#f1f5f9',
             color: isUser ? 'white' : '#1e293b',
           }}
         >
diff --git a/src/components/assistant/GlobalAIAssistantDrawer.tsx b/src/components/assistant/GlobalAIAssistantDrawer.tsx
index c5e5f77..1f74608 100644
--- a/src/components/assistant/GlobalAIAssistantDrawer.tsx
+++ b/src/components/assistant/GlobalAIAssistantDrawer.tsx
@@ -237,7 +237,7 @@ export function GlobalAIAssistantDrawer() {
                   color: 'white',
                   flexShrink: 0,
                   '&:hover': { bgcolor: '#4338ca' },
-                  '&:disabled': { bgcolor: '#e2e8f0', color: '#94a3b8' },
+                  '&:disabled': { bgcolor: '#e8e7e4', color: '#94a3b8' },
                 }}
               >
                 <Send size={16} />
diff --git a/src/components/auth/DemoRoleSwitcher.tsx b/src/components/auth/DemoRoleSwitcher.tsx
index 9d168b3..f6fb01e 100644
--- a/src/components/auth/DemoRoleSwitcher.tsx
+++ b/src/components/auth/DemoRoleSwitcher.tsx
@@ -37,10 +37,10 @@ export function DemoRoleSwitcher() {
               sx={{
                 fontSize: '0.7rem',
                 height: 22,
-                bgcolor: active ? '#1e3a5f' : 'transparent',
+                bgcolor: active ? '#152642' : 'transparent',
                 color: active ? '#fff' : 'text.secondary',
                 border: '1px solid',
-                borderColor: active ? '#1e3a5f' : 'divider',
+                borderColor: active ? '#152642' : 'divider',
                 '&:hover': { bgcolor: active ? '#162d4a' : 'rgba(0,0,0,0.04)' },
               }}
             />
diff --git a/src/components/auth/SessionExpired.tsx b/src/components/auth/SessionExpired.tsx
index 0ede7c4..7755c97 100644
--- a/src/components/auth/SessionExpired.tsx
+++ b/src/components/auth/SessionExpired.tsx
@@ -51,7 +51,7 @@ export function SessionExpired() {
       <Button
         variant="contained"
         onClick={handleRelogin}
-        sx={{ mt: 1, bgcolor: '#1e3a5f', textTransform: 'none' }}
+        sx={{ mt: 1, bgcolor: '#152642', textTransform: 'none' }}
       >
         Erneut anmelden
       </Button>
diff --git a/src/components/cards/MetricCard.tsx b/src/components/cards/MetricCard.tsx
index 461657f..5f4a1ae 100644
--- a/src/components/cards/MetricCard.tsx
+++ b/src/components/cards/MetricCard.tsx
@@ -17,7 +17,7 @@ interface MetricCardProps {
   sx?: SxProps<Theme>
 }
 
-export function MetricCard({ label, value, delta, icon, color = '#1e3a5f', sx }: MetricCardProps) {
+export function MetricCard({ label, value, delta, icon, color = '#152642', sx }: MetricCardProps) {
   return (
     <Card sx={{ p: 2.5, ...sx }}>
       <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
diff --git a/src/components/cards/SourceTypeBadge.tsx b/src/components/cards/SourceTypeBadge.tsx
index 9104367..e0af70a 100644
--- a/src/components/cards/SourceTypeBadge.tsx
+++ b/src/components/cards/SourceTypeBadge.tsx
@@ -9,7 +9,7 @@ interface SourceTypeBadgeProps {
 }
 
 const CONFIG: Record<string, { bg: string; color: string; Icon: React.ElementType }> = {
-  VERIFIED_PORTFOLIO:  { bg: 'rgba(30,58,95,0.1)',   color: '#1e3a5f', Icon: ShieldCheck },
+  VERIFIED_PORTFOLIO:  { bg: 'rgba(30,58,95,0.1)',   color: '#152642', Icon: ShieldCheck },
   MAISON_WORK:         { bg: 'rgba(3,105,161,0.1)',  color: '#0369a1', Icon: Building2 },
   FUTURE_AVAILABILITY: { bg: 'rgba(124,58,237,0.1)', color: '#6d28d9', Icon: Sparkles },
 }
diff --git a/src/components/compare/CompareColumnHeader.tsx b/src/components/compare/CompareColumnHeader.tsx
index eeab57d..776d46f 100644
--- a/src/components/compare/CompareColumnHeader.tsx
+++ b/src/components/compare/CompareColumnHeader.tsx
@@ -67,7 +67,7 @@ export function CompareColumnHeader({ item, onRemove }: Props) {
         sx={{
           fontWeight: 700, lineHeight: 1.3, mb: 0.25,
           cursor: 'pointer',
-          '&:hover': { color: '#1e3a5f' },
+          '&:hover': { color: '#152642' },
         }}
         onClick={() => navigate(`/demand/results/${item.matchId}`)}
       >
diff --git a/src/components/compare/CompareCriteriaCard.tsx b/src/components/compare/CompareCriteriaCard.tsx
index d53e8f4..5403113 100644
--- a/src/components/compare/CompareCriteriaCard.tsx
+++ b/src/components/compare/CompareCriteriaCard.tsx
@@ -38,7 +38,7 @@ export function CompareCriteriaCard({ compareItems, relevantCriteria, overallWin
               <TableCell sx={{ ...LABEL_SX, bgcolor: '#f8fafc', fontSize: 11 }}>Kriterium</TableCell>
               {compareItems.map(item => (
                 <TableCell key={item.matchId} sx={{ ...DATA_SX, bgcolor: '#f8fafc' }}>
-                  <Typography variant="caption" sx={{ fontWeight: 700, color: '#1e3a5f' }} noWrap>
+                  <Typography variant="caption" sx={{ fontWeight: 700, color: '#152642' }} noWrap>
                     {getTitle(item)}
                   </Typography>
                 </TableCell>
diff --git a/src/components/compare/CompareEmptyState.tsx b/src/components/compare/CompareEmptyState.tsx
index de4f42e..bb85998 100644
--- a/src/components/compare/CompareEmptyState.tsx
+++ b/src/components/compare/CompareEmptyState.tsx
@@ -15,7 +15,7 @@ export function CompareEmptyState() {
           Fügen Sie 2–4 Ergebnisse aus dem Feed, Match Detail oder Match Center zum Vergleich hinzu.
         </Typography>
         <Button variant="contained" size="small" onClick={() => navigate('/demand/results')}
-          sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}>
+          sx={{ bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' } }}>
           Zu den Suchergebnissen
         </Button>
       </Box>
diff --git a/src/components/compare/CompareTableBody.tsx b/src/components/compare/CompareTableBody.tsx
index 9a1b92e..ba8edef 100644
--- a/src/components/compare/CompareTableBody.tsx
+++ b/src/components/compare/CompareTableBody.tsx
@@ -208,7 +208,7 @@ export function CompareTableBody({
                 + {fitOutMonthlyLabel} CHF/Monat (Ausbau ÷ {FITOUT_AMORTIZATION_YEARS} J.)
               </Typography>
             )}
-            <Typography variant="body2" sx={{ fontWeight: 700, color: '#1e3a5f', borderTop: '1px solid #e2e8f0', pt: 0.5, mt: 0.25 }}>
+            <Typography variant="body2" sx={{ fontWeight: 700, color: '#152642', borderTop: '1px solid #e2e8f0', pt: 0.5, mt: 0.25 }}>
               = {totalMonthly.toLocaleString('de-CH')} CHF/Monat
             </Typography>
             {fitOutLabel && (
diff --git a/src/components/data-quality/DataQualityPanel.tsx b/src/components/data-quality/DataQualityPanel.tsx
index 86e4867..5690c92 100644
--- a/src/components/data-quality/DataQualityPanel.tsx
+++ b/src/components/data-quality/DataQualityPanel.tsx
@@ -81,7 +81,7 @@ export function DataQualityPanel({ property }: DataQualityPanelProps) {
           Datenaktualisierung anfragen
         </Button>
         {q.missingCriticalFields.length > 0 && (
-          <Button variant="contained" size="small" sx={{ textTransform: 'none', bgcolor: '#1e3a5f' }}>
+          <Button variant="contained" size="small" sx={{ textTransform: 'none', bgcolor: '#152642' }}>
             Fehlende Felder ergänzen
           </Button>
         )}
diff --git a/src/components/data-quality/DataQualityProgress.tsx b/src/components/data-quality/DataQualityProgress.tsx
index d1a97b4..42f6ebd 100644
--- a/src/components/data-quality/DataQualityProgress.tsx
+++ b/src/components/data-quality/DataQualityProgress.tsx
@@ -76,7 +76,7 @@ export function DataQualityProgress({ property, compact = false }: DataQualityPr
               sx={{
                 height: 4,
                 borderRadius: 2,
-                bgcolor: '#e2e8f0',
+                bgcolor: '#e8e7e4',
                 '& .MuiLinearProgress-bar': { bgcolor: d.color },
               }}
             />
@@ -110,7 +110,7 @@ export function DataQualityProgress({ property, compact = false }: DataQualityPr
               sx={{
                 height: 5,
                 borderRadius: 3,
-                bgcolor: '#e2e8f0',
+                bgcolor: '#e8e7e4',
                 '& .MuiLinearProgress-bar': { bgcolor: d.color },
               }}
             />
diff --git a/src/components/data-quality/ProvenancePanel.tsx b/src/components/data-quality/ProvenancePanel.tsx
index a74b896..7d3a412 100644
--- a/src/components/data-quality/ProvenancePanel.tsx
+++ b/src/components/data-quality/ProvenancePanel.tsx
@@ -79,7 +79,7 @@ export function ProvenancePanel({ property: p }: ProvenancePanelProps) {
           sx={{
             height: 5,
             borderRadius: 3,
-            bgcolor: '#e2e8f0',
+            bgcolor: '#e8e7e4',
             '& .MuiLinearProgress-bar': { bgcolor: color },
           }}
         />
diff --git a/src/components/demand/AISearchActionBar.tsx b/src/components/demand/AISearchActionBar.tsx
index 704a8e8..29aa41e 100644
--- a/src/components/demand/AISearchActionBar.tsx
+++ b/src/components/demand/AISearchActionBar.tsx
@@ -23,7 +23,7 @@ export function AISearchActionBar({ canProceed, isSearching, isSavingProfile, on
           sx={{
             flex: 1,
             py: 1.5,
-            bgcolor: '#1e3a5f',
+            bgcolor: '#152642',
             '&:hover': { bgcolor: '#162d4a' },
             fontSize: 15,
             fontWeight: 600,
diff --git a/src/components/demand/AISearchSavePreview.tsx b/src/components/demand/AISearchSavePreview.tsx
index c8b64b4..69cfd40 100644
--- a/src/components/demand/AISearchSavePreview.tsx
+++ b/src/components/demand/AISearchSavePreview.tsx
@@ -48,7 +48,7 @@ export function AISearchSavePreview({
       <Box sx={{
         maxWidth: 720, mx: 'auto', mt: 2,
         p: 1.5, borderRadius: 1.5, border: '1px solid',
-        borderColor: isAnonymous ? '#7c3aed' : '#e2e8f0',
+        borderColor: isAnonymous ? '#7c3aed' : '#e8e7e4',
         bgcolor: isAnonymous ? '#f5f3ff' : '#f8fafc',
         transition: 'all 0.15s',
       }}>
@@ -86,7 +86,7 @@ export function AISearchSavePreview({
           onClick={onSave}
           disabled={isSaving}
           endIcon={isSaving ? <CircularProgress size={16} color="inherit" /> : <Save size={16} />}
-          sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' }, textTransform: 'none' }}
+          sx={{ bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' }, textTransform: 'none' }}
         >
           {isSaving
             ? 'Wird gespeichert…'
diff --git a/src/components/demand/FollowUpPanel.tsx b/src/components/demand/FollowUpPanel.tsx
index 0f86fb6..e7bd678 100644
--- a/src/components/demand/FollowUpPanel.tsx
+++ b/src/components/demand/FollowUpPanel.tsx
@@ -66,7 +66,7 @@ export function FollowUpPanel({ questions, answers, onAnswer, onContinue, onRepa
           disabled={requiredUnanswered.length > 0}
           onClick={onContinue}
           endIcon={<ArrowRight size={16} />}
-          sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
+          sx={{ bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' } }}
         >
           Weiter zur Gewichtung
         </Button>
diff --git a/src/components/demand/NeedBuilderErrorState.tsx b/src/components/demand/NeedBuilderErrorState.tsx
index 97a8105..5ed8083 100644
--- a/src/components/demand/NeedBuilderErrorState.tsx
+++ b/src/components/demand/NeedBuilderErrorState.tsx
@@ -22,7 +22,7 @@ export function NeedBuilderErrorState({ message, onRetry }: Props) {
         variant="contained"
         startIcon={<RotateCcw size={16} />}
         onClick={onRetry}
-        sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
+        sx={{ bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' } }}
       >
         Erneut versuchen
       </Button>
diff --git a/src/components/demand/NeedCardPreview.tsx b/src/components/demand/NeedCardPreview.tsx
index 5615261..7cd0ab7 100644
--- a/src/components/demand/NeedCardPreview.tsx
+++ b/src/components/demand/NeedCardPreview.tsx
@@ -66,7 +66,7 @@ export function NeedCardPreview({ criteria: c, weights, confidenceByField, missi
         {/* Header */}
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
           {c.assetType && (
-            <Chip label={ASSET_LABELS[c.assetType] ?? c.assetType} size="small" sx={{ bgcolor: '#1e3a5f', color: 'white' }} />
+            <Chip label={ASSET_LABELS[c.assetType] ?? c.assetType} size="small" sx={{ bgcolor: '#152642', color: 'white' }} />
           )}
           <Chip label={isLowConfidence ? 'ENTWURF (needs_review)' : 'ENTWURF'} size="small" variant="outlined" />
         </Box>
@@ -143,7 +143,7 @@ export function NeedCardPreview({ criteria: c, weights, confidenceByField, missi
             variant="determinate"
             value={overallConfidence * 100}
             sx={{
-              height: 6, borderRadius: 3, bgcolor: '#e2e8f0',
+              height: 6, borderRadius: 3, bgcolor: '#e8e7e4',
               '& .MuiLinearProgress-bar': {
                 bgcolor: overallConfidence >= 0.7 ? '#1a7a4a' : overallConfidence >= 0.5 ? '#d97706' : '#c0392b',
               },
@@ -171,7 +171,7 @@ export function NeedCardPreview({ criteria: c, weights, confidenceByField, missi
                 <LinearProgress
                   variant="determinate"
                   value={((weights[k] ?? 0) / maxWeight) * 100}
-                  sx={{ flex: 1, height: 6, borderRadius: 3, bgcolor: '#e2e8f0', '& .MuiLinearProgress-bar': { bgcolor: '#1e3a5f' } }}
+                  sx={{ flex: 1, height: 6, borderRadius: 3, bgcolor: '#e8e7e4', '& .MuiLinearProgress-bar': { bgcolor: '#152642' } }}
                 />
                 <Typography variant="caption" sx={{ width: 32, textAlign: 'right' }}>{pct}%</Typography>
               </Box>
diff --git a/src/components/demand/NeedInput.tsx b/src/components/demand/NeedInput.tsx
index 129600f..de28635 100644
--- a/src/components/demand/NeedInput.tsx
+++ b/src/components/demand/NeedInput.tsx
@@ -81,7 +81,7 @@ export function NeedInput({ criteria: c, onCriteriaChange: set }: Props) {
             clickable
             onClick={() => set({ ...c, assetType: c.assetType === opt.value ? undefined : opt.value })}
             sx={c.assetType === opt.value
-              ? { bgcolor: '#1e3a5f', color: 'white', '& .MuiChip-label': { color: 'white' } }
+              ? { bgcolor: '#152642', color: 'white', '& .MuiChip-label': { color: 'white' } }
               : {}}
           />
         ))}
@@ -139,7 +139,7 @@ export function NeedInput({ criteria: c, onCriteriaChange: set }: Props) {
               })
             }}
             sx={c.preferredLocations?.includes(loc)
-              ? { fontSize: '0.68rem', height: 22, bgcolor: '#1e3a5f', color: 'white' }
+              ? { fontSize: '0.68rem', height: 22, bgcolor: '#152642', color: 'white' }
               : { fontSize: '0.68rem', height: 22, color: '#64748b', borderColor: '#cbd5e1' }
             }
           />
@@ -169,7 +169,7 @@ export function NeedInput({ criteria: c, onCriteriaChange: set }: Props) {
       <Box sx={{ mb: 2.5, px: 0.5 }}>
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5 }}>
           <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>Suchradius</Typography>
-          <Typography variant="caption" sx={{ fontWeight: 700, color: '#1e3a5f' }}>
+          <Typography variant="caption" sx={{ fontWeight: 700, color: '#152642' }}>
             {c.searchRadius ?? 30} km
           </Typography>
         </Box>
@@ -181,7 +181,7 @@ export function NeedInput({ criteria: c, onCriteriaChange: set }: Props) {
           step={1}
           onChange={(_, v) => set({ ...c, searchRadius: v as number })}
           size="small"
-          sx={{ color: '#1e3a5f', '& .MuiSlider-markLabel': { fontSize: '0.62rem' } }}
+          sx={{ color: '#152642', '& .MuiSlider-markLabel': { fontSize: '0.62rem' } }}
         />
       </Box>
 
@@ -197,7 +197,7 @@ export function NeedInput({ criteria: c, onCriteriaChange: set }: Props) {
             clickable
             onClick={() => set({ ...c, budgetRange: { maxPerSqm: p.value, currency: 'CHF' } })}
             sx={c.budgetRange?.maxPerSqm === p.value
-              ? { fontSize: '0.68rem', height: 22, bgcolor: '#1e3a5f', color: 'white' }
+              ? { fontSize: '0.68rem', height: 22, bgcolor: '#152642', color: 'white' }
               : { fontSize: '0.68rem', height: 22, color: '#64748b', borderColor: '#cbd5e1' }
             }
           />
@@ -243,7 +243,7 @@ export function NeedInput({ criteria: c, onCriteriaChange: set }: Props) {
       )}
 
       {/* Anonymous search */}
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1, mt: 0.5, py: 1, px: 1.5, borderRadius: 1.5, bgcolor: c.isAnonymous ? 'rgba(124,58,237,0.07)' : '#f8fafc', border: `1px solid ${c.isAnonymous ? '#7c3aed' : '#e2e8f0'}` }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1, mt: 0.5, py: 1, px: 1.5, borderRadius: 1.5, bgcolor: c.isAnonymous ? 'rgba(124,58,237,0.07)' : '#f8fafc', border: `1px solid ${c.isAnonymous ? '#7c3aed' : '#e8e7e4'}` }}>
         <Box>
           <Typography variant="caption" sx={{ fontWeight: 700, color: c.isAnonymous ? '#7c3aed' : '#334155' }}>
             Anonyme Suche
diff --git a/src/components/demand/VoiceNeedInput.tsx b/src/components/demand/VoiceNeedInput.tsx
index c0f1219..7a2169c 100644
--- a/src/components/demand/VoiceNeedInput.tsx
+++ b/src/components/demand/VoiceNeedInput.tsx
@@ -77,7 +77,7 @@ export function VoiceNeedInput({ text, onTextChange, onAiSubmit, isAnalyzing, is
       sx={{
         p: 3,
         border: '1px solid',
-        borderColor: isRecording ? '#dc2626' : '#e2e8f0',
+        borderColor: isRecording ? '#dc2626' : '#e8e7e4',
         transition: 'border-color 0.2s',
         bgcolor: isRecording ? '#fff5f5' : 'white',
       }}
@@ -101,11 +101,11 @@ export function VoiceNeedInput({ text, onTextChange, onAiSubmit, isAnalyzing, is
           />
         ) : isAnalyzing ? (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <CircularProgress size={14} sx={{ color: '#1e3a5f' }} />
-            <Typography variant="caption" sx={{ color: '#1e3a5f', fontWeight: 600 }}>Analysiert…</Typography>
+            <CircularProgress size={14} sx={{ color: '#152642' }} />
+            <Typography variant="caption" sx={{ color: '#152642', fontWeight: 600 }}>Analysiert…</Typography>
           </Box>
         ) : isAutoGen && text ? (
-          <Typography variant="caption" sx={{ color: '#1e3a5f', fontSize: 11 }}>⚡ auto-synchronisiert</Typography>
+          <Typography variant="caption" sx={{ color: '#152642', fontSize: 11 }}>⚡ auto-synchronisiert</Typography>
         ) : null}
       </Box>
 
@@ -154,7 +154,7 @@ export function VoiceNeedInput({ text, onTextChange, onAiSubmit, isAnalyzing, is
               size="small"
               disabled={isAnalyzing || !isSpeechSupported}
               title={isSpeechSupported ? 'Spracheingabe starten' : 'Spracheingabe nicht verfügbar'}
-              sx={{ bgcolor: '#f1f5f9', color: '#475569', '&:hover': { bgcolor: '#e2e8f0' }, '&:disabled': { opacity: 0.35 } }}
+              sx={{ bgcolor: '#f1f5f9', color: '#475569', '&:hover': { bgcolor: '#e8e7e4' }, '&:disabled': { opacity: 0.35 } }}
             >
               <Mic size={16} />
             </IconButton>
diff --git a/src/components/demand/WeightingEditor.tsx b/src/components/demand/WeightingEditor.tsx
index d881ca8..0947997 100644
--- a/src/components/demand/WeightingEditor.tsx
+++ b/src/components/demand/WeightingEditor.tsx
@@ -109,7 +109,7 @@ export function WeightingEditor({ weights, onChange, assetType }: Props) {
       </Box>
 
       <Card sx={{ p: 3 }}>
-        <SliderGroup label="Harte Kriterien" keys={HARD_KEYS} raw={raw} onSlider={handleSlider} color="#1e3a5f" />
+        <SliderGroup label="Harte Kriterien" keys={HARD_KEYS} raw={raw} onSlider={handleSlider} color="#152642" />
         <Divider sx={{ my: 2.5 }} />
         <SliderGroup label="Weiche Kriterien" keys={SOFT_KEYS} raw={raw} onSlider={handleSlider} color="#7c3aed" />
       </Card>
diff --git a/src/components/forms/PriorityChipGroup.tsx b/src/components/forms/PriorityChipGroup.tsx
index adfc430..7cf5ee0 100644
--- a/src/components/forms/PriorityChipGroup.tsx
+++ b/src/components/forms/PriorityChipGroup.tsx
@@ -39,7 +39,7 @@ export function PriorityChipGroup({ label, options, value, onChange, exclusive =
       <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
         {options.map(opt => {
           const selected = value.includes(opt.value)
-          const accent = opt.color ?? '#1e3a5f'
+          const accent = opt.color ?? '#152642'
           return (
             <Chip
               key={opt.value}
diff --git a/src/components/future-signals/FutureSignalFilterBar.tsx b/src/components/future-signals/FutureSignalFilterBar.tsx
index 5457bb1..cb2ed10 100644
--- a/src/components/future-signals/FutureSignalFilterBar.tsx
+++ b/src/components/future-signals/FutureSignalFilterBar.tsx
@@ -57,7 +57,7 @@ export function FutureSignalFilterBar({ filters, onChange, totalCount, filteredC
             onClick={() => set({ signalType: filters.signalType === t ? '' : t })}
             sx={{
               fontWeight: filters.signalType === t ? 700 : 400,
-              bgcolor: filters.signalType === t ? '#1e3a5f' : undefined,
+              bgcolor: filters.signalType === t ? '#152642' : undefined,
               color: filters.signalType === t ? 'white' : undefined,
             }}
           />
@@ -131,7 +131,7 @@ export function FutureSignalFilterBar({ filters, onChange, totalCount, filteredC
             label={`${activeCount} Filter aktiv`}
             size="small"
             onDelete={() => onChange(DEFAULT_SIGNAL_FILTERS)}
-            sx={{ bgcolor: '#eff6ff', color: '#1e3a5f' }}
+            sx={{ bgcolor: '#eff6ff', color: '#152642' }}
           />
         )}
         <Typography variant="caption" color="text.secondary">
diff --git a/src/components/layout/AppShellSidebar.tsx b/src/components/layout/AppShellSidebar.tsx
index 999a2d7..1566b14 100644
--- a/src/components/layout/AppShellSidebar.tsx
+++ b/src/components/layout/AppShellSidebar.tsx
@@ -13,7 +13,8 @@ export const SIDEBAR_BG = '#0f1923'
 export const DIVIDER_COLOR = 'rgba(255,255,255,0.08)'
 export const TEXT_MUTED = '#94a3b8'
 export const TEXT_WHITE = '#ffffff'
-export const NAV_ACTIVE_BG = 'rgba(255,255,255,0.12)'
+export const NAV_ACTIVE_BG = 'transparent'
+export const NAV_ACTIVE_ACCENT = '#b8975a'
 export const NAV_HOVER_BG = 'rgba(255,255,255,0.06)'
 
 // ---------------------------------------------------------------------------
@@ -188,16 +189,16 @@ export function Sidebar({
                     display: 'flex',
                     alignItems: 'center',
                     gap: 1.25,
-                    px: collapsed ? 0 : 1.5,
+                    pl: collapsed ? 0 : isActive ? 1.25 : 1.5,
+                    pr: collapsed ? 0 : 1.5,
                     py: 0.75,
                     mx: 0.5,
                     borderRadius: 1,
                     justifyContent: collapsed ? 'center' : 'flex-start',
-                    backgroundColor: isActive ? NAV_ACTIVE_BG : 'transparent',
-                    '&:hover': {
-                      backgroundColor: isActive ? NAV_ACTIVE_BG : NAV_HOVER_BG,
-                    },
-                    transition: 'background-color 0.15s ease',
+                    borderLeft: collapsed ? 'none' : `3px solid ${isActive ? NAV_ACTIVE_ACCENT : 'transparent'}`,
+                    backgroundColor: 'transparent',
+                    '&:hover': { backgroundColor: NAV_HOVER_BG },
+                    transition: 'border-color 0.15s ease',
                     cursor: 'pointer',
                   }}
                 >
@@ -208,8 +209,9 @@ export function Sidebar({
                         variant="body2"
                         sx={{
                           color: isActive ? TEXT_WHITE : TEXT_MUTED,
-                          fontWeight: isActive ? 500 : 400,
-                          fontSize: '0.8125rem',
+                          fontWeight: isActive ? 600 : 400,
+                          fontSize: '0.875rem',
+                          letterSpacing: '-0.01em',
                           whiteSpace: 'nowrap',
                         }}
                       >
@@ -263,7 +265,7 @@ export function Sidebar({
                 width: 32,
                 height: 32,
                 fontSize: '0.75rem',
-                bgcolor: '#1e3a5f',
+                bgcolor: '#b8975a',
                 flexShrink: 0,
               }}
             >
diff --git a/src/components/layout/AppShellTopBar.tsx b/src/components/layout/AppShellTopBar.tsx
index 846049f..935ced8 100644
--- a/src/components/layout/AppShellTopBar.tsx
+++ b/src/components/layout/AppShellTopBar.tsx
@@ -31,10 +31,10 @@ export function TopBar({ activeWorkspace, pathname, onMenuClick, isMobile }: Top
     <Box
       component="header"
       sx={{
-        height: 56,
+        height: 64,
         flexShrink: 0,
         backgroundColor: '#ffffff',
-        borderBottom: '1px solid #e2e8f0',
+        borderBottom: '1px solid #e8e7e4',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
@@ -51,12 +51,13 @@ export function TopBar({ activeWorkspace, pathname, onMenuClick, isMobile }: Top
         <Chip
           label={config.label}
           size="small"
+          variant="outlined"
           sx={{
-            backgroundColor: config.chipColor,
-            color: '#ffffff',
+            color: '#152642',
             fontWeight: 600,
             fontSize: '0.7rem',
             height: 22,
+            border: '1px solid #e8e7e4',
           }}
         />
         <Typography
diff --git a/src/components/layout/CompareTray.tsx b/src/components/layout/CompareTray.tsx
index 6906dad..b19a6dc 100644
--- a/src/components/layout/CompareTray.tsx
+++ b/src/components/layout/CompareTray.tsx
@@ -4,7 +4,7 @@ import { X } from 'lucide-react'
 import { useCompareStore } from '../../stores/compareStore'
 
 const TYPE_DOT: Record<string, string> = {
-  VERIFIED_PORTFOLIO:  '#1e3a5f',
+  VERIFIED_PORTFOLIO:  '#152642',
   MAISON_WORK:         '#0369a1',
   FUTURE_AVAILABILITY: '#7c3aed',
 }
@@ -92,7 +92,7 @@ export function CompareTray() {
         variant="contained"
         size="small"
         onClick={() => navigate('/demand/compare')}
-        sx={{ bgcolor: '#1e3a5f', textTransform: 'none', flexShrink: 0, '&:hover': { bgcolor: '#162d4a' } }}
+        sx={{ bgcolor: '#152642', textTransform: 'none', flexShrink: 0, '&:hover': { bgcolor: '#162d4a' } }}
       >
         Vergleich starten
       </Button>
diff --git a/src/components/layout/OrganizationContextBadge.tsx b/src/components/layout/OrganizationContextBadge.tsx
index 0ca238c..bf0f83c 100644
--- a/src/components/layout/OrganizationContextBadge.tsx
+++ b/src/components/layout/OrganizationContextBadge.tsx
@@ -13,7 +13,7 @@ export function OrganizationContextBadge() {
       variant="outlined"
       icon={<Building2 size={12} color="#64748b" />}
       label={currentUser.organizationName}
-      sx={{ fontSize: '0.7rem', height: 22, color: '#64748b', borderColor: '#e2e8f0' }}
+      sx={{ fontSize: '0.7rem', height: 22, color: '#64748b', borderColor: '#e8e7e4' }}
     />
   )
 }
diff --git a/src/components/layout/PageHeader.tsx b/src/components/layout/PageHeader.tsx
index 174f722..fa682d1 100644
--- a/src/components/layout/PageHeader.tsx
+++ b/src/components/layout/PageHeader.tsx
@@ -28,7 +28,7 @@ export function PageHeader({
   sx,
 }: PageHeaderProps) {
   return (
-    <Box sx={{ px: 3, py: 2.5, borderBottom: '1px solid #e2e8f0', ...sx }}>
+    <Box sx={{ px: 3, py: 3, borderBottom: '1px solid #e8e7e4', ...sx }}>
       {breadcrumbs && breadcrumbs.length > 0 && (
         <Breadcrumbs separator="/" sx={{ mb: 1 }}>
           {breadcrumbs.map((crumb) =>
@@ -52,7 +52,7 @@ export function PageHeader({
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
         <Box>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <Typography variant="h6" sx={{ fontWeight: 600, lineHeight: 1.3 }}>
+            <Typography variant="h6" sx={{ fontFamily: '"DM Serif Display", serif', fontWeight: 400, fontSize: '1.25rem', lineHeight: 1.3 }}>
               {title}
             </Typography>
             {badge}
diff --git a/src/components/layout/UserMenu.tsx b/src/components/layout/UserMenu.tsx
index 9f1b50f..e0cb38d 100644
--- a/src/components/layout/UserMenu.tsx
+++ b/src/components/layout/UserMenu.tsx
@@ -45,7 +45,7 @@ export function UserMenu() {
   return (
     <>
       <IconButton onClick={handleOpen} size="small" sx={{ p: 0 }}>
-        <Avatar sx={{ width: 32, height: 32, fontSize: '0.75rem', bgcolor: '#1e3a5f' }}>
+        <Avatar sx={{ width: 32, height: 32, fontSize: '0.75rem', bgcolor: '#152642' }}>
           {initials}
         </Avatar>
       </IconButton>
diff --git a/src/components/layout/appShellConfig.ts b/src/components/layout/appShellConfig.ts
index 37f7d88..135f96e 100644
--- a/src/components/layout/appShellConfig.ts
+++ b/src/components/layout/appShellConfig.ts
@@ -44,7 +44,7 @@ export const WORKSPACE_CONFIG: Record<WorkspaceType, WorkspaceConfig> = {
     abbreviation: 'VW',
     icon: Building2,
     firstPath: '/supply/dashboard',
-    chipColor: '#1e3a5f',
+    chipColor: '#152642',
     navItems: [
       { path: '/supply/dashboard', label: 'Übersicht', icon: LayoutDashboard },
       { path: '/supply/properties', label: 'Meine Objekte', icon: Building2 },
diff --git a/src/components/match-card/FutureAvailabilityCard.tsx b/src/components/match-card/FutureAvailabilityCard.tsx
index bd2a3d5..4e03085 100644
--- a/src/components/match-card/FutureAvailabilityCard.tsx
+++ b/src/components/match-card/FutureAvailabilityCard.tsx
@@ -32,7 +32,6 @@ export const FutureAvailabilityCard = memo(function FutureAvailabilityCard({ vm
       borderRadius: 2,
       overflow: 'hidden',
       border: `1px solid ${borderColor}`,
-      borderLeft: `3px solid ${accentColor}`,
       background: 'white',
       display: 'flex', flexDirection: 'column',
       boxShadow: '0 1px 8px rgba(0,0,0,0.06)',
diff --git a/src/components/match-card/IntelligenceMatchCard.tsx b/src/components/match-card/IntelligenceMatchCard.tsx
index a45f14f..edb90da 100644
--- a/src/components/match-card/IntelligenceMatchCard.tsx
+++ b/src/components/match-card/IntelligenceMatchCard.tsx
@@ -1,19 +1,15 @@
-import { Box, Button, Chip, Divider, Typography } from '@mui/material'
-import {
-  Building2,
-  CheckCircle2,
-} from 'lucide-react'
+import { Box, Button, Chip, Tooltip, Typography } from '@mui/material'
+import { Building2, CheckCircle2 } from 'lucide-react'
 import { useSessionStore } from '../../stores/sessionStore'
 import { useInquiryStore } from '../../stores/inquiryStore'
 import { LocationPreview } from '../shared/LocationPreview'
 import { HeatBadge } from '../shared/HeatBadge'
 import { getScoreTier, SCORE_THEME } from '../shared/scoreTheme'
-import { RESULT_TYPE_META } from '../../lib/ds'
+import { RESULT_TYPE_META, DS_TEXT, DS_BORDER } from '../../lib/ds'
+import { confidenceHex } from '../../lib/utils'
 import type { MatchCardViewModel } from './MatchCardViewModel'
 import { FutureAvailabilityCard } from './FutureAvailabilityCard'
 
-// ── Main component ────────────────────────────────────────────────────────────
-
 interface Props {
   vm: MatchCardViewModel
   imageUrl?: string
@@ -30,52 +26,64 @@ export function IntelligenceMatchCard({ vm, imageUrl, lat, lng, cityLabel, overl
   const { currentUser } = useSessionStore()
   const openInquiryDialog = useInquiryStore(s => s.openInquiryDialog)
   const isPortfolioOwner = currentUser?.role === 'PROPERTY_MANAGER' || currentUser?.role === 'ORGANIZATION_ADMIN'
-  const rt = RESULT_TYPE_META[vm.resultType] ?? { label: vm.resultType, color: '#64748b' }
+  const rt = RESULT_TYPE_META[vm.resultType] ?? { label: vm.resultType, color: '#9a9a9a' }
   const isFuture = vm.resultType === 'FUTURE_AVAILABILITY'
+  const confPct = Math.round(vm.confidenceScore * 100)
 
-  // Future availability cards use the new design
   if (isFuture) {
     return <FutureAvailabilityCard vm={vm} />
   }
 
+  // secondary chips — max 2 visible
+  const chips: Array<{ label: string; color?: string }> = []
+  if (vm.availabilityLabel) chips.push({ label: vm.availabilityLabel })
+  if (vm.fitOutLabel) chips.push({ label: vm.fitOutLabel })
+  if (vm.isDivisible && vm.minDivisibleUnitSqm) chips.push({ label: `Teilbar ab ${vm.minDivisibleUnitSqm} m²` })
+  const visibleChips = chips.slice(0, 2)
+  const hiddenChips = chips.slice(2)
+
   return (
     <Box sx={{
       borderRadius: 2,
       overflow: 'hidden',
-      boxShadow: `0 2px 16px rgba(0,0,0,0.07), 0 0 0 1px ${theme.cardBorder}`,
-      background: theme.cardBg,
+      border: `1px solid ${DS_BORDER.default}`,
+      bgcolor: '#ffffff',
+      boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
       display: 'flex',
       flexDirection: 'column',
-      transition: 'box-shadow 0.15s, transform 0.1s',
-      '&:hover': {
-        boxShadow: `0 6px 28px rgba(0,0,0,0.12), 0 0 0 1px ${theme.cardBorder}`,
-        transform: 'translateY(-1px)',
-      },
+      transition: 'border-color 0.15s',
+      '&:hover': { borderColor: '#c8c7c4' },
     }}>
 
       {/* ── Hero zone ── */}
       <Box sx={{ position: 'relative' }}>
-        <LocationPreview imageUrl={imageUrl} lat={lat} lng={lng} cityLabel={cityLabel} height={175} overlayTypeLabel={overlayTypeLabel} overlayLocationLabel={overlayLocationLabel} />
+        <LocationPreview imageUrl={imageUrl} lat={lat} lng={lng} cityLabel={cityLabel} height={200} overlayTypeLabel={overlayTypeLabel} overlayLocationLabel={overlayLocationLabel} />
+
+        {/* Score badge — bottom-left editorial */}
         <Box sx={{
-          position: 'absolute', top: 10, left: 10,
-          background: theme.gradient, borderRadius: '10px',
-          px: 1.5, py: 0.5,
-          boxShadow: `0 4px 16px ${theme.glow}`,
+          position: 'absolute', bottom: 10, left: 12,
+          bgcolor: theme.gradient, borderRadius: '8px',
+          px: 1.25, py: 0.375,
           border: `1px solid ${theme.border}`,
-          minWidth: 52, textAlign: 'center',
         }}>
-          <Typography sx={{ fontWeight: 900, fontSize: '1.5rem', color: theme.text, lineHeight: 1 }}>
+          <Typography sx={{
+            fontFamily: '"DM Serif Display", serif',
+            fontWeight: 400, fontSize: '1.625rem',
+            color: '#ffffff', lineHeight: 1,
+          }}>
             {vm.matchScore}%
           </Typography>
         </Box>
-        <Box sx={{ position: 'absolute', top: 10, right: 44, display: 'flex', flexDirection: 'column', gap: 0.5, alignItems: 'flex-end' }}>
+
+        {/* Top-right badge strip */}
+        <Box sx={{ position: 'absolute', top: 10, right: 10, display: 'flex', flexDirection: 'column', gap: 0.5, alignItems: 'flex-end' }}>
           <Chip label={rt.label} size="small" sx={{ bgcolor: rt.color, color: 'white', fontWeight: 600, fontSize: 10, height: 20 }} />
           {vm.resultType === 'VERIFIED_PORTFOLIO' && isPortfolioOwner && (
             <Chip
-              icon={<Building2 size={9} color="#1e3a5f" />}
+              icon={<Building2 size={9} color="#152642" />}
               label="Ihr Objekt"
               size="small"
-              sx={{ bgcolor: 'rgba(30,58,95,0.85)', color: 'white', fontWeight: 700, fontSize: 9, height: 18, '& .MuiChip-icon': { ml: 0.5 } }}
+              sx={{ bgcolor: 'rgba(21,38,66,0.85)', color: 'white', fontWeight: 700, fontSize: 9, height: 18, '& .MuiChip-icon': { ml: 0.5 } }}
             />
           )}
           <HeatBadge propertyId={vm.propertyId} size="sm" />
@@ -83,24 +91,24 @@ export function IntelligenceMatchCard({ vm, imageUrl, lat, lng, cityLabel, overl
       </Box>
 
       {/* ── Card body ── */}
-      <Box sx={{ p: 2, flex: 1, display: 'flex', flexDirection: 'column', gap: 0 }}>
-        {/* Unit-first title (floor + street) */}
-        <Typography variant="subtitle1" sx={{ fontWeight: 700, lineHeight: 1.3 }} noWrap>
+      <Box sx={{ p: 2.25, flex: 1, display: 'flex', flexDirection: 'column', gap: 0 }}>
+
+        {/* Title */}
+        <Typography variant="subtitle1" sx={{ fontWeight: 700, lineHeight: 1.3, color: DS_TEXT.primary }} noWrap>
           {vm.title}
         </Typography>
-        {/* Building name as subtitle when a unit or floor range is in the title */}
         {vm.propertySubtitle && (
-          <Typography variant="caption" sx={{ display: 'block', mt: 0.125, color: '#475569', fontWeight: 500 }} noWrap>
+          <Typography variant="caption" sx={{ display: 'block', mt: 0.125, color: DS_TEXT.secondary, fontWeight: 500 }} noWrap>
             {vm.propertySubtitle}
           </Typography>
         )}
-        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.25 }}>
+        <Typography variant="caption" sx={{ color: DS_TEXT.muted, display: 'block', mt: 0.25 }}>
           {[vm.locationLabel, vm.availabilityLabel].filter(Boolean).join(' · ')}
         </Typography>
 
-        {/* Unit area + rent when a specific unit is matched */}
+        {/* Unit details */}
         {vm.preMarketUnit && (
-          <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.68rem', mt: 0.25 }}>
+          <Typography variant="caption" sx={{ color: DS_TEXT.muted, fontSize: '0.68rem', mt: 0.25 }}>
             {vm.preMarketUnit.areaSqm.toLocaleString('de-CH')} m²
             {vm.preMarketUnit.rentPricePerSqm
               ? ` · CHF ${Math.round(vm.preMarketUnit.rentPricePerSqm / 12).toLocaleString('de-CH')}/m²/Mt.`
@@ -108,43 +116,53 @@ export function IntelligenceMatchCard({ vm, imageUrl, lat, lng, cityLabel, overl
           </Typography>
         )}
 
-        {/* Regular explainability summary */}
+        {/* Confidence + secondary chips */}
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 1, alignItems: 'center' }}>
+          <Chip label={`${confPct}% Konfidenz`} size="small"
+            sx={{ bgcolor: confidenceHex(vm.confidenceScore), color: 'white', fontSize: 10, height: 20 }} />
+          {visibleChips.map((c, i) => (
+            <Chip key={i} label={c.label} size="small" variant="outlined"
+              sx={{ fontSize: 10, height: 20, borderColor: DS_BORDER.default, color: DS_TEXT.secondary }} />
+          ))}
+          {hiddenChips.length > 0 && (
+            <Tooltip title={hiddenChips.map(c => c.label).join(' · ')} arrow>
+              <Chip label={`+${hiddenChips.length}`} size="small" variant="outlined"
+                sx={{ fontSize: 10, height: 20, borderColor: DS_BORDER.default, color: DS_TEXT.muted }} />
+            </Tooltip>
+          )}
+        </Box>
+
+        {/* Explainability */}
         {vm.explainabilitySummary && (
-          <>
-            <Divider sx={{ my: 1.25 }} />
-            <Typography variant="body2" sx={{
-              fontWeight: 500, color: '#1e293b', lineHeight: 1.5, flex: 1,
-              overflow: 'hidden', display: '-webkit-box',
-              WebkitLineClamp: 3, WebkitBoxOrient: 'vertical',
-            }}>
-              {vm.explainabilitySummary}
-            </Typography>
-          </>
+          <Typography variant="body2" sx={{
+            fontWeight: 500, color: DS_TEXT.secondary, lineHeight: 1.5, flex: 1, mt: 1,
+            overflow: 'hidden', display: '-webkit-box',
+            WebkitLineClamp: 3, WebkitBoxOrient: 'vertical',
+          }}>
+            {vm.explainabilitySummary}
+          </Typography>
         )}
 
         {vm.reasons.length > 0 && (
-          <>
-            <Divider sx={{ my: 1.25 }} />
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.625 }}>
-              {vm.reasons.slice(0, 3).map((r, i) => (
-                <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
-                  <CheckCircle2 size={13} color="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} />
-                  <Box>
-                    <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: '#1e293b', lineHeight: 1.3 }}>
-                      {r.label}
-                    </Typography>
-                    <Typography sx={{ fontSize: '0.72rem', color: '#64748b', lineHeight: 1.3 }}>
-                      {r.explanation}
-                    </Typography>
-                  </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, mt: 1 }}>
+            {vm.reasons.slice(0, 3).map((r, i) => (
+              <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
+                <CheckCircle2 size={13} color="#1d6342" style={{ marginTop: 2, flexShrink: 0 }} />
+                <Box>
+                  <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: DS_TEXT.primary, lineHeight: 1.3 }}>
+                    {r.label}
+                  </Typography>
+                  <Typography sx={{ fontSize: '0.72rem', color: DS_TEXT.muted, lineHeight: 1.3 }}>
+                    {r.explanation}
+                  </Typography>
                 </Box>
-              ))}
-            </Box>
-          </>
+              </Box>
+            ))}
+          </Box>
         )}
 
         {/* Actions */}
-        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, mt: 1.5, pt: 1.25, borderTop: '1px solid rgba(0,0,0,0.06)' }}>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, mt: 1.5, pt: 1.25, borderTop: `1px solid ${DS_BORDER.muted}` }}>
           <Button
             size="small"
             variant="contained"
@@ -158,7 +176,7 @@ export function IntelligenceMatchCard({ vm, imageUrl, lat, lng, cityLabel, overl
                 propertyId: vm.propertyId,
               })
             }}
-            sx={{ textTransform: 'none', fontSize: '0.7rem', py: 0.375, px: 1, bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
+            sx={{ textTransform: 'none', fontSize: '0.7rem', py: 0.375, px: 1, bgcolor: '#152642', '&:hover': { bgcolor: '#0e1c30' } }}
           >
             Anfrage
           </Button>
@@ -169,9 +187,7 @@ export function IntelligenceMatchCard({ vm, imageUrl, lat, lng, cityLabel, overl
               variant={a.variant === 'primary' ? 'contained' : 'outlined'}
               onClick={a.onClick}
               disabled={a.disabled}
-              sx={{
-                textTransform: 'none', fontSize: '0.7rem', py: 0.375, px: 1,
-              }}
+              sx={{ textTransform: 'none', fontSize: '0.7rem', py: 0.375, px: 1 }}
             >
               {a.label}
             </Button>
diff --git a/src/components/match-card/MatchActionToolbar.tsx b/src/components/match-card/MatchActionToolbar.tsx
index d9161c2..f365f3e 100644
--- a/src/components/match-card/MatchActionToolbar.tsx
+++ b/src/components/match-card/MatchActionToolbar.tsx
@@ -26,7 +26,7 @@ export function MatchActionToolbar({ actions }: Props) {
           onClick={action.onClick}
           sx={
             action.variant === 'primary'
-              ? { bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }
+              ? { bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' } }
               : action.variant === 'danger'
               ? { color: '#c0392b', borderColor: '#c0392b', '&:hover': { borderColor: '#c0392b' } }
               : {}
diff --git a/src/components/match-card/MatchCardCompact.tsx b/src/components/match-card/MatchCardCompact.tsx
index ed524a4..b9ca4ff 100644
--- a/src/components/match-card/MatchCardCompact.tsx
+++ b/src/components/match-card/MatchCardCompact.tsx
@@ -1,11 +1,11 @@
 import { memo } from 'react'
-import { Alert, Box, Button, Chip, Divider, Typography } from '@mui/material'
+import { Alert, Box, Button, Chip, Divider, Tooltip, Typography } from '@mui/material'
 import { MapPin, Building2, CheckCircle2, AlertTriangle } from 'lucide-react'
 import { useSessionStore } from '../../stores/sessionStore'
 import { useInquiryStore } from '../../stores/inquiryStore'
 import { HeatBadge } from '../shared/HeatBadge'
 import { getScoreTier, SCORE_THEME } from '../shared/scoreTheme'
-import { RESULT_TYPE_META } from '../../lib/ds'
+import { RESULT_TYPE_META, DS_TEXT, DS_BORDER } from '../../lib/ds'
 import { confidenceHex } from '../../lib/utils'
 import { ScoreInlineBreakdown } from './ScoreInlineBreakdown'
 import { MatchCardRestrictedState } from './MatchCardRestrictedState'
@@ -25,12 +25,20 @@ export const MatchCardCompact = memo(function MatchCardCompact({ vm, imageUrl, o
   const isPortfolioOwner = currentUser?.role === 'PROPERTY_MANAGER' || currentUser?.role === 'ORGANIZATION_ADMIN'
 
   const tier = getScoreTier(vm.matchScore)
-  const theme = SCORE_THEME[tier]
-  const rt = RESULT_TYPE_META[vm.resultType] ?? { label: vm.resultType, color: '#64748b' }
+  const scoreBadgeBg = SCORE_THEME[tier].gradient
+  const rt = RESULT_TYPE_META[vm.resultType] ?? { label: vm.resultType, color: '#9a9a9a' }
   const confPct = Math.round(vm.confidenceScore * 100)
   const topRisk = vm.risks.find(r => r.level === 'CRITICAL' || r.level === 'HIGH')
 
-  const borderColor = vm.isCompareSelected ? '#7c3aed' : vm.isSelected ? '#1e3a5f' : 'transparent'
+  const leftAccent = vm.isCompareSelected ? '#5b3f8a' : vm.isSelected ? '#152642' : 'transparent'
+
+  const extraChips: string[] = []
+  if (vm.availabilityLabel) extraChips.push(vm.availabilityLabel)
+  if (vm.fitOutLabel) extraChips.push(vm.fitOutLabel)
+  if (vm.isDivisible && vm.minDivisibleUnitSqm) extraChips.push(`Teilbar ab ${vm.minDivisibleUnitSqm} m²`)
+  if (topRisk) extraChips.push(topRisk.level === 'CRITICAL' ? 'Kritisch' : 'Hohes Risiko')
+  const visibleExtra = extraChips.slice(0, 2)
+  const hiddenExtra = extraChips.slice(2)
 
   return (
     <Box sx={{
@@ -38,16 +46,17 @@ export const MatchCardCompact = memo(function MatchCardCompact({ vm, imageUrl, o
       mb: 1.5,
       borderRadius: 2,
       overflow: 'hidden',
-      border: `2px solid ${borderColor}`,
-      boxShadow: '0 2px 12px rgba(0,0,0,0.07)',
-      background: theme.cardBg,
+      border: `1px solid ${DS_BORDER.default}`,
+      borderLeft: `3px solid ${leftAccent}`,
+      bgcolor: '#ffffff',
+      boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
       opacity: vm.isStaleData ? 0.75 : 1,
-      transition: 'box-shadow 0.15s',
-      '&:hover': { boxShadow: '0 4px 20px rgba(0,0,0,0.11)' },
+      transition: 'border-color 0.15s',
+      '&:hover': { borderColor: '#c8c7c4' },
     }}>
 
       {/* ── Image strip ── */}
-      <Box sx={{ width: 120, flexShrink: 0, position: 'relative', bgcolor: '#dce8f2' }}>
+      <Box sx={{ width: 120, flexShrink: 0, position: 'relative', bgcolor: '#f4f3f0' }}>
         {imageUrl ? (
           <img
             src={imageUrl}
@@ -56,35 +65,37 @@ export const MatchCardCompact = memo(function MatchCardCompact({ vm, imageUrl, o
           />
         ) : (
           <Box sx={{
-            width: '100%', height: '100%', minHeight: 120,
+            width: '100%', height: '100%', minHeight: 140,
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            background: 'linear-gradient(160deg,#dce8f2 0%,#b8cfe0 100%)',
+            bgcolor: '#f4f3f0',
           }}>
-            <MapPin size={24} color="#7ba3bf" />
+            <MapPin size={24} color="#c4c4c4" />
           </Box>
         )}
 
         {/* Score badge */}
         <Box sx={{
           position: 'absolute', top: 8, left: 8,
-          background: theme.gradient, borderRadius: '8px',
-          px: 1, py: 0.25,
-          border: `1px solid ${theme.border}`,
-          boxShadow: `0 2px 8px ${theme.glow}`,
+          bgcolor: scoreBadgeBg, borderRadius: '6px',
+          px: 0.875, py: 0.25,
+          border: `1px solid ${SCORE_THEME[tier].border}`,
         }}>
-          <Typography sx={{ fontWeight: 900, fontSize: '1rem', color: theme.text, lineHeight: 1 }}>
+          <Typography sx={{
+            fontFamily: '"DM Serif Display", serif',
+            fontWeight: 400, fontSize: '1.125rem',
+            color: '#ffffff', lineHeight: 1,
+          }}>
             {vm.matchScore}%
           </Typography>
         </Box>
 
-        {/* Asset type label */}
         {overlayTypeLabel && (
           <Box sx={{
             position: 'absolute', bottom: 0, left: 0, right: 0,
             px: 0.75, py: 0.5,
-            background: 'linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%)',
+            background: 'linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%)',
           }}>
-            <Typography sx={{ fontSize: '0.6rem', fontWeight: 700, color: 'white', letterSpacing: 0.3, lineHeight: 1.3 }}>
+            <Typography sx={{ fontSize: '0.6rem', fontWeight: 600, color: 'white', lineHeight: 1.3 }}>
               {overlayTypeLabel}
             </Typography>
           </Box>
@@ -92,149 +103,113 @@ export const MatchCardCompact = memo(function MatchCardCompact({ vm, imageUrl, o
       </Box>
 
       {/* ── Content ── */}
-      <Box sx={{ flex: 1, p: 1.75, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+      <Box sx={{ flex: 1, p: 2, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
 
-        {/* Alerts */}
         {vm.disclaimer && (
           <Alert severity="warning" sx={{ mb: 1, py: 0.25, fontSize: '0.72rem' }}>{vm.disclaimer}</Alert>
         )}
 
-
         {/* Badges row */}
-        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.625, flexWrap: 'wrap', gap: 0.5 }}>
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, alignItems: 'center' }}>
-            <HeatBadge propertyId={vm.propertyId} size="sm" />
-            <Chip label={rt.label} size="small"
-              sx={{ bgcolor: rt.color, color: 'white', fontWeight: 600, fontSize: 10, height: 20 }} />
-            {vm.resultType === 'VERIFIED_PORTFOLIO' && isPortfolioOwner && (
-              <Chip icon={<Building2 size={9} color="#1e3a5f" />} label="Ihr Objekt" size="small"
-                sx={{ bgcolor: 'rgba(30,58,95,0.10)', color: '#1e3a5f', fontWeight: 700, fontSize: 9, height: 18, '& .MuiChip-icon': { ml: 0.5 } }} />
-            )}
-            <Chip label={`${confPct}% Konfidenz`} size="small"
-              sx={{ bgcolor: confidenceHex(vm.confidenceScore), color: 'white', fontSize: 10, height: 20 }} />
-            {vm.availabilityLabel && (
-              <Chip label={vm.availabilityLabel} size="small" variant="outlined" sx={{ fontSize: 10, height: 20 }} />
-            )}
-            {vm.fitOutLabel && (
-              <Chip
-                label={vm.fitOutLabel}
-                size="small" variant="outlined"
-                sx={{
-                  fontSize: 10, height: 20,
-                  borderColor: vm.fitOutViable ? '#059669' : '#94a3b8',
-                  color: vm.fitOutViable ? '#059669' : '#64748b',
-                }}
-              />
-            )}
-            {vm.fitOutInvestment && !vm.fitOutInvestment.isFullyCovered && (
-              <Chip
-                label={vm.fitOutInvestment.shortLabel}
-                size="small" variant="outlined"
-                sx={{
-                  fontSize: 10, height: 20,
-                  borderColor: vm.fitOutInvestment.netTotal.max > 100000 ? '#d97706' : '#94a3b8',
-                  color: vm.fitOutInvestment.netTotal.max > 100000 ? '#92400e' : '#64748b',
-                }}
-              />
-            )}
-            {vm.isDivisible && vm.minDivisibleUnitSqm && (
-              <Chip
-                label={`Teilbar ab ${vm.minDivisibleUnitSqm} m²`}
-                size="small" variant="outlined"
-                sx={{ fontSize: 10, height: 20, borderColor: '#7c3aed', color: '#7c3aed' }}
-              />
-            )}
-            {topRisk && (
-              <Chip
-                label={topRisk.level === 'CRITICAL' ? 'Kritisch' : 'Hohes Risiko'}
-                size="small" color="error" variant="outlined"
-                sx={{ fontSize: 10, height: 20 }}
-              />
-            )}
-          </Box>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, alignItems: 'center', mb: 0.75 }}>
+          <HeatBadge propertyId={vm.propertyId} size="sm" />
+          <Chip label={rt.label} size="small"
+            sx={{ bgcolor: rt.color, color: 'white', fontWeight: 600, fontSize: 10, height: 20 }} />
+          {vm.resultType === 'VERIFIED_PORTFOLIO' && isPortfolioOwner && (
+            <Chip icon={<Building2 size={9} color="#152642" />} label="Ihr Objekt" size="small"
+              sx={{ bgcolor: 'rgba(21,38,66,0.10)', color: '#152642', fontWeight: 700, fontSize: 9, height: 18, '& .MuiChip-icon': { ml: 0.5 } }} />
+          )}
+          <Chip label={`${confPct}% Konfidenz`} size="small"
+            sx={{ bgcolor: confidenceHex(vm.confidenceScore), color: 'white', fontSize: 10, height: 20 }} />
+          {visibleExtra.map((label, i) => (
+            <Chip key={i} label={label} size="small" variant="outlined"
+              sx={{ fontSize: 10, height: 20, borderColor: DS_BORDER.default, color: DS_TEXT.secondary }} />
+          ))}
+          {hiddenExtra.length > 0 && (
+            <Tooltip title={hiddenExtra.join(' · ')} arrow>
+              <Chip label={`+${hiddenExtra.length}`} size="small" variant="outlined"
+                sx={{ fontSize: 10, height: 20, borderColor: DS_BORDER.default, color: DS_TEXT.muted }} />
+            </Tooltip>
+          )}
         </Box>
 
         {/* Title + location */}
-        <Typography variant="subtitle2" sx={{ fontWeight: 700, lineHeight: 1.3 }} noWrap>
+        <Typography variant="subtitle2" sx={{ fontWeight: 700, lineHeight: 1.3, color: DS_TEXT.primary }} noWrap>
           {vm.title}
         </Typography>
         {vm.propertySubtitle && (
-          <Typography variant="caption" sx={{ color: '#475569', fontWeight: 500, display: 'block', mt: 0.1 }} noWrap>
+          <Typography variant="caption" sx={{ color: DS_TEXT.secondary, fontWeight: 500, display: 'block', mt: 0.1 }} noWrap>
             {vm.propertySubtitle}
           </Typography>
         )}
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4, mt: 0.25 }}>
-          <MapPin size={11} color="#64748b" />
-          <Typography variant="caption" color="text.secondary">
+          <MapPin size={11} color="#9a9a9a" />
+          <Typography variant="caption" sx={{ color: DS_TEXT.muted }}>
             {vm.locationLabel}
           </Typography>
         </Box>
 
-        {/* Explainability summary */}
         {vm.explainabilitySummary && (
-          <Typography variant="body2" sx={{ color: '#374151', fontWeight: 500, mt: 0.5, lineHeight: 1.45,
+          <Typography variant="body2" sx={{ color: DS_TEXT.secondary, fontWeight: 500, mt: 0.75, lineHeight: 1.5,
             overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>
             {vm.explainabilitySummary}
           </Typography>
         )}
 
-        <Divider sx={{ my: 1 }} />
-
-        {/* Score breakdown */}
-        {vm.scoreBreakdown && (
-          <Box sx={{ mb: 1 }}>
-            <ScoreInlineBreakdown scoreBreakdown={vm.scoreBreakdown} allFactors={vm.allFactors} compact />
-          </Box>
-        )}
-
-        {/* Reasons — all 3, same style as grid card */}
         {vm.reasons.length > 0 && (
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
-            {vm.reasons.slice(0, 3).map((r, i) => (
-              <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
-                <CheckCircle2 size={12} color="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} />
-                <Box>
-                  <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: '#1e293b', lineHeight: 1.3 }}>
-                    {r.label}
-                  </Typography>
-                  <Typography sx={{ fontSize: '0.69rem', color: '#64748b', lineHeight: 1.3 }}>
-                    {r.explanation}
-                  </Typography>
-                </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.35, mt: 0.75 }}>
+            {vm.reasons.slice(0, 2).map((r, i) => (
+              <Box key={i} sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                <CheckCircle2 size={11} color="#1d6342" style={{ flexShrink: 0 }} />
+                <Typography sx={{ fontSize: '0.72rem', color: DS_TEXT.secondary, lineHeight: 1.3 }}>
+                  {r.label}
+                </Typography>
               </Box>
             ))}
           </Box>
         )}
 
-        {/* Top tradeoff */}
-        {vm.tradeoffs.length > 0 && (
-          <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5, mt: 0.5 }}>
-            <AlertTriangle size={12} color="#d97706" style={{ marginTop: 2, flexShrink: 0 }} />
-            <Typography sx={{ fontSize: '0.69rem', color: '#92400e', lineHeight: 1.3 }}>
-              {vm.tradeoffs[0].concern}
-            </Typography>
-          </Box>
+        {vm.scoreFactors.length > 0 && (
+          <>
+            <Divider sx={{ my: 0.75 }} />
+            <ScoreInlineBreakdown factors={vm.scoreFactors} score={vm.matchScore} />
+          </>
+        )}
+
+        {topRisk && topRisk.level === 'CRITICAL' && (
+          <Alert icon={<AlertTriangle size={13} />} severity="error"
+            sx={{ mt: 0.75, py: 0.25, fontSize: '0.72rem' }}>
+            {topRisk.description}
+          </Alert>
         )}
 
         {/* Actions */}
-        <Box sx={{ display: 'flex', gap: 0.75, mt: 1.25, pt: 1, borderTop: '1px solid rgba(0,0,0,0.06)' }}>
-          <Button size="small" variant="contained" onClick={e => {
-            e.stopPropagation()
-            openInquiryDialog({
-              propertyTitle: vm.title,
-              location: vm.locationLabel ?? '',
-              matchScore: vm.matchScore,
-              matchId: vm.id,
-              propertyId: vm.propertyId,
-            })
-          }}
-            sx={{ textTransform: 'none', fontSize: '0.7rem', py: 0.375, px: 1, bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}>
+        <Box sx={{ display: 'flex', gap: 0.625, mt: 'auto', pt: 1, flexWrap: 'wrap' }}>
+          <Button
+            size="small"
+            variant="contained"
+            onClick={e => {
+              e.stopPropagation()
+              openInquiryDialog({
+                propertyTitle: vm.title,
+                location: vm.locationLabel ?? '',
+                matchScore: vm.matchScore,
+                matchId: vm.id,
+                propertyId: vm.propertyId,
+              })
+            }}
+            sx={{ textTransform: 'none', fontSize: '0.7rem', py: 0.375, px: 1, bgcolor: '#152642', '&:hover': { bgcolor: '#0e1c30' } }}
+          >
             Anfrage
           </Button>
           {vm.actions.map(a => (
-            <Button key={a.id} size="small" variant={a.variant === 'primary' ? 'contained' : 'outlined'}
-              onClick={a.onClick} disabled={a.disabled}
-              sx={{ textTransform: 'none', fontSize: '0.7rem', py: 0.375, px: 1 }}>
+            <Button
+              key={a.id}
+              size="small"
+              variant={a.variant === 'primary' ? 'contained' : 'outlined'}
+              onClick={a.onClick}
+              disabled={a.disabled}
+              sx={{ textTransform: 'none', fontSize: '0.7rem', py: 0.375, px: 1 }}
+            >
               {a.label}
             </Button>
           ))}
diff --git a/src/components/match-card/MatchCardCompareMini.tsx b/src/components/match-card/MatchCardCompareMini.tsx
index d67aa41..e83798e 100644
--- a/src/components/match-card/MatchCardCompareMini.tsx
+++ b/src/components/match-card/MatchCardCompareMini.tsx
@@ -4,7 +4,7 @@ import { MatchScoreDisplay } from './MatchScoreDisplay'
 import type { MatchCardViewModel } from './MatchCardViewModel'
 
 const RESULT_TYPE_META: Record<string, { label: string; color: string }> = {
-  VERIFIED_PORTFOLIO:  { label: 'Verified',    color: '#1e3a5f' },
+  VERIFIED_PORTFOLIO:  { label: 'Verified',    color: '#152642' },
   MAISON_WORK:         { label: 'Maison Work', color: '#0369a1' },
   FUTURE_AVAILABILITY: { label: 'Signal',      color: '#7c3aed' },
 }
diff --git a/src/components/match-card/MatchCardHeader.tsx b/src/components/match-card/MatchCardHeader.tsx
index 5d4629d..edadd40 100644
--- a/src/components/match-card/MatchCardHeader.tsx
+++ b/src/components/match-card/MatchCardHeader.tsx
@@ -38,10 +38,10 @@ export function MatchCardHeader({ vm, compact }: Props) {
         />
         {vm.resultType === 'VERIFIED_PORTFOLIO' && isPortfolioOwner && (
           <Chip
-            icon={<Building2 size={10} color="#1e3a5f" />}
+            icon={<Building2 size={10} color="#152642" />}
             label="Ihr Objekt"
             size="small"
-            sx={{ bgcolor: 'rgba(30,58,95,0.12)', color: '#1e3a5f', fontWeight: 700, fontSize: 11, '& .MuiChip-icon': { ml: 0.5 } }}
+            sx={{ bgcolor: 'rgba(30,58,95,0.12)', color: '#152642', fontWeight: 700, fontSize: 11, '& .MuiChip-icon': { ml: 0.5 } }}
           />
         )}
         {vm.assetType && (
diff --git a/src/components/match-card/ScoreInlineBreakdown.tsx b/src/components/match-card/ScoreInlineBreakdown.tsx
index f0e1878..f769b8b 100644
--- a/src/components/match-card/ScoreInlineBreakdown.tsx
+++ b/src/components/match-card/ScoreInlineBreakdown.tsx
@@ -25,7 +25,7 @@ const HARD_KEYS = new Set(['area', 'location', 'budget', 'timing'])
 
 function importanceLabel(weight: number, maxWeight: number): { label: string; color: string } {
   const ratio = maxWeight > 0 ? weight / maxWeight : 0
-  if (ratio >= 0.85) return { label: 'Entscheidend', color: '#1e3a5f' }
+  if (ratio >= 0.85) return { label: 'Entscheidend', color: '#152642' }
   if (ratio >= 0.65) return { label: 'Sehr wichtig', color: '#1d4ed8' }
   if (ratio >= 0.40) return { label: 'Wichtig',      color: '#475569' }
   if (ratio >= 0.20) return { label: 'Wenig wichtig',color: '#94a3b8' }
@@ -93,15 +93,15 @@ export function ScoreInlineBreakdown({ scoreBreakdown: sb, allFactors, compact =
 
   return (
     <Box>
-      <Typography variant="caption" sx={{ fontWeight: 700, color: '#1e3a5f', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 1 }}>
+      <Typography variant="caption" sx={{ fontWeight: 700, color: '#152642', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 1 }}>
         Hart-Kriterien
       </Typography>
       {hardFactors.map((f, i) => <FactorRow key={i} factor={f} maxWeight={maxHardWeight} />)}
       <Box sx={{ display: 'flex', justifyContent: 'space-between', bgcolor: '#eef2ff', px: 1.25, py: 0.6, borderRadius: 1, mb: softFactors.length > 0 ? 2 : 1.5 }}>
-        <Typography variant="caption" sx={{ fontWeight: 600, color: '#1e3a5f' }}>
+        <Typography variant="caption" sx={{ fontWeight: 600, color: '#152642' }}>
           {sb.hardMatchScore}/100 × 60%
         </Typography>
-        <Typography variant="caption" sx={{ fontWeight: 800, color: '#1e3a5f' }}>{hardContrib} Pkt</Typography>
+        <Typography variant="caption" sx={{ fontWeight: 800, color: '#152642' }}>{hardContrib} Pkt</Typography>
       </Box>
 
       {softFactors.length > 0 && (
diff --git a/src/components/match-card/SignalQualityDots.tsx b/src/components/match-card/SignalQualityDots.tsx
index 3b037bf..9d42aea 100644
--- a/src/components/match-card/SignalQualityDots.tsx
+++ b/src/components/match-card/SignalQualityDots.tsx
@@ -10,7 +10,7 @@ export function SignalQualityDots({ quality }: { quality: 'HIGH' | 'MEDIUM' | 'L
   return (
     <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
       {c.dots.map((filled, i) => (
-        <Box key={i} sx={{ width: 7, height: 7, borderRadius: '50%', bgcolor: filled ? c.color : '#e2e8f0' }} />
+        <Box key={i} sx={{ width: 7, height: 7, borderRadius: '50%', bgcolor: filled ? c.color : '#e8e7e4' }} />
       ))}
       <Typography sx={{ fontSize: '0.68rem', color: c.color, fontWeight: 600, ml: 0.25 }}>
         {c.label}
diff --git a/src/components/match-center/MatchListCard.tsx b/src/components/match-center/MatchListCard.tsx
index 6401c4f..006c85e 100644
--- a/src/components/match-center/MatchListCard.tsx
+++ b/src/components/match-center/MatchListCard.tsx
@@ -74,7 +74,7 @@ export function MatchListCard({ match, property, need, onSelect, onApprove }: Pr
               size="small"
               sx={need.isAnonymous
                 ? { bgcolor: '#f5f3ff', color: '#6d28d9', fontSize: 11, height: 20, fontWeight: 600, border: '1px solid #ddd6fe' }
-                : { bgcolor: '#eff6ff', color: '#1e3a5f', fontSize: 11, height: 20, fontWeight: 500 }
+                : { bgcolor: '#eff6ff', color: '#152642', fontSize: 11, height: 20, fontWeight: 500 }
               }
             />
           )}
diff --git a/src/components/match-center/MatchStatusBadge.tsx b/src/components/match-center/MatchStatusBadge.tsx
index f2afbc6..8fa1d09 100644
--- a/src/components/match-center/MatchStatusBadge.tsx
+++ b/src/components/match-center/MatchStatusBadge.tsx
@@ -5,7 +5,7 @@ const STATUS_META: Record<string, { label: string; color: string }> = {
   PENDING_REVIEW: { label: 'Ausstehend', color: '#d97706' },
   APPROVED:       { label: 'Genehmigt',  color: '#1a7a4a' },
   REJECTED:       { label: 'Abgelehnt',  color: '#c0392b' },
-  SHORTLISTED:    { label: 'Shortlist',  color: '#1e3a5f' },
+  SHORTLISTED:    { label: 'Shortlist',  color: '#152642' },
 }
 
 export function MatchStatusBadge({ status }: { status?: MatchStatus }) {
diff --git a/src/components/match-detail/ExecutiveSummaryPanel.tsx b/src/components/match-detail/ExecutiveSummaryPanel.tsx
index 0be9810..8e85e71 100644
--- a/src/components/match-detail/ExecutiveSummaryPanel.tsx
+++ b/src/components/match-detail/ExecutiveSummaryPanel.tsx
@@ -13,7 +13,7 @@ export function ExecutiveSummaryPanel({ match }: Props) {
 
   const rows: { icon: React.ReactNode; label: string; text: string }[] = [
     {
-      icon: <Target size={15} color="#1e3a5f" />,
+      icon: <Target size={15} color="#152642" />,
       label: 'Gesamteignung',
       text: match.explainabilitySummary || `${match.matchStrength}-Match mit ${match.matchScore} Punkten`,
     },
diff --git a/src/components/match-detail/InquiryQuickDialog.tsx b/src/components/match-detail/InquiryQuickDialog.tsx
index b268594..a9df729 100644
--- a/src/components/match-detail/InquiryQuickDialog.tsx
+++ b/src/components/match-detail/InquiryQuickDialog.tsx
@@ -82,7 +82,7 @@ export function InquiryQuickDialog() {
           size="small"
           disabled={!message.trim()}
           startIcon={<Send size={14} />}
-          sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
+          sx={{ bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' } }}
         >
           Anfrage senden
         </Button>
diff --git a/src/components/match-detail/MatchDetailHeader.tsx b/src/components/match-detail/MatchDetailHeader.tsx
index a6b0beb..656bfa6 100644
--- a/src/components/match-detail/MatchDetailHeader.tsx
+++ b/src/components/match-detail/MatchDetailHeader.tsx
@@ -6,7 +6,7 @@ import type { Property } from '../../domain/property'
 import type { FutureSignal } from '../../domain/futureSignal'
 
 const RESULT_TYPE_META: Record<string, { label: string; color: string }> = {
-  VERIFIED_PORTFOLIO:  { label: 'Verified Portfolio', color: '#1e3a5f' },
+  VERIFIED_PORTFOLIO:  { label: 'Verified Portfolio', color: '#152642' },
   MAISON_WORK:         { label: 'Maison Work',        color: '#0369a1' },
   FUTURE_AVAILABILITY: { label: 'Zukunftssignal',     color: '#7c3aed' },
 }
@@ -101,7 +101,7 @@ export function MatchDetailHeader({ match, property, signal, onBack, onCompare,
               size="small"
               startIcon={<Columns2 size={14} />}
               onClick={onCompare}
-              sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
+              sx={{ bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' } }}
             >
               Vergleichen
             </Button>
diff --git a/src/components/match-detail/MatchDetailHero.tsx b/src/components/match-detail/MatchDetailHero.tsx
index 988d525..67698e7 100644
--- a/src/components/match-detail/MatchDetailHero.tsx
+++ b/src/components/match-detail/MatchDetailHero.tsx
@@ -46,7 +46,7 @@ export function MatchDetailHero({
       {/* Hero: image first, map fallback */}
       {!isFuture && (
         property?.images?.[0] ? (
-          <Box sx={{ width: '100%', height: 400, overflow: 'hidden', bgcolor: '#e2e8f0', flexShrink: 0 }}>
+          <Box sx={{ width: '100%', height: 400, overflow: 'hidden', bgcolor: '#e8e7e4', flexShrink: 0 }}>
             <img
               src={property.images[0]}
               alt={property.title}
@@ -105,7 +105,7 @@ export function MatchDetailHero({
                   size="small"
                   startIcon={<Columns2 size={14} />}
                   onClick={onCompare}
-                  sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' }, textTransform: 'none' }}
+                  sx={{ bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' }, textTransform: 'none' }}
                 >
                   Vergleichen
                 </Button>
diff --git a/src/components/match-detail/NextActionsPanel.tsx b/src/components/match-detail/NextActionsPanel.tsx
index fb4befe..03ee604 100644
--- a/src/components/match-detail/NextActionsPanel.tsx
+++ b/src/components/match-detail/NextActionsPanel.tsx
@@ -28,7 +28,7 @@ export function NextActionsPanel({ match, onCompare, onPipeline, onInquire }: Pr
             variant="contained"
             startIcon={<MessageSquare size={14} />}
             onClick={onInquire}
-            sx={{ justifyContent: 'flex-start', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
+            sx={{ justifyContent: 'flex-start', bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' } }}
           >
             Anfrage senden
           </Button>
diff --git a/src/components/match-detail/scoreBreakdownConstants.ts b/src/components/match-detail/scoreBreakdownConstants.ts
index 37971e6..c6b77e7 100644
--- a/src/components/match-detail/scoreBreakdownConstants.ts
+++ b/src/components/match-detail/scoreBreakdownConstants.ts
@@ -20,7 +20,7 @@ export function factorLabel(criterion: string): string {
 // Convert normalised weight to 1-5 importance level relative to other factors in the same set
 export function importanceLabel(weight: number, maxWeight: number): { label: string; color: string } {
   const ratio = maxWeight > 0 ? weight / maxWeight : 0
-  if (ratio >= 0.85) return { label: 'Entscheidend', color: '#1e3a5f' }
+  if (ratio >= 0.85) return { label: 'Entscheidend', color: '#152642' }
   if (ratio >= 0.65) return { label: 'Sehr wichtig', color: '#1d4ed8' }
   if (ratio >= 0.40) return { label: 'Wichtig',      color: '#475569' }
   if (ratio >= 0.20) return { label: 'Wenig wichtig',color: '#94a3b8' }
diff --git a/src/components/onboarding/WelcomeDialog.tsx b/src/components/onboarding/WelcomeDialog.tsx
index b1f0276..8f28a3a 100644
--- a/src/components/onboarding/WelcomeDialog.tsx
+++ b/src/components/onboarding/WelcomeDialog.tsx
@@ -41,7 +41,7 @@ function Slide0() {
   return (
     <Box className="flex flex-col items-center text-center px-2">
       <Box className="mb-4">
-        <Building2 size={48} color="#1e3a5f" />
+        <Building2 size={48} color="#152642" />
       </Box>
       <Typography variant="h5" sx={{ fontWeight: 700, mb: 1 }}>
         Willkommen bei Property Match
@@ -74,7 +74,7 @@ function Slide1() {
   return (
     <Box className="flex flex-col items-center text-center px-2">
       <Box className="mb-4">
-        <Search size={48} color="#1e3a5f" />
+        <Search size={48} color="#152642" />
       </Box>
       <Typography variant="h5" sx={{ fontWeight: 700, mb: 1 }}>
         Bedarf beschreiben — KI findet Matches
diff --git a/src/components/ops/DataCategoryBadgeList.tsx b/src/components/ops/DataCategoryBadgeList.tsx
index be25c05..60d0aa2 100644
--- a/src/components/ops/DataCategoryBadgeList.tsx
+++ b/src/components/ops/DataCategoryBadgeList.tsx
@@ -18,7 +18,7 @@ export function DataCategoryBadgeList({ categories, max }: DataCategoryBadgeList
           label={cat}
           sx={{
             bgcolor: 'rgba(30,58,95,0.07)',
-            color: '#1e3a5f',
+            color: '#152642',
             border: 'none',
             fontSize: '0.68rem',
           }}
diff --git a/src/components/ops/MarketSignalDetailPanel.tsx b/src/components/ops/MarketSignalDetailPanel.tsx
index 4b1e21b..ff2a451 100644
--- a/src/components/ops/MarketSignalDetailPanel.tsx
+++ b/src/components/ops/MarketSignalDetailPanel.tsx
@@ -156,7 +156,7 @@ export function MarketSignalDetailPanel({ signal }: MarketSignalDetailPanelProps
                     label={entity.value}
                     sx={{
                       bgcolor: 'rgba(30,58,95,0.08)',
-                      color: '#1e3a5f',
+                      color: '#152642',
                       border: 'none',
                       fontSize: '0.75rem',
                       cursor: 'default',
diff --git a/src/components/ops/MarketSignalFilterBar.tsx b/src/components/ops/MarketSignalFilterBar.tsx
index 560e805..3a34d6e 100644
--- a/src/components/ops/MarketSignalFilterBar.tsx
+++ b/src/components/ops/MarketSignalFilterBar.tsx
@@ -48,10 +48,10 @@ export function MarketSignalFilterBar({ filters, onChange }: MarketSignalFilterB
               sx={{
                 fontSize: '0.65rem',
                 height: 20,
-                bgcolor: active ? '#1e3a5f' : 'transparent',
+                bgcolor: active ? '#152642' : 'transparent',
                 color: active ? '#fff' : 'text.secondary',
                 border: '1px solid',
-                borderColor: active ? '#1e3a5f' : 'divider',
+                borderColor: active ? '#152642' : 'divider',
                 '&:hover': { bgcolor: active ? '#162d4a' : 'rgba(0,0,0,0.04)' },
               }}
             />
diff --git a/src/components/ops/ReviewGatePanel.tsx b/src/components/ops/ReviewGatePanel.tsx
index b70ae71..d3b0f90 100644
--- a/src/components/ops/ReviewGatePanel.tsx
+++ b/src/components/ops/ReviewGatePanel.tsx
@@ -50,7 +50,7 @@ export function ReviewGatePanel({ gate }: ReviewGatePanelProps) {
 
         {reviewerNotes.length > 0 && (
           <Box sx={{ mt: 1, p: 1, bgcolor: 'rgba(30,58,95,0.04)', borderRadius: 1, border: '1px solid rgba(30,58,95,0.1)' }}>
-            <Typography variant="caption" sx={{ fontWeight: 600, color: '#1e3a5f', display: 'block', mb: 0.5 }}>
+            <Typography variant="caption" sx={{ fontWeight: 600, color: '#152642', display: 'block', mb: 0.5 }}>
               Reviewer-Informationen
             </Typography>
             {reviewerNotes.map((note, i) => (
diff --git a/src/components/ops/SignalConversionPanel.tsx b/src/components/ops/SignalConversionPanel.tsx
index 86834cf..5c96b9d 100644
--- a/src/components/ops/SignalConversionPanel.tsx
+++ b/src/components/ops/SignalConversionPanel.tsx
@@ -50,7 +50,7 @@ export function SignalConversionPanel({ signal }: SignalConversionPanelProps) {
       }}
     >
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
-        <ArrowRight size={16} color="#1e3a5f" />
+        <ArrowRight size={16} color="#152642" />
         <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
           In Future Availability überführen
         </Typography>
diff --git a/src/components/ops/SignalInbox.tsx b/src/components/ops/SignalInbox.tsx
index f7a8875..3e6e3a3 100644
--- a/src/components/ops/SignalInbox.tsx
+++ b/src/components/ops/SignalInbox.tsx
@@ -43,7 +43,7 @@ export function SignalInbox({
         <Chip
           label={isLoading ? '…' : signals.length}
           size="small"
-          sx={{ bgcolor: '#1e3a5f', color: '#fff', fontSize: '0.7rem', height: 20 }}
+          sx={{ bgcolor: '#152642', color: '#fff', fontSize: '0.7rem', height: 20 }}
         />
       </Box>
 
diff --git a/src/components/ops/SignalPipelineStepper.tsx b/src/components/ops/SignalPipelineStepper.tsx
index bfb400e..31d9d7b 100644
--- a/src/components/ops/SignalPipelineStepper.tsx
+++ b/src/components/ops/SignalPipelineStepper.tsx
@@ -16,14 +16,14 @@ export function SignalPipelineStepper({ pipelineState }: SignalPipelineStepperPr
       sx={{
         mb: 1,
         '& .MuiStepIcon-root': { fontSize: '1.6rem', color: '#cbd5e1' },
-        '& .MuiStepIcon-root.Mui-active': { color: '#1e3a5f' },
+        '& .MuiStepIcon-root.Mui-active': { color: '#152642' },
         '& .MuiStepIcon-root.Mui-completed': { color: '#15803d' },
         '& .MuiStepLabel-label': { fontSize: '0.68rem', mt: 0.5, color: '#64748b' },
-        '& .MuiStepLabel-label.Mui-active': { color: '#1e3a5f', fontWeight: 700 },
+        '& .MuiStepLabel-label.Mui-active': { color: '#152642', fontWeight: 700 },
         '& .MuiStepLabel-label.Mui-completed': { color: '#15803d' },
-        '& .MuiStepConnector-line': { borderTopWidth: 2, borderColor: '#e2e8f0' },
+        '& .MuiStepConnector-line': { borderTopWidth: 2, borderColor: '#e8e7e4' },
         '& .MuiStepConnector-root.Mui-completed .MuiStepConnector-line': { borderColor: '#15803d' },
-        '& .MuiStepConnector-root.Mui-active .MuiStepConnector-line': { borderColor: '#1e3a5f' },
+        '& .MuiStepConnector-root.Mui-active .MuiStepConnector-line': { borderColor: '#152642' },
       }}
     >
       {PIPELINE_STAGE_ORDER.map((stage) => (
diff --git a/src/components/ops/SignalPipelineView.tsx b/src/components/ops/SignalPipelineView.tsx
index 6906514..63360c2 100644
--- a/src/components/ops/SignalPipelineView.tsx
+++ b/src/components/ops/SignalPipelineView.tsx
@@ -123,7 +123,7 @@ export function SignalPipelineView({ signal }: SignalPipelineViewProps) {
                   sx={{
                     textTransform: 'none',
                     fontSize: '0.8rem',
-                    bgcolor: '#1e3a5f',
+                    bgcolor: '#152642',
                     '&:hover': { bgcolor: '#162d4a' },
                   }}
                 >
diff --git a/src/components/ops/SignalToMatchAuditTrail.tsx b/src/components/ops/SignalToMatchAuditTrail.tsx
index 3a19dd1..355244e 100644
--- a/src/components/ops/SignalToMatchAuditTrail.tsx
+++ b/src/components/ops/SignalToMatchAuditTrail.tsx
@@ -10,7 +10,7 @@ function getStageColor(entry: AuditTrailEntry): string {
   const idx = PIPELINE_STAGE_ORDER.indexOf(entry.stage)
   if (idx <= 0) return '#94a3b8'
   if (idx >= 5) return '#15803d'
-  if (idx >= 3) return '#1e3a5f'
+  if (idx >= 3) return '#152642'
   if (idx >= 2) return '#4f46e5'
   return '#2563eb'
 }
diff --git a/src/components/ops/SourceCard.tsx b/src/components/ops/SourceCard.tsx
index 39f31a1..86b69bb 100644
--- a/src/components/ops/SourceCard.tsx
+++ b/src/components/ops/SourceCard.tsx
@@ -67,7 +67,7 @@ export function SourceCard({ source, selected, onClick }: SourceCardProps) {
             mt: 0.25,
           }}
         >
-          <Icon size={14} color="#1e3a5f" />
+          <Icon size={14} color="#152642" />
         </Box>
         <Box sx={{ flex: 1, minWidth: 0 }}>
           <Typography
diff --git a/src/components/ops/SourceDetailPanel.tsx b/src/components/ops/SourceDetailPanel.tsx
index c0511e2..cfb2aa4 100644
--- a/src/components/ops/SourceDetailPanel.tsx
+++ b/src/components/ops/SourceDetailPanel.tsx
@@ -86,7 +86,7 @@ export function SourceDetailPanel({ source }: SourceDetailPanelProps) {
               flexShrink: 0,
             }}
           >
-            <SourceIcon size={18} color="#1e3a5f" />
+            <SourceIcon size={18} color="#152642" />
           </Box>
           <Box sx={{ flex: 1 }}>
             <Typography variant="h6" sx={{ fontWeight: 600, lineHeight: 1.3, mb: 0.25 }}>
@@ -166,7 +166,7 @@ export function SourceDetailPanel({ source }: SourceDetailPanelProps) {
               key={a}
               size="small"
               label={a}
-              sx={{ bgcolor: 'rgba(30,58,95,0.06)', color: '#1e3a5f', border: 'none', fontSize: '0.72rem' }}
+              sx={{ bgcolor: 'rgba(30,58,95,0.06)', color: '#152642', border: 'none', fontSize: '0.72rem' }}
             />
           ))}
         </Box>
@@ -194,7 +194,7 @@ export function SourceDetailPanel({ source }: SourceDetailPanelProps) {
                   startIcon={isRunning ? <CircularProgress size={12} sx={{ color: '#fff' }} /> : <Play size={14} />}
                   disabled={isRunning}
                   onClick={() => triggerRun(source.id)}
-                  sx={{ bgcolor: '#1e3a5f', textTransform: 'none', fontSize: '0.8rem', '&:hover': { bgcolor: '#162d4a' } }}
+                  sx={{ bgcolor: '#152642', textTransform: 'none', fontSize: '0.8rem', '&:hover': { bgcolor: '#162d4a' } }}
                 >
                   {isRunning ? 'Läuft...' : 'Demo-Run starten'}
                 </Button>
diff --git a/src/components/ops/SourceList.tsx b/src/components/ops/SourceList.tsx
index 8e30956..7206d4b 100644
--- a/src/components/ops/SourceList.tsx
+++ b/src/components/ops/SourceList.tsx
@@ -40,7 +40,7 @@ export function SourceList({
         <Chip
           label={isLoading ? '…' : sources.length}
           size="small"
-          sx={{ bgcolor: '#1e3a5f', color: '#fff', fontSize: '0.7rem', height: 20 }}
+          sx={{ bgcolor: '#152642', color: '#fff', fontSize: '0.7rem', height: 20 }}
         />
       </Box>
 
diff --git a/src/components/pipeline/PipelineCard.tsx b/src/components/pipeline/PipelineCard.tsx
index 6454606..dccb4a6 100644
--- a/src/components/pipeline/PipelineCard.tsx
+++ b/src/components/pipeline/PipelineCard.tsx
@@ -55,7 +55,7 @@ export function DraggableCard({
         boxShadow: isDragOverlay ? '0 8px 24px rgba(0,0,0,0.18)' : '0 1px 3px rgba(0,0,0,0.08)',
         '&:hover': isDragOverlay ? {} : {
           boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
-          borderColor: isSelected ? '#1e3a5f' : '#bfdbfe',
+          borderColor: isSelected ? '#152642' : '#bfdbfe',
         },
         transition: isDragOverlay ? undefined : 'box-shadow 0.15s, border-color 0.15s',
         userSelect: 'none',
@@ -83,7 +83,7 @@ export function DraggableCard({
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.125, flexShrink: 0 }}>
             {item.inquiryId && onChatClick && (
               <Tooltip title="Chat öffnen">
-                <IconButton size="small" onClick={onChatClick} sx={{ p: 0.25, color: '#1e3a5f', '&:hover': { bgcolor: '#eff6ff' } }}>
+                <IconButton size="small" onClick={onChatClick} sx={{ p: 0.25, color: '#152642', '&:hover': { bgcolor: '#eff6ff' } }}>
                   <MessageSquare size={13} />
                 </IconButton>
               </Tooltip>
@@ -93,7 +93,7 @@ export function DraggableCard({
                 <IconButton
                   size="small"
                   onClick={(e) => { e.stopPropagation(); navigate(path) }}
-                  sx={{ p: 0.25, color: '#94a3b8', '&:hover': { color: '#1e3a5f', bgcolor: '#eff6ff' } }}
+                  sx={{ p: 0.25, color: '#94a3b8', '&:hover': { color: '#152642', bgcolor: '#eff6ff' } }}
                 >
                   <ExternalLink size={13} />
                 </IconButton>
@@ -154,8 +154,8 @@ export function DraggableCard({
               }}
               sx={{
                 fontSize: '0.7rem', py: 0.5, textTransform: 'none', fontWeight: 600,
-                borderColor: '#1e3a5f', color: '#1e3a5f',
-                '&:hover': { bgcolor: '#eff6ff', borderColor: '#1e3a5f' },
+                borderColor: '#152642', color: '#152642',
+                '&:hover': { bgcolor: '#eff6ff', borderColor: '#152642' },
               }}
             >
               Zur Konversation
@@ -180,7 +180,7 @@ export function DraggableCard({
               }}
               sx={{
                 fontSize: '0.7rem', py: 0.5, textTransform: 'none', fontWeight: 600,
-                bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' },
+                bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' },
               }}
             >
               Anfrage senden
diff --git a/src/components/results/ResultFilterBar.tsx b/src/components/results/ResultFilterBar.tsx
index dfd130e..76e3c54 100644
--- a/src/components/results/ResultFilterBar.tsx
+++ b/src/components/results/ResultFilterBar.tsx
@@ -16,10 +16,10 @@ interface Props {
   isPropertyManager?: boolean
 }
 
-const FILTER_OPTIONS: { value: FilterSource; label: string; color: string }[] = [
-  { value: 'ALL',         label: 'Alle',        color: '#1e3a5f' },
-  { value: 'PLATFORM',    label: 'Plattform',   color: '#1e3a5f' },
-  { value: 'MAISON_WORK', label: 'Maison Work', color: '#0369a1' },
+const FILTER_OPTIONS: { value: FilterSource; label: string }[] = [
+  { value: 'ALL',         label: 'Alle' },
+  { value: 'PLATFORM',    label: 'Plattform' },
+  { value: 'MAISON_WORK', label: 'Maison Work' },
 ]
 
 const SORT_OPTIONS: { value: SortBy; label: string }[] = [
@@ -28,6 +28,9 @@ const SORT_OPTIONS: { value: SortBy; label: string }[] = [
   { value: 'rent',  label: 'Mietpreis' },
 ]
 
+const ACTIVE_CHIP = { bgcolor: '#152642', color: 'white', border: '1px solid #152642', fontWeight: 600 }
+const INACTIVE_CHIP = { bgcolor: 'transparent', color: 'text.secondary', border: '1px solid #e8e7e4', fontWeight: 400 }
+
 export function ResultFilterBar({
   filterSource,
   onFilterChange,
@@ -45,7 +48,7 @@ export function ResultFilterBar({
         {/* Source filter + toggles */}
         <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 0.5 }}>
           <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
-            {FILTER_OPTIONS.map(({ value, label, color }) => {
+            {FILTER_OPTIONS.map(({ value, label }) => {
               const active = filterSource === value
               return (
                 <Chip
@@ -54,12 +57,7 @@ export function ResultFilterBar({
                   size="small"
                   clickable
                   onClick={() => onFilterChange(value)}
-                  sx={{
-                    bgcolor: active ? color : 'transparent',
-                    color: active ? 'white' : 'text.secondary',
-                    border: `1px solid ${active ? color : '#e2e8f0'}`,
-                    fontWeight: active ? 600 : 400,
-                  }}
+                  sx={active ? ACTIVE_CHIP : INACTIVE_CHIP}
                 />
               )
             })}
@@ -67,36 +65,28 @@ export function ResultFilterBar({
 
           <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
 
-          {/* Future Availability toggle */}
           <Chip
             size="small"
             clickable
-            icon={<Zap size={11} color={showFutureAvailability ? '#7c3aed' : '#94a3b8'} />}
+            icon={<Zap size={11} color={showFutureAvailability ? '#5b3f8a' : '#c4c4c4'} />}
             label="Future Availability"
             onClick={() => onShowFutureAvailabilityChange(!showFutureAvailability)}
             sx={{
-              bgcolor: showFutureAvailability ? '#f3e8ff' : 'transparent',
-              color: showFutureAvailability ? '#6d28d9' : 'text.disabled',
-              border: `1px solid ${showFutureAvailability ? '#c4b5fd' : '#e2e8f0'}`,
-              fontWeight: showFutureAvailability ? 600 : 400,
-              textDecoration: showFutureAvailability ? 'none' : 'line-through',
+              ...(showFutureAvailability ? ACTIVE_CHIP : INACTIVE_CHIP),
+              bgcolor: showFutureAvailability ? '#152642' : 'transparent',
               '& .MuiChip-icon': { ml: 0.75 },
             }}
           />
 
-          {/* Eigene Objekte toggle — only for Property Managers */}
           {isPropertyManager && (
             <Chip
               size="small"
               clickable
-              icon={<Building2 size={11} color={showOwnProperties ? '#1e3a5f' : '#94a3b8'} />}
-              label="Eigene Objekte einblenden"
+              icon={<Building2 size={11} color={showOwnProperties ? 'white' : '#c4c4c4'} />}
+              label="Eigene Objekte"
               onClick={() => onShowOwnPropertiesChange?.(!showOwnProperties)}
               sx={{
-                bgcolor: showOwnProperties ? 'rgba(30,58,95,0.10)' : 'transparent',
-                color: showOwnProperties ? '#1e3a5f' : 'text.disabled',
-                border: `1px solid ${showOwnProperties ? '#1e3a5f' : '#e2e8f0'}`,
-                fontWeight: showOwnProperties ? 600 : 400,
+                ...(showOwnProperties ? ACTIVE_CHIP : INACTIVE_CHIP),
                 '& .MuiChip-icon': { ml: 0.75 },
               }}
             />
@@ -113,11 +103,7 @@ export function ResultFilterBar({
               size="small"
               clickable
               onClick={() => onSortChange(value)}
-              sx={{
-                bgcolor: sortBy === value ? '#1e3a5f' : 'transparent',
-                color: sortBy === value ? 'white' : 'text.secondary',
-                border: `1px solid ${sortBy === value ? '#1e3a5f' : '#e2e8f0'}`,
-              }}
+              sx={sortBy === value ? ACTIVE_CHIP : INACTIVE_CHIP}
             />
           ))}
         </Stack>
diff --git a/src/components/review/ReviewDetailPanel.tsx b/src/components/review/ReviewDetailPanel.tsx
index 40a15e4..590b5bc 100644
--- a/src/components/review/ReviewDetailPanel.tsx
+++ b/src/components/review/ReviewDetailPanel.tsx
@@ -121,7 +121,7 @@ export function ReviewDetailPanel({
                   sx={{
                     height: 4,
                     borderRadius: 2,
-                    bgcolor: '#e2e8f0',
+                    bgcolor: '#e8e7e4',
                     '& .MuiLinearProgress-bar': {
                       bgcolor: task.confidenceScore >= 0.7 ? '#1a7a4a' : task.confidenceScore >= 0.5 ? '#d97706' : '#c0392b',
                     },
diff --git a/src/components/review/ReviewEntityTypeBadge.tsx b/src/components/review/ReviewEntityTypeBadge.tsx
index 918d64f..13fc9ea 100644
--- a/src/components/review/ReviewEntityTypeBadge.tsx
+++ b/src/components/review/ReviewEntityTypeBadge.tsx
@@ -3,7 +3,7 @@ import type { ReviewEntityType } from '../../domain/review'
 
 const CONFIG: Record<ReviewEntityType, { label: string; color: string }> = {
   FUTURE_SIGNAL:        { label: 'Zukunftssignal',   color: '#7c3aed' },
-  MATCH_EXPLANATION:    { label: 'Match-Begründung', color: '#1e3a5f' },
+  MATCH_EXPLANATION:    { label: 'Match-Begründung', color: '#152642' },
   LOW_CONFIDENCE_MATCH: { label: 'Niedr. Konfidenz', color: '#ea580c' },
   CONTACT_RELEASE:      { label: 'Kontaktfreigabe',  color: '#0891b2' },
   AI_OUTPUT:            { label: 'AI-Output',        color: '#4f46e5' },
diff --git a/src/components/review/ReviewTaskCard.tsx b/src/components/review/ReviewTaskCard.tsx
index 8e5d39b..d9342cd 100644
--- a/src/components/review/ReviewTaskCard.tsx
+++ b/src/components/review/ReviewTaskCard.tsx
@@ -76,7 +76,7 @@ export function ReviewTaskCard({ task, isSelected, onSelect }: ReviewTaskCardPro
             sx={{
               height: 3,
               borderRadius: 2,
-              bgcolor: '#e2e8f0',
+              bgcolor: '#e8e7e4',
               '& .MuiLinearProgress-bar': {
                 bgcolor: task.confidenceScore >= 0.7 ? '#1a7a4a' : task.confidenceScore >= 0.5 ? '#d97706' : '#c0392b',
               },
diff --git a/src/components/scores/ScoreBar.tsx b/src/components/scores/ScoreBar.tsx
index f82523b..82fdda8 100644
--- a/src/components/scores/ScoreBar.tsx
+++ b/src/components/scores/ScoreBar.tsx
@@ -16,7 +16,7 @@ interface ScoreBarProps {
 }
 
 export function ScoreBar({ label, value, weight, color, maxWidth = 200 }: ScoreBarProps) {
-  const resolved = color ?? COLOR_MAP[matchScoreColor(value)] ?? '#1e3a5f'
+  const resolved = color ?? COLOR_MAP[matchScoreColor(value)] ?? '#152642'
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
diff --git a/src/components/shared/GenericBadge.tsx b/src/components/shared/GenericBadge.tsx
index 1fea6f8..e68087c 100644
--- a/src/components/shared/GenericBadge.tsx
+++ b/src/components/shared/GenericBadge.tsx
@@ -6,26 +6,15 @@ export type BadgeSemanticVariant = keyof typeof BADGE_COLORS
 
 export interface GenericBadgeProps {
   label: string
-  /**
-   * Semantic variant key from BADGE_COLORS (preferred).
-   * Example: semanticVariant="confidenceHigh" instead of color="#1a7a4a"
-   */
+  /** Semantic variant key from BADGE_COLORS (preferred). */
   semanticVariant?: BadgeSemanticVariant
-  /**
-   * Raw hex color — use only when no semantic variant fits.
-   * Prefer semanticVariant to avoid hardcoded colors.
-   */
+  /** Raw hex color — use only when no semantic variant fits. */
   color?: string
-  /** transparent: semi-opaque bg (color + 18% opacity) | solid: filled bg, white text */
-  variant?: 'transparent' | 'solid'
-  /** Adds a 1px border at color 25% opacity (transparent variant only) */
-  showBorder?: boolean
-  /** fontWeight 700 instead of 600 */
+  /** outlined: border + text, no bg | solid: filled bg, white text */
+  variant?: 'outlined' | 'solid'
   bold?: boolean
-  /** Optional lucide / MUI icon element — sized by the caller */
   icon?: ReactElement
   size?: 'small' | 'medium'
-  /** Wraps the badge in a Tooltip */
   tooltip?: string
   ariaLabel?: string
 }
@@ -34,15 +23,14 @@ export function GenericBadge({
   label,
   semanticVariant,
   color: colorProp,
-  variant = 'transparent',
-  showBorder = false,
+  variant = 'outlined',
   bold = false,
   icon,
   size = 'small',
   tooltip,
   ariaLabel,
 }: GenericBadgeProps) {
-  const color = semanticVariant ? BADGE_COLORS[semanticVariant] : (colorProp ?? '#64748b')
+  const color = semanticVariant ? BADGE_COLORS[semanticVariant] : (colorProp ?? '#9a9a9a')
 
   const chip = (
     <Chip
@@ -51,11 +39,11 @@ export function GenericBadge({
       icon={icon}
       aria-label={ariaLabel}
       sx={{
-        fontWeight: bold ? 700 : 600,
-        fontSize: size === 'small' ? '0.7rem' : '0.8125rem',
-        bgcolor: variant === 'solid' ? color : `${color}18`,
+        fontWeight: bold ? 700 : 500,
+        fontSize: size === 'small' ? '0.75rem' : '0.8125rem',
+        bgcolor: variant === 'solid' ? color : 'transparent',
         color: variant === 'solid' ? 'white' : color,
-        border: variant === 'transparent' && showBorder ? `1px solid ${color}40` : 'none',
+        border: variant === 'outlined' ? `1px solid ${color}` : 'none',
         '& .MuiChip-icon': { ml: 0.5 },
       }}
     />
diff --git a/src/components/shared/LocationPreview.tsx b/src/components/shared/LocationPreview.tsx
index 1d753ce..1046ef9 100644
--- a/src/components/shared/LocationPreview.tsx
+++ b/src/components/shared/LocationPreview.tsx
@@ -114,7 +114,7 @@ export function LocationPreview({ imageUrl, lat, lng, address, cityLabel, height
             '&:hover': { bgcolor: 'white' },
           }}
         >
-          <Map size={14} color="#1e3a5f" />
+          <Map size={14} color="#152642" />
         </IconButton>
       </Tooltip>
     </Box>
diff --git a/src/components/shared/PropertyMap.tsx b/src/components/shared/PropertyMap.tsx
index 9d09233..3598ce4 100644
--- a/src/components/shared/PropertyMap.tsx
+++ b/src/components/shared/PropertyMap.tsx
@@ -111,7 +111,7 @@ export function PropertyMap({ lat, lng, label, height = 260, searchCenterLat, se
             </Typography>
           </Box>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
-            <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: '#1e3a5f', flexShrink: 0 }} />
+            <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: '#152642', flexShrink: 0 }} />
             <Typography sx={{ fontSize: '0.67rem', color: '#334155' }}>Objekt</Typography>
           </Box>
         </Box>
diff --git a/src/components/shared/ViewToggle.tsx b/src/components/shared/ViewToggle.tsx
index 4885a27..17c5b4d 100644
--- a/src/components/shared/ViewToggle.tsx
+++ b/src/components/shared/ViewToggle.tsx
@@ -17,7 +17,7 @@ export function ViewToggle({ view, onChange }: Props) {
             borderRadius: 0,
             width: 32,
             height: 32,
-            bgcolor: view === 'list' ? '#1e3a5f' : 'transparent',
+            bgcolor: view === 'list' ? '#152642' : 'transparent',
             color: view === 'list' ? 'white' : '#64748b',
             '&:hover': { bgcolor: view === 'list' ? '#162d4a' : '#f1f5f9' },
           }}
@@ -33,7 +33,7 @@ export function ViewToggle({ view, onChange }: Props) {
             borderRadius: 0,
             width: 32,
             height: 32,
-            bgcolor: view === 'grid' ? '#1e3a5f' : 'transparent',
+            bgcolor: view === 'grid' ? '#152642' : 'transparent',
             color: view === 'grid' ? 'white' : '#64748b',
             '&:hover': { bgcolor: view === 'grid' ? '#162d4a' : '#f1f5f9' },
           }}
diff --git a/src/components/shortlist/AddToPipelineDialog.tsx b/src/components/shortlist/AddToPipelineDialog.tsx
index 2ce1de6..40135c3 100644
--- a/src/components/shortlist/AddToPipelineDialog.tsx
+++ b/src/components/shortlist/AddToPipelineDialog.tsx
@@ -58,7 +58,7 @@ export function AddToPipelineDialog() {
           onClick={handleConfirm}
           disabled={isPending}
           endIcon={isPending ? <CircularProgress size={14} color="inherit" /> : undefined}
-          sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
+          sx={{ bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' } }}
         >
           Merken
         </Button>
diff --git a/src/components/shortlist/AddToShortlistDialog.tsx b/src/components/shortlist/AddToShortlistDialog.tsx
index 8ea9258..23ff5e9 100644
--- a/src/components/shortlist/AddToShortlistDialog.tsx
+++ b/src/components/shortlist/AddToShortlistDialog.tsx
@@ -155,7 +155,7 @@ export function AddToShortlistDialog() {
             onClick={handleConfirm}
             disabled={!canConfirm}
             endIcon={isBusy ? <CircularProgress size={14} color="inherit" /> : undefined}
-            sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
+            sx={{ bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' } }}
           >
             Hinzufügen
           </Button>
diff --git a/src/components/shortlist/DecisionBriefDraftPanel.tsx b/src/components/shortlist/DecisionBriefDraftPanel.tsx
index 4c736fb..06c1e4d 100644
--- a/src/components/shortlist/DecisionBriefDraftPanel.tsx
+++ b/src/components/shortlist/DecisionBriefDraftPanel.tsx
@@ -80,7 +80,7 @@ export function DecisionBriefDraftPanel({ shortlistId }: Props) {
               size="small"
               startIcon={<Sparkles size={14} />}
               onClick={handleGenerate}
-              sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
+              sx={{ bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' } }}
             >
               Brief generieren
             </Button>
diff --git a/src/components/shortlist/ShortlistCard.tsx b/src/components/shortlist/ShortlistCard.tsx
index 577d12e..f0efa96 100644
--- a/src/components/shortlist/ShortlistCard.tsx
+++ b/src/components/shortlist/ShortlistCard.tsx
@@ -32,7 +32,7 @@ export function ShortlistCard({ shortlist }: Props) {
         <Chip
           label={shortlist.items.length}
           size="small"
-          sx={{ bgcolor: '#e2e8f0', color: '#475569', fontSize: 10, height: 18, minWidth: 22, flexShrink: 0 }}
+          sx={{ bgcolor: '#e8e7e4', color: '#475569', fontSize: 10, height: 18, minWidth: 22, flexShrink: 0 }}
         />
       </Box>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
diff --git a/src/components/shortlist/ShortlistDetail.tsx b/src/components/shortlist/ShortlistDetail.tsx
index 2f8f4ad..31808d0 100644
--- a/src/components/shortlist/ShortlistDetail.tsx
+++ b/src/components/shortlist/ShortlistDetail.tsx
@@ -181,7 +181,7 @@ export function ShortlistDetail({ shortlist }: Props) {
               <IconButton
                 size="small"
                 onClick={() => { setView('list'); localStorage.setItem('view-shortlist', 'list') }}
-                sx={{ color: view === 'list' ? '#1e3a5f' : '#94a3b8', bgcolor: view === 'list' ? '#eff6ff' : 'transparent' }}
+                sx={{ color: view === 'list' ? '#152642' : '#94a3b8', bgcolor: view === 'list' ? '#eff6ff' : 'transparent' }}
               >
                 <List size={16} />
               </IconButton>
@@ -190,7 +190,7 @@ export function ShortlistDetail({ shortlist }: Props) {
               <IconButton
                 size="small"
                 onClick={() => { setView('grid'); localStorage.setItem('view-shortlist', 'grid') }}
-                sx={{ color: view === 'grid' ? '#1e3a5f' : '#94a3b8', bgcolor: view === 'grid' ? '#eff6ff' : 'transparent' }}
+                sx={{ color: view === 'grid' ? '#152642' : '#94a3b8', bgcolor: view === 'grid' ? '#eff6ff' : 'transparent' }}
               >
                 <LayoutGrid size={16} />
               </IconButton>
diff --git a/src/components/shortlist/ShortlistItemCard.tsx b/src/components/shortlist/ShortlistItemCard.tsx
index fdc7cee..b6bd112 100644
--- a/src/components/shortlist/ShortlistItemCard.tsx
+++ b/src/components/shortlist/ShortlistItemCard.tsx
@@ -103,7 +103,7 @@ export function ShortlistItemCard({ item, shortlistId, isFinalized, view = 'list
           variant="contained"
           onClick={handleSendInquiry}
           disabled={!inquiryMsg.trim()}
-          sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#1a3050' } }}
+          sx={{ bgcolor: '#152642', '&:hover': { bgcolor: '#1a3050' } }}
         >
           Anfrage senden
         </Button>
@@ -141,7 +141,7 @@ export function ShortlistItemCard({ item, shortlistId, isFinalized, view = 'list
                 <IconButton
                   size="small"
                   onClick={e => { e.stopPropagation(); setInquiryOpen(true) }}
-                  sx={{ color: '#94a3b8', '&:hover': { color: '#1e3a5f' } }}
+                  sx={{ color: '#94a3b8', '&:hover': { color: '#152642' } }}
                 >
                   <MessageSquare size={14} />
                 </IconButton>
@@ -192,7 +192,7 @@ export function ShortlistItemCard({ item, shortlistId, isFinalized, view = 'list
       >
         <Box sx={{ flex: 1, minWidth: 0 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5, flexWrap: 'wrap' }}>
-            <Typography variant="body2" sx={{ fontWeight: 600, color: '#1e3a5f' }}>{item.title}</Typography>
+            <Typography variant="body2" sx={{ fontWeight: 600, color: '#152642' }}>{item.title}</Typography>
             <Chip
               label={RESULT_TYPE_LABEL[item.resultType] ?? item.resultType}
               size="small"
@@ -218,7 +218,7 @@ export function ShortlistItemCard({ item, shortlistId, isFinalized, view = 'list
             <IconButton
               size="small"
               onClick={e => { e.stopPropagation(); setInquiryOpen(true) }}
-              sx={{ color: '#94a3b8', '&:hover': { color: '#1e3a5f' } }}
+              sx={{ color: '#94a3b8', '&:hover': { color: '#152642' } }}
               title="Anfrage stellen"
             >
               <MessageSquare size={14} />
diff --git a/src/components/shortlist/ShortlistList.tsx b/src/components/shortlist/ShortlistList.tsx
index 0251c7a..3a8bbb5 100644
--- a/src/components/shortlist/ShortlistList.tsx
+++ b/src/components/shortlist/ShortlistList.tsx
@@ -70,7 +70,7 @@ export function ShortlistList({ shortlists, isLoading }: Props) {
             {createShortlist.isPending
               ? <CircularProgress size={20} sx={{ alignSelf: 'center', ml: 0.5 }} />
               : (
-                <Button size="small" variant="contained" onClick={handleCreate} disabled={!newTitle.trim()} sx={{ bgcolor: '#1e3a5f', minWidth: 0, px: 1 }}>
+                <Button size="small" variant="contained" onClick={handleCreate} disabled={!newTitle.trim()} sx={{ bgcolor: '#152642', minWidth: 0, px: 1 }}>
                   OK
                 </Button>
               )
@@ -82,7 +82,7 @@ export function ShortlistList({ shortlists, isLoading }: Props) {
             size="small"
             startIcon={<Plus size={14} />}
             onClick={() => setCreating(true)}
-            sx={{ color: '#1e3a5f', justifyContent: 'flex-start' }}
+            sx={{ color: '#152642', justifyContent: 'flex-start' }}
           >
             Neue Shortlist
           </Button>
diff --git a/src/components/shortlist/ShortlistStatusBadge.tsx b/src/components/shortlist/ShortlistStatusBadge.tsx
index 5ef6ab7..2e1fb33 100644
--- a/src/components/shortlist/ShortlistStatusBadge.tsx
+++ b/src/components/shortlist/ShortlistStatusBadge.tsx
@@ -6,7 +6,7 @@ const STATUS_META: Record<string, { label: string; color: string }> = {
   REVIEW_READY: { label: 'Prüfbereit',  color: '#d97706' },
   FINALIZED:    { label: 'Finalisiert', color: '#1a7a4a' },
   ARCHIVED:     { label: 'Archiviert',  color: '#475569' },
-  ACTIVE:       { label: 'Aktiv',       color: '#1e3a5f' },
+  ACTIVE:       { label: 'Aktiv',       color: '#152642' },
   SHARED:       { label: 'Geteilt',     color: '#7c3aed' },
   CONVERTED:    { label: 'Konvertiert', color: '#0891b2' },
 }
diff --git a/src/components/supply/BerichtDialog.tsx b/src/components/supply/BerichtDialog.tsx
index bb59842..039e7de 100644
--- a/src/components/supply/BerichtDialog.tsx
+++ b/src/components/supply/BerichtDialog.tsx
@@ -5,7 +5,7 @@ import type { MarketReport } from '../../domain/marketReport'
 import { DS_TEXT, DS_BG, DS_BORDER, DS_SURFACE } from '../../lib/ds'
 
 const SECTION_COLORS: Record<string, string> = {
-  development: '#1e3a5f',
+  development: '#152642',
   demand: '#1a7a4a',
   supply: '#b45309',
   negotiation: '#7c3aed',
diff --git a/src/components/supply/MarketKpiPanel.tsx b/src/components/supply/MarketKpiPanel.tsx
index dfb4555..464f33e 100644
--- a/src/components/supply/MarketKpiPanel.tsx
+++ b/src/components/supply/MarketKpiPanel.tsx
@@ -147,10 +147,10 @@ export function MarketKpiPanel({ baseKpis, assetTypeLabel, radius, onRadiusChang
               border: '1px solid #e2e8f0',
               color: '#64748b',
               '&.Mui-selected': {
-                bgcolor: '#1e3a5f',
+                bgcolor: '#152642',
                 color: '#ffffff',
-                borderColor: '#1e3a5f',
-                '&:hover': { bgcolor: '#1e3a5f' },
+                borderColor: '#152642',
+                '&:hover': { bgcolor: '#152642' },
               },
             },
           }}
diff --git a/src/components/supply/PropertyActivityLogPanel.tsx b/src/components/supply/PropertyActivityLogPanel.tsx
index f584cde..e36b5ee 100644
--- a/src/components/supply/PropertyActivityLogPanel.tsx
+++ b/src/components/supply/PropertyActivityLogPanel.tsx
@@ -43,8 +43,8 @@ const EVENT_LABELS: Record<ActivityEventType, string> = {
 }
 
 const EVENT_COLORS: Record<ActivityEventType, string> = {
-  PROPERTY_CREATED: '#1e3a5f',
-  PROPERTY_UPDATED: '#1e3a5f',
+  PROPERTY_CREATED: '#152642',
+  PROPERTY_UPDATED: '#152642',
   MATCH_APPROVED: '#1a7a4a',
   MATCH_REJECTED: '#c0392b',
   SIGNAL_VERIFIED: '#7c3aed',
@@ -68,7 +68,7 @@ const CATEGORY_META: Record<ActivityCategory, { label: string; color: string }>
   MATCHING:     { label: 'Matching',     color: '#1a7a4a' },
   INTELLIGENCE: { label: 'Intelligence', color: '#7c3aed' },
   REVIEW:       { label: 'Review',       color: '#d97706' },
-  GOVERNANCE:   { label: 'Governance',   color: '#1e3a5f' },
+  GOVERNANCE:   { label: 'Governance',   color: '#152642' },
 }
 
 function getEventIcon(type: ActivityEventType) {
diff --git a/src/components/supply/PropertyDetailOverview.tsx b/src/components/supply/PropertyDetailOverview.tsx
index c677590..483c720 100644
--- a/src/components/supply/PropertyDetailOverview.tsx
+++ b/src/components/supply/PropertyDetailOverview.tsx
@@ -138,8 +138,8 @@ export function PropertyDetailOverview({ p, editing, draft, onDraftChange }: Pro
           {/* Mietvertrag */}
           <Box sx={{ mt: 1.5, p: 1.5, border: '1px solid #e2e8f0', borderRadius: 1.5, bgcolor: p.leaseContractUrl ? '#f8fafc' : '#fafafa' }}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: p.leaseContractUrl ? 0.75 : 0 }}>
-              <FileText size={13} color={p.leaseContractUrl ? '#1e3a5f' : '#94a3b8'} />
-              <Typography variant="caption" sx={{ fontWeight: 700, color: p.leaseContractUrl ? '#1e3a5f' : '#94a3b8', textTransform: 'uppercase', letterSpacing: 0.4 }}>
+              <FileText size={13} color={p.leaseContractUrl ? '#152642' : '#94a3b8'} />
+              <Typography variant="caption" sx={{ fontWeight: 700, color: p.leaseContractUrl ? '#152642' : '#94a3b8', textTransform: 'uppercase', letterSpacing: 0.4 }}>
                 Mietvertrag
               </Typography>
             </Box>
@@ -155,7 +155,7 @@ export function PropertyDetailOverview({ p, editing, draft, onDraftChange }: Pro
                   href={p.leaseContractUrl}
                   target="_blank"
                   rel="noopener noreferrer"
-                  sx={{ textTransform: 'none', fontSize: '0.7rem', py: 0.25, px: 1, borderColor: '#cbd5e1', color: '#1e3a5f', whiteSpace: 'nowrap', flexShrink: 0 }}
+                  sx={{ textTransform: 'none', fontSize: '0.7rem', py: 0.25, px: 1, borderColor: '#cbd5e1', color: '#152642', whiteSpace: 'nowrap', flexShrink: 0 }}
                 >
                   Öffnen
                 </Button>
diff --git a/src/components/supply/PropertyDetailView.tsx b/src/components/supply/PropertyDetailView.tsx
index 1a57b70..0651371 100644
--- a/src/components/supply/PropertyDetailView.tsx
+++ b/src/components/supply/PropertyDetailView.tsx
@@ -110,7 +110,7 @@ export function PropertyDetailView({ propertyId, onClose, hideTabs = [] }: Prope
                   startIcon={saving ? <CircularProgress size={12} sx={{ color: 'white' }} /> : <Save size={13} />}
                   onClick={saveEdit}
                   disabled={saving}
-                  sx={{ textTransform: 'none', fontSize: '0.75rem', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+                  sx={{ textTransform: 'none', fontSize: '0.75rem', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
                 >
                   Speichern
                 </Button>
diff --git a/src/components/supply/PropertyFilterBar.tsx b/src/components/supply/PropertyFilterBar.tsx
index 2d68893..ffcae6a 100644
--- a/src/components/supply/PropertyFilterBar.tsx
+++ b/src/components/supply/PropertyFilterBar.tsx
@@ -79,7 +79,7 @@ export function PropertyFilterBar({ filters, onFiltersChange }: PropertyFilterBa
               onClick={() => toggleAssetType(t)}
               sx={{
                 cursor: 'pointer',
-                ...(selectedAssetTypes.includes(t) && { bgcolor: '#1e3a5f', color: 'white', borderColor: '#1e3a5f' }),
+                ...(selectedAssetTypes.includes(t) && { bgcolor: '#152642', color: 'white', borderColor: '#152642' }),
               }}
             />
           ))}
diff --git a/src/components/supply/PropertyIntelligenceCard.tsx b/src/components/supply/PropertyIntelligenceCard.tsx
index f108913..978a19c 100644
--- a/src/components/supply/PropertyIntelligenceCard.tsx
+++ b/src/components/supply/PropertyIntelligenceCard.tsx
@@ -2,6 +2,7 @@ import { memo } from 'react'
 import { Box, Chip, LinearProgress, Tooltip, Typography } from '@mui/material'
 import { MapPin, Maximize2, TrendingUp, Calendar } from 'lucide-react'
 import { getAssetTypeColor, getAssetTypeLabel, getAvailabilityLabel } from './propertyHelpers'
+import { DS_TEXT, DS_BORDER } from '../../lib/ds'
 import type { Property } from '../../domain/property'
 
 interface Props {
@@ -10,14 +11,13 @@ interface Props {
 }
 
 function availabilityColor(status: string) {
-  if (status === 'AVAILABLE_NOW') return { bg: '#dcfce7', text: '#15803d' }
+  if (status === 'AVAILABLE_NOW') return { bg: '#dcfce7', text: '#1d6342' }
   if (status === 'AVAILABLE_SOON') return { bg: '#fef9c3', text: '#a16207' }
-  return { bg: '#f1f5f9', text: '#64748b' }
+  return { bg: '#f4f3f0', text: '#9a9a9a' }
 }
 
 export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({ property: p, onSelect }: Props) {
   const confPct = Math.round(p.confidenceScore * 100)
-  const confColor = p.confidenceScore >= 0.75 ? '#15803d' : p.confidenceScore >= 0.55 ? '#d97706' : '#dc2626'
   const annualRent = Math.round(p.areaSqm * p.rentPricePerSqm / 1000)
   const avail = availabilityColor(p.availabilityStatus)
   const assetColor = getAssetTypeColor(p.assetType)
@@ -29,22 +29,18 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({
       sx={{
         borderRadius: 2,
         overflow: 'hidden',
-        border: '1px solid #e2e8f0',
+        border: `1px solid ${DS_BORDER.default}`,
         bgcolor: 'white',
-        boxShadow: '0 1px 4px rgba(0,0,0,0.06)',
+        boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
         display: 'flex',
         flexDirection: 'column',
         cursor: 'pointer',
-        transition: 'box-shadow 0.15s, transform 0.12s',
-        '&:hover': {
-          boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
-          transform: 'translateY(-2px)',
-          borderColor: '#cbd5e1',
-        },
+        transition: 'border-color 0.15s',
+        '&:hover': { borderColor: '#c8c7c4' },
       }}
     >
       {/* ── Image / header ── */}
-      <Box sx={{ position: 'relative', height: 120, flexShrink: 0, bgcolor: '#f1f5f9', overflow: 'hidden' }}>
+      <Box sx={{ position: 'relative', height: 140, flexShrink: 0, bgcolor: '#f4f3f0', overflow: 'hidden' }}>
         {hasImage ? (
           <Box
             component="img"
@@ -64,7 +60,6 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({
           </Box>
         )}
 
-        {/* Overlay gradient */}
         <Box sx={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 55%)' }} />
 
         {/* Top badges */}
@@ -85,11 +80,15 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({
         <Box sx={{ position: 'absolute', bottom: 8, left: 10, right: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
           <Box>
             <Typography sx={{ color: 'rgba(255,255,255,0.8)', fontSize: '0.65rem', lineHeight: 1 }}>Jahresmiete ca.</Typography>
-            <Typography sx={{ color: 'white', fontWeight: 800, fontSize: '1.05rem', lineHeight: 1.2 }}>
+            <Typography sx={{
+              color: 'white', lineHeight: 1.2,
+              fontFamily: '"DM Serif Display", serif',
+              fontWeight: 400, fontSize: '1.25rem',
+            }}>
               CHF {annualRent}k
             </Typography>
           </Box>
-          <Typography sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.72rem', fontWeight: 600 }}>
+          <Typography sx={{ color: 'rgba(255,255,255,0.85)', fontSize: '0.72rem', fontWeight: 600 }}>
             {p.rentPricePerSqm} /m²/J
           </Typography>
         </Box>
@@ -100,12 +99,12 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({
 
         {/* Title + location */}
         <Box>
-          <Typography variant="subtitle2" sx={{ fontWeight: 700, lineHeight: 1.3, color: '#0f172a', fontSize: '0.875rem' }} noWrap>
+          <Typography variant="subtitle2" sx={{ fontWeight: 700, lineHeight: 1.3, color: DS_TEXT.primary, fontSize: '0.875rem' }} noWrap>
             {p.title}
           </Typography>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4, mt: 0.3 }}>
-            <MapPin size={11} color="#94a3b8" />
-            <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.72rem' }}>
+            <MapPin size={11} color="#9a9a9a" />
+            <Typography variant="caption" sx={{ color: DS_TEXT.muted, fontSize: '0.72rem' }}>
               {p.location.city}{p.location.district ? ` · ${p.location.district}` : ''}
             </Typography>
           </Box>
@@ -113,65 +112,61 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({
 
         {/* Key metrics row */}
         <Box sx={{ display: 'flex', gap: 1 }}>
-          <Box sx={{ flex: 1, bgcolor: '#f8fafc', borderRadius: 1, px: 1, py: 0.75, textAlign: 'center', border: '1px solid #f1f5f9' }}>
+          <Box sx={{ flex: 1, bgcolor: '#f9f8f6', borderRadius: 1, px: 1, py: 0.75, textAlign: 'center', border: `1px solid ${DS_BORDER.muted}` }}>
             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.3, mb: 0.1 }}>
-              <Maximize2 size={10} color="#64748b" />
-              <Typography sx={{ fontSize: '0.62rem', color: '#94a3b8', textTransform: 'uppercase', letterSpacing: 0.3 }}>Fläche</Typography>
+              <Maximize2 size={10} color="#9a9a9a" />
+              <Typography sx={{ fontSize: '0.62rem', color: DS_TEXT.muted, textTransform: 'uppercase', letterSpacing: 0.3 }}>Fläche</Typography>
             </Box>
-            <Typography sx={{ fontWeight: 700, fontSize: '0.82rem', color: '#0f172a' }}>
+            <Typography sx={{ fontWeight: 700, fontSize: '0.82rem', color: DS_TEXT.primary }}>
               {p.areaSqm.toLocaleString('de-CH')} m²
             </Typography>
           </Box>
           {p.availabilityDate && (
-            <Box sx={{ flex: 1, bgcolor: '#f8fafc', borderRadius: 1, px: 1, py: 0.75, textAlign: 'center', border: '1px solid #f1f5f9' }}>
+            <Box sx={{ flex: 1, bgcolor: '#f9f8f6', borderRadius: 1, px: 1, py: 0.75, textAlign: 'center', border: `1px solid ${DS_BORDER.muted}` }}>
               <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.3, mb: 0.1 }}>
-                <Calendar size={10} color="#64748b" />
-                <Typography sx={{ fontSize: '0.62rem', color: '#94a3b8', textTransform: 'uppercase', letterSpacing: 0.3 }}>Ab</Typography>
+                <Calendar size={10} color="#9a9a9a" />
+                <Typography sx={{ fontSize: '0.62rem', color: DS_TEXT.muted, textTransform: 'uppercase', letterSpacing: 0.3 }}>Ab</Typography>
               </Box>
-              <Typography sx={{ fontWeight: 700, fontSize: '0.82rem', color: '#0f172a' }}>
+              <Typography sx={{ fontWeight: 700, fontSize: '0.82rem', color: DS_TEXT.primary }}>
                 {new Date(p.availabilityDate).toLocaleDateString('de-CH', { month: 'short', year: '2-digit' })}
               </Typography>
             </Box>
           )}
           {p.softFactors?.prestige != null && (
-            <Box sx={{ flex: 1, bgcolor: '#f8fafc', borderRadius: 1, px: 1, py: 0.75, textAlign: 'center', border: '1px solid #f1f5f9' }}>
+            <Box sx={{ flex: 1, bgcolor: '#f9f8f6', borderRadius: 1, px: 1, py: 0.75, textAlign: 'center', border: `1px solid ${DS_BORDER.muted}` }}>
               <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.3, mb: 0.1 }}>
-                <TrendingUp size={10} color="#64748b" />
-                <Typography sx={{ fontSize: '0.62rem', color: '#94a3b8', textTransform: 'uppercase', letterSpacing: 0.3 }}>Prestige</Typography>
+                <TrendingUp size={10} color="#9a9a9a" />
+                <Typography sx={{ fontSize: '0.62rem', color: DS_TEXT.muted, textTransform: 'uppercase', letterSpacing: 0.3 }}>Prestige</Typography>
               </Box>
-              <Typography sx={{ fontWeight: 700, fontSize: '0.82rem', color: '#0f172a' }}>
+              <Typography sx={{ fontWeight: 700, fontSize: '0.82rem', color: DS_TEXT.primary }}>
                 {p.softFactors.prestige}
               </Typography>
             </Box>
           )}
         </Box>
 
-        {/* Soft factor chips */}
+        {/* Chips: fit-out + contract */}
         {p.softFactors && (
           <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
-            {p.softFactors.publicTransportMinutes != null && (
-              <Chip label={`🚇 ${p.softFactors.publicTransportMinutes} min ÖV`} size="small"
-                sx={{ height: 20, fontSize: '0.65rem', bgcolor: '#f0f9ff', color: '#0369a1' }} />
-            )}
             {p.hardFacts?.fitOut && (() => {
               const FIT_OUT_META: Record<string, { label: string; tip: string }> = {
-                SHELL:   { label: 'Rohbau',          tip: 'Keine Einbauten — volle Ausbauinvestition durch Mieter erforderlich (Böden, Decken, Trennwände, TGA).' },
-                BASIC:   { label: 'Grundausbau',     tip: 'Grundinfrastruktur vorhanden (Böden, Beleuchtung, WCs). Ausbau für Büro/Betrieb noch nötig.' },
-                FULL:    { label: 'Vollausbau',      tip: 'Bezugsfertig ausgebaut — keine Ausbauinvestition nötig. Direkt einzugsbereit.' },
-                PREMIUM: { label: 'Premium-Ausbau',  tip: 'Hochwertig und repräsentativ ausgebaut. Sofort bezugsfertig ohne weiteren Ausbau.' },
+                SHELL:   { label: 'Rohbau',         tip: 'Keine Einbauten — volle Ausbauinvestition durch Mieter.' },
+                BASIC:   { label: 'Grundausbau',    tip: 'Grundinfrastruktur vorhanden, Ausbau noch nötig.' },
+                FULL:    { label: 'Vollausbau',     tip: 'Bezugsfertig ausgebaut.' },
+                PREMIUM: { label: 'Premium-Ausbau', tip: 'Hochwertig ausgebaut, sofort bezugsfertig.' },
               }
               const meta = FIT_OUT_META[p.hardFacts!.fitOut!] ?? { label: p.hardFacts!.fitOut!, tip: '' }
               return (
                 <Tooltip title={meta.tip} placement="top" arrow>
                   <Chip label={meta.label} size="small"
-                    sx={{ height: 20, fontSize: '0.65rem', bgcolor: '#f5f3ff', color: '#6d28d9', cursor: 'help' }} />
+                    sx={{ height: 20, fontSize: '0.65rem', bgcolor: '#f4f3f0', color: DS_TEXT.secondary, cursor: 'help', border: `1px solid ${DS_BORDER.default}` }} />
                 </Tooltip>
               )
             })()}
             {p.contractDurationMonths && (
-              <Tooltip title={`Mindest-Vertragslaufzeit: ${p.contractDurationMonths} Monate (${Math.round(p.contractDurationMonths / 12)} Jahre)`} placement="top" arrow>
+              <Tooltip title={`Mindest-Vertragslaufzeit: ${p.contractDurationMonths} Monate`} placement="top" arrow>
                 <Chip label={`${p.contractDurationMonths}M Vertrag`} size="small"
-                  sx={{ height: 20, fontSize: '0.65rem', bgcolor: '#f1f5f9', color: '#475569', cursor: 'help' }} />
+                  sx={{ height: 20, fontSize: '0.65rem', bgcolor: '#f4f3f0', color: DS_TEXT.secondary, cursor: 'help', border: `1px solid ${DS_BORDER.default}` }} />
               </Tooltip>
             )}
           </Box>
@@ -180,15 +175,15 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({
         {/* Confidence bar */}
         <Box sx={{ mt: 'auto' }}>
           <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.5 }}>
-            <Typography sx={{ fontSize: '0.67rem', color: '#94a3b8', textTransform: 'uppercase', letterSpacing: 0.3 }}>Datenkonfidenz</Typography>
-            <Typography sx={{ fontSize: '0.72rem', fontWeight: 700, color: confColor }}>{confPct}%</Typography>
+            <Typography sx={{ fontSize: '0.67rem', color: DS_TEXT.muted, textTransform: 'uppercase', letterSpacing: 0.3 }}>Datenkonfidenz</Typography>
+            <Typography sx={{ fontSize: '0.72rem', fontWeight: 700, color: p.confidenceScore >= 0.75 ? '#b8975a' : DS_TEXT.muted }}>{confPct}%</Typography>
           </Box>
           <LinearProgress
             variant="determinate"
             value={confPct}
             sx={{
-              height: 4, borderRadius: 2, bgcolor: '#f1f5f9',
-              '& .MuiLinearProgress-bar': { bgcolor: confColor, borderRadius: 2 },
+              height: 3, borderRadius: 2, bgcolor: '#f4f3f0',
+              '& .MuiLinearProgress-bar': { bgcolor: '#152642', borderRadius: 2 },
             }}
           />
         </Box>
diff --git a/src/components/supply/PropertyMarketSignalsTab.tsx b/src/components/supply/PropertyMarketSignalsTab.tsx
index aa266ca..d13850e 100644
--- a/src/components/supply/PropertyMarketSignalsTab.tsx
+++ b/src/components/supply/PropertyMarketSignalsTab.tsx
@@ -12,7 +12,7 @@ interface Props {
 }
 
 const STATIC_SECTIONS: { category: SignalCategory; label: string; icon: React.ReactNode; color: string }[] = [
-  { category: 'development', label: 'Entwicklungsnews', icon: <Building2 size={16} />, color: '#1e3a5f' },
+  { category: 'development', label: 'Entwicklungsnews', icon: <Building2 size={16} />, color: '#152642' },
   { category: 'negotiation', label: 'Verhandlungshinweise', icon: <Lightbulb size={16} />, color: '#7c3aed' },
 ]
 
diff --git a/src/components/supply/ReminderDetailDrawer.tsx b/src/components/supply/ReminderDetailDrawer.tsx
index 6f87fa2..618d0d8 100644
--- a/src/components/supply/ReminderDetailDrawer.tsx
+++ b/src/components/supply/ReminderDetailDrawer.tsx
@@ -105,7 +105,7 @@ export function ReminderDetailDrawer() {
                 <Typography variant="caption" color="text.secondary">Fläche: {reminder.areaSqm.toLocaleString('de-CH')} m²</Typography>
                 {reminderProperty?.leaseContractUrl ? (
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mt: 0.5 }}>
-                    <FileText size={12} color="#1e3a5f" />
+                    <FileText size={12} color="#152642" />
                     <Button
                       size="small"
                       variant="outlined"
@@ -113,7 +113,7 @@ export function ReminderDetailDrawer() {
                       href={reminderProperty.leaseContractUrl}
                       target="_blank"
                       rel="noopener noreferrer"
-                      sx={{ textTransform: 'none', fontSize: '0.68rem', py: 0.125, px: 0.75, borderColor: '#cbd5e1', color: '#1e3a5f' }}
+                      sx={{ textTransform: 'none', fontSize: '0.68rem', py: 0.125, px: 0.75, borderColor: '#cbd5e1', color: '#152642' }}
                     >
                       {reminderProperty.leaseContractName ?? 'Mietvertrag'}
                     </Button>
diff --git a/src/components/supply/ReminderFeed.tsx b/src/components/supply/ReminderFeed.tsx
index de57ed1..9d5c9f7 100644
--- a/src/components/supply/ReminderFeed.tsx
+++ b/src/components/supply/ReminderFeed.tsx
@@ -25,7 +25,7 @@ const HORIZON_CONFIG: { key: FilterHorizon; label: string; color: string; bg: st
   { key: 'OVERDUE',    label: 'Überfällig',    color: '#dc2626', bg: '#fef2f2', border: '#fecaca' },
   { key: 'THIS_WEEK',  label: 'Diese Woche',   color: '#ea580c', bg: '#fff7ed', border: '#fed7aa' },
   { key: 'THIS_MONTH', label: 'Dieser Monat',  color: '#0369a1', bg: '#f0f9ff', border: '#bae6fd' },
-  { key: 'LATER',      label: 'Später',        color: '#64748b', bg: '#f8fafc', border: '#e2e8f0' },
+  { key: 'LATER',      label: 'Später',        color: '#64748b', bg: '#f8fafc', border: '#e8e7e4' },
 ]
 
 const LIST_COLS = '100px 130px 1fr 140px 90px 100px 90px'
diff --git a/src/components/supply/ReminderTypeBadge.tsx b/src/components/supply/ReminderTypeBadge.tsx
index 5fcbe03..3d38760 100644
--- a/src/components/supply/ReminderTypeBadge.tsx
+++ b/src/components/supply/ReminderTypeBadge.tsx
@@ -13,7 +13,7 @@ import type { LucideIcon } from 'lucide-react'
 import type { ReminderType } from '../../domain/reminder'
 
 const CONFIG: Record<ReminderType, { Icon: LucideIcon; label: string; color: string }> = {
-  LEASE_EXPIRY:         { Icon: FileText,       label: 'Mietablauf',       color: '#1e3a5f' },
+  LEASE_EXPIRY:         { Icon: FileText,       label: 'Mietablauf',       color: '#152642' },
   BREAK_OPTION:         { Icon: ArrowRightLeft,  label: 'Break-Option',     color: '#7c3aed' },
   RENT_REVIEW:          { Icon: TrendingUp,      label: 'Mietanpassung',    color: '#0369a1' },
   INSPECTION:           { Icon: ClipboardCheck,  label: 'Inspektion',       color: '#065f46' },
diff --git a/src/components/supply/SignalCard.tsx b/src/components/supply/SignalCard.tsx
index 17112e2..62ad3d3 100644
--- a/src/components/supply/SignalCard.tsx
+++ b/src/components/supply/SignalCard.tsx
@@ -42,7 +42,7 @@ export function SignalCard({ signal }: { signal: PropertyMarketSignal }) {
             sx={{
               height: 3,
               borderRadius: 2,
-              bgcolor: '#e2e8f0',
+              bgcolor: '#e8e7e4',
               '& .MuiLinearProgress-bar': { bgcolor: signal.confidence >= 0.8 ? '#1a7a4a' : signal.confidence >= 0.6 ? '#d97706' : '#64748b' },
             }}
           />
@@ -66,7 +66,7 @@ export function SignalCard({ signal }: { signal: PropertyMarketSignal }) {
               alignItems: 'center',
               gap: 0.375,
               fontSize: '0.62rem',
-              color: signal.sourceUrl ? '#1e3a5f' : '#94a3b8',
+              color: signal.sourceUrl ? '#152642' : '#94a3b8',
               textDecoration: 'none',
               '&:hover': signal.sourceUrl ? { textDecoration: 'underline' } : {},
             }}
diff --git a/src/components/supply/propertyHelpers.ts b/src/components/supply/propertyHelpers.ts
index 9270876..01e763e 100644
--- a/src/components/supply/propertyHelpers.ts
+++ b/src/components/supply/propertyHelpers.ts
@@ -18,7 +18,7 @@ export function getAssetTypeLabel(type: AssetType): string {
 
 export function getAssetTypeColor(type: AssetType): string {
   const colors: Record<string, string> = {
-    OFFICE: '#1e3a5f',
+    OFFICE: '#152642',
     LOGISTICS: '#d97706',
     RETAIL: '#7c3aed',
     GASTRO: '#0d9488',
diff --git a/src/components/supply/reminderDetailHelpers.tsx b/src/components/supply/reminderDetailHelpers.tsx
index df454ff..3d61258 100644
--- a/src/components/supply/reminderDetailHelpers.tsx
+++ b/src/components/supply/reminderDetailHelpers.tsx
@@ -63,7 +63,7 @@ export function ActivityEntry({ entry }: { entry: ReminderActivity }) {
     <Box sx={{ display: 'flex', gap: 1.5 }}>
       <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
         <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: '#94a3b8', mt: '4px' }} />
-        <Box sx={{ width: 1, flex: 1, bgcolor: '#e2e8f0', mt: 0.5 }} />
+        <Box sx={{ width: 1, flex: 1, bgcolor: '#e8e7e4', mt: 0.5 }} />
       </Box>
       <Box sx={{ pb: 1.5, minWidth: 0 }}>
         <Box sx={{ display: 'flex', gap: 1, alignItems: 'baseline', flexWrap: 'wrap' }}>
diff --git a/src/components/tables/TableToolbar.tsx b/src/components/tables/TableToolbar.tsx
index c7e2e7b..8b86ac2 100644
--- a/src/components/tables/TableToolbar.tsx
+++ b/src/components/tables/TableToolbar.tsx
@@ -36,7 +36,7 @@ export function TableToolbar({ title, count, filterSlot, actions, sx }: TableToo
           <Chip
             label={count}
             size="small"
-            sx={{ height: 20, fontSize: '0.7rem', bgcolor: 'rgba(30,58,95,0.08)', color: '#1e3a5f' }}
+            sx={{ height: 20, fontSize: '0.7rem', bgcolor: 'rgba(30,58,95,0.08)', color: '#152642' }}
           />
         )}
         {filterSlot}
diff --git a/src/components/ui/DecisionContextPanel.tsx b/src/components/ui/DecisionContextPanel.tsx
index aa37e53..e215dd9 100644
--- a/src/components/ui/DecisionContextPanel.tsx
+++ b/src/components/ui/DecisionContextPanel.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Alert, Box, Button, Chip, Collapse, IconButton, Typography } from '@mui/material'
+import { Alert, Box, Button, Collapse, IconButton, Typography } from '@mui/material'
 import { AlertTriangle, ChevronDown, ChevronUp, Target } from 'lucide-react'
 import type { ReactNode } from 'react'
 
@@ -32,16 +32,16 @@ interface Props {
   children?: ReactNode
 }
 
-const SEVERITY_COLOR: Record<NonNullable<DecisionMetric['severity']>, string> = {
-  neutral:  '#f1f5f9',
-  positive: '#f0fdf4',
-  warning:  '#fef9c3',
-  critical: '#fef2f2',
+const SEVERITY_DOT: Record<NonNullable<DecisionMetric['severity']>, string> = {
+  neutral:  '#9a9a9a',
+  positive: '#1d6342',
+  warning:  '#a16207',
+  critical: '#b91c1c',
 }
 
 const SEVERITY_TEXT: Record<NonNullable<DecisionMetric['severity']>, string> = {
-  neutral:  '#475569',
-  positive: '#1a7a4a',
+  neutral:  '#5c5c5c',
+  positive: '#1d6342',
   warning:  '#92400e',
   critical: '#991b1b',
 }
@@ -61,9 +61,8 @@ export function DecisionContextPanel({
   return (
     <Box
       sx={{
-        bgcolor: '#f8fafc',
-        borderBottom: '1px solid #e2e8f0',
-        borderLeft: '3px solid #1e3a5f',
+        bgcolor: '#f9f8f6',
+        borderBottom: '1px solid #e8e7e4',
         px: 2.5,
         py: 1.25,
         flexShrink: 0,
@@ -73,9 +72,9 @@ export function DecisionContextPanel({
       <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2, flexWrap: 'wrap' }}>
         {/* Decision question */}
         <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, flex: 1, minWidth: 200 }}>
-          <Target size={15} color="#1e3a5f" style={{ marginTop: 2, flexShrink: 0 }} />
+          <Target size={15} color="#152642" style={{ marginTop: 2, flexShrink: 0 }} />
           <Box>
-            <Typography variant="body2" sx={{ fontWeight: 700, fontSize: '0.8125rem', color: '#1e293b', lineHeight: 1.3 }}>
+            <Typography variant="body2" sx={{ fontWeight: 700, fontSize: '0.8125rem', color: '#141414', lineHeight: 1.3 }}>
               {decision}
             </Typography>
             {context && (
@@ -88,22 +87,16 @@ export function DecisionContextPanel({
 
         {/* Metric chips */}
         {metrics.length > 0 && (
-          <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', alignItems: 'center' }}>
             {metrics.map((m, i) => {
               const sev = m.severity ?? 'neutral'
               return (
-                <Chip
-                  key={i}
-                  label={`${m.value} ${m.label}`}
-                  size="small"
-                  sx={{
-                    bgcolor: SEVERITY_COLOR[sev],
-                    color: SEVERITY_TEXT[sev],
-                    fontWeight: sev !== 'neutral' ? 700 : 400,
-                    fontSize: '0.7rem',
-                    height: 22,
-                  }}
-                />
+                <Box key={i} sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: SEVERITY_DOT[sev], flexShrink: 0 }} />
+                  <Typography sx={{ fontSize: '0.75rem', color: SEVERITY_TEXT[sev], fontWeight: sev !== 'neutral' ? 600 : 400, lineHeight: 1.2 }}>
+                    {m.value} {m.label}
+                  </Typography>
+                </Box>
               )
             })}
           </Box>
@@ -118,7 +111,7 @@ export function DecisionContextPanel({
               variant={a.primary ? 'contained' : 'outlined'}
               onClick={a.onClick}
               sx={a.primary
-                ? { bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' }, textTransform: 'none', fontSize: '0.75rem', py: 0.375, px: 1.25 }
+                ? { bgcolor: '#152642', '&:hover': { bgcolor: '#0e1c30' }, textTransform: 'none', fontSize: '0.75rem', py: 0.375, px: 1.25 }
                 : { textTransform: 'none', fontSize: '0.75rem', py: 0.375, px: 1.25 }
               }
             >
diff --git a/src/index.css b/src/index.css
index a5002d3..13edea7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@300;400;500;600;700&display=swap');
+
 @layer theme, base, components, utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
diff --git a/src/lib/ds.ts b/src/lib/ds.ts
index 6932b31..ba4944f 100644
--- a/src/lib/ds.ts
+++ b/src/lib/ds.ts
@@ -2,129 +2,124 @@ import type { ConfidenceLevel, DataQualityLevel } from '../domain/enums'
 import { CONF_HIGH, CONF_MEDIUM, DQ_HIGH, DQ_MEDIUM } from './constants'
 
 // ── Semantic color tokens ─────────────────────────────────────────────────────
-// Single source of truth for badge/score colors. All badge components read from here.
 
 export const DS_COLORS = {
   resultType: {
-    VERIFIED_PORTFOLIO:  { bg: 'rgba(30,58,95,0.10)',    fg: '#1e3a5f' },
-    MAISON_WORK:         { bg: 'rgba(3,105,161,0.10)',   fg: '#0369a1' },
-    FUTURE_AVAILABILITY: { bg: 'rgba(109,40,217,0.10)',  fg: '#6d28d9' },
+    VERIFIED_PORTFOLIO:  { bg: 'rgba(21,38,66,0.10)',   fg: '#152642' },
+    MAISON_WORK:         { bg: 'rgba(45,90,138,0.10)',  fg: '#2d5a8a' },
+    FUTURE_AVAILABILITY: { bg: 'rgba(91,63,138,0.10)',  fg: '#5b3f8a' },
   },
   confidence: {
-    VERY_HIGH: { bg: 'rgba(26,122,74,0.12)',   fg: '#1a7a4a' },
-    HIGH:      { bg: 'rgba(26,122,74,0.09)',   fg: '#1a7a4a' },
-    MEDIUM:    { bg: 'rgba(30,58,95,0.10)',    fg: '#1e3a5f' },
-    LOW:       { bg: 'rgba(217,119,6,0.12)',   fg: '#d97706' },
-    VERY_LOW:  { bg: 'rgba(192,57,43,0.12)',   fg: '#c0392b' },
+    VERY_HIGH: { bg: 'rgba(29,99,66,0.12)',   fg: '#1d6342' },
+    HIGH:      { bg: 'rgba(29,99,66,0.09)',   fg: '#1d6342' },
+    MEDIUM:    { bg: 'rgba(21,38,66,0.10)',   fg: '#152642' },
+    LOW:       { bg: 'rgba(161,98,7,0.12)',   fg: '#a16207' },
+    VERY_LOW:  { bg: 'rgba(185,28,28,0.12)',  fg: '#b91c1c' },
   },
   risk: {
-    LOW:      { bg: 'rgba(26,122,74,0.10)',   fg: '#1a7a4a' },
-    MEDIUM:   { bg: 'rgba(217,119,6,0.10)',   fg: '#d97706' },
-    HIGH:     { bg: 'rgba(192,57,43,0.10)',   fg: '#c0392b' },
-    CRITICAL: { bg: 'rgba(127,0,0,0.12)',     fg: '#7f1d1d' },
+    LOW:      { bg: 'rgba(29,99,66,0.10)',   fg: '#1d6342' },
+    MEDIUM:   { bg: 'rgba(161,98,7,0.10)',   fg: '#a16207' },
+    HIGH:     { bg: 'rgba(185,28,28,0.10)',  fg: '#b91c1c' },
+    CRITICAL: { bg: 'rgba(127,0,0,0.12)',    fg: '#7f1d1d' },
   },
   availability: {
-    AVAILABLE_NOW:  { bg: 'rgba(26,122,74,0.10)',   fg: '#1a7a4a' },
-    AVAILABLE_SOON: { bg: 'rgba(217,119,6,0.10)',   fg: '#d97706' },
-    FUTURE_SIGNAL:  { bg: 'rgba(109,40,217,0.10)',  fg: '#6d28d9' },
+    AVAILABLE_NOW:  { bg: 'rgba(29,99,66,0.10)',   fg: '#1d6342' },
+    AVAILABLE_SOON: { bg: 'rgba(161,98,7,0.10)',   fg: '#a16207' },
+    FUTURE_SIGNAL:  { bg: 'rgba(91,63,138,0.10)',  fg: '#5b3f8a' },
     OCCUPIED:       { bg: 'rgba(100,116,139,0.10)', fg: '#475569' },
-    UNKNOWN:        { bg: '#f1f5f9',                fg: '#94a3b8' },
+    UNKNOWN:        { bg: '#f4f3f0',                fg: '#9a9a9a' },
   },
   freshness: {
-    FRESH:    { bg: 'rgba(26,122,74,0.10)',  fg: '#1a7a4a' },
-    STALE:    { bg: 'rgba(217,119,6,0.10)', fg: '#d97706' },
-    OUTDATED: { bg: 'rgba(192,57,43,0.10)', fg: '#c0392b' },
+    FRESH:    { bg: 'rgba(29,99,66,0.10)',  fg: '#1d6342' },
+    STALE:    { bg: 'rgba(161,98,7,0.10)', fg: '#a16207' },
+    OUTDATED: { bg: 'rgba(185,28,28,0.10)', fg: '#b91c1c' },
   },
   dataQuality: {
-    HIGH:       { bg: 'rgba(26,122,74,0.10)',  fg: '#1a7a4a' },
-    MEDIUM:     { bg: 'rgba(217,119,6,0.10)',  fg: '#d97706' },
-    LOW:        { bg: 'rgba(192,57,43,0.10)',  fg: '#c0392b' },
-    INCOMPLETE: { bg: 'rgba(127,0,0,0.12)',    fg: '#7f1d1d' },
+    HIGH:       { bg: 'rgba(29,99,66,0.10)',  fg: '#1d6342' },
+    MEDIUM:     { bg: 'rgba(161,98,7,0.10)',  fg: '#a16207' },
+    LOW:        { bg: 'rgba(185,28,28,0.10)', fg: '#b91c1c' },
+    INCOMPLETE: { bg: 'rgba(127,0,0,0.12)',   fg: '#7f1d1d' },
   },
   heat: {
-    VERY_HOT: { bg: '#fef3c7', border: '#fcd34d', icon: '#d97706', text: '#92400e' },
-    HOT:      { bg: '#fff7ed', border: '#fed7aa', icon: '#ea580c', text: '#c2410c' },
+    VERY_HOT: { bg: '#fef3c7', border: '#fcd34d', icon: '#a16207', text: '#92400e' },
+    HOT:      { bg: '#fff7ed', border: '#fed7aa', icon: '#a16207', text: '#92400e' },
   },
   futureCard: {
     controlled: {
-      accent:      '#7c3aed',
-      accentHover: '#6d28d9',
-      headerBg:    '#faf5ff',
+      accent:      '#5b3f8a',
+      accentHover: '#4a3070',
+      headerBg:    '#faf7ff',
       border:      '#e9d5ff',
       badgeBg:     '#ede9fe',
       badgeText:   '#5b21b6',
     },
     signal: {
-      accent:      '#1d4ed8',
-      accentHover: '#1e40af',
-      headerBg:    '#eff6ff',
+      accent:      '#2d5a8a',
+      accentHover: '#1e4068',
+      headerBg:    '#f0f6ff',
       border:      '#bfdbfe',
       badgeBg:     '#dbeafe',
       badgeText:   '#1e40af',
-      indicator:   '#1d4ed8',
+      indicator:   '#2d5a8a',
     },
   },
 } as const
 
 // ── Text color tokens ─────────────────────────────────────────────────────────
-// For sx={{ color: DS_TEXT.secondary }} instead of hardcoded '#475569'
 
 export const DS_TEXT = {
-  primary:   '#1e293b',
-  secondary: '#475569',
-  muted:     '#64748b',
-  disabled:  '#94a3b8',
+  primary:   '#141414',
+  secondary: '#5c5c5c',
+  muted:     '#9a9a9a',
+  disabled:  '#c4c4c4',
   inverted:  '#ffffff',
-  success:   '#1a7a4a',
-  warning:   '#d97706',
-  error:     '#c0392b',
-  danger:    '#dc2626',
-  info:      '#0369a1',
-  brand:     '#1e3a5f',
-  signal:    '#6d28d9',
-  // Dark variants — use for text on light-tinted surface boxes
+  success:   '#1d6342',
+  warning:   '#a16207',
+  error:     '#b91c1c',
+  danger:    '#b91c1c',
+  info:      '#2d5a8a',
+  brand:     '#152642',
+  signal:    '#5b3f8a',
   successDark: '#166534',
   warningDark: '#92400e',
   signalDark:  '#4c1d95',
   infoDark:    '#0c4a6e',
-  brandDark:   '#162d4a',
+  brandDark:   '#0e1c30',
 } as const
 
 // ── Background tokens ─────────────────────────────────────────────────────────
 
 export const DS_BG = {
-  page:    '#f8fafc',
+  page:    '#f9f8f6',
   surface: '#ffffff',
-  subtle:  '#f1f5f9',
-  muted:   '#e2e8f0',
+  subtle:  '#f4f3f0',
+  muted:   '#e8e7e4',
 } as const
 
 // ── Border tokens ─────────────────────────────────────────────────────────────
 
 export const DS_BORDER = {
-  default: '#e2e8f0',
-  muted:   '#f1f5f9',
-  strong:  '#cbd5e1',
+  default: '#e8e7e4',
+  muted:   '#f2f1ee',
+  strong:  '#c8c7c4',
 } as const
 
-// ── Surface tokens — bg + border pairs for highlighted/tinted boxes ───────────
-// Use as: sx={{ bgcolor: DS_SURFACE.success.bg, border: `1px solid ${DS_SURFACE.success.border}` }}
+// ── Surface tokens ────────────────────────────────────────────────────────────
 
 export const DS_SURFACE = {
-  success:  { bg: '#f0fdf4', border: '#bbf7d0' },   // green tint
-  warning:  { bg: '#fffbeb', border: '#fde68a' },   // amber tint
-  error:    { bg: '#fef2f2', border: '#fecaca' },   // red tint
-  info:     { bg: '#f0f9ff', border: '#bae6fd' },   // sky tint
-  indigo:   { bg: '#eef2ff', border: '#e0e7ff' },   // indigo tint (hard-criteria rows)
-  purple:   { bg: '#faf5ff', border: '#e9d5ff' },   // purple tint (pre-market / future)
-  orange:   { bg: '#fff7ed', border: '#fed7aa' },   // orange tint (HOT heat badge bg)
-  blue:     { bg: '#eff6ff', border: '#bfdbfe' },   // blue tint (market signal)
-  neutral:  { bg: '#f8fafc', border: '#e2e8f0' },   // neutral/slate tint (formula rows)
-  slate:    { bg: '#f1f5f9', border: '#e2e8f0' },   // slightly darker neutral
+  success:  { bg: '#f0fdf4', border: '#bbf7d0' },
+  warning:  { bg: '#fffbeb', border: '#fde68a' },
+  error:    { bg: '#fef2f2', border: '#fecaca' },
+  info:     { bg: '#f0f6ff', border: '#bfdbfe' },
+  indigo:   { bg: '#eef2ff', border: '#e0e7ff' },
+  purple:   { bg: '#faf7ff', border: '#e9d5ff' },
+  orange:   { bg: '#fff7ed', border: '#fed7aa' },
+  blue:     { bg: '#f0f6ff', border: '#bfdbfe' },
+  neutral:  { bg: '#f9f8f6', border: '#e8e7e4' },
+  slate:    { bg: '#f4f3f0', border: '#e8e7e4' },
 } as const
 
-// ── Match tier surface — bg tint keyed by score tier ─────────────────────────
-// Use with SCORE_STRONG / SCORE_MODERATE thresholds from constants.ts
+// ── Match tier surface ────────────────────────────────────────────────────────
 
 export const DS_MATCH_TIER = {
   strong:   DS_SURFACE.success,
@@ -132,49 +127,45 @@ export const DS_MATCH_TIER = {
   weak:     DS_SURFACE.error,
 } as const
 
-// ── Pre-market & market signal shorthand aliases ──────────────────────────────
-// DS_COLORS.futureCard.controlled / signal are the full token sets.
-// These aliases make imports more readable in supply-side components.
+// ── Pre-market & market signal aliases ────────────────────────────────────────
 
 export const DS_PRE_MARKET    = DS_COLORS.futureCard.controlled
 export const DS_MARKET_SIGNAL = DS_COLORS.futureCard.signal
 
 // ── Badge color presets ───────────────────────────────────────────────────────
-// Pass to GenericBadge.color instead of raw hex strings.
-// BADGE_COLORS.confidenceHigh replaces '#1a7a4a' at call sites.
 
 export const BADGE_COLORS = {
-  confidenceHigh:   '#1a7a4a',
-  confidenceMedium: '#d97706',
-  confidenceLow:    '#c0392b',
-  riskHigh:         '#c0392b',
-  riskMedium:       '#d97706',
-  riskLow:          '#1a7a4a',
-  preMarket:        '#7c3aed',
-  marketSignal:     '#1d4ed8',
-  verified:         '#1e3a5f',
-  info:             '#0369a1',
-  muted:            '#64748b',
-  gold:             '#d97706',
-  silver:           '#64748b',
-  bronze:           '#b45309',
+  confidenceHigh:   '#1d6342',
+  confidenceMedium: '#a16207',
+  confidenceLow:    '#b91c1c',
+  riskHigh:         '#b91c1c',
+  riskMedium:       '#a16207',
+  riskLow:          '#1d6342',
+  preMarket:        '#5b3f8a',
+  marketSignal:     '#2d5a8a',
+  verified:         '#152642',
+  info:             '#2d5a8a',
+  muted:            '#9a9a9a',
+  gold:             '#b8975a',
+  silver:           '#7a8a9a',
+  bronze:           '#7a6050',
 } as const
 
 // ── Shadow tokens ─────────────────────────────────────────────────────────────
 
 export const DS_SHADOW = {
-  card:   '0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.04)',
-  panel:  '0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04)',
-  dialog: '0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.06)',
+  card:   '0 1px 3px rgba(0,0,0,0.06)',
+  panel:  '0 3px 6px rgba(0,0,0,0.07)',
+  dialog: '0 16px 24px rgba(0,0,0,0.10)',
 } as const
 
 // ── Inquiry status metadata ───────────────────────────────────────────────────
 
 export const INQUIRY_STATUS_META: Record<string, { label: string; fg: string; bg: string }> = {
-  new:         { label: 'Neu',          fg: '#dc2626', bg: '#fef2f2' },
-  in_progress: { label: 'Aktiv',        fg: '#d97706', bg: '#fffbeb' },
-  answered:    { label: 'Beantwortet',  fg: '#1a7a4a', bg: '#f0fdf4' },
-  archived:    { label: 'Archiviert',   fg: '#64748b', bg: '#f8fafc' },
+  new:         { label: 'Neu',          fg: '#b91c1c', bg: '#fef2f2' },
+  in_progress: { label: 'Aktiv',        fg: '#a16207', bg: '#fffbeb' },
+  answered:    { label: 'Beantwortet',  fg: '#1d6342', bg: '#f0fdf4' },
+  archived:    { label: 'Archiviert',   fg: '#9a9a9a', bg: '#f9f8f6' },
 }
 
 // ── Score → qualitative level helpers ────────────────────────────────────────
@@ -194,10 +185,10 @@ export function scoreToDataQualityLevel(score: number): DataQualityLevel {
   return 'INCOMPLETE'
 }
 
-// ── Result type meta — single source for labels + colors ─────────────────────
+// ── Result type meta ──────────────────────────────────────────────────────────
 
 export const RESULT_TYPE_META: Record<string, { label: string; color: string; bg: string }> = {
-  VERIFIED_PORTFOLIO:  { label: 'Verifiziertes Objekt', color: '#1e3a5f', bg: 'rgba(30,58,95,0.10)' },
-  MAISON_WORK:         { label: 'Maison Work',          color: '#0369a1', bg: 'rgba(3,105,161,0.10)' },
-  FUTURE_AVAILABILITY: { label: 'Zukunftssignal',       color: '#7c3aed', bg: 'rgba(109,40,217,0.10)' },
+  VERIFIED_PORTFOLIO:  { label: 'Verifiziertes Objekt', color: '#152642', bg: 'rgba(21,38,66,0.10)' },
+  MAISON_WORK:         { label: 'Maison Work',          color: '#2d5a8a', bg: 'rgba(45,90,138,0.10)' },
+  FUTURE_AVAILABILITY: { label: 'Zukunftssignal',       color: '#5b3f8a', bg: 'rgba(91,63,138,0.10)' },
 }
diff --git a/src/lib/scoreTheme.ts b/src/lib/scoreTheme.ts
index 35c7886..2595f30 100644
--- a/src/lib/scoreTheme.ts
+++ b/src/lib/scoreTheme.ts
@@ -8,30 +8,30 @@ export function getScoreTier(score: number): ScoreTier {
 
 export const SCORE_THEME = {
   gold: {
-    gradient:    'linear-gradient(135deg,#f8e642 0%,#d4920e 100%)',
-    border:      '#c9900c',
-    glow:        'rgba(212,146,14,0.35)',
-    text:        '#7a4f00',
-    label:       'Top Match',
-    cardBorder:  '#fbbf24',
-    cardBg:      'linear-gradient(160deg,#fffbeb,#fef3c7)',
+    gradient:   '#b8975a',
+    border:     '#a07a3f',
+    glow:       'transparent',
+    text:       '#ffffff',
+    label:      'Top Match',
+    cardBorder: '#b8975a',
+    cardBg:     '#ffffff',
   },
   silver: {
-    gradient:    'linear-gradient(135deg,#f1f5f9 0%,#cbd5e1 100%)',
-    border:      '#94a3b8',
-    glow:        'rgba(148,163,184,0.30)',
-    text:        '#334155',
-    label:       'Starkes Match',
-    cardBorder:  '#cbd5e1',
-    cardBg:      'linear-gradient(160deg,#f8fafc,#f1f5f9)',
+    gradient:   '#7a8a9a',
+    border:     '#6b7a8a',
+    glow:       'transparent',
+    text:       '#ffffff',
+    label:      'Starkes Match',
+    cardBorder: '#7a8a9a',
+    cardBg:     '#ffffff',
   },
   bronze: {
-    gradient:    'linear-gradient(135deg,#fde8c8 0%,#d4956a 100%)',
-    border:      '#c07a46',
-    glow:        'rgba(192,122,70,0.25)',
-    text:        '#7c3d0c',
-    label:       'Gutes Match',
-    cardBorder:  '#f5d0a9',
-    cardBg:      'linear-gradient(160deg,#fdf6f0,#fef3e8)',
+    gradient:   '#7a6050',
+    border:     '#6a5040',
+    glow:       'transparent',
+    text:       '#ffffff',
+    label:      'Gutes Match',
+    cardBorder: '#7a6050',
+    cardBg:     '#ffffff',
   },
 } as const
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index be22b6c..a167138 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -4,9 +4,9 @@ export const theme = createTheme({
   palette: {
     mode: 'light',
     primary: {
-      main: '#1e3a5f',
-      light: '#2d5290',
-      dark: '#142a45',
+      main: '#152642',
+      light: '#1e3a5f',
+      dark: '#0e1c30',
       contrastText: '#ffffff',
     },
     secondary: {
@@ -16,18 +16,18 @@ export const theme = createTheme({
       contrastText: '#ffffff',
     },
     background: {
-      default: '#f4f6f9',
+      default: '#f9f8f6',
       paper: '#ffffff',
     },
     text: {
-      primary: '#1a2332',
-      secondary: '#4a5568',
+      primary: '#141414',
+      secondary: '#5c5c5c',
     },
-    error: { main: '#c0392b' },
-    warning: { main: '#d97706' },
-    success: { main: '#1a7a4a' },
+    error: { main: '#b91c1c' },
+    warning: { main: '#a16207' },
+    success: { main: '#1d6342' },
     info: { main: '#2563eb' },
-    divider: '#e2e8f0',
+    divider: '#e8e7e4',
   },
   typography: {
     fontFamily: '"Inter", "Segoe UI", system-ui, -apple-system, sans-serif',
@@ -41,37 +41,37 @@ export const theme = createTheme({
     subtitle2: { fontSize: '0.8125rem', fontWeight: 600, lineHeight: 1.4 },
     body1: { fontSize: '0.875rem', lineHeight: 1.6 },
     body2: { fontSize: '0.8125rem', lineHeight: 1.5 },
-    caption: { fontSize: '0.75rem', lineHeight: 1.4, color: '#64748b' },
+    caption: { fontSize: '0.75rem', lineHeight: 1.4, color: '#9a9a9a' },
     overline: { fontSize: '0.6875rem', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' },
     button: { fontSize: '0.8125rem', fontWeight: 600, textTransform: 'none' },
   },
-  shape: { borderRadius: 6 },
+  shape: { borderRadius: 8 },
   shadows: [
     'none',
-    '0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08)',
-    '0 1px 4px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.08)',
-    '0 2px 6px rgba(0,0,0,0.07), 0 4px 10px rgba(0,0,0,0.08)',
-    '0 3px 8px rgba(0,0,0,0.08), 0 6px 14px rgba(0,0,0,0.08)',
-    '0 4px 10px rgba(0,0,0,0.08), 0 8px 18px rgba(0,0,0,0.08)',
-    '0 5px 12px rgba(0,0,0,0.09)', '0 6px 14px rgba(0,0,0,0.09)',
-    '0 7px 16px rgba(0,0,0,0.09)', '0 8px 18px rgba(0,0,0,0.09)',
-    '0 9px 20px rgba(0,0,0,0.09)', '0 10px 22px rgba(0,0,0,0.10)',
-    '0 11px 24px rgba(0,0,0,0.10)', '0 12px 26px rgba(0,0,0,0.10)',
-    '0 13px 28px rgba(0,0,0,0.10)', '0 14px 30px rgba(0,0,0,0.10)',
-    '0 15px 32px rgba(0,0,0,0.10)', '0 16px 34px rgba(0,0,0,0.10)',
-    '0 17px 36px rgba(0,0,0,0.10)', '0 18px 38px rgba(0,0,0,0.10)',
-    '0 19px 40px rgba(0,0,0,0.10)', '0 20px 42px rgba(0,0,0,0.10)',
-    '0 21px 44px rgba(0,0,0,0.10)', '0 22px 46px rgba(0,0,0,0.10)',
-    '0 24px 50px rgba(0,0,0,0.12)',
+    '0 1px 2px rgba(0,0,0,0.05)',
+    '0 1px 3px rgba(0,0,0,0.06)',
+    '0 2px 4px rgba(0,0,0,0.06)',
+    '0 3px 6px rgba(0,0,0,0.07)',
+    '0 4px 8px rgba(0,0,0,0.07)',
+    '0 5px 10px rgba(0,0,0,0.08)', '0 6px 12px rgba(0,0,0,0.08)',
+    '0 7px 14px rgba(0,0,0,0.08)', '0 8px 16px rgba(0,0,0,0.08)',
+    '0 9px 18px rgba(0,0,0,0.08)', '0 10px 20px rgba(0,0,0,0.09)',
+    '0 11px 22px rgba(0,0,0,0.09)', '0 12px 24px rgba(0,0,0,0.09)',
+    '0 13px 26px rgba(0,0,0,0.09)', '0 14px 28px rgba(0,0,0,0.09)',
+    '0 15px 30px rgba(0,0,0,0.09)', '0 16px 32px rgba(0,0,0,0.09)',
+    '0 17px 34px rgba(0,0,0,0.09)', '0 18px 36px rgba(0,0,0,0.09)',
+    '0 19px 38px rgba(0,0,0,0.09)', '0 20px 40px rgba(0,0,0,0.09)',
+    '0 21px 42px rgba(0,0,0,0.09)', '0 22px 44px rgba(0,0,0,0.09)',
+    '0 24px 48px rgba(0,0,0,0.10)',
   ],
   components: {
     MuiCard: {
       defaultProps: { elevation: 1 },
       styleOverrides: {
         root: {
-          border: '1px solid #e2e8f0',
-          '&:hover': { boxShadow: '0 2px 8px rgba(0,0,0,0.10)' },
-          transition: 'box-shadow 0.15s ease',
+          border: '1px solid #e8e7e4',
+          '&:hover': { borderColor: '#c8c7c4' },
+          transition: 'border-color 0.15s ease',
         },
       },
     },
@@ -81,20 +81,20 @@ export const theme = createTheme({
         root: { borderRadius: 6, padding: '6px 16px' },
         contained: {
           '&.MuiButton-containedPrimary': {
-            background: '#1e3a5f',
-            '&:hover': { background: '#142a45' },
+            background: '#152642',
+            '&:hover': { background: '#0e1c30' },
           },
         },
       },
     },
     MuiChip: {
       styleOverrides: {
-        root: { borderRadius: 4, fontSize: '0.75rem', fontWeight: 600, height: 22 },
+        root: { borderRadius: 6, fontSize: '0.75rem', fontWeight: 500, height: 22 },
       },
     },
     MuiTableCell: {
       styleOverrides: {
-        head: { fontWeight: 600, fontSize: '0.75rem', color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em', padding: '8px 12px' },
+        head: { fontWeight: 600, fontSize: '0.75rem', color: '#9a9a9a', textTransform: 'uppercase', letterSpacing: '0.05em', padding: '8px 12px' },
         body: { fontSize: '0.8125rem', padding: '10px 12px' },
       },
     },
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 315138d..b3d1b4d 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -64,29 +64,29 @@ export function probabilityColor(prob: number): 'success' | 'warning' | 'error'
   return 'error'
 }
 
-// Hex color variants for use in sx (when MUI color tokens aren't enough)
+// Hex color variants for use in sx props
 export function dataQualityHex(score: number): string {
-  if (score >= DQ_HIGH) return '#1a7a4a'
-  if (score >= DQ_MEDIUM) return '#d97706'
-  return '#c0392b'
+  if (score >= DQ_HIGH) return '#1d6342'
+  if (score >= DQ_MEDIUM) return '#a16207'
+  return '#b91c1c'
 }
 
 export function confidenceHex(score: number): string {
-  if (score >= CONF_HIGH) return '#1a7a4a'
-  if (score >= CONF_MEDIUM) return '#1e3a5f'
-  return '#d97706'
+  if (score >= CONF_HIGH) return '#1d6342'
+  if (score >= CONF_MEDIUM) return '#152642'
+  return '#a16207'
 }
 
 export function probabilityHex(prob: number): string {
-  if (prob >= PROB_HIGH) return '#1a7a4a'
-  if (prob >= PROB_MEDIUM) return '#d97706'
-  return '#c0392b'
+  if (prob >= PROB_HIGH) return '#1d6342'
+  if (prob >= PROB_MEDIUM) return '#a16207'
+  return '#b91c1c'
 }
 
 export function matchScoreHex(score: number): string {
-  if (score >= SCORE_STRONG) return '#1a7a4a'
-  if (score >= SCORE_MODERATE) return '#d97706'
-  return '#c0392b'
+  if (score >= SCORE_STRONG) return '#1d6342'
+  if (score >= SCORE_MODERATE) return '#a16207'
+  return '#b91c1c'
 }
 
 export function criterionScoreColor(score: number): 'success' | 'warning' | 'error' {
@@ -94,7 +94,7 @@ export function criterionScoreColor(score: number): 'success' | 'warning' | 'err
 }
 
 export function criterionScoreTextColor(score: number): string {
-  return score >= 70 ? '#1a7a4a' : score >= 50 ? '#d97706' : '#c0392b'
+  return score >= 70 ? '#1d6342' : score >= 50 ? '#a16207' : '#b91c1c'
 }
 
 // ── Misc ──────────────────────────────────────────────────────────────────────
diff --git a/src/pages/auth/LoginScreen.tsx b/src/pages/auth/LoginScreen.tsx
index 0695256..d50b2ec 100644
--- a/src/pages/auth/LoginScreen.tsx
+++ b/src/pages/auth/LoginScreen.tsx
@@ -134,7 +134,7 @@ export default function LoginScreen() {
                 variant="contained"
                 fullWidth
                 disabled={loading}
-                sx={{ bgcolor: '#1e3a5f', textTransform: 'none', fontWeight: 600, '&:hover': { bgcolor: '#162d4a' } }}
+                sx={{ bgcolor: '#152642', textTransform: 'none', fontWeight: 600, '&:hover': { bgcolor: '#162d4a' } }}
               >
                 {loading ? <CircularProgress size={20} sx={{ color: '#fff' }} /> : 'Anmelden'}
               </Button>
@@ -146,7 +146,7 @@ export default function LoginScreen() {
         <Card elevation={0} sx={{ border: '1px solid #e2e8f0' }}>
           <CardContent sx={{ p: 3 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
-              <Chip label="Demo" size="small" sx={{ bgcolor: '#1e3a5f', color: '#fff', fontSize: '0.7rem', height: 20 }} />
+              <Chip label="Demo" size="small" sx={{ bgcolor: '#152642', color: '#fff', fontSize: '0.7rem', height: 20 }} />
               <Typography variant="body2" sx={{ fontWeight: 600 }}>
                 Demo-Zugänge
               </Typography>
@@ -169,7 +169,7 @@ export default function LoginScreen() {
                     border: '1px solid #e2e8f0',
                     cursor: 'pointer',
                     transition: 'border-color 0.15s',
-                    '&:hover': { borderColor: '#1e3a5f', bgcolor: 'rgba(30,58,95,0.03)' },
+                    '&:hover': { borderColor: '#152642', bgcolor: 'rgba(30,58,95,0.03)' },
                   }}
                 >
                   <Box>
diff --git a/src/pages/demand/PropertyDetail.tsx b/src/pages/demand/PropertyDetail.tsx
index 142420d..720a67f 100644
--- a/src/pages/demand/PropertyDetail.tsx
+++ b/src/pages/demand/PropertyDetail.tsx
@@ -83,7 +83,7 @@ export default function PropertyDetail() {
               </Box>
             </Box>
             <Box sx={{ textAlign: 'right' }}>
-              <Typography variant="h6" sx={{ fontWeight: 700, color: '#1e3a5f' }}>
+              <Typography variant="h6" sx={{ fontWeight: 700, color: '#152642' }}>
                 CHF {monthlyPerSqm.toLocaleString('de-CH')}/m²/Mt.
               </Typography>
               <Typography variant="caption" color="text.secondary">{property.areaSqm.toLocaleString('de-CH')} m² total</Typography>
diff --git a/src/pages/demand/Results.tsx b/src/pages/demand/Results.tsx
index 77007ef..15c2617 100644
--- a/src/pages/demand/Results.tsx
+++ b/src/pages/demand/Results.tsx
@@ -138,7 +138,7 @@ export default function Results() {
           <Card sx={{ bgcolor: '#eff6ff', p: 2, mb: 2, border: '1px solid #bfdbfe' }}>
             <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2 }}>
               <Box>
-                <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.5 }} color="#1e3a5f">
+                <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.5 }} color="#152642">
                   Aktive Suche: {activeNeed.companyName}
                 </Typography>
                 <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '4px 16px' }}>
@@ -203,7 +203,7 @@ export default function Results() {
                 size="small"
                 variant="text"
                 onClick={() => navigate('/demand/ai-search')}
-                sx={{ color: '#1e3a5f', flexShrink: 0 }}
+                sx={{ color: '#152642', flexShrink: 0 }}
               >
                 Suche ändern
               </Button>
diff --git a/src/pages/supply/DataQuality.tsx b/src/pages/supply/DataQuality.tsx
index 9ee3c4f..6a30bb2 100644
--- a/src/pages/supply/DataQuality.tsx
+++ b/src/pages/supply/DataQuality.tsx
@@ -170,7 +170,7 @@ const PropertyRow = memo(function PropertyRow({
           <IconButton
             size="small"
             onClick={() => onEdit(property.id)}
-            sx={{ color: '#94a3b8', '&:hover': { color: '#1e3a5f' } }}
+            sx={{ color: '#94a3b8', '&:hover': { color: '#152642' } }}
           >
             <Edit2 size={14} />
           </IconButton>
diff --git a/src/pages/supply/MarketIntelligence.tsx b/src/pages/supply/MarketIntelligence.tsx
index f00102c..80868e1 100644
--- a/src/pages/supply/MarketIntelligence.tsx
+++ b/src/pages/supply/MarketIntelligence.tsx
@@ -125,7 +125,7 @@ const LeadListItem = memo(function LeadListItem({
       sx={{
         px: 2, py: 1.5,
         borderBottom: '1px solid #f1f5f9',
-        borderLeft: `3px solid ${selected ? '#1e3a5f' : 'transparent'}`,
+        borderLeft: `3px solid ${selected ? '#152642' : 'transparent'}`,
         bgcolor: selected ? '#f0f9ff' : 'white',
         cursor: 'pointer',
         '&:hover': { bgcolor: selected ? '#f0f9ff' : '#f8fafc' },
@@ -181,7 +181,7 @@ function ContactRow({ contact }: { contact: ExtractedContact }) {
             href={href}
             target="_blank"
             rel="noopener noreferrer"
-            sx={{ color: '#1e3a5f', fontWeight: 500, fontSize: '0.8125rem', textDecoration: 'none', '&:hover': { textDecoration: 'underline' }, display: 'flex', alignItems: 'center', gap: 0.5 }}
+            sx={{ color: '#152642', fontWeight: 500, fontSize: '0.8125rem', textDecoration: 'none', '&:hover': { textDecoration: 'underline' }, display: 'flex', alignItems: 'center', gap: 0.5 }}
           >
             {contact.value}
             <ExternalLink size={11} />
@@ -241,7 +241,7 @@ function PropertyMatchCard({
         }}
         onClick={() => navigate('/supply/properties')}
       >
-        <Building2 size={14} color="#1e3a5f" style={{ flexShrink: 0 }} />
+        <Building2 size={14} color="#152642" style={{ flexShrink: 0 }} />
         <Box sx={{ flex: 1, minWidth: 0 }}>
           <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
             {p.title}
@@ -271,8 +271,8 @@ function PropertyMatchCard({
           onClick={() => setOpen(v => !v)}
           sx={{
             textTransform: 'none', fontSize: '0.75rem',
-            bgcolor: open ? '#1e3a5f' : undefined,
-            borderColor: open ? '#1e3a5f' : undefined,
+            bgcolor: open ? '#152642' : undefined,
+            borderColor: open ? '#152642' : undefined,
             '&:hover': { bgcolor: open ? '#162d4a' : undefined },
           }}
         >
@@ -302,7 +302,7 @@ function PropertyMatchCard({
               onClick={handleCopy}
               sx={{
                 textTransform: 'none', fontSize: '0.72rem',
-                color: copied ? '#16a34a' : '#1e3a5f',
+                color: copied ? '#16a34a' : '#152642',
               }}
             >
               {copied ? 'Kopiert!' : 'Kopieren'}
@@ -370,7 +370,7 @@ function LeadDetail({ lead }: { lead: MarketLead }) {
               href={signal.source.url}
               target="_blank"
               rel="noopener noreferrer"
-              sx={{ display: 'flex', alignItems: 'center', gap: 0.5, ml: 'auto', color: '#1e3a5f', fontSize: '0.75rem', fontWeight: 600, textDecoration: 'none', '&:hover': { textDecoration: 'underline' } }}
+              sx={{ display: 'flex', alignItems: 'center', gap: 0.5, ml: 'auto', color: '#152642', fontSize: '0.75rem', fontWeight: 600, textDecoration: 'none', '&:hover': { textDecoration: 'underline' } }}
             >
               Quelle öffnen <ExternalLink size={11} />
             </Box>
@@ -403,7 +403,7 @@ function LeadDetail({ lead }: { lead: MarketLead }) {
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
               {signal.marketIndicators!.map((ind, i) => (
                 <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
-                  <TrendingUp size={12} color="#1e3a5f" style={{ marginTop: 3, flexShrink: 0 }} />
+                  <TrendingUp size={12} color="#152642" style={{ marginTop: 3, flexShrink: 0 }} />
                   <Typography variant="body2" sx={{ lineHeight: 1.5, color: '#1e293b' }}>{ind}</Typography>
                 </Box>
               ))}
@@ -531,7 +531,7 @@ const HinweisPropertyCard = memo(function HinweisPropertyCard({
           cursor: 'default',
         }}
       >
-        <Building2 size={14} color="#1e3a5f" style={{ flexShrink: 0 }} />
+        <Building2 size={14} color="#152642" style={{ flexShrink: 0 }} />
         <Box sx={{ flex: 1, minWidth: 0 }}>
           <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
             {p.title}
@@ -561,8 +561,8 @@ const HinweisPropertyCard = memo(function HinweisPropertyCard({
           onClick={() => setOpen(v => !v)}
           sx={{
             textTransform: 'none', fontSize: '0.75rem',
-            bgcolor: open ? '#1e3a5f' : undefined,
-            borderColor: open ? '#1e3a5f' : undefined,
+            bgcolor: open ? '#152642' : undefined,
+            borderColor: open ? '#152642' : undefined,
             '&:hover': { bgcolor: open ? '#162d4a' : undefined },
           }}
         >
@@ -581,7 +581,7 @@ const HinweisPropertyCard = memo(function HinweisPropertyCard({
               size="small"
               startIcon={copied ? <CheckCircle2 size={13} /> : <Copy size={13} />}
               onClick={handleCopy}
-              sx={{ textTransform: 'none', fontSize: '0.72rem', color: copied ? '#16a34a' : '#1e3a5f' }}
+              sx={{ textTransform: 'none', fontSize: '0.72rem', color: copied ? '#16a34a' : '#152642' }}
             >
               {copied ? 'Kopiert!' : 'Kopieren'}
             </Button>
@@ -644,7 +644,7 @@ const HinweisListItem = memo(function HinweisListItem({
       sx={{
         px: 2, py: 1.5,
         borderBottom: '1px solid #f1f5f9',
-        borderLeft: `3px solid ${selected ? '#1e3a5f' : 'transparent'}`,
+        borderLeft: `3px solid ${selected ? '#152642' : 'transparent'}`,
         bgcolor: selected ? '#f0f9ff' : 'white',
         cursor: 'pointer',
         '&:hover': { bgcolor: selected ? '#f0f9ff' : '#f8fafc' },
@@ -654,7 +654,7 @@ const HinweisListItem = memo(function HinweisListItem({
       <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75, mb: 0.25 }}>
         <Box sx={{ mt: 0.25, flexShrink: 0 }}>
           {hinweis.direction === 'SUCHE'
-            ? <Search size={14} color="#1e3a5f" />
+            ? <Search size={14} color="#152642" />
             : <Building2 size={14} color="#7c3aed" />
           }
         </Box>
@@ -1003,7 +1003,7 @@ function HinweisErfassenDialog({
           variant="contained"
           onClick={handleSave}
           disabled={mutation.isPending || !isValid}
-          sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
+          sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' } }}
         >
           Speichern
         </Button>
@@ -1075,7 +1075,7 @@ export default function MarketIntelligence() {
           <Box sx={{ width: 360, flexShrink: 0, borderRight: '1px solid #e2e8f0', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
             <Box sx={{ px: 2, py: 1.25, borderBottom: '1px solid #e2e8f0', display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }}>
               <Typography variant="subtitle2" sx={{ fontWeight: 600, flex: 1 }}>Erkannte Signale</Typography>
-              <Chip label={leadsLoading ? '…' : leads.length} size="small" sx={{ bgcolor: '#1e3a5f', color: '#fff', fontSize: '0.7rem', height: 20 }} />
+              <Chip label={leadsLoading ? '…' : leads.length} size="small" sx={{ bgcolor: '#152642', color: '#fff', fontSize: '0.7rem', height: 20 }} />
             </Box>
             <Box sx={{ flex: 1, overflowY: 'auto' }}>
               {leadsLoading
@@ -1130,7 +1130,7 @@ export default function MarketIntelligence() {
                   onClick={() => setErfassenOpen(true)}
                   sx={{
                     textTransform: 'none', fontSize: '0.72rem',
-                    bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' },
+                    bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' },
                     minWidth: 'auto',
                   }}
                 >
@@ -1147,7 +1147,7 @@ export default function MarketIntelligence() {
                     onClick={() => setHinweisFilter(f)}
                     sx={{
                       height: 22, fontSize: '0.68rem', cursor: 'pointer',
-                      bgcolor: hinweisFilter === f ? '#1e3a5f' : '#f1f5f9',
+                      bgcolor: hinweisFilter === f ? '#152642' : '#f1f5f9',
                       color: hinweisFilter === f ? 'white' : '#475569',
                     }}
                   />
diff --git a/src/pages/supply/MyListings.tsx b/src/pages/supply/MyListings.tsx
index 6e01820..7333828 100644
--- a/src/pages/supply/MyListings.tsx
+++ b/src/pages/supply/MyListings.tsx
@@ -104,7 +104,7 @@ function MatchListItem({
             sx={{
               textTransform: 'none',
               fontSize: '0.75rem',
-              bgcolor: '#1e3a5f',
+              bgcolor: '#152642',
               '&:hover': { bgcolor: '#162d4a' },
             }}
           >
@@ -351,7 +351,7 @@ export default function MyListings() {
           variant="contained"
           startIcon={<Plus size={16} />}
           onClick={() => navigate('/supply/new-listing')}
-          sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' }, textTransform: 'none' }}
+          sx={{ bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' }, textTransform: 'none' }}
         >
           Neues Inserat
         </Button>
diff --git a/src/pages/supply/Properties.tsx b/src/pages/supply/Properties.tsx
index 7388430..80d6be4 100644
--- a/src/pages/supply/Properties.tsx
+++ b/src/pages/supply/Properties.tsx
@@ -177,7 +177,7 @@ export default function Properties() {
               variant={criticalGaps.length > 0 || staleOrOutdated.length > 0 ? 'contained' : 'outlined'}
               onClick={() => navigate('/supply/data-quality')}
               sx={criticalGaps.length > 0 || staleOrOutdated.length > 0
-                ? { bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' }, textTransform: 'none', fontSize: '0.75rem', py: 0.375, px: 1.5, flexShrink: 0 }
+                ? { bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' }, textTransform: 'none', fontSize: '0.75rem', py: 0.375, px: 1.5, flexShrink: 0 }
                 : { textTransform: 'none', fontSize: '0.75rem', py: 0.375, px: 1.5, flexShrink: 0 }
               }
             >