perf(images): remove AVIF format to prevent massive CPU spikes and TTFB delays during on-the-fly Next.js image optimization

.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:
@@ -49,9 +50,7 @@ jobs:
           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 "Purging old tool caches skipped to prevent runner corruption."
           echo "=== Host Disk Usage ==="
           docker run --rm -v /:/host-root alpine df -h || true
           echo "=== Host Inode Usage ==="
@@ -60,23 +59,7 @@ jobs:
           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 +95,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 +210,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 +296,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:

.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]/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]/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',
@@ -186,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

@@ -13,7 +13,7 @@ const HomeCompetenceBentoGrid = nextDynamic(() => import('@/components/blocks/Co
 const HomeReferencesSlider = nextDynamic(() => import('@/components/blocks/ReferencesSlider').then(mod => mod.ReferencesSlider));
 const FaqBlock = nextDynamic(() => import('@/components/blocks/FaqBlock').then(mod => mod.FaqBlock));
 const CertificatesBlock = nextDynamic(() => import('@/components/blocks/CertificatesBlock').then(mod => mod.CertificatesBlock));
-const HeroSection = nextDynamic(() => import('@/components/blocks/HeroSection').then(mod => mod.HeroSection));
+import { HeroSection } from '@/components/blocks/HeroSection';
 import JsonLd from '@/components/JsonLd';
 
 import { Button } from '@/components/ui/Button';
@@ -122,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') {
@@ -130,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]/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

@@ -87,3 +87,35 @@
   }
 }
 /* trigger rebuild */
+
+@layer utilities {
+  @keyframes hero-fade-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  .animate-hero-fade-in-up {
+    animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+}
+
+@layer utilities {
+  @keyframes hero-zoom-out {
+    from {
+      transform: scale(1.05);
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+  
+  .animate-hero-zoom-out {
+    animation: hero-zoom-out 1.5s ease-out forwards;
+  }
+}

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/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/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';

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';
 

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', opacity: 0, animationFillMode: 'forwards' }}>
               <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', opacity: 0, animationFillMode: 'forwards' }}>
+              <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', opacity: 0, animationFillMode: 'forwards' }}>
               <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', opacity: 0, animationFillMode: 'forwards' }}>
               <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

@@ -34,7 +34,7 @@ export function HeroVideo(props: HeroVideoProps) {
 
   let defaultPoster = "/assets/photos/DJI_0048.JPG";
   if (videoUrl && videoUrl.endsWith('.mp4')) {
-    defaultPoster = videoUrl.replace('.mp4', '-poster.jpg');
+    defaultPoster = videoUrl.replace('.mp4', '-poster.webp');
   }
 
   const posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || defaultPoster;
@@ -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"
+        unoptimized={true}
         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 && (

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 {

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';
@@ -47,19 +47,6 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
   const isDraggingRef = React.useRef(false);
   const [isDragging, setIsDragging] = React.useState(false);
 
-  // Center the first card on mount so it appears in the middle with peek on both sides
-  React.useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    // Wait for layout to settle
-    requestAnimationFrame(() => {
-      const firstCard = el.querySelector('[data-card]') as HTMLElement | null;
-      if (!firstCard) return;
-      const cardCenter = firstCard.offsetLeft + firstCard.offsetWidth / 2;
-      const containerCenter = el.offsetWidth / 2;
-      el.scrollLeft = cardCenter - containerCenter;
-    });
-  }, [references.length]);
 
   const badge = props.badge || data?.badge || t('badge');
   const title = props.title || data?.title || t('title');
@@ -127,7 +114,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
         <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: centered first card with peek on both sides */}
-        <LazyMotion features={domAnimation}>
+
           <div 
             ref={containerRef}
             onMouseDown={onMouseDown}
@@ -169,6 +156,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
                       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"
                     />
@@ -188,7 +176,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
             })}
 
           </div>
