chore: bump version to 2.2.36

- fix: bottom nav and footer padding collision
- fix: reveal animation flickering (Certificates, SubCompanyTiles)
- fix: tooltip flyout overflow on mobile in Germany map
- fix: flex direction for 'Projekt anfragen' and Service Detail icons
- fix: text alignment and spacing issues in ReferencesSlider
- fix: reduce excessive whitespace above footer

.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,13 +13,14 @@ 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"
 
-concurrency:
-  group: deploy-pipeline
-  cancel-in-progress: true
 
 jobs:
   # ──────────────────────────────────────────────────────────────────────────────
@@ -92,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"
@@ -146,6 +147,13 @@ jobs:
             echo "short_sha=$SHORT_SHA"
           } >> "$GITHUB_OUTPUT"
 
+      - name: 🚦 Priority Gate
+        env:
+          GITEA_PAT: ${{ secrets.GITEA_PAT }}
+          CURRENT_RUN_ID: ${{ github.run_id }}
+          CURRENT_TARGET: ${{ steps.determine.outputs.target }}
+        run: bash scripts/priority-gate.sh
+
   # ──────────────────────────────────────────────────────────────────────────────
   # JOB 2: QA (Lint, Typecheck, Test)
   # ──────────────────────────────────────────────────────────────────────────────
@@ -227,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 }}
@@ -274,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
@@ -342,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"
@@ -384,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/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/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/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/turbo-lint.log

@@ -1,129 +0,0 @@
-
-> e-tib-nextjs@2.2.12 lint /Volumes/Alpha SSD/Coding/e-tib.com
-> eslint .
-
-
-/Volumes/Alpha SSD/Coding/e-tib.com/app/[locale]/[slug]/page.tsx
-   1:20  warning  'redirect' is defined but never used                                                                                                                                                                                                                                                     @typescript-eslint/no-unused-vars
-  75:24  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
-
-/Volumes/Alpha SSD/Coding/e-tib.com/app/[locale]/blog/[slug]/page.tsx
-   1:20  warning  'redirect' is defined but never used                                                                                                                                                                                                                                                     @typescript-eslint/no-unused-vars
-  39:24  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
-
-/Volumes/Alpha SSD/Coding/e-tib.com/app/[locale]/error.tsx
-  7:30  warning  'AlertTriangle' is defined but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/app/[locale]/not-found.tsx
-  6:10  warning  'Terminal' is defined but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/app/[locale]/referenzen/[slug]/page.tsx
-  92:26  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
-
-/Volumes/Alpha SSD/Coding/e-tib.com/app/[locale]/referenzen/page.tsx
-  1:21  warning  'Heading' is defined but never used  @typescript-eslint/no-unused-vars
-  1:30  warning  'Badge' is defined but never used    @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/JsonLd.tsx
-   1:30  warning  'Graph' is defined but never used       @typescript-eslint/no-unused-vars
-  43:31  warning  '_' is assigned a value but never used  @typescript-eslint/no-unused-vars
-  48:29  warning  '_' is assigned a value but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/CertificatesBlock.tsx
-    6:10  warning  'Button' is defined but never used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   @typescript-eslint/no-unused-vars
-    9:10  warning  'FileText' is defined but never used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 @typescript-eslint/no-unused-vars
-  102:5   warning  Error: Calling setState synchronously within an effect can trigger cascading renders
-
-Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
-* Update external systems with the latest state from React.
-* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
-
-Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/CertificatesBlock.tsx:102:5
-  100 |
-  101 |   useEffect(() => {
-> 102 |     setIsMounted(true);
-      |     ^^^^^^^^^^^^ Avoid calling setState() directly within an effect
-  103 |   }, []);
-  104 |
-  105 |   const badgeText = badge || 'Zertifizierungen & Nachweise';  react-hooks/set-state-in-effect
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/CompetenceBentoGrid.tsx
-  53:5  warning  Error: Calling setState synchronously within an effect can trigger cascading renders
-
-Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
-* Update external systems with the latest state from React.
-* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
-
-Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/CompetenceBentoGrid.tsx:53:5
-  51 |   
-  52 |   useEffect(() => {
-> 53 |     setIsMounted(true);
-     |     ^^^^^^^^^^^^ Avoid calling setState() directly within an effect
-  54 |   }, []);
-  55 |
-  56 |   const badge = props.badge || data?.badge || 'Leistungsspektrum';  react-hooks/set-state-in-effect
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/HeroVideo.tsx
-   5:18  warning  'AnimatePresence' is defined but never used  @typescript-eslint/no-unused-vars
-   6:10  warning  'useState' is defined but never used         @typescript-eslint/no-unused-vars
-   6:20  warning  'useEffect' is defined but never used        @typescript-eslint/no-unused-vars
-  45:12  warning  'e' is defined but never used                @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/InteractiveGermanyMap.tsx
-   5:18  warning  'Factory' is defined but never used              @typescript-eslint/no-unused-vars
-   5:27  warning  'Zap' is defined but never used                  @typescript-eslint/no-unused-vars
-  53:9   warning  'hq' is assigned a value but never used          @typescript-eslint/no-unused-vars
-  54:9   warning  'branch' is assigned a value but never used      @typescript-eslint/no-unused-vars
-  55:9   warning  'projects' is assigned a value but never used    @typescript-eslint/no-unused-vars
-  56:9   warning  'minorNodes' is assigned a value but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/ReferencesSlider.test.tsx
-   5:10  warning  'NextIntlClientProvider' is defined but never used                                                                                                                                                                                                                                       @typescript-eslint/no-unused-vars
-  21:12  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/TeamGridBlock.tsx
-  20:39  warning  'title' is defined but never used. Allowed unused args must match /^_/u                 @typescript-eslint/no-unused-vars
-  20:46  warning  'department' is defined but never used. Allowed unused args must match /^_/u            @typescript-eslint/no-unused-vars
-  20:58  warning  'showContact' is assigned a value but never used. Allowed unused args must match /^_/u  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/decorations/CorporateBackground.tsx
-  36:13  warning  'distance' is assigned a value but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/home/Hero.tsx
-   9:39  warning  'useCallback' is defined but never used                                                                                         @typescript-eslint/no-unused-vars
-  77:6   warning  React Hook useEffect has missing dependencies: 'HERO_PLACEHOLDERS' and 't'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/home/MeetTheTeam.tsx
-  8:9  warning  'teamT' is assigned a value but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/layout/Footer.tsx
-  4:35  warning  'Accessibility' is defined but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/providers/InitialLoader.tsx
-  5:8  warning  'Image' is defined but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/providers/PageTransitionShutter.tsx
-  6:8  warning  'Image' is defined but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/search/AIOrb.tsx
-  153:13  warning  'breathe' is assigned a value but never used       @typescript-eslint/no-unused-vars
-  212:15  warning  'targetExcite' is assigned a value but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/search/AISearchResults.tsx
-  100:6  warning  React Hook useEffect has missing dependencies: 'handleSearch' and 'initialQuery'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/ui/AnimatedCounter.tsx
-  3:28  warning  'useState' is defined but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/lib/blog.ts
-   6:7  warning  'BLOG_DIR' is assigned a value but never used    @typescript-eslint/no-unused-vars
-  94:7  warning  'next' is never reassigned. Use 'const' instead  prefer-const
-  95:7  warning  'prev' is never reassigned. Use 'const' instead  prefer-const
-
-✖ 45 problems (0 errors, 45 warnings)
-  0 errors and 2 warnings potentially fixable with the `--fix` option.
-

.turbo/turbo-test.log

@@ -1,31 +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
-
- ✓ tests/mdx-links.test.ts (1 test) 4ms
- ✓ lib/mail/mailer.test.ts (1 test) 2ms
- ✓ lib/env.test.ts (6 tests) 6ms
-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) 21ms
- ✓ components/search/AISearchResults.test.tsx (1 test) 26ms
-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 (4 tests) 40ms
-stdout | app/[locale]/referenzen/[slug]/page.test.tsx
-[Config] Initializing Toggles: { feedbackEnabled: false }
-
- ✓ app/[locale]/referenzen/[slug]/page.test.tsx (1 test) 6ms
-
- Test Files  7 passed (7)
-      Tests  19 passed (19)
-   Start at  14:12:48
-   Duration  1.80s (transform 863ms, setup 0ms, import 2.94s, tests 105ms, environment 3.18s)
-

.turbo/turbo-typecheck.log

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

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

INSTRUCTIONS.md

