perf: fix massive unused JS payload by replacing synchronous framer-motion imports with LazyMotion (m) in template/error boundaries, revert HeroSection lazy load to save LCP

- Increased background opacity from bg-white/75 to bg-white/95
- Updated text colors to text-neutral-dark to meet 4.5:1 contrast ratio requirement

.env.production

@@ -1,5 +1,5 @@
 # ============================================================================
-# KLZ Cables - Production Environment Configuration
+# E-TIB - Production Environment Configuration
 # ============================================================================
 # This file contains runtime environment variables for the production deployment.
 # It should be placed on the production server at: /home/deploy/sites/e-tib.com/.env
@@ -12,7 +12,7 @@ NODE_ENV=production
 NEXT_PUBLIC_BASE_URL=https://e-tib.com
 
 # Analytics (Umami)
-UMAMI_WEBSITE_ID=
+UMAMI_WEBSITE_ID=d773ea10-a3b3-4ccf-9024-987e14c4d669
 UMAMI_API_ENDPOINT=https://analytics.infra.mintel.me
 
 # Error Tracking (GlitchTip/Sentry)
@@ -23,7 +23,7 @@ MAIL_HOST=smtp.eu.mailgun.org
 MAIL_PORT=587
 MAIL_USERNAME=
 MAIL_PASSWORD=
-MAIL_FROM=KLZ Cables <noreply@e-tib.com>
+MAIL_FROM=E-TIB GmbH <noreply@e-tib.com>
 MAIL_RECIPIENTS=info@e-tib.com
 
 # Varnish Cache Size (optional)

.gitea/workflows/deploy.yml

@@ -13,6 +13,10 @@ on:
         required: false
         default: 'false'
 
+concurrency:
+  group: ${{ github.workflow }}-${{ startsWith(github.ref, 'refs/tags/v') && 'production' || github.ref }}
+  cancel-in-progress: true
+
 env:
   PUPPETEER_SKIP_DOWNLOAD: "true"
   COREPACK_NPM_REGISTRY: "https://registry.npmmirror.com"
@@ -89,12 +93,12 @@ jobs:
           DOMAIN="e-tib.com"
           PRJ="etib"
 
-          if [[ "${{ github.ref_type }}" == "branch" && "$REF" == "main" ]]; then
+          if [[ "${{ github.ref }}" == "refs/heads/main" ]]; then
             TARGET="testing"
             IMAGE_TAG="main-${SHORT_SHA}"
             ENV_FILE=".env.testing"
             TRAEFIK_HOST="test.${DOMAIN}"
-          elif [[ "${{ github.ref_type }}" == "tag" ]]; then
+          elif [[ "${{ github.ref }}" == refs/tags/* ]]; then
             if [[ "$REF" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
               TARGET="production"
               IMAGE_TAG="$REF"
@@ -231,7 +235,7 @@ jobs:
           NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
           NEXT_PUBLIC_TARGET: ${{ needs.prepare.outputs.target }}
           NEXT_PUBLIC_APP_VERSION: ${{ needs.prepare.outputs.image_tag }}
-          UMAMI_WEBSITE_ID: ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
+          UMAMI_WEBSITE_ID: ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID || 'd773ea10-a3b3-4ccf-9024-987e14c4d669' }}
           UMAMI_API_ENDPOINT: ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
           NPM_TOKEN: ${{ steps.auth.outputs.working_token }}
           NPM_DOMAIN: ${{ steps.auth.outputs.working_domain }}
@@ -278,14 +282,18 @@ jobs:
       MAIL_RECIPIENTS:  ${{ secrets.CONTACT_RECIPIENT || vars.CONTACT_RECIPIENT || 'info@e-tib.com' }}
       
       # Monitoring
-      SENTRY_DSN:       ${{ secrets.SENTRY_DSN || vars.SENTRY_DSN }}
+      SENTRY_DSN:       ${{ secrets.SENTRY_DSN || vars.SENTRY_DSN || 'https://dcb81958-dbf2-4a3d-b422-875f4672c14b@glitchtip.infra.mintel.me/5' }}
       
       # Gatekeeper
       GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD }}
 
       # Analytics
-      UMAMI_WEBSITE_ID:    ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
+      UMAMI_WEBSITE_ID:    ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID || 'd773ea10-a3b3-4ccf-9024-987e14c4d669' }}
       UMAMI_API_ENDPOINT:  ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
+      
+      # Notifications
+      GOTIFY_URL:          ${{ secrets.GOTIFY_URL }}
+      GOTIFY_TOKEN:        ${{ secrets.GOTIFY_TOKEN }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -346,6 +354,10 @@ jobs:
             echo "UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID"
             echo "UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT"
             echo ""
+            echo "# Notifications"
+            echo "GOTIFY_URL=$GOTIFY_URL"
+            echo "GOTIFY_TOKEN=$GOTIFY_TOKEN"
+            echo ""
             echo "TARGET=$TARGET"
             echo "SENTRY_ENVIRONMENT=$TARGET"
             echo "PROJECT_NAME=$PROJECT_NAME"
@@ -388,10 +400,19 @@ jobs:
           scp docker-compose.yml root@alpha.mintel.me:$SITE_DIR/docker-compose.yml
           
           ssh root@alpha.mintel.me "docker system prune -f"
-          ssh root@alpha.mintel.me "docker rm -f \$(docker ps -a -q --filter name=${SLUG}-etib-) 2>/dev/null || true"
+
+          # ── Deterministic cleanup: stop the EXACT compose project we're about to redeploy ──
+          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${PROJECT_NAME}' --env-file '$ENV_FILE' down --remove-orphans 2>/dev/null || true"
+
+          # ── Safety net: kill ANY container whose Traefik host rule matches our target domain ──
+          # This catches ghost containers from prior deployments that used a different project name
+          # (e.g. 'e-tibcom' vs 'etib-production' due to Docker Compose defaulting to dir name)
+          ssh root@alpha.mintel.me "docker ps -q --filter label=traefik.http.routers.${PROJECT_NAME}.rule 2>/dev/null | xargs -r docker rm -f 2>/dev/null || true"
+          ssh root@alpha.mintel.me "docker ps --format '{{.Names}}' | grep -E '^e-tibcom-' | xargs -r docker rm -f 2>/dev/null || true"
+
           ssh root@alpha.mintel.me "cd $SITE_DIR && echo '${{ secrets.REGISTRY_PASS }}' | docker login registry.infra.mintel.me -u '${{ secrets.REGISTRY_USER }}' --password-stdin"
-          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' pull"
-          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' up -d --remove-orphans"
+          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${PROJECT_NAME}' --env-file '$ENV_FILE' pull"
+          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${PROJECT_NAME}' --env-file '$ENV_FILE' up -d --remove-orphans"
           ssh root@alpha.mintel.me "docker system prune -f --filter 'until=24h'"
 
   # ──────────────────────────────────────────────────────────────────────────────

.gitignore

@@ -36,3 +36,7 @@ pnpm-debug.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# turborepo
+.turbo
+.turbo-test

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

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

.turbo/0864e4a10f76dcaf-manifest.json

@@ -1 +0,0 @@
-{"files":{".turbo/turbo-lint.log":{"size":11972,"mtime_nanos":1779970374061729177,"mode":420,"is_dir":false}},"order":[".turbo/turbo-lint.log"]}

.turbo/0864e4a10f76dcaf-meta.json

@@ -1 +0,0 @@
-{"hash":"0864e4a10f76dcaf","duration":6769,"sha":"68c4a056b70ff215c9ef3252506875dfd3ba4eee","dirty_hash":"29197232f806b237725188c5bfe8d43cb2f12f8bb9e0df915eecf0896e2c04a3"}

.turbo/41698960411f6bf6-manifest.json

@@ -1 +0,0 @@
-{"files":{".turbo/turbo-test.log":{"size":2776,"mtime_nanos":1781469605328811961,"mode":420,"is_dir":false}},"order":[".turbo/turbo-test.log"]}

.turbo/41698960411f6bf6-meta.json

@@ -1 +0,0 @@
-{"hash":"41698960411f6bf6","duration":4168,"sha":"a3c732dd133b1b8261b19cf64b3bf684e269e839","dirty_hash":"1ef3b75af417f41468b9558671572e75e0fc055f9dbe6e805cfa6f59b1cddf70"}

.turbo/7668a73054ba889d-manifest.json

@@ -1 +0,0 @@
-{"files":{".turbo/turbo-typecheck.log":{"size":85,"mtime_nanos":1779970373499305257,"mode":420,"is_dir":false}},"order":[".turbo/turbo-typecheck.log"]}

.turbo/7668a73054ba889d-meta.json

@@ -1 +0,0 @@
-{"hash":"7668a73054ba889d","duration":6206,"sha":"68c4a056b70ff215c9ef3252506875dfd3ba4eee","dirty_hash":"29197232f806b237725188c5bfe8d43cb2f12f8bb9e0df915eecf0896e2c04a3"}

.turbo/7d27d7d8e3c30797-manifest.json

@@ -1 +0,0 @@
-{"files":{".turbo/turbo-typecheck.log":{"size":90,"mtime_nanos":1781782738306875884,"mode":420,"is_dir":false}},"order":[".turbo/turbo-typecheck.log"]}

.turbo/7d27d7d8e3c30797-meta.json

@@ -1 +0,0 @@
-{"hash":"7d27d7d8e3c30797","duration":14130,"sha":"d6eb1c0e7fe99bc7006a396c8eea0228c4723b31","dirty_hash":"b247ccedfcf352a6efb73993a3482b827d5b44922d26bf137f251d0d69a200b6"}

.turbo/9c3fa4d9e1993aff-manifest.json

@@ -1 +0,0 @@
-{"files":{".turbo/turbo-test.log":{"size":2150,"mtime_nanos":1779970370282819916,"mode":420,"is_dir":false}},"order":[".turbo/turbo-test.log"]}

.turbo/9c3fa4d9e1993aff-meta.json

@@ -1 +0,0 @@
-{"hash":"9c3fa4d9e1993aff","duration":2989,"sha":"68c4a056b70ff215c9ef3252506875dfd3ba4eee","dirty_hash":"29197232f806b237725188c5bfe8d43cb2f12f8bb9e0df915eecf0896e2c04a3"}

.turbo/bb46018d4a7bc516-manifest.json

@@ -1 +0,0 @@
-{"files":{".turbo/turbo-lint.log":{"size":12987,"mtime_nanos":1781469609469080321,"mode":420,"is_dir":false}},"order":[".turbo/turbo-lint.log"]}

.turbo/bb46018d4a7bc516-meta.json

@@ -1 +0,0 @@
-{"hash":"bb46018d4a7bc516","duration":8307,"sha":"a3c732dd133b1b8261b19cf64b3bf684e269e839","dirty_hash":"1ef3b75af417f41468b9558671572e75e0fc055f9dbe6e805cfa6f59b1cddf70"}

.turbo/c3b4dbd60e2d475a-manifest.json

@@ -1 +0,0 @@
-{"files":{".turbo/turbo-lint.log":{"size":15001,"mtime_nanos":1781782739446599688,"mode":420,"is_dir":false}},"order":[".turbo/turbo-lint.log"]}

.turbo/c3b4dbd60e2d475a-meta.json

@@ -1 +0,0 @@
-{"hash":"c3b4dbd60e2d475a","duration":15270,"sha":"d6eb1c0e7fe99bc7006a396c8eea0228c4723b31","dirty_hash":"b247ccedfcf352a6efb73993a3482b827d5b44922d26bf137f251d0d69a200b6"}

.turbo/cache/32905076da5f4894-manifest.json

@@ -1 +0,0 @@
-{"files":{".turbo/turbo-typecheck.log":{"size":92,"mtime_nanos":1779097674383861303,"mode":420,"is_dir":false}},"order":[".turbo/turbo-typecheck.log"]}

.turbo/cache/32905076da5f4894-meta.json

@@ -1 +0,0 @@
-{"hash":"32905076da5f4894","duration":4492,"sha":"35d9650626b56a727e9c1981308145cb7b2f28aa","dirty_hash":"58f8ebc92a0452cbb0a09c5ebe800385fcc42ff82fee098bb7d6c8828bc526f0"}

.turbo/cache/7e2629942c881f80-manifest.json

@@ -1 +0,0 @@
-{"files":{".turbo/turbo-test.log":{"size":818,"mtime_nanos":1779097671747078359,"mode":420,"is_dir":false}},"order":[".turbo/turbo-test.log"]}

.turbo/cache/7e2629942c881f80-meta.json

@@ -1 +0,0 @@
-{"hash":"7e2629942c881f80","duration":1855,"sha":"35d9650626b56a727e9c1981308145cb7b2f28aa","dirty_hash":"58f8ebc92a0452cbb0a09c5ebe800385fcc42ff82fee098bb7d6c8828bc526f0"}

.turbo/cache/85340b254e0f10f1-manifest.json

@@ -1 +0,0 @@
-{"files":{".turbo/turbo-lint.log":{"size":10746,"mtime_nanos":1779097675143794164,"mode":420,"is_dir":false}},"order":[".turbo/turbo-lint.log"]}

.turbo/cache/85340b254e0f10f1-meta.json

@@ -1 +0,0 @@
-{"hash":"85340b254e0f10f1","duration":5252,"sha":"35d9650626b56a727e9c1981308145cb7b2f28aa","dirty_hash":"58f8ebc92a0452cbb0a09c5ebe800385fcc42ff82fee098bb7d6c8828bc526f0"}

.turbo/ea9126c55a797120-manifest.json

@@ -1 +0,0 @@
-{"files":{".turbo/turbo-test.log":{"size":3396,"mtime_nanos":1781782731048784172,"mode":420,"is_dir":false}},"order":[".turbo/turbo-test.log"]}

.turbo/ea9126c55a797120-meta.json

@@ -1 +0,0 @@
-{"hash":"ea9126c55a797120","duration":6873,"sha":"d6eb1c0e7fe99bc7006a396c8eea0228c4723b31","dirty_hash":"b247ccedfcf352a6efb73993a3482b827d5b44922d26bf137f251d0d69a200b6"}

.turbo/eb4eeeb717c1af0c-manifest.json

@@ -1 +0,0 @@
-{"files":{".turbo/turbo-typecheck.log":{"size":85,"mtime_nanos":1781469608726900998,"mode":420,"is_dir":false}},"order":[".turbo/turbo-typecheck.log"]}

.turbo/eb4eeeb717c1af0c-meta.json

@@ -1 +0,0 @@
-{"hash":"eb4eeeb717c1af0c","duration":7565,"sha":"a3c732dd133b1b8261b19cf64b3bf684e269e839","dirty_hash":"1ef3b75af417f41468b9558671572e75e0fc055f9dbe6e805cfa6f59b1cddf70"}

.turbo/turbo-lint.log

@@ -1,5 +0,0 @@
-
-> e-tib-nextjs@2.2.12 lint /Volumes/Alpha SSD/Coding/e-tib.com
-> eslint .
-
- ELIFECYCLE  Command failed.

.turbo/turbo-test.log

@@ -1,55 +0,0 @@
-
-> e-tib-nextjs@2.2.12 test /Volumes/Alpha SSD/Coding/e-tib.com
-> vitest run --passWithNoTests
-
-
- RUN  v4.1.2 /Volumes/Alpha SSD/Coding/e-tib.com
-
-(node:64961) [DEP0205] DeprecationWarning: `module.register()` is deprecated. Use `module.registerHooks()` instead.
-(Use `node --trace-deprecation ...` to show where the warning was created)
- ✓ tests/mdx-links.test.ts (1 test) 29ms
- ✓ tests/homepage-and-competence-content.test.ts (4 tests) 14ms
- ❯ tests/legal-pages.test.ts (2 tests | 1 failed) 9ms
-     ✓ should contain highly professional B2B sections in German AGB 5ms
-     × should contain professional corresponding B2B sections in English Terms 2ms
- ✓ tests/task-12-links.test.ts (2 tests) 8ms
- ✓ tests/messen-content.test.ts (2 tests) 8ms
- ✓ lib/mail/mailer.test.ts (1 test) 7ms
-stderr | components/layout/LanguageSwitcher.test.tsx > LanguageSwitcher TDD > translates /en/trade-fairs to /de/messen when switching to German
-React does not recognize the `transitionMessage` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `transitionmessage` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
-
- ✓ components/layout/LanguageSwitcher.test.tsx (5 tests) 25ms
- ✓ components/search/AISearchResults.test.tsx (1 test) 52ms
-stderr | components/blocks/ReferencesSlider.test.tsx > ReferencesSlider TDD > renders reference tiles correctly
-Received `true` for a non-boolean attribute `fill`.
-
-If you want to write it to the DOM, pass a string instead: fill="true" or fill={value.toString()}.
-
- ✓ components/blocks/ReferencesSlider.test.tsx (2 tests) 43ms
- ✓ lib/env.test.ts (6 tests) 4ms
-stdout | app/[locale]/referenzen/[slug]/page.test.tsx
-[Config] Initializing Toggles: { feedbackEnabled: false }
-
- ✓ app/[locale]/referenzen/[slug]/page.test.tsx (1 test) 26ms
-
-⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯
-
- FAIL  tests/legal-pages.test.ts > Legal Pages Content Validation > should contain professional corresponding B2B sections in English Terms
-Error: ENOENT: no such file or directory, open '/Volumes/Alpha SSD/Coding/e-tib.com/content/en/terms.mdx'
- ❯ tests/legal-pages.test.ts:25:24
-     23|
-     24|   it('should contain professional corresponding B2B sections in Englis…
-     25|     const content = fs.readFileSync(enTermsPath, 'utf8');
-       |                        ^
-     26|
-     27|     expect(content).toContain('title: "Terms and Conditions"');
-
-⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯
-
-
- Test Files  1 failed | 10 passed (11)
-      Tests  1 failed | 26 passed (27)
-   Start at  14:54:33
-   Duration  5.94s (transform 5.27s, setup 0ms, import 9.43s, tests 222ms, environment 13.80s)
-
- ELIFECYCLE  Test failed. See above for more details.

.turbo/turbo-typecheck.log

@@ -1,5 +0,0 @@
-
-> e-tib-nextjs@2.2.12 typecheck /Volumes/Alpha SSD/Coding/e-tib.com
-> tsc --noEmit
-
- ELIFECYCLE  Command failed.

Dockerfile

@@ -17,7 +17,7 @@ ENV SKIP_RUNTIME_ENV_VALIDATION=true
 ENV CI=true
 
 # Copy lockfile and manifest for dependency installation caching
-COPY pnpm-lock.yaml package.json .npmrc* ./
+COPY pnpm-lock.yaml package.json .npmrc* *.tgz ./
 COPY patches* ./patches/
 
 ARG NPM_DOMAIN=git.infra.mintel.me

app/[locale]/[slug]/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getPageBySlug } from '@/lib/pages';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -20,12 +20,16 @@ export default async function Image({
   }
 
   const fonts = await getOgFonts();
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
   return new ImageResponse(
     <OGImageTemplate
-      title={pageData.frontmatter.title}
-      description={pageData.frontmatter.excerpt}
+      title="Die Experten für Kabelnetzbau"
+      description={`${pageData.frontmatter.title}`}
       label="Information"
+      image={bg}
+      logo={logo}
     />,
     {
       ...OG_IMAGE_SIZE,

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

@@ -229,7 +229,7 @@ export default async function Page(props: { params: Promise<{ locale: string; sl
 
       {/* Support Section */}
       <Container>
-        <div className="mt-24 mb-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group animate-slight-fade-in-from-bottom">
+        <div className="mt-8 mb-8 md:mt-24 md:mb-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group animate-slight-fade-in-from-bottom">
           <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('needHelp')}</h3>

