chore(release): 2.4.42

.agents/AGENTS.md

@@ -0,0 +1,9 @@
+<RULE[zero_trust_no_proof]>
+# 🚫 ZERO TRUST & BEWEISPFLICHT
+
+Dein Wort hat absolut keinen Wert, wenn du es nicht mit einem harten Test beweisen kannst.
+
+- **Keine Behauptungen:** Wenn du sagst, dass etwas funktioniert, ist das wertlos. Code, der nicht getestet ist, gilt als defekt.
+- **Beweispflicht:** Jede Code-Änderung, jeder Fix und jede Logik-Anpassung MUSS durch einen begleitenden, erfolgreichen automatisierten Test bewiesen werden.
+- **TDD (Test-Driven Development) ist Gesetz:** Ohne einen fehlschlagenden Test darfst du keinen Code schreiben. Ohne einen grünen Test darfst du keinen Code als fertig deklarieren.
+</RULE[zero_trust_no_proof]>

.env

@@ -27,7 +27,7 @@ UMAMI_API_ENDPOINT=https://analytics.infra.mintel.me
 # Error Tracking (GlitchTip/Sentry)
 # ────────────────────────────────────────────────────────────────────────────
 # Optional: Leave empty to disable error tracking
-SENTRY_DSN=https://dcb81958-dbf2-4a3d-b422-875f4672c14b@glitchtip.infra.mintel.me/5
+SENTRY_DSN=https://dcb81958dbf24a3db422875f4672c14b@errors.infra.mintel.me/5
 
 # ────────────────────────────────────────────────────────────────────────────
 # Email Configuration (SMTP)
@@ -45,7 +45,6 @@ MAIL_RECIPIENTS=info@e-tib.com
 # ────────────────────────────────────────────────────────────────────────────
 LOG_LEVEL=info
 GATEKEEPER_PASSWORD=klz2026
-SENTRY_DSN=
 # SENTRY_ENVIRONMENT is set automatically by CI
 
 # ────────────────────────────────────────────────────────────────────────────

.env.example

@@ -45,7 +45,6 @@ MAIL_RECIPIENTS=info@e-tib.com
 # ────────────────────────────────────────────────────────────────────────────
 LOG_LEVEL=info
 GATEKEEPER_PASSWORD=klz2026
-SENTRY_DSN=
 # SENTRY_ENVIRONMENT is set automatically by CI
 
 # ────────────────────────────────────────────────────────────────────────────

.env.production

@@ -16,7 +16,7 @@ UMAMI_WEBSITE_ID=d773ea10-a3b3-4ccf-9024-987e14c4d669
 UMAMI_API_ENDPOINT=https://analytics.infra.mintel.me
 
 # Error Tracking (GlitchTip/Sentry)
-SENTRY_DSN=
+SENTRY_DSN=https://dcb81958dbf24a3db422875f4672c14b@errors.infra.mintel.me/5
 
 # Email Configuration (Mailgun)
 MAIL_HOST=smtp.eu.mailgun.org

.gitea/workflows/deploy.yml

@@ -20,6 +20,7 @@ concurrency:
 env:
   PUPPETEER_SKIP_DOWNLOAD: "true"
   COREPACK_NPM_REGISTRY: "https://registry.npmmirror.com"
+  GIT_HTTP_VERSION: HTTP/1.1
 
 
 jobs:
@@ -46,37 +47,12 @@ jobs:
         run: |
           echo "=== System Disk Usage ==="
           df -h || true
-          echo "=== Tool Cache Usage ==="
-          du -sh /opt/hostedtoolcache/* || true
-          du -sh /opt/hostedtoolcache/.[!.]* || true
-          echo "Purging old tool caches..."
-          rm -rf /opt/hostedtoolcache/* || true
-          rm -rf /opt/hostedtoolcache/.[!.]* || true
-          echo "=== Host Disk Usage ==="
-          docker run --rm -v /:/host-root alpine df -h || true
-          echo "=== Host Inode Usage ==="
-          docker run --rm -v /:/host-root alpine df -i || true
+          echo "Purging old tool caches skipped to prevent runner corruption."
           echo "=== Running Host Containers ==="
           docker ps --format "table {{.Names}}\t{{.Status}}\t{{.Image}}" || true
           echo "=== Host Docker Info ==="
           docker info || true
-          echo "Pruning host Buildkit builder caches aggressively..."
-          for container in $(docker ps --filter "name=buildx_buildkit_builder" --format "{{.Names}}"); do
-            echo "Pruning Buildkit inside container: $container"
-            docker exec -i "$container" buildctl prune --all || true
-          done
-          echo "Removing buildkit builder containers to clear overlay storage..."
-          containers=$(docker ps -a --filter "name=buildx_buildkit_builder" -q)
-          if [ -n "$containers" ]; then
-            docker rm -f $containers || true
-          fi
-          echo "=== Truncating host Docker container log files ==="
-          docker run --rm -v /:/host-root alpine sh -c "truncate -s 0 /host-root/mnt/HC_Volume_104796416/docker/containers/*/*.log" || true
-          echo "Purging old build layers, unused volumes and images..."
-          docker builder prune -a -f || true
-          docker volume prune -f || true
-          docker system prune -a -f --volumes || true
-          echo "=== System Disk Usage After Prune ==="
+          echo "=== System Disk Usage After Check ==="
           df -h || true
 
       - name: Checkout repository
@@ -112,6 +88,15 @@ jobs:
             fi
           else
             TARGET="branch"
+            
+            # Check if this exact commit has a tag. If so, skip the branch deploy 
+            # because the tag pipeline will handle the production/staging deploy.
+            git fetch --tags --quiet || true
+            if git describe --tags --exact-match HEAD >/dev/null 2>&1; then
+              echo "Commit has a tag. Skipping branch deployment to favor tag deployment."
+              TARGET="skip"
+            fi
+            
             SLUG=$(echo "$REF" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9]/-/g' | sed 's/--*/-/g' | sed 's/^-//;s/-$//')
             IMAGE_TAG="branch-${SLUG}-${SHORT_SHA}"
             ENV_FILE=".env.branch-${SLUG}"
@@ -218,6 +203,13 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: 🚦 Priority Gate Check
+        env:
+          GITEA_PAT: ${{ secrets.GITEA_PAT }}
+          CURRENT_RUN_ID: ${{ github.run_id }}
+          CURRENT_TARGET: ${{ needs.prepare.outputs.target }}
+        run: bash scripts/priority-gate.sh
+
       - name: 🔐 Registry Auth
         id: auth
         env:
@@ -297,6 +289,13 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+        
+      - name: 🚦 Priority Gate Check
+        env:
+          GITEA_PAT: ${{ secrets.GITEA_PAT }}
+          CURRENT_RUN_ID: ${{ github.run_id }}
+          CURRENT_TARGET: ${{ needs.prepare.outputs.target }}
+        run: bash scripts/priority-gate.sh
       - name: 📝 Generate Environment
         shell: bash
         env:
@@ -334,6 +333,9 @@ jobs:
           {
             echo "# Generated by CI - $TARGET"
             echo "IMAGE_TAG=$IMAGE_TAG"
+            if [[ "$TARGET" != "production" ]]; then
+              echo "NODE_TLS_REJECT_UNAUTHORIZED=0"
+            fi
             echo "NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL"
             echo "GATEKEEPER_ORIGIN=$GATEKEEPER_ORIGIN"
             echo "SENTRY_DSN=$SENTRY_DSN"

.lighthouseci/flags-35c461a1-1737-443e-b40c-153ece4e7189.json

@@ -1 +0,0 @@
-{"chromeFlags":"--no-sandbox --disable-setuid-sandbox --disable-dev-shm-usage --headless=new","port":59457}

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

@@ -1,4 +1,5 @@
 import { notFound, redirect } from 'next/navigation';
+import { getImageProps } from 'next/image';
 import { Container, Badge, Heading } from '@/components/ui';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
@@ -49,10 +50,33 @@ const mdxComponents = {
   JsonLd,
   Button,
   Badge,
+  Heading,
   AnimatedCounter,
   GrowthChart,
   DeepDrillAnimation,
   DataGridPulse,
+  ResponsiveImage: (props: any) => {
+    let src = props.src;
+    if (typeof src === 'string' && src.startsWith('/_next/image')) {
+      try {
+        const urlParam = new URLSearchParams(src.split('?')[1]).get('url');
+        if (urlParam) src = decodeURIComponent(urlParam);
+      } catch (_e) {
+        // Ignore invalid URL parsing
+      }
+    }
+    const { props: { srcSet, src: finalSrc, sizes } } = getImageProps({
+      src,
+      alt: props.alt || '',
+      width: 1920,
+      height: 1080,
+      sizes: '(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 50vw',
+      quality: 80,
+    });
+    return (
+      <img {...props} src={finalSrc} srcSet={srcSet} sizes={sizes} loading="lazy" decoding="async" />
+    );
+  },
   // Standard HTML element mapping for consistent E-TIB typography
   h1: (props: any) => <Heading level={1} size="2" className="hidden" {...props} />, // Hidden because Hero handles H1
   h2: (props: any) => <Heading level={2} size="3" className="mt-16 mb-6 border-b border-neutral-100 pb-4" {...props} />,

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

@@ -1,4 +1,5 @@
 import { notFound, redirect } from 'next/navigation';
+import { getImageProps } from 'next/image';
 import JsonLd from '@/components/JsonLd';
 import { SITE_URL } from '@/lib/schema';
 import {
@@ -24,6 +25,28 @@ const mdxComponents = {
   h2: (props: any) => <Heading level={2} size="3" className="mt-16 mb-6 border-b border-neutral-100 pb-4" {...props} />,
   h3: (props: any) => <Heading level={3} size="4" className="mt-12 mb-4 text-primary" {...props} />,
   h4: (props: any) => <Heading level={4} size="5" className="mt-8 mb-4 uppercase tracking-widest text-neutral-500" {...props} />,
+  ResponsiveImage: (props: any) => {
+    let src = props.src;
+    if (typeof src === 'string' && src.startsWith('/_next/image')) {
+      try {
+        const urlParam = new URLSearchParams(src.split('?')[1]).get('url');
+        if (urlParam) src = decodeURIComponent(urlParam);
+      } catch (_e) {
+        // Ignore invalid URL parsing
+      }
+    }
+    const { props: { srcSet, src: finalSrc, sizes } } = getImageProps({
+      src,
+      alt: props.alt || '',
+      width: 1920,
+      height: 1080,
+      sizes: '(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 50vw',
+      quality: 80,
+    });
+    return (
+      <img {...props} src={finalSrc} srcSet={srcSet} sizes={sizes} loading="lazy" decoding="async" />
+    );
+  },
   p: (props: any) => <p className="text-base md:text-lg text-text-secondary leading-[1.8] mb-6 font-normal max-w-3xl" {...props} />,
   ul: (props: any) => <ul className="list-none mb-8 space-y-3 text-base md:text-lg text-text-secondary font-normal max-w-3xl" {...props} />,
   ol: (props: any) => <ol className="list-decimal pl-6 mb-8 space-y-3 text-base md:text-lg text-text-secondary font-normal max-w-3xl" {...props} />,
@@ -118,7 +141,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 +215,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/[locale]/error.tsx

@@ -2,10 +2,9 @@
 
 import { useEffect } from 'react';
 import { useTranslations } from 'next-intl';
-import { getAppServices } from '@/lib/services/create-services';
 import { Button, Heading } from '@/components/ui';
 import { Terminal, Activity, AlertTriangle, RefreshCw, Home, ShieldAlert } from 'lucide-react';
-import { motion } from 'framer-motion';
+import { m } from 'framer-motion';
 
 export default function Error({
   error,
@@ -26,9 +25,7 @@ export default function Error({
       return;
     }
 
-    const services = getAppServices();
-    services.errors.captureException(error);
-    services.logger.error('Application error caught by boundary', {
+    console.error('Application error caught by boundary', {
       message: error?.message || 'Unknown error',
       stack: error?.stack,
       digest: error?.digest,
@@ -65,7 +62,7 @@ export default function Error({
       <div className="relative z-10 w-full max-w-4xl mx-auto flex flex-col items-center">
         {/* The "Broken" Machine Visual */}
         <div className="relative mb-12">
-          <motion.div
+          <m.div
             initial={{ opacity: 0, scale: 0.8 }}
             animate={{ opacity: 1, scale: 1 }}
             className="relative"
@@ -81,7 +78,7 @@ export default function Error({
             
             {/* Warning Overlay */}
             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
-              <motion.div
+              <m.div
                 animate={{ 
                   opacity: [0.4, 1, 0.4],
                   scale: [0.95, 1.05, 0.95]
@@ -90,9 +87,9 @@ export default function Error({
                 className="p-4 rounded-2xl bg-red-500/20 border border-red-500/40 backdrop-blur-md shadow-[0_0_30px_rgba(239,68,68,0.3)]"
               >
                 <ShieldAlert className="w-12 h-12 text-red-500" />
-              </motion.div>
+              </m.div>
             </div>
-          </motion.div>
+          </m.div>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-12 gap-8 w-full items-start">

app/[locale]/errors/api/relay/route.ts

@@ -1,13 +1,83 @@
 import { NextResponse } from 'next/server';
+import https from 'https';
+
+const ALLOWED_HOSTS = ['glitchtip.infra.mintel.me', 'errors.infra.mintel.me'];
 
 export async function POST(req: Request) {
   try {
     const rawText = await req.text();
-    // Sentry sends NDJSON (Newline Delimited JSON). Split by newline to parse safely.
-    const items = rawText.split('\n').filter(Boolean).map(line => JSON.parse(line));
-    console.log("CLIENT ERROR INTERCEPTED:", JSON.stringify(items[0], null, 2));
+    const items = rawText.split('\n');
+    
+    if (items.length === 0 || !items[0]) {
+      return NextResponse.json({ error: 'Empty payload' }, { status: 400 });
+    }
+
+    const header = JSON.parse(items[0]);
+    // Use the server's configured DSN (if available) to override the client's potentially fake DSN
+    // This allows the client to work without exposing NEXT_PUBLIC_SENTRY_DSN
+    const dsn = process.env.SENTRY_DSN || header.dsn;
+    if (!dsn) {
+      return NextResponse.json({ error: 'No DSN found' }, { status: 400 });
+    }
+
+    const url = new URL(dsn);
+    const projectId = url.pathname.replace('/', '');
+    const host = url.hostname;
+
+    if (!ALLOWED_HOSTS.includes(host)) {
+      return NextResponse.json({ error: 'Invalid Sentry Host' }, { status: 400 });
+    }
+
+    // Rewrite the DSN in the envelope header so Glitchtip doesn't reject the fake client DSN
+    if (process.env.SENTRY_DSN) {
+      header.dsn = process.env.SENTRY_DSN;
+      items[0] = JSON.stringify(header);
+    }
+
+    const sentryIngestUrl = `https://${host}/api/${projectId}/envelope/`;
+    const payloadToForward = items.join('\n');
+
+    return new Promise<NextResponse>((resolve) => {
+      const req = https.request(
+        sentryIngestUrl,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-sentry-envelope',
+          },
+          // Bypass self-signed cert error since glitchtip.infra.mintel.me uses an internal CA
+          // that the Next.js docker container doesn't trust by default.
+          rejectUnauthorized: false,
+        },
+        (res) => {
+          res.on('data', () => {
+            // Consume data to free up memory
+          });
+          res.on('end', () => {
+            if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) {
+              resolve(NextResponse.json({ success: true }));
+            } else {
+              resolve(
+                NextResponse.json(
+                  { error: `Relay rejected (${res.statusCode})` },
+                  { status: res.statusCode || 500 }
+                )
+              );
+            }
+          });
+        }
+      );
+
+      req.on('error', (err) => {
+        console.error('[Sentry Tunnel] https.request failed', err);
+        resolve(NextResponse.json({ error: 'Relay failed' }, { status: 500 }));
+      });
+
+      req.write(payloadToForward);
+      req.end();
+    });
   } catch (e) {
-    console.log("Failed to parse relay body (NDJSON)", e);
+    console.error("[Sentry Tunnel] Failed to parse or relay body", e);
+    return NextResponse.json({ error: 'Relay failed' }, { status: 500 });
   }
-  return NextResponse.json({ success: true });
 }

app/[locale]/layout.tsx

@@ -1,6 +1,5 @@
 import { Footer } from '@/components/layout/Footer';
 import { Header } from '@/components/layout/Header';
-import { MobileBottomNav } from '@/components/layout/MobileBottomNav';
 import JsonLd from '@/components/JsonLd';
 import SkipLink from '@/components/SkipLink';
 import AnalyticsShell from '@/components/analytics/AnalyticsShell';
@@ -17,9 +16,14 @@ import { mapFileSlugToTranslated } from '@/lib/slugs';
 import { cookies } from 'next/headers';
 
 import { TransitionProvider } from '@/components/providers/TransitionProvider';
-import { PageTransitionShutter } from '@/components/providers/PageTransitionShutter';
-import { InitialLoader } from '@/components/providers/InitialLoader';
-import { CorporateBackground } from '@/components/decorations/CorporateBackground';
+
+import { DynamicInitialLoader as InitialLoader } from '@/components/providers/DynamicInitialLoader';
+import { DynamicMobileBottomNav as MobileBottomNav } from '@/components/layout/DynamicMobileBottomNav';
+
+import { DynamicCorporateBackground as CorporateBackground } from '@/components/decorations/DynamicCorporateBackground';
+import { DynamicPageTransitionShutter as PageTransitionShutter } from '@/components/providers/DynamicPageTransitionShutter';
+import { DynamicFramerMotion as FramerMotionProvider } from '@/components/providers/DynamicFramerMotion';
+
 const inter = Inter({
   subsets: ['latin'],
   display: 'swap',
@@ -32,7 +36,8 @@ export async function generateMetadata(props: {
   const params = await props.params;
   const { locale } = params;
 
-  const baseUrl = process.env.CI ? 'http://etib.localhost' : SITE_URL;
+  const baseUrl = SITE_URL;
+
   return {
     title: {
       template: '%s | E-TIB',
@@ -42,10 +47,11 @@ export async function generateMetadata(props: {
     metadataBase: new URL(baseUrl),
     manifest: '/manifest.webmanifest',
     alternates: {
-      canonical: `${baseUrl}/${locale}`,
+      canonical: `/${locale}`,
       languages: {
-        de: `${baseUrl}/de`,
-        en: `${baseUrl}/en`,
+        'de': `/de`,
+        'en': `/en`,
+        'x-default': `/de`,
       },
     },
   };
@@ -60,6 +66,9 @@ export const viewport: Viewport = {
   themeColor: '#117c61',
 };
 
+export async function generateStaticParams() {
+  return [{ locale: 'de' }, { locale: 'en' }];
+}
 
 export default async function Layout(props: {
   children: React.ReactNode;
@@ -148,19 +157,9 @@ export default async function Layout(props: {
   const serverServices = getServerAppServices();
 
   try {
-    const { headers } = await import('next/headers');
-    const requestHeaders = await headers();
-
     // Disable analytics in CI to prevent console noise/score penalties
     if (process.env.NEXT_PUBLIC_CI === 'true') {
       // Skip setting server context for analytics in CI
-    } else if ('setServerContext' in serverServices.analytics) {
-      (serverServices.analytics as any).setServerContext({
-        userAgent: requestHeaders.get('user-agent') || undefined,
-        language: requestHeaders.get('accept-language')?.split(',')[0] || undefined,
-        referrer: requestHeaders.get('referer') || undefined,
-        ip: requestHeaders.get('x-forwarded-for')?.split(',')[0] || undefined,
-      });
     }
 
     // Server-side analytics tracking removed to prevent duplicate/empty events.
@@ -192,26 +191,28 @@ export default async function Layout(props: {
       <body className="relative flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white" suppressHydrationWarning>
         <NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
           <TransitionProvider>
-            <CorporateBackground />
-            <InitialLoader shouldShowLoader={!hasSeenLoader} />
-            <PageTransitionShutter />
-            <SkipLink />
-            <Header navLinks={navLinks} />
-            <MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} />
-            
-            <main
-              id="main-content"
-              className="flex-grow animate-fade-in overflow-visible"
-              tabIndex={-1}
-            >
-              {children}
-            </main>
+            <FramerMotionProvider>
+              <CorporateBackground />
+              <InitialLoader shouldShowLoader={!hasSeenLoader} />
+              <PageTransitionShutter />
+              <SkipLink />
+              <Header navLinks={navLinks} />
+              <MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} />
+              
+              <main
+                id="main-content"
+                className="flex-grow overflow-visible"
+                tabIndex={-1}
+              >
+                {children}
+              </main>
 
-            <Footer companyInfo={companyInfo} />
-            <JsonLd />
-            <AnalyticsShell />
+              <Footer companyInfo={companyInfo} />
+              <JsonLd />
+              <AnalyticsShell />
 
-            {feedbackEnabled && <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />}
+              <FeedbackClientWrapper />
+            </FramerMotionProvider>
           </TransitionProvider>
         </NextIntlClientProvider>
       </body>

app/[locale]/not-found.tsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { useTranslations } from 'next-intl';
 import { Button, Heading } from '@/components/ui';
 import { Terminal, Search, Home, Mail, Activity, Cpu } from 'lucide-react';
-import { motion } from 'framer-motion';
+import { m } from 'framer-motion';
 import ClientNotFoundTracker from '@/components/analytics/ClientNotFoundTracker';
 
 export default function NotFound() {
@@ -46,7 +46,7 @@ export default function NotFound() {
       <div className="relative z-10 w-full max-w-4xl mx-auto flex flex-col items-center">
         {/* 404 Visual */}
         <div className="relative mb-12">
-          <motion.div
+          <m.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             className="relative"
@@ -62,7 +62,7 @@ export default function NotFound() {
             
             {/* Search Scan Overlay */}
             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
-              <motion.div
+              <m.div
                 animate={{ 
                   scale: [1, 1.1, 1],
                   opacity: [0.5, 1, 0.5]
@@ -71,9 +71,9 @@ export default function NotFound() {
                 className="p-5 rounded-full bg-primary/20 border border-primary/40 backdrop-blur-md shadow-[0_0_40px_rgba(var(--color-primary),0.3)]"
               >
                 <Search className="w-10 h-10 text-primary" />
-              </motion.div>
+              </m.div>
             </div>
-          </motion.div>
+          </m.div>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-12 gap-12 w-full items-start">

app/[locale]/page.tsx

@@ -37,6 +37,41 @@ const mdxComponents = (references: any[]) => ({
   AnimatedCounter,
   InteractiveGermanyMap,
   ScaleOfImpact,
+  ResponsiveImage: (props: any) => {
+    // Parse src if it's already a next image proxy
+    let src = props.src;
+    if (typeof src === 'string' && src.startsWith('/_next/image')) {
+      try {
+        const urlParam = new URLSearchParams(src.split('?')[1]).get('url');
+        if (urlParam) src = decodeURIComponent(urlParam);
+      } catch (e) {
+        // Fallback
+      }
+    }
+    
+    // Use Next.js getImageProps for responsive srcSet generation
+    const {
+      props: { srcSet, src: finalSrc, sizes }
+    } = getImageProps({
+      src,
+      alt: props.alt || '',
+      width: 1920,
+      height: 1080,
+      sizes: '(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 50vw',
+      quality: 80,
+    });
+
+    return (
+      <img 
+        {...props} 
+        src={finalSrc} 
+        srcSet={srcSet}
+        sizes={sizes}
+        loading="lazy" 
+        decoding="async" 
+      />
+    );
+  },
   img: (props: any) => {
     // Parse src if it's already a next image proxy
     let src = props.src;
@@ -87,7 +122,9 @@ export async function generateMetadata(props: any): Promise<Metadata> {
   };
 }
 
-export default async function Home(props: any) {
+import { preload } from 'react-dom';
+
+export default async function Home(props: { params: Promise<{ locale: string }> }) {
   const { locale } = await props.params;
   
   if (locale !== 'de' && locale !== 'en') {
@@ -95,6 +132,7 @@ export default async function Home(props: any) {
   }
   
   setRequestLocale(locale);
+  preload('/germany-map.svg', { as: 'image', fetchPriority: 'high' });
 
   const mdx = await getMdxContent(locale, 'home');
   const allReferences = await getAllReferences(locale);

app/[locale]/referenzen/page.tsx

@@ -1,4 +1,5 @@
 import { Container, Heading, Badge } from '@/components/ui';
+import { getImageProps } from 'next/image';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import { getAllReferences } from '@/lib/references';
@@ -39,6 +40,29 @@ const mdxComponents = {
   ul: (props: any) => <ul className="grid grid-cols-1 gap-2 mb-6" {...props} />,
   li: CustomLi,
   p: (props: any) => <p className="text-neutral-600 text-sm mb-4 leading-relaxed" {...props} />,
+  Heading,
+  ResponsiveImage: (props: any) => {
+    let src = props.src;
+    if (typeof src === 'string' && src.startsWith('/_next/image')) {
+      try {
+        const urlParam = new URLSearchParams(src.split('?')[1]).get('url');
+        if (urlParam) src = decodeURIComponent(urlParam);
+      } catch (_e) {
+        // Ignore invalid URL parsing
+      }
+    }
+    const { props: { srcSet, src: finalSrc, sizes } } = getImageProps({
+      src,
+      alt: props.alt || '',
+      width: 1920,
+      height: 1080,
+      sizes: '(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 50vw',
+      quality: 80,
+    });
+    return (
+      <img {...props} src={finalSrc} srcSet={srcSet} sizes={sizes} loading="lazy" decoding="async" />
+    );
+  },
 };
 
 interface PageProps {

app/[locale]/standorte/page.tsx

@@ -1,4 +1,4 @@
-import { Container } from '@/components/ui';
+import { Container } from '@/components/ui/Container';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import TrackedLink from '@/components/analytics/TrackedLink';
@@ -33,11 +33,15 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
   };
 }
 
+import { preload } from 'react-dom';
+
 export default async function StandorteOverview(props: { params: Promise<{ locale: string }> }) {
   const { locale } = await props.params;
   const safeLocale = locale === 'de' ? 'de' : 'en';
   setRequestLocale(safeLocale);
   const t = await getTranslations('StandardPage');
+  
+  preload('/germany-map.svg', { as: 'image', fetchPriority: 'high' });
 
   return (
     <div className="flex flex-col min-h-screen bg-neutral-50 pb-16 md:pb-24">
@@ -70,6 +74,7 @@ export default async function StandorteOverview(props: { params: Promise<{ local
                     alt={standort.name}
                     fill
                     className="object-cover transition-transform duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] filter grayscale-[20%] group-hover:scale-105 group-hover:grayscale-0"
+                    sizes="(max-width: 768px) 200px, 384px"
                   />
                   <div className="absolute inset-0 bg-black/10 transition-colors duration-500" />
                   
@@ -85,9 +90,9 @@ export default async function StandorteOverview(props: { params: Promise<{ local
                 {/* Content Section */}
                 <div className="flex flex-col flex-grow p-6 md:p-8 bg-white">
                   <div className="flex items-start justify-between gap-4 mb-4">
-                    <h3 className="text-xl md:text-2xl font-bold font-heading text-neutral-dark transition-colors leading-[1.2] group-hover:text-primary">
+                    <h2 className="text-xl md:text-2xl font-bold font-heading text-neutral-dark transition-colors leading-[1.2] group-hover:text-primary">
                       {standort.name}
-                    </h3>
+                    </h2>
                     <ArrowUpRight className="w-5 h-5 text-neutral-400 group-hover:text-primary transition-colors shrink-0" />
                   </div>
                   
@@ -98,7 +103,7 @@ export default async function StandorteOverview(props: { params: Promise<{ local
                   {/* Meta Data */}
                   <div className="flex flex-col gap-3 mt-auto border-t border-neutral-100 pt-6 relative z-10">
                     <div className="min-w-0">
-                      <span className="block text-[10px] uppercase tracking-widest text-neutral-400 font-bold mb-1">
+                      <span className="block text-[10px] uppercase tracking-widest text-neutral-500 font-bold mb-1">
                         {safeLocale === 'de' ? 'Adresse' : 'Address'}
                       </span>
                       <span className="flex items-start gap-2 text-sm font-semibold text-neutral-700 leading-tight">
@@ -117,7 +122,7 @@ export default async function StandorteOverview(props: { params: Promise<{ local
         <div className="mt-12 md:mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group">
           <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
           <div className="relative z-10 max-w-2xl">
-            <h3 className="text-2xl md:text-3xl font-bold mb-4">{t('nextProjectTitle')}</h3>
+            <h2 className="text-2xl md:text-3xl font-bold mb-4">{t('nextProjectTitle')}</h2>
             <p className="text-lg text-white/70 mb-8">{t('nextProjectDesc')}</p>
             <TrackedLink
               href={`/${safeLocale}/${safeLocale === 'de' ? 'kontakt' : 'contact'}`}

app/[locale]/template.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { m } from 'framer-motion';
 
 export default function Template({ children }: { children: React.ReactNode }) {
   return (
-    <motion.div
+    <m.div
       initial={{ opacity: 0, y: 20, filter: 'blur(10px)' }}
       animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
       transition={{ 
@@ -14,6 +14,6 @@ export default function Template({ children }: { children: React.ReactNode }) {
       className="w-full h-full"
     >
       {children}
-    </motion.div>
+    </m.div>
   );
 }

app/actions/contact.ts

@@ -132,7 +132,7 @@ export async function sendContactFormAction(formData: FormData) {
 
     // Notify via Gotify (Internal)
     await services.notifications.notify({
-      title: `📩 ${notificationSubject}`,
+      title: `📩 [E-TIB] ${notificationSubject}`,
       message: `New message from ${name} (${email}):\n\n${message}`,
       priority: 5,
     });
@@ -153,7 +153,7 @@ export async function sendContactFormAction(formData: FormData) {
     services.errors.captureException(error, { action: 'sendContactFormAction', email });
 
     await services.notifications.notify({
-      title: '🚨 Contact Form Error',
+      title: '🚨 [E-TIB] Contact Form Error',
       message: `Failed to send emails for ${name} (${email}). Error: ${errorMsg}`,
       priority: 8,
     });

app/global-error.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import * as Sentry from '@sentry/nextjs';
 import Error from 'next/error';
 import { useEffect } from 'react';
 
@@ -10,7 +9,7 @@ export default function GlobalError({
   error: Error & { digest?: string };
 }) {
   useEffect(() => {
-    Sentry.captureException(error);
+    console.error('Global Error:', error);
   }, [error]);
 
   return (

app/globals.css

@@ -3,6 +3,34 @@
 
 @config "../tailwind.config.cjs";
 
+/* 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;
+  }
+}
+
 /* E-TIB Custom Utilities */
 @layer utilities {
   .text-balance {
@@ -87,3 +115,31 @@
   }
 }
 /* trigger rebuild */
+
+@keyframes hero-fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@utility animate-hero-fade-in-up {
+  animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes hero-zoom-out {
+  from {
+    transform: scale(1.05);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@utility animate-hero-zoom-out {
+  animation: hero-zoom-out 1.5s ease-out forwards;
+}

app/manifest.ts

@@ -10,11 +10,7 @@ export default function manifest(): MetadataRoute.Manifest {
     background_color: '#001a4d',
     theme_color: '#001a4d',
     icons: [
-      {
-        src: '/favicon.ico',
-        sizes: 'any',
-        type: 'image/x-icon',
-      },
+
       {
         src: '/logo.png',
         sizes: '512x512',

bundle-stats.json

@@ -0,0 +1,48 @@
+.next/static/chunks/0b521531212fbb38.js
+.next/static/chunks/0c4bd4931d57e66a.js
+.next/static/chunks/114976d6e8233fa6.js
+.next/static/chunks/163f657a16afbe5e.js
+.next/static/chunks/1c2f1bc547a6b6db.js
+.next/static/chunks/2583fa7802927c7b.js
+.next/static/chunks/30da1bf4e9770388.js
+.next/static/chunks/38b815a6d50481c3.js
+.next/static/chunks/3dc2f63532eb2144.js
+.next/static/chunks/3e327b4e2347bc0f.js
+.next/static/chunks/3ef3cefd2dae1060.js
+.next/static/chunks/45499dd88f8aa0be.js
+.next/static/chunks/4b9828b23c1decfd.js
+.next/static/chunks/4c801febc70daa53.js
+.next/static/chunks/4d5ea13dba62fe42.js
+.next/static/chunks/4dffe404993f353e.js
+.next/static/chunks/4f185d0c413fdb9e.js
+.next/static/chunks/4f69e8e09eeae4d6.js
+.next/static/chunks/4fa8be7f170d31f3.js
+.next/static/chunks/583b451485662887.js
+.next/static/chunks/5e1e2d5c357c1b57.js
+.next/static/chunks/6216b234a7a88a60.js
+.next/static/chunks/651fbbae0062342b.js
+.next/static/chunks/66a1b90666fc2830.js
+.next/static/chunks/6c0ddf2fd63ab912.js
+.next/static/chunks/72cf73de45fde6cf.js
+.next/static/chunks/75ea3a278c540e05.js
+.next/static/chunks/77a84d4dc662b7cf.js
+.next/static/chunks/7c603cfd5a61abd1.js
+.next/static/chunks/84ddf763fbc98e13.js
+.next/static/chunks/885c97d656f95ebd.js
+.next/static/chunks/8d6ae249fcc5e38f.js
+.next/static/chunks/920f860e909b2eb8.js
+.next/static/chunks/951d03271d663d8a.js
+.next/static/chunks/a094276392fca24a.js
+.next/static/chunks/a2e7fbe3f294caac.js
+.next/static/chunks/a6c9d757034eb86a.js
+.next/static/chunks/a6dc76eec9924929.js
+.next/static/chunks/c3f21c4df538784a.js
+.next/static/chunks/c641ee8514fa0552.js
+.next/static/chunks/d8c0ef20e0ad9790.js
+.next/static/chunks/e60e6d615bf7d2f5.js
+.next/static/chunks/e714b6ccaf8d5f12.js
+.next/static/chunks/eeebcf8c8de1a29a.js
+.next/static/chunks/f0b47c1f19d25fd2.js
+.next/static/chunks/f8d5b1a2accefb4c.js
+.next/static/chunks/fa18a72fd9fb11d5.js
+.next/static/chunks/turbopack-2aac2a40101e9988.js

components/ContactForm.tsx

@@ -81,7 +81,7 @@ export default function ContactForm() {
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
           </svg>
         </div>
-        <Heading level={3} className="mb-4">
+        <Heading level={3} align="center" className="mb-4">
           {t('form.successTitle') || 'Message Sent!'}
         </Heading>
         <p className="text-text-secondary text-lg mb-8">
@@ -115,7 +115,7 @@ export default function ContactForm() {
             <line x1="9" y1="9" x2="15" y2="15" strokeLinecap="round" strokeLinejoin="round" />
           </svg>
         </div>
-        <Heading level={3} className="mb-4 text-destructive font-black">
+        <Heading level={3} align="center" className="mb-4 text-destructive font-black">
           {t('form.errorTitle') || 'Submission Failed!'}
         </Heading>
         <p className="text-destructive/80 text-lg mb-8 leading-relaxed font-medium">

components/FeedbackClientWrapper.tsx

@@ -2,17 +2,17 @@
 
 import dynamic from 'next/dynamic';
 
-const FeedbackOverlay = dynamic(
-  () => import('@mintel/next-feedback/FeedbackOverlay').then((mod) => mod.FeedbackOverlay),
-  { ssr: false },
-);
+const IS_ENABLED = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
 
-interface FeedbackClientWrapperProps {
-  feedbackEnabled: boolean;
-}
+const FeedbackOverlay = IS_ENABLED 
+  ? dynamic(
+      () => import('@mintel/next-feedback/FeedbackOverlay').then((mod) => mod.FeedbackOverlay),
+      { ssr: false },
+    )
+  : () => null;
 
-export default function FeedbackClientWrapper({ feedbackEnabled }: FeedbackClientWrapperProps) {
-  if (!feedbackEnabled) return null;
+export default function FeedbackClientWrapper() {
+  if (!IS_ENABLED) return null;
 
   return <FeedbackOverlay />;
 }

components/Lightbox.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import Image from 'next/image';
 import { createPortal } from 'react-dom';
-import { m, LazyMotion, AnimatePresence } from 'framer-motion';
+import { m, AnimatePresence, LazyMotion } from 'framer-motion';
 import { useRouter, useSearchParams, usePathname } from 'next/navigation';
 
 interface LightboxProps {

components/analytics/AnalyticsProvider.tsx

@@ -2,34 +2,28 @@
 
 import { useEffect } from 'react';
 import { usePathname, useSearchParams } from 'next/navigation';
-import { getAppServices } from '@/lib/services/create-services';
+import { useAnalytics } from './useAnalytics';
 
 /**
  * AnalyticsProvider Component
  *
  * Automatically tracks pageviews on client-side route changes.
  * This component handles navigation events for the Umami analytics service.
- *
- * Note: Website ID is now centrally managed on the server side via a proxy,
- * so it's no longer needed as a prop here.
  */
 export default function AnalyticsProvider() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const { trackPageview } = useAnalytics();
 
   useEffect(() => {
     if (!pathname) return;
 
-    const services = getAppServices();
     const url = `${pathname}${searchParams?.size ? `?${searchParams.toString()}` : ''}`;
 
     // Track pageview with the full URL
     // The service will relay this to our internal proxy which injects the Website ID
-    services.analytics.trackPageview(url);
-
-    // Services like logger are already sub-initialized in getAppServices()
-    // so we don't need to log here manually.
-  }, [pathname, searchParams]);
+    trackPageview(url);
+  }, [pathname, searchParams, trackPageview]);
 
   return null;
 }

components/analytics/AnalyticsShell.tsx

@@ -22,11 +22,18 @@ export default function AnalyticsShell() {
       return;
     }
 
+    const initServices = () => {
+      import('@/lib/services/create-services').then(({ getAppServices }) => {
+        getAppServices();
+        setShouldLoad(true);
+      }).catch(console.error);
+    };
+
     // Wait until browser is completely idle before loading heavy analytics/logger/sentry SDKs
     if (typeof window !== 'undefined' && 'requestIdleCallback' in window) {
-      window.requestIdleCallback(() => setShouldLoad(true), { timeout: 3000 });
+      window.requestIdleCallback(initServices, { timeout: 3000 });
     } else {
-      const timer = setTimeout(() => setShouldLoad(true), 2500);
+      const timer = setTimeout(initServices, 2500);
       return () => clearTimeout(timer);
     }
   }, []);

components/analytics/ClientNotFoundTracker.tsx

@@ -13,13 +13,7 @@ export default function ClientNotFoundTracker({ path }: { path: string }) {
       path,
     });
 
-    import('@sentry/nextjs').then((Sentry) => {
-      Sentry.withScope((scope) => {
-        scope.setTag('status_code', '404');
-        scope.setTag('path', path);
-        Sentry.captureMessage(`Route Not Found: ${path}`, 'warning');
-      });
-    });
+
   }, [trackEvent, path]);
 
   return null;

components/analytics/useAnalytics.ts

@@ -1,73 +1,69 @@
 'use client';
 
 import { useCallback } from 'react';
-import { getAppServices } from '@/lib/services/create-services';
-import type { AnalyticsEventProperties } from '@/lib/services/analytics/analytics-service';
+
+export type AnalyticsEventProperties = Record<string, any>;
+
+/**
+ * Sends a payload to the proxy API without loading backend config/logger dependencies.
+ */
+function sendAnalyticsPayload(type: 'event', data: Record<string, any>) {
+  if (typeof window === 'undefined') return;
+  if (process.env.NEXT_PUBLIC_CI === 'true') return;
+
+  const payload = {
+    hostname: window.location.hostname,
+    screen: `${window.screen.width}x${window.screen.height}`,
+    language: navigator.language,
+    referrer: document.referrer,
+    title: document.title,
+    ...data,
+  };
+
+  try {
+    fetch('/stats/api/send', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ type, payload }),
+      keepalive: true,
+    }).catch(e => console.error('[Umami] Failed to send payload', e));
+  } catch (error) {
+    console.error('[Umami] Error sending analytics', error);
+  }
+}
 
 /**
  * Custom hook for tracking analytics events with Umami.
- * 
- * Provides a convenient way to track custom events throughout your application.
- * 
- * @example
- * ```tsx
- * import { useAnalytics } from '@/components/analytics/useAnalytics';
- * 
- * function MyComponent() {
- *   const { trackEvent, trackPageview } = useAnalytics();
- * 
- *   const handleButtonClick = () => {
- *     trackEvent('button_click', {
- *       button_id: 'cta-primary',
- *       page: 'homepage'
- *     });
- *   };
- * 
- *   return <button onClick={handleButtonClick}>Click me</button>;
- * }
- * ```
- * 
- * @example
- * ```tsx
- * // Track a custom pageview
- * const { trackPageview } = useAnalytics();
- * trackPageview('/custom-path?param=value');
- * ```
  */
 export function useAnalytics() {
-  const services = getAppServices();
-
-  /**
-   * Track a custom event with optional properties.
-   * 
-   * @param eventName - The name of the event to track
-   * @param properties - Optional event properties (metadata)
-   */
   const trackEvent = useCallback(
     (eventName: string, properties?: AnalyticsEventProperties) => {
-      services.analytics.track(eventName, properties);
+      sendAnalyticsPayload('event', {
+        name: eventName,
+        data: properties,
+        url: window.location.pathname + window.location.search,
+      });
       
       if (process.env.NODE_ENV === 'development') {
         console.log('[Umami] Tracked event:', eventName, properties);
       }
     },
-    [services]
+    []
   );
 
-  /**
-   * Track a pageview (useful for custom navigation or SPA routing).
-   * 
-   * @param url - The URL to track (defaults to current location)
-   */
   const trackPageview = useCallback(
     (url?: string) => {
-      services.analytics.trackPageview(url);
+      sendAnalyticsPayload('event', {
+        url: url || window.location.pathname + window.location.search,
+      });
       
       if (process.env.NODE_ENV === 'development') {
         console.log('[Umami] Tracked pageview:', url ?? 'current location');
       }
     },
-    [services]
+    []
   );
 
   return {

components/annotator-local/Annotator.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from "react";
-import { AnimatePresence, m, LazyMotion, domAnimation } from 'framer-motion';
+import { AnimatePresence, m } from 'framer-motion';
 import { MessageSquare, X, Check, Image as ImageIcon, Type, StickyNote, Download, Trash2, List } from "lucide-react";
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";

components/blocks/BenefitGrid.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
+import { m, Variants } from 'framer-motion';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 import { LogoArcs } from '@/components/ui/LogoArcs';
 

components/blocks/CertificatesBlock.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import { m } from 'framer-motion';
 import { Container } from '@/components/ui/Container';
 import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
@@ -148,7 +148,8 @@ export function CertificatesBlock({ badge, title, description, certificates = de
             const wrapperProps = cert.pdfUrl ? {
               href: encodeURI(cert.pdfUrl),
               target: "_blank",
-              rel: "noopener noreferrer"
+              rel: "noopener noreferrer",
+              download: cert.pdfUrl.split('/').pop()
             } : {};
             
             return (

components/blocks/CompanyTimeline.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
+import { useScroll, useTransform, m } from 'framer-motion';
 import { Building2, Compass, Layers, ArrowDownToLine, Wrench, Factory, Zap, MapPin, CheckCircle2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
@@ -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/CompetenceBentoGrid.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 import Image from 'next/image';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import { m } from 'framer-motion';
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';

components/blocks/ContactSection.tsx

@@ -4,7 +4,7 @@ import React, { Suspense } from 'react';
 import { Section, Container } from '@/components/ui';
 import { ContactForm } from '@/components/forms/ContactForm';
 import dynamic from 'next/dynamic';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import { m } from 'framer-motion';
 
 const ContactMap = dynamic(() => import('@/components/ContactMap'), {
   ssr: false,

components/blocks/DataGridPulse.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import { m } from 'framer-motion';
 import { useLocale } from 'next-intl';
 
 export function DataGridPulse() {

components/blocks/DeepDrillAnimation.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useRef } from 'react';
-import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
+import { useScroll, useTransform, m } from 'framer-motion';
 import { useLocale } from 'next-intl';
 
 export function DeepDrillAnimation() {

components/blocks/GrowthChart.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import { m } from 'framer-motion';
 import { useTranslations } from 'next-intl';
 
 export function GrowthChart() {

components/blocks/HeroSection.tsx

@@ -3,7 +3,6 @@
 import React from 'react';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { Badge, Container, Heading } from '@/components/ui';
 import { Button } from '@/components/ui/Button';
 
@@ -17,25 +16,7 @@ export interface HeroSectionProps {
   ctaHref?: string;
 }
 
-const containerVariants = {
-  hidden: { opacity: 0 },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.15,
-      delayChildren: 0.1,
-    },
-  },
-};
-
-const itemVariants = {
-  hidden: { opacity: 0, y: 30 },
-  visible: { 
-    opacity: 1, 
-    y: 0, 
-    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const } 
-  },
-};
+// CSS animations replace Framer Motion for better LCP
 
 export const HeroSection: React.FC<HeroSectionProps> = (props) => {
   const { title, badge, subtitle, backgroundImage, alignment, ctaLabel, ctaHref } = props;
@@ -47,12 +28,9 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
       className={`relative min-h-[35vh] md:min-h-[50vh] flex items-center pt-28 pb-10 md:pt-36 md:pb-24 overflow-hidden bg-neutral-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
     >
       {bgSrc && (
-        <m.div 
+        <div 
           key={`hero-bg-${pathname}`}
-          className="absolute inset-0 z-0"
-          initial={{ scale: 1.05, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          transition={{ duration: 1.5, ease: "easeOut" }}
+          className="absolute inset-0 z-0 animate-hero-zoom-out"
         >
           <Image
             src={bgSrc}
@@ -74,37 +52,34 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
           
           {/* 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" />
-        </m.div>
+        </div>
       )}
       <Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
-        <m.div 
+        <div 
           key={`hero-content-${pathname}`}
           className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}
-          variants={containerVariants}
-          initial="hidden"
-          animate="visible"
         >
           {badge && (
-            <m.div variants={itemVariants}>
+            <div className="animate-hero-fade-in-up" style={{ animationDelay: '0.1s', animationFillMode: 'both' }}>
               <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
                 {badge}
               </Badge>
-            </m.div>
+            </div>
           )}
-          <m.div variants={itemVariants}>
-            <Heading level={1} size="section" variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
-              {title}
-            </Heading>
-          </m.div>
+            <div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.25s' : '0.1s', animationFillMode: 'both' }}>
+              <Heading level={1} size="section" variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
+                {title}
+              </Heading>
+            </div>
           {subtitle && (
-            <m.div variants={itemVariants}>
+            <div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.4s' : '0.25s', animationFillMode: 'both' }}>
               <p className={`text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl ${alignment === 'center' ? 'mx-auto' : ''}`}>
                 {subtitle}
               </p>
-            </m.div>
+            </div>
           )}
           {ctaLabel && ctaHref && (
-            <m.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`}>
+            <div className={`mt-8 animate-hero-fade-in-up ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`} style={{ animationDelay: badge ? '0.55s' : '0.4s', animationFillMode: 'both' }}>
               <Button
                 href={ctaHref}
                 variant="accent"
@@ -115,9 +90,9 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
                   &rarr;
                 </span>
               </Button>
-            </m.div>
+            </div>
           )}
-        </m.div>
+        </div>
       </Container>
     </section>
   );

components/blocks/HeroVideo.tsx

@@ -86,10 +86,14 @@ export function HeroVideo(props: HeroVideoProps) {
         src={posterSrc}
         alt={posterAlt}
         fill
-        className="object-cover z-[1] pointer-events-none filter contrast-125 saturate-110 brightness-90"
+        className="object-cover z-[1] pointer-events-none"
         sizes="100vw"
+        quality={25}
         priority
+        fetchPriority="high"
       />
+      {/* Fast compositing layer to replace the heavy CSS filters on the image */}
+      <div className="absolute inset-0 bg-black/20 z-[1] pointer-events-none mix-blend-multiply" />
 
       {/* Render video on top if available, but defer src to avoid blocking LCP */}
       {videoUrl && (
@@ -115,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/InteractiveGermanyMap.tsx

@@ -1,16 +1,20 @@
 'use client';
 
 import React, { useState, useRef, useCallback, useMemo } from 'react';
-import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
-import { MapPin, CheckCircle2, ArrowUpRight } from 'lucide-react';
+import { MapPin, ArrowUpRight } from 'lucide-react';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 import Link from 'next/link';
+import dynamic from 'next/dynamic';
 import { AnimatedGlossyBorder } from '@/components/ui/AnimatedGlossyBorder';
 import { Location, projectLocations } from '@/lib/map-data';
 import { standorteLocations } from '@/lib/standorte-data';
 import { useLocale, useTranslations } from 'next-intl';
 
+const InteractiveMapPins = dynamic(() => import('./InteractiveMapPins'), {
+  ssr: false,
+});
+
 interface Stat {
   value: string;
   suffix?: string;
@@ -28,58 +32,7 @@ interface InteractiveGermanyMapProps {
   hideStandorte?: boolean;
 }
 
-const MinorNode = React.memo(({ loc, isActive, onEnter, onLeave }: { loc: Location, isActive: boolean, onEnter: (loc: Location) => void, onLeave: () => void }) => (
-  <div
-    className={`absolute group/minor cursor-pointer w-8 h-8 md:w-5 md:h-5 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-10 hover:z-30'}`}
-    style={{
-      left: `${loc.x}%`,
-      top: `${loc.y}%`,
-      transform: 'translate(-50%, -50%)',
-    }}
-    onMouseEnter={() => onEnter(loc)}
-    onMouseLeave={onLeave}
-    onTouchStart={() => onEnter(loc)}
-    onClick={() => onEnter(loc)}
-  >
-    <div className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${isActive ? 'bg-white scale-150 shadow-[0_0_10px_rgba(130,237,32,1)]' : 'bg-primary/80 group-hover/minor:bg-white group-hover/minor:scale-150'}`} />
-    <div className="absolute inset-0 m-auto w-2 h-2 bg-primary rounded-full opacity-0 group-hover/minor:animate-ping" />
-  </div>
-));
-MinorNode.displayName = 'MinorNode';
 
-const MajorNode = React.memo(({ loc, isActive, idx, onEnter, onLeave }: { loc: Location, isActive: boolean, idx: number, onEnter: (loc: Location) => void, onLeave: () => void }) => {
-  const isHQ = loc.type === 'hq';
-  const isBranch = loc.type === 'branch';
-  return (
-    <div
-      className={`absolute transform -translate-x-1/2 -translate-y-1/2 group/pin cursor-pointer w-16 h-16 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-20 hover:z-40'}`}
-      style={{ left: `${loc.x}%`, top: `${loc.y}%` }}
-      onMouseEnter={() => onEnter(loc)}
-      onMouseLeave={onLeave}
-      onTouchStart={() => onEnter(loc)}
-      onClick={() => onEnter(loc)}
-    >
-      {(isHQ || isBranch) && (
-        <div className="absolute inset-0 m-auto w-6 h-6 rounded-full animate-ping bg-primary/50 scale-150" />
-      )}
-      <m.div
-        initial={{ scale: 0 }}
-        animate={{ scale: 1 }}
-        transition={{ type: 'spring', delay: idx * 0.1 }}
-        className={`relative flex items-center justify-center rounded-full shadow-[0_0_20px_rgba(130,237,32,0.6)] transition-transform duration-300 ${
-          isActive ? 'scale-125 z-30 ring-4 ring-primary/40' : 'scale-100 group-hover/pin:scale-110'
-        } ${
-          isHQ || isBranch
-            ? 'w-7 h-7 bg-primary text-[#050B14]'
-            : 'w-4 h-4 bg-white ring-[3px] ring-primary'
-        }`}
-      >
-        {(isHQ || isBranch) && <MapPin className="w-4 h-4" />}
-      </m.div>
-    </div>
-  );
-});
-MajorNode.displayName = 'MajorNode';
 
 export function InteractiveGermanyMap({
   badge,
@@ -135,12 +88,12 @@ export function InteractiveGermanyMap({
 
   const mapBackground = useMemo(() => (
     <div className="absolute inset-0 opacity-[0.25] mix-blend-screen drop-shadow-2xl brightness-200 pointer-events-none transform-gpu">
-      <Image
+      <img
         src="/germany-map.svg"
         alt={locale === 'en' ? "Map of Germany" : "Deutschlandkarte"}
-        fill
-        className="object-cover"
-        priority
+        className="w-full h-full object-cover"
+        fetchPriority="high"
+        decoding="async"
       />
     </div>
   ), [locale]);
@@ -210,116 +163,14 @@ export function InteractiveGermanyMap({
               
               {mapBackground}
 
-              {finalLocations.filter(l => l.type === 'minor_node').map((loc, idx) => (
-                <MinorNode
-                  key={`minor-${loc.id || idx}`}
-                  loc={loc}
-                  isActive={activeLocation === loc}
-                  onEnter={handleMouseEnter}
-                  onLeave={handleMouseLeave}
-                />
-              ))}
-
-              {finalLocations.filter(l => l.type !== 'minor_node').map((loc, idx) => (
-                <MajorNode
-                  key={loc.id}
-                  loc={loc}
-                  idx={idx}
-                  isActive={activeLocation?.id === loc.id}
-                  onEnter={handleMouseEnter}
-                  onLeave={handleMouseLeave}
-                />
-              ))}
-
-              <AnimatePresence>
-                {activeLocation && (
-                  <m.div
-                    key="tooltip"
-                    initial={{ opacity: 0, y: 10, scale: 0.95 }}
-                    animate={{ opacity: 1, y: 0, scale: 1 }}
-                    exit={{ opacity: 0, y: 10, scale: 0.95 }}
-                    transition={{ duration: 0.2 }}
-                    className="absolute z-[9999] pointer-events-auto bottom-[-60px] left-1/2 -translate-x-1/2 w-[calc(100vw_-_2rem)] max-w-[320px] md:w-max md:bottom-auto md:left-[var(--md-left)] md:top-[var(--md-top)] md:[transform:var(--md-transform)]"
-                    style={{
-                      '--md-left': `${activeLocation.x}%`,
-                      '--md-top': `${activeLocation.y}%`,
-                      '--md-transform': activeLocation.x < 50 ? 'translate(20px, -50%)' : 'translate(calc(-100% - 20px), -50%)',
-                    } as React.CSSProperties}
-                    onMouseEnter={() => handleMouseEnter(activeLocation)}
-                    onMouseLeave={handleMouseLeave}
-                  >
-                    <div className="bg-[#050B14]/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl w-full text-white overflow-hidden">
-                      {activeLocation.featuredImage && (
-                        <div className="relative w-full h-32 bg-neutral-900">
-                          <Image
-                            src={activeLocation.featuredImage}
-                            alt={activeLocation.name}
-                            fill
-                            className="object-cover"
-                          />
-                          <div className="absolute inset-0 bg-gradient-to-t from-[#050B14] to-transparent opacity-90" />
-                        </div>
-                      )}
-
-                      <div className="p-4">
-                        <div className="flex items-center gap-2 mb-1">
-                          <MapPin className="w-3.5 h-3.5 text-primary" />
-                          <span className="text-xs font-bold text-primary uppercase tracking-wider">
-                            {t(`types.${activeLocation.type === 'minor_node' ? 'project' : activeLocation.type}`)}
-                          </span>
-                        </div>
-                        <div className="font-heading font-bold text-lg leading-tight mb-2">
-                          {activeLocation.name}
-                        </div>
-                        {activeLocation.type !== 'minor_node' ? (
-                          <div className="text-white/60 text-sm line-clamp-3 mb-3">
-                            {activeLocation.description}
-                          </div>
-                        ) : (
-                          <div className="text-white/60 text-xs mb-3">
-                            {t(`descriptions.${['wind','pv','fiber','power','battery'].includes(activeLocation.description || '') ? activeLocation.description : 'default'}`)}
-                          </div>
-                        )}
-                        
-                        {(activeLocation.details || activeLocation.type === 'minor_node') && (
-                          <ul className="mb-3 space-y-1.5 border-t border-white/10 pt-3">
-                            {activeLocation.type === 'minor_node' ? (
-                              <>
-                                <li className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
-                                  <CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
-                                  <span>{t(`features.${['wind','pv','fiber','power','battery'].includes(activeLocation.description || '') ? activeLocation.description : 'default'}`)}</span>
-                                </li>
-                                <li className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
-                                  <CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
-                                  <span>{t('features.method')}</span>
-                                </li>
-                              </>
-                            ) : (
-                              activeLocation.details?.map((detail, i) => (
-                                <li key={i} className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
-                                  <CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
-                                  <span>{detail}</span>
-                                </li>
-                              ))
-                            )}
-                          </ul>
-                        )}
-
-                        {activeLocation.href && (activeLocation.type === 'hq' || activeLocation.type === 'branch') && (
-                          <Link 
-                            href={activeLocation.href.startsWith('/') ? `/${locale}${activeLocation.href}` : activeLocation.href}
-                            className="inline-flex items-center text-xs font-bold text-primary hover:text-white transition-colors mt-2"
-                            onClick={(e) => e.stopPropagation()}
-                          >
-                            {t('learnMore')}
-                            <ArrowUpRight className="w-3.5 h-3.5 ml-1" />
-                          </Link>
-                        )}
-                      </div>
-                    </div>
-                  </m.div>
-                )}
-              </AnimatePresence>
+              <InteractiveMapPins
+                locations={finalLocations}
+                locale={locale}
+                t={t}
+                activeLocation={activeLocation}
+                handleMouseEnter={handleMouseEnter}
+                handleMouseLeave={handleMouseLeave}
+              />
             </div>
           </div>
         </div>

components/blocks/InteractiveMapPins.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import React from 'react';
+import { m, AnimatePresence, LazyMotion } from 'framer-motion';
+import { MapPin, CheckCircle2, ArrowUpRight } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Location } from '@/lib/map-data';
+
+const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
+
+const MinorNode = React.memo(({ loc, isActive, onEnter, onLeave }: { loc: Location, isActive: boolean, onEnter: (loc: Location) => void, onLeave: () => void }) => (
+  <div
+    className={`absolute group/minor cursor-pointer w-8 h-8 md:w-5 md:h-5 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-10 hover:z-30'}`}
+    style={{
+      left: `${loc.x}%`,
+      top: `${loc.y}%`,
+      transform: 'translate(-50%, -50%)',
+    }}
+    onMouseEnter={() => onEnter(loc)}
+    onMouseLeave={onLeave}
+    onTouchStart={() => onEnter(loc)}
+    onClick={() => onEnter(loc)}
+  >
+    <div className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${isActive ? 'bg-white scale-150 shadow-[0_0_10px_rgba(130,237,32,1)]' : 'bg-primary/80 group-hover/minor:bg-white group-hover/minor:scale-150'}`} />
+    <div className="absolute inset-0 m-auto w-2 h-2 bg-primary rounded-full opacity-0 group-hover/minor:animate-ping" />
+  </div>
+));
+MinorNode.displayName = 'MinorNode';
+
+const MajorNode = React.memo(({ loc, isActive, idx, onEnter, onLeave }: { loc: Location, isActive: boolean, idx: number, onEnter: (loc: Location) => void, onLeave: () => void }) => {
+  const isHQ = loc.type === 'hq';
+  const isBranch = loc.type === 'branch';
+  return (
+    <div
+      className={`absolute transform -translate-x-1/2 -translate-y-1/2 group/pin cursor-pointer w-16 h-16 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-20 hover:z-40'}`}
+      style={{ left: `${loc.x}%`, top: `${loc.y}%` }}
+      onMouseEnter={() => onEnter(loc)}
+      onMouseLeave={onLeave}
+      onTouchStart={() => onEnter(loc)}
+      onClick={() => onEnter(loc)}
+    >
+      {(isHQ || isBranch) && (
+        <div className="absolute inset-0 m-auto w-6 h-6 rounded-full animate-ping bg-primary/50 scale-150" />
+      )}
+      <m.div
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ type: 'spring', delay: idx * 0.1 }}
+        className={`relative flex items-center justify-center rounded-full shadow-[0_0_20px_rgba(130,237,32,0.6)] transition-transform duration-300 ${
+          isActive ? 'scale-125 z-30 ring-4 ring-primary/40' : 'scale-100 group-hover/pin:scale-110'
+        } ${
+          isHQ || isBranch
+            ? 'w-7 h-7 bg-primary text-[#050B14]'
+            : 'w-4 h-4 bg-white ring-[3px] ring-primary'
+        }`}
+      >
+        {(isHQ || isBranch) && <MapPin className="w-4 h-4" />}
+      </m.div>
+    </div>
+  );
+});
+MajorNode.displayName = 'MajorNode';
+
+export default function InteractiveMapPins({
+  locations,
+  locale,
+  t,
+  activeLocation,
+  handleMouseEnter,
+  handleMouseLeave
+}: {
+  locations: Location[],
+  locale: string,
+  t: any,
+  activeLocation: Location | null,
+  handleMouseEnter: (loc: Location) => void,
+  handleMouseLeave: () => void
+}) {
+  return (
+    <LazyMotion features={loadFeatures}>
+      {locations.filter(l => l.type === 'minor_node').map((loc, idx) => (
+        <MinorNode
+          key={`minor-${loc.id || idx}`}
+          loc={loc}
+          isActive={activeLocation === loc}
+          onEnter={handleMouseEnter}
+          onLeave={handleMouseLeave}
+        />
+      ))}
+
+      {locations.filter(l => l.type !== 'minor_node').map((loc, idx) => (
+        <MajorNode
+          key={loc.id}
+          loc={loc}
+          idx={idx}
+          isActive={activeLocation?.id === loc.id}
+          onEnter={handleMouseEnter}
+          onLeave={handleMouseLeave}
+        />
+      ))}
+
+      <AnimatePresence>
+        {activeLocation && (
+          <m.div
+            key="tooltip"
+            initial={{ opacity: 0, y: 10, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 10, scale: 0.95 }}
+            transition={{ duration: 0.2 }}
+            className="absolute z-[9999] pointer-events-auto bottom-[-60px] left-1/2 -translate-x-1/2 w-[calc(100vw_-_2rem)] max-w-[320px] md:w-max md:bottom-auto md:left-[var(--md-left)] md:top-[var(--md-top)] md:[transform:var(--md-transform)]"
+            style={{
+              '--md-left': `${activeLocation.x}%`,
+              '--md-top': `${activeLocation.y}%`,
+              '--md-transform': activeLocation.x < 50 ? 'translate(20px, -50%)' : 'translate(calc(-100% - 20px), -50%)',
+            } as React.CSSProperties}
+            onMouseEnter={() => handleMouseEnter(activeLocation)}
+            onMouseLeave={handleMouseLeave}
+          >
+            <div className="bg-[#050B14]/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl w-full text-white overflow-hidden">
+              {activeLocation.featuredImage && (
+                <div className="relative w-full h-32 bg-neutral-900">
+                  <Image
+                    src={activeLocation.featuredImage}
+                    alt={activeLocation.name}
+                    fill
+                    className="object-cover"
+                    sizes="(max-width: 768px) 100vw, 320px"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-[#050B14] to-transparent opacity-90" />
+                </div>
+              )}
+
+              <div className="p-4">
+                <div className="flex items-center gap-2 mb-1">
+                  <MapPin className="w-3.5 h-3.5 text-primary" />
+                  <span className="text-xs font-bold text-primary uppercase tracking-wider">
+                    {t(`types.${activeLocation.type === 'minor_node' ? 'project' : activeLocation.type}`)}
+                  </span>
+                </div>
+                <div className="font-heading font-bold text-lg leading-tight mb-2">
+                  {activeLocation.name}
+                </div>
+                {activeLocation.type !== 'minor_node' ? (
+                  <div className="text-white/60 text-sm line-clamp-3 mb-3">
+                    {activeLocation.description}
+                  </div>
+                ) : (
+                  <div className="text-white/60 text-xs mb-3">
+                    {t(`descriptions.${['wind','pv','fiber','power','battery'].includes(activeLocation.description || '') ? activeLocation.description : 'default'}`)}
+                  </div>
+                )}
+                
+                {(activeLocation.details || activeLocation.type === 'minor_node') && (
+                  <ul className="mb-3 space-y-1.5 border-t border-white/10 pt-3">
+                    {activeLocation.type === 'minor_node' ? (
+                      <>
+                        <li className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
+                          <CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
+                          <span>{t(`features.${['wind','pv','fiber','power','battery'].includes(activeLocation.description || '') ? activeLocation.description : 'default'}`)}</span>
+                        </li>
+                        <li className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
+                          <CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
+                          <span>{t('features.method')}</span>
+                        </li>
+                      </>
+                    ) : (
+                      activeLocation.details?.map((detail, i) => (
+                        <li key={i} className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
+                          <CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
+                          <span>{detail}</span>
+                        </li>
+                      ))
+                    )}
+                  </ul>
+                )}
+
+                {activeLocation.href && (activeLocation.type === 'hq' || activeLocation.type === 'branch') && (
+                  <Link 
+                    href={activeLocation.href.startsWith('/') ? `/${locale}${activeLocation.href}` : activeLocation.href}
+                    className="inline-flex items-center text-xs font-bold text-primary hover:text-white transition-colors mt-2"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {t('learnMore')}
+                    <ArrowUpRight className="w-3.5 h-3.5 ml-1" />
+                  </Link>
+                )}
+              </div>
+            </div>
+          </m.div>
+        )}
+      </AnimatePresence>
+    </LazyMotion>
+  );
+}

components/blocks/JobListingBlock.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import Link from 'next/link';
 import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import { m } from 'framer-motion';
 import { useTranslations } from 'next-intl';
 
 export interface JobListingBlockProps {
@@ -53,7 +53,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
     showFairs,
     fairsTitle = t('fairsTitle'),
     fairs = [
-      { name: 'Intersolar München', date: 'Termin folgt', type: 'Energie-Messe', location: 'Messe München' },
+      { name: 'Intersolar München', date: '8. - 10. Juni 2027', type: 'Energie-Messe', location: 'Messe München' },
       { name: 'Windenergietage Linstow', date: 'Termin folgt', type: 'Fachkongress', location: 'Linstow' },
       { name: 'Kabelwerkstatt Wiesbaden', date: 'Termin folgt', type: 'Fachmesse', location: 'Wiesbaden' }
     ],
@@ -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

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import { m } from 'framer-motion';
 import Link from 'next/link';
 import Image from 'next/image';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
@@ -46,7 +46,8 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
   const scrollLeftRef = React.useRef(0);
   const isDraggingRef = React.useRef(false);
   const [isDragging, setIsDragging] = React.useState(false);
-  
+
+
   const badge = props.badge || data?.badge || t('badge');
   const title = props.title || data?.title || t('title');
   const description = props.description || data?.description || t('description');
@@ -97,85 +98,88 @@ 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 md:flex-row justify-between items-start md:items-end gap-6">
-        <div className="text-left">
+      <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>
         </div>
-        <div className="text-left max-w-3xl mx-auto md:mx-0 mb-8 md:mb-16">
+        <div className="max-w-3xl mx-auto mb-4 md:mb-8 text-neutral-300">
           {description}
         </div>
       </div>
 
-      <div className="container relative z-10">
-        <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
+      <div className="relative z-10">
+        {/* Fade edges for peek effect */}
+        <div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-neutral-dark to-transparent z-20 pointer-events-none" />
+        <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 pointer-events-none" />
         
-        {/* Carousel: stays inside container for left alignment, breaks right to viewport edge */}
-        <div 
-          ref={containerRef}
-          onMouseDown={onMouseDown}
-          onMouseLeave={onMouseLeave}
-          onMouseUp={onMouseUp}
-          onMouseMove={onMouseMove}
-          style={{ marginRight: 'calc(-50vw + 50%)' }}
-          className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
-        >
-          {references.map((ref, i) => {
-            const imgSrc = ref.image 
-              ? (typeof ref.image === 'string' ? ref.image : ref.image.url) 
-              : fallbacks[i % fallbacks.length];
+        {/* Carousel: centered first card with peek on both sides */}
 
-            return (
-              <LazyMotion key={ref.id} features={domAnimation}>
+          <div 
+            ref={containerRef}
+            onMouseDown={onMouseDown}
+            onMouseLeave={onMouseLeave}
+            onMouseUp={onMouseUp}
+            onMouseMove={onMouseMove}
+            className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 px-[calc(50vw-160px)] md:px-[calc(50vw-240px)] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
+          >
+            {references.map((ref, i) => {
+              const imgSrc = ref.image 
+                ? (typeof ref.image === 'string' ? ref.image : ref.image.url) 
+                : fallbacks[i % fallbacks.length];
+
+              return (
                 <m.div
+                  key={ref.id}
+                  data-card
                   initial={{ opacity: 0, x: 20 }}
                   whileInView={{ opacity: 1, x: 0 }}
                   viewport={{ once: true, margin: "-50px" }}
                   transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
-                  className="flex-shrink-0 w-[320px] md:w-[480px] snap-start group pointer-events-auto"
+                  className="flex-shrink-0 w-[320px] md:w-[480px] snap-center group pointer-events-auto"
                 >
                   <Link
-                  href={`/${locale}/referenzen#${ref.slug}`}
-                  onClick={(e) => {
-                    if (dragDistanceRef.current > 5) {
-                      e.preventDefault();
-                      e.stopPropagation();
-                    }
-                  }}
-                  onDragStart={(e) => e.preventDefault()}
-                  draggable={false}
-                  data-testid="reference-tile"
-                  className="block relative select-none aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl cursor-pointer"
-                >
-                  <Image
+                    href={`/${locale}/referenzen#${ref.slug}`}
+                    onClick={(e) => {
+                      if (dragDistanceRef.current > 5) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                      }
+                    }}
+                    onDragStart={(e) => e.preventDefault()}
                     draggable={false}
-                    src={imgSrc}
-                    alt={ref.title}
-                    fill
-                    sizes="(max-width: 768px) 320px, 480px"
-                    className="object-cover saturate-50 opacity-70 group-hover:scale-105 group-hover:opacity-100 group-hover:saturate-100 transition-all duration-700 ease-in-out pointer-events-none"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300 pointer-events-none" />
-                  
-                  <HoverShineOverlay />
-                  
-                  <div className="absolute bottom-6 left-6 right-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 pointer-events-none bg-black/60 backdrop-blur-sm p-4 rounded-xl border border-white/10">
-                    <span className="inline-block py-1 px-3 rounded-full bg-primary/20 text-white text-[10px] font-bold uppercase tracking-widest mb-2 border border-primary/30">
-                      {ref.category}
-                    </span>
-                    <h4 className="font-heading text-xl md:text-2xl font-bold leading-tight break-words">{ref.title}</h4>
-                  </div>
-                </Link>
+                    data-testid="reference-tile"
+                    className="block relative select-none aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl cursor-pointer"
+                  >
+                    <Image
+                      draggable={false}
+                      src={imgSrc}
+                      alt={ref.title}
+                      fill
+                      quality={50}
+                      sizes="(max-width: 768px) 320px, 480px"
+                      className="object-cover saturate-50 opacity-70 group-hover:scale-105 group-hover:opacity-100 group-hover:saturate-100 transition-all duration-700 ease-in-out pointer-events-none"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300 pointer-events-none" />
+                    
+                    <HoverShineOverlay />
+                    
+                    <div className="absolute bottom-6 left-6 right-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 pointer-events-none bg-black/60 backdrop-blur-sm p-4 rounded-xl border border-white/10">
+                      <span className="inline-block py-1 px-3 rounded-full bg-primary/20 text-white text-[10px] font-bold uppercase tracking-widest mb-2 border border-primary/30">
+                        {ref.category}
+                      </span>
+                      <h4 className="font-heading text-xl md:text-2xl font-bold leading-tight break-words">{ref.title}</h4>
+                    </div>
+                  </Link>
                 </m.div>
-              </LazyMotion>
-            );
-          })}
-          {/* Right padding spacer so last card doesn't clip at viewport edge */}
-          <div className="flex-shrink-0 w-6" aria-hidden="true" />
-        </div>
+              );
+            })}
+
+          </div>
+
       </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/ScaleOfImpact.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useRef } from 'react';
-import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
+import { useScroll, useTransform, m } from 'framer-motion';
 import { useLocale } from 'next-intl';
 
 export function ScaleOfImpact() {

components/blocks/ServiceDetailGrid.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
+import { m, Variants } from 'framer-motion';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 
 export interface ServicePanelData {

components/blocks/SubCompanyTiles.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
+import { m, Variants } from 'framer-motion';
 import Image from 'next/image';
 import Link from 'next/link';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
@@ -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">
@@ -128,7 +128,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
                         ? 'opacity-30 grayscale-0 scale-105' 
                         : 'opacity-40 grayscale-[50%] group-hover:opacity-30 group-hover:grayscale-0 group-hover:scale-110'
                     }`}
-                    sizes="(max-width: 768px) 100vw, 33vw"
+                    sizes="(max-width: 768px) 200px, 384px"
                   />
                 </div>
                   

components/blocks/SupportCTA.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import TrackedLink from '@/components/analytics/TrackedLink';
 import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import { m } from 'framer-motion';
 
 export interface SupportCTAProps {
   title: string;

components/blocks/TeamGrid.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import { m } from 'framer-motion';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 
@@ -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/decorations/CorporateBackground.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useRef, useEffect } from 'react';
-import { useScroll, useTransform, useSpring, m, LazyMotion, domAnimation } from 'framer-motion';
+import { useScroll, useTransform, useSpring, m } from 'framer-motion';
 import { LogoArcs } from '@/components/ui/LogoArcs';
 
 function MagneticRing({ 
@@ -25,34 +25,45 @@ function MagneticRing({
     // Only run on client with mouse
     if (window.matchMedia("(pointer: coarse)").matches) return;
 
+    let ticking = false;
+
     const handleMouseMove = (e: MouseEvent) => {
       if (!ref.current) return;
-      const rect = ref.current.getBoundingClientRect();
-      const centerX = rect.left + rect.width / 2;
-      const centerY = rect.top + rect.height / 2;
+      
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          if (!ref.current) {
+            ticking = false;
+            return;
+          }
+          
+          const rect = ref.current.getBoundingClientRect();
+          const centerX = rect.left + rect.width / 2;
+          const centerY = rect.top + rect.height / 2;
 
-      const distX = e.clientX - centerX;
-      const distY = e.clientY - centerY;
-      const distance = Math.sqrt(distX * Math.pow(distX, 2) + Math.pow(distY, 2)); // Fix: correct pythagoras
+          const distX = e.clientX - centerX;
+          const distY = e.clientY - centerY;
+          const actualDistance = Math.sqrt(distX * distX + distY * distY);
 
-      // Calculate actual distance correctly
-      const actualDistance = Math.sqrt(distX * distX + distY * distY);
-
-      if (actualDistance < pullRadius) {
-        // Exponential falloff for natural magnetic feel
-        const pullFactor = Math.pow(1 - (actualDistance / pullRadius), 2);
-        
-        // Target offset (fraction of the distance based on strength)
-        x.set(distX * pullFactor * (pullStrength / 100));
-        y.set(distY * pullFactor * (pullStrength / 100));
-      } else {
-        // Return to origin smoothly
-        x.set(0);
-        y.set(0);
+          if (actualDistance < pullRadius) {
+            // Exponential falloff for natural magnetic feel
+            const pullFactor = Math.pow(1 - (actualDistance / pullRadius), 2);
+            
+            // Target offset (fraction of the distance based on strength)
+            x.set(distX * pullFactor * (pullStrength / 100));
+            y.set(distY * pullFactor * (pullStrength / 100));
+          } else {
+            // Return to origin smoothly
+            x.set(0);
+            y.set(0);
+          }
+          ticking = false;
+        });
+        ticking = true;
       }
     };
     
-    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mousemove', handleMouseMove, { passive: true });
     return () => window.removeEventListener('mousemove', handleMouseMove);
   }, [x, y, pullRadius, pullStrength]);
 

components/decorations/DynamicCorporateBackground.tsx

@@ -0,0 +1,7 @@
+'use client';
+import dynamic from 'next/dynamic';
+
+export const DynamicCorporateBackground = dynamic(
+  () => import('./CorporateBackground').then(mod => mod.CorporateBackground),
+  { ssr: false }
+);

components/decorations/EUFundingBadge.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import { m } from 'framer-motion';
 import Image from 'next/image';
 
 export function EUFundingBadge() {

components/forms/ContactForm.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import { m } from 'framer-motion';
 import { Button } from '@/components/ui/Button';
 import { sendContactFormAction } from '@/app/actions/contact';
 

components/layout/DynamicMobileBottomNav.tsx

@@ -0,0 +1,7 @@
+'use client';
+import dynamic from 'next/dynamic';
+
+export const DynamicMobileBottomNav = dynamic(
+  () => import('./MobileBottomNav').then(mod => mod.MobileBottomNav),
+  { ssr: false }
+);

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>

components/layout/Header.tsx

@@ -111,6 +111,7 @@ export function Header({ navLinks }: HeaderProps) {
               priority
               fetchPriority="high"
               sizes="192px"
+              unoptimized
             />
             {/* Masked sweep overlay on hover */}
             <div 

components/layout/MobileBottomNav.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { usePathname } from 'next/navigation';
 import { TransitionLink } from '@/components/ui/TransitionLink';
 import { Home, Layers, Star, Mail, Menu } from 'lucide-react';
-import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
+import { m, AnimatePresence } from 'framer-motion';
 
 export interface NavLink {
   label: string;

components/providers/DynamicFramerMotion.tsx

@@ -0,0 +1,7 @@
+'use client';
+import dynamic from 'next/dynamic';
+
+export const DynamicFramerMotion = dynamic(
+  () => import('./FramerMotionProvider').then((mod) => mod.FramerMotionProvider),
+  { ssr: true }
+);

components/providers/DynamicInitialLoader.tsx

@@ -0,0 +1,7 @@
+'use client';
+import dynamic from 'next/dynamic';
+
+export const DynamicInitialLoader = dynamic(
+  () => import('./InitialLoader').then(mod => mod.InitialLoader),
+  { ssr: false }
+);

components/providers/DynamicPageTransitionShutter.tsx

@@ -0,0 +1,7 @@
+'use client';
+import dynamic from 'next/dynamic';
+
+export const DynamicPageTransitionShutter = dynamic(
+  () => import('./PageTransitionShutter').then(mod => mod.PageTransitionShutter),
+  { ssr: false }
+);

components/providers/FramerMotionProvider.tsx

@@ -0,0 +1,11 @@
+'use client';
+import { LazyMotion } from 'framer-motion';
+const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
+
+export function FramerMotionProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <LazyMotion features={loadFeatures} strict>
+      {children}
+    </LazyMotion>
+  );
+}

components/providers/InitialLoader.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
+import { m, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 
 

components/providers/PageTransitionShutter.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
+import { m, AnimatePresence } from 'framer-motion';
 import { useTransition } from './TransitionProvider';
 import Image from 'next/image';
 

components/providers/TransitionProvider.tsx

@@ -2,7 +2,6 @@
 
 import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
-import { LazyMotion, domAnimation } from 'framer-motion';
 
 interface TransitionContextType {
   isTransitioning: boolean;
@@ -69,9 +68,7 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
           setTransitionMessage={setTransitionMessage}
         />
       </React.Suspense>
-      <LazyMotion features={domAnimation}>
-        {children}
-      </LazyMotion>
+      {children}
     </TransitionContext.Provider>
   );
 }

components/ui/AnimatedCounter.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { useMotionValue, useTransform, animate, useInView, m, LazyMotion, domAnimation } from 'framer-motion';
+import { useMotionValue, useTransform, animate, useInView, m } from 'framer-motion';
 
 interface AnimatedCounterProps {
   value: number;

components/ui/TransitionLink.tsx

@@ -37,7 +37,7 @@ export function TransitionLink({ children, href, onClick, transitionMessage, ...
   };
 
   return (
-    <Link href={href} onClick={handleClick} className={cn('cursor-pointer', props.className)} {...props}>
+    <Link href={href} onClick={handleClick} prefetch={props.prefetch ?? false} className={cn('cursor-pointer', props.className)} {...props}>
       {children}
     </Link>
   );

components/ui/decorations/StratumLines.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useInView, m, LazyMotion, domAnimation } from 'framer-motion';
+import { useInView, m } from 'framer-motion';
 import { useRef } from 'react';
 
 /**

content/de/home.mdx

@@ -88,7 +88,7 @@ description: "Die E-TIB GmbH ist Ihr zuverlässiger Partner für komplexe Kabelt
       {/* Right Column: Imagery & Mission */}
       <div className="lg:col-span-7 relative">
         <div className="aspect-[4/3] md:aspect-[16/9] lg:aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl relative border border-neutral-200/50">
-          <img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB im Einsatz" className="w-full h-full object-cover" loading="lazy" decoding="async" />
+          <ResponsiveImage src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB im Einsatz" className="w-full h-full object-cover" loading="lazy" decoding="async" />
           <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/40 to-transparent"></div>
           
           <div className="absolute bottom-0 left-0 w-full p-8 md:p-12">

content/de/messen.mdx

@@ -20,9 +20,9 @@ layout: "fullBleed"
     showFairs={true} 
     showJobs={false} 
     fairs={[
-      { name: 'Intersolar München', date: '23. - 25. Juni 2026', type: 'Messe', location: 'München', url: 'https://www.intersolar.de/' },
       { name: 'Windenergietage Linstow', date: '10. - 12. November 2026', type: 'Fachkongress', location: 'Linstow', url: 'https://www.windenergietage.de/' },
-      { name: 'Werkstatt Kabel 2026', date: '24. - 25. November 2026', type: 'Fachtagung', location: 'Wiesbaden', url: 'https://werkstatt-kabel.essociation.de/' }
+      { name: 'Werkstatt Kabel 2026', date: '24. - 25. November 2026', type: 'Fachtagung', location: 'Wiesbaden', url: 'https://werkstatt-kabel.essociation.de/' },
+      { name: 'Intersolar München', date: '8. - 10. Juni 2027', type: 'Messe', location: 'München', url: 'https://www.intersolar.de/' }
     ]}
   />
 </div>

content/de/team.mdx

@@ -23,6 +23,14 @@ layout: "fullBleed"
       phone: "+49 1520 7230518",
       image: "/assets/photos/team/danny.jpg"
     },
+    {
+      id: "kathrin-lemanski",
+      name: "Kathrin Lemanski",
+      position: "Kaufmännische Leitung",
+      email: "k.lemanski@e-tib.com",
+      phone: "+49 3561 6857733",
+      image: "/assets/photos/team/kathrin.jpg"
+    },
     {
       id: "dirk-schmidt",
       name: "Dirk Schmidt",
@@ -47,22 +55,6 @@ layout: "fullBleed"
       phone: "+49 171 3868167",
       image: "/assets/photos/team/martin.jpg"
     },
-    {
-      id: "kerstin-joseph",
-      name: "Kerstin Joseph",
-      position: "Sekretariat / Buchhaltung",
-      email: "k.joseph@e-tib.com",
-      phone: "+49 3561 6851692",
-      image: "/assets/photos/team/kerstin.jpg"
-    },
-    {
-      id: "kathrin-lemanski",
-      name: "Kathrin Lemanski",
-      position: "Sachbearbeitung",
-      email: "k.lemanski@e-tib.com",
-      phone: "+49 3561 6857733",
-      image: "/assets/photos/team/kathrin.jpg"
-    },
     {
       id: "sven-kirbs",
       name: "Sven Kirbs",
@@ -71,6 +63,21 @@ layout: "fullBleed"
       phone: "+49 151 29603652",
       image: "/assets/photos/team/sven.jpg"
     },
+    {
+      id: "kerstin-joseph",
+      name: "Kerstin Joseph",
+      position: "Buchhaltung / Controlling",
+      email: "k.joseph@e-tib.com",
+      phone: "+49 3561 6857733",
+      image: "/assets/photos/team/kerstin.jpg"
+    },
+    {
+      id: "katrin-haigold",
+      name: "Katrin Haigold",
+      position: "Buchhaltung / Personalwesen",
+      email: "k.haigold@e-tib.com",
+      phone: "+49 3561 6851692"
+    },
     {
       id: "maik-weichert",
       name: "Maik Weichert",

content/en/home.mdx

@@ -88,7 +88,7 @@ description: "E-TIB GmbH is your reliable partner for complex cable routes, hori
       {/* Right Column: Imagery & Mission */}
       <div className="lg:col-span-7 relative">
         <div className="aspect-[4/3] md:aspect-[16/9] lg:aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl relative border border-neutral-200/50">
-          <img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB in action" className="w-full h-full object-cover" loading="lazy" decoding="async" />
+          <ResponsiveImage src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB in action" className="w-full h-full object-cover" loading="lazy" decoding="async" />
           <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/40 to-transparent"></div>
           
           <div className="absolute bottom-0 left-0 w-full p-8 md:p-12">

content/en/messen.mdx

@@ -20,9 +20,9 @@ layout: "fullBleed"
     showFairs={true} 
     showJobs={false} 
     fairs={[
-      { name: 'Intersolar Munich', date: 'June 23–25, 2026', type: 'Fair', location: 'Munich', url: 'https://www.intersolar.de/' },
       { name: 'Wind Energy Days Linstow', date: 'November 10–12, 2026', type: 'Specialist Congress', location: 'Linstow', url: 'https://www.windenergietage.de/' },
-      { name: 'Werkstatt Kabel 2026', date: 'November 24–25, 2026', type: 'Symposium', location: 'Wiesbaden', url: 'https://werkstatt-kabel.essociation.de/' }
+      { name: 'Werkstatt Kabel 2026', date: 'November 24–25, 2026', type: 'Symposium', location: 'Wiesbaden', url: 'https://werkstatt-kabel.essociation.de/' },
+      { name: 'Intersolar Munich', date: 'June 8–10, 2027', type: 'Fair', location: 'Munich', url: 'https://www.intersolar.de/' }
     ]}
   />
 </div>

content/en/team.mdx

@@ -23,6 +23,14 @@ layout: "fullBleed"
       phone: "+49 1520 7230518",
       image: "/assets/photos/team/danny.jpg"
     },
+    {
+      id: "kathrin-lemanski",
+      name: "Kathrin Lemanski",
+      position: "Commercial Management",
+      email: "k.lemanski@e-tib.com",
+      phone: "+49 3561 6857733",
+      image: "/assets/photos/team/kathrin.jpg"
+    },
     {
       id: "dirk-schmidt",
       name: "Dirk Schmidt",
@@ -47,22 +55,6 @@ layout: "fullBleed"
       phone: "+49 171 3868167",
       image: "/assets/photos/team/martin.jpg"
     },
-    {
-      id: "kerstin-joseph",
-      name: "Kerstin Joseph",
-      position: "Secretariat / Accounting",
-      email: "k.joseph@e-tib.com",
-      phone: "+49 3561 6851692",
-      image: "/assets/photos/team/kerstin.jpg"
-    },
-    {
-      id: "kathrin-lemanski",
-      name: "Kathrin Lemanski",
-      position: "Administration",
-      email: "k.lemanski@e-tib.com",
-      phone: "+49 3561 6857733",
-      image: "/assets/photos/team/kathrin.jpg"
-    },
     {
       id: "sven-kirbs",
       name: "Sven Kirbs",
@@ -71,6 +63,21 @@ layout: "fullBleed"
       phone: "+49 151 29603652",
       image: "/assets/photos/team/sven.jpg"
     },
+    {
+      id: "kerstin-joseph",
+      name: "Kerstin Joseph",
+      position: "Accounting / Controlling",
+      email: "k.joseph@e-tib.com",
+      phone: "+49 3561 6857733",
+      image: "/assets/photos/team/kerstin.jpg"
+    },
+    {
+      id: "katrin-haigold",
+      name: "Katrin Haigold",
+      position: "Accounting / Human Resources",
+      email: "k.haigold@e-tib.com",
+      phone: "+49 3561 6851692"
+    },
     {
       id: "maik-weichert",
       name: "Maik Weichert",

docker-compose.yml

@@ -27,7 +27,7 @@ services:
       - "traefik.http.routers.${PROJECT_NAME:-klz}.middlewares=${AUTH_MIDDLEWARE:-etib-ratelimit,etib-forward,etib-compress}"
 
       # Public Router – paths that bypass Gatekeeper auth (health, SEO, static assets, OG images)
-      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-e-tib.com}`) || Host(`staging.${TRAEFIK_HOST:-e-tib.com}`) || Host(`testing.${TRAEFIK_HOST:-e-tib.com}`)}) && PathRegexp(`^/([a-z]{2}/)?(health|login|gatekeeper|uploads|media|robots\\.txt|manifest\\.webmanifest|sitemap(-[0-9]+)?\\.xml|(.*/)?api/og(/.*)?|(.*/)?opengraph-image.*)`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-e-tib.com}`) || Host(`staging.${TRAEFIK_HOST:-e-tib.com}`) || Host(`testing.${TRAEFIK_HOST:-e-tib.com}`)}) && PathRegexp(`^/([a-z]{2}/)?(health|login|gatekeeper|uploads|media|assets|robots\\.txt|manifest\\.webmanifest|sitemap(-[0-9]+)?\\.xml|(.*/)?api/og(/.*)?|(.*/)?opengraph-image.*)`)"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-public.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-public.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-public.tls=${TRAEFIK_TLS:-false}"

dummy-polyfill.js

@@ -0,0 +1 @@
+export default {};

instrumentation-client.ts

@@ -1,5 +1,5 @@
 // Sentry initialization move to GlitchtipErrorReportingService to allow lazy-loading
 // for PageSpeed 100 optimizations. This file is now empty to prevent the SDK
 // from being included in the initial JS bundle.
-import * as Sentry from '@sentry/nextjs';
-export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
+
+export {};

lib/empty-polyfill.js

@@ -0,0 +1,2 @@
+// Empty polyfill to trick Next.js into not loading legacy polyfills
+export default {};

lib/og-helper.tsx

@@ -5,7 +5,9 @@ import { join } from 'path';
  * Loads the Inter fonts for use in Satori (Next.js OG Image generation).
  * Since we are using runtime = 'nodejs', we can read them from the filesystem.
  */
+let cachedFonts: any[] | null = null;
 export async function getOgFonts() {
+  if (cachedFonts) return cachedFonts;
   const boldFontPath = join(process.cwd(), 'public/fonts/Inter-Bold.woff');
   const regularFontPath = join(process.cwd(), 'public/fonts/Inter-Regular.woff');
 
@@ -28,7 +30,7 @@ export async function getOgFonts() {
       `[OG] Fonts loaded successfully (${boldFont.byteLength} and ${regularFont.byteLength} bytes)`,
     );
 
-    return [
+    cachedFonts = [
       {
         name: 'Inter',
         data: boldFont,
@@ -42,28 +44,35 @@ export async function getOgFonts() {
         style: 'normal' as const,
       },
     ];
+    return cachedFonts;
   } catch (error) {
     console.error(`[OG] Failed to load fonts from ${process.cwd()}:`, error);
     return [];
   }
 }
 
+let cachedBackground: string | null = null;
 export function getOgBackground() {
+  if (cachedBackground) return cachedBackground;
   try {
     const bgPath = join(process.cwd(), 'public/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg');
     const bgBase64 = readFileSync(bgPath, 'base64');
-    return `data:image/jpeg;base64,${bgBase64}`;
+    cachedBackground = `data:image/jpeg;base64,${bgBase64}`;
+    return cachedBackground;
   } catch (err) {
     console.error('[OG] Failed to load background', err);
     return undefined;
   }
 }
 
+let cachedLogo: string | null = null;
 export function getOgLogo() {
+  if (cachedLogo) return cachedLogo;
   try {
     const logoPath = join(process.cwd(), 'public/assets/logo-white.png');
     const logoBase64 = readFileSync(logoPath, 'base64');
-    return `data:image/png;base64,${logoBase64}`;
+    cachedLogo = `data:image/png;base64,${logoBase64}`;
+    return cachedLogo;
   } catch (err) {
     console.error('[OG] Failed to load logo', err);
     return undefined;

lib/schema.ts

@@ -1,7 +1,6 @@
 import { config } from './config';
 
 const getSiteUrl = () => {
-  if (process.env.CI) return 'http://etib.localhost';
   return (config.baseUrl as string) || 'https://e-tib.com';
 };
 

lib/services/create-services.ts

@@ -73,7 +73,7 @@ export function getAppServices(): AppServices {
         {
           enabled: true,
           dsn: config.errors.glitchtip.dsn,
-          tracesSampleRate: 0.1, // Default to 10% sampling
+          tracesSampleRate: 0.1, // Client-side we usually want lower sample rate
         },
         logger,
         notifications,

lib/services/errors/glitchtip-error-reporting-service.ts

@@ -73,7 +73,7 @@ export class GlitchtipErrorReportingService implements ErrorReportingService {
       const contextStr = context ? `\nContext: ${JSON.stringify(context, null, 2)}` : '';
 
       await this.notifications.notify({
-        title: '🔥 Critical Error Captured',
+        title: '🔥 [E-TIB] Critical Error Captured',
         message: `Error: ${errorMessage}${contextStr}`,
         priority: 7,
       });
@@ -92,7 +92,7 @@ export class GlitchtipErrorReportingService implements ErrorReportingService {
       (level === 'error' || level === 'fatal' || message.includes('Route Not Found'))
     ) {
       await this.notifications.notify({
-        title: level === 'warning' ? '⚠️ Warning Captured' : '🔥 Critical Message Captured',
+        title: level === 'warning' ? '⚠️ [E-TIB] Warning Captured' : '🔥 [E-TIB] Critical Message Captured',
         message: message,
         priority: level === 'warning' ? 5 : 7,
       });

messages/de.json

@@ -280,7 +280,7 @@
   "TeamGrid": {
     "badge": "Persönliche Beratung",
     "title": "Ihre Ansprechpartner",
-    "subtitle": "Sprechen Sie direkt mit unseren Experten für Ihr regionales Projekt.",
+    "subtitle": "Sprechen Sie direkt mit unseren Experten für Ihr Projekt.",
     "management": "Geschäftsführung",
     "branchETIB": "E-TIB GmbH",
     "branchIng": "Ingenieurgesellschaft",

messages/en.json

@@ -280,7 +280,7 @@
   "TeamGrid": {
     "badge": "Personal Consultation",
     "title": "Your Contacts",
-    "subtitle": "Speak directly with our experts for your regional project.",
+    "subtitle": "Speak directly with our experts for your project.",
     "management": "Management",
     "branchETIB": "E-TIB GmbH",
     "branchIng": "Engineering Company",

next.config.mjs

@@ -1,4 +1,4 @@
-import withMintelConfig from '@mintel/next-config';
+import { baseNextConfig } from '@mintel/next-config';
 import withBundleAnalyzer from '@next/bundle-analyzer';
 import { withSentryConfig } from '@sentry/nextjs';
 
@@ -15,6 +15,7 @@ const nextConfig = {
     pagesBufferLength: 2,
   },
   experimental: {
+    inlineCss: true,
     staleTimes: {
       dynamic: 0,
       static: 30,
@@ -23,7 +24,6 @@ const nextConfig = {
       'lucide-react',
       'framer-motion',
       '@/components/ui',
-      '@sentry/nextjs',
       'react-hook-form',
       'zod',
       'date-fns',
@@ -47,7 +47,18 @@ const nextConfig = {
     NEXT_PUBLIC_APP_VERSION: process.env.NEXT_PUBLIC_APP_VERSION || process.env.npm_package_version || 'dev',
   },
   // Prevent webpack from restarting when .env files are touched via Docker volume mount
-  webpack: (config, { dev }) => {
+  webpack: (config, { dev, isServer }) => {
+    // Completely strip Next.js forced legacy polyfills for modern browser targets
+    if (!isServer) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        'next/dist/build/polyfills/polyfill-module': false,
+        'next/dist/build/polyfills/polyfill-nomodule': false,
+        'core-js': false,
+        'regenerator-runtime': false,
+      };
+    }
+    
     if (dev) {
       config.watchOptions = {
         ...config.watchOptions,
@@ -538,14 +549,58 @@ const withAnalyzer = withBundleAnalyzer({
   enabled: process.env.ANALYZE === 'true',
 });
 
-// withMintelConfig internally sets output:'standalone' and wraps with withSentryConfig.
 // In dev mode, standalone triggers @vercel/nft file tracing on every compile through
 // VirtioFS, which hammers CPU. Strip it for dev.
 const withMDX = createMDX({});
-let resolvedConfig = withMDX(withAnalyzer(withMintelConfig(nextConfig)));
+let resolvedConfig = withMDX(withAnalyzer(nextConfig));
+
+// Apply next-intl manually (bypassing withMintelConfig to control Sentry)
+import createNextIntlPlugin from 'next-intl/plugin';
+const withNextIntl = createNextIntlPlugin();
+resolvedConfig = withNextIntl(resolvedConfig);
+
+// Removed withSentryConfig completely to eliminate the 170KB client-side bloat and Array.from legacy polyfill.
+// Server-side instrumentation is still handled manually in instrumentation.ts.
+
+// Manually merge baseNextConfig properties
+const finalConfig = {
+  ...baseNextConfig,
+  ...resolvedConfig,
+  images: {
+    ...baseNextConfig.images,
+    ...(resolvedConfig.images || {}),
+    remotePatterns: [
+      ...(baseNextConfig.images?.remotePatterns || []),
+      ...(resolvedConfig.images?.remotePatterns || [])
+    ]
+  },
+  rewrites: async () => {
+    let baseRewrites = [];
+    if (typeof baseNextConfig.rewrites === 'function') {
+      baseRewrites = await baseNextConfig.rewrites();
+    }
+    let configRewrites = { beforeFiles: [], fallback: [], afterFiles: [] };
+    if (typeof resolvedConfig.rewrites === 'function') {
+      const res = await resolvedConfig.rewrites();
+      if (Array.isArray(res)) {
+        configRewrites.fallback = res;
+      } else {
+        configRewrites = res;
+      }
+    }
+    return {
+      beforeFiles: configRewrites.beforeFiles || [],
+      fallback: [
+        ...(configRewrites.fallback || []),
+        ...baseRewrites
+      ],
+      afterFiles: configRewrites.afterFiles || []
+    };
+  }
+};
 
 if (!isProd) {
-  delete resolvedConfig.output;
+  delete finalConfig.output;
 }
 
-export default resolvedConfig;
+export default finalConfig;

package.json

@@ -72,6 +72,7 @@
     "@types/sharp": "^0.31.1",
     "@types/three": "^0.183.1",
     "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-react-swc": "^4.3.1",
     "@vitest/ui": "^4.0.16",
     "autoprefixer": "^10.4.23",
     "cheerio": "^1.2.0",
@@ -105,6 +106,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint .",
+    "postinstall": "echo '' > node_modules/next/dist/build/polyfills/polyfill-module.js && echo '' > node_modules/next/dist/build/polyfills/polyfill-nomodule.js",
     "typecheck": "tsc --noEmit",
     "test": "vitest run --passWithNoTests",
     "test:og": "vitest run tests/og-image.test.ts",
@@ -138,7 +140,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.2.44",
+  "version": "2.4.42",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",
@@ -149,13 +151,15 @@
     ],
     "overrides": {
       "next": "16.1.6",
-      "minimatch": ">=10.2.2"
+      "minimatch": ">=10.2.2",
+      "framer-motion": "^12.38.0"
     }
   },
   "browserslist": [
-    "last 3 versions",
-    "not dead",
-    "not ie 11"
+    "last 2 chrome versions",
+    "last 2 firefox versions",
+    "last 2 edge versions",
+    "safari >= 15.4"
   ],
   "peerDependencies": {
     "lucide-react": "^0.563.0"

pnpm-lock.yaml

@@ -7,6 +7,7 @@ settings:
 overrides:
   next: 16.1.6
   minimatch: '>=10.2.2'
+  framer-motion: ^12.38.0
 
 importers:
 
@@ -52,7 +53,7 @@ importers:
         specifier: ^2.1.1
         version: 2.1.1
       framer-motion:
-        specifier: ^12.34.0
+        specifier: ^12.38.0
         version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       graphql:
         specifier: ^16.12.0
@@ -211,6 +212,9 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^5.1.4
         version: 5.2.0(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      '@vitejs/plugin-react-swc':
+        specifier: ^4.3.1
+        version: 4.3.1(@swc/helpers@0.5.20)(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
       '@vitest/ui':
         specifier: ^4.0.16
         version: 4.1.2(vitest@4.1.2)
@@ -2351,6 +2355,9 @@ packages:
   '@rolldown/pluginutils@1.0.0-rc.3':
     resolution: {integrity: sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==}
 
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+
   '@rollup/plugin-commonjs@28.0.1':
     resolution: {integrity: sha512-+tNWdlWKbpB3WgBN7ijjYkq9X5uhjmcvyjEght4NmH5fAU++zfQzAJ6wumLS+dNcvwEZhKx2Z+skY8m7v0wGSA==}
     engines: {node: '>=16.0.0 || 14 >= 14.17'}
@@ -3285,6 +3292,12 @@ packages:
     peerDependencies:
       react: '>= 16.8.0'
 
+  '@vitejs/plugin-react-swc@4.3.1':
+    resolution: {integrity: sha512-PaeokKjAGraNN+s5SIApgsktnJprIyt3zgEIu7awnEdfn29QiB2crTcCzyi2XGpX9rUnTc0cKU07Wm0N0g7H2w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^4 || ^5 || ^6 || ^7 || ^8
+
   '@vitejs/plugin-react@5.2.0':
     resolution: {integrity: sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4843,20 +4856,6 @@ packages:
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
-  framer-motion@11.18.2:
-    resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
-    peerDependencies:
-      '@emotion/is-prop-valid': '*'
-      react: ^18.0.0 || ^19.0.0
-      react-dom: ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@emotion/is-prop-valid':
-        optional: true
-      react:
-        optional: true
-      react-dom:
-        optional: true
-
   framer-motion@12.38.0:
     resolution: {integrity: sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==}
     peerDependencies:
@@ -6142,15 +6141,9 @@ packages:
   module-details-from-path@1.0.4:
     resolution: {integrity: sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==}
 
-  motion-dom@11.18.1:
-    resolution: {integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==}
-
   motion-dom@12.38.0:
     resolution: {integrity: sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==}
 
-  motion-utils@11.18.1:
-    resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
-
   motion-utils@12.36.0:
     resolution: {integrity: sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==}
 
@@ -9246,7 +9239,7 @@ snapshots:
     dependencies:
       '@medv/finder': 4.0.2
       clsx: 2.1.1
-      framer-motion: 11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      framer-motion: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       html2canvas: 1.4.1
       lucide-react: 0.441.0(react@19.2.4)
       next: 16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0)
@@ -10136,6 +10129,8 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-rc.3': {}
 
+  '@rolldown/pluginutils@1.0.1': {}
+
   '@rollup/plugin-commonjs@28.0.1(rollup@4.60.1)':
     dependencies:
       '@rollup/pluginutils': 5.3.0(rollup@4.60.1)
@@ -11047,6 +11042,14 @@ snapshots:
       '@use-gesture/core': 10.3.1
       react: 19.2.4
 
+  '@vitejs/plugin-react-swc@4.3.1(@swc/helpers@0.5.20)(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.1
+      '@swc/core': 1.15.21(@swc/helpers@0.5.20)
+      vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+    transitivePeerDependencies:
+      - '@swc/helpers'
+
   '@vitejs/plugin-react@5.2.0(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@22.19.15)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))':
     dependencies:
       '@babel/core': 7.29.0
@@ -12941,15 +12944,6 @@ snapshots:
 
   fraction.js@5.3.4: {}
 
-  framer-motion@11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
-    dependencies:
-      motion-dom: 11.18.1
-      motion-utils: 11.18.1
-      tslib: 2.8.1
-    optionalDependencies:
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-
   framer-motion@12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       motion-dom: 12.38.0
@@ -14577,16 +14571,10 @@ snapshots:
 
   module-details-from-path@1.0.4: {}
 
-  motion-dom@11.18.1:
-    dependencies:
-      motion-utils: 11.18.1
-
   motion-dom@12.38.0:
     dependencies:
       motion-utils: 12.36.0
 
-  motion-utils@11.18.1: {}
-
   motion-utils@12.36.0: {}
 
   mri@1.2.0: {}

psi-standorte.json

@@ -0,0 +1,39 @@
+{
+  "error": {
+    "code": 429,
+    "message": "Quota exceeded for quota metric 'Queries' and limit 'Queries per day' of service 'pagespeedonline.googleapis.com' for consumer 'project_number:583797351490'.",
+    "errors": [
+      {
+        "message": "Quota exceeded for quota metric 'Queries' and limit 'Queries per day' of service 'pagespeedonline.googleapis.com' for consumer 'project_number:583797351490'.",
+        "domain": "global",
+        "reason": "rateLimitExceeded"
+      }
+    ],
+    "status": "RESOURCE_EXHAUSTED",
+    "details": [
+      {
+        "@type": "type.googleapis.com/google.rpc.ErrorInfo",
+        "reason": "RATE_LIMIT_EXCEEDED",
+        "domain": "googleapis.com",
+        "metadata": {
+          "service": "pagespeedonline.googleapis.com",
+          "quota_location": "global",
+          "quota_limit_value": "0",
+          "consumer": "projects/583797351490",
+          "quota_metric": "pagespeedonline.googleapis.com/default",
+          "quota_limit": "defaultPerDayPerProject",
+          "quota_unit": "1/d/{project}"
+        }
+      },
+      {
+        "@type": "type.googleapis.com/google.rpc.Help",
+        "links": [
+          {
+            "description": "Request a higher quota limit.",
+            "url": "https://cloud.google.com/docs/quotas/help/request_increase"
+          }
+        ]
+      }
+    ]
+  }
+}