web: Responsive-/Mobile-Fixes fürs öffentliche Frontend

Behebt strukturelle Mobile-Bugs (320/390px) über presseecho,
businessportal24 und den pressekonto-Hub hinweg:

- Focus-/Kategorie-/Newsroom-Hero: Text im Flow (min-h + flex) statt
  fester Höhe, responsive Typo — Overlay überläuft nicht mehr nach oben.
- Quality-Summary: Grid stackt auf Mobile (behebt Seiten-Overflow).
- Hub: Utility-Bar mit Wrap, Header mit Mobile-Burger, Footer stackt,
  Architektur-Diagramm als gestapelte Mobile-Variante.
- Sticky-Header (Portal): fehlende .header-sticky-CSS ergänzt und Script
  mit Platzhalter, damit der Header beim Scrollen sichtbar bleibt.
- Header-Overflow bei 320px entschärft (Portal + Hub); Hub-Hero-H1
  verkleinert, damit die Wortmarke "businessportal24" umbricht.
- Mobile-Nav um Preise/FAQ/API ergänzt; Industry-Index-Dichte,
  Touch-Targets und Preise-Einzel-PM-Block für kleine Screens verbessert.
- Homepages/Shared: px-8 → px-4 sm:px-6 lg:px-8.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/views/web/layouts/web-master.blade.php

@@ -84,31 +84,48 @@
             let topbarHeight = topbar.offsetHeight;
             let isHeaderSticky = false;
 
+            // Platzhalter hält im Fluss die Header-Höhe frei, sobald der
+            // Header per position:fixed aus dem Fluss genommen wird —
+            // ohne den Spacer würde der Inhalt beim Fixieren nach oben springen.
+            const spacer = document.createElement('div');
+            spacer.setAttribute('aria-hidden', 'true');
+
+            function makeSticky() {
+                spacer.style.height = header.offsetHeight + 'px';
+                header.parentNode.insertBefore(spacer, header);
+                header.classList.remove('header-normal');
+                header.classList.add('header-sticky');
+                isHeaderSticky = true;
+            }
+
+            function clearSticky() {
+                header.classList.remove('header-sticky');
+                header.classList.add('header-normal');
+                if (spacer.parentNode) {
+                    spacer.parentNode.removeChild(spacer);
+                }
+                isHeaderSticky = false;
+            }
+
             function updateHeaderPosition() {
                 const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
                 if (scrollTop >= topbarHeight && !isHeaderSticky) {
-                    // TopBar ist nicht mehr sichtbar - Header wird sticky
-                    header.classList.remove('header-normal');
-                    header.classList.add('header-sticky');
-                    isHeaderSticky = true;
+                    makeSticky();
                 } else if (scrollTop < topbarHeight && isHeaderSticky) {
-                    // TopBar ist wieder sichtbar - Header wird normal
-                    header.classList.remove('header-sticky');
-                    header.classList.add('header-normal');
-                    isHeaderSticky = false;
+                    clearSticky();
                 }
             }
 
-            // Initial check
             updateHeaderPosition();
 
-            // Listen for scroll events
-            window.addEventListener('scroll', updateHeaderPosition);
+            window.addEventListener('scroll', updateHeaderPosition, { passive: true });
 
-            // Listen for resize events (in case topbar height changes)
             window.addEventListener('resize', function() {
                 topbarHeight = topbar.offsetHeight;
+                if (isHeaderSticky) {
+                    spacer.style.height = header.offsetHeight + 'px';
+                }
                 updateHeaderPosition();
             });
         });