From 394ac5a19cc71a6da4fc3c23d3057e8569fe3439 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Mon, 15 Jun 2026 15:23:23 +0200
Subject: [PATCH] style(mobile): optimize mobile layout and component spacing

- Hide CorporateBackground on mobile to prevent content overlap
- Increase Header padding on mobile for better logo spacing
- Reduce top spacing in HeroSection on mobile
- Change SubCompanyTiles to horizontally scrollable row on mobile
- Add bottom padding to Footer to clear MobileBottomNav
- Reduce Footer Bento card padding for compact mobile view
---
 components/blocks/HeroSection.tsx              | 2 +-
 components/blocks/SubCompanyTiles.tsx          | 4 ++--
 components/decorations/CorporateBackground.tsx | 2 +-
 components/layout/Footer.tsx                   | 8 ++++----
 components/layout/Header.tsx                   | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/blocks/HeroSection.tsx b/components/blocks/HeroSection.tsx
index cf54c0063..796f4d6ca 100644
--- a/components/blocks/HeroSection.tsx
+++ b/components/blocks/HeroSection.tsx
@@ -42,7 +42,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
 
   return (
     <section
-      className={`relative min-h-[45vh] md:min-h-[55vh] flex items-center pt-32 pb-20 md:pt-36 md:pb-24 overflow-hidden bg-neutral-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
+      className={`relative min-h-[45vh] md:min-h-[55vh] flex items-center pt-24 pb-16 md:pt-36 md:pb-24 overflow-hidden bg-neutral-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
     >
       {bgSrc && (
         <motion.div 
diff --git a/components/blocks/SubCompanyTiles.tsx b/components/blocks/SubCompanyTiles.tsx
index 1ac3bda01..7b9bfcbc0 100644
--- a/components/blocks/SubCompanyTiles.tsx
+++ b/components/blocks/SubCompanyTiles.tsx
@@ -79,7 +79,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
         )}
         
         <motion.div 
-          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
+          className="flex overflow-x-auto snap-x snap-mandatory pb-6 md:pb-0 md:grid md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 hide-scrollbar -mx-4 px-4 md:mx-0 md:px-0"
           variants={containerVariants}
           initial="hidden"
           whileInView="visible"
@@ -236,7 +236,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
               <motion.div 
                 key={index}
                 variants={itemVariants}
-                className="h-full"
+                className="h-full flex-shrink-0 snap-center w-[85%] sm:w-[70%] md:w-full"
               >
                 {hasUrl ? (
                   isExternal ? (
diff --git a/components/decorations/CorporateBackground.tsx b/components/decorations/CorporateBackground.tsx
index e02583822..04fbb28fb 100644
--- a/components/decorations/CorporateBackground.tsx
+++ b/components/decorations/CorporateBackground.tsx
@@ -78,7 +78,7 @@ export function CorporateBackground() {
   const y5 = useTransform(scrollYProgress, [0, 1], [0, -500]);
 
   return (
-    <div className="absolute inset-0 z-[50] overflow-hidden pointer-events-none" aria-hidden="true">
+    <div className="absolute inset-0 z-[50] overflow-hidden pointer-events-none hidden md:block" aria-hidden="true">
       {/* 1. Top Right - Medium, rotating moderately */}
       <motion.div 
         style={{ 
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
index edaf8c77d..288022382 100644
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -18,7 +18,7 @@ export function Footer({ companyInfo }: FooterProps) {
   const locale = useLocale();
 
   return (
-    <footer className="bg-[#050B14] text-neutral-light py-10 md:py-16 relative overflow-hidden border-t border-white/5">
+    <footer className="bg-[#050B14] text-neutral-light pt-10 pb-28 md:py-16 relative overflow-hidden border-t border-white/5">
       {/* Subtle background tech grid */}
       <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
 
@@ -28,7 +28,7 @@ export function Footer({ companyInfo }: FooterProps) {
 
       <div className="container relative z-10 grid grid-cols-1 md:grid-cols-4 lg:grid-cols-12 gap-4 md:gap-6 lg:gap-8 mb-8 md:mb-12">
         {/* Brand Column Bento */}
-        <div className="col-span-1 md:col-span-4 lg:col-span-5 flex flex-col justify-between bg-white/[0.02] border border-white/5 rounded-3xl p-6 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden">
+        <div className="col-span-1 md:col-span-4 lg:col-span-5 flex flex-col justify-between bg-white/[0.02] border border-white/5 rounded-3xl p-5 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden">
           <div className="absolute inset-0 bg-gradient-to-br from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
 
           <div className="space-y-4 md:space-y-6 relative z-10">
@@ -96,7 +96,7 @@ export function Footer({ companyInfo }: FooterProps) {
         <div className="col-span-1 md:col-span-4 lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6 lg:gap-8">
 
           {/* Company Column */}
-          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-6 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
+          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-5 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
             <div className="absolute inset-0 bg-gradient-to-bl from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
             <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-6 md:mb-8 text-white">
               {locale === 'de' ? 'Unternehmen' : 'Company'}
@@ -124,7 +124,7 @@ export function Footer({ companyInfo }: FooterProps) {
           </div>
 
           {/* Legal Column */}
-          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-6 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
+          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-5 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
             <div className="absolute inset-0 bg-gradient-to-tr from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
             <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-6 md:mb-8 text-white">
               {locale === 'de' ? 'Rechtliches' : 'Legal'}
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 629fa4f94..da57baaea 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -72,7 +72,7 @@ export function Header({ navLinks }: HeaderProps) {
         className={`fixed top-0 left-0 right-0 z-50 flex justify-center transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] ${
           isStandard 
             ? 'bg-[#050B14]/95 backdrop-blur-xl border-b border-white/10' 
-            : (isSolidMode ? 'pt-4 px-4' : 'pt-0 px-0')
+            : (isSolidMode ? 'pt-4 px-4 sm:px-6' : 'pt-0 px-0')
         }`}
       >
         <div
@@ -80,7 +80,7 @@ export function Header({ navLinks }: HeaderProps) {
             isStandard
               ? 'py-4 px-6 md:px-8'
               : isSolidMode
-                ? 'rounded-full bg-white/50 backdrop-blur-xl shadow-[0_8px_32px_rgba(0,0,0,0.08)] border border-white/40 py-2.5 px-6 md:px-8'
+                ? 'rounded-full bg-white/50 backdrop-blur-xl shadow-[0_8px_32px_rgba(0,0,0,0.08)] border border-white/40 py-2.5 px-8 md:px-10'
                 : 'rounded-none bg-transparent py-6 px-4 md:px-8 border border-transparent'
           }`}
         >