@@ -0,0 +1,25 @@
+# Antigravity Instructions & Project Rules
+
+This document contains critical project-specific rules for the e-tib.com codebase. Antigravity must read and follow these rules at all times.
+
+## 1. Bilingual Site (German & English) - STRICT
+- **Always update BOTH languages!** The website is bilingual. 
+- When changing content, adding pages, or updating text, you MUST always check and update both `content/de/` and `content/en/` simultaneously.
+- When adding new components with text, ensure they are built to support both languages or update the respective translation files/mechanisms. Do NOT just hardcode German text and forget the English version.
+
+## 2. No Dummy Data / No Hallucinations
+- Do not invent or hallucinate placeholder text (e.g., "Nachweis liegt vor" for certificates that don't exist). 
+- Only implement what is explicitly requested or what matches provided assets/data. 
+- If data is missing, ask the user instead of inventing placeholders.
+
+## 3. Git Workflow & RC Tagging
+- When instructed to "commit and tag" (or similar), always follow this process:
+  1. Add and commit the changes with conventional commits (`feat:`, `fix:`, `chore:`, etc.).
+  2. Check the latest tag using `git describe --tags --abbrev=0`.
+  3. Increment the RC (Release Candidate) number of the current version (e.g., if latest is `v2.2.13-rc19`, the new tag is `v2.2.13-rc20`).
+  4. Create the tag: `git tag vX.Y.Z-rcN`.
+  5. Push the commit and the tag: `git push origin main --tags`.
+
+## 4. Work Exclusively on the Correct Branch
+- Follow the `USER_GLOBAL` directive: If on `main`, create a branch unless explicitly told to work on `main`. 
+- For e-tib.com, often small fixes are done on `main` if the user commands it ("auf main arbeiten"), but always verify context.

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

@@ -10,7 +10,6 @@ import TrackedLink from '@/components/analytics/TrackedLink';
 import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
 import { getAllReferences } from '@/lib/references';
 import { defaultLocations, minorLocations } from '@/lib/map-data';
-
 // Import components used in MDX
 import { HeroVideo as HomeHero } from '@/components/blocks/HeroVideo';
 import { SubCompanyTiles as HomeSubCompanyTiles } from '@/components/blocks/SubCompanyTiles';
@@ -18,7 +17,6 @@ import { CompetenceBentoGrid as HomeCompetenceBentoGrid } from '@/components/blo
 import { ReferencesSlider as HomeReferencesSlider } from '@/components/blocks/ReferencesSlider';
 import { CompanyTimeline } from '@/components/blocks/CompanyTimeline';
 import { JobListingBlock } from '@/components/blocks/JobListingBlock';
-import { CallToAction } from '@/components/blocks/CallToAction';
 import { ServiceDetailGrid } from '@/components/blocks/ServiceDetailGrid';
 import { BenefitGrid } from '@/components/blocks/BenefitGrid';
 import { InteractiveGermanyMap } from '@/components/blocks/InteractiveGermanyMap';
@@ -41,7 +39,6 @@ const mdxComponents = {
   HomeReferencesSlider,
   CompanyTimeline,
   JobListingBlock,
-  CallToAction,
   ServiceDetailGrid,
   BenefitGrid,
   InteractiveGermanyMap,
@@ -51,6 +48,7 @@ const mdxComponents = {
   TeamGrid,
   JsonLd,
   Button,
+  Badge,
   AnimatedCounter,
   GrowthChart,
   DeepDrillAnimation,
@@ -187,7 +185,7 @@ export default async function Page(props: { params: Promise<{ locale: string; sl
     <div className={`flex flex-col min-h-screen ${isFullBleed ? '' : 'bg-white'}`}>
       {/* Generic Hero Section (only for standard pages) */}
       {!isFullBleed && (
-        <section className="bg-primary-dark text-white pt-40 pb-12 md:pt-56 md:pb-16 min-h-[40vh] md:min-h-[45vh] flex flex-col justify-end relative overflow-hidden">
+        <section key={`hero-section-${slug}`} className="bg-primary-dark text-white pt-28 pb-10 md:pt-56 md:pb-16 min-h-[30vh] md:min-h-[45vh] flex flex-col justify-end relative overflow-hidden">
           <div className="absolute inset-0 opacity-20 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-accent/50 via-transparent to-transparent" />
           </div>
@@ -231,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/[slug]/page.tsx

@@ -99,7 +99,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
 
       {/* Featured Image Header */}
       {post.frontmatter.featuredImage ? (
-        <div className="relative w-full h-[70vh] min-h-[500px] overflow-hidden group">
+        <div className="relative w-full h-[50vh] md:h-[70vh] min-h-[350px] md:min-h-[500px] overflow-hidden group">
           <div className="absolute inset-0 transition-transform duration-[3s] ease-out scale-110 group-hover:scale-100">
             <Image
               src={post.frontmatter.featuredImage.split('?')[0]}

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]/blog/page.tsx

@@ -59,7 +59,7 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
     <div className="bg-neutral-light min-h-screen">
       {/* Hero Section - Immersive Magazine Feel */}
       <Reveal>
-        <article className="relative h-[50vh] md:h-[70vh] min-h-[400px] md:min-h-[600px] flex items-center overflow-hidden bg-primary-dark">
+        <article className="relative h-[40vh] md:h-[70vh] min-h-[300px] md:min-h-[600px] flex items-center overflow-hidden bg-primary-dark">
           {featuredPost && featuredPost.frontmatter.featuredImage && (
             <>
               <Image

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]/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';
@@ -19,7 +20,6 @@ import { TransitionProvider } from '@/components/providers/TransitionProvider';
 import { PageTransitionShutter } from '@/components/providers/PageTransitionShutter';
 import { InitialLoader } from '@/components/providers/InitialLoader';
 import { CorporateBackground } from '@/components/decorations/CorporateBackground';
-
 const inter = Inter({
   subsets: ['latin'],
   display: 'swap',
@@ -36,9 +36,9 @@ export async function generateMetadata(props: {
   return {
     title: {
       template: '%s | E-TIB',
-      default: 'E-TIB | Die Experten für Kabeltiefbau',
+      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: {
@@ -92,17 +92,19 @@ export default async function Layout(props: {
       url: `/${safeLocale}/${await mapFileSlugToTranslated('ueber-uns', safeLocale)}`,
       children: [
         { label: safeLocale === 'de' ? 'Firma' : 'Company', url: `/${safeLocale}/${await mapFileSlugToTranslated('ueber-uns', safeLocale)}` },
-        { label: safeLocale === 'de' ? 'Standorte Übersicht' : 'Locations Overview', url: `/${safeLocale}/standorte` },
-        { label: 'Standort Guben', url: `/${safeLocale}/standorte/guben` },
-        { label: 'Standort Bülstedt', url: `/${safeLocale}/standorte/buelstedt` },
         { label: safeLocale === 'de' ? 'Unser Team' : 'Our Team', url: `/${safeLocale}/team` },
-        { label: safeLocale === 'de' ? 'Zertifikate' : 'Certificates', url: `/${safeLocale}/zertifikate` }
+        { label: safeLocale === 'de' ? 'Zertifikate' : 'Certificates', url: `/${safeLocale}/zertifikate` },
+        { label: safeLocale === 'de' ? 'Standorte' : 'Locations', url: `/${safeLocale}/standorte` }
       ]
     },
     {
       label: safeLocale === 'de' ? 'Referenzen' : 'References',
       url: `/${safeLocale}/referenzen`
     },
+    { 
+      label: safeLocale === 'de' ? 'Karriere' : 'Career', 
+      url: `/${safeLocale}/${safeLocale === 'de' ? 'karriere' : 'career'}` 
+    },
     { 
       label: safeLocale === 'de' ? 'Messen' : 'Events', 
       url: `/${safeLocale}/${await mapFileSlugToTranslated('messen', safeLocale)}` 
@@ -173,9 +175,7 @@ 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
@@ -184,13 +184,9 @@ export default async function Layout(props: {
       data-scroll-behavior="smooth"
     >
       <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">
         <NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
@@ -204,7 +200,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}
@@ -213,6 +209,7 @@ export default async function Layout(props: {
             <Footer companyInfo={companyInfo} />
             <JsonLd />
             <AnalyticsShell />
+
             {feedbackEnabled && <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />}
           </TransitionProvider>
         </NextIntlClientProvider>

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,42 @@ const mdxComponents = (references: any[]) => ({
   AnimatedCounter,
   InteractiveGermanyMap,
   ScaleOfImpact,
+  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-40 pb-16 md:pt-52 md:pb-24 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 { standorteLocations } from '@/lib/standorte-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<{
@@ -23,7 +53,7 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
 
   return {
     title: 'Referenzen | E-TIB Gruppe',
-    description: 'Erfolgreich abgeschlossene Projekte der E-TIB Gruppe im Bereich Kabeltiefbau, Spülbohrtechnik und Netzinfrastruktur.',
+    description: 'Erfolgreich abgeschlossene Projekte der E-TIB Gruppe im Bereich Kabelnetzbau, Spülbohrtechnik und Netzinfrastruktur.',
     alternates: {
       canonical: `${SITE_URL}/${locale}/referenzen`,
       languages: {
@@ -53,7 +83,7 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
 
   const references = await getAllReferences(locale);
   
-  const allLocations = [...standorteLocations, ...defaultLocations, ...minorLocations];
+  const allLocations = [...defaultLocations, ...minorLocations];
   const enrichedLocations = allLocations.map(loc => {
     if (loc.type === 'project') {
       const ref = references.find(r => r.slug === loc.id);
@@ -72,25 +102,28 @@ 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">
-      {/* Map Hero Section */}
+    <div className="flex flex-col min-h-screen bg-neutral-50 pb-8 md:pb-24">
+      {/* Map Section */}
       <InteractiveGermanyMap
         isHero={true}
         badge={locale === 'en' ? 'Our References' : 'Unsere Referenzen'}
         title={locale === 'en' ? 'Successfully realized projects.' : 'Erfolgreich umgesetzte Projekte.'}
         description={locale === 'en' ? 'From broadband expansion to complex 110kV lines: A selection of our nationwide projects where we have created infrastructure for the future.' : 'Vom Breitbandausbau bis zur komplexen 110kV-Trasse: Ein Auszug unserer bundesweiten Projekte, bei denen wir Infrastruktur für die Zukunft geschaffen haben.'}
         locations={enrichedLocations}
+        stats={[
+          { value: '100', suffix: '%', label: locale === 'en' ? 'Nationwide Reach' : 'Überregionale Reichweite' },
+          { value: '200', suffix: '+', label: locale === 'en' ? 'Completed Projects' : 'Abgeschlossene Projekte' }
+        ]}
       />
 
       {/* Main Content Area */}
       <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 */}
@@ -107,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">
@@ -120,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">
@@ -143,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

@@ -1,4 +1,4 @@
-import { Container } from '@/components/ui';
+import { Container, Badge, Heading } from '@/components/ui';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
@@ -63,137 +63,122 @@ export default async function StandortDetail(props: { params: Promise<{ locale:
   }
 
   return (
-    <div className="flex flex-col min-h-screen bg-neutral-50 pb-16 md:pb-24 pt-32">
-      <Container>
-        {/* Header Section */}
-        <div className="mb-12 md:mb-16">
-          <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-6">
-            <MapPin className="w-4 h-4" />
-            <span>{standort.type === 'hq' ? (safeLocale === 'de' ? 'Hauptsitz' : 'Headquarters') : (safeLocale === 'de' ? 'Niederlassung' : 'Branch')}</span>
+    <div className="flex flex-col min-h-screen bg-white">
+      {/* Generic Hero Section to match standard pages */}
+      <section key={`standort-hero-${slug}`} className="bg-primary-dark text-white pt-28 pb-10 md:pt-56 md:pb-16 min-h-[30vh] md:min-h-[45vh] flex flex-col justify-end relative overflow-hidden">
+        <div className="absolute inset-0 opacity-20 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-accent/50 via-transparent to-transparent" />
+        </div>
+        <Container className="relative z-10">
+          <div className="max-w-4xl">
+            <Badge variant="accent" className="mb-4 md:mb-6 shadow-sm flex inline-flex items-center gap-2">
+              <MapPin className="w-4 h-4" />
+              {standort.type === 'hq' ? (safeLocale === 'de' ? 'Hauptsitz' : 'Headquarters') : (safeLocale === 'de' ? 'Niederlassung' : 'Branch')}
+            </Badge>
+            <Heading level={1} variant="white" className="mb-0 drop-shadow-sm">
+              {standort.name}
+            </Heading>
           </div>
-          <h1 className="font-heading text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-neutral-dark text-balance">
-            {standort.name}
-          </h1>
-          <p className="text-xl text-neutral-500 max-w-3xl leading-relaxed">
+        </Container>
+      </section>
+
+      {/* Main Content Area */}
+      <Container className="py-16 md:py-24">
+        {/* Excerpt/Lead paragraph */}
+        <div className="mb-16 max-w-4xl mx-auto">
+          <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-medium border-l-4 border-primary pl-8 py-2 italic">
             {standort.description[safeLocale]}
           </p>
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
-          {/* Main Content (Images & Description) */}
-          <div className="lg:col-span-8 space-y-8">
-            {/* Featured Image */}
-            <div className="relative aspect-video w-full rounded-3xl overflow-hidden bg-neutral-900 shadow-xl border border-neutral-200">
-              <Image
-                src={standort.image}
-                alt={standort.name}
-                fill
-                className="object-cover"
-                priority
-              />
-              <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
-            </div>
-
-            {/* Key Features */}
-            <div className="bg-white rounded-3xl p-8 md:p-10 shadow-sm border border-neutral-100">
-              <h2 className="text-2xl font-bold font-heading mb-6 text-neutral-dark">
-                {safeLocale === 'de' ? 'Unsere Leistungen vor Ort' : 'Our Local Services'}
-              </h2>
-              <ul className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                {standort.keyFeatures[safeLocale].map((feature, idx) => (
-                  <li key={idx} className="flex items-start gap-3">
-                    <CheckCircle2 className="w-5 h-5 text-primary shrink-0 mt-0.5" />
-                    <span className="text-neutral-700 font-medium">{feature}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
+        {/* Main content in prose style */}
+        <div className="max-w-4xl mx-auto">
+          <div className="prose prose-lg md:prose-xl prose-neutral max-w-none prose-headings:font-heading prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-4xl prose-h2:text-3xl prose-h2:mt-12 prose-h2:border-b prose-h2:border-neutral-200 prose-h2:pb-4 prose-h3:text-2xl prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:font-medium prose-a:underline prose-a:underline-offset-4 prose-a:decoration-primary/30 hover:prose-a:decoration-primary prose-strong:text-text-primary prose-strong:font-semibold prose-li:text-text-secondary prose-ul:list-disc prose-ol:list-decimal">
             
-            {/* Gallery (if any) */}
+            <img className="rounded-2xl shadow-2xl my-12 max-w-full h-auto border border-neutral-100" src={standort.image} alt={standort.name} />
+
+            <h2 className="mt-16 mb-6 border-b border-neutral-100 pb-4">{safeLocale === 'de' ? 'Unsere Leistungen vor Ort' : 'Our Local Services'}</h2>
+            <ul className="list-none mb-8 space-y-3 text-base md:text-lg text-text-secondary font-medium max-w-3xl">
+              {standort.keyFeatures[safeLocale].map((feature, idx) => (
+                <li key={idx} className="relative pl-6 before:content-[''] before:absolute before:left-0 before:top-[0.6em] before:w-2 before:h-2 before:bg-primary/50 before:rounded-sm">
+                  {feature}
+                </li>
+              ))}
+            </ul>
+
+            <h2 className="mt-16 mb-6 border-b border-neutral-100 pb-4">{safeLocale === 'de' ? 'Kontakt & Anfahrt' : 'Contact & Directions'}</h2>
+            
+            <p className="text-base md:text-lg text-text-secondary leading-[1.8] mb-6 font-medium max-w-3xl">
+              <strong>{safeLocale === 'de' ? 'Adresse:' : 'Address:'}</strong><br/>
+              {standort.address.street}<br/>
+              {standort.address.city}
+            </p>
+            <p className="text-base md:text-lg text-text-secondary leading-[1.8] mb-6 font-medium max-w-3xl">
+              <TrackedLink 
+                href={`https://maps.google.com/?q=${encodeURIComponent(`${standort.address.street}, ${standort.address.city}`)}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary hover:text-primary-dark underline decoration-primary/30 underline-offset-4 hover:decoration-primary transition-all font-bold flex items-center gap-1 w-fit"
+                eventProperties={{ location: 'standort_maps_link', slug: standort.id }}
+              >
+                {safeLocale === 'de' ? 'In Google Maps öffnen' : 'Open in Google Maps'}
+                <ArrowUpRight className="w-4 h-4 inline-block" />
+              </TrackedLink>
+            </p>
+
+            <p className="text-base md:text-lg text-text-secondary leading-[1.8] mb-6 font-medium max-w-3xl">
+              <strong>{safeLocale === 'de' ? 'Telefon:' : 'Phone:'}</strong><br/>
+              <a href={`tel:${standort.contact.phone.replace(/[^0-9+]/g, '')}`} className="text-primary hover:text-primary-dark underline decoration-primary/30 underline-offset-4 hover:decoration-primary transition-all font-bold">
+                {standort.contact.phone}
+              </a>
+            </p>
+
+            <p className="text-base md:text-lg text-text-secondary leading-[1.8] mb-6 font-medium max-w-3xl">
+              <strong>Email:</strong><br/>
+              <a href={`mailto:${standort.contact.email}`} className="text-primary hover:text-primary-dark underline decoration-primary/30 underline-offset-4 hover:decoration-primary transition-all font-bold">
+                {standort.contact.email}
+              </a>
+            </p>
+
             {standort.gallery && standort.gallery.length > 0 && (
-              <div className="grid grid-cols-2 gap-4">
-                {standort.gallery.map((img, idx) => (
-                  <div key={idx} className="relative aspect-[4/3] rounded-2xl overflow-hidden bg-neutral-100">
-                    <Image src={img} alt={`Gallery ${idx + 1}`} fill className="object-cover" />
-                  </div>
-                ))}
-              </div>
+              <>
+                <h2 className="mt-16 mb-6 border-b border-neutral-100 pb-4">Galerie</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 not-prose my-12">
+                  {standort.gallery.map((img, idx) => (
+                    <div key={idx} className="relative aspect-[4/3] rounded-2xl overflow-hidden bg-neutral-100 border border-neutral-200 shadow-md hover:shadow-xl transition-shadow duration-300">
+                      <Image src={img} alt={`Gallery ${idx + 1}`} fill className="object-cover transition-transform duration-700 hover:scale-105" />
+                    </div>
+                  ))}
+                </div>
+              </>
             )}
           </div>
+        </div>
+      </Container>
 
-          {/* Sidebar (Contact & Address) */}
-          <div className="lg:col-span-4">
-            <div className="sticky top-32 space-y-6">
-              
-              {/* Contact Card */}
-              <div className="bg-[#050B14] text-white rounded-3xl p-8 shadow-2xl relative overflow-hidden group">
-                <AnimatedGlossyBorder opacity={0.5} className="z-10" />
-                <div className="absolute top-0 right-0 w-64 h-full bg-primary/5 blur-3xl -translate-y-1/2 translate-x-1/3" />
-                
-                <div className="relative z-20">
-                  <h3 className="text-xl font-bold font-heading mb-6 flex items-center gap-2">
-                    <Navigation className="w-5 h-5 text-primary" />
-                    {safeLocale === 'de' ? 'Kontakt & Anfahrt' : 'Contact & Directions'}
-                  </h3>
-                  
-                  <div className="space-y-6">
-                    <div className="flex items-start gap-4">
-                      <div className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center shrink-0">
-                        <MapPin className="w-5 h-5 text-primary" />
-                      </div>
-                      <div>
-                        <div className="text-xs text-white/50 font-bold uppercase tracking-wider mb-1">
-                          {safeLocale === 'de' ? 'Adresse' : 'Address'}
-                        </div>
-                        <div className="text-white font-medium">
-                          {standort.address.street}<br />
-                          {standort.address.city}
-                        </div>
-                        <TrackedLink 
-                          href={`https://maps.google.com/?q=${encodeURIComponent(`${standort.address.street}, ${standort.address.city}`)}`}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="inline-flex items-center gap-1 mt-2 text-primary hover:text-white transition-colors text-sm font-bold"
-                          eventProperties={{ location: 'standort_maps_link', slug: standort.id }}
-                        >
-                          {safeLocale === 'de' ? 'In Google Maps öffnen' : 'Open in Google Maps'}
-                          <ArrowUpRight className="w-3.5 h-3.5" />
-                        </TrackedLink>
-                      </div>
-                    </div>
-                    
-                    <div className="flex items-start gap-4">
-                      <div className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center shrink-0">
-                        <Phone className="w-5 h-5 text-primary" />
-                      </div>
-                      <div>
-                        <div className="text-xs text-white/50 font-bold uppercase tracking-wider mb-1">
-                          {safeLocale === 'de' ? 'Telefon' : 'Phone'}
-                        </div>
-                        <a href={`tel:${standort.contact.phone.replace(/[^0-9+]/g, '')}`} className="text-white font-medium hover:text-primary transition-colors">
-                          {standort.contact.phone}
-                        </a>
-                      </div>
-                    </div>
-                    
-                    <div className="flex items-start gap-4">
-                      <div className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center shrink-0">
-                        <Mail className="w-5 h-5 text-primary" />
-                      </div>
-                      <div>
-                        <div className="text-xs text-white/50 font-bold uppercase tracking-wider mb-1">
-                          Email
-                        </div>
-                        <a href={`mailto:${standort.contact.email}`} className="text-white font-medium hover:text-primary transition-colors">
-                          {standort.contact.email}
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-            </div>
+      {/* Support Section */}
+      <Container>
+        <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>
+            <p className="text-lg text-white/70 mb-8">{t('supportTeamAvailable')}</p>
+            <TrackedLink
+              href={`/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}`}
+              className={getButtonClasses('accent', 'lg')}
+              eventProperties={{
+                location: 'standort_page_support_cta',
+                page_slug: slug,
+              }}
+            >
+              <span className="relative z-10 flex items-center justify-center gap-2 transition-colors duration-500 group-hover/btn:text-primary-dark">
+                {t('contactUs')}
+                <span className="ml-2 transition-transform group-hover/btn:translate-x-1">
+                  &rarr;
+                </span>
+              </span>
+              <ButtonOverlay variant="accent" />
+            </TrackedLink>
           </div>
         </div>
       </Container>

app/[locale]/standorte/page.tsx

@@ -6,7 +6,7 @@ import { MapPin, Navigation, ArrowUpRight } from 'lucide-react';
 import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
 import { SITE_URL } from '@/lib/schema';
 import Image from 'next/image';
-import { standorteData } from '@/lib/standorte-data';
+import { standorteData, standorteLocations } from '@/lib/standorte-data';
 import { InteractiveGermanyMap } from '@/components/blocks/InteractiveGermanyMap';
 
 interface PageProps {
@@ -15,17 +15,15 @@ interface PageProps {
   }>;
 }
 
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
   const { locale } = await params;
-  if (locale !== 'de' && locale !== 'en') return {};
+  const safeLocale = locale === 'de' ? 'de' : 'en';
 
   return {
-    title: locale === 'de' ? 'Standorte | E-TIB Gruppe' : 'Locations | E-TIB Group',
-    description: locale === 'de' 
-      ? 'Die operativen Standorte der E-TIB Gruppe: Guben, Kirchheilingen und Bülstedt.'
-      : 'The operational locations of the E-TIB Group: Guben, Kirchheilingen and Bülstedt.',
+    title: safeLocale === 'en' ? 'Our Locations' : 'Unsere Standorte',
+    description: safeLocale === 'en' ? 'Our operational locations across Germany.' : 'Unsere operativen Standorte deutschlandweit.',
     alternates: {
-      canonical: `${SITE_URL}/${locale}/standorte`,
+      canonical: `${SITE_URL}/${safeLocale}/standorte`,
       languages: {
         de: `${SITE_URL}/de/standorte`,
         en: `${SITE_URL}/en/standorte`,
@@ -46,10 +44,11 @@ export default async function StandorteOverview(props: { params: Promise<{ local
       {/* Map Hero Section */}
       <InteractiveGermanyMap
         isHero={true}
+        locations={standorteLocations}
         badge={safeLocale === 'en' ? 'Our Locations' : 'Unsere Standorte'}
         title={safeLocale === 'en' ? 'Nationwide operational for you.' : 'Deutschlandweit für Sie im Einsatz.'}
         description={safeLocale === 'en' 
-          ? 'From our strategic locations in Guben, Kirchheilingen, and Bülstedt, we control and implement complex infrastructure projects nationwide.' 
+          ? '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.'}
       />
 
@@ -115,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/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/globals.css

@@ -10,11 +10,13 @@
   }
   
   .hide-scrollbar {
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
+    -ms-overflow-style: none !important;  /* IE and Edge */
+    scrollbar-width: none !important;  /* Firefox */
   }
   .hide-scrollbar::-webkit-scrollbar {
-    display: none; /* Chrome, Safari and Opera */
+    display: none !important; /* Chrome, Safari and Opera */
+    width: 0 !important;
+    height: 0 !important;
   }
 
   @keyframes bg-pulse-15 {

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/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/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 { motion, AnimatePresence } 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 && (
+              <motion.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 && (
+              <motion.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">
+            <motion.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>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+
+      {/* 4. Annotations List Sidebar */}
+      <AnimatePresence>
+        {showList && (
+          <>
+            <motion.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]"
+            />
+            <motion.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>
+              )}
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

components/annotator-local/index.ts

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

components/blocks/BenefitGrid.tsx

@@ -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,13 +75,13 @@ const Icons = {
 
 export function BenefitGrid({ badge, title, description, benefits }: BenefitGridProps) {
   return (
-    <section className="bg-white 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">
           {badge && <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-4">{badge}</h2>}
           {title && (
-            <h3 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-dark mb-6">
+            <h3 className="font-heading text-2xl md:text-5xl font-extrabold text-neutral-dark mb-6">
               {title}
             </h3>
           )}

components/blocks/CallToAction.tsx

@@ -1,76 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Button } from '@/components/ui/Button';
-import { motion } from 'framer-motion';
-import { useTranslations } from 'next-intl';
-
-export interface CallToActionProps {
-  title?: string;
-  description?: string;
-  text?: string; // Alias for description
-  ctaLabel?: string;
-  buttonText?: string; // Alias for ctaLabel
-  ctaHref?: string;
-  buttonLink?: string; // Alias for ctaHref
-  theme?: 'light' | 'dark';
-}
-
-const containerVariants = {
-  hidden: { opacity: 0 },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.15,
-      delayChildren: 0.1,
-    },
-  },
-};
-
-const itemVariants = {
-  hidden: { opacity: 0, y: 20 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const },
-  },
-};
-
-export const CallToAction: React.FC<CallToActionProps> = (props) => {
-  const { theme = 'light' } = props;
-  const isDark = theme === 'dark';
-  const t = useTranslations('CallToAction');
-  
-  const title = props.title || t('title');
-  const description = props.description || props.text || t('description');
-  const ctaLabel = props.ctaLabel || props.buttonText || t('ctaLabel');
-  const ctaHref = props.ctaHref || props.buttonLink || t('ctaHref');
-  
-  return (
-    <div className={`py-24 text-center ${isDark ? 'bg-primary-dark text-white' : 'bg-neutral-50 border-t border-neutral-100'}`}>
-      <motion.div 
-        className="container max-w-3xl mx-auto px-4"
-        variants={containerVariants}
-        initial="hidden"
-        whileInView="visible"
-        viewport={{ once: true, margin: "-100px" }}
-      >
-        <motion.h2 variants={itemVariants} className={`font-heading text-4xl font-extrabold mb-6 ${isDark ? 'text-white' : 'text-neutral-dark'}`}>
-          {title}
-        </motion.h2>
-        <motion.p variants={itemVariants} className={`text-xl mb-10 leading-relaxed ${isDark ? 'text-white/70' : 'text-text-secondary'}`}>
-          {description}
-        </motion.p>
-        <motion.div variants={itemVariants}>
-          <Button 
-            href={ctaHref} 
-            size="xl"
-            variant={isDark ? 'white' : 'primary'}
-          >
-            {ctaLabel}
-          </Button>
-        </motion.div>
-      </motion.div>
-    </div>
-  );
-};

components/blocks/CertificatesBlock.tsx

@@ -68,31 +68,7 @@ const defaultCertificates: Certificate[] = [
     type: 'tax',
     date: '13.02.2025',
   },
-  {
-    title: 'Unbedenklichkeit IHK',
-    description: 'Industrie- und Handelskammer',
-    type: 'general',
-  },
-  {
-    title: 'Unbedenklichkeit HWK',
-    description: 'Handwerkskammer',
-    type: 'general',
-  },
-  {
-    title: 'Handelsregisterauszug',
-    description: 'Amtsgericht Cottbus',
-    type: 'general',
-  },
-  {
-    title: 'Gewerbe-Anmeldung',
-    description: 'Stadt Guben',
-    type: 'general',
-  },
-  {
-    title: 'Gewerbezentralregister',
-    description: 'Auskunft aus dem Register',
-    type: 'general',
-  },
+
 ];
 
 export function CertificatesBlock({ badge, title, description, certificates = defaultCertificates, hideHeader = false }: CertificatesBlockProps) {
@@ -118,17 +94,17 @@ 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-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">
               <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badgeText}</h2>
-              <h3 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-dark mb-6">{titleText}</h3>
+              <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>
             </div>
           )}
@@ -138,7 +114,7 @@ export function CertificatesBlock({ badge, title, description, certificates = de
   }
 
   return (
-    <section className="py-24 bg-neutral-50 relative overflow-hidden">
+    <section className="py-12 md:py-24 bg-neutral-50 relative overflow-hidden">
       {/* Background Accents */}
       <div className="absolute top-0 right-0 w-1/3 h-full bg-primary/5 -skew-x-12 translate-x-1/2" />
       <div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-accent/5 skew-y-12 -translate-x-1/2 blur-3xl rounded-full" />
@@ -149,11 +125,11 @@ export function CertificatesBlock({ badge, title, description, certificates = de
             <motion.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-3xl md:text-5xl font-extrabold text-neutral-dark mb-6">{titleText}</h3>
+              <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>
           </div>
@@ -180,7 +156,7 @@ export function CertificatesBlock({ badge, title, description, certificates = de
                 key={index}
                 {...wrapperProps as any}
                 variants={itemVariants}
-                className={`group relative rounded-2xl p-8 flex flex-col justify-between overflow-hidden transition-all duration-500 hover:shadow-xl hover:-translate-y-1 border ${
+                className={`group relative rounded-2xl p-6 md:p-8 flex flex-col justify-between overflow-hidden transition-all duration-500 hover:shadow-xl hover:-translate-y-1 border ${
                   isIso 
                     ? 'bg-neutral-dark text-white border-neutral-800 shadow-lg' 
                     : 'bg-white text-neutral-dark border-neutral-200 shadow-md'

components/blocks/CompanyTimeline.tsx

@@ -80,18 +80,18 @@ export function CompanyTimeline({
   const lineHeight = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
 
   return (
-    <section className="py-24 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" />
 
       <div className="container max-w-5xl relative z-10">
-        <div className="text-center mb-24">
+        <div className="text-center mb-12 md:mb-24">
           <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white border border-neutral-200 text-neutral-dark text-xs font-bold uppercase tracking-wider mb-6 shadow-sm">
             <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
             {finalBadge}
           </div>
-          <h3 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold text-neutral-dark tracking-tight">
+          <h3 className="font-heading text-3xl md:text-5xl lg:text-6xl font-extrabold text-neutral-dark tracking-tight">
             {finalTitle}
           </h3>
         </div>
@@ -116,10 +116,10 @@ export function CompanyTimeline({
               return (
                 <motion.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 */}

components/blocks/CompetenceBentoGrid.tsx

@@ -62,15 +62,15 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
   // Static fallback for SSR
   if (!isMounted) {
     return (
-      <section className="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">
               <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
-              <h3 className="font-heading text-4xl md:text-5xl font-extrabold text-neutral-dark mb-4">{title}</h3>
+              <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>
@@ -79,20 +79,16 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
   }
 
   return (
-    <section className="py-24 bg-neutral text-neutral-dark relative overflow-hidden">
+    <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-end mb-12 px-4 md:px-0">
-          <div className="max-w-2xl">
+        <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-4xl md:text-5xl font-extrabold text-neutral-dark mb-4">{title}</h3>
+            <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]">
+        <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';
@@ -111,8 +107,8 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                   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,8 +123,8 @@ 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>}
+                  <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>}
                 </motion.div>
               );
             }
@@ -136,10 +132,10 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
             return (
               <motion.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,11 +173,11 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                       {item.tag}
                     </span>
                   )}
-                  <h4 className={`font-heading font-extrabold mb-2 ${isLarge ? 'text-3xl 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>
                   )}

components/blocks/ContactSection.tsx

@@ -41,7 +41,7 @@ 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 
@@ -52,7 +52,7 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
             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-4xl font-extrabold text-neutral-dark mb-6">Wir sind für Sie da.</motion.h3>
+            <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">
               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>

components/blocks/DataGridPulse.tsx

@@ -7,7 +7,7 @@ import { useLocale } from 'next-intl';
 export function DataGridPulse() {
   const locale = useLocale();
   return (
-    <div className="relative w-full py-16 md:py-24 bg-neutral-50 border border-neutral-100/80 overflow-hidden flex flex-col items-center rounded-3xl mb-16 shadow-sm">
+    <div className="relative w-full py-12 md:py-24 bg-neutral-50 border border-neutral-100/80 overflow-hidden flex flex-col items-center rounded-3xl mb-16 shadow-sm">
       
       {/* Blueprint grid background */}
       <div 
@@ -36,7 +36,7 @@ export function DataGridPulse() {
         </span>
         
         <div className="bg-white/80 backdrop-blur-md p-8 md:p-12 rounded-2xl border border-neutral-200/50 shadow-lg w-full">
-          <div className="font-mono text-5xl md:text-7xl font-black text-neutral-900 tracking-tighter mb-4 leading-none animate-pulse-slow" style={{ fontVariantNumeric: 'tabular-nums' }}>
+          <div className="font-mono text-4xl md:text-7xl font-black text-neutral-900 tracking-tighter mb-4 leading-none animate-pulse-slow" style={{ fontVariantNumeric: 'tabular-nums' }}>
             372.161<span className="text-primary text-2xl md:text-4xl ml-1 font-sans">m</span>
           </div>
           <p className="text-text-secondary text-base md:text-lg font-medium max-w-md mx-auto leading-relaxed">

components/blocks/DeepDrillAnimation.tsx

@@ -16,13 +16,13 @@ export function DeepDrillAnimation() {
   const drillDepth = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
   
   return (
-    <div ref={containerRef} className="relative w-full py-32 flex flex-col items-center">
+    <div ref={containerRef} className="relative w-full py-12 md:py-32 flex flex-col items-center">
       
       <div className="absolute inset-0 bg-[#050B14] -mx-[50vw] px-[50vw]" />
       
       <div className="relative z-10 w-full max-w-3xl mx-auto flex flex-col items-center text-center text-white">
         
-        <h3 className="text-3xl font-heading font-extrabold mb-8 tracking-tight">
+        <h3 className="text-2xl md:text-3xl font-heading font-extrabold mb-8 tracking-tight">
           {locale === 'en' ? 'Precision in Depth' : 'Präzision in der Tiefe'}
         </h3>
         <p className="text-white/60 text-lg mb-16 max-w-xl">
@@ -46,12 +46,12 @@ export function DeepDrillAnimation() {
         <motion.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"
         >
-          <div className="font-mono text-6xl md:text-8xl font-black text-white tracking-tighter mb-4" style={{ fontVariantNumeric: 'tabular-nums' }}>
-            102.771<span className="text-primary text-3xl md:text-5xl ml-2">m</span>
+          <div className="font-mono text-5xl md:text-8xl font-black text-white tracking-tighter mb-4" style={{ fontVariantNumeric: 'tabular-nums' }}>
+            102.771<span className="text-primary text-2xl md:text-5xl ml-2">m</span>
           </div>
           <div className="text-sm font-bold uppercase tracking-widest text-primary">
             {locale === 'en' ? 'Drilled distance since 2023' : 'Gebohrte Strecke seit 2023'}

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 && (
@@ -29,7 +29,7 @@ export const FaqBlock: React.FC<FaqBlockProps> = ({
               {subtitle}
             </span>
           )}
-          <h2 className="text-3xl md:text-4xl font-bold text-text-primary">
+          <h2 className="text-2xl md:text-4xl font-bold text-text-primary">
             {title}
           </h2>
         </div>

components/blocks/GrowthChart.tsx

@@ -23,9 +23,9 @@ export function GrowthChart() {
   const maxVal = 163470; // Highest value for scaling
 
   return (
-    <div className="w-full bg-white rounded-3xl p-8 md:p-12 shadow-sm border border-neutral-100 my-16">
+    <div className="w-full bg-white rounded-3xl p-6 md:p-12 shadow-sm border border-neutral-100 my-8 md:my-16">
       <div className="mb-10">
-        <h3 className="text-3xl font-heading font-extrabold text-neutral-dark mb-2">{t('title')}</h3>
+        <h3 className="text-2xl md:text-3xl font-heading font-extrabold text-neutral-dark mb-2">{t('title')}</h3>
         <p className="text-neutral-500 font-medium">{t('subtitle')}</p>
       </div>
 

components/blocks/HeroSection.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import Image from 'next/image';
+import { usePathname } from 'next/navigation';
 import { motion } from 'framer-motion';
 import { Badge, Container, Heading } from '@/components/ui';
 import { Button } from '@/components/ui/Button';
@@ -39,13 +40,15 @@ const itemVariants = {
 export const HeroSection: React.FC<HeroSectionProps> = (props) => {
   const { title, badge, subtitle, backgroundImage, alignment, ctaLabel, ctaHref } = props;
   const bgSrc = backgroundImage?.sizes?.card?.url || backgroundImage?.url;
+  const pathname = usePathname();
 
   return (
     <section
-      className={`relative min-h-[45vh] md:min-h-[55vh] flex items-center pt-32 pb-20 md:pt-36 md:pb-24 overflow-hidden bg-neutral-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
+      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 
+          key={`hero-bg-${pathname}`}
           className="absolute inset-0 z-0"
           initial={{ scale: 1.05, opacity: 0 }}
           animate={{ scale: 1, opacity: 1 }}
@@ -75,6 +78,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
       )}
       <Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
         <motion.div 
+          key={`hero-content-${pathname}`}
           className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}
           variants={containerVariants}
           initial="hidden"
@@ -88,7 +92,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
             </motion.div>
           )}
           <motion.div variants={itemVariants}>
-            <Heading level={1} variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
+            <Heading level={1} size="section" variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
               {title}
             </Heading>
           </motion.div>
@@ -100,7 +104,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
             </motion.div>
           )}
           {ctaLabel && ctaHref && (
-            <motion.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex justify-center' : ''}`}>
+            <motion.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"

components/blocks/HeroVideo.tsx

@@ -2,8 +2,8 @@
 
 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';
 
 interface HeroVideoProps {
   data?: any;
@@ -22,57 +22,89 @@ 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 KABELTIEFBAU';
+  const title = props.title || data?.title || 'DIE EXPERTEN FÜR KABELNETZBAU';
   const subtitle = props.subtitle || props.description || data?.subtitle || 'Wir verbinden Infrastruktur mit Präzision. Von Horizontalbohrungen bis zu komplexen Leitungsnetzen.';
   const explicitNoVideo = props.videoUrl === 'none' || props.videoUrl === '';
   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 blurDataURL = (placeholders as Record<string, string>)[posterSrc] || undefined;
 
   const ctaLabel = props.ctaLabel || props.linkText || data?.ctaLabel || 'Unternehmen entdecken';
   const ctaHref = props.ctaHref || props.linkHref || data?.ctaHref || '#unternehmen';
   
-  let currentLocale = 'de';
-  try {
-    // We can't unconditionally call hooks if they might fail outside context, but HeroVideo is usually in context.
-    // However, to be safe and avoid adding new imports, we can use window.location or default to 'de' if not available.
-    if (typeof window !== 'undefined') {
-      currentLocale = window.location.pathname.startsWith('/en') ? 'en' : 'de';
-    }
-  } catch (e) {
-    // Fallback to default locale if window/location access fails
-  }
+  const currentLocale = pathname?.startsWith('/en') ? 'en' : 'de';
 
   const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || (currentLocale === 'de' ? 'Projekt anfragen' : 'Inquire Project');
-  const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/${currentLocale}/${currentLocale === 'de' ? 'contact' : 'contact'}`;
+  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-[100svh] flex items-center justify-center overflow-hidden bg-neutral-dark">
+    <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
+        placeholder={blurDataURL ? "blur" : "empty"}
+        blurDataURL={blurDataURL}
+      />
+
+      {/* Render video on top if available, but defer src to avoid blocking LCP */}
+      {videoUrl && (
         <video
-          key={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}
+          key={`${pathname}-${videoUrl}`}
+          className="absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90"
+          src={videoSrcLoaded ? videoUrl : undefined}
           autoPlay
           muted
           loop
           playsInline
-          preload="auto"
-        />
-      ) : (
-        <Image
-          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"
         />
       )}
       
@@ -87,21 +119,20 @@ 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
-          initial={{ opacity: 0, y: 40 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
+        <div
+          key={`hero-content-${pathname}`}
+          className="animate-in fade-in slide-in-from-bottom-10 duration-1000 ease-out fill-mode-both"
         >
           <h1 
-            className="font-heading font-bold text-4xl md:text-6xl lg:text-8xl text-white mb-6 uppercase tracking-tight drop-shadow-lg"
-            dangerouslySetInnerHTML={{ __html: title.replace('KABELTIEFBAU', '<span class="text-primary-light">KABELTIEFBAU</span>').replace(/\\n|\n/g, '<br />') }}
+            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"
+            dangerouslySetInnerHTML={{ __html: title.replace(/KABELNETZBAU|Kabelnetzbau/g, '<span class="text-primary-light">Kabelnetzbau</span>').replace(/KABELNETZBAU|Kabelnetzbau/g, '<span class="text-primary-light">Kabelnetzbau</span>').replace(/\\n|\n/g, '<br />') }}
           />
           
           <p className="text-lg md:text-xl lg:text-2xl text-white/90 max-w-3xl mx-auto mb-12 drop-shadow">
             {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"
@@ -119,7 +150,7 @@ export function HeroVideo(props: HeroVideoProps) {
               {secondaryCtaLabel}
             </Button>
           </div>
-        </motion.div>
+        </div>
       </div>
     </div>
   );

components/blocks/InteractiveGermanyMap.tsx

@@ -1,18 +1,16 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useRef, useCallback, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { MapPin, Factory, Zap, CheckCircle2, ArrowUpRight } from 'lucide-react';
+import { MapPin, CheckCircle2, ArrowUpRight } from 'lucide-react';
 import Image from 'next/image';
-import { useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 import { AnimatedGlossyBorder } from '@/components/ui/AnimatedGlossyBorder';
-import { Location, defaultLocations, minorLocations } from '@/lib/map-data';
+import { Location, projectLocations } from '@/lib/map-data';
 import { standorteLocations } from '@/lib/standorte-data';
 import { useLocale, useTranslations } from 'next-intl';
 
-const allLocations = [...standorteLocations, ...defaultLocations, ...minorLocations];
-
 interface Stat {
   value: string;
   suffix?: string;
@@ -27,18 +25,90 @@ interface InteractiveGermanyMapProps {
   stats?: Stat[];
   locations?: Location[];
   isHero?: boolean;
+  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" />
+      )}
+      <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>
+  );
+});
+MajorNode.displayName = 'MajorNode';
+
 export function InteractiveGermanyMap({
   badge,
   title,
   description,
   stats,
-  locations = allLocations,
-  isHero = false
+  locations = projectLocations,
+  isHero = false,
+  hideStandorte = false
 }: InteractiveGermanyMapProps) {
   const [activeLocation, setActiveLocation] = useState<Location | null>(null);
-  const router = useRouter();
+  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleMouseEnter = useCallback((loc: Location) => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+    setActiveLocation(loc);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    const timeout = setTimeout(() => {
+      setActiveLocation(null);
+    }, 200);
+    hoverTimeoutRef.current = timeout;
+  }, []);
+
+  const pathname = usePathname();
   const locale = useLocale();
   const t = useTranslations('InteractiveGermanyMap');
   const tStandard = useTranslations('StandardPage');
@@ -49,28 +119,42 @@ 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 and Bülstedt, we control and implement complex infrastructure projects nationwide.' : 'Von unseren strategischen Standorten in Guben und Bülstedt steuern und realisieren wir komplexe Infrastrukturprojekte im gesamten Bundesgebiet.');
+  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 hq = locations.find((l) => l.type === 'hq');
-  const branch = locations.find((l) => l.type === 'branch');
-  const projects = locations.filter((l) => l.type === 'project');
-  const minorNodes = locations.filter((l) => l.type === 'minor_node');
+  const finalLocations = useMemo(() => {
+    if (hideStandorte) return locations;
+    const base = [...locations];
+    standorteLocations.forEach(sl => {
+      if (!base.some(l => l.id === sl.id)) {
+        base.push(sl as Location);
+      }
+    });
+    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 className={isHero ? "relative w-full" : "relative w-full max-w-7xl mx-auto py-16 md:py-24 px-4 sm:px-6 mt-16 md:mt-20"}>
+    <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 */}
         {!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" />
@@ -78,11 +162,11 @@ export function InteractiveGermanyMap({
             </div>
             
             {isHero ? (
-              <h1 className="font-heading text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 text-balance">
+              <h1 className="font-heading text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 text-balance">
                 {finalTitle}
               </h1>
             ) : (
-              <h3 className="font-heading text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 text-balance">
+              <h3 className="font-heading text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 text-balance">
                 {finalTitle}
               </h3>
             )}
@@ -91,14 +175,13 @@ export function InteractiveGermanyMap({
               {finalDescription}
             </p>
 
-            {/* Industrial Stats Grid */}
             <div className="grid grid-cols-2 gap-4">
               {finalStats.map((stat, i) => {
                 const StatCard = () => (
                   <div className={`bg-white/5 border border-white/10 rounded-2xl p-6 backdrop-blur-md relative overflow-hidden group h-full ${stat.href ? 'cursor-pointer' : ''}`}>
                     <div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                     <div className="relative z-10 flex flex-col h-full justify-between">
-                      <div className="text-4xl font-extrabold text-white mb-1 flex items-baseline gap-1">
+                      <div className="text-3xl md:text-4xl font-extrabold text-white mb-1 flex items-baseline gap-1">
                         {stat.value}<span className="text-xl text-primary">{stat.suffix}</span>
                       </div>
                       <div className={`text-sm text-white/50 font-medium flex items-center ${stat.href ? 'group-hover:text-primary transition-colors' : ''}`}>
@@ -122,85 +205,32 @@ 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) */}
-              {locations.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={() => setActiveLocation(loc)}
-                  onMouseLeave={() => setActiveLocation(null)}
-                >
-                  <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>
+              {finalLocations.filter(l => l.type === 'minor_node').map((loc, idx) => (
+                <MinorNode
+                  key={`minor-${loc.id || idx}`}
+                  loc={loc}
+                  isActive={activeLocation === loc}
+                  onEnter={handleMouseEnter}
+                  onLeave={handleMouseLeave}
+                />
               ))}
 
-              {/* Major & Reference Location Markers (HQ, Branch, Project) */}
-              {locations.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={() => setActiveLocation(loc)}
-                    onMouseLeave={() => setActiveLocation(null)}
-                    onClick={() => {
-                      if (loc.href) {
-                        const href = loc.href.startsWith('/') ? `/${locale}${loc.href}` : loc.href;
-                        router.push(href);
-                      }
-                    }}
-                  >
-                    {/* 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
@@ -209,15 +239,16 @@ export function InteractiveGermanyMap({
                     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-none"
+                    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
@@ -274,11 +305,15 @@ export function InteractiveGermanyMap({
                           </ul>
                         )}
 
-                        {activeLocation.href && (
-                          <div className="inline-flex items-center text-xs font-bold text-primary">
+                        {activeLocation.href && (activeLocation.type === 'hq' || activeLocation.type === 'branch') && (
+                          <Link 
+                            href={activeLocation.href.startsWith('/') ? `/${locale}${activeLocation.href}` : activeLocation.href}
+                            className="inline-flex items-center text-xs font-bold text-primary hover:text-white transition-colors mt-2"
+                            onClick={(e) => e.stopPropagation()}
+                          >
                             {t('learnMore')}
                             <ArrowUpRight className="w-3.5 h-3.5 ml-1" />
-                          </div>
+                          </Link>
                         )}
                       </div>
                     </div>

components/blocks/JobListingBlock.tsx

@@ -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 },
   },
 };
 
@@ -71,13 +71,13 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
     <div className="py-12 md:py-24">
       <div className="container mx-auto">
         {showFairs && (
-          <div className="mb-24 relative">
+          <div className="mb-12 md:mb-24 relative">
             <motion.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-4xl text-neutral-dark mb-12 flex items-center gap-4"
+              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}
@@ -86,7 +86,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
               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) => {
@@ -180,9 +180,9 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
             <motion.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-4xl text-neutral-dark mb-8"
+              className="font-heading font-extrabold text-3xl md:text-4xl text-neutral-dark mb-6 md:mb-8"
             >
               {title}
             </motion.h2>
@@ -192,7 +192,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
                 variants={containerVariants}
                 initial="hidden"
                 whileInView="visible"
-                viewport={{ once: true, margin: "-100px" }}
+                viewport={{ once: true, margin: "-50px" }}
                 className="grid gap-6"
               >
                 {jobs.map((job: any) => (
@@ -221,7 +221,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
               <motion.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"
               >

components/blocks/ReferencesSlider.test.tsx

@@ -34,7 +34,7 @@ describe('ReferencesSlider TDD', () => {
       id: '1',
       title: 'Referenz Projekt Eins',
       slug: 'referenz-projekt-eins',
-      category: 'Kabeltiefbau',
+      category: 'Kabelnetzbau',
     },
     {
       id: '2',

components/blocks/ReferencesSlider.tsx

@@ -94,53 +94,55 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
 
 
   return (
-    <section id="referenzen" className="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>
+      <div className="container relative z-10 mb-12 flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+        <div className="text-left">
           <h2 className="text-primary-light font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
-          <h3 className="font-heading text-4xl md:text-5xl font-extrabold">{title}</h3>
+          <h3 className="font-heading text-3xl md:text-5xl font-extrabold">{title}</h3>
         </div>
-        <p className="text-white/60 max-w-md">
+        <div className="text-left max-w-3xl mx-auto md:mx-0 mb-8 md:mb-16">
           {description}
-        </p>
+        </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'}`}
+          className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 px-6 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 
+            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 }}
+                initial={{ opacity: 0, x: 20 }}
                 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"
+                viewport={{ once: true, margin: "-50px" }}
+                transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
+                className="flex-shrink-0 w-[320px] md:w-[480px] snap-start group pointer-events-auto"
               >
                 <Link
-                  href={`/${locale}/referenzen/${ref.slug}`}
-                  data-testid="reference-tile"
+                  href={`/${locale}/referenzen#${ref.slug}`}
                   onClick={(e) => {
                     if (dragDistanceRef.current > 5) {
                       e.preventDefault();
                     }
                   }}
-                  className="block relative aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl"
+                  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

components/blocks/ScaleOfImpact.tsx

@@ -23,7 +23,7 @@ export function ScaleOfImpact() {
   return (
     <div 
       ref={containerRef} 
-      className="relative w-full min-h-[70vh] bg-[#050B14] flex flex-col items-center justify-center overflow-hidden border-y border-neutral-800"
+      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 
@@ -38,7 +38,7 @@ export function ScaleOfImpact() {
       {/* 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-3xl 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.</>
           ) : (
@@ -46,7 +46,7 @@ export function ScaleOfImpact() {
           )}
         </h2>
         
-        <p className="text-white/60 text-lg md:text-xl max-w-2xl font-medium mb-16">
+        <p className="text-white/60 text-lg md:text-xl max-w-2xl font-medium mb-4 md:mb-16">
           {locale === 'en' 
             ? "We don't just talk about the energy transition. We build it. In the last 36 months alone, we have completed a route that stretches from our headquarters in Guben all the way to Munich."
             : "Wir sprechen nicht nur über die Energiewende. Wir bauen sie. Allein in den letzten 36 Monaten haben wir eine Strecke realisiert, die von unserem Hauptsitz in Guben bis nach München reicht."
@@ -54,7 +54,7 @@ export function ScaleOfImpact() {
         </p>
 
         {/* Abstract SVG Line Animation */}
-        <div className="w-full max-w-4xl h-32 relative">
+        <div className="w-full max-w-4xl h-12 md:h-32 relative">
           <svg 
             width="100%" 
             height="100%" 
@@ -82,21 +82,21 @@ export function ScaleOfImpact() {
         </div>
 
         {/* Static Data Grid (No jumping text) */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 w-full max-w-5xl mt-12">
+        <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-4xl 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-4xl md:text-5xl font-black text-white tracking-tighter mb-2">974<span className="text-primary 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-4xl md:text-5xl font-black text-white tracking-tighter mb-2">300<span className="text-primary 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-4xl md:text-5xl font-black text-white tracking-tighter mb-2">160<span className="text-primary 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>

components/blocks/ServiceDetailGrid.tsx

@@ -38,8 +38,8 @@ const containerVariants: Variants = {
 };
 
 const itemVariants: Variants = {
-  hidden: { opacity: 0, y: 40 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.7, 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 = {
@@ -105,17 +105,17 @@ export function ServiceDetailGrid({
   panels
 }: ServiceDetailGridProps) {
   return (
-    <section className="bg-neutral-50 py-24 border-b border-neutral-100 relative overflow-hidden">
+    <section className="bg-neutral-50 py-16 md:py-24 lg:py-32 border-b border-neutral-100 relative overflow-hidden">
       
       <div className="container relative z-10 px-4 max-w-7xl mx-auto">
-        <div className="max-w-3xl mx-auto text-center mb-20">
+        <div className="max-w-3xl mb-12 md:mb-20 text-left">
           {badge && <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-4">{badge}</h2>}
           {title && (
-            <h3 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-dark mb-6">
+            <h3 className="font-heading text-2xl md:text-5xl font-extrabold text-neutral-dark mb-6">
               {title}
             </h3>
           )}
-          <div className="w-20 h-2 bg-primary mx-auto mb-8"></div>
+          <div className="w-20 h-2 bg-primary mb-8"></div>
           
           <div className="space-y-6 text-text-secondary text-lg leading-relaxed">
             {descriptionParagraphs?.map((p, i) => {
@@ -137,11 +137,11 @@ export function ServiceDetailGrid({
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, margin: "-50px" }}
-            transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
+            transition={{ duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
             className="max-w-4xl mx-auto mb-20 grid md:grid-cols-2 gap-0 bg-white rounded-2xl overflow-hidden shadow-lg border border-neutral-200 text-left"
           >
             {problemStatement && (
-              <div className="p-8 md:p-12 border-b md:border-b-0 md:border-r border-neutral-100 bg-red-50/50">
+              <div className="p-6 md:p-12 border-b md:border-b-0 md:border-r border-neutral-100 bg-red-50/50">
                 <div className="flex items-center mb-6 text-red-600">
                   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-3">
                     <circle cx="12" cy="12" r="10"></circle>
@@ -154,7 +154,7 @@ export function ServiceDetailGrid({
               </div>
             )}
             {solutionStatement && (
-              <div className="p-8 md:p-12 bg-primary/5">
+              <div className="p-6 md:p-12 bg-primary/5">
                 <div className="flex items-center mb-6 text-primary">
                   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-3">
                     <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
@@ -183,7 +183,7 @@ export function ServiceDetailGrid({
               <motion.div
                 key={panel.id}
                 variants={itemVariants}
-                className={`group relative overflow-hidden bg-white border border-neutral-200 rounded-3xl p-8 md:p-12 transition-all duration-500 hover:border-primary/40 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:-translate-y-1 select-none ${isFullWidth ? 'md:col-span-2' : ''}`}
+                className={`group relative overflow-hidden bg-white border border-neutral-200 rounded-3xl p-6 md:p-12 transition-all duration-500 hover:border-primary/40 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:-translate-y-1 select-none ${isFullWidth ? 'md:col-span-2' : ''}`}
               >
                 {/* Premium Watermark Number */}
                 <div className="absolute -right-8 -bottom-12 text-[12rem] font-heading font-black text-neutral-50 z-0 pointer-events-none select-none transition-all duration-700 group-hover:scale-105 group-hover:-translate-y-4 group-hover:text-primary/[0.03]">
@@ -193,9 +193,9 @@ export function ServiceDetailGrid({
                 {/* On a white card, a very subtle primary/grey shine works best */}
                 <HoverShineOverlay shineColor="via-primary/5" />
 
-                <div className="relative z-10 flex flex-col md:flex-row justify-between items-start mb-12 gap-6">
+                <div className="relative z-10 flex flex-row justify-between items-start mb-12 gap-6">
                   <div className="pt-2 flex-1 min-w-0 pr-4">
-                    <h4 className="text-xl md:text-2xl font-extrabold text-neutral-dark uppercase tracking-wider text-balance break-words" lang="de">{panel.title}</h4>
+                    <h4 className="text-lg md:text-2xl font-extrabold text-neutral-dark uppercase tracking-wider text-balance break-words" lang="de">{panel.title}</h4>
                     <div className="h-1 w-12 bg-primary mt-6 transition-all duration-700 group-hover:w-24 rounded-full"></div>
                   </div>
                   

components/blocks/SubCompanyTiles.tsx

@@ -68,23 +68,25 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
   })) || defaultCompanies;
   
   return (
-    <section id="unternehmen" className="py-24 bg-neutral-dark border-b border-neutral-800 relative overflow-hidden">
+    <section id="unternehmen" className="pt-12 pb-16 md:py-24 lg:py-32 bg-neutral-dark border-b border-neutral-800 relative overflow-hidden">
       <div className="container relative z-10 px-4">
         
         {(badge || title) && (
-          <div className="text-center max-w-3xl mx-auto mb-16">
-            {badge && <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>}
-            {title && <h3 className="font-heading text-4xl md:text-5xl font-extrabold text-white">{title}</h3>}
+          <div className="text-center md:text-left max-w-3xl mx-auto md:mx-0 mb-16">
+            {badge && <h2 className="text-emerald-400 font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>}
+            {title && <h3 className="font-heading text-3xl md:text-5xl font-extrabold text-white">{title}</h3>}
           </div>
         )}
         
-        <motion.div 
-          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
-          variants={containerVariants}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, margin: "-50px" }}
-        >
+        <div className="relative -mx-4 md:mx-0">
+          <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" />
+          <motion.div 
+            className="flex overflow-x-auto md:overflow-visible snap-x snap-mandatory pb-6 md:pb-0 md:grid md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 px-4 md:px-0 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: "-50px" }}
+          >
           {companiesData.map((company: any, index: number) => {
             const isCurrent = company.title.toUpperCase() === 'E-TIB GMBH';
             const hasUrl = !!company.url;
@@ -172,7 +174,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
                     {/* LOGO RENDERING */}
                     {isEtib ? (
                       <div className="flex flex-col items-center">
-                        <div className="relative w-48 h-14 mb-2">
+                        <div className="relative w-32 md:w-40 lg:w-44 h-10 md:h-12 lg:h-14 mb-2 max-w-[85%]">
                           <Image
                             src="/assets/logo-white.png"
                             alt="E-TIB Logo"
@@ -181,17 +183,17 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
                           />
                         </div>
                         {isIng && (
-                          <div className="text-white/80 tracking-[0.2em] text-[10px] sm:text-xs font-semibold uppercase mt-1 text-center">
+                          <div className="text-white/80 tracking-[0.15em] sm:tracking-[0.2em] text-[9px] sm:text-[10px] lg:text-[11px] font-semibold uppercase mt-1 text-center">
                             Ingenieurgesellschaft
                           </div>
                         )}
                         {isVerwaltung && (
-                          <div className="text-white/80 tracking-[0.2em] text-[10px] sm:text-xs font-semibold uppercase mt-1 text-center">
+                          <div className="text-white/80 tracking-[0.15em] sm:tracking-[0.2em] text-[9px] sm:text-[10px] lg:text-[11px] font-semibold uppercase mt-1 text-center">
                             Verwaltung GmbH
                           </div>
                         )}
                         {isBohrtechnik && (
-                          <div className="text-white/80 tracking-[0.2em] text-[10px] sm:text-xs font-semibold uppercase mt-1 text-center">
+                          <div className="text-white/80 tracking-[0.15em] sm:tracking-[0.2em] text-[9px] sm:text-[10px] lg:text-[11px] font-semibold uppercase mt-1 text-center">
                             Bohrtechnik GmbH
                           </div>
                         )}
@@ -226,7 +228,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
                 </>
             );
 
-            const sharedClass = `group relative overflow-hidden aspect-[4/3] flex flex-col justify-center items-center shadow-xl transition-all duration-500 bg-neutral-dark block w-full h-full sm:rounded-xl select-none ${
+            const sharedClass = `group relative overflow-hidden aspect-[4/3] flex flex-col justify-center items-center shadow-xl transition-all duration-500 bg-neutral-dark block w-full h-full rounded-2xl select-none ${
               isCurrent 
                 ? 'border border-white/5 hover:shadow-2xl hover:-translate-y-1 hover:border-white/10 cursor-pointer' 
                 : 'border border-white/5 hover:shadow-2xl hover:-translate-y-1 hover:border-white/10 cursor-pointer'
@@ -236,7 +238,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
               <motion.div 
                 key={index}
                 variants={itemVariants}
-                className="h-full"
+                className="h-full flex-shrink-0 snap-center w-[85%] sm:w-[70%] md:w-full"
               >
                 {hasUrl ? (
                   isExternal ? (
@@ -256,7 +258,8 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
               </motion.div>
             );
           })}
-        </motion.div>
+          </motion.div>
+        </div>
       </div>
     </section>
   );

components/blocks/SupportCTA.tsx

@@ -43,8 +43,8 @@ export const SupportCTA: React.FC<SupportCTAProps> = (props) => {
       variants={containerVariants}
       initial="hidden"
       whileInView="visible"
-      viewport={{ once: true, margin: "-100px" }}
-      className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group"
+      viewport={{ once: true, margin: "-50px" }}
+      className="mt-12 md:mt-24 p-6 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 duration-700 group-hover:translate-x-1/3" />
       <div className="relative z-10 max-w-2xl">

components/blocks/TeamGrid.tsx

@@ -28,11 +28,11 @@ export function TeamGrid({ members }: TeamGridProps) {
   if (!members || members.length === 0) return null;
 
   return (
-    <section className="py-24 bg-white relative overflow-hidden">
+    <section className="py-16 md:py-24 lg:py-32 bg-white relative overflow-hidden">
       <div className="container relative z-10">
         <div className="mb-12">
           <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{t('badge')}</h2>
-          <h3 className="font-heading text-4xl font-extrabold text-neutral-dark mb-4">{t('title')}</h3>
+          <h3 className="font-heading text-3xl md:text-4xl font-extrabold text-neutral-dark mb-4">{t('title')}</h3>
           <p className="text-text-secondary max-w-2xl text-lg">
             {t('subtitle')}
           </p>
@@ -42,10 +42,10 @@ export function TeamGrid({ members }: TeamGridProps) {
           {members.map((member, i) => (
             <motion.div
               key={member.id}
-              initial={{ opacity: 0, y: 30 }}
+              initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, margin: "-50px" }}
-              transition={{ delay: i * 0.1, duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+              transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
               className="group flex flex-col bg-white rounded-[2rem] border border-neutral-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(238,114,3,0.1)] transition-all duration-500 hover:-translate-y-2 overflow-hidden"
             >
               {/* Card Banner */}

components/decorations/CorporateBackground.tsx

@@ -78,7 +78,7 @@ export function CorporateBackground() {
   const y5 = useTransform(scrollYProgress, [0, 1], [0, -500]);
 
   return (
-    <div className="absolute inset-0 z-[50] overflow-hidden pointer-events-none" aria-hidden="true">
+    <div className="absolute inset-0 z-[50] overflow-hidden pointer-events-none hidden md:block" aria-hidden="true">
       {/* 1. Top Right - Medium, rotating moderately */}
       <motion.div 
         style={{ 

components/decorations/EUFundingBadge.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+
+export function EUFundingBadge() {
+  return (
+    <motion.div 
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 1.5, ease: [0.16, 1, 0.3, 1] }}
+      className="absolute top-0 right-0 w-[260px] md:w-[380px] h-[260px] md:h-[380px] z-0 pointer-events-none select-none overflow-hidden"
+      style={{
+        // Perfekter weicher Fade, der sicherstellt, dass harte Kanten komplett unsichtbar werden
+        maskImage: 'radial-gradient(100% 100% at top right, black 10%, rgba(0,0,0,0.8) 30%, transparent 70%)',
+        WebkitMaskImage: 'radial-gradient(100% 100% at top right, black 10%, rgba(0,0,0,0.8) 30%, transparent 70%)',
+      }}
+    >
+      {/* Background Flag */}
+      <div className="absolute inset-0 w-full h-full opacity-95">
+        <Image
+          src="/assets/eu-flag.webp"
+          alt="European Union Background"
+          fill
+          className="object-cover object-top"
+          priority
+        />
+      </div>
+      
+      {/* Text overlaid on the flag */}
+      <div className="absolute top-0 right-0 pt-8 pr-8 md:pt-12 md:pr-12 flex flex-col items-end text-right z-10 drop-shadow-[0_2px_8px_rgba(0,0,0,0.9)]">
+        <span className="block text-[9px] md:text-[11px] font-bold text-white/90 tracking-wide leading-snug drop-shadow-md">
+          Kofinanziert von der
+        </span>
+        <span className="block text-[11px] md:text-[13px] font-extrabold text-white tracking-wider leading-snug uppercase drop-shadow-md">
+          Europäischen Union
+        </span>
+      </div>
+    </motion.div>
+  );
+}

components/emails/BrochureDeliveryEmail.tsx

@@ -1,145 +0,0 @@
-import {
-  Body,
-  Container,
-  Head,
-  Heading,
-  Hr,
-  Html,
-  Preview,
-  Section,
-  Text,
-  Button,
-} from '@react-email/components';
-import * as React from 'react';
-
-interface BrochureDeliveryEmailProps {
-  _email: string;
-  brochureUrl: string;
-  locale: 'en' | 'de';
-}
-
-export const BrochureDeliveryEmail = ({
-  _email,
-  brochureUrl,
-  locale = 'en',
-}: BrochureDeliveryEmailProps) => {
-  const t =
-    locale === 'de'
-      ? {
-          subject: 'Ihr E-TIB Kabelkatalog',
-          greeting: 'Vielen Dank für Ihr Interesse an E-TIB.',
-          body: 'Anbei erhalten Sie den Link zu unserem aktuellen Produktkatalog. Dieser enthält alle wichtigen technischen Spezifikationen und detaillierten Produktdaten.',
-          button: 'Katalog herunterladen',
-          footer: 'Diese E-Mail wurde von e-tib.com gesendet.',
-        }
-      : {
-          subject: 'Your E-TIB Cable Catalog',
-          greeting: 'Thank you for your interest in E-TIB.',
-          body: 'Below you will find the link to our current product catalog. It contains all key technical specifications and detailed product data.',
-          button: 'Download Catalog',
-          footer: 'This email was sent from e-tib.com.',
-        };
-
-  return (
-    <Html>
-      <Head />
-      <Preview>{t.subject}</Preview>
-      <Body style={main}>
-        <Container style={container}>
-          <Section style={headerSection}>
-            <Heading style={h1}>{t.subject}</Heading>
-          </Section>
-
-          <Section style={section}>
-            <Text style={text}>
-              <strong>{t.greeting}</strong>
-            </Text>
-            <Text style={text}>{t.body}</Text>
-
-            <Section style={buttonContainer}>
-              <Button style={button} href={brochureUrl}>
-                {t.button}
-              </Button>
-            </Section>
-
-            <Hr style={hr} />
-          </Section>
-          <Text style={footer}>{t.footer}</Text>
-        </Container>
-      </Body>
-    </Html>
-  );
-};
-
-export default BrochureDeliveryEmail;
-
-const main = {
-  backgroundColor: '#f6f9fc',
-  fontFamily:
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
-};
-
-const container = {
-  backgroundColor: '#ffffff',
-  margin: '0 auto',
-  padding: '0 0 48px',
-  marginBottom: '64px',
-  borderRadius: '8px',
-  overflow: 'hidden',
-  border: '1px solid #e6ebf1',
-};
-
-const headerSection = {
-  backgroundColor: '#111111',
-  padding: '32px 48px',
-  borderBottom: '4px solid #117c61',
-};
-
-const h1 = {
-  color: '#ffffff',
-  fontSize: '24px',
-  fontWeight: 'bold',
-  margin: '0',
-};
-
-const section = {
-  padding: '32px 48px 0',
-};
-
-const text = {
-  color: '#333',
-  fontSize: '16px',
-  lineHeight: '24px',
-  textAlign: 'left' as const,
-};
-
-const buttonContainer = {
-  textAlign: 'center' as const,
-  marginTop: '32px',
-  marginBottom: '32px',
-};
-
-const button = {
-  backgroundColor: '#117c61',
-  borderRadius: '4px',
-  color: '#ffffff',
-  fontSize: '16px',
-  fontWeight: 'bold',
-  textDecoration: 'none',
-  textAlign: 'center' as const,
-  display: 'inline-block',
-  padding: '16px 32px',
-};
-
-const hr = {
-  borderColor: '#e6ebf1',
-  margin: '20px 0',
-};
-
-const footer = {
-  color: '#8898aa',
-  fontSize: '12px',
-  lineHeight: '16px',
-  textAlign: 'center' as const,
-  marginTop: '20px',
-};

components/home/CTA.tsx

@@ -7,7 +7,7 @@ export default function CTA({ data }: { data?: any }) {
   const locale = useLocale();
 
   return (
-    <Section className="bg-primary text-white py-32 relative overflow-hidden">
+    <Section className="bg-primary text-white relative overflow-hidden">
       <div className="absolute top-0 right-0 w-1/3 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
       <div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-primary/10 rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
 

components/home/Experience.tsx

@@ -7,7 +7,7 @@ export default function Experience({ data }: { data?: any }) {
   const t = useTranslations('Home.experience');
 
   return (
-    <Section className="relative py-32 md:py-48 overflow-hidden text-white">
+    <Section className="relative overflow-hidden text-white">
       <div className="absolute inset-0 z-0">
         <Image
           src="/uploads/2024/12/1694273920124-copy-2.webp"

components/home/GallerySection.tsx

@@ -24,13 +24,13 @@ export default function GallerySection({ data }: { data?: any }) {
   const lightboxIndex = photoParam ? parseInt(photoParam, 10) : 0;
 
   return (
-    <Section className="bg-white text-white py-32">
+    <Section className="bg-white text-white">
       <Container>
         <Heading level={2} subtitle={data?.subtitle || t('subtitle')} align="center">
           {data?.title || t('title')}
         </Heading>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8">
           {images.map((src, idx) => (
             <button
               key={idx}

components/home/Hero.tsx

@@ -8,6 +8,7 @@ import { useAnalytics } from '../analytics/useAnalytics';
 import { AnalyticsEvents } from '../analytics/analytics-events';
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { ChevronRight } from 'lucide-react';
+import { usePathname } from 'next/navigation';
 import { AISearchResults } from '../search/AISearchResults';
 const HeroIllustration = dynamic(() => import('./HeroIllustration'), { ssr: false });
 const AIOrb = dynamic(() => import('../search/AIOrb'), { ssr: false });
@@ -15,6 +16,7 @@ const AIOrb = dynamic(() => import('../search/AIOrb'), { ssr: false });
 export default function Hero({ data }: { data?: any }) {
   const t = useTranslations('Home.hero');
   const locale = useLocale();
+  const pathname = usePathname();
   const { trackEvent } = useAnalytics();
 
   const [searchQuery, setSearchQuery] = useState('');
@@ -85,7 +87,7 @@ export default function Hero({ data }: { data?: any }) {
 
   return (
     <>
-      <Section className="relative min-h-[85vh] md:h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
+      <Section key={`home-hero-${pathname}`} className="relative min-h-[75vh] md:min-h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
         <Container className="relative z-10 text-center md:text-left text-white w-full order-2 md:order-none">
           <div className="max-w-5xl mx-auto md:mx-0">
             <div>
@@ -197,7 +199,7 @@ export default function Hero({ data }: { data?: any }) {
           </div>
         </Container>
 
-        <div className="relative md:absolute inset-0 z-0 w-full h-[40vh] md:h-full order-1 md:order-none mb-[-80px] md:mb-0 mt-[80px] md:mt-0 overflow-visible pointer-events-none animate-in fade-in zoom-in-95 duration-1000 ease-out fill-mode-both">
+        <div className="relative md:absolute inset-0 z-0 w-full h-[35vh] md:h-full order-1 md:order-none mb-[-80px] md:mb-0 mt-[80px] md:mt-0 overflow-visible pointer-events-none animate-in fade-in zoom-in-95 duration-1000 ease-out fill-mode-both">
           <HeroIllustration />
         </div>
 

components/home/MeetTheTeam.tsx

@@ -9,7 +9,7 @@ export default function MeetTheTeam({ data }: { data?: any }) {
   const locale = useLocale();
 
   return (
-    <Section className="relative py-32 md:py-48 overflow-hidden">
+    <Section className="relative overflow-hidden">
       <div className="absolute inset-0 z-0">
         <Image
           src="/uploads/2024/12/DSC08036-Large.webp"
@@ -31,7 +31,7 @@ export default function MeetTheTeam({ data }: { data?: any }) {
 
           <div className="relative mb-12">
             <div className="absolute -left-8 top-0 bottom-0 w-1 bg-accent rounded-full" />
-            <p className="text-xl md:text-2xl leading-relaxed font-medium italic text-white/90 pl-8">
+            <p className="text-lg md:text-2xl leading-relaxed font-medium italic text-white/90 pl-8">
               "{data?.description || t('description')}"
             </p>
           </div>

components/home/VideoSection.tsx

@@ -27,7 +27,7 @@ export default function VideoSection({ data }: { data?: any }) {
   }, []);
 
   return (
-    <section ref={sectionRef} className="relative h-[70vh] overflow-hidden bg-primary">
+    <section ref={sectionRef} className="relative h-[50vh] md:h-[70vh] overflow-hidden bg-primary">
       {isVisible && (
         <video className="w-full h-full object-cover opacity-60" autoPlay muted loop playsInline>
           <source

components/layout/Footer.tsx

@@ -4,6 +4,7 @@ import { useLocale } from 'next-intl';
 import { ShieldCheck, Leaf, Lock, Accessibility, Zap, Mail, Phone } from 'lucide-react';
 import { LanguageSwitcher } from './LanguageSwitcher';
 import { Tooltip } from '@/components/ui/Tooltip';
+import { EUFundingBadge } from '@/components/decorations/EUFundingBadge';
 interface CompanyInfo {
   contactEmail: string;
   contactPhone: string;
@@ -18,7 +19,7 @@ export function Footer({ companyInfo }: FooterProps) {
   const locale = useLocale();
 
   return (
-    <footer className="bg-[#050B14] text-neutral-light py-10 md:py-16 relative overflow-hidden border-t border-white/5">
+    <footer className="bg-[#050B14] text-neutral-light pt-24 pb-28 md:pt-32 md:pb-16 relative overflow-hidden border-t border-white/5">
       {/* Subtle background tech grid */}
       <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
 
@@ -26,9 +27,11 @@ export function Footer({ companyInfo }: FooterProps) {
       <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" />
       <div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/3 h-[200px] bg-primary/20 blur-[100px] rounded-full pointer-events-none opacity-50" />
 
-      <div className="container relative z-10 grid grid-cols-1 md:grid-cols-4 lg:grid-cols-12 gap-4 md:gap-6 lg:gap-8 mb-8 md:mb-12">
+      <EUFundingBadge />
+
+      <div className="container relative z-10 grid grid-cols-1 md:grid-cols-4 lg:grid-cols-12 gap-4 md:gap-6 lg:gap-8 mb-4 md:mb-12">
         {/* Brand Column Bento */}
-        <div className="col-span-1 md:col-span-4 lg:col-span-5 flex flex-col justify-between bg-white/[0.02] border border-white/5 rounded-3xl p-6 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden">
+        <div className="col-span-1 md:col-span-4 lg:col-span-5 flex flex-col justify-between bg-white/[0.02] border border-white/5 rounded-3xl p-5 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden">
           <div className="absolute inset-0 bg-gradient-to-br from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
 
           <div className="space-y-4 md:space-y-6 relative z-10">
@@ -42,8 +45,8 @@ export function Footer({ companyInfo }: FooterProps) {
             </TransitionLink>
             <p className="text-neutral-400 text-base leading-relaxed max-w-sm">
               {locale === 'de'
-                ? 'Die Experten für Kabeltiefbau, Horizontalspülbohrungen und umfassende Infrastrukturprojekte. Qualität und Zuverlässigkeit aus Guben.'
-                : 'Experts in cable construction, horizontal directional drilling, and comprehensive infrastructure projects. Quality and reliability from Guben.'}
+                ? 'Die Experten für Kabelnetzbau, Horizontalspülbohrungen und umfassende Infrastrukturprojekte. Qualität und Zuverlässigkeit aus Guben.'
+                : 'Experts in cable network construction, horizontal directional drilling, and comprehensive infrastructure projects. Quality and reliability from Guben.'}
             </p>
           </div>
 
@@ -95,58 +98,120 @@ export function Footer({ companyInfo }: FooterProps) {
         {/* Navigation Bento Grid */}
         <div className="col-span-1 md:col-span-4 lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6 lg:gap-8">
 
-          {/* Company Column */}
-          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-6 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
+          {/* Links Column */}
+          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-5 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
             <div className="absolute inset-0 bg-gradient-to-bl from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
-            <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-6 md:mb-8 text-white">
-              {locale === 'de' ? 'Unternehmen' : 'Company'}
-              <span className="block w-8 h-1 bg-primary mt-3 rounded-full" />
-            </h4>
-            <ul className="space-y-2 md:space-y-4 relative z-10 flex-grow">
-              {[
-                { label: locale === 'de' ? 'Kompetenzen' : 'Competencies', href: `/${locale}/${locale === 'de' ? 'kompetenzen' : 'competencies'}` },
-                { label: locale === 'de' ? 'Über uns' : 'About us', href: `/${locale}/${locale === 'de' ? 'ueber-uns' : 'about-us'}` },
-                { label: locale === 'de' ? 'Unser Team' : 'Our Team', href: `/${locale}/team` },
-                { label: locale === 'de' ? 'Zertifikate' : 'Certificates', href: `/${locale}/zertifikate` },
-                { label: locale === 'de' ? 'Karriere' : 'Career', href: `/${locale}/${locale === 'de' ? 'karriere' : 'career'}` },
-                { label: locale === 'de' ? 'Messen & Events' : 'Fairs & Events', href: `/${locale}/${locale === 'de' ? 'messen' : 'trade-fairs'}` },
-                { label: locale === 'de' ? 'Kontakt' : 'Contact', href: `/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}` },
-              ].map((link) => (
-                <li key={link.href}>
-                  <TransitionLink href={link.href} className="group/link flex items-center text-neutral-400 hover:text-white transition-colors py-1 cursor-pointer">
-                    <span className="w-0 h-px bg-primary mr-0 group-hover/link:w-4 group-hover/link:mr-3 transition-all duration-300" />
-                    <span className="font-medium">{link.label}</span>
-                  </TransitionLink>
-                </li>
-              ))}
-            </ul>
+            
+            {/* Desktop View */}
+            <div className="hidden md:block relative z-10 flex-grow">
+              <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-6 text-white">
+                {locale === 'de' ? 'Navigation' : 'Navigation'}
+                <span className="block w-8 h-1 bg-primary mt-3 rounded-full" />
+              </h4>
+              <ul className="grid grid-cols-2 gap-x-8 gap-y-3 mb-8">
+                {[
+                  { label: locale === 'de' ? 'Unternehmen' : 'Company', href: `/${locale}/${locale === 'de' ? 'ueber-uns' : 'about-us'}` },
+                  { label: locale === 'de' ? 'Standorte' : 'Locations', href: `/${locale}/standorte` },
+                  { label: locale === 'de' ? 'Unser Team' : 'Our Team', href: `/${locale}/team` },
+                  { label: locale === 'de' ? 'Karriere' : 'Career', href: `/${locale}/${locale === 'de' ? 'karriere' : 'career'}` },
+                  { label: locale === 'de' ? 'Zertifikate' : 'Certificates', href: `/${locale}/zertifikate` },
+                  { label: locale === 'de' ? 'Kompetenzen' : 'Competencies', href: `/${locale}/${locale === 'de' ? 'kompetenzen' : 'competencies'}` },
+                  { label: locale === 'de' ? 'Referenzen' : 'References', href: `/${locale}/referenzen` },
+                  { label: locale === 'de' ? 'Messen & Events' : 'Fairs & Events', href: `/${locale}/${locale === 'de' ? 'messen' : 'trade-fairs'}` },
+                  { label: locale === 'de' ? 'Kontakt' : 'Contact', href: `/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}` },
+                ].map((link) => (
+                  <li key={link.href}>
+                    <TransitionLink href={link.href} className="group/link flex items-center text-neutral-400 hover:text-white transition-colors py-1 cursor-pointer">
+                      <span className="w-0 h-px bg-primary mr-0 group-hover/link:w-4 group-hover/link:mr-3 transition-all duration-300" />
+                      <span className="font-medium">{link.label}</span>
+                    </TransitionLink>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Mobile View (Accordions) */}
+            <div className="md:hidden relative z-10 flex-grow space-y-4">
+              <details className="group/acc">
+                <summary className="font-heading font-bold uppercase tracking-widest text-sm text-white list-none cursor-pointer flex justify-between items-center py-2 outline-none select-none">
+                  {locale === 'de' ? 'Navigation' : 'Navigation'}
+                  <svg className="w-4 h-4 text-white/50 transition-transform group-open/acc:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 9l-7 7-7-7"/></svg>
+                </summary>
+                <div className="pt-2 pb-4">
+                  <ul className="space-y-3">
+                    {[
+                      { label: locale === 'de' ? 'Unternehmen' : 'Company', href: `/${locale}/${locale === 'de' ? 'ueber-uns' : 'about-us'}` },
+                      { label: locale === 'de' ? 'Standorte' : 'Locations', href: `/${locale}/standorte` },
+                      { label: locale === 'de' ? 'Unser Team' : 'Our Team', href: `/${locale}/team` },
+                      { label: locale === 'de' ? 'Karriere' : 'Career', href: `/${locale}/${locale === 'de' ? 'karriere' : 'career'}` },
+                      { label: locale === 'de' ? 'Zertifikate' : 'Certificates', href: `/${locale}/zertifikate` },
+                      { label: locale === 'de' ? 'Kompetenzen' : 'Competencies', href: `/${locale}/${locale === 'de' ? 'kompetenzen' : 'competencies'}` },
+                      { label: locale === 'de' ? 'Referenzen' : 'References', href: `/${locale}/referenzen` },
+                      { label: locale === 'de' ? 'Messen & Events' : 'Fairs & Events', href: `/${locale}/${locale === 'de' ? 'messen' : 'trade-fairs'}` },
+                      { label: locale === 'de' ? 'Kontakt' : 'Contact', href: `/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}` },
+                    ].map((link) => (
+                      <li key={link.href}>
+                        <TransitionLink href={link.href} className="flex items-center text-neutral-400 hover:text-white transition-colors py-1">
+                          <span className="font-medium">{link.label}</span>
+                        </TransitionLink>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </details>
+            </div>
           </div>
 
           {/* Legal Column */}
-          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-6 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
+          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-5 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
             <div className="absolute inset-0 bg-gradient-to-tr from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
-            <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-6 md:mb-8 text-white">
-              {locale === 'de' ? 'Rechtliches' : 'Legal'}
-              <span className="block w-8 h-1 bg-primary mt-3 rounded-full opacity-50" />
-            </h4>
-            <ul className="space-y-2 md:space-y-4 relative z-10 flex-grow">
-              {[
-                { label: locale === 'de' ? 'Impressum' : 'Imprint', href: `/${locale}/${locale === 'de' ? 'impressum' : 'imprint'}` },
-                { label: locale === 'de' ? 'Datenschutz' : 'Privacy Policy', href: `/${locale}/${locale === 'de' ? 'datenschutz' : 'privacy-policy'}` },
-                { label: locale === 'de' ? 'AGB' : 'Terms', href: `/${locale}/${locale === 'de' ? 'agb' : 'terms'}` },
-              ].map((link) => (
-                <li key={link.href}>
-                  <TransitionLink href={link.href} className="group/link flex items-center text-neutral-400 hover:text-white transition-colors py-1 cursor-pointer">
-                    <span className="w-0 h-px bg-primary mr-0 group-hover/link:w-4 group-hover/link:mr-3 transition-all duration-300" />
-                    <span className="font-medium">{link.label}</span>
-                  </TransitionLink>
-                </li>
-              ))}
-            </ul>
+            
+            {/* Desktop View */}
+            <div className="hidden md:block relative z-10 flex-grow">
+              <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-6 text-white">
+                {locale === 'de' ? 'Rechtliches' : 'Legal'}
+                <span className="block w-8 h-1 bg-primary mt-3 rounded-full opacity-50" />
+              </h4>
+              <ul className="space-y-2">
+                {[
+                  { label: locale === 'de' ? 'Impressum' : 'Imprint', href: `/${locale}/${locale === 'de' ? 'impressum' : 'imprint'}` },
+                  { label: locale === 'de' ? 'Datenschutz' : 'Privacy Policy', href: `/${locale}/${locale === 'de' ? 'datenschutz' : 'privacy-policy'}` },
+                  { label: locale === 'de' ? 'AGB' : 'Terms', href: `/${locale}/${locale === 'de' ? 'agb' : 'terms'}` },
+                ].map((link) => (
+                  <li key={link.href}>
+                    <TransitionLink href={link.href} className="group/link flex items-center text-neutral-400 hover:text-white transition-colors py-1 cursor-pointer">
+                      <span className="w-0 h-px bg-primary mr-0 group-hover/link:w-4 group-hover/link:mr-3 transition-all duration-300" />
+                      <span className="font-medium">{link.label}</span>
+                    </TransitionLink>
+                  </li>
+                ))}
+              </ul>
+            </div>
 
-            {/* Built Info */}
-
-            {/* Legal Info removed from here */}
+            {/* Mobile View */}
+            <div className="md:hidden relative z-10 flex-grow">
+              <details className="group/acc">
+                <summary className="font-heading font-bold uppercase tracking-widest text-sm text-white list-none cursor-pointer flex justify-between items-center py-2 outline-none select-none">
+                  {locale === 'de' ? 'Rechtliches' : 'Legal'}
+                  <svg className="w-4 h-4 text-white/50 transition-transform group-open/acc:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 9l-7 7-7-7"/></svg>
+                </summary>
+                <div className="pt-2 pb-4">
+                  <ul className="space-y-3">
+                    {[
+                      { label: locale === 'de' ? 'Impressum' : 'Imprint', href: `/${locale}/${locale === 'de' ? 'impressum' : 'imprint'}` },
+                      { label: locale === 'de' ? 'Datenschutz' : 'Privacy Policy', href: `/${locale}/${locale === 'de' ? 'datenschutz' : 'privacy-policy'}` },
+                      { label: locale === 'de' ? 'AGB' : 'Terms', href: `/${locale}/${locale === 'de' ? 'agb' : 'terms'}` },
+                    ].map((link) => (
+                      <li key={link.href}>
+                        <TransitionLink href={link.href} className="flex items-center text-neutral-400 hover:text-white transition-colors py-1">
+                          <span className="font-medium">{link.label}</span>
+                        </TransitionLink>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </details>
+            </div>
           </div>
 
         </div>

components/layout/Header.test.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
+import { Header, NavLink } from './Header';
+import { usePathname } from 'next/navigation';
+
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+  usePathname: vi.fn(),
+}));
+
+// Mock TransitionLink to render standard anchor tag and forward all props
+vi.mock('@/components/ui/TransitionLink', () => ({
+  TransitionLink: ({ children, href, onClick, ...props }: any) => (
+    <a href={href} onClick={onClick} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+// Mock next/image
+vi.mock('next/image', () => ({
+  default: ({ src, alt, ...props }: any) => <img src={src} alt={alt} {...props} />,
+}));
+
+// Mock LanguageSwitcher
+vi.mock('./LanguageSwitcher', () => ({
+  LanguageSwitcher: () => <div data-testid="language-switcher" />,
+}));
+
+describe('Header Dropdown Navigation TDD', () => {
+  const mockNavLinks: NavLink[] = [
+    {
+      label: 'Home',
+      url: '/',
+    },
+    {
+      label: 'Leistungen',
+      url: '/leistungen',
+      children: [
+        { label: 'Kabelbau', url: '/leistungen/kabelbau' },
+        { label: 'Bohrtechnik', url: '/leistungen/bohrtechnik' },
+      ],
+    },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('closes the dropdown menu immediately after a page navigation occurs', async () => {
+    // 1. Set initial pathname
+    let currentPath = '/de';
+    vi.mocked(usePathname).mockImplementation(() => currentPath);
+
+    // 2. Render Header
+    const { rerender } = render(<Header navLinks={mockNavLinks} />);
+
+    // 3. Hover over "Leistungen" menu item to open dropdown
+    const leistungenNavItem = screen.getByText('Leistungen');
+    const navItemContainer = leistungenNavItem.closest('.group');
+    expect(navItemContainer).toBeTruthy();
+
+    act(() => {
+      fireEvent.mouseEnter(navItemContainer!);
+    });
+
+    // 4. Assert dropdown is open and children are rendered
+    expect(screen.getByText('Kabelbau')).toBeTruthy();
+    expect(screen.getByText('Bohrtechnik')).toBeTruthy();
+
+    // 5. Simulate page navigation by changing the path
+    currentPath = '/de/leistungen/kabelbau';
+    
+    act(() => {
+      // Trigger pathname hook change and force rerender
+      rerender(<Header navLinks={mockNavLinks} />);
+    });
+
+    // 6. Assert dropdown is closed (children are not in the document)
+    await waitFor(() => {
+      expect(screen.queryByText('Kabelbau')).toBeNull();
+      expect(screen.queryByText('Bohrtechnik')).toBeNull();
+    });
+  });
+});

components/layout/Header.tsx

@@ -11,6 +11,7 @@ export interface NavLink {
   label: string;
   url: string;
   children?: NavLink[];
+  isGroupLabel?: boolean;
 }
 
 interface HeaderProps {
@@ -21,6 +22,7 @@ export function Header({ navLinks }: HeaderProps) {
   const [isScrolled, setIsScrolled] = React.useState(false);
   const [forceSolid, setForceSolid] = React.useState(false);
   const [headerVariant, setHeaderVariant] = React.useState<'capsule' | 'standard'>('capsule');
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
   const pathname = usePathname() || '/';
 
   // Scroll bound shine effect (continuous looping as user scrolls)
@@ -54,6 +56,7 @@ export function Header({ navLinks }: HeaderProps) {
     
     // Re-check when pathname changes
     checkHeaderState();
+    setIsMobileMenuOpen(false);
     
     return () => {
       window.removeEventListener('scroll', handleScroll);
@@ -71,7 +74,7 @@ export function Header({ navLinks }: HeaderProps) {
         className={`fixed top-0 left-0 right-0 z-50 flex justify-center transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] ${
           isStandard 
             ? 'bg-[#050B14]/95 backdrop-blur-xl border-b border-white/10' 
-            : (isSolidMode ? 'pt-4 px-4' : 'pt-0 px-0')
+            : (isSolidMode ? 'pt-4 px-4 sm:px-6' : 'pt-0 px-0')
         }`}
       >
         <div
@@ -79,7 +82,7 @@ export function Header({ navLinks }: HeaderProps) {
             isStandard
               ? 'py-4 px-6 md:px-8'
               : isSolidMode
-                ? 'rounded-full bg-white/50 backdrop-blur-xl shadow-[0_8px_32px_rgba(0,0,0,0.08)] border border-white/40 py-2.5 px-6 md:px-8'
+                ? 'rounded-full bg-white/50 backdrop-blur-xl shadow-[0_8px_32px_rgba(0,0,0,0.08)] border border-white/40 py-2.5 px-8 md:px-10'
                 : 'rounded-none bg-transparent py-6 px-4 md:px-8 border border-transparent'
           }`}
         >
@@ -98,6 +101,7 @@ export function Header({ navLinks }: HeaderProps) {
               fill
               className="object-contain object-left group-hover:scale-105 transition-transform duration-500 origin-left"
               priority
+              fetchPriority="high"
               sizes="192px"
             />
             {/* Masked sweep overlay on hover */}
@@ -135,8 +139,54 @@ export function Header({ navLinks }: HeaderProps) {
             <div className="flex items-center gap-2 md:gap-4 lg:gap-6">
               <div className={`hidden md:block h-5 w-px transition-colors duration-300 ${isSolidMode ? 'bg-neutral-200' : 'bg-white/20'}`} />
               
-              {/* Language Switcher visible on all devices */}
-              <div className="z-50 relative flex items-center">
+              {/* Quick Actions (Mobile Only) */}
+              <div className="md:hidden flex items-center gap-2">
+                <a 
+                  href="tel:+492572946760"
+                  className={`relative flex items-center justify-center w-9 h-9 rounded-full transition-all duration-300 ${
+                    isSolidMode 
+                      ? 'bg-primary text-white shadow-md shadow-primary/20 hover:-translate-y-0.5' 
+                      : 'bg-white text-primary shadow-md hover:-translate-y-0.5'
+                  }`}
+                  aria-label="Anrufen"
+                >
+                  <svg className="w-[16px] h-[16px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                  </svg>
+                </a>
+                <a 
+                  href="mailto:info@e-tib.com"
+                  className={`relative flex items-center justify-center w-9 h-9 rounded-full transition-all duration-300 ${
+                    isSolidMode 
+                      ? 'bg-neutral-100 text-neutral-600 hover:text-primary hover:bg-neutral-200' 
+                      : 'bg-white/10 text-white backdrop-blur-md border border-white/20 hover:bg-white/20'
+                  }`}
+                  aria-label="E-Mail"
+                >
+                  <svg className="w-[16px] h-[16px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                  </svg>
+                </a>
+                <a 
+                  href="https://maps.google.com/?q=E-TIB+GmbH,+Greven"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={`relative flex items-center justify-center w-9 h-9 rounded-full transition-all duration-300 ${
+                    isSolidMode 
+                      ? 'bg-neutral-100 text-neutral-600 hover:text-primary hover:bg-neutral-200' 
+                      : 'bg-white/10 text-white backdrop-blur-md border border-white/20 hover:bg-white/20'
+                  }`}
+                  aria-label="Route"
+                >
+                  <svg className="w-[16px] h-[16px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                </a>
+              </div>
+
+              {/* Language Switcher visible on desktop only */}
+              <div className="z-50 relative hidden md:flex items-center">
                 <LanguageSwitcher isSolidMode={isSolidMode} />
               </div>
               
@@ -153,6 +203,7 @@ export function Header({ navLinks }: HeaderProps) {
                 {/* Sleek shine sweep effect */}
                 <span className="absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-[-20deg] group-hover/cta:left-[100%] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none" />
               </TransitionLink>
+
             </div>
           </div>
         </div>
@@ -164,6 +215,20 @@ export function Header({ navLinks }: HeaderProps) {
 function NavItem({ link, currentLocale, pathname, isSolidMode }: { link: NavLink, currentLocale: string, pathname: string, isSolidMode: boolean }) {
   const [isHovered, setIsHovered] = React.useState(false);
 
+  // Close dropdown on navigation
+  React.useEffect(() => {
+    setIsHovered(false);
+  }, [pathname]);
+
+  // Close dropdown on scroll
+  React.useEffect(() => {
+    const handleScroll = () => {
+      if (isHovered) setIsHovered(false);
+    };
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [isHovered]);
+
   const mappedUrl = link.url.startsWith('/') && !link.url.match(/^\/(en|de)/) 
     ? `/${currentLocale}${link.url}` 
     : link.url;
@@ -218,15 +283,25 @@ function NavItem({ link, currentLocale, pathname, isSolidMode }: { link: NavLink
               {/* Top glowing accent line */}
               <div className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary to-transparent opacity-70" />
               
-              {link.children.map((child) => {
+              {link.children.map((child, idx) => {
                 const childUrl = child.url.startsWith('/') && !child.url.match(/^\/(en|de)/) 
                   ? `/${currentLocale}${child.url}` 
                   : child.url;
                 const isChildActive = pathname === childUrl;
+                
+                if (child.isGroupLabel) {
+                  return (
+                    <div key={`group-${idx}`} className={`mt-2 mb-1 px-4 text-[11px] font-bold uppercase tracking-wider ${isSolidMode ? 'text-neutral-400' : 'text-neutral-500'}`}>
+                      {child.label}
+                    </div>
+                  );
+                }
+
                 return (
                   <TransitionLink
                     key={child.url}
                     href={childUrl}
+                    onClick={() => setIsHovered(false)}
                     className={`group/dropitem relative block px-4 py-3.5 rounded-2xl text-sm font-medium transition-all duration-300 overflow-hidden ${
                       isSolidMode
                         ? isChildActive ? 'bg-primary/10 text-primary' : 'text-neutral-600 hover:text-primary hover:bg-neutral-50/80'

components/layout/MobileBottomNav.tsx

@@ -3,12 +3,13 @@
 import * as React from 'react';
 import { usePathname } from 'next/navigation';
 import { TransitionLink } from '@/components/ui/TransitionLink';
-import { Home, Briefcase, Users, Mail } from 'lucide-react';
-import { motion } from 'framer-motion';
+import { Home, Layers, Star, Mail, Menu } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
 
 export interface NavLink {
   label: string;
   url: string;
+  children?: NavLink[];
 }
 
 interface MobileBottomNavProps {
@@ -18,84 +19,213 @@ interface MobileBottomNavProps {
 
 export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProps) {
   const pathname = usePathname() || '/';
+  const [isFlyoutOpen, setIsFlyoutOpen] = React.useState(false);
+
+  // Scroll lock when flyout is open
+  React.useEffect(() => {
+    if (isFlyoutOpen) {
+      document.body.style.overflow = 'hidden';
+      document.documentElement.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+      document.documentElement.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+      document.documentElement.style.overflow = '';
+    };
+  }, [isFlyoutOpen]);
 
-  // Construct our bottom nav items based on the passed links
   const items = React.useMemo(() => {
     const homeUrl = `/${currentLocale}`;
-    
-    // Find the specific links from the provided navLinks (which might be translated)
-    // We do a simple match based on index or keywords if needed, but since we know the order:
-    // 0: Kompetenzen, 1: Über uns, 2: Karriere, 3: Messen
     const competenciesUrl = navLinks[0]?.url || `/${currentLocale}/kompetenzen`;
-    const aboutUrl = navLinks[1]?.url || `/${currentLocale}/ueber-uns`;
+    const referencesUrl = navLinks[2]?.url || `/${currentLocale}/referenzen`;
     const contactUrl = `/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`;
 
     return [
       {
+        id: 'home',
         label: currentLocale === 'de' ? 'Start' : 'Home',
         url: homeUrl,
-        icon: <Home className="w-6 h-6 mb-1" strokeWidth={2} />,
+        icon: <Home className="w-[22px] h-[22px] md:w-6 md:h-6" strokeWidth={2.2} />,
         exactMatch: true
       },
       {
+        id: 'kompetenzen',
         label: navLinks[0]?.label || (currentLocale === 'de' ? 'Kompetenzen' : 'Competencies'),
         url: competenciesUrl,
-        icon: <Briefcase className="w-6 h-6 mb-1" strokeWidth={2} />
+        icon: <Layers className="w-[22px] h-[22px] md:w-6 md:h-6" strokeWidth={2.2} />
       },
       {
-        label: navLinks[1]?.label || (currentLocale === 'de' ? 'Über uns' : 'About Us'),
-        url: aboutUrl,
-        icon: <Users className="w-6 h-6 mb-1" strokeWidth={2} />
+        id: 'referenzen',
+        label: navLinks[2]?.label || (currentLocale === 'de' ? 'Referenzen' : 'References'),
+        url: referencesUrl,
+        icon: <Star className="w-[22px] h-[22px] md:w-6 md:h-6" strokeWidth={2.2} />
       },
       {
+        id: 'kontakt',
         label: currentLocale === 'de' ? 'Kontakt' : 'Contact',
         url: contactUrl,
-        icon: <Mail className="w-6 h-6 mb-1" strokeWidth={2} />
+        icon: <Mail className="w-[22px] h-[22px] md:w-6 md:h-6" strokeWidth={2.2} />
+      },
+      {
+        id: 'menu',
+        label: currentLocale === 'de' ? 'Mehr' : 'Menu',
+        url: '#',
+        icon: <Menu className="w-[24px] h-[24px] md:w-6 md:h-6" strokeWidth={2.5} />,
+        isFlyoutTrigger: true
       }
     ];
   }, [currentLocale, navLinks]);
 
-  return (
-    <div className="md:hidden fixed bottom-0 left-0 right-0 z-50 px-2 pb-6 pt-2 bg-gradient-to-t from-white via-white to-white/90 backdrop-blur-xl border-t border-neutral-200/50 shadow-[0_-8px_32px_rgba(0,0,0,0.05)] safe-area-bottom">
-      <nav className="flex justify-around items-center max-w-md mx-auto">
-        {items.map((item) => {
-          // Determine if active
-          const mappedUrl = item.url.startsWith('/') && !item.url.match(/^\/(en|de)/) 
-            ? `/${currentLocale}${item.url}` 
-            : item.url;
-            
-          const isActive = item.exactMatch 
-            ? pathname === mappedUrl 
-            : (pathname === mappedUrl || (mappedUrl !== `/${currentLocale}` && pathname?.startsWith(`${mappedUrl}/`)));
+  const flyoutLinks = React.useMemo(() => {
+    const aboutNode = navLinks[1];
+    const karriereNode = navLinks[3];
+    const messenNode = navLinks[4];
+    
+    let links: {label: string, url: string}[] = [];
+    if (aboutNode?.children) {
+      links.push(...aboutNode.children.map(c => ({ label: c.label, url: c.url })));
+    }
+    if (karriereNode) links.push({ label: karriereNode.label, url: karriereNode.url });
+    if (messenNode) links.push({ label: messenNode.label, url: messenNode.url });
+    return links;
+  }, [navLinks]);
 
-          return (
-            <TransitionLink 
-              key={item.label}
-              href={mappedUrl}
-              className={`relative flex flex-col items-center justify-center w-full min-h-[44px] py-1 transition-colors duration-300 select-none ${
-                isActive ? 'text-primary' : 'text-neutral-500 hover:text-neutral-900'
-              }`}
-            >
-              <div className="relative flex flex-col items-center justify-center">
-                {/* Active Icon Background */}
+  return (
+    <>
+      <div className="md:hidden fixed bottom-0 left-0 right-0 z-[9999] px-2 pb-[calc(env(safe-area-inset-bottom)_+_12px)] pt-4 pointer-events-none flex justify-center">
+        <nav className="flex justify-between items-center bg-white/75 backdrop-blur-2xl border border-white/60 shadow-[0_8px_32px_rgba(0,0,0,0.12)] rounded-3xl p-1.5 pointer-events-auto w-full max-w-[480px]">
+          {items.map((item) => {
+            const mappedUrl = item.url.startsWith('/') && !item.url.match(/^\/(en|de)/) 
+              ? `/${currentLocale}${item.url}` 
+              : item.url;
+              
+            let isActive = false;
+            if (item.isFlyoutTrigger) {
+              isActive = isFlyoutOpen;
+            } else {
+              isActive = item.exactMatch 
+                ? pathname === mappedUrl 
+                : (pathname === mappedUrl || (mappedUrl !== `/${currentLocale}` && pathname?.startsWith(`${mappedUrl}/`)));
+            }
+
+            const innerContent = (
+              <>
                 {isActive && (
                   <motion.div
                     layoutId="mobile-nav-active-bg"
-                    className="absolute inset-0 bg-primary/10 rounded-full scale-150"
-                    transition={{ type: 'spring', stiffness: 500, damping: 30 }}
+                    className="absolute inset-0 bg-primary/10 rounded-2xl shadow-sm border border-primary/10"
+                    transition={{ type: 'spring', stiffness: 400, damping: 25 }}
                   />
                 )}
                 
-                {/* Icon wrapper to ensure it sits above the background */}
-                <div className="relative z-10 transition-transform duration-300 active:scale-90">
-                  {item.icon}
+                <div className="relative flex flex-col items-center justify-center z-10 w-full h-full">
+                  <motion.div 
+                    whileTap={{ scale: 0.8 }}
+                    animate={{ y: isActive ? -2 : 0 }}
+                    transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+                  >
+                    {item.icon}
+                  </motion.div>
+                  <motion.span 
+                    animate={{ y: isActive ? 0 : 2 }}
+                    className="text-[9px] font-bold mt-1 tracking-wide"
+                  >
+                    {item.label}
+                  </motion.span>
                 </div>
+              </>
+            );
+
+            if (item.isFlyoutTrigger) {
+              return (
+                <button 
+                  key={item.label}
+                  onClick={() => setIsFlyoutOpen(!isFlyoutOpen)}
+                  className={`relative flex flex-col items-center justify-center flex-1 h-[62px] transition-colors duration-300 select-none w-full focus:outline-none ${
+                    isActive ? 'text-primary' : 'text-neutral-600 hover:text-neutral-900'
+                  }`}
+                  style={{ WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation' }}
+                >
+                  {innerContent}
+                </button>
+              );
+            }
+
+            return (
+              <TransitionLink 
+                key={item.label}
+                href={mappedUrl}
+                onClick={() => setIsFlyoutOpen(false)}
+                className={`relative flex flex-col items-center justify-center flex-1 h-[62px] transition-colors duration-300 select-none ${
+                  isActive ? 'text-primary' : 'text-neutral-600 hover:text-neutral-900'
+                }`}
+                style={{ WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation' }}
+              >
+                {innerContent}
+              </TransitionLink>
+            );
+          })}
+        </nav>
+      </div>
+
+      <AnimatePresence>
+        {isFlyoutOpen && (
+          <>
+            <motion.div 
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.3 }}
+              className="fixed inset-0 bg-black/40 backdrop-blur-sm z-[9997] md:hidden"
+              onClick={() => setIsFlyoutOpen(false)}
+            />
+            <motion.div
+              initial={{ y: '100%', opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ y: '100%', opacity: 0 }}
+              transition={{ type: 'spring', stiffness: 350, damping: 30 }}
+              drag="y"
+              dragConstraints={{ top: 0, bottom: 0 }}
+              dragElastic={0.2}
+              onDragEnd={(e, info) => {
+                if (info.offset.y > 50 || info.velocity.y > 100) {
+                  setIsFlyoutOpen(false);
+                }
+              }}
+              className="fixed bottom-0 left-0 right-0 z-[9998] bg-white rounded-t-[32px] pt-4 pb-[calc(env(safe-area-inset-bottom)_+_7rem)] px-6 md:hidden shadow-[0_-20px_40px_rgba(0,0,0,0.1)] border-t border-neutral-100"
+            >
+              <div className="w-16 h-1.5 bg-neutral-200 rounded-full mx-auto mb-6 cursor-grab active:cursor-grabbing" />
+              <h3 className="text-xs font-bold uppercase tracking-widest text-neutral-400 mb-4 px-2">{currentLocale === 'de' ? 'Über uns & Mehr' : 'About us & More'}</h3>
+              <div className="flex flex-col gap-1">
+                {flyoutLinks.map((link, i) => {
+                  const childUrl = link.url.startsWith('/') && !link.url.match(/^\/(en|de)/) 
+                    ? `/${currentLocale}${link.url}` 
+                    : link.url;
+                  const isChildActive = pathname === childUrl;
+                  
+                  return (
+                    <TransitionLink
+                      key={i}
+                      href={childUrl}
+                      onClick={() => setIsFlyoutOpen(false)}
+                      className={`px-4 py-4 rounded-2xl text-[15px] font-semibold transition-all flex items-center justify-between ${
+                        isChildActive ? 'bg-primary/10 text-primary' : 'text-neutral-700 hover:bg-neutral-50 active:bg-neutral-100'
+                      }`}
+                    >
+                      {link.label}
+                      <svg className={`w-4 h-4 ${isChildActive ? 'text-primary' : 'text-neutral-400'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
+                      </svg>
+                    </TransitionLink>
+                  );
+                })}
               </div>
-              <span className="text-[10px] font-semibold mt-0.5 tracking-wide z-10">{item.label}</span>
-            </TransitionLink>
-          );
-        })}
-      </nav>
-    </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </>
   );
 }

components/providers/InitialLoader.tsx

@@ -4,51 +4,29 @@ import React, { useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 
-const PRELOAD_VIDEOS = [
-  '/assets/videos/web/hero-bohrung.mp4'
-];
 
 export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?: boolean }) {
   const [isLoading, setIsLoading] = useState(shouldShowLoader);
 
-  useEffect(() => {
-    if (!shouldShowLoader) return;
-    
-    // Fallback Timeout (4 Sekunden), falls Videos hängen
-    const timeout = setTimeout(() => {
-      finishLoading();
-    }, 4000);
-
-    let videosLoaded = 0;
-    
-    const checkAllLoaded = () => {
-      videosLoaded++;
-      if (videosLoaded === PRELOAD_VIDEOS.length) {
-        clearTimeout(timeout);
-        // Kleine Verzögerung für die smootheness
-        setTimeout(finishLoading, 800);
-      }
-    };
-
-    PRELOAD_VIDEOS.forEach((src) => {
-      const video = document.createElement('video');
-      video.preload = 'auto';
-      video.oncanplaythrough = checkAllLoaded;
-      video.onerror = checkAllLoaded; // bei Fehler trotzdem weitermachen
-      video.src = src;
-      video.load();
-    });
-
-    // Cleanup
-    return () => clearTimeout(timeout);
-  }, [shouldShowLoader]);
-
   const finishLoading = () => {
     // Set a session cookie so the server knows not to render the loader again
     document.cookie = "etib_initial_loader_v5=true; path=/; samesite=lax";
     setIsLoading(false);
   };
 
+  useEffect(() => {
+    if (!shouldShowLoader) return;
+    
+    // Just show the animation for a short time to allow UI to mount,
+    // we don't preload 10MB videos anymore to save pagespeed!
+    const timeout = setTimeout(() => {
+      finishLoading();
+    }, 1200);
+
+    // Cleanup
+    return () => clearTimeout(timeout);
+  }, [shouldShowLoader]);
+
   // Wenn wir serverseitig rendern und es nicht zeigen sollen, return null
   if (!shouldShowLoader) return null;
 

components/providers/TransitionProvider.tsx

@@ -15,8 +15,6 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
   const [isTransitioning, setIsTransitioning] = useState(false);
   const [transitionMessage, setTransitionMessage] = useState<string | null>(null);
   const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
 
   // We use a ref to track transition state without triggering the route change effect when it turns true
   const isTransitioningRef = React.useRef(isTransitioning);
@@ -24,18 +22,6 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
     isTransitioningRef.current = isTransitioning;
   }, [isTransitioning]);
 
-  // Watch for route changes to complete the transition
-  useEffect(() => {
-    if (isTransitioningRef.current) {
-      // The route has actually changed in the browser, or at least the RSC payload arrived
-      const timer = setTimeout(() => {
-        setIsTransitioning(false);
-        setTimeout(() => setTransitionMessage(null), 300);
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-  }, [pathname, searchParams]); // Run when pathname or search parameters change
-
   const startTransition = useCallback((href: string, message: string | null = null) => {
     // Wenn wir bereits navigieren, nichts tun
     if (isTransitioning) return;
@@ -60,7 +46,7 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
     setTimeout(() => {
       router.push(href);
       
-      // Fallback: If for some reason the route doesn't change after 5 seconds, open the shutter anyway
+      // Fallback: If for some reason the route doesn't change after 60 seconds (useful for slow dev servers), open the shutter anyway
       setTimeout(() => {
         setIsTransitioning((current) => {
           if (current) {
@@ -69,17 +55,41 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
           }
           return current;
         });
-      }, 5000);
+      }, 60000);
     }, 700);
   }, [isTransitioning, router]);
 
   return (
     <TransitionContext.Provider value={{ isTransitioning, transitionMessage, startTransition }}>
+      <React.Suspense fallback={null}>
+        <TransitionRouteWatcher 
+          isTransitioningRef={isTransitioningRef}
+          setIsTransitioning={setIsTransitioning}
+          setTransitionMessage={setTransitionMessage}
+        />
+      </React.Suspense>
       {children}
     </TransitionContext.Provider>
   );
 }
 
+function TransitionRouteWatcher({ isTransitioningRef, setIsTransitioning, setTransitionMessage }: any) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (isTransitioningRef.current) {
+      const timer = setTimeout(() => {
+        setIsTransitioning(false);
+        setTimeout(() => setTransitionMessage(null), 300);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [pathname, searchParams, setIsTransitioning, setTransitionMessage, isTransitioningRef]);
+
+  return null;
+}
+
 export function useTransition() {
   const context = useContext(TransitionContext);
   if (!context) {

components/team/Gallery.tsx

@@ -22,7 +22,7 @@ export default function Gallery() {
   ];
 
   return (
-    <Section className="bg-primary-dark py-16 md:py-32">
+    <Section className="bg-primary-dark">
       <Container>
         <Heading level={2} subtitle={t('gallery.subtitle')} align="center" className="text-white mb-12 md:mb-20">
           <span className="text-white">{t('gallery.title')}</span>