Responsive-Härtung: Seiten-Header, Kontextleiste, Stat-Cards

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

dev/frontend/hub-flux/PROGRESS.md

@@ -5,6 +5,32 @@
 
 ---
 
+## 2026-06-12 · Responsive-Härtung (Block 3, Punkt 1) ✅
+
+- **Was**: Systemische Responsive-Fehler behoben (Screenshots in
+  `dev/frontend/responsive/`): (1) Das starre Inline-Grid
+  `style="grid-template-columns:1fr auto"` der Seiten-Header (48 Seiten)
+  konnte nie umbrechen — die Aktions-Spalte quetschte die Titel-Spalte
+  (Buchstaben-Umbrüche im Firmennamen, Buttons liefen aus der Box).
+  Ersetzt durch die neue CSS-Klasse `.page-header` (hub-components.css):
+  unterhalb lg stapeln Titel und Aktionen, Aktions-Zeilen bekommen
+  flex-wrap. (2) Firmenkontext-Leiste im App-Layout stapelt jetzt erst
+  ab lg nebeneinander (vorher sm → Überlappung von „Firmenkontext"/
+  „Aktive Firma" zwischen 640–1024px). (3) Stat-Cards: Label/Meta-Zeile
+  mit flex-wrap (keine Kollision mehr auf schmalen Karten), `.stat-num`
+  mit `overflow-wrap:anywhere` + 26px unter 480px (Text-Werte wie
+  „Businessportal24" sprengen die Karte nicht mehr). (4) KPI-Grids, die
+  schon ab sm auf 4 Spalten gingen (Customer-Dashboard, User-Show,
+  PM-Index), erst ab xl vierspaltig.
+- **Dateien**: `resources/css/shared/hub-components.css` (.page-header,
+  .stat-num), `resources/views/components/portal/stat-card.blade.php`,
+  `resources/views/components/layouts/app.blade.php`, 48 Seiten-Views
+  (Header-Klasse per sed), 3 KPI-Grids.
+- **Build/Test**: `npm run build` ok (beide Bundles), Suite 532 passed /
+  4 skipped.
+- **Offene Fragen**: Weitere Stellen aus Kevins Klick-Durchgang folgen
+  (Liste Block 3).
+
 ## 2026-06-12 · Admin-Zahlungsmodul (P8-Rest) · Zahlungen + Tarif-Verwaltung ✅
 
 - **Was**: Den Phase-8-Platzhalter `/admin/payments` durch das echte

docs/user-admin/User-Panel-Restarbeiten.md

@@ -0,0 +1,7 @@
+1. Pressemitteilungen anlegen ohne Firma hier würde ich das Create Formular nicht aufrufen lassen, wenn keine Firma existiert, sondern es muss eine Meldung erscheinen, dass ohne eine Firma keine Pressemitteilung angelegt werden kann.. Hintergrund öffnet man. Eine neue Pressemitteilung kann man keine Firma angeben und kann auch nicht speichern man muss wieder zurückspringen  eine Firma anlegen und dann kann man erst entsprechend ein Presse Beitrag erstellen.
+
+2.  https://pressekonto.test/admin/me/profile die Darstellung ist noch nicht wirklich sauber hier kann noch etwas mehr Struktur rein. Grundsätzlich würde ich ab sofort Rechnungsadresse als Pflicht machen, wenn ein Paket gebucht wird und diese Rechnungsdaten gleich mit übergeben. Profil Einstellungen. Hier gibt es auch schon so etwas wie Anrede Vorname Telefon Risse etc. dieses doppelt sich mit der Rechnungsadresse zumindest in Teilen, denn die Rechnungsadresse ist technisch eigentlich gar nicht richtig vollständig hier viel zum Beispiel Firmenname Vorname Nachname Anrede. 
+
+3. Validierung der Rechnungsadresse gebe ich etwas ein und drücke ich auf. Absenden bekomme ich die Fehlermeldung zweimal einmal direkt unter dem Feld und einmal unten.
+
+4. Umsatzsteuer ID. Ich würde hier gerne schon mal eine Validierung der Umsatzsteuer ID haben, ob diese gültig ist oder macht das an dieser Stelle gar keinen Sinn, weil Strip das komplett übernimmt? Ich glaube es wär aber gut, wenn Firmen aus EU Land hier schon eine Steuernummer hinterlegen können und diese zumindest schon einmal während der Eingabe validiert wird, ob diese richtig ist. Diese kann dann ja Stripe übergeben werden.

resources/css/shared/hub-components.css

@@ -54,6 +54,33 @@
         border-bottom-color: rgba(255, 255, 255, 0.1);
     }
 
+    /* ============================================================
+     * Page-Header (Titel links, Aktionen rechts)
+     *
+     * Ersetzt das frühere Inline-Style `grid-template-columns:1fr auto`:
+     * Das starre Zwei-Spalten-Grid konnte auf schmalen Screens nicht
+     * umbrechen — die Aktions-Spalte (auto = Inhaltsbreite) quetschte
+     * die Titel-Spalte zusammen (Buchstaben-Umbrüche im Titel, Buttons
+     * liefen aus der Box). Unterhalb von lg stapeln die Bereiche.
+     * ============================================================ */
+
+    .page-header {
+        display: grid;
+        align-items: end;
+        gap: 20px;
+    }
+    @media (min-width: 1024px) {
+        .page-header {
+            grid-template-columns: 1fr auto;
+            gap: 32px;
+        }
+    }
+    /* Aktions-Zeilen (Buttons rechts) dürfen auf schmalen Screens
+       umbrechen, statt aus dem Header zu laufen. */
+    .page-header > .flex {
+        flex-wrap: wrap;
+    }
+
     /* ============================================================
      * Stat-Cards (KPI-Karten mit farbigem Strip links)
      * ============================================================ */
@@ -117,8 +144,15 @@
         font-weight: 600;
         color: var(--color-ink);
         letter-spacing: -0.5px;
-        line-height: 1;
+        line-height: 1.05;
         margin-top: 14px;
+        /* Text-Werte (z. B. Portal-Name) dürfen die Karte nie sprengen. */
+        overflow-wrap: anywhere;
+    }
+    @media (max-width: 480px) {
+        .stat-num {
+            font-size: 26px;
+        }
     }
     .stat-card.is-ok .stat-num {
         color: var(--color-ok);

resources/views/admin/dashboard.blade.php

@@ -2,7 +2,7 @@
     <div class="space-y-8">
 
         {{-- ============== PAGE HEADER ============== --}}
-        <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+        <header class="page-header">
             <div class="min-w-0">
                 <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                     <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/components/layouts/app.blade.php

@@ -9,9 +9,11 @@
             {{-- Hub-Stil-Banner: Hub-Soft-Hintergrund, Hub-Blau-Badge,
                  dezente Buchpapier-Rule. Ersetzt das Zinc-Starter-Kit-Card. --}}
             <div class="mb-6 rounded-md border border-hub-soft-2 bg-hub-soft/50 px-4 py-3">
-                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                {{-- Erst ab lg nebeneinander: zwischen sm und lg reichte die
+                     Breite nicht für Badges + Switcher, Inhalte überlappten. --}}
+                <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                     <div class="min-w-0">
-                        <div class="flex items-center gap-2.5">
+                        <div class="flex flex-wrap items-center gap-2.5">
                             <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-hub-soft text-hub text-[10.5px] font-bold tracking-[0.10em] uppercase">
                                 <span class="w-1.5 h-1.5 rounded-full bg-hub"></span>
                                 {{ __('User Backend') }}
@@ -25,7 +27,7 @@
                         </h2>
                     </div>
 
-                    <div class="w-full sm:w-auto">
+                    <div class="w-full lg:w-auto">
                         <livewire:customer.company-switcher />
                     </div>
                 </div>

resources/views/components/portal/stat-card.blade.php

@@ -21,8 +21,10 @@
 <article {{ $attributes->class(['stat-card', "is-{$variant}"]) }}>
     <span class="stat-strip"></span>
 
-    <div class="flex items-baseline justify-between gap-3">
+    {{-- flex-wrap: auf schmalen Karten rutscht das Meta unter das Label,
-        <div class="stat-label">{{ $label }}</div>
+         statt mit ihm zu kollidieren --}}
+    <div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5">
+        <div class="stat-label min-w-0">{{ $label }}</div>
 
         @isset($meta)
             <span class="stat-meta">{{ $meta }}</span>

resources/views/livewire/admin/categories/create.blade.php

@@ -108,7 +108,7 @@ new #[Layout('components.layouts.app'), Title('Kategorie anlegen')] class extend
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/categories/edit.blade.php

@@ -174,7 +174,7 @@ new #[Layout('components.layouts.app'), Title('Kategorie bearbeiten')] class ext
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/categories/index.blade.php

@@ -143,7 +143,7 @@ new #[Layout('components.layouts.app'), Title('Kategorien')] class extends Compo
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/companies/create.blade.php

@@ -119,7 +119,7 @@ new #[Layout('components.layouts.app'), Title('Neue Firma')] class extends Compo
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/companies/edit.blade.php

@@ -197,7 +197,7 @@ new #[Layout('components.layouts.app'), Title('Firma bearbeiten')] class extends
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/companies/index.blade.php

@@ -298,7 +298,7 @@ new #[Layout('components.layouts.app'), Title('Firmen')] class extends Component
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/companies/show.blade.php

@@ -214,7 +214,7 @@ new #[Layout('components.layouts.app'), Title('Firma anzeigen')] class extends C
 
     {{-- ============== PAGE HEADER ============== --}}
     @php($logoUrl = $company->logoUrl())
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/contacts/create.blade.php

@@ -145,7 +145,7 @@ new #[Layout('components.layouts.app'), Title('Kontakt anlegen')] class extends
 
 <form wire:submit="save" class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/contacts/edit.blade.php

@@ -181,7 +181,7 @@ new #[Layout('components.layouts.app'), Title('Kontakt bearbeiten')] class exten
 <div class="space-y-8">
     <form wire:submit="save" class="space-y-8">
         {{-- ============== PAGE HEADER ============== --}}
-        <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+        <header class="page-header">
             <div class="min-w-0">
                 <div class="flex items-center gap-3 mb-3 flex-wrap">
                     <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/contacts/index.blade.php

@@ -393,7 +393,7 @@ new #[Layout('components.layouts.app'), Title('Kontakte')] class extends Compone
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/coupons/index.blade.php

@@ -14,7 +14,7 @@ new #[Layout('components.layouts.app'), Title('Gutscheine')] class extends Compo
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/footer-codes/create.blade.php

@@ -77,7 +77,7 @@ new #[Layout('components.layouts.app'), Title('Footer-Code anlegen')] class exte
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/footer-codes/edit.blade.php

@@ -108,7 +108,7 @@ new #[Layout('components.layouts.app'), Title('Footer-Code bearbeiten')] class e
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/footer-codes/index.blade.php

@@ -78,7 +78,7 @@ new #[Layout('components.layouts.app'), Title('Footer-Codes')] class extends Com
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/invoices/index.blade.php

@@ -122,7 +122,7 @@ new #[Layout('components.layouts.app'), Title('Legacy Rechnungen')] class extend
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/newsletter/sync.blade.php

@@ -88,7 +88,7 @@ new #[Layout('components.layouts.app'), Title('Newsletter Sync')] class extends
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/payments/index.blade.php

@@ -102,7 +102,7 @@ new #[Layout('components.layouts.app'), Title('Zahlungen')] class extends Compon
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/payments/plans.blade.php

@@ -114,7 +114,7 @@ new #[Layout('components.layouts.app'), Title('Tarife & Pakete')] class extends
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/presets/create.blade.php

@@ -52,7 +52,7 @@ new #[Layout('components.layouts.app'), Title('Neue Voreinstellung')] class exte
 
 <form wire:submit="save" class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/presets/edit.blade.php

@@ -73,7 +73,7 @@ new #[Layout('components.layouts.app'), Title('Voreinstellung bearbeiten')] clas
 
 <form wire:submit="save" class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/presets/index.blade.php

@@ -78,7 +78,7 @@ new #[Layout('components.layouts.app'), Title('Voreinstellungen')] class extends
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/press-releases/create.blade.php

@@ -498,7 +498,7 @@ new #[Layout('components.layouts.app'), Title('Neue Pressemitteilung')] class ex
 
 <div class="space-y-8 pr-editor-shell" x-data="{ tagInput: '' }">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/press-releases/edit.blade.php

@@ -704,7 +704,7 @@ new #[Layout('components.layouts.app'), Title('Pressemitteilung bearbeiten')] cl
     {{-- Flash-Banner ersetzt durch <flux:toast /> im Layout. --}}
 
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/press-releases/index.blade.php

@@ -392,7 +392,7 @@ new #[Layout('components.layouts.app'), Title('Pressemitteilungen')] class exten
     {{-- Flash-Banner ersetzt durch <flux:toast /> im Layout. --}}
 
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>
@@ -414,7 +414,7 @@ new #[Layout('components.layouts.app'), Title('Pressemitteilungen')] class exten
     </header>
 
     {{-- ============== KPI-Reihe ============== --}}
-    <section class="grid gap-4 grid-cols-2 sm:grid-cols-4">
+    <section class="grid gap-4 grid-cols-2 xl:grid-cols-4">
         <x-portal.stat-card variant="primary" :label="__('Gesamt')" :value="number_format($stats['total'])">
             <x-slot:meta>{{ now()->format('Y') }}</x-slot:meta>
             <x-slot:trend>{{ __('über beide Portale') }}</x-slot:trend>

resources/views/livewire/admin/press-releases/show.blade.php

@@ -132,7 +132,7 @@ new #[Layout('components.layouts.app'), Title('Pressemitteilung')] class extends
     {{-- Flash-Banner ersetzt durch <flux:toast /> im Layout. --}}
 
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/reports/slow-requests.blade.php

@@ -53,7 +53,7 @@ new #[Layout('components.layouts.app'), Title('Performance Reports')] class exte
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/roles/create.blade.php

@@ -77,7 +77,7 @@ new #[Layout('components.layouts.app'), Title('Neue Rolle')] class extends Compo
 
 <form wire:submit="save" class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/roles/edit.blade.php

@@ -99,7 +99,7 @@ new #[Layout('components.layouts.app'), Title('Rolle bearbeiten')] class extends
 
 <form wire:submit="save" class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/roles/index.blade.php

@@ -20,7 +20,7 @@ new #[Layout('components.layouts.app'), Title('Rollen & Rechte')] class extends
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/users.blade.php

@@ -315,7 +315,7 @@ new #[Layout('components.layouts.app'), Title('Benutzer')] class extends Compone
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/users/create.blade.php

@@ -231,7 +231,7 @@ new #[Layout('components.layouts.app'), Title('Benutzer anlegen')] class extends
 
 <form wire:submit="save" class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/users/edit.blade.php

@@ -717,7 +717,7 @@ new #[Layout('components.layouts.app'), Title('Benutzer bearbeiten')] class exte
 
 <form wire:submit="save" class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('Admin Backend') }}</span>

