From 5035445d2e4d777adb5d00588a6a83f7a041b0f4 Mon Sep 17 00:00:00 2001
From: Benjamin Sutter <beni_sutter@hotmail.com>
Date: Thu, 11 Jun 2026 00:01:15 +0200
Subject: [PATCH] refactor: standardize page title typography across all
 workspaces
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All page-level headers now use fontSize:1.125rem, fontWeight:700,
color:#0f172a, container py:2.5, borderBottom:#e8e7e4 — matching
the standard established in PageHeader. Removes variant="h5"/h6"
inconsistencies across Supply, Demand, and shared components.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/layout/PageHeader.tsx     | 4 ++--
 src/components/supply/ReminderHeader.tsx | 7 +++----
 src/pages/demand/AISearch.tsx            | 4 ++--
 src/pages/demand/Compare.tsx             | 8 ++++----
 src/pages/demand/Pipeline.tsx            | 6 +++---
 src/pages/supply/Anfragencenter.tsx      | 4 ++--
 src/pages/supply/DataQuality.tsx         | 4 ++--
 src/pages/supply/FutureAvailability.tsx  | 4 ++--
 src/pages/supply/MarketIntelligence.tsx  | 4 ++--
 src/pages/supply/MatchCenter.tsx         | 4 ++--
 src/pages/supply/MyListings.tsx          | 2 +-
 src/pages/supply/NewListing.tsx          | 2 +-
 12 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/components/layout/PageHeader.tsx b/src/components/layout/PageHeader.tsx
index 6c2d664..1412d73 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: 3, borderBottom: '1px solid #e8e7e4', ...sx }}>
+    <Box sx={{ px: 3, py: 2.5, borderBottom: '1px solid #e8e7e4', bgcolor: 'white', ...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, fontSize: '1.25rem', lineHeight: 1.3 }}>
+            <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a' }}>
               {title}
             </Typography>
             {badge}
diff --git a/src/components/supply/ReminderHeader.tsx b/src/components/supply/ReminderHeader.tsx
index 272401c..8cc6385 100644
--- a/src/components/supply/ReminderHeader.tsx
+++ b/src/components/supply/ReminderHeader.tsx
@@ -14,17 +14,16 @@ export function ReminderHeader() {
     <Box
       sx={{
         bgcolor: 'white',
-        borderBottom: '1px solid',
-        borderColor: 'divider',
+        borderBottom: '1px solid #e8e7e4',
         px: 3,
-        py: 2,
+        py: 2.5,
         display: 'flex',
         alignItems: 'flex-start',
         justifyContent: 'space-between',
       }}
     >
       <Box>
-        <Typography variant="h5" sx={{ fontWeight: 700, color: '#1e293b' }}>
+        <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a' }}>
           Reminder Manager
         </Typography>
         <Typography variant="body2" color="text.secondary">
diff --git a/src/pages/demand/AISearch.tsx b/src/pages/demand/AISearch.tsx
index 544624e..87177e7 100644
--- a/src/pages/demand/AISearch.tsx
+++ b/src/pages/demand/AISearch.tsx
@@ -208,8 +208,8 @@ export default function AISearch() {
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
       {/* Header */}
-      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2, flexShrink: 0 }}>
-        <Typography variant="h5" sx={{ fontWeight: 700 }}>Flächensuche</Typography>
+      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e8e7e4', px: 3, py: 2.5, flexShrink: 0 }}>
+        <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a' }}>Flächensuche</Typography>
         <Typography variant="body2" color="text.secondary">
           Sprechen, schreiben oder Felder ausfüllen — dann sofort suchen oder als Suchprofil speichern
         </Typography>