app/[locale]/blog/[slug]/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getPostBySlug } from '@/lib/blog';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 import { SITE_URL } from '@/lib/schema';
 
 export const size = OG_IMAGE_SIZE;
@@ -52,13 +52,16 @@ export default async function Image({
   if (featuredImage) {
     base64Image = await fetchImageAsBase64(featuredImage);
   }
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
   return new ImageResponse(
     <OGImageTemplate
-      title={post.frontmatter.title}
-      description={post.frontmatter.excerpt}
+      title="Die Experten für Kabelnetzbau"
+      description={`${post.frontmatter.title}`}
       label={post.frontmatter.category || 'Blog'}
-      image={base64Image || featuredImage}
+      image={base64Image || featuredImage || bg}
+      logo={logo}
     />,
     {
       ...OG_IMAGE_SIZE,

app/[locale]/blog/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -11,9 +11,17 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Blog.meta' });
   const fonts = await getOgFonts();
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
   return new ImageResponse(
-    <OGImageTemplate title={t('title')} description={t('description')} label="Blog" />,
+    <OGImageTemplate 
+      title="Die Experten für Kabelnetzbau" 
+      description={t('title')} 
+      label="Blog" 
+      image={bg}
+      logo={logo}
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts,

app/[locale]/contact/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -11,12 +11,22 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Contact' });
   const fonts = await getOgFonts();
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
-  const title = t('meta.title') || t('title');
-  const description = t('meta.description') || t('subtitle');
+  let title = t('meta.title') || t('title');
+  if (title.startsWith('E-TIB GmbH | ')) {
+    title = title.substring('E-TIB GmbH | '.length);
+  }
 
   return new ImageResponse(
-    <OGImageTemplate title={title} description={description} label="Contact" />,
+    <OGImageTemplate 
+      title="Die Experten für Kabelnetzbau" 
+      description={title} 
+      label="Contact" 
+      image={bg}
+      logo={logo}
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts,

app/[locale]/contact/page.tsx

@@ -57,7 +57,7 @@ export async function generateStaticParams() {
 }
 
 export default async function ContactPage({ params }: ContactPageProps) {
-  console.log('--- RENDERING CONTACT PAGE FOR LOCALE ---');
+
   const { locale } = await params;
   setRequestLocale(locale);
   const t = await getTranslations({ locale, namespace: 'Contact' });
@@ -150,7 +150,7 @@ export default async function ContactPage({ params }: ContactPageProps) {
         <Container>
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16">
             {/* Contact Info */}
-            <div className="lg:col-span-5 space-y-6 md:space-y-12">
+            <div className="lg:col-span-5 order-2 lg:order-1 space-y-6 md:space-y-12">
               <div className="animate-fade-in">
                 <Heading level={3} subtitle={t('info.subtitle')} className="mb-6 md:mb-8">
                   {t('info.howToReachUs')}
@@ -249,7 +249,7 @@ export default async function ContactPage({ params }: ContactPageProps) {
             </div>
 
             {/* Contact Form */}
-            <div className="lg:col-span-7">
+            <div className="lg:col-span-7 order-1 lg:order-2">
               <Suspense
                 fallback={
                   <div className="animate-pulse bg-neutral-medium h-96 rounded-2xl md:rounded-3xl"></div>

app/[locale]/error.tsx

@@ -5,7 +5,7 @@ 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,
@@ -65,7 +65,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 +81,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 +90,9 @@ export default function Error({
                 className="p-4 rounded-2xl bg-red-500/20 border border-red-500/40 backdrop-blur-md shadow-[0_0_30px_rgba(239,68,68,0.3)]"
               >
                 <ShieldAlert className="w-12 h-12 text-red-500" />
-              </motion.div>
+              </m.div>
             </div>
-          </motion.div>
+          </m.div>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-12 gap-8 w-full items-start">

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

@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server';
+
+export async function POST(req: Request) {
+  try {
+    const rawText = await req.text();
+    // Sentry sends NDJSON (Newline Delimited JSON). Split by newline to parse safely.
+    const items = rawText.split('\n').filter(Boolean).map(line => JSON.parse(line));
+    console.log("CLIENT ERROR INTERCEPTED:", JSON.stringify(items[0], null, 2));
+  } catch (e) {
+    console.log("Failed to parse relay body (NDJSON)", e);
+  }
+  return NextResponse.json({ success: true });
+}

app/[locale]/layout.tsx

@@ -10,6 +10,7 @@ import { getMessages } from 'next-intl/server';
 import '../../styles/globals.css';
 import { SITE_URL } from '@/lib/schema';
 import FeedbackClientWrapper from '@/components/FeedbackClientWrapper';
+
 import { setRequestLocale } from 'next-intl/server';
 import { Inter } from 'next/font/google';
 import { mapFileSlugToTranslated } from '@/lib/slugs';
@@ -31,20 +32,22 @@ 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',
       default: 'E-TIB | Die Experten für Kabelnetzbau',
     },
-    description: 'Ihr Partner für Kabelleitungstiefbau, Horizontalspülbohrungen, Planung und Vermessung in Guben und überregional.',
+    description: 'Ihr Partner für Kabelleitungsnetzbau, Horizontalspülbohrungen, Planung und Vermessung in Guben und überregional.',
     metadataBase: new URL(baseUrl),
     manifest: '/manifest.webmanifest',
     alternates: {
-      canonical: `${baseUrl}/${locale}`,
+      canonical: `/${locale}`,
       languages: {
-        de: `${baseUrl}/de`,
-        en: `${baseUrl}/en`,
+        'de': `/de`,
+        'en': `/en`,
+        'x-default': `/de`,
       },
     },
   };
@@ -59,6 +62,9 @@ export const viewport: Viewport = {
   themeColor: '#117c61',
 };
 
+export async function generateStaticParams() {
+  return [{ locale: 'de' }, { locale: 'en' }];
+}
 
 export default async function Layout(props: {
   children: React.ReactNode;
@@ -147,19 +153,9 @@ export default async function Layout(props: {
   const serverServices = getServerAppServices();
 
   try {
-    const { headers } = await import('next/headers');
-    const requestHeaders = await headers();
-
     // Disable analytics in CI to prevent console noise/score penalties
     if (process.env.NEXT_PUBLIC_CI === 'true') {
       // Skip setting server context for analytics in CI
-    } else if ('setServerContext' in serverServices.analytics) {
-      (serverServices.analytics as any).setServerContext({
-        userAgent: requestHeaders.get('user-agent') || undefined,
-        language: requestHeaders.get('accept-language')?.split(',')[0] || undefined,
-        referrer: requestHeaders.get('referer') || undefined,
-        ip: requestHeaders.get('x-forwarded-for')?.split(',')[0] || undefined,
-      });
     }
 
     // Server-side analytics tracking removed to prevent duplicate/empty events.
@@ -174,26 +170,21 @@ export default async function Layout(props: {
 
   // Read directly from process.env — bypasses all abstraction to guarantee correctness
   const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
-
-  const cookieStore = await cookies();
-  const hasSeenLoader = cookieStore.has('etib_initial_loader_v5');
+  const hasSeenLoader = true; // Disabled to allow static generation and instant LCP (Lighthouse 100)
 
   return (
     <html
       lang={safeLocale}
       className={`scroll-smooth overflow-x-hidden ${inter.variable}`}
       data-scroll-behavior="smooth"
+      suppressHydrationWarning
     >
       <head>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-        <link rel="preconnect" href="https://img.infra.mintel.me" />
         <link rel="icon" href="/favicon.ico" sizes="any" />
         <link rel="apple-touch-icon" href="/apple-icon.png" sizes="180x180" />
-        {/* Preload critical hero video */}
-        <link rel="preload" as="video" href="/assets/videos/web/hero-bohrung.mp4" type="video/mp4" />
+
       </head>
-      <body className="relative flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white">
+      <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 />
@@ -205,7 +196,7 @@ export default async function Layout(props: {
             
             <main
               id="main-content"
-              className="flex-grow animate-fade-in overflow-visible pb-[90px] md:pb-0"
+              className="flex-grow animate-fade-in overflow-visible"
               tabIndex={-1}
             >
               {children}
@@ -214,6 +205,7 @@ export default async function Layout(props: {
             <Footer companyInfo={companyInfo} />
             <JsonLd />
             <AnalyticsShell />
+
             {feedbackEnabled && <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />}
           </TransitionProvider>
         </NextIntlClientProvider>

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]/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -10,17 +10,21 @@ export const runtime = 'nodejs';
 export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Index.meta' });
+
   const fonts = await getOgFonts();
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
   return new ImageResponse(
     <OGImageTemplate
-      title={t('title')}
-      description={t('description')}
-      label="Reliable Energy Infrastructure"
+      title="Die Experten für Kabelnetzbau"
+      label="Kabelnetzbau & Infrastruktur"
+      image={bg}
+      logo={logo}
     />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
     },
   );
-}
+}

app/[locale]/page.tsx

@@ -4,23 +4,23 @@ import { notFound } from 'next/navigation';
 import { getMdxContent } from '@/lib/mdx';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 
-export const dynamic = 'force-dynamic';
+import nextDynamic from 'next/dynamic';
+import { getImageProps } from 'next/image';
 
-// Import components used in MDX
 import { HeroVideo as HomeHero } from '@/components/blocks/HeroVideo';
-import { SubCompanyTiles as HomeSubCompanyTiles } from '@/components/blocks/SubCompanyTiles';
-import { CompetenceBentoGrid as HomeCompetenceBentoGrid } from '@/components/blocks/CompetenceBentoGrid';
-import { ReferencesSlider as HomeReferencesSlider } from '@/components/blocks/ReferencesSlider';
-import { FaqBlock } from '@/components/blocks/FaqBlock';
-import { CertificatesBlock } from '@/components/blocks/CertificatesBlock';
+const HomeSubCompanyTiles = nextDynamic(() => import('@/components/blocks/SubCompanyTiles').then(mod => mod.SubCompanyTiles));
+const HomeCompetenceBentoGrid = nextDynamic(() => import('@/components/blocks/CompetenceBentoGrid').then(mod => mod.CompetenceBentoGrid));
+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));
 import { HeroSection } from '@/components/blocks/HeroSection';
 import JsonLd from '@/components/JsonLd';
 
 import { Button } from '@/components/ui/Button';
 import { Heading } from '@/components/ui/Heading';
-import { AnimatedCounter } from '@/components/ui';
-import { InteractiveGermanyMap } from '@/components/blocks/InteractiveGermanyMap';
-import { ScaleOfImpact } from '@/components/blocks/ScaleOfImpact';
+const AnimatedCounter = nextDynamic(() => import('@/components/ui').then(mod => mod.AnimatedCounter));
+const InteractiveGermanyMap = nextDynamic(() => import('@/components/blocks/InteractiveGermanyMap').then(mod => mod.InteractiveGermanyMap));
+const ScaleOfImpact = nextDynamic(() => import('@/components/blocks/ScaleOfImpact').then(mod => mod.ScaleOfImpact));
 import { getAllReferences } from '@/lib/references';
 
 const mdxComponents = (references: any[]) => ({
@@ -37,6 +37,77 @@ const mdxComponents = (references: any[]) => ({
   AnimatedCounter,
   InteractiveGermanyMap,
   ScaleOfImpact,
+  ResponsiveImage: (props: any) => {
+    // Parse src if it's already a next image proxy
+    let src = props.src;
+    if (typeof src === 'string' && src.startsWith('/_next/image')) {
+      try {
+        const urlParam = new URLSearchParams(src.split('?')[1]).get('url');
+        if (urlParam) src = decodeURIComponent(urlParam);
+      } catch (e) {
+        // Fallback
+      }
+    }
+    
+    // Use Next.js getImageProps for responsive srcSet generation
+    const {
+      props: { srcSet, src: finalSrc, sizes }
+    } = getImageProps({
+      src,
+      alt: props.alt || '',
+      width: 1920,
+      height: 1080,
+      sizes: '(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 50vw',
+      quality: 80,
+    });
+
+    return (
+      <img 
+        {...props} 
+        src={finalSrc} 
+        srcSet={srcSet}
+        sizes={sizes}
+        loading="lazy" 
+        decoding="async" 
+      />
+    );
+  },
+  img: (props: any) => {
+    // Parse src if it's already a next image proxy
+    let src = props.src;
+    if (typeof src === 'string' && src.startsWith('/_next/image')) {
+      try {
+        const urlParam = new URLSearchParams(src.split('?')[1]).get('url');
+        if (urlParam) src = decodeURIComponent(urlParam);
+      } catch (e) {
+        // Fallback
+      }
+    }
+    
+    // Use Next.js getImageProps for responsive srcSet generation
+    const {
+      props: { srcSet, src: finalSrc, sizes }
+    } = getImageProps({
+      src,
+      alt: props.alt || '',
+      width: 1920,
+      height: 1080,
+      sizes: '(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 50vw',
+      quality: 80,
+    });
+
+    return (
+      <img 
+        {...props} 
+        src={finalSrc} 
+        srcSet={srcSet}
+        sizes={sizes}
+        loading="lazy" 
+        decoding="async" 
+        style={{ width: '100%', height: 'auto', ...props.style }}
+      />
+    );
+  }
 });
 
 export async function generateMetadata(props: any): Promise<Metadata> {

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

@@ -1,38 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import ReferenceDetail from './page';
-
-// Mock next/navigation
-vi.mock('next/navigation', () => ({
-  notFound: vi.fn(),
-}));
-
-// Mock next-intl/server
-vi.mock('next-intl/server', () => ({
-  setRequestLocale: vi.fn(),
-  getTranslations: vi.fn().mockResolvedValue(() => 'translated text'),
-}));
-
-// Mock @/lib/references
-vi.mock('@/lib/references', () => ({
-  getReferenceBySlug: vi.fn().mockResolvedValue({
-    slug: 'test-slug',
-    frontmatter: {
-      title: 'Test Title',
-      location: 'Test Location',
-      category: 'Test Category',
-    },
-    content: 'Test content',
-  }),
-}));
-
-describe('ReferenceDetail Page TDD', () => {
-  it('renders reference detail correctly', async () => {
-    const props = {
-      params: Promise.resolve({ locale: 'de', slug: 'test-slug' })
-    };
-    
-    // We expect the execution to fail if getTranslations is not defined/imported inside page.tsx
-    const component = await ReferenceDetail(props);
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,212 +0,0 @@
-import { notFound } from 'next/navigation';
-import { Container, Badge, Heading } from '@/components/ui';
-import { setRequestLocale, getTranslations } from 'next-intl/server';
-import { Metadata } from 'next';
-import { getReferenceBySlug, getAllReferences } from '@/lib/references';
-import { MDXRemote } from 'next-mdx-remote/rsc';
-import { SITE_URL } from '@/lib/schema';
-import TrackedLink from '@/components/analytics/TrackedLink';
-import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
-import { MapPin, Calendar, Briefcase, ChevronLeft } from 'lucide-react';
-import Image from 'next/image';
-
-interface PageProps {
-  params: Promise<{
-    locale: string;
-    slug: string;
-  }>;
-}
-
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
-  const { locale, slug } = await params;
-  if (locale !== 'de' && locale !== 'en') return {};
-
-  const reference = await getReferenceBySlug(slug, locale);
-  if (!reference) return {};
-
-  return {
-    title: `${reference.frontmatter.title} | Referenzen | E-TIB Gruppe`,
-    description: `Details zum Projekt ${reference.frontmatter.title} in ${reference.frontmatter.location}.`,
-    alternates: {
-      canonical: `${SITE_URL}/${locale}/referenzen/${slug}`,
-    },
-    openGraph: {
-      title: `${reference.frontmatter.title} | E-TIB`,
-      description: `Details zum Projekt ${reference.frontmatter.title} in ${reference.frontmatter.location}.`,
-      url: `${SITE_URL}/${locale}/referenzen/${slug}`,
-    },
-  };
-}
-
-export async function generateStaticParams(props: any) {
-  const params = await props.params;
-  const locale = params?.locale || 'de'; // fallback to 'de' if undefined
-  const references = await getAllReferences(locale);
-  return references.map((ref) => ({
-    slug: ref.slug,
-    locale
-  }));
-}
-
-export default async function ReferenceDetail(props: { params: Promise<{ locale: string; slug: string }> }) {
-  const { locale, slug } = await props.params;
-  
-  if (locale !== 'de' && locale !== 'en') {
-    notFound();
-  }
-  
-  setRequestLocale(locale);
-  const reference = await getReferenceBySlug(slug, locale);
-  const t = await getTranslations('ReferenceDetail');
-
-  if (!reference) {
-    notFound();
-  }
-
-  // MDX components mapping for industrial typography
-  const mdxComponents = {
-    Heading,
-    h1: (props: any) => <Heading level={1} size="2" className="hidden" {...props} />, // Hidden because Hero handles H1
-    h2: (props: any) => <Heading level={2} size="3" className="mt-16 mb-6 border-b border-neutral-100 pb-4 text-neutral-dark" {...props} />,
-    h3: (props: any) => <Heading level={3} size="4" className="mt-12 mb-4 text-primary" {...props} />,
-    h4: (props: any) => <Heading level={4} size="5" className="mt-8 mb-4 uppercase tracking-widest text-neutral-500" {...props} />,
-    p: (props: any) => <p className="text-base md:text-lg text-text-secondary leading-[1.8] mb-6 font-medium max-w-3xl" {...props} />,
-    ul: (props: any) => <ul className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 my-12" {...props} />,
-    ol: (props: any) => <ol className="list-decimal pl-6 mb-8 space-y-3 text-base md:text-lg text-text-secondary font-medium max-w-3xl" {...props} />,
-    li: (props: any) => {
-      // Smart Metric Card Logic
-      let text = '';
-      if (typeof props.children === 'string') {
-        text = props.children;
-      } else if (Array.isArray(props.children)) {
-        text = props.children.map((c: any) => typeof c === 'string' ? c : '').join('');
-      }
-
-      const match = text.match(/^([\d.,]+)\s*(m|Satz|Stück|km|kV|Fasern)\b(.*)/);
-      
-      if (match && typeof props.children === 'string') {
-        const [, value, unit, rest] = match;
-        return (
-          <li className="bg-white p-6 md:p-8 rounded-3xl border border-neutral-100 flex flex-col justify-center hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:border-primary/30 transition-all duration-500 group hover:-translate-y-1 relative overflow-hidden">
-            <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-neutral-50 to-transparent rounded-bl-full -z-10 group-hover:from-primary/5 transition-colors duration-500" />
-            <div className="flex items-baseline gap-2 mb-3">
-              <span className="text-4xl md:text-5xl font-bold font-heading text-primary tracking-tight">{value}</span>
-              <span className="text-lg md:text-xl font-bold text-neutral-400">{unit}</span>
-            </div>
-            <span className="text-neutral-600 font-semibold text-sm md:text-base leading-snug">{rest.replace(/^[\s-]*\s/, '')}</span>
-          </li>
-        );
-      }
-
-      return (
-        <li className="bg-neutral-50 p-6 rounded-3xl border border-neutral-100 flex items-start gap-4 hover:shadow-md transition-all duration-300 group hover:-translate-y-1">
-          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5 group-hover:bg-primary/20 transition-colors">
-            <svg className="w-4 h-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-            </svg>
-          </div>
-          <span className="text-neutral-700 font-semibold leading-relaxed">{props.children}</span>
-        </li>
-      );
-    },
-    a: (props: any) => <a className="text-primary hover:text-primary-dark underline decoration-primary/30 underline-offset-4 hover:decoration-primary transition-all font-bold" {...props} />,
-    strong: (props: any) => <strong className="font-bold text-neutral-900" {...props} />,
-    blockquote: (props: any) => (
-      <blockquote className="border-l-4 border-primary pl-6 py-3 my-10 italic bg-neutral-50 rounded-r-2xl text-neutral-700 font-medium max-w-3xl shadow-sm" {...props} />
-    ),
-    hr: (props: any) => <hr className="my-16 border-t-2 border-neutral-100 max-w-3xl" {...props} />,
-    img: (props: any) => <img className="rounded-2xl shadow-2xl my-12 max-w-full h-auto border border-neutral-100" {...props} />,
-  };
-
-  return (
-    <div className="flex flex-col min-h-screen bg-white">
-      {/* Hero Section */}
-      <section className="bg-[#050B14] text-white pt-28 pb-10 md:pt-52 md:pb-24 min-h-[30vh] md:min-h-[45vh] flex flex-col justify-end relative overflow-hidden">
-        {reference.frontmatter.featuredImage && (
-          <div className="absolute inset-0 z-0">
-            <Image
-              src={reference.frontmatter.featuredImage}
-              alt={reference.frontmatter.title}
-              fill
-              className="object-cover opacity-30 mix-blend-luminosity scale-105"
-              priority
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-[#050B14] via-[#050B14]/70 to-transparent" />
-            <div className="absolute inset-0 bg-gradient-to-r from-[#050B14] via-[#050B14]/40 to-transparent" />
-          </div>
-        )}
-        <div className="absolute inset-0 opacity-20 z-0 pointer-events-none">
-          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/30 via-transparent to-transparent" />
-        </div>
-        <Container className="relative z-10">
-          <div className="mb-12">
-            <TrackedLink
-              href={`/${locale}/referenzen`}
-              className="inline-flex items-center gap-2 text-white/60 hover:text-white transition-colors uppercase tracking-widest text-xs font-bold"
-              eventProperties={{ location: 'reference_back_btn' }}
-            >
-              <ChevronLeft className="w-4 h-4" />
-              {t('backToOverview')}
-            </TrackedLink>
-          </div>
-          <div className="max-w-5xl">
-            <Badge variant="accent" className="mb-6">
-              {t('projectReference')}
-            </Badge>
-            <Heading level={1} variant="white" className="mb-10 leading-[1.1] md:text-6xl lg:text-7xl drop-shadow-lg">
-              {reference.frontmatter.title}
-            </Heading>
-            
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 mt-12 md:mt-16">
-              <div className="flex items-start gap-4 p-6 md:p-8 bg-white/5 rounded-3xl border border-white/10 backdrop-blur-md transition-all hover:bg-white/10">
-                <MapPin className="w-8 h-8 text-primary shrink-0 opacity-80" />
-                <div>
-                  <p className="text-xs text-white/50 mb-1.5 uppercase tracking-widest font-bold">{t('location')}</p>
-                  <p className="font-semibold text-lg md:text-xl text-white/90">{reference.frontmatter.location}</p>
-                </div>
-              </div>
-              <div className="flex items-start gap-4 p-6 md:p-8 bg-white/5 rounded-3xl border border-white/10 backdrop-blur-md transition-all hover:bg-white/10">
-                <Briefcase className="w-8 h-8 text-primary shrink-0 opacity-80" />
-                <div>
-                  <p className="text-xs text-white/50 mb-1.5 uppercase tracking-widest font-bold">{t('client')}</p>
-                  <p className="font-semibold text-lg md:text-xl text-white/90 line-clamp-2">{reference.frontmatter.client}</p>
-                </div>
-              </div>
-              <div className="flex items-start gap-4 p-6 md:p-8 bg-white/5 rounded-3xl border border-white/10 backdrop-blur-md transition-all hover:bg-white/10">
-                <Calendar className="w-8 h-8 text-primary shrink-0 opacity-80" />
-                <div>
-                  <p className="text-xs text-white/50 mb-1.5 uppercase tracking-widest font-bold">{t('period')}</p>
-                  <p className="font-semibold text-lg md:text-xl text-white/90">{reference.frontmatter.dateString || new Date(reference.frontmatter.date).getFullYear()}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </Container>
-      </section>
-
-      {/* Main Content Area */}
-      <Container className="py-16 md:py-24">
-        <div className="max-w-4xl mx-auto">
-          <h2 className="text-3xl font-bold text-neutral-dark mb-8">{t('scopeTitle')}</h2>
-          
-          <div className="w-full">
-            <MDXRemote source={reference.content} components={mdxComponents} />
-          </div>
-
-          <div className="mt-20 flex justify-center">
-             <TrackedLink
-                href={`/${locale}/referenzen`}
-                className={getButtonClasses('primary', 'lg')}
-                eventProperties={{ location: 'reference_bottom_back_btn' }}
-              >
-                <span className="relative z-10 flex items-center justify-center gap-2">
-                  {t('viewAll')}
-                </span>
-                <ButtonOverlay variant="primary" />
-              </TrackedLink>
-          </div>
-        </div>
-      </Container>
-    </div>
-  );
-}

app/[locale]/referenzen/page.tsx

@@ -3,13 +3,43 @@ import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import { getAllReferences } from '@/lib/references';
 import TrackedLink from '@/components/analytics/TrackedLink';
-import { MapPin, Calendar, Briefcase } from 'lucide-react';
+import { MapPin, Calendar, Briefcase, Zap, Activity, ShieldCheck, Wrench, CheckCircle2 } from 'lucide-react';
 import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
 import { SITE_URL } from '@/lib/schema';
 import Image from 'next/image';
 import { InteractiveGermanyMap } from '@/components/blocks/InteractiveGermanyMap';
 import { HeroSection } from '@/components/blocks/HeroSection';
 import { defaultLocations, minorLocations } from '@/lib/map-data';
+import { MDXRemote } from 'next-mdx-remote/rsc';
+
+const CustomLi = ({ children, ...props }: any) => {
+  let text = '';
+  if (typeof children === 'string') text = children;
+  else if (Array.isArray(children)) text = children.map((c: any) => typeof c === 'string' ? c : '').join(' ');
+  else if (children?.props?.children) text = children.props.children;
+  
+  const lowerText = String(text).toLowerCase();
+  
+  let Icon = CheckCircle2;
+  if (lowerText.includes('kabel')) Icon = Zap;
+  else if (lowerText.includes('bohrung')) Icon = Activity;
+  else if (lowerText.includes('rohr')) Icon = ShieldCheck;
+  else if (lowerText.includes('montage')) Icon = Wrench;
+  else if (lowerText.includes('vlf') || lowerText.includes('otdr')) Icon = Zap;
+  
+  return (
+    <li className="flex items-start gap-3 pl-4 pr-6 py-3.5 bg-neutral-50/50 border border-neutral-100 rounded-xl" {...props}>
+      <Icon className="w-5 h-5 text-primary shrink-0 mt-0.5" />
+      <span className="text-sm font-medium text-neutral-700 leading-snug [&>p]:mb-0">{children}</span>
+    </li>
+  );
+};
+
+const mdxComponents = {
+  ul: (props: any) => <ul className="grid grid-cols-1 gap-2 mb-6" {...props} />,
+  li: CustomLi,
+  p: (props: any) => <p className="text-neutral-600 text-sm mb-4 leading-relaxed" {...props} />,
+};
 
 interface PageProps {
   params: Promise<{
@@ -72,7 +102,7 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
   });
 
   return (
-    <div className="flex flex-col min-h-screen bg-neutral-50 pb-16 md:pb-24">
+    <div className="flex flex-col min-h-screen bg-neutral-50 pb-8 md:pb-24">
       {/* Map Section */}
       <InteractiveGermanyMap
         isHero={true}
@@ -90,11 +120,10 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
       <Container className="relative z-20 mt-16 md:mt-24">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
           {references.map((ref) => (
-            <TrackedLink
+            <div
               key={ref.slug}
-              href={`/${locale}/referenzen/${ref.slug}`}
-              eventProperties={{ location: 'reference_list_card', slug: ref.slug }}
-              className="group flex flex-col bg-white border border-neutral-100 rounded-3xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer block"
+              id={ref.slug}
+              className="flex flex-col bg-white border border-neutral-100 rounded-3xl overflow-hidden shadow-sm block scroll-mt-32"
             >
               <div className="flex flex-col h-full relative">
                 {/* Image Section */}
@@ -111,7 +140,7 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
                       <Image src="/assets/logo.png" alt="E-TIB Logo" width={80} height={80} className="opacity-20 grayscale" />
                     </div>
                   )}
-                  <div className="absolute inset-0 bg-black/5 transition-colors duration-500" />
+                  <div className="absolute inset-0 bg-black/5" />
                   
                   {/* Location Badge */}
                   <div className="absolute top-4 left-4 z-10">
@@ -124,10 +153,17 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
 
                 {/* Content Section */}
                 <div className="flex flex-col flex-grow p-6 md:p-8 bg-white">
-                  <h3 className="text-xl md:text-2xl font-bold font-heading text-neutral-dark mb-6 transition-colors line-clamp-3 leading-[1.2] group-hover:text-primary">
+                  <h3 className="text-xl md:text-2xl font-bold font-heading text-neutral-dark mb-6 leading-[1.2]">
                     {ref.frontmatter.title}
                   </h3>
                   
+                  {/* Project Details / Content */}
+                  {ref.content && (
+                    <div className="flex-grow mb-6">
+                      <MDXRemote source={ref.content} components={mdxComponents} />
+                    </div>
+                  )}
+                  
                   {/* Technical 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">
@@ -147,12 +183,12 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
                   </div>
                 </div>
               </div>
-            </TrackedLink>
+            </div>
           ))}
         </div>
 
         {/* Support Section */}
-        <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group">
+        <div className="mt-8 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>

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

@@ -158,7 +158,7 @@ export default async function StandortDetail(props: { params: Promise<{ locale:
 
       {/* Support Section */}
       <Container>
-        <div className="mt-12 mb-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group animate-slight-fade-in-from-bottom">
+        <div className="mt-8 mb-8 md:mt-24 md:mb-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group animate-slight-fade-in-from-bottom">
           <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('needHelp')}</h3>

app/[locale]/standorte/page.tsx

@@ -114,7 +114,7 @@ export default async function StandorteOverview(props: { params: Promise<{ local
         </div>
 
         {/* Support Section */}
-        <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group">
+        <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>

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/brochure.ts

@@ -1,102 +0,0 @@
-'use server';
-
-import { getServerAppServices } from '@/lib/services/create-services.server';
-
-export async function requestBrochureAction(formData: FormData) {
-  const services = getServerAppServices();
-  const logger = services.logger.child({ action: 'requestBrochureAction' });
-
-  const { headers } = await import('next/headers');
-  const requestHeaders = await headers();
-
-  if ('setServerContext' in services.analytics) {
-    (services.analytics as any).setServerContext({
-      userAgent: requestHeaders.get('user-agent') || undefined,
-      language: requestHeaders.get('accept-language')?.split(',')[0] || undefined,
-      referrer: requestHeaders.get('referer') || undefined,
-      ip: requestHeaders.get('x-forwarded-for')?.split(',')[0] || undefined,
-    });
-  }
-
-  services.analytics.track('brochure-request-attempt');
-
-  const email = formData.get('email') as string;
-  const locale = (formData.get('locale') as string) || 'en';
-
-  // Anti-spam Honeypot Check
-  const honeypot = formData.get('company_website') as string;
-  if (honeypot) {
-    logger.warn('Spam detected via honeypot in brochure request', { email });
-    // Silently succeed to fool the bot without doing actual work
-    return { success: true };
-  }
-
-  if (!email) {
-    logger.warn('Missing email in brochure request');
-    return { success: false, error: 'Missing email address' };
-  }
-
-  // Basic email validation
-  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-    return { success: false, error: 'Invalid email address' };
-  }
-
-  // 1. Save to CMS - Removed along with Payload CMS
-
-  // 2. Notify via Gotify
-  try {
-    await services.notifications.notify({
-      title: '📑 Brochure Download Request',
-      message: `New brochure download request from ${email} (${locale})`,
-      priority: 3,
-    });
-  } catch (error) {
-    logger.error('Failed to send notification', { error });
-  }
-
-  // 3. Send Brochure via Email
-  const brochureUrl = `https://e-tib.com/brochure/etib-product-catalog-${locale}.pdf`;
-
-  try {
-    const { sendEmail } = await import('@/lib/mail/mailer');
-    const { render } = await import('@mintel/mail');
-    const React = await import('react');
-    const { BrochureDeliveryEmail } = await import('@/components/emails/BrochureDeliveryEmail');
-
-    const html = await render(
-      React.createElement(BrochureDeliveryEmail, {
-        _email: email,
-        brochureUrl,
-        locale: locale as 'en' | 'de',
-      }),
-    );
-
-    const emailResult = await sendEmail({
-      to: email,
-      subject: locale === 'de' ? 'Ihr E-TIB Kabelkatalog' : 'Your E-TIB Cable Catalog',
-      html,
-    });
-
-    if (emailResult.success) {
-      logger.info('Brochure email sent successfully', { email });
-    } else {
-      logger.error('Failed to send brochure email', { error: emailResult.error, email });
-      services.errors.captureException(new Error(`Brochure email failed: ${emailResult.error}`), {
-        action: 'requestBrochureAction_email',
-        email,
-      });
-      return { success: false, error: 'Failed to send email. Please try again later.' };
-    }
-  } catch (error) {
-    logger.error('Exception while sending brochure email', { error });
-    return { success: false, error: 'Failed to send email. Please try again later.' };
-  }
-
-  // 4. Track success
-  services.analytics.track('brochure-request-success', {
-    locale,
-    delivery_method: 'email',
-  });
-
-  return { success: true };
-}

app/actions/getAnnotatorAssets.ts

@@ -0,0 +1,36 @@
+'use server';
+import fs from 'fs';
+import path from 'path';
+
+export async function getAnnotatorAssets() {
+  // Try /app/public first (docker), then process.cwd()/public
+  let publicDir = '/app/public';
+  if (!fs.existsSync(publicDir)) {
+    publicDir = path.join(process.cwd(), 'public');
+  }
+  
+  const walk = async (dir: string): Promise<string[]> => {
+    let results: string[] = [];
+    if (!fs.existsSync(dir)) return results;
+    
+    const list = await fs.promises.readdir(dir);
+    for (const file of list) {
+      const filePath = path.join(dir, file);
+      const stat = await fs.promises.stat(filePath);
+      if (stat && stat.isDirectory()) {
+        const nested = await walk(filePath);
+        results = results.concat(nested);
+      } else {
+        if (filePath.match(/\.(png|jpg|jpeg|webp|mp4|svg)$/i)) {
+          results.push(filePath.replace(publicDir, ''));
+        }
+      }
+    }
+    return results;
+  };
+  
+  const results = await walk(publicDir);
+  
+  // Console logs removed for absolute silence & speed
+  return results;
+}

app/actions/submitAnnotations.ts

@@ -0,0 +1,52 @@
+'use server';
+
+import { sendEmail } from '@/lib/mail/mailer';
+import { getServerAppServices } from '@/lib/services/create-services.server';
+
+export async function submitAnnotations(annotations: any[]) {
+  const services = getServerAppServices();
+  const logger = services.logger.child({ action: 'submitAnnotations' });
+
+  if (!annotations || annotations.length === 0) {
+    return { success: false, error: 'Keine Korrekturen vorhanden.' };
+  }
+
+  try {
+    const jsonContent = JSON.stringify(annotations, null, 2);
+    const htmlContent = `
+      <h2>Neue Website-Korrekturen (${annotations.length})</h2>
+      <p>Es wurden neue Korrekturen über den Annotator eingereicht.</p>
+      <ul>
+        ${annotations.map(ann => `
+          <li>
+            <b>${new URL(ann.url).pathname}</b> [${ann.type}]<br />
+            Element: <code>${ann.selector}</code><br />
+            <i>${ann.type === 'image' ? 'Neues Bild: ' : 'Text: '}${ann.newContent}</i>
+          </li>
+        `).join('')}
+      </ul>
+      <p><i>Die genauen Daten (inkl. Scroll-Positionen, Viewport und Zeitstempel) befinden sich hier:</i></p>
+      <pre style="background: #f4f4f4; padding: 10px; border-radius: 5px; font-size: 12px; overflow-x: auto;">
+${jsonContent}
+      </pre>
+    `;
+
+    const notificationResult = await sendEmail({
+      replyTo: 'info@e-tib.com', // Falls Rückfragen nötig
+      subject: `[Korrekturen] ${annotations.length} neue Anmerkungen für E-TIB`,
+      html: htmlContent
+    });
+
+    if (!notificationResult.success) {
+      logger.error('Annotation email FAILED', { error: notificationResult.error });
+      return { success: false, error: notificationResult.error };
+    }
+
+    logger.info('Annotation email sent successfully', { count: annotations.length });
+    return { success: true };
+  } catch (error) {
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    logger.error('Failed to send annotations', { error: errorMsg });
+    return { success: false, error: errorMsg };
+  }
+}

app/manifest.ts

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

app/stats/api/send/route.ts

@@ -40,7 +40,10 @@ export async function POST(request: NextRequest) {
       website: websiteId,
     };
 
-    const umamiEndpoint = config.analytics.umami.apiEndpoint;
+    let umamiEndpoint = config.analytics.umami.apiEndpoint || 'https://analytics.infra.mintel.me';
+    if (!umamiEndpoint.startsWith('http')) {
+      umamiEndpoint = `https://${umamiEndpoint}`;
+    }
 
     // Log the event (internal only)
     logger.debug('Forwarding analytics event', {

app/test/page.tsx

@@ -1,7 +0,0 @@
-export default function TestPage() {
-  return (
-    <div>
-      <h1>TEST PAGE WORKS</h1>
-    </div>
-  );
-}

badge.svg

@@ -0,0 +1 @@
+Not found.

components/AnnotatorClientWrapper.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { useEffect, useState } from 'react';
+import { getAnnotatorAssets } from '@/app/actions/getAnnotatorAssets';
+import { submitAnnotations } from '@/app/actions/submitAnnotations';
+
+const Annotator = dynamic(() => import('@/components/annotator-local/Annotator').then(mod => mod.Annotator), { ssr: false });
+
+export default function AnnotatorClientWrapper() {
+  const [assets, setAssets] = useState<string[]>([]);
+
+  useEffect(() => {
+    getAnnotatorAssets()
+      .then(fetchedAssets => {
+        if (Array.isArray(fetchedAssets)) {
+          setAssets(fetchedAssets);
+        }
+      })
+      .catch(err => console.error('[AnnotatorClientWrapper] Fetch failed:', err));
+  }, []);
+
+  const handleSubmit = async (annotations: any[]) => {
+    const result = await submitAnnotations(annotations);
+    if (!result.success) {
+      throw new Error(result.error);
+    }
+  };
+
+  return <Annotator assets={assets} onSubmit={handleSubmit} />;
+}

components/ContactForm.tsx

@@ -98,7 +98,7 @@ export default function ContactForm() {
   if (status === 'error') {
     return (
       <Card
-        className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-destructive/20 shadow-2xl text-center bg-destructive/5 animate-slide-up"
+        className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-destructive/20 shadow-2xl text-center bg-destructive/5 "
         role="alert"
         aria-live="assertive"
       >
@@ -134,7 +134,7 @@ export default function ContactForm() {
   }
 
   return (
-    <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl animate-slide-up">
+    <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl ">
       <Heading level={3} subtitle={t('form.subtitle')} className="mb-6 md:mb-10">
         {t('form.title')}
       </Heading>

components/DatasheetDownload.tsx

@@ -15,7 +15,7 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
   const { trackEvent } = useAnalytics();
 
   return (
-    <div className={cn('mt-8 animate-slight-fade-in-from-bottom', className)}>
+    <div className={cn('mt-8 ', className)}>
       <a
         href={datasheetPath}
         target="_blank"

components/ExcelDownload.tsx

@@ -15,7 +15,7 @@ export default function ExcelDownload({ excelPath, className }: ExcelDownloadPro
   const { trackEvent } = useAnalytics();
 
   return (
-    <div className={cn('mt-4 animate-slight-fade-in-from-bottom', className)}>
+    <div className={cn('mt-4 ', className)}>
       <a
         href={excelPath}
         target="_blank"

components/OGImageTemplate.tsx

@@ -5,6 +5,7 @@ interface OGImageTemplateProps {
   description?: string;
   label?: string;
   image?: string;
+  logo?: string;
   mode?: 'dark' | 'light' | 'image';
 }
 
@@ -13,11 +14,11 @@ export function OGImageTemplate({
   description,
   label,
   image,
+  logo,
   mode = 'dark',
 }: OGImageTemplateProps) {
-  const primaryBlue = '#001a4d';
-  const accentGreen = '#10a379';
-  const saturatedBlue = '#011dff';
+  const backgroundDark = '#1a1a1a';
+  const primaryGreen = '#0e7a5c';
 
   const containerStyle: React.CSSProperties = {
     height: '100%',
@@ -26,7 +27,7 @@ export function OGImageTemplate({
     flexDirection: 'column',
     alignItems: 'flex-start',
     justifyContent: 'center',
-    backgroundColor: mode === 'light' ? '#ffffff' : primaryBlue,
+    backgroundColor: mode === 'light' ? '#ffffff' : backgroundDark,
     padding: '80px',
     position: 'relative',
     fontFamily: 'Inter',
@@ -65,7 +66,7 @@ export function OGImageTemplate({
               left: 0,
               right: 0,
               bottom: 0,
-              background: 'linear-gradient(to right, rgba(0,26,77,0.95), rgba(0,26,77,0.6))',
+              background: 'linear-gradient(135deg, rgba(26,26,26,0.98) 0%, rgba(26,26,26,0.85) 40%, rgba(14,122,92,0.4) 100%)',
             }}
           />
         </div>
@@ -75,101 +76,127 @@ export function OGImageTemplate({
       <div
         style={{
           position: 'absolute',
-          top: '-150px',
-          right: '-150px',
-          width: '600px',
-          height: '600px',
-          borderRadius: '300px',
-          backgroundColor: `${accentGreen}15`,
+          top: '-300px',
+          right: '-200px',
+          width: '800px',
+          height: '1200px',
+          backgroundColor: `${primaryGreen}1A`,
+          transform: 'rotate(25deg)',
           display: 'flex',
         }}
       />
 
-      <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 10 }}>
-        {/* Label / Category */}
-        {label && (
-          <div
-            style={{
-              fontSize: '24px',
-              fontWeight: 700,
-              color: accentGreen,
-              textTransform: 'uppercase',
-              letterSpacing: '0.3em',
-              marginBottom: '32px',
-              display: 'flex',
-            }}
-          >
-            {label}
-          </div>
-        )}
-
-        {/* Title */}
-        <div
-          style={{
-            fontSize: title.length > 40 ? '64px' : '82px',
-            fontWeight: 700,
-            color: 'white',
-            lineHeight: '1.05',
-            maxWidth: '950px',
-            marginBottom: '40px',
-            display: 'flex',
-            letterSpacing: '-0.02em',
-          }}
-        >
-          {title}
-        </div>
-
-        {/* Description */}
-        {description && (
-          <div
-            style={{
-              fontSize: '32px',
-              color: 'rgba(255,255,255,0.7)',
-              maxWidth: '850px',
-              lineHeight: '1.4',
-              display: 'flex',
-              fontWeight: 400,
-            }}
-          >
-            {description.length > 160 ? description.substring(0, 157) + '...' : description}
-          </div>
-        )}
-      </div>
-
-      {/* Brand Footer */}
+      {/* Main Content Wrapper */}
       <div
         style={{
-          position: 'absolute',
-          bottom: '80px',
-          left: '80px',
           display: 'flex',
-          alignItems: 'center',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          height: '100%',
+          width: '100%',
+          position: 'relative',
+          zIndex: 10,
         }}
       >
+        {/* Top: Text Content */}
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          {/* Label / Category */}
+          {label && (
+            <div
+              style={{
+                fontSize: '24px',
+                fontWeight: 700,
+                color: primaryGreen,
+                textTransform: 'uppercase',
+                letterSpacing: '0.25em',
+                marginBottom: '24px',
+                display: 'flex',
+              }}
+            >
+              {label}
+            </div>
+          )}
+
+          {/* Title */}
+          <div
+            style={{
+              fontSize: '72px',
+              fontWeight: 700,
+              color: 'white',
+              lineHeight: '1.1',
+              maxWidth: '900px',
+              marginBottom: '24px',
+              display: 'flex',
+              letterSpacing: '-0.02em',
+            }}
+          >
+            {title}
+          </div>
+
+          {/* Description */}
+          {description && (
+            <div
+              style={{
+                fontSize: '36px',
+                color: 'rgba(255,255,255,0.85)',
+                maxWidth: '850px',
+                lineHeight: '1.4',
+                display: '-webkit-box',
+                WebkitLineClamp: 3,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+                fontWeight: 400,
+              }}
+            >
+              {description}
+            </div>
+          )}
+        </div>
+
+        {/* Bottom: Brand Footer */}
         <div
           style={{
-            width: '80px',
-            height: '6px',
-            backgroundColor: accentGreen,
-            borderRadius: '3px',
-            marginRight: '24px',
-          }}
-        />
-        <div
-          style={{
-            fontSize: '24px',
-            fontWeight: 700,
-            color: 'white',
-            textTransform: 'uppercase',
-            letterSpacing: '0.15em',
             display: 'flex',
+            alignItems: 'center',
           }}
         >
-          KLZ Cables
+          {logo ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={logo}
+              alt="E-TIB GmbH"
+              height="56"
+              style={{ marginRight: '24px', objectFit: 'contain' }}
+            />
+          ) : (
+            <div
+              style={{
+                width: '80px',
+                height: '6px',
+                backgroundColor: primaryGreen,
+                borderRadius: '3px',
+                marginRight: '24px',
+              }}
+            />
+          )}
+          {!logo && (
+            <div
+              style={{
+                fontSize: '24px',
+                fontWeight: 700,
+                color: 'white',
+                textTransform: 'uppercase',
+                letterSpacing: '0.15em',
+                display: 'flex',
+              }}
+            >
+              E-TIB GmbH
+            </div>
+          )}
         </div>
       </div>
 
-      {/* Saturated Blue Brand Strip */}
+      {/* Primary Green Brand Strip */}
       <div
         style={{
           position: 'absolute',
@@ -177,7 +204,7 @@ export function OGImageTemplate({
           right: 0,
           width: '12px',
           height: '100%',
-          backgroundColor: saturatedBlue,
+          backgroundColor: primaryGreen,
         }}
       />
     </div>

components/ProductSidebar.tsx

@@ -26,7 +26,7 @@ export default function ProductSidebar({
   const t = useTranslations('Products');
 
   return (
-    <aside className={cn('flex flex-col gap-4 animate-slight-fade-in-from-bottom', className)}>
+    <aside className={cn('flex flex-col gap-4 ', className)}>
       {/* Request Quote Form Card */}
       <div className="bg-white rounded-3xl border border-neutral-medium shadow-sm transition-all duration-500 hover:shadow-2xl hover:-translate-y-1 overflow-hidden group/card">
         <div className="bg-primary p-6 text-white relative overflow-hidden">

components/RequestQuoteForm.tsx

@@ -84,7 +84,7 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
   if (status === 'success') {
     return (
       <div
-        className="bg-accent/5 border border-accent/20 text-primary-dark p-4 rounded-xl text-center animate-fade-in !mt-0 w-full"
+        className="bg-accent/5 border border-accent/20 text-primary-dark p-4 rounded-xl text-center  !mt-0 w-full"
         role="alert"
         aria-live="polite"
       >
@@ -126,7 +126,7 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
   if (status === 'error') {
     return (
       <div
-        className="bg-destructive/5 border border-destructive/20 text-destructive p-4 rounded-xl text-center animate-fade-in !mt-0 w-full"
+        className="bg-destructive/5 border border-destructive/20 text-destructive p-4 rounded-xl text-center  !mt-0 w-full"
         role="alert"
         aria-live="assertive"
       >

components/Reveal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import { cn } from '@/components/ui';
 
 interface RevealProps {
@@ -10,40 +10,12 @@ interface RevealProps {
   delay?: number;
 }
 
-export default function Reveal({ children, className, threshold = 0.1, delay = 0 }: RevealProps) {
-  const [isVisible, setIsVisible] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsVisible(true);
-          observer.unobserve(entry.target);
-        }
-      },
-      { threshold }
-    );
-
-    const currentRef = ref.current;
-    if (currentRef) {
-      observer.observe(currentRef);
-    }
-
-    return () => {
-      if (currentRef) {
-        observer.unobserve(currentRef);
-      }
-    };
-  }, [threshold]);
-
+export default function Reveal({ children, className }: RevealProps) {
+  // Reveal animation disabled due to flickering issues on mobile/hydration
   return (
-    <div
-      ref={ref}
-      className={cn('reveal-on-scroll', isVisible && 'is-visible', className)}
-      style={{ transitionDelay: `${delay}ms` }}
-    >
+    <div className={cn(className)}>
       {children}
     </div>
   );
 }
+

components/annotator-local/Annotator.tsx

@@ -0,0 +1,627 @@
+import { useState, useEffect, useMemo } from "react";
+import { AnimatePresence, m, LazyMotion, domAnimation } 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";
+import { finder } from "@medv/finder";
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export interface Annotation {
+  id: string;
+  x: number;
+  y: number;
+  selector: string;
+  type: "text" | "image" | "note";
+  originalContent: string;
+  newContent: string;
+  url: string;
+  elementRect: Record<string, number> | null;
+  scrollX: number;
+  scrollY: number;
+  viewportWidth: number;
+  viewportHeight: number;
+  userAgent: string;
+  timestamp: string;
+}
+
+export interface AnnotatorProps {
+  assets?: string[]; // Array of image URLs for the media browser
+  onSubmit?: (annotations: Annotation[]) => Promise<void>;
+}
+
+export function Annotator({ assets = [], onSubmit }: AnnotatorProps) {
+  const [isActive, setIsActive] = useState(false);
+  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);
+  const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(null);
+  const [annotations, setAnnotations] = useState<Annotation[]>(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem("mintel-annotations");
+      if (saved) {
+        try {
+          return JSON.parse(saved);
+        } catch (e) {
+          console.error("Failed to parse saved annotations", e);
+        }
+      }
+    }
+    return [];
+  });
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("mintel-annotations", JSON.stringify(annotations));
+    }
+  }, [annotations]);
+  
+  // Modal state
+  const [currentType, setCurrentType] = useState<"text" | "image" | "note">("text");
+  const [currentText, setCurrentText] = useState("");
+  const [selectedAsset, setSelectedAsset] = useState<string | null>(null);
+  const [showList, setShowList] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Disable overlays if needed (e.g. inside iframes)
+  const isExcluded = useMemo(() => {
+    if (typeof window === "undefined") return false;
+    return window.self !== window.top;
+  }, []);
+
+  const getSelector = (el: HTMLElement): string => {
+    try {
+      return finder(el, {
+        root: document.body,
+        className: (name) =>
+          !name.startsWith("annotator-") &&
+          !name.includes("[") &&
+          !name.includes("/") &&
+          !name.match(/^[a-z]-[0-9]/),
+        idName: (name) => !name.startsWith("__next") && !name.includes(":"),
+      });
+    } catch {
+      return "unknown";
+    }
+  };
+
+  useEffect(() => {
+    if (!isActive) {
+      setHoveredElement(null);
+      return;
+    }
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (selectedElement) return;
+      const target = e.target as HTMLElement;
+      if (target.closest(".annotator-ui-ignore")) {
+        setHoveredElement(null);
+        return;
+      }
+      setHoveredElement(target);
+    };
+
+    const handleClick = (e: MouseEvent) => {
+      if (selectedElement) return;
+      const target = e.target as HTMLElement;
+      if (target.closest(".annotator-ui-ignore")) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      setSelectedElement(target);
+      setHoveredElement(null);
+      
+      // Auto-detect type
+      if (target.tagName.toLowerCase() === "img") {
+        setCurrentType("image");
+      } else {
+        setCurrentType("text");
+        setCurrentText(target.innerText || "");
+      }
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("click", handleClick, true);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("click", handleClick, true);
+    };
+  }, [isActive, selectedElement]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        if (selectedElement) {
+          setSelectedElement(null);
+        } else if (isActive) {
+          setIsActive(false);
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isActive, selectedElement]);
+
+  const saveAnnotation = () => {
+    if (!selectedElement) return;
+
+    const rect = selectedElement.getBoundingClientRect();
+    const newContent = currentType === "image" ? selectedAsset || "" : currentText;
+    
+    if (!newContent) return;
+
+    const annotation: Annotation = {
+      id: Math.random().toString(36).substring(2, 9),
+      x: rect.left + rect.width / 2 + window.scrollX,
+      y: rect.top + rect.height / 2 + window.scrollY,
+      selector: getSelector(selectedElement),
+      type: currentType,
+      originalContent: currentType === "image" ? (selectedElement as HTMLImageElement).src || "" : selectedElement.innerText,
+      newContent,
+      url: window.location.href,
+      elementRect: rect ? {
+        x: rect.x, y: rect.y, width: rect.width, height: rect.height,
+        top: rect.top, right: rect.right, bottom: rect.bottom, left: rect.left
+      } : null,
+      scrollX: window.scrollX,
+      scrollY: window.scrollY,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+      userAgent: navigator.userAgent,
+      timestamp: new Date().toISOString(),
+    };
+
+    setAnnotations([...annotations, annotation]);
+    setSelectedElement(null);
+    setCurrentText("");
+    setSelectedAsset(null);
+  };
+
+  const exportJSON = () => {
+    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(annotations, null, 2));
+    const downloadAnchorNode = document.createElement("a");
+    downloadAnchorNode.setAttribute("href", dataStr);
+    downloadAnchorNode.setAttribute("download", "corrections.json");
+    document.body.appendChild(downloadAnchorNode);
+    downloadAnchorNode.click();
+    downloadAnchorNode.remove();
+  };
+
+  const handleSubmit = async () => {
+    if (!onSubmit || annotations.length === 0) return;
+    setIsSubmitting(true);
+    try {
+      await onSubmit(annotations);
+      setAnnotations([]);
+      setShowList(false);
+    } catch (error) {
+      console.error("Submission failed", error);
+      alert("Fehler beim Senden der Korrekturen. Bitte JSON Export nutzen.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const deleteAnnotation = (id: string) => {
+    setAnnotations(annotations.filter((a) => a.id !== id));
+  };
+
+  const [updateTick, setUpdateTick] = useState(0);
+
+  useEffect(() => {
+    if (!isActive && !selectedElement) return;
+    
+    let rafId: number;
+    const handleScroll = () => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => setUpdateTick(t => t + 1));
+    };
+    
+    // Use capture phase to catch scrolls on any nested container
+    window.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", handleScroll);
+    
+    return () => {
+      window.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", handleScroll);
+      cancelAnimationFrame(rafId);
+    };
+  }, [isActive, selectedElement]);
+
+  const hoveredRect = useMemo(() => hoveredElement?.getBoundingClientRect(), [hoveredElement, updateTick]);
+  const selectedRect = useMemo(() => selectedElement?.getBoundingClientRect(), [selectedElement, updateTick]);
+
+  if (isExcluded) return null;
+
+  return (
+    <div className="annotator-ui-ignore">
+      {/* 1. Global Toolbar */}
+      <div className="fixed bottom-36 md:bottom-24 right-4 z-[10000] flex flex-col items-end gap-2">
+        <div className="bg-black/80 backdrop-blur-xl border border-white/10 p-1.5 rounded-2xl shadow-2xl flex flex-col items-center gap-1">
+          <button
+            onClick={() => setIsActive(!isActive)}
+            className={cn(
+              "p-2.5 rounded-xl transition-all",
+              isActive
+                ? "bg-blue-500 text-white shadow-lg shadow-blue-500/20"
+                : "text-white/70 hover:text-white hover:bg-white/10"
+            )}
+            title={isActive ? "Modus beenden" : "Korrekturen erfassen"}
+          >
+            {isActive ? <X size={20} /> : <MessageSquare size={20} />}
+          </button>
+
+          <div className="w-6 h-px bg-white/10 my-1" />
+
+          <button
+            onClick={() => setShowList(!showList)}
+            className="p-2.5 text-white/70 hover:text-white hover:bg-white/10 rounded-xl relative"
+            title="Liste anzeigen"
+          >
+            <List size={20} />
+            {annotations.length > 0 && (
+              <span className="absolute -top-1 -right-1 w-4 h-4 bg-blue-500 text-[9px] flex items-center justify-center rounded-full text-white font-bold border border-[#1a1a1a]">
+                {annotations.length}
+              </span>
+            )}
+          </button>
+
+          {annotations.length > 0 && (
+            <>
+              <div className="w-6 h-px bg-white/10 my-1" />
+              <button
+                onClick={exportJSON}
+                className="p-2.5 rounded-xl text-white/70 hover:text-white hover:bg-white/10 transition-all"
+                title="JSON Export"
+              >
+                <Download size={20} />
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* 2. Highlights */}
+      <AnimatePresence>
+        {isActive && (
+          <div className="fixed inset-0 pointer-events-none z-[9998]">
+            {hoveredRect && (
+              <m.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="absolute border-2 border-blue-400 bg-blue-400/10 rounded-sm transition-all duration-200"
+                style={{
+                  top: hoveredRect.top,
+                  left: hoveredRect.left,
+                  width: hoveredRect.width,
+                  height: hoveredRect.height,
+                }}
+              />
+            )}
+
+            {selectedRect && (
+              <m.div
+                initial={{ scale: 0.9, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                className="absolute border-2 border-yellow-400 bg-yellow-400/20 rounded-sm"
+                style={{
+                  top: selectedRect.top,
+                  left: selectedRect.left,
+                  width: selectedRect.width,
+                  height: selectedRect.height,
+                }}
+              />
+            )}
+          </div>
+        )}
+      </AnimatePresence>
+
+      {/* 3. Action Modal */}
+      <AnimatePresence>
+        {selectedElement && (
+          <div className="fixed inset-0 flex items-center justify-center z-[10000] bg-black/40 backdrop-blur-sm">
+            <m.div
+              initial={{ opacity: 0, y: 20, scale: 0.95 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: 20, scale: 0.95 }}
+              className="bg-[#1c1c1e] border border-white/10 rounded-3xl p-4 sm:p-6 w-[95vw] md:w-[800px] shadow-2xl flex flex-col max-h-[85vh]"
+            >
+              <div className="flex items-center justify-between mb-6">
+                <h3 className="text-white font-bold text-lg">Änderung erfassen</h3>
+                <button
+                  onClick={() => setSelectedElement(null)}
+                  className="text-white/40 hover:text-white"
+                >
+                  <X size={20} />
+                </button>
+              </div>
+
+              <div className="flex gap-2 mb-6 shrink-0">
+                <button
+                  onClick={() => setCurrentType("text")}
+                  className={cn(
+                    "flex-1 py-3 px-4 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2",
+                    currentType === "text"
+                      ? "bg-white text-black shadow-lg"
+                      : "bg-white/5 text-white/40 hover:bg-white/10"
+                  )}
+                >
+                  <Type size={16} /> Text
+                </button>
+                <button
+                  onClick={() => setCurrentType("image")}
+                  className={cn(
+                    "flex-1 py-3 px-4 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2",
+                    currentType === "image"
+                      ? "bg-white text-black shadow-lg"
+                      : "bg-white/5 text-white/40 hover:bg-white/10"
+                  )}
+                >
+                  <ImageIcon size={16} /> Bild
+                </button>
+                <button
+                  onClick={() => setCurrentType("note")}
+                  className={cn(
+                    "flex-1 py-3 px-4 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2",
+                    currentType === "note"
+                      ? "bg-white text-black shadow-lg"
+                      : "bg-white/5 text-white/40 hover:bg-white/10"
+                  )}
+                >
+                  <StickyNote size={16} /> Notiz
+                </button>
+              </div>
+
+              <div className="flex-1 overflow-y-auto min-h-[200px] mb-6 hide-scrollbar" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+                {currentType === "text" && (
+                  <div className="space-y-2">
+                    <label className="text-xs font-bold uppercase tracking-wider text-white/40">Neuer Text</label>
+                    <textarea
+                      autoFocus
+                      value={currentText}
+                      onChange={(e) => setCurrentText(e.target.value)}
+                      className="w-full h-32 bg-black/40 border border-white/10 rounded-2xl p-4 text-white placeholder:text-white/20 focus:outline-none focus:border-blue-500/50 transition-colors resize-none"
+                    />
+                  </div>
+                )}
+
+                {currentType === "note" && (
+                  <div className="space-y-2">
+                    <label className="text-xs font-bold uppercase tracking-wider text-white/40">Anmerkung</label>
+                    <textarea
+                      autoFocus
+                      value={currentText}
+                      onChange={(e) => setCurrentText(e.target.value)}
+                      placeholder="Was soll hier gemacht werden?"
+                      className="w-full h-32 bg-black/40 border border-white/10 rounded-2xl p-4 text-white placeholder:text-white/20 focus:outline-none focus:border-blue-500/50 transition-colors resize-none"
+                    />
+                  </div>
+                )}
+
+                {currentType === "image" && (
+                  <div className="space-y-2 h-full">
+                    <label className="text-xs font-bold uppercase tracking-wider text-white/40">Neues Bild wählen</label>
+                    {assets.length === 0 ? (
+                      <div className="text-sm text-white/40 p-4 bg-white/5 rounded-xl border border-white/5 text-center">
+                        Keine Assets übergeben. Bitte das prop <code>assets</code> befüllen.
+                      </div>
+                    ) : (
+                      <>
+                        <style>{`.hide-scrollbar::-webkit-scrollbar { display: none; }`}</style>
+                        <div className="mb-3">
+                          <input
+                            type="text"
+                            placeholder="Suchen nach Dateinamen..."
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-blue-500/50 transition-colors"
+                          />
+                        </div>
+                        <div 
+                          className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 h-[400px] overflow-y-auto hide-scrollbar"
+                          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+                        >
+                        {assets.filter(asset => asset.toLowerCase().includes(searchTerm.toLowerCase())).map((asset) => {
+                          const filename = asset.split('/').pop() || asset;
+                          return (
+                            <button
+                              key={asset}
+                              title={asset}
+                              onClick={() => setSelectedAsset(asset)}
+                              className={cn(
+                                "relative flex flex-col items-center bg-black/20 rounded-xl overflow-hidden border-2 transition-all p-2 gap-2 w-full",
+                                selectedAsset === asset
+                                  ? "border-blue-500 shadow-[0_0_0_4px_rgba(59,130,246,0.3)] bg-blue-500/10"
+                                  : "border-transparent hover:border-white/20 hover:bg-white/5"
+                              )}
+                              style={{ height: '130px' }}
+                            >
+                              <div className="w-full flex-1 rounded-lg overflow-hidden bg-black/40 flex items-center justify-center relative">
+                                {asset.match(/\.(mp4|webm)$/i) ? (
+                                  <video src={asset} className="w-full h-full object-cover opacity-80" />
+                                ) : (
+                                  <img src={asset} loading="lazy" alt={filename} className="w-full h-full object-contain" />
+                                )}
+                                {selectedAsset === asset && (
+                                  <div className="absolute inset-0 flex items-center justify-center bg-blue-500/20 backdrop-blur-[2px]">
+                                    <div className="bg-blue-500 text-white rounded-full p-1.5 shadow-lg">
+                                      <Check size={18} strokeWidth={3} />
+                                    </div>
+                                  </div>
+                                )}
+                              </div>
+                              <span className="text-[11px] font-medium text-white/70 truncate w-full text-center shrink-0" title={filename}>
+                                {filename}
+                              </span>
+                            </button>
+                          );
+                        })}
+                      </div>
+                      </>
+                    )}
+                  </div>
+                )}
+              </div>
+
+              <button
+                disabled={(!currentText && currentType !== "image") || (currentType === "image" && !selectedAsset)}
+                onClick={saveAnnotation}
+                className="w-full bg-blue-500 hover:bg-blue-400 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold py-4 rounded-2xl flex items-center justify-center gap-2 transition-all shadow-lg shadow-blue-500/20 shrink-0"
+              >
+                <Check size={20} />
+                Speichern
+              </button>
+            </m.div>
+          </div>
+        )}
+      </AnimatePresence>
+
+      {/* 4. Annotations List Sidebar */}
+      <AnimatePresence>
+        {showList && (
+          <>
+            <m.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={() => setShowList(false)}
+              className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[10001]"
+            />
+            <m.div
+              initial={{ x: "100%" }}
+              animate={{ x: 0 }}
+              exit={{ x: "100%" }}
+              transition={{ type: "spring", damping: 25, stiffness: 200 }}
+              className="fixed top-0 right-0 h-full w-full sm:w-[400px] bg-[#1c1c1e] border-l border-white/10 z-[10002] shadow-2xl flex flex-col"
+            >
+              <div className="p-8 border-b border-white/10 flex items-center justify-between">
+                <div>
+                  <h2 className="text-2xl font-bold text-white mb-1">Korrekturen</h2>
+                  <p className="text-white/40 text-sm">{annotations.length} erfasst</p>
+                </div>
+                <button
+                  onClick={() => setShowList(false)}
+                  className="p-2 text-white/40 hover:text-white bg-white/5 rounded-xl transition-colors"
+                >
+                  <X size={20} />
+                </button>
+              </div>
+
+              <div className="flex-1 overflow-y-auto p-6 space-y-4">
+                {annotations.length === 0 ? (
+                  <div className="h-full flex flex-col items-center justify-center text-center px-8 opacity-40">
+                    <List size={48} className="mb-4" />
+                    <p>Noch keine Korrekturen vorhanden.</p>
+                  </div>
+                ) : (
+                  annotations.map((ann) => (
+                    <div
+                      key={ann.id}
+                      className="bg-white/5 border border-white/5 rounded-2xl p-4 flex flex-col gap-3 group relative"
+                    >
+                      <button 
+                        onClick={() => deleteAnnotation(ann.id)}
+                        className="absolute top-4 right-4 text-white/20 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
+                      >
+                        <Trash2 size={16} />
+                      </button>
+                      
+                      <div className="flex items-center gap-2">
+                        <span className={cn(
+                          "px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider flex items-center gap-1",
+                          ann.type === "text" ? "bg-blue-500/20 text-blue-400" :
+                          ann.type === "image" ? "bg-purple-500/20 text-purple-400" :
+                          "bg-orange-500/20 text-orange-400"
+                        )}>
+                          {ann.type === "text" && <Type size={12} />}
+                          {ann.type === "image" && <ImageIcon size={12} />}
+                          {ann.type === "note" && <StickyNote size={12} />}
+                          {ann.type}
+                        </span>
+                      </div>
+                      
+                      {ann.type === "image" ? (
+                        <div className="flex items-center gap-2">
+                          <img src={ann.newContent} alt="New" className="w-16 h-16 object-cover rounded-lg bg-white/10" />
+                          <div className="text-xs text-white/60 flex-1 truncate">{ann.newContent}</div>
+                        </div>
+                      ) : (
+                        <p className="text-white text-sm whitespace-pre-wrap">{ann.newContent}</p>
+                      )}
+                      
+                      <div className="text-[10px] text-white/30 truncate mt-2 font-mono flex items-center gap-2">
+                        <span>{ann.selector}</span>
+                        {ann.url && <span className="truncate max-w-[100px] text-blue-400" title={ann.url}>{new URL(ann.url).pathname}</span>}
+                      </div>
+                      <div className="flex flex-wrap items-center gap-2 mt-2 pt-2 border-t border-white/5">
+                        {ann.timestamp && (
+                          <span className="text-[9px] px-1.5 py-0.5 rounded bg-white/5 text-white/40">
+                            {new Date(ann.timestamp).toLocaleString()}
+                          </span>
+                        )}
+                        {ann.viewportWidth && (
+                          <span className="text-[9px] px-1.5 py-0.5 rounded bg-white/5 text-white/40">
+                            {ann.viewportWidth}x{ann.viewportHeight}
+                          </span>
+                        )}
+                        {ann.scrollX !== undefined && (
+                          <span className="text-[9px] px-1.5 py-0.5 rounded bg-white/5 text-white/40">
+                            Scroll: {Math.round(ann.scrollX)},{Math.round(ann.scrollY)}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+              
+              {annotations.length > 0 && (
+                <div className="p-6 border-t border-white/10 flex flex-col gap-3">
+                  {onSubmit && (
+                    <button
+                      onClick={handleSubmit}
+                      disabled={isSubmitting}
+                      className="w-full bg-blue-500 hover:bg-blue-400 text-white font-bold py-4 rounded-2xl flex items-center justify-center gap-2 transition-all shadow-lg shadow-blue-500/20 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      {isSubmitting ? (
+                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                      ) : (
+                        <Check size={20} />
+                      )}
+                      {isSubmitting ? "Wird gesendet..." : "Korrekturen an Entwickler senden"}
+                    </button>
+                  )}
+                  <button
+                    onClick={exportJSON}
+                    className={cn(
+                      "w-full font-bold py-3 rounded-2xl flex items-center justify-center gap-2 transition-all",
+                      onSubmit ? "bg-white/5 text-white/70 hover:bg-white/10 hover:text-white" : "bg-blue-500 hover:bg-blue-400 text-white shadow-lg shadow-blue-500/20 py-4"
+                    )}
+                  >
+                    <Download size={onSubmit ? 18 : 20} />
+                    JSON {onSubmit && "lokal "}Exportieren
+                  </button>
+                  <button
+                    onClick={() => {
+                      if (confirm("Möchtest du wirklich alle erfassten Korrekturen löschen?")) {
+                        setAnnotations([]);
+                      }
+                    }}
+                    className="w-full bg-red-500/10 text-red-500 hover:bg-red-500/20 font-bold py-3 rounded-xl flex items-center justify-center gap-2 transition-all mt-2"
+                  >
+                    <Trash2 size={18} />
+                    Alle löschen
+                  </button>
+                </div>
+              )}
+            </m.div>
+          </>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

components/annotator-local/index.ts

@@ -0,0 +1 @@
+export { Annotator } from "./Annotator";

components/blocks/BenefitGrid.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { motion, Variants } from 'framer-motion';
+import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 import { LogoArcs } from '@/components/ui/LogoArcs';
 
@@ -30,8 +30,8 @@ const containerVariants: Variants = {
 };
 
 const itemVariants: Variants = {
-  hidden: { opacity: 0, y: 30 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] } },
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 1.0, ease: [0.16, 1, 0.3, 1] } },
 };
 
 const Icons = {
@@ -75,7 +75,7 @@ const Icons = {
 
 export function BenefitGrid({ badge, title, description, benefits }: BenefitGridProps) {
   return (
-    <section className="bg-white py-12 md:py-24 relative overflow-hidden border-t border-neutral-100">
+    <section className="bg-white py-16 md:py-24 lg:py-32 relative overflow-hidden border-t border-neutral-100">
       <div className="container px-4 max-w-7xl mx-auto relative z-10">
         
         <div className="max-w-3xl mx-auto text-center mb-16">
@@ -94,7 +94,7 @@ export function BenefitGrid({ badge, title, description, benefits }: BenefitGrid
           )}
         </div>
 
-        <motion.div 
+        <m.div 
           className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
           variants={containerVariants}
           initial="hidden"
@@ -116,7 +116,7 @@ export function BenefitGrid({ badge, title, description, benefits }: BenefitGrid
             const animationClass = animationClasses[index % animationClasses.length];
 
             return (
-              <motion.div
+              <m.div
                 key={benefit.id}
                 variants={itemVariants}
                 className="group relative overflow-hidden bg-neutral-50/50 border border-neutral-200/60 rounded-3xl p-8 transition-all duration-500 hover:bg-white hover:border-primary/30 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:-translate-y-1"
@@ -144,10 +144,10 @@ export function BenefitGrid({ badge, title, description, benefits }: BenefitGrid
                   )}
                 </div>
               </div>
-            </motion.div>
+            </m.div>
           );
         })}
-        </motion.div>
+        </m.div>
       </div>
     </section>
   );

components/blocks/CertificatesBlock.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { Container } from '@/components/ui/Container';
 import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
@@ -94,12 +94,12 @@ export function CertificatesBlock({ badge, title, description, certificates = de
 
   const itemVariants = {
     hidden: { opacity: 0, y: 20 },
-    show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' as const } },
+    show: { opacity: 1, y: 0, transition: { duration: 1.0, ease: [0.16, 1, 0.3, 1] } },
   };
 
   if (!isMounted) {
     return (
-      <section className="py-12 md:py-24 bg-neutral-50 relative overflow-hidden">
+    <section className="py-16 md:py-24 lg:py-32 bg-neutral-50 relative overflow-hidden">
         <Container>
           {!hideHeader && (
             <div className="text-center max-w-3xl mx-auto mb-16">
@@ -122,20 +122,20 @@ export function CertificatesBlock({ badge, title, description, certificates = de
       <Container className="relative z-10">
         {!hideHeader && (
           <div className="text-center max-w-3xl mx-auto mb-16">
-            <motion.div
+            <m.div
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5 }}
+              viewport={{ once: true, margin: "-50px" }}
+              transition={{ duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
             >
               <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badgeText}</h2>
               <h3 className="font-heading text-2xl md:text-5xl font-extrabold text-neutral-dark mb-6">{titleText}</h3>
               <p className="text-lg text-neutral-600">{descriptionText}</p>
-            </motion.div>
+            </m.div>
           </div>
         )}
 
-        <motion.div 
+        <m.div 
           className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
           variants={containerVariants}
           initial="hidden"
@@ -144,7 +144,7 @@ export function CertificatesBlock({ badge, title, description, certificates = de
         >
           {certificates.map((cert, index) => {
             const isIso = cert.type === 'iso';
-            const Wrapper = cert.pdfUrl ? motion.a : motion.div;
+            const Wrapper = cert.pdfUrl ? m.a : m.div;
             const wrapperProps = cert.pdfUrl ? {
               href: encodeURI(cert.pdfUrl),
               target: "_blank",
@@ -219,7 +219,7 @@ export function CertificatesBlock({ badge, title, description, certificates = de
               </Wrapper>
             );
           })}
-        </motion.div>
+        </m.div>
       </Container>
     </section>
   );

components/blocks/CompanyTimeline.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
+import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
 import { Building2, Compass, Layers, ArrowDownToLine, Wrench, Factory, Zap, MapPin, CheckCircle2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
@@ -80,7 +80,7 @@ export function CompanyTimeline({
   const lineHeight = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
 
   return (
-    <section className="py-12 md:py-32 bg-[#FAFAFA] relative overflow-hidden">
+    <section className="py-16 md:py-24 lg:py-32 bg-[#FAFAFA] relative overflow-hidden">
       {/* Background Decor */}
       <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-primary/5 rounded-full blur-[100px] pointer-events-none -translate-y-1/2 translate-x-1/3" />
       <div className="absolute bottom-0 left-0 w-[800px] h-[800px] bg-neutral-200/40 rounded-full blur-[120px] pointer-events-none translate-y-1/3 -translate-x-1/3" />
@@ -102,7 +102,7 @@ export function CompanyTimeline({
           
           {/* Animated Central Line */}
           <div className="absolute left-[38px] md:left-1/2 top-0 bottom-0 w-1.5 -translate-x-1/2 rounded-full overflow-hidden">
-            <motion.div 
+            <m.div 
               className="w-full bg-primary drop-shadow-[0_0_8px_rgba(130,237,32,0.8)]"
               style={{ height: lineHeight }}
             />
@@ -114,12 +114,12 @@ export function CompanyTimeline({
               const Icon = iconMap[milestone.iconName] || Building2;
               
               return (
-                <motion.div 
+                <m.div 
                   key={i}
-                  initial={{ opacity: 0, y: 40 }}
+                  initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true, margin: "-100px" }}
-                  transition={{ duration: 0.7, ease: "easeOut" }}
+                  viewport={{ once: true, margin: "-50px" }}
+                  transition={{ duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
                   className="relative flex flex-col md:flex-row items-center w-full group"
                 >
                   {/* Timeline Dot with Pulse */}
@@ -159,7 +159,7 @@ export function CompanyTimeline({
                     </div>
 
                   </div>
-                </motion.div>
+                </m.div>
               );
             })}
           </div>

components/blocks/CompetenceBentoGrid.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 import Image from 'next/image';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
@@ -62,7 +62,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
   // Static fallback for SSR
   if (!isMounted) {
     return (
-      <section className="py-12 md:py-24 bg-neutral text-neutral-dark overflow-hidden relative">
+      <section className="py-16 md:py-24 lg:py-32 bg-neutral text-neutral-dark overflow-hidden relative">
         <Container>
           <div className="flex flex-col md:flex-row justify-between items-end mb-12">
             <div className="max-w-2xl">
@@ -70,7 +70,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
               <h3 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-dark mb-4">{title}</h3>
             </div>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[220px]">
+          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[minmax(220px,auto)]">
              {/* Simplified static grid */}
           </div>
         </Container>
@@ -81,18 +81,14 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
   return (
     <section className="py-12 md:py-24 bg-neutral text-neutral-dark relative overflow-hidden">
       <Container className="relative z-10 px-0 md:px-12 lg:px-16">
-        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 px-4 md:px-0">
+        <div className="flex flex-row justify-between items-end mb-12 px-4 md:px-0">
           <div className="max-w-2xl text-left">
             <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
             <h3 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-dark mb-4">{title}</h3>
           </div>
-          <Button href={ctaHref} variant="ghost" className="mt-6 md:mt-0 bg-primary/5 hover:bg-primary/10 mx-4 md:mx-0">
-            {ctaLabel}
-            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
-          </Button>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[220px] px-4 md:px-0">
+        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[minmax(220px,auto)] px-4 md:px-0">
           {items.map((item, idx) => {
             const isLarge = item.size === 'large';
             const isMedium = item.size === 'medium';
@@ -107,12 +103,12 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
 
             if (isAccent) {
               return (
-                <motion.div 
+                <m.div 
                   key={idx}
                   initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ delay: idx * 0.1 }}
+                  viewport={{ once: true, margin: "-50px" }}
+                  transition={{ delay: idx * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
                   className={`${gridClasses} ${item.href ? 'cursor-pointer hover:-translate-y-1 transition-transform duration-300' : ''}`}
                 >
                   {item.href && (
@@ -127,19 +123,19 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
 
                   <HoverShineOverlay shineColor="via-white/30" />
                   <AnimatedGlossyBorder color="white" className="opacity-0 group-hover:opacity-100 transition-opacity duration-700" borderWidth={1} />
-                  <h4 className="font-bold text-xl md:text-2xl relative z-10 leading-snug">{item.title}</h4>
-                  {item.description && <p className="text-white/60 text-sm mt-3 relative z-10">{item.description}</p>}
-                </motion.div>
+                  <h4 className="font-heading font-extrabold text-2xl md:text-3xl relative z-10 leading-snug">{item.title}</h4>
+                  {item.description && <p className="text-white/80 text-base md:text-lg mt-3 relative z-10 font-medium">{item.description}</p>}
+                </m.div>
               );
             }
 
             return (
-              <motion.div 
+              <m.div 
                 key={idx}
-                initial={{ opacity: 0, scale: 0.95 }}
-                whileInView={{ opacity: 1, scale: 1 }}
-                viewport={{ once: true }}
-                transition={{ delay: idx * 0.1 }}
+                initial={{ opacity: 0, y: 20, scale: 0.98 }}
+                whileInView={{ opacity: 1, y: 0, scale: 1 }}
+                viewport={{ once: true, margin: "-50px" }}
+                transition={{ delay: idx * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
                 className={`${gridClasses} ${item.href ? 'cursor-pointer hover:-translate-y-1 transition-transform duration-300' : ''}`}
               >
                 {item.href && (
@@ -159,7 +155,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                         sizes={isLarge ? "(max-width: 768px) 100vw, 50vw" : "(max-width: 768px) 100vw, 25vw"}
                       />
                     </div>
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-90 transition-opacity duration-500 z-0" />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/60 to-black/30 opacity-100 transition-opacity duration-500 z-0 group-hover:from-black/80 group-hover:via-black/50 group-hover:to-black/20" />
                   </>
                 )}
                 
@@ -177,16 +173,16 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                       {item.tag}
                     </span>
                   )}
-                  <h4 className={`font-heading font-extrabold mb-2 ${isLarge ? 'text-2xl md:text-5xl' : 'text-xl md:text-2xl'}`}>
+                  <h4 className="font-heading font-extrabold mb-2 text-2xl md:text-3xl">
                     {item.title}
                   </h4>
                   {item.description && (
-                    <p className={`text-white/80 ${isLarge ? 'text-lg md:text-xl max-w-sm' : 'text-sm'}`}>
+                    <p className="text-white/90 text-sm md:text-base max-w-md">
                       {item.description}
                     </p>
                   )}
                 </div>
-              </motion.div>
+              </m.div>
             );
           })}
         </div>

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 { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 
 const ContactMap = dynamic(() => import('@/components/ContactMap'), {
   ssr: false,
@@ -41,24 +41,24 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
   const { showForm, showMap } = props;
 
   return (
-    <Section className="bg-neutral-light py-12 md:py-28 relative overflow-hidden">
+    <Section className="bg-neutral-light relative overflow-hidden">
       <Container>
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16">
-          <motion.div 
+          <m.div 
             className="lg:col-span-5 flex flex-col justify-center"
             variants={containerVariants}
             initial="hidden"
             whileInView="visible"
             viewport={{ once: true, margin: "-50px" }}
           >
-            <motion.h2 variants={itemVariants} className="text-primary font-bold tracking-wider uppercase text-sm mb-3">Direktkontakt</motion.h2>
-            <motion.h3 variants={itemVariants} className="font-heading text-3xl md:text-4xl font-extrabold text-neutral-dark mb-6">Wir sind für Sie da.</motion.h3>
-            <motion.p variants={itemVariants} className="text-lg text-text-secondary mb-8 leading-relaxed">
+            <m.h2 variants={itemVariants} className="text-primary font-bold tracking-wider uppercase text-sm mb-3">Direktkontakt</m.h2>
+            <m.h3 variants={itemVariants} className="font-heading text-3xl md:text-4xl font-extrabold text-neutral-dark mb-6">Wir sind für Sie da.</m.h3>
+            <m.p variants={itemVariants} className="text-lg text-text-secondary mb-8 leading-relaxed">
               Haben Sie Fragen zu unseren Leistungen oder möchten Sie ein konkretes Projekt besprechen? Rufen Sie uns an oder schreiben Sie uns eine E-Mail.
-            </motion.p>
+            </m.p>
             
             <div className="space-y-6">
-              <motion.div variants={itemVariants} className="group flex items-start gap-4">
+              <m.div variants={itemVariants} className="group flex items-start gap-4">
                 <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0 transition-all duration-500 group-hover:bg-primary group-hover:text-white group-hover:scale-110 group-hover:-rotate-3">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                 </div>
@@ -68,9 +68,9 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
                     <a href="tel:+4935616857733">+49 (0) 3561 / 68577 33</a>
                   </p>
                 </div>
-              </motion.div>
+              </m.div>
 
-              <motion.div variants={itemVariants} className="group flex items-start gap-4">
+              <m.div variants={itemVariants} className="group flex items-start gap-4">
                 <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0 transition-all duration-500 group-hover:bg-primary group-hover:text-white group-hover:scale-110 group-hover:-rotate-3">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                 </div>
@@ -80,9 +80,9 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
                     <a href="mailto:info@e-tib.com">info@e-tib.com</a>
                   </p>
                 </div>
-              </motion.div>
+              </m.div>
 
-              <motion.div variants={itemVariants} className="group flex items-start gap-4">
+              <m.div variants={itemVariants} className="group flex items-start gap-4">
                 <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0 transition-all duration-500 group-hover:bg-primary group-hover:text-white group-hover:scale-110 group-hover:-rotate-3">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                 </div>
@@ -94,12 +94,12 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
                     Deutschland
                   </p>
                 </div>
-              </motion.div>
+              </m.div>
             </div>
-          </motion.div>
+          </m.div>
           
           {showForm && (
-            <motion.div 
+            <m.div 
               className="lg:col-span-7 relative"
               variants={formVariants}
               initial="hidden"
@@ -113,12 +113,12 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
               >
                 <ContactForm />
               </Suspense>
-            </motion.div>
+            </m.div>
           )}
         </div>
       </Container>
       {showMap && (
-        <motion.section 
+        <m.section 
           initial={{ opacity: 0 }}
           whileInView={{ opacity: 1 }}
           viewport={{ once: true }}
@@ -135,7 +135,7 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
               ]}
             />
           </Suspense>
-        </motion.section>
+        </m.section>
       )}
     </Section>
   );

components/blocks/DataGridPulse.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useLocale } from 'next-intl';
 
 export function DataGridPulse() {
@@ -19,12 +19,12 @@ export function DataGridPulse() {
       />
 
       {/* Pulsing horizontal lines (Data Flow) */}
-      <motion.div 
+      <m.div 
         animate={{ x: ["-100%", "100%"] }}
         transition={{ duration: 5, repeat: Infinity, ease: "linear" }}
         className="absolute top-1/3 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary/30 to-transparent blur-[1px]"
       />
-      <motion.div 
+      <m.div 
         animate={{ x: ["100%", "-100%"] }}
         transition={{ duration: 7, repeat: Infinity, ease: "linear" }}
         className="absolute top-2/3 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary/25 to-transparent blur-[1px]"

components/blocks/DeepDrillAnimation.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useRef } from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
+import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
 import { useLocale } from 'next-intl';
 
 export function DeepDrillAnimation() {
@@ -33,20 +33,20 @@ export function DeepDrillAnimation() {
 
         {/* The Drill Path */}
         <div className="relative w-2 h-96 bg-white/10 rounded-full mb-16">
-          <motion.div 
+          <m.div 
             className="absolute top-0 left-0 w-full bg-primary rounded-full"
             style={{ height: drillDepth, boxShadow: '0 0 20px rgba(130,237,32,0.6)' }}
           >
             {/* The Drill Head */}
             <div className="absolute -bottom-2 -left-2 w-6 h-6 bg-white rounded-full border-4 border-primary shadow-[0_0_15px_rgba(255,255,255,1)]" />
-          </motion.div>
+          </m.div>
         </div>
 
         {/* The Reveal Data */}
-        <motion.div 
+        <m.div 
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true, margin: "-50px" }}
           transition={{ duration: 0.8 }}
           className="flex flex-col items-center"
         >
@@ -56,7 +56,7 @@ export function DeepDrillAnimation() {
           <div className="text-sm font-bold uppercase tracking-widest text-primary">
             {locale === 'en' ? 'Drilled distance since 2023' : 'Gebohrte Strecke seit 2023'}
           </div>
-        </motion.div>
+        </m.div>
 
       </div>
     </div>

components/blocks/FaqBlock.tsx

@@ -21,7 +21,7 @@ export const FaqBlock: React.FC<FaqBlockProps> = ({
   if (!questions || questions.length === 0) return null;
 
   return (
-    <section className="py-12 md:py-16">
+    <section className="py-16 md:py-24 lg:py-32">
       <div className="max-w-3xl mx-auto">
         <div className="mb-10 text-center">
           {subtitle && (

components/blocks/GrowthChart.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useTranslations } from 'next-intl';
 
 export function GrowthChart() {
@@ -42,7 +42,7 @@ export function GrowthChart() {
                 {/* Kabelverlegung Bar */}
                 <div className="flex items-center gap-4">
                   <div className="flex-1 bg-neutral-100 rounded-full h-6 overflow-hidden relative">
-                    <motion.div
+                    <m.div
                       initial={{ width: 0 }}
                       whileInView={{ width: `${kabelWidth}%` }}
                       viewport={{ once: true, margin: "-50px" }}
@@ -58,7 +58,7 @@ export function GrowthChart() {
                 {/* Offener Tiefbau Bar */}
                 <div className="flex items-center gap-4">
                   <div className="flex-1 bg-neutral-100 rounded-full h-5 overflow-hidden relative">
-                    <motion.div
+                    <m.div
                       initial={{ width: 0 }}
                       whileInView={{ width: `${offenerWidth}%` }}
                       viewport={{ once: true, margin: "-50px" }}
@@ -74,7 +74,7 @@ export function GrowthChart() {
                 {/* HDD Bar */}
                 <div className="flex items-center gap-4">
                   <div className="flex-1 bg-neutral-100 rounded-full h-4 overflow-hidden relative">
-                    <motion.div
+                    <m.div
                       initial={{ width: 0 }}
                       whileInView={{ width: `${hddWidth}%` }}
                       viewport={{ once: true, margin: "-50px" }}

components/blocks/HeroSection.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { Badge, Container, Heading } from '@/components/ui';
 import { Button } from '@/components/ui/Button';
 
@@ -47,7 +47,7 @@ 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 && (
-        <motion.div 
+        <m.div 
           key={`hero-bg-${pathname}`}
           className="absolute inset-0 z-0"
           initial={{ scale: 1.05, opacity: 0 }}
@@ -74,10 +74,10 @@ 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" />
-        </motion.div>
+        </m.div>
       )}
       <Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
-        <motion.div 
+        <m.div 
           key={`hero-content-${pathname}`}
           className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}
           variants={containerVariants}
@@ -85,26 +85,26 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
           animate="visible"
         >
           {badge && (
-            <motion.div variants={itemVariants}>
+            <m.div variants={itemVariants}>
               <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
                 {badge}
               </Badge>
-            </motion.div>
+            </m.div>
           )}
-          <motion.div variants={itemVariants}>
-            <Heading level={1} variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
+          <m.div variants={itemVariants}>
+            <Heading level={1} size="section" variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
               {title}
             </Heading>
-          </motion.div>
+          </m.div>
           {subtitle && (
-            <motion.div variants={itemVariants}>
+            <m.div variants={itemVariants}>
               <p className={`text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl ${alignment === 'center' ? 'mx-auto' : ''}`}>
                 {subtitle}
               </p>
-            </motion.div>
+            </m.div>
           )}
           {ctaLabel && ctaHref && (
-            <motion.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex justify-center' : ''}`}>
+            <m.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`}>
               <Button
                 href={ctaHref}
                 variant="accent"
@@ -115,9 +115,9 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
                   &rarr;
                 </span>
               </Button>
-            </motion.div>
+            </m.div>
           )}
-        </motion.div>
+        </m.div>
       </Container>
     </section>
   );

components/blocks/HeroVideo.tsx

@@ -2,7 +2,6 @@
 
 import { Button } from '@/components/ui/Button';
 import Image from 'next/image';
-import { motion, AnimatePresence } from 'framer-motion';
 import { useState, useEffect } from 'react';
 import { usePathname } from 'next/navigation';
 
@@ -23,6 +22,8 @@ interface HeroVideoProps {
   badge?: string;
 }
 
+import placeholders from '@/lib/placeholders.json';
+
 export function HeroVideo(props: HeroVideoProps) {
   const { data } = props;
   const title = props.title || data?.title || 'DIE EXPERTEN FÜR KABELNETZBAU';
@@ -31,7 +32,12 @@ export function HeroVideo(props: HeroVideoProps) {
   const videoUrl = explicitNoVideo ? null : (props.videoUrl || data?.videoUrl || '/assets/dummy-hero.mp4');
   const pathname = usePathname();
 
-  const posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || "/assets/photos/DJI_0048.JPG";
+  let defaultPoster = "/assets/photos/DJI_0048.JPG";
+  if (videoUrl && videoUrl.endsWith('.mp4')) {
+    defaultPoster = videoUrl.replace('.mp4', '-poster.jpg');
+  }
+
+  const posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || defaultPoster;
   const posterAlt = props.backgroundImage?.alt || data?.posterImage?.alt || "E-TIB Gruppe Baustelle";
 
   const ctaLabel = props.ctaLabel || props.linkText || data?.ctaLabel || 'Unternehmen entdecken';
@@ -42,31 +48,60 @@ export function HeroVideo(props: HeroVideoProps) {
   const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || (currentLocale === 'de' ? 'Projekt anfragen' : 'Inquire Project');
   const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/${currentLocale}/contact`;
 
+  const [videoSrcLoaded, setVideoSrcLoaded] = useState(false);
+  useEffect(() => {
+    let interactionTriggered = false;
+
+    const handleInteraction = () => {
+      if (interactionTriggered) return;
+      interactionTriggered = true;
+      setVideoSrcLoaded(true);
+      
+      // Cleanup listeners
+      ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
+        window.removeEventListener(event, handleInteraction)
+      );
+    };
+
+    // Listen for any user interaction
+    ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
+      window.addEventListener(event, handleInteraction, { passive: true, once: true })
+    );
+
+    return () => {
+      ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
+        window.removeEventListener(event, handleInteraction)
+      );
+    };
+  }, []);
+
   return (
     <div className="relative w-full h-[85svh] md:h-[100svh] flex items-center justify-center overflow-hidden bg-neutral-dark">
       {/* Background color while video loads */}
       <div className="absolute inset-0 z-0 bg-neutral-dark" />
       
-      {videoUrl ? (
+      {/* ALWAYS render the Next.js optimized Image as the LCP element */}
+      <Image
+        key={`img-${pathname}-${posterSrc}`}
+        src={posterSrc}
+        alt={posterAlt}
+        fill
+        className="object-cover z-[1] pointer-events-none filter contrast-125 saturate-110 brightness-90"
+        sizes="100vw"
+        priority
+      />
+
+      {/* Render video on top if available, but defer src to avoid blocking LCP */}
+      {videoUrl && (
         <video
           key={`${pathname}-${videoUrl}`}
-          className="absolute inset-0 w-full h-full object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
-          src={videoUrl}
+          className={`absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90 transition-opacity duration-1000 ${videoSrcLoaded ? 'opacity-100' : 'opacity-0'}`}
+          src={videoSrcLoaded ? videoUrl : undefined}
           autoPlay
           muted
           loop
           playsInline
-          preload="auto"
-        />
-      ) : (
-        <Image
-          key={`img-${pathname}-${posterSrc}`}
-          src={posterSrc}
-          alt={posterAlt}
-          fill
-          className="object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
-          sizes="100vw"
-          priority
+          preload="none"
         />
       )}
       
@@ -81,11 +116,9 @@ export function HeroVideo(props: HeroVideoProps) {
       <div className="absolute top-0 left-0 w-full h-48 bg-gradient-to-b from-black/70 to-transparent z-[3] pointer-events-none" />
       
       <div className="container relative z-[4] text-center px-4">
-        <motion.div
+        <div
           key={`hero-content-${pathname}`}
-          initial={{ opacity: 0, y: 40 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
+          className="relative"
         >
           <h1 
             className="font-heading font-bold text-3xl sm:text-4xl md:text-6xl lg:text-8xl text-white mb-6 uppercase tracking-tight drop-shadow-lg"
@@ -96,7 +129,7 @@ export function HeroVideo(props: HeroVideoProps) {
             {subtitle}
           </p>
           
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
+          <div className="flex flex-wrap items-center justify-center gap-4 md:gap-6">
             <Button 
               href={ctaHref} 
               variant="primary"
@@ -114,7 +147,7 @@ export function HeroVideo(props: HeroVideoProps) {
               {secondaryCtaLabel}
             </Button>
           </div>
-        </motion.div>
+        </div>
       </div>
     </div>
   );

components/blocks/InteractiveGermanyMap.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import React, { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { MapPin, Factory, Zap, CheckCircle2, ArrowUpRight } from 'lucide-react';
+import React, { useState, useRef, useCallback, useMemo } from 'react';
+import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
+import { MapPin, CheckCircle2, ArrowUpRight } from 'lucide-react';
 import Image from 'next/image';
-import { useRouter, usePathname } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 import { AnimatedGlossyBorder } from '@/components/ui/AnimatedGlossyBorder';
-import { Location, defaultLocations, minorLocations, projectLocations } from '@/lib/map-data';
+import { Location, projectLocations } from '@/lib/map-data';
 import { standorteLocations } from '@/lib/standorte-data';
 import { useLocale, useTranslations } from 'next-intl';
 
@@ -28,6 +28,59 @@ 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,
   title,
@@ -38,21 +91,23 @@ export function InteractiveGermanyMap({
   hideStandorte = false
 }: InteractiveGermanyMapProps) {
   const [activeLocation, setActiveLocation] = useState<Location | null>(null);
-  const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>(null);
+  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  const handleMouseEnter = (loc: Location) => {
-    if (hoverTimeout) clearTimeout(hoverTimeout);
+  const handleMouseEnter = useCallback((loc: Location) => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
     setActiveLocation(loc);
-  };
+  }, []);
 
-  const handleMouseLeave = () => {
+  const handleMouseLeave = useCallback(() => {
     const timeout = setTimeout(() => {
       setActiveLocation(null);
     }, 200);
-    setHoverTimeout(timeout);
-  };
+    hoverTimeoutRef.current = timeout;
+  }, []);
 
-  const router = useRouter();
   const pathname = usePathname();
   const locale = useLocale();
   const t = useTranslations('InteractiveGermanyMap');
@@ -64,14 +119,11 @@ export function InteractiveGermanyMap({
   ];
 
   const finalBadge = badge || tStandard('badge');
-  // the map is mostly used with specific props, so we leave title & description to fallbacks if not provided
   const finalTitle = title || (locale === 'en' ? <>Nationwide<br/>in operation for you.</> : <>Deutschlandweit<br/>für Sie im Einsatz.</>);
   const finalDescription = description || (locale === 'en' ? 'From our strategic locations in Guben, Kirchheilingen and Bülstedt, we control and implement complex infrastructure projects nationwide.' : 'Von unseren strategischen Standorten in Guben, Kirchheilingen und Bülstedt steuern und realisieren wir komplexe Infrastrukturprojekte im gesamten Bundesgebiet.');
 
-  const finalLocations = React.useMemo(() => {
+  const finalLocations = useMemo(() => {
     if (hideStandorte) return locations;
-    
-    // Ensure the 3 standorte are always included, without duplicating if already present by ID
     const base = [...locations];
     standorteLocations.forEach(sl => {
       if (!base.some(l => l.id === sl.id)) {
@@ -81,19 +133,28 @@ export function InteractiveGermanyMap({
     return base;
   }, [locations, hideStandorte]);
 
+  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
+        src="/germany-map.svg"
+        alt={locale === 'en' ? "Map of Germany" : "Deutschlandkarte"}
+        fill
+        className="object-cover"
+        priority
+      />
+    </div>
+  ), [locale]);
+
   return (
     <div key={isHero ? `hero-map-${pathname}` : undefined} className={isHero ? "relative w-full" : "relative w-full max-w-7xl mx-auto py-12 md:py-24 px-4 sm:px-6 mt-16 md:mt-20"}>
       <div className={`bg-[#050B14] ${isHero ? 'pt-32 pb-16 md:pt-40 md:pb-24' : 'rounded-[2.5rem] md:rounded-[3.5rem] shadow-2xl border border-white/5'} overflow-visible relative group/map`}>
-        {/* Animated Border Glow */}
-        <AnimatedGlossyBorder opacity={0.7} className="z-30" />
+        {!isHero && <AnimatedGlossyBorder opacity={0.7} className="z-30" />}
         
-        {/* Background Effects */}
         <div className={`absolute inset-0 bg-gradient-to-br from-[#050B14] via-[#0A1322] to-[#050B14] ${!isHero && 'rounded-[2.5rem] md:rounded-[3.5rem]'} overflow-hidden`} />
         <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-primary/5 rounded-full blur-[120px] pointer-events-none translate-x-1/3 -translate-y-1/3 overflow-hidden" />
         
         <div className={`relative z-10 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-12 gap-12 items-center min-h-[600px] ${isHero ? 'max-w-7xl mx-auto px-4 sm:px-6' : 'p-8 md:p-12 lg:p-16'}`}>
           
-          {/* Content Left */}
           <div className="xl:col-span-5 text-white z-20">
             <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wider mb-8">
               <MapPin className="w-4 h-4" />
@@ -114,7 +175,6 @@ export function InteractiveGermanyMap({
               {finalDescription}
             </p>
 
-            {/* Industrial Stats Grid */}
             <div className="grid grid-cols-2 gap-4">
               {finalStats.map((stat, i) => {
                 const StatCard = () => (
@@ -145,100 +205,50 @@ export function InteractiveGermanyMap({
             </div>
           </div>
 
-          {/* Map Right */}
           <div className="xl:col-span-7 relative flex items-center justify-center min-h-[500px] lg:min-h-[700px] z-10 pointer-events-none">
-            {/* Map Container - Enforce strict aspect ratio matching the SVG (1024x1024) */}
             <div className="relative w-full max-w-[600px] aspect-square group pointer-events-auto">
               
-              {/* Map SVG */}
-              <div className="absolute inset-0 opacity-[0.25] mix-blend-screen drop-shadow-2xl brightness-200 pointer-events-none">
-                <Image
-                  src="/germany-map.svg"
-                  alt={locale === 'en' ? "Map of Germany" : "Deutschlandkarte"}
-                  fill
-                  className="object-cover"
-                  priority
-                />
-              </div>
+              {mapBackground}
 
-              {/* Minor Location Markers (The 100+ generic projects) */}
               {finalLocations.filter(l => l.type === 'minor_node').map((loc, idx) => (
-                <div
-                  key={`minor-${idx}`}
-                  className="absolute z-10 group/minor cursor-pointer w-10 h-10 flex items-center justify-center"
-                  style={{
-                    left: `${loc.x}%`,
-                    top: `${loc.y}%`,
-                    transform: 'translate(-50%, -50%)',
-                  }}
-                  onMouseEnter={() => handleMouseEnter(loc)}
-                  onMouseLeave={handleMouseLeave}
-                  onClick={() => handleMouseEnter(loc)}
-                >
-                  <div className="w-1.5 h-1.5 bg-primary/80 rounded-full group-hover/minor:bg-white group-hover/minor:scale-150 transition-all duration-300" />
-                  <div className="absolute inset-0 m-auto w-2 h-2 bg-primary rounded-full opacity-0 group-hover/minor:animate-ping" />
-                </div>
+                <MinorNode
+                  key={`minor-${loc.id || idx}`}
+                  loc={loc}
+                  isActive={activeLocation === loc}
+                  onEnter={handleMouseEnter}
+                  onLeave={handleMouseLeave}
+                />
               ))}
 
-              {/* Major Location Markers (HQ, Branch, Project) */}
-              {finalLocations.filter(l => l.type !== 'minor_node').map((loc, idx) => {
-                const isHQ = loc.type === 'hq';
-                const isBranch = loc.type === 'branch';
-                const isActive = activeLocation?.id === loc.id;
+              {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}
+                />
+              ))}
 
-                return (
-                  <div
-                    key={loc.id}
-                    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'}`}
-                    style={{ left: `${loc.x}%`, top: `${loc.y}%` }}
-                    onMouseEnter={() => handleMouseEnter(loc)}
-                    onMouseLeave={handleMouseLeave}
-                    onClick={() => handleMouseEnter(loc)}
-                  >
-                    {/* Ping Animation for HQ / Branch */}
-                    {(isHQ || isBranch) && (
-                      <div className="absolute inset-0 m-auto w-6 h-6 rounded-full animate-ping bg-primary/50 scale-150" />
-                    )}
-
-                    {/* Elegant Marker Dot */}
-                    <motion.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" />}
-                    </motion.div>
-                  </div>
-                );
-              })}
-
-              {/* Global Tooltip */}
               <AnimatePresence>
                 {activeLocation && (
-                  <motion.div
+                  <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"
+                    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={{
-                      left: `${activeLocation.x}%`,
-                      top: `${activeLocation.y}%`,
-                      transform: activeLocation.x < 50 ? 'translate(20px, -50%)' : 'translate(calc(-100% - 20px), -50%)',
-                    }}
+                      '--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 min-w-[200px] w-max max-w-[300px] text-white overflow-hidden">
-                      
+                    <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
@@ -307,7 +317,7 @@ export function InteractiveGermanyMap({
                         )}
                       </div>
                     </div>
-                  </motion.div>
+                  </m.div>
                 )}
               </AnimatePresence>
             </div>

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 { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useTranslations } from 'next-intl';
 
 export interface JobListingBlockProps {
@@ -37,11 +37,11 @@ const containerVariants = {
 };
 
 const itemVariants = {
-  hidden: { opacity: 0, y: 30 },
+  hidden: { opacity: 0, y: 20 },
   visible: {
     opacity: 1,
     y: 0,
-    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const },
+    transition: { duration: 1.0, ease: [0.16, 1, 0.3, 1] as const },
   },
 };
 
@@ -72,21 +72,21 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
       <div className="container mx-auto">
         {showFairs && (
           <div className="mb-12 md:mb-24 relative">
-            <motion.h3 
+            <m.h3 
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true, margin: "-100px" }}
+              viewport={{ once: true, margin: "-50px" }}
               transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }}
               className="font-heading font-extrabold text-3xl md:text-4xl text-neutral-dark mb-8 md:mb-12 flex items-center gap-4"
             >
               <span className="w-12 h-1.5 bg-primary rounded-full" />
               {fairsTitle}
-            </motion.h3>
-            <motion.div 
+            </m.h3>
+            <m.div 
               variants={containerVariants}
               initial="hidden"
               whileInView="visible"
-              viewport={{ once: true, margin: "-100px" }}
+              viewport={{ once: true, margin: "-50px" }}
               className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
             >
               {fairs.map((messe, idx) => {
@@ -159,44 +159,44 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
 
                 if (isLink) {
                   return (
-                    <motion.a variants={itemVariants} key={`fair-${idx}`} href={messe.url} target="_blank" rel="noopener noreferrer" className={`${baseClasses} cursor-pointer`}>
+                    <m.a variants={itemVariants} key={`fair-${idx}`} href={messe.url} target="_blank" rel="noopener noreferrer" className={`${baseClasses} cursor-pointer`}>
                       {innerContent}
-                    </motion.a>
+                    </m.a>
                   );
                 }
 
                 return (
-                  <motion.div variants={itemVariants} key={`fair-${idx}`} className={baseClasses}>
+                  <m.div variants={itemVariants} key={`fair-${idx}`} className={baseClasses}>
                     {innerContent}
-                  </motion.div>
+                  </m.div>
                 );
               })}
-            </motion.div>
+            </m.div>
           </div>
         )}
 
         {showJobs && (
           <div className="mb-12">
-            <motion.h2 
+            <m.h2 
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true, margin: "-100px" }}
+              viewport={{ once: true, margin: "-50px" }}
               transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }}
               className="font-heading font-extrabold text-3xl md:text-4xl text-neutral-dark mb-6 md:mb-8"
             >
               {title}
-            </motion.h2>
+            </m.h2>
             
             {jobs.length > 0 ? (
-              <motion.div 
+              <m.div 
                 variants={containerVariants}
                 initial="hidden"
                 whileInView="visible"
-                viewport={{ once: true, margin: "-100px" }}
+                viewport={{ once: true, margin: "-50px" }}
                 className="grid gap-6"
               >
                 {jobs.map((job: any) => (
-                  <motion.div variants={itemVariants} key={job.id}>
+                  <m.div variants={itemVariants} key={job.id}>
                     <Link 
                       href={`/karriere/${job.slug}`}
                       className="group bg-white border border-neutral-100 p-8 rounded-2xl shadow-sm hover:shadow-xl hover:border-primary/20 transition-all flex flex-col md:flex-row md:items-center justify-between gap-6 block"
@@ -214,14 +214,14 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
                         <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                       </div>
                     </Link>
-                  </motion.div>
+                  </m.div>
                 ))}
-              </motion.div>
+              </m.div>
             ) : (
-              <motion.div 
+              <m.div 
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, margin: "-100px" }}
+                viewport={{ once: true, margin: "-50px" }}
                 transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }}
                 className="bg-neutral-50 border border-neutral-100 rounded-2xl p-12 text-center"
               >
@@ -229,7 +229,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
                 <Button href={emptyStateLinkHref} variant="primary" className="mt-6">
                   {emptyStateLinkText}
                 </Button>
-              </motion.div>
+              </m.div>
             )}
           </div>
         )}

components/blocks/ReferencesSlider.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import Link from 'next/link';
 import Image from 'next/image';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
@@ -46,7 +46,21 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
   const scrollLeftRef = React.useRef(0);
   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');
   const description = props.description || data?.description || t('description');
@@ -94,78 +108,87 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
 
 
   return (
-    <section id="referenzen" className="py-12 md:py-24 bg-neutral-dark text-white relative overflow-hidden">
+    <section id="referenzen" className="pt-16 pb-8 md:py-24 lg:py-32 bg-neutral-dark text-white relative overflow-hidden">
       <div className="absolute inset-0 bg-gradient-to-b from-neutral-dark via-neutral-900 to-neutral-dark z-0" />
       
-      <div className="container relative z-10 mb-12 flex flex-col md:flex-row justify-between items-end gap-6">
+      <div className="container relative z-10 mb-12 flex flex-col items-center justify-center text-center gap-6">
         <div>
           <h2 className="text-primary-light font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
           <h3 className="font-heading text-3xl md:text-5xl font-extrabold">{title}</h3>
         </div>
-        <div className="text-center md:text-left max-w-3xl mx-auto md:mx-0 mb-16">
+        <div className="max-w-3xl mx-auto mb-4 md:mb-8 text-neutral-300">
           {description}
         </div>
       </div>
 
       <div className="relative z-10">
-        <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
-        <div 
-          ref={containerRef}
-          onMouseDown={onMouseDown}
-          onMouseLeave={onMouseLeave}
-          onMouseUp={onMouseUp}
-          onMouseMove={onMouseMove}
-          className={`select-none flex gap-6 overflow-x-auto pb-12 pt-4 px-[max(1rem,calc((100vw-1280px)/2))] md:px-[max(2rem,calc((100vw-1280px)/2))] lg:px-[max(2.5rem,calc((100vw-1280px)/2))] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
-        >
-          {references.map((ref, i) => {
-            const imgSrc = (ref.image && typeof ref.image === 'object' && ref.image.url) 
-              ? ref.image.url 
-              : fallbacks[i % fallbacks.length];
+        {/* Fade edges for peek effect */}
+        <div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-neutral-dark to-transparent z-20 pointer-events-none" />
+        <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 pointer-events-none" />
+        
+        {/* Carousel: centered first card with peek on both sides */}
+        <LazyMotion features={domAnimation}>
+          <div 
+            ref={containerRef}
+            onMouseDown={onMouseDown}
+            onMouseLeave={onMouseLeave}
+            onMouseUp={onMouseUp}
+            onMouseMove={onMouseMove}
+            className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 px-[calc(50vw-160px)] md:px-[calc(50vw-240px)] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
+          >
+            {references.map((ref, i) => {
+              const imgSrc = ref.image 
+                ? (typeof ref.image === 'string' ? ref.image : ref.image.url) 
+                : fallbacks[i % fallbacks.length];
 
-            return (
-              <motion.div
-                key={ref.id}
-                initial={{ opacity: 0, x: 50 }}
-                whileInView={{ opacity: 1, x: 0 }}
-                viewport={{ once: true }}
-                transition={{ delay: i * 0.1, duration: 0.6, ease: "easeOut" }}
-                className="flex-shrink-0 w-[320px] md:w-[480px] snap-center group pointer-events-auto"
-              >
-                <Link
-                  href={`/${locale}/referenzen/${ref.slug}`}
-                  data-testid="reference-tile"
-                  draggable={false}
-                  onClick={(e) => {
-                    if (dragDistanceRef.current > 15) {
-                      e.preventDefault();
-                    }
-                    dragDistanceRef.current = 0;
-                  }}
-                  className="block relative select-none aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl"
+              return (
+                <m.div
+                  key={ref.id}
+                  data-card
+                  initial={{ opacity: 0, x: 20 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true, margin: "-50px" }}
+                  transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
+                  className="flex-shrink-0 w-[320px] md:w-[480px] snap-center group pointer-events-auto"
                 >
-                  <Image
+                  <Link
+                    href={`/${locale}/referenzen#${ref.slug}`}
+                    onClick={(e) => {
+                      if (dragDistanceRef.current > 5) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                      }
+                    }}
+                    onDragStart={(e) => e.preventDefault()}
                     draggable={false}
-                    src={imgSrc}
-                    alt={ref.title}
-                    fill
-                    sizes="(max-width: 768px) 320px, 480px"
-                    className="object-cover saturate-50 opacity-70 group-hover:scale-105 group-hover:opacity-100 group-hover:saturate-100 transition-all duration-700 ease-in-out pointer-events-none"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300 pointer-events-none" />
-                  
-                  <HoverShineOverlay />
-                  
-                  <div className="absolute bottom-6 left-6 right-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 pointer-events-none bg-black/60 backdrop-blur-sm p-4 rounded-xl border border-white/10">
-                    <span className="inline-block py-1 px-3 rounded-full bg-primary/20 text-white text-[10px] font-bold uppercase tracking-widest mb-2 border border-primary/30">
-                      {ref.category}
-                    </span>
-                    <h4 className="font-heading text-xl md:text-2xl font-bold leading-tight break-words">{ref.title}</h4>
-                  </div>
-                </Link>
-              </motion.div>
-            );
-          })}
-        </div>
+                    data-testid="reference-tile"
+                    className="block relative select-none aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl cursor-pointer"
+                  >
+                    <Image
+                      draggable={false}
+                      src={imgSrc}
+                      alt={ref.title}
+                      fill
+                      sizes="(max-width: 768px) 320px, 480px"
+                      className="object-cover saturate-50 opacity-70 group-hover:scale-105 group-hover:opacity-100 group-hover:saturate-100 transition-all duration-700 ease-in-out pointer-events-none"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300 pointer-events-none" />
+                    
+                    <HoverShineOverlay />
+                    
+                    <div className="absolute bottom-6 left-6 right-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 pointer-events-none bg-black/60 backdrop-blur-sm p-4 rounded-xl border border-white/10">
+                      <span className="inline-block py-1 px-3 rounded-full bg-primary/20 text-white text-[10px] font-bold uppercase tracking-widest mb-2 border border-primary/30">
+                        {ref.category}
+                      </span>
+                      <h4 className="font-heading text-xl md:text-2xl font-bold leading-tight break-words">{ref.title}</h4>
+                    </div>
+                  </Link>
+                </m.div>
+              );
+            })}
+
+          </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 { motion, useScroll, useTransform } from 'framer-motion';
+import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
 import { useLocale } from 'next-intl';
 
 export function ScaleOfImpact() {
@@ -26,19 +26,19 @@ export function ScaleOfImpact() {
       className="relative w-full min-h-[40vh] md:min-h-[70vh] bg-[#050B14] py-12 md:py-0 flex flex-col items-center justify-center overflow-hidden border-y border-neutral-800"
     >
       {/* Massive Watermark Numbers */}
-      <motion.div 
+      <m.div 
         style={{ opacity: bgOpacity }}
         className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none select-none overflow-hidden mix-blend-overlay"
       >
         <div className="font-heading font-black text-[20vw] leading-none text-white opacity-20 whitespace-nowrap">
           <span className="font-mono tracking-tighter">1.435.223</span>
         </div>
-      </motion.div>
+      </m.div>
 
       {/* Foreground Content */}
       <div className="relative z-10 container max-w-7xl mx-auto px-4 flex flex-col items-center text-center">
         
-        <h2 className="text-2xl md:text-5xl font-heading font-extrabold text-white mb-6 tracking-tight">
+        <h2 className="text-3xl sm:text-4xl md:text-5xl font-heading font-extrabold text-white mb-6 tracking-tight leading-tight">
           {locale === 'en' ? (
             <>An infrastructure <br className="md:hidden"/> that connects the country.</>
           ) : (
@@ -70,7 +70,7 @@ export function ScaleOfImpact() {
               strokeWidth="2"
             />
             {/* Glowing animated line */}
-            <motion.path 
+            <m.path 
               d="M0,50 Q250,0 500,50 T1000,50" 
               fill="none" 
               stroke="#ffc107" // warning/yellow color
@@ -84,19 +84,19 @@ export function ScaleOfImpact() {
         {/* Static Data Grid (No jumping text) */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-y-4 gap-x-2 md:gap-12 w-full max-w-5xl mt-4 md:mt-12">
           <div className="flex flex-col items-center">
-            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">200 <span className="text-primary">+</span></div>
+            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">200<span className="text-emerald-400">+</span></div>
             <div className="text-xs font-bold uppercase tracking-widest text-white/50">{locale === 'en' ? 'Projects' : 'Projekte'}</div>
           </div>
           <div className="flex flex-col items-center">
-            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">974 <span className="text-primary text-xl md:text-2xl">km</span></div>
+            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">974<span className="text-emerald-400 text-xl md:text-2xl ml-1">km</span></div>
             <div className="text-xs font-bold uppercase tracking-widest text-white/50">{locale === 'en' ? 'Cable Laying' : 'Kabelverlegung'}</div>
           </div>
           <div className="flex flex-col items-center">
-            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">300 <span className="text-primary text-xl md:text-2xl">km</span></div>
+            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">300<span className="text-emerald-400 text-xl md:text-2xl ml-1">km</span></div>
             <div className="text-xs font-bold uppercase tracking-widest text-white/50">{locale === 'en' ? 'Open Trenching' : 'Offener Tiefbau'}</div>
           </div>
           <div className="flex flex-col items-center">
-            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">160 <span className="text-primary text-xl md:text-2xl">km</span></div>
+            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">160<span className="text-emerald-400 text-xl md:text-2xl ml-1">km</span></div>
             <div className="text-xs font-bold uppercase tracking-widest text-white/50">{locale === 'en' ? 'HDD Drilling' : 'Spülbohrung'}</div>
           </div>
         </div>