fix(css): enforce explicit layout limits on footer and blog page

app/[locale]/blog/[slug]/page.tsx

@@ -118,7 +118,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
 
           {/* Title overlay on image */}
           <div className="absolute inset-0 flex flex-col justify-end pb-16 md:pb-24">
-            <div className="container mx-auto px-4">
+            <div className="container mx-auto max-w-7xl px-4">
               <div className="max-w-4xl bg-neutral-dark/40 backdrop-blur-md p-6 rounded-2xl border border-white/10">
                 {post.frontmatter.category && (
                   <div className="overflow-hidden mb-6">
@@ -192,7 +192,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
       )}
 
       {/* Main Content Area with Sticky Narrative Layout */}
-      <div className="container mx-auto px-4 py-16 md:py-24">
+      <div className="container mx-auto max-w-7xl px-4 py-16 md:py-24">
         <div className="sticky-narrative-container">
           {/* Left Column: Content */}
           <div className="sticky-narrative-content">

app/globals.css

@@ -3,17 +3,32 @@
 
 @config "../tailwind.config.cjs";
 
-/* Fix for Tailwind v4 missing container center & padding */
-@layer components {
-  .container {
-    margin-inline: auto !important;
-    padding-inline: 1rem;
+/* Tailwind v4 Container Polyfill */
+@utility container {
+  width: 100%;
+  margin-inline: auto !important;
+  padding-inline: 1rem;
+
+  @media (min-width: 640px) {
+    max-width: 640px;
+    padding-inline: 1.5rem;
+  }
+  @media (min-width: 768px) {
+    max-width: 768px;
+    padding-inline: 2rem;
+  }
+  @media (min-width: 1024px) {
+    max-width: 1024px;
+    padding-inline: 2.5rem;
+  }
+  @media (min-width: 1280px) {
+    max-width: 1280px;
+    padding-inline: 3rem;
+  }
+  @media (min-width: 1536px) {
+    max-width: 1536px;
+    padding-inline: 4rem;
   }
-  @media (width >= 640px) { .container { padding-inline: 1.5rem; } }
-  @media (width >= 768px) { .container { padding-inline: 2rem; } }
-  @media (width >= 1024px) { .container { padding-inline: 2.5rem; } }
-  @media (width >= 1280px) { .container { padding-inline: 3rem; } }
-  @media (width >= 1400px) { .container { padding-inline: 4rem; } }
 }
 
 /* E-TIB Custom Utilities */

components/blocks/CompanyTimeline.tsx

@@ -85,7 +85,7 @@ export function CompanyTimeline({
       <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-primary/5 rounded-full blur-[100px] pointer-events-none -translate-y-1/2 translate-x-1/3" />
       <div className="absolute bottom-0 left-0 w-[800px] h-[800px] bg-neutral-200/40 rounded-full blur-[120px] pointer-events-none translate-y-1/3 -translate-x-1/3" />
 
-      <div className="container max-w-5xl relative z-10">
+      <div className="container mx-auto max-w-5xl relative z-10">
         <div className="text-center mb-12 md:mb-24">
           <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white border border-neutral-200 text-neutral-dark text-xs font-bold uppercase tracking-wider mb-6 shadow-sm">
             <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />

components/blocks/HeroVideo.tsx

@@ -119,7 +119,7 @@ export function HeroVideo(props: HeroVideoProps) {
       {/* Top Fade for Header Navigation Readability */}
       <div className="absolute top-0 left-0 w-full h-48 bg-gradient-to-b from-black/70 to-transparent z-[3] pointer-events-none" />
       
-      <div className="container relative z-[4] text-center px-4">
+      <div className="container mx-auto max-w-7xl relative z-[4] text-center px-4">
         <div
           key={`hero-content-${pathname}`}
           className="relative"

components/blocks/JobListingBlock.tsx

@@ -69,7 +69,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
 
   return (
     <div className="py-12 md:py-24">
-      <div className="container mx-auto">
+      <div className="container max-w-7xl mx-auto">
         {showFairs && (
           <div className="mb-12 md:mb-24 relative">
             <m.h3 

components/blocks/ReferencesSlider.tsx

@@ -98,7 +98,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
     <section id="referenzen" className="pt-16 pb-8 md:py-24 lg:py-32 bg-neutral-dark text-white relative overflow-hidden">
       <div className="absolute inset-0 bg-gradient-to-b from-neutral-dark via-neutral-900 to-neutral-dark z-0" />
       
-      <div className="container relative z-10 mb-12 flex flex-col items-center justify-center text-center gap-6">
+      <div className="container mx-auto max-w-7xl relative z-10 mb-12 flex flex-col items-center justify-center text-center gap-6">
         <div>
           <h2 className="text-primary-light font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
           <h3 className="font-heading text-3xl md:text-5xl font-extrabold">{title}</h3>
@@ -179,7 +179,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
 
       </div>
 
-      <div className="container relative z-10 mt-4 flex justify-center">
+      <div className="container mx-auto max-w-7xl relative z-10 mt-4 flex justify-center">
         <Link 
           href={ctaHref} 
           className="px-8 py-4 rounded-xl bg-white/5 border border-white/20 hover:bg-white hover:text-neutral-dark hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] transition-all font-bold flex items-center gap-3 backdrop-blur-sm"

components/blocks/SubCompanyTiles.tsx

@@ -69,7 +69,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
   
   return (
     <section id="unternehmen" className="pt-12 pb-16 md:py-24 lg:py-32 bg-neutral-dark border-b border-neutral-800 relative overflow-hidden">
-      <div className="container relative z-10 px-4">
+      <div className="container mx-auto max-w-7xl relative z-10 px-4">
         
         {(badge || title) && (
           <div className="text-center md:text-left max-w-3xl mx-auto md:mx-0 mb-16">

components/blocks/TeamGrid.tsx

@@ -29,7 +29,7 @@ export function TeamGrid({ members }: TeamGridProps) {
 
   return (
     <section className="py-16 md:py-24 lg:py-32 bg-white relative overflow-hidden">
-      <div className="container relative z-10">
+      <div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl relative z-10">
         <div className="mb-12">
           <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{t('badge')}</h2>
           <h3 className="font-heading text-3xl md:text-4xl font-extrabold text-neutral-dark mb-4">{t('title')}</h3>

components/layout/Footer.tsx

@@ -29,7 +29,7 @@ export function Footer({ companyInfo }: FooterProps) {
 
       <EUFundingBadge />
 
-      <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-4 md:mb-12">
+      <div className="container mx-auto max-w-7xl relative z-10 grid grid-cols-1 md:grid-cols-4 lg:grid-cols-12 gap-4 md:gap-6 lg:gap-8 mb-4 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-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" />
@@ -217,7 +217,7 @@ export function Footer({ companyInfo }: FooterProps) {
         </div>
       </div>
 
-      <div className="container relative z-10">
+      <div className="container mx-auto max-w-7xl relative z-10">
         <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">
           <div className="flex flex-col md:flex-row items-center gap-4 md:gap-6 h-full">
             <p className="text-neutral-400 text-xs font-medium m-0">&copy; {new Date().getFullYear()} E-TIB GmbH. {locale === 'de' ? 'Alle Rechte vorbehalten.' : 'All rights reserved.'}</p>