diff --git a/src/pages/demand/Compare.tsx b/src/pages/demand/Compare.tsx
index fc847f4..eb7de30 100644
--- a/src/pages/demand/Compare.tsx
+++ b/src/pages/demand/Compare.tsx
@@ -49,8 +49,8 @@ export default function Compare() {
   if (compareItems.length === 0) {
     return (
       <Box>
-        <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2 }}>
-          <Typography variant="h5" sx={{ fontWeight: 700 }}>Vergleich</Typography>
+        <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e8e7e4', px: 3, py: 2.5 }}>
+          <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a' }}>Vergleich</Typography>
         </Box>
         <CompareEmptyState />
       </Box>
@@ -62,9 +62,9 @@ export default function Compare() {
       <AddToPipelineDialog />
 
       {/* Page header */}
-      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e8e7e4', px: 3, py: 2.5, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-          <Typography variant="h5" sx={{ fontWeight: 700 }}>Vergleich</Typography>
+          <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a' }}>Vergleich</Typography>
           <Chip label={`${compareItems.length} Ergebnisse`} size="small" />
         </Box>
         <Button variant="outlined" size="small" color="error" onClick={clearCompare}>
diff --git a/src/pages/demand/Pipeline.tsx b/src/pages/demand/Pipeline.tsx
index bf10684..a9d0dd8 100644
--- a/src/pages/demand/Pipeline.tsx
+++ b/src/pages/demand/Pipeline.tsx
@@ -73,11 +73,11 @@ export default function Pipeline() {
 
       {/* Header */}
       <Box sx={{
-        bgcolor: 'white', borderBottom: '1px solid #e2e8f0',
-        px: 3, py: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0,
+        bgcolor: 'white', borderBottom: '1px solid #e8e7e4',
+        px: 3, py: 2.5, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0,
       }}>
         <Box>
-          <Typography variant="h5" sx={{ fontWeight: 700 }}>Deal Pipeline</Typography>
+          <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a' }}>Deal Pipeline</Typography>
           <Typography variant="body2" color="text.secondary">
             Von der ersten Idee bis zum Abschluss — per Drag &amp; Drop verschieben
           </Typography>
diff --git a/src/pages/supply/Anfragencenter.tsx b/src/pages/supply/Anfragencenter.tsx
index 08d665e..5081de4 100644
--- a/src/pages/supply/Anfragencenter.tsx
+++ b/src/pages/supply/Anfragencenter.tsx
@@ -9,8 +9,8 @@ export default function Anfragencenter() {
   const [tab, setTab] = useState(initialTab)
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
-      <Box sx={{ borderBottom: '1px solid #e2e8f0', px: 3, bgcolor: 'white', flexShrink: 0 }}>
-        <Typography variant="h5" sx={{ fontWeight: 700, pt: 2.5, pb: 1 }}>
+      <Box sx={{ borderBottom: '1px solid #e8e7e4', px: 3, bgcolor: 'white', flexShrink: 0 }}>
+        <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a', pt: 2.5, pb: 1, display: 'block' }}>
           Anfragencenter
         </Typography>
         <Tabs
diff --git a/src/pages/supply/DataQuality.tsx b/src/pages/supply/DataQuality.tsx
index 6a30bb2..0213501 100644
--- a/src/pages/supply/DataQuality.tsx
+++ b/src/pages/supply/DataQuality.tsx
@@ -263,8 +263,8 @@ export default function DataQuality() {
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
       {/* Header */}
-      <Box sx={{ px: 3, py: 2, bgcolor: 'white', borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
-        <Typography variant="h6" sx={{ fontWeight: 700 }}>Datenpflege</Typography>
+      <Box sx={{ px: 3, py: 2.5, bgcolor: 'white', borderBottom: '1px solid #e8e7e4', flexShrink: 0 }}>
+        <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a' }}>Datenpflege</Typography>
         <Typography variant="caption" color="text.secondary">
           Vollständigkeit, Aktualität und Vertrauen der Objektdaten · Klick auf KPI-Karte filtert die Liste
         </Typography>
diff --git a/src/pages/supply/FutureAvailability.tsx b/src/pages/supply/FutureAvailability.tsx
index 1bb30ec..dbe79ff 100644
--- a/src/pages/supply/FutureAvailability.tsx
+++ b/src/pages/supply/FutureAvailability.tsx
@@ -49,10 +49,10 @@ export default function FutureAvailability() {
       <AddToShortlistDialog />
 
       {/* Header */}
-      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2, flexShrink: 0 }}>
+      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e8e7e4', px: 3, py: 2.5, flexShrink: 0 }}>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
           <Box>
-            <Typography variant="h5" sx={{ fontWeight: 700 }}>Zukunftssignale</Typography>
+            <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a' }}>Zukunftssignale</Typography>
             <Typography variant="body2" color="text.secondary">Probabilistische Markt- und Verfügbarkeitssignale</Typography>
           </Box>
           <Chip
diff --git a/src/pages/supply/MarketIntelligence.tsx b/src/pages/supply/MarketIntelligence.tsx
index 80868e1..d67e392 100644
--- a/src/pages/supply/MarketIntelligence.tsx
+++ b/src/pages/supply/MarketIntelligence.tsx
@@ -1046,8 +1046,8 @@ export default function MarketIntelligence() {
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
       {/* Page header */}
-      <Box sx={{ px: 3, py: 2, bgcolor: 'white', borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
-        <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.2 }}>Marktchancen</Typography>
+      <Box sx={{ px: 3, py: 2.5, bgcolor: 'white', borderBottom: '1px solid #e8e7e4', flexShrink: 0 }}>
+        <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a' }}>Marktchancen</Typography>
         <Typography variant="caption" color="text.secondary">
           KI-Signale aus Web-Quellen und menschliche Netzwerk-Hinweise — mit Portfolio-Match
         </Typography>
diff --git a/src/pages/supply/MatchCenter.tsx b/src/pages/supply/MatchCenter.tsx
index ceba5e6..9998b32 100644
--- a/src/pages/supply/MatchCenter.tsx
+++ b/src/pages/supply/MatchCenter.tsx
@@ -76,9 +76,9 @@ export default function MatchCenter() {
     <Box sx={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 64px)', overflow: 'hidden' }}>
 
       {/* Header */}
-      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2, flexShrink: 0 }}>
+      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e8e7e4', px: 3, py: 2.5, flexShrink: 0 }}>
         <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 2, mb: 1 }}>
-          <Typography variant="h5" sx={{ fontWeight: 700 }}>Match Center</Typography>
+          <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a' }}>Match Center</Typography>
           <Typography variant="body2" color="text.secondary">Automatisch berechnete Matches</Typography>
         </Box>
         <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
diff --git a/src/pages/supply/MyListings.tsx b/src/pages/supply/MyListings.tsx
index 7333828..12f2684 100644
--- a/src/pages/supply/MyListings.tsx
+++ b/src/pages/supply/MyListings.tsx
@@ -342,7 +342,7 @@ export default function MyListings() {
     <Box sx={{ maxWidth: 1040, mx: 'auto', px: 3, py: 4 }}>
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
         <Box>
-          <Typography variant="h5" sx={{ fontWeight: 700 }}>Inserate</Typography>
+          <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a' }}>Inserate</Typography>
           <Typography variant="body2" color="text.secondary">
             Direkt erstellte Inserate — unabhängig vom Portfolio
           </Typography>
diff --git a/src/pages/supply/NewListing.tsx b/src/pages/supply/NewListing.tsx
index 11d3dd9..0b38f66 100644
--- a/src/pages/supply/NewListing.tsx
+++ b/src/pages/supply/NewListing.tsx
@@ -46,7 +46,7 @@ export default function NewListing() {
         </Button>
       </Box>
 
-      <Typography variant="h5" sx={{ fontWeight: 700, mb: 0.5 }}>Neues Inserat erstellen</Typography>
+      <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a', mb: 0.5 }}>Neues Inserat erstellen</Typography>
       <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
         {form.isPrefilled
           ? `Einheit ${pre.unitLabel ?? ''} aus Portfolio vorausgefüllt — Angaben prüfen und veröffentlichen.`