resources/views/livewire/admin/users/show.blade.php

@@ -73,7 +73,7 @@ new #[Layout('components.layouts.app'), Title('Benutzer anzeigen')] class extend
         </article>
     @else
         {{-- ============== PAGE HEADER ============== --}}
-        <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+        <header class="page-header">
             <div class="min-w-0">
                 <div class="flex items-center gap-3 mb-3 flex-wrap">
                     <span class="badge hub dot">{{ __('Admin Backend') }}</span>
@@ -102,7 +102,7 @@ new #[Layout('components.layouts.app'), Title('Benutzer anzeigen')] class extend
         </header>
 
         {{-- ============== KPI-Reihe ============== --}}
-        <section class="grid grid-cols-1 gap-4 sm:grid-cols-4">
+        <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
             <x-portal.stat-card variant="muted" :label="__('Portal')" :value="$user->portal?->label() ?? '-'">
                 <x-slot:meta>{{ __('Zuordnung') }}</x-slot:meta>
             </x-portal.stat-card>

resources/views/livewire/customer/bookings.blade.php

@@ -105,7 +105,7 @@ new #[Layout('components.layouts.app'), Title('Buchungen & Add-ons')] class exte
     @endif
 
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('User Backend') }}</span>

resources/views/livewire/customer/dashboard.blade.php

