refactor: standardize page title typography across all workspaces

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

@@ -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}

src/components/supply/ReminderHeader.tsx

@@ -14,17 +14,16 @@ export function ReminderHeader() {
     <Box
       sx={{
         bgcolor: 'white',
-        borderBottom: '1px solid',
+        borderBottom: '1px solid #e8e7e4',
-        borderColor: 'divider',
         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">

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 }}>
+      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e8e7e4', px: 3, py: 2.5, flexShrink: 0 }}>
-        <Typography variant="h5" sx={{ fontWeight: 700 }}>Flächensuche</Typography>
+        <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>

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 }}>
+        <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e8e7e4', px: 3, py: 2.5 }}>
-          <Typography variant="h5" sx={{ fontWeight: 700 }}>Vergleich</Typography>
+          <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}>

src/pages/demand/Pipeline.tsx

@@ -73,11 +73,11 @@ export default function Pipeline() {
 
       {/* Header */}
       <Box sx={{
-        bgcolor: 'white', borderBottom: '1px solid #e2e8f0',
+        bgcolor: 'white', borderBottom: '1px solid #e8e7e4',
-        px: 3, py: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0,
+        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>

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 }}>
+      <Box sx={{ borderBottom: '1px solid #e8e7e4', px: 3, bgcolor: 'white', flexShrink: 0 }}>
-        <Typography variant="h5" sx={{ fontWeight: 700, pt: 2.5, pb: 1 }}>
+        <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a', pt: 2.5, pb: 1, display: 'block' }}>
           Anfragencenter
         </Typography>
         <Tabs

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 }}>
+      <Box sx={{ px: 3, py: 2.5, bgcolor: 'white', borderBottom: '1px solid #e8e7e4', flexShrink: 0 }}>
-        <Typography variant="h6" sx={{ fontWeight: 700 }}>Datenpflege</Typography>
+        <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>

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

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 }}>
+      <Box sx={{ px: 3, py: 2.5, bgcolor: 'white', borderBottom: '1px solid #e8e7e4', flexShrink: 0 }}>
-        <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.2 }}>Marktchancen</Typography>
+        <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>

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' }}>

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>

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.`