-        </LazyMotion>
+
       </div>
 
       <div className="container relative z-10 mt-4 flex justify-center">

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';
@@ -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';
 

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/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/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';
 
 /**

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

@@ -2,7 +2,6 @@ import { AppServices } from './app-services';
 import { NoopAnalyticsService } from './analytics/noop-analytics-service';
 import { UmamiAnalyticsService } from './analytics/umami-analytics-service';
 import { MemoryCacheService } from './cache/memory-cache-service';
-import { GlitchtipErrorReportingService } from './errors/glitchtip-error-reporting-service';
 import { NoopErrorReportingService } from './errors/noop-error-reporting-service';
 import { NoopLoggerService } from './logging/noop-logger-service';
 import { PinoLoggerService } from './logging/pino-logger-service';
@@ -68,17 +67,7 @@ export function getAppServices(): AppServices {
   logger.info('Notification service initialized (noop)');
 
   // Create error reporting service (GlitchTip/Sentry or no-op)
-  const errors = sentryEnabled
-    ? new GlitchtipErrorReportingService(
-        {
-          enabled: true,
-          dsn: config.errors.glitchtip.dsn,
-          tracesSampleRate: 0.1, // Default to 10% sampling
-        },
-        logger,
-        notifications,
-      )
-    : new NoopErrorReportingService();
+  const errors = new NoopErrorReportingService();
 
   if (sentryEnabled) {
     logger.info(

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,
       });

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,
@@ -438,7 +449,7 @@ const nextConfig = {
   },
   images: {
     qualities: [25, 50, 75, 100],
-    formats: ['image/avif', 'image/webp'],
+    formats: ['image/webp'],
     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     remotePatterns: [
       {
@@ -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

@@ -105,6 +105,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 +139,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.2.46",
+  "version": "2.2.94",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",
@@ -149,13 +150,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
@@ -4843,20 +4844,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 +6129,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 +9227,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)
@@ -12941,15 +12922,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 +14549,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"
+          }
+        ]
+      }
+    ]
+  }
+}

run-lh.cjs

@@ -0,0 +1,36 @@
+const fs = require('fs');
+const { execSync } = require('child_process');
+
+console.log("Running Lighthouse...");
+try {
+  execSync('npx lighthouse "https://e-tib.com/de/standorte?v=2" --chrome-flags="--headless --no-sandbox" --output json --output-path ./lh-report.json', { stdio: 'inherit' });
+} catch(e) {
+  console.log("Lighthouse run failed", e.message);
+}
+
+const data = JSON.parse(fs.readFileSync('./lh-report.json', 'utf8'));
+const score = data.categories.performance.score * 100;
+console.log("\n==================================");
+console.log(`PERFORMANCE SCORE: ${score}`);
+console.log("==================================\n");
+
+console.log("FAILING METRICS (Score < 1.0):");
+Object.values(data.audits).filter(a => a.score !== null && a.score < 1).forEach(a => {
+  console.log(`- ${a.id}: ${a.score} (${a.displayValue || 'No display value'})`);
+  if (a.details && a.details.items && a.details.items.length > 0) {
+    if (a.id === 'image-delivery-insight' || a.id === 'unused-javascript' || a.id === 'modern-image-formats' || a.id === 'uses-responsive-images') {
+        console.log("  Items:");
+        a.details.items.forEach(item => {
+            console.log(`    URL: ${item.url || item.node?.nodeLabel || 'unknown'}`);
+            if (item.wastedBytes) console.log(`    Wasted KB: ${(item.wastedBytes / 1024).toFixed(2)}`);
+            if (item.wastedMs) console.log(`    Wasted Ms: ${item.wastedMs}`);
+        });
+    }
+  }
+});
+
+console.log("\nLCP BREAKDOWN:");
+const lcpElement = data.audits['largest-contentful-paint-element'];
+if (lcpElement && lcpElement.details && lcpElement.details.items) {
+    console.log("LCP Element:", lcpElement.details.items[0].node.snippet);
+}

run-lh.js

@@ -0,0 +1,36 @@
+const fs = require('fs');
+const { execSync } = require('child_process');
+
+console.log("Running Lighthouse...");
+try {
+  execSync('npx lighthouse "https://e-tib.com/de/standorte?v=2" --chrome-flags="--headless --no-sandbox" --output json --output-path ./lh-report.json', { stdio: 'inherit' });
+} catch(e) {
+  console.log("Lighthouse run failed", e.message);
+}
+
+const data = JSON.parse(fs.readFileSync('./lh-report.json', 'utf8'));
+const score = data.categories.performance.score * 100;
+console.log("\n==================================");
+console.log(`PERFORMANCE SCORE: ${score}`);
+console.log("==================================\n");
+
+console.log("FAILING METRICS (Score < 1.0):");
+Object.values(data.audits).filter(a => a.score !== null && a.score < 1).forEach(a => {
+  console.log(`- ${a.id}: ${a.score} (${a.displayValue || 'No display value'})`);
+  if (a.details && a.details.items && a.details.items.length > 0) {
+    if (a.id === 'image-delivery-insight' || a.id === 'unused-javascript' || a.id === 'modern-image-formats' || a.id === 'uses-responsive-images') {
+        console.log("  Items:");
+        a.details.items.forEach(item => {
+            console.log(`    URL: ${item.url || item.node?.nodeLabel || 'unknown'}`);
+            if (item.wastedBytes) console.log(`    Wasted KB: ${item.wastedBytes / 1024}`);
+            if (item.wastedMs) console.log(`    Wasted Ms: ${item.wastedMs}`);
+        });
+    }
+  }
+});
+
+console.log("\nLCP BREAKDOWN:");
+const lcpElement = data.audits['largest-contentful-paint-element'];
+if (lcpElement && lcpElement.details && lcpElement.details.items) {
+    console.log("LCP Element:", lcpElement.details.items[0].node.snippet);
+}

scripts/lhci-puppeteer-setup.cjs

@@ -6,13 +6,14 @@ module.exports = async (browser, context) => {
   const page = await browser.newPage();
   // Using LHCI_URL or TARGET_URL if available
   const targetUrl =
-    process.env.LHCI_URL || process.env.TARGET_URL || 'https://testing.klz-cables.com';
+    process.env.LHCI_URL || process.env.TARGET_URL || 'https://testing.e-tib.com';
   const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
+  const authCookieName = process.env.AUTH_COOKIE_NAME || 'etib_gatekeeper_session';
 
-  console.log(`🔑 LHCI Auth: Setting gatekeeper cookie for ${new URL(targetUrl).hostname}...`);
+  console.log(`🔑 LHCI Auth: Setting gatekeeper cookie (${authCookieName}) for ${new URL(targetUrl).hostname}...`);
 
   await page.setCookie({
-    name: 'klz_gatekeeper_session',
+    name: authCookieName,
     value: gatekeeperPassword,
     domain: new URL(targetUrl).hostname,
     path: '/',

scripts/pagespeed-sitemap.ts

@@ -19,6 +19,7 @@ const targetUrl =
   'http://localhost:3000';
 const limit = process.env.PAGESPEED_LIMIT ? parseInt(process.env.PAGESPEED_LIMIT) : 20; // Default limit to avoid infinite runs
 const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
+const authCookieName = process.env.AUTH_COOKIE_NAME || 'etib_gatekeeper_session';
 
 async function main() {
   console.log(`\n🚀 Starting PageSpeed test for: ${targetUrl}`);
@@ -32,7 +33,7 @@ async function main() {
     // We might need to bypass gatekeeper for the sitemap fetch too
     const response = await axios.get(sitemapUrl, {
       headers: {
-        Cookie: `klz_gatekeeper_session=${gatekeeperPassword}`,
+        Cookie: `${authCookieName}=${gatekeeperPassword}`,
       },
       validateStatus: (status) => status < 400,
     });
@@ -77,7 +78,7 @@ async function main() {
     // Handle authentication for staging/testing
     // Lighthouse can set cookies via --collect.settings.extraHeaders
     const extraHeaders = JSON.stringify({
-      Cookie: `klz_gatekeeper_session=${gatekeeperPassword}`,
+      Cookie: `${authCookieName}=${gatekeeperPassword}`,
     });
 
     // Detect Chrome path from Puppeteer installation if not provided
@@ -147,7 +148,7 @@ async function main() {
       execSync(lhciCommand, {
         encoding: 'utf8',
         stdio: 'inherit',
-        env: { ...process.env, CHROME_PATH: chromePath },
+        env: { ...process.env, CHROME_PATH: chromePath, TARGET_URL: targetUrl },
       });
     } catch (err: any) {
       console.warn('⚠️ LHCI assertion finished with warnings or errors.');

scripts/priority-gate.sh

@@ -70,7 +70,9 @@ while IFS= read -r run; do
   elif [ "$CURRENT_PRIO" -lt "$RUN_PRIO" ]; then
     echo "Current workflow has LOWER priority ($CURRENT_PRIO < $RUN_PRIO). Aborting self."
     curl -s -X POST -H "Authorization: token $GITEA_PAT" "$API_BASE/$CURRENT_RUN_ID/cancel"
-    exit 1
+    echo "Waiting for Gitea to process cancellation..."
+    sleep 15
+    exit 0
   else
     # Equal priority: Newer wins
     if [ "$CURRENT_RUN_ID" -gt "$RUN_ID" ]; then
@@ -79,7 +81,9 @@ while IFS= read -r run; do
     else
       echo "Equal priority, but current is older. Aborting self."
       curl -s -X POST -H "Authorization: token $GITEA_PAT" "$API_BASE/$CURRENT_RUN_ID/cancel"
-      exit 1
+      echo "Waiting for Gitea to process cancellation..."
+      sleep 15
+      exit 0
     fi
   fi
 done <<< "$RUNS"

skip_branch_script.sh

@@ -0,0 +1,9 @@
+          if [[ "${{ github.ref_type }}" == "branch" && "${{ github.ref_name }}" != "main" && "${{ github.ref_name }}" != "master" ]]; then
+            # Fetch tags from remote for this specific commit to check if it's being tagged simultaneously
+            TAGS=$(git ls-remote --tags origin | grep "${{ github.sha }}" || true)
+            if [[ -n "$TAGS" ]]; then
+              echo "Dieser Commit hat einen Tag! Überspringe Preview-Deployment, damit der Tag-Deploy Vorrang hat."
+              echo "target=skip" >> $GITHUB_OUTPUT
+              exit 0
+            fi
+          fi