@@ -202,7 +202,7 @@ new #[Layout('components.layouts.app'), Title('Mein Dashboard')] class extends C
 <div class="space-y-8">
 
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('User Backend') }}</span>
@@ -237,7 +237,7 @@ new #[Layout('components.layouts.app'), Title('Mein Dashboard')] class extends C
     </header>
 
     {{-- ============== STAT-CARDS — KPI-Reihe ============== --}}
-    <section class="grid grid-cols-2 gap-4 sm:grid-cols-4">
+    <section class="grid grid-cols-2 gap-4 xl:grid-cols-4">
         <x-portal.stat-card variant="primary" :label="__('Gesamt')" :value="$stats['total']">
             <x-slot:meta>{{ now()->format('Y') }}</x-slot:meta>
             <x-slot:trend>

resources/views/livewire/customer/invoices.blade.php

@@ -60,7 +60,7 @@ new #[Layout('components.layouts.app'), Title('Rechnungen')] class extends Compo
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('User Backend') }}</span>

resources/views/livewire/customer/press-kits/create.blade.php

@@ -121,7 +121,7 @@ new #[Layout('components.layouts.app'), Title('Neue Firma anlegen')] class exten
 
 <div class="space-y-6">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('User Backend') }}</span>

resources/views/livewire/customer/press-kits/index.blade.php

