feat(mobile): optimize mobile layout, navigation, and spacing

- Implement MobileBottomNav for native thumb-optimized usage
- Simplify Header overlay on mobile
- Add dynamic max() padding to ReferencesSlider for mobile view
- Condense vertical spacing in Footer for mobile devices
- Update layout.tsx to pad main content for bottom nav

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-16 relative overflow-hidden border-t border-white/5">
+    <footer className="bg-[#050B14] text-neutral-light py-10 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" />
       
@@ -26,13 +26,13 @@ export function Footer({ companyInfo }: FooterProps) {
       <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" />
       <div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/3 h-[200px] bg-primary/20 blur-[100px] rounded-full pointer-events-none opacity-50" />
 
-      <div className="container relative z-10 grid grid-cols-1 md:grid-cols-4 lg:grid-cols-12 gap-6 lg:gap-8 mb-12">
+      <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-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-6 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-6 relative z-10">
-            <TransitionLink href={`/${locale}`} className="relative block h-14 w-48 mb-6 group/logo">
+          <div className="space-y-4 md:space-y-6 relative z-10">
+            <TransitionLink href={`/${locale}`} className="relative block h-12 md:h-14 w-40 md:w-48 mb-4 md:mb-6 group/logo">
               <Image
                 src="/assets/logo-white.png"
                 alt="E-TIB Gruppe"
@@ -48,7 +48,7 @@ export function Footer({ companyInfo }: FooterProps) {
           </div>
 
           {companyInfo && (
-            <div className="text-white/70 text-sm space-y-4 mt-12 relative z-10">
+            <div className="text-white/70 text-sm space-y-3 md:space-y-4 mt-8 md:mt-12 relative z-10">
               <div className="flex gap-4 p-4 rounded-2xl bg-white/[0.03] border border-white/[0.05] hover:bg-white/[0.05] transition-colors">
                 <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
                   <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
@@ -58,7 +58,7 @@ export function Footer({ companyInfo }: FooterProps) {
                   <p className="whitespace-pre-line font-medium text-white/90">{companyInfo.address}</p>
                 </div>
               </div>
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-2 gap-3 md:gap-4">
                 <a href={`mailto:${companyInfo.contactEmail}`} className="flex flex-col gap-2 p-4 rounded-2xl bg-white/[0.03] border border-white/[0.05] hover:bg-white/[0.08] hover:border-primary/30 transition-all group/contact">
                   <p className="text-xs text-white/40 uppercase tracking-wider font-heading">E-Mail</p>
                   <p className="font-medium text-white/90 group-hover/contact:text-primary transition-colors truncate">{companyInfo.contactEmail}</p>
@@ -73,16 +73,16 @@ export function Footer({ companyInfo }: FooterProps) {
         </div>
 
         {/* Navigation Bento Grid */}
-        <div className="col-span-1 md:col-span-4 lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-6 lg:gap-8">
+        <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-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-6 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-8 text-white">
+            <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-6 md:mb-8 text-white">
               {locale === 'de' ? 'Unternehmen' : 'Company'}
               <span className="block w-8 h-1 bg-primary mt-3 rounded-full" />
             </h4>
-            <ul className="space-y-4 relative z-10 flex-grow">
+            <ul className="space-y-2 md:space-y-4 relative z-10 flex-grow">
               {[
                 { label: locale === 'de' ? 'Kompetenzen' : 'Competencies', href: `/${locale}/kompetenzen` },
                 { label: locale === 'de' ? 'Über uns' : 'About us', href: `/${locale}/ueber-uns` },
@@ -101,13 +101,13 @@ export function Footer({ companyInfo }: FooterProps) {
           </div>
 
           {/* Legal Column */}
-          <div className="bg-white/[0.02] border border-white/5 rounded-3xl 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-6 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-8 text-white">
+            <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-6 md:mb-8 text-white">
               {locale === 'de' ? 'Rechtliches' : 'Legal'}
               <span className="block w-8 h-1 bg-primary mt-3 rounded-full opacity-50" />
             </h4>
-            <ul className="space-y-4 relative z-10 flex-grow">
+            <ul className="space-y-2 md:space-y-4 relative z-10 flex-grow">
               {[
                 { label: locale === 'de' ? 'Impressum' : 'Imprint', href: `/${locale}/impressum` },
                 { label: locale === 'de' ? 'Datenschutz' : 'Privacy Policy', href: `/${locale}/datenschutz` },
@@ -123,7 +123,7 @@ export function Footer({ companyInfo }: FooterProps) {
             </ul>
 
             {/* Built Info inside Legal box for compact layout */}
-            <div className="mt-12 pt-6 border-t border-white/5 text-white/30 text-xs">
+            <div className="mt-8 pt-4 md:mt-12 md:pt-6 border-t border-white/5 text-white/30 text-xs">
               <a href="https://mintel.me" target="_blank" rel="noopener noreferrer" className="hover:text-white/60 transition-colors flex items-center gap-2">
                 <span>Designed & Engineered by Mintel</span>
                 <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17l9.2-9.2M17 17V7H7"/></svg>
@@ -135,7 +135,7 @@ export function Footer({ companyInfo }: FooterProps) {
       </div>
 
       <div className="container relative z-10">
-        <div className="flex flex-col md:flex-row justify-between items-center gap-6 py-6 px-8 rounded-2xl bg-white/[0.02] border border-white/5 backdrop-blur-md">
+        <div className="flex flex-col md:flex-row justify-between items-center gap-4 md:gap-6 py-4 px-5 md:py-6 md:px-8 rounded-2xl bg-white/[0.02] border border-white/5 backdrop-blur-md text-center md:text-left">
           <p className="text-white/50 text-sm font-medium">&copy; {new Date().getFullYear()} E-TIB GmbH. {locale === 'de' ? 'Alle Rechte vorbehalten.' : 'All rights reserved.'}</p>
           <div className="flex items-center gap-6">
              <LanguageSwitcher isSolidMode={false} />
@@ -143,7 +143,7 @@ export function Footer({ companyInfo }: FooterProps) {
         </div>
 
         {/* Quality Badges */}
-        <div className="mt-6 flex flex-wrap justify-center gap-x-8 gap-y-4 text-white/30 text-xs font-medium uppercase tracking-wider">
+        <div className="mt-4 md:mt-6 flex flex-wrap justify-center gap-x-4 gap-y-3 md:gap-x-8 md:gap-y-4 text-white/30 text-[10px] md:text-xs font-medium uppercase tracking-wider px-2">
           <div className="flex items-center gap-2"><ShieldCheck className="w-4 h-4 text-white/40" /><span>SSL Secured</span></div>
           <div className="flex items-center gap-2"><Leaf className="w-4 h-4 text-primary/60" /><span>Green Hosting</span></div>
           <div className="flex items-center gap-2"><Lock className="w-4 h-4 text-white/40" /><span>DSGVO Compliant</span></div>