@@ -416,7 +416,7 @@ new #[Layout('components.layouts.app'), Title('Meine Firmen')] class extends Com
 
 <div class="space-y-6">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('User Backend') }}</span>

resources/views/livewire/customer/press-kits/show.blade.php

@@ -290,7 +290,7 @@ new #[Layout('components.layouts.app'), Title('Firma')] class extends Component
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('User Backend') }}</span>

resources/views/livewire/customer/press-releases/create.blade.php

@@ -689,7 +689,7 @@ new #[Layout('components.layouts.app'), Title('Neue Pressemitteilung')] class ex
 
 <div class="space-y-8 pr-editor-shell" x-data="{ tagInput: '' }">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('User Backend') }}</span>

resources/views/livewire/customer/press-releases/edit.blade.php

@@ -674,7 +674,7 @@ new #[Layout('components.layouts.app'), Title('Pressemitteilung bearbeiten')] cl
 
 <div class="space-y-8 pr-editor-shell" x-data="{ tagInput: '' }">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('User Backend') }}</span>

resources/views/livewire/customer/press-releases/index.blade.php

@@ -175,7 +175,7 @@ new #[Layout('components.layouts.app'), Title('Meine Pressemitteilungen')] class
     {{-- Flash-Banner ersetzt durch <flux:toast /> im Layout. --}}
 
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('User Backend') }}</span>

resources/views/livewire/customer/press-releases/show.blade.php

@@ -152,7 +152,7 @@ new #[Layout('components.layouts.app'), Title('Pressemitteilung')] class extends
     {{-- Flash-Banner ersetzt durch <flux:toast /> im Layout. --}}
 
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('User Backend') }}</span>

resources/views/livewire/customer/profile.blade.php

@@ -189,7 +189,7 @@ new #[Layout('components.layouts.app'), Title('Mein Profil')] class extends Comp
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('User Backend') }}</span>

resources/views/livewire/customer/security.blade.php

@@ -140,7 +140,7 @@ new #[Layout('components.layouts.app'), Title('Konto-Sicherheit')] class extends
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
                 <span class="badge hub dot">{{ __('User Backend') }}</span>

resources/views/livewire/customer/tokens.blade.php

@@ -87,7 +87,7 @@ new #[Layout('components.layouts.app'), Title('API-Tokens')] class extends Compo
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+    <header class="page-header">
         <div class="min-w-0">
             <div class="flex items-center gap-3 mb-3 flex-wrap">
                 <span class="badge hub dot">{{ __('User Backend') }}</span>

resources/views/partials/settings-heading.blade.php

@@ -1,5 +1,5 @@
 {{-- Hub-style settings page header (used by all /settings/* pages) --}}
-<header class="mb-8 grid items-end gap-8" style="grid-template-columns:1fr auto;">
+<header class="page-header mb-8">
     <div class="min-w-0">
         <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
             <span class="badge hub dot">{{ __('Admin Backend') }}</span>