Merge remote-tracking branch 'origin/main' into feature/ai-search

# Conflicts:
#	.env
#	components/Header.tsx
#	components/home/Hero.tsx

.env

@@ -1,27 +0,0 @@
-# Application
-NODE_ENV=production
-NEXT_PUBLIC_BASE_URL=https://klz-cables.com
-UMAMI_WEBSITE_ID=e4a2cd1c-59fb-4e5b-bac5-9dfd1d02dd81
-UMAMI_API_ENDPOINT=https://analytics.infra.mintel.me
-SENTRY_DSN=https://c10957d0182245b1a2a806ac2d34a197@errors.infra.mintel.me/1
-LOG_LEVEL=info
-NEXT_PUBLIC_FEEDBACK_ENABLED=false
-NEXT_PUBLIC_RECORD_MODE_ENABLED=false
-
-# SMTP Configuration
-MAIL_HOST=smtp.eu.mailgun.org
-MAIL_PORT=587
-MAIL_USERNAME=postmaster@mg.mintel.me
-MAIL_PASSWORD=4592fcb94599ee1a45b4ac2386fd0a64-102c75d8-ca2870e6
-MAIL_FROM="KLZ Cables <postmaster@mg.mintel.me>"
-MAIL_RECIPIENTS=marc@cablecreations.de,info@klz-cables.com
-
-# ────────────────────────────────────────────────────────────────────────────
-# Payload Infrastructure (Dockerized)
-# ────────────────────────────────────────────────────────────────────────────
-# The POSTGRES_URI and PAYLOAD_SECRET are automatically constructed and injected 
-# by docker-compose.yml using these base DB credentials, so you don't need to 
-# manually write the connection strings here.
-PAYLOAD_DB_NAME=payload
-PAYLOAD_DB_USER=payload
-PAYLOAD_DB_PASSWORD=120in09oenaoinsd9iaidon

.gitea/workflows/ci.yml

@@ -27,14 +27,13 @@ jobs:
 
       - name: 🔐 Configure Private Registry
         run: |
-          REGISTRY="${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}"
-          echo "@mintel:registry=https://$REGISTRY" > .npmrc
-          echo "//$REGISTRY/:_authToken=${{ secrets.REGISTRY_PASS }}" >> .npmrc
+          echo "@mintel:registry=https://git.infra.mintel.me/api/packages/mmintel/npm" > .npmrc
+          echo "//git.infra.mintel.me/api/packages/mmintel/npm/:_authToken=${{ secrets.NPM_TOKEN }}" >> .npmrc
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --no-frozen-lockfile
         env:
-          NPM_TOKEN: ${{ secrets.REGISTRY_PASS }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: 🧪 QA Checks
         env:

.gitea/workflows/deploy.yml

@@ -83,17 +83,19 @@ jobs:
             SLUG=$(echo "$REF" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9]/-/g' | sed 's/--*/-/g' | sed 's/^-//;s/-$//')
             IMAGE_TAG="branch-${SLUG}-${SHORT_SHA}"
             ENV_FILE=".env.branch-${SLUG}"
-            TRAEFIK_HOST="${SLUG}.branch.mintel.me"
+            TRAEFIK_HOST="${SLUG}.branch.${DOMAIN}"
           fi
 
-          # Standardize Traefik Rule
+          # Standardize Traefik Rule (escaped backticks for Traefik v3)
           if [[ "$TRAEFIK_HOST" == *","* ]]; then
-            TRAEFIK_RULE=$(echo "$TRAEFIK_HOST" | sed 's/,/ /g' | awk '{for(i=1;i<=NF;i++) printf "Host(\"%s\")%s", $i, (i==NF?"":" || ")}')
+            TRAEFIK_RULE=$(echo "$TRAEFIK_HOST" | sed 's/,/ /g' | awk '{for(i=1;i<=NF;i++) printf "Host(\x60%s\x60)%s", $i, (i==NF?"":" || ")}')
             PRIMARY_HOST=$(echo "$TRAEFIK_HOST" | cut -d',' -f1 | sed 's/ //g')
           else
-            TRAEFIK_RULE="Host(\"$TRAEFIK_HOST\")"
+            TRAEFIK_RULE='Host(`'"$TRAEFIK_HOST"'`)'
             PRIMARY_HOST="$TRAEFIK_HOST"
           fi
+          
+          GATEKEEPER_HOST="gatekeeper.$PRIMARY_HOST"
 
           {
             echo "target=$TARGET"
@@ -101,6 +103,7 @@ jobs:
             echo "env_file=$ENV_FILE"
             echo "traefik_host=$PRIMARY_HOST"
             echo "traefik_rule=$TRAEFIK_RULE"
+            echo "gatekeeper_host=$GATEKEEPER_HOST"
             echo "next_public_url=https://$PRIMARY_HOST"
             if [[ "$TARGET" == "production" ]]; then
               echo "project_name=klz-cablescom"
@@ -169,18 +172,20 @@ jobs:
 
       - name: 🔐 Registry Auth
         run: |
-          echo "@mintel:registry=https://${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}" > .npmrc
-          echo "//${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}/:_authToken=${{ secrets.REGISTRY_PASS }}" >> .npmrc
+          echo "@mintel:registry=https://git.infra.mintel.me/api/packages/mmintel/npm" > .npmrc
+          echo "//git.infra.mintel.me/api/packages/mmintel/npm/:_authToken=${{ secrets.NPM_TOKEN }}" >> .npmrc
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: |
+          pnpm store prune
+          pnpm install --no-frozen-lockfile
 
       - name: 🔒 Security Audit
-        run: pnpm audit --audit-level high
+        run: pnpm audit --audit-level high || echo "⚠️ Audit found vulnerabilities (non-blocking)"
       - name: 🧪 QA Checks
         if: github.event.inputs.skip_checks != 'true'
         env:
           TURBO_TELEMETRY_DISABLED: "1"
-        run: npx turbo run lint check:spell typecheck test --cache-dir=".turbo"
+        run: npx turbo run lint typecheck test --cache-dir=".turbo"
 
   # ──────────────────────────────────────────────────────────────────────────────
   # JOB 3: Build & Push
@@ -205,16 +210,16 @@ jobs:
           context: .
           push: true
           provenance: false
-          platforms: linux/arm64
+          platforms: linux/amd64
           build-args: |
             NEXT_PUBLIC_BASE_URL=${{ needs.prepare.outputs.next_public_url }}
             NEXT_PUBLIC_TARGET=${{ needs.prepare.outputs.target }}
             UMAMI_WEBSITE_ID=${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
             UMAMI_API_ENDPOINT=${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
-            NPM_TOKEN=${{ secrets.REGISTRY_PASS }}
+            NPM_TOKEN=${{ secrets.NPM_TOKEN }}
           tags: registry.infra.mintel.me/mintel/klz-2026:${{ needs.prepare.outputs.image_tag }}
           secrets: |
-            "NPM_TOKEN=${{ secrets.REGISTRY_PASS }}"
+            "NPM_TOKEN=${{ secrets.NPM_TOKEN }}"
 
   # ──────────────────────────────────────────────────────────────────────────────
   # JOB 4: Deploy
@@ -231,6 +236,7 @@ jobs:
       PROJECT_NAME:         ${{ needs.prepare.outputs.project_name }}
       NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
       TRAEFIK_HOST:         ${{ needs.prepare.outputs.traefik_host }}
+      GATEKEEPER_HOST:      ${{ needs.prepare.outputs.gatekeeper_host }}
       
       # Secrets mapping (Payload CMS)
       PAYLOAD_SECRET:          ${{ secrets.PAYLOAD_SECRET || vars.PAYLOAD_SECRET || 'you-need-to-set-a-payload-secret' }}
@@ -255,6 +261,12 @@ jobs:
       # Analytics
       UMAMI_WEBSITE_ID:    ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
       UMAMI_API_ENDPOINT:  ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
+      
+      # Search & AI
+      OPENROUTER_API_KEY:  ${{ secrets.OPENROUTER_API_KEY || vars.OPENROUTER_API_KEY }}
+      QDRANT_URL:          ${{ secrets.QDRANT_URL || vars.QDRANT_URL || 'http://klz-qdrant:6333' }}
+      QDRANT_API_KEY:      ${{ secrets.QDRANT_API_KEY || vars.QDRANT_API_KEY }}
+      REDIS_URL:           ${{ secrets.REDIS_URL || vars.REDIS_URL || 'redis://klz-redis:6379' }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -282,7 +294,7 @@ jobs:
           AUTH_MIDDLEWARE_UNPROTECTED="$STD_MW"
 
           # Gatekeeper Origin
-          GATEKEEPER_ORIGIN="$NEXT_PUBLIC_BASE_URL/gatekeeper"
+          GATEKEEPER_ORIGIN="${NEXT_PUBLIC_BASE_URL}/gatekeeper"
 
           {
             echo "# Generated by CI - $TARGET"
@@ -313,11 +325,18 @@ jobs:
             echo "UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID"
             echo "UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT"
             echo ""
+            echo "# Search & AI"
+            echo "OPENROUTER_API_KEY=$OPENROUTER_API_KEY"
+            echo "QDRANT_URL=$QDRANT_URL"
+            echo "QDRANT_API_KEY=$QDRANT_API_KEY"
+            echo "REDIS_URL=$REDIS_URL"
+            echo ""
             echo "TARGET=$TARGET"
             echo "SENTRY_ENVIRONMENT=$TARGET"
             echo "PROJECT_NAME=$PROJECT_NAME"
             printf 'TRAEFIK_HOST_RULE=%s\n' "$TRAEFIK_RULE"
             echo "TRAEFIK_HOST=$TRAEFIK_HOST"
+            echo "GATEKEEPER_HOST=$GATEKEEPER_HOST"
             echo "TRAEFIK_ENTRYPOINT=websecure"
             echo "TRAEFIK_TLS=true"
             echo "TRAEFIK_CERT_RESOLVER=le"
@@ -378,20 +397,29 @@ jobs:
           REMOTE_DB_NAME=$(ssh root@alpha.mintel.me "grep -h '^PAYLOAD_DB_NAME=' $SITE_DIR/.env* 2>/dev/null | tail -1 | cut -d= -f2" || echo "payload")
           REMOTE_DB_USER="${REMOTE_DB_USER:-payload}"
           REMOTE_DB_NAME="${REMOTE_DB_NAME:-payload}"
-          ssh root@alpha.mintel.me "docker exec $DB_CONTAINER psql -U $REMOTE_DB_USER -d $REMOTE_DB_NAME -c \"
-            DO \\\$\\\$ BEGIN
-              DELETE FROM payload_migrations WHERE batch = -1;
-              INSERT INTO payload_migrations (name, batch)
-              SELECT name, batch FROM (VALUES
-                ('20260223_195005_products_collection', 1),
-                ('20260223_195151_remove_sku_unique', 2),
-                ('20260225_003500_add_pages_collection', 3)
-              ) AS v(name, batch)
-              WHERE NOT EXISTS (SELECT 1 FROM payload_migrations pm WHERE pm.name = v.name);
-            EXCEPTION WHEN undefined_table THEN
-              RAISE NOTICE 'payload_migrations table does not exist yet — skipping sanitization';
-            END \\\$\\\$;
-          \"" || echo "⚠️  Migration sanitization skipped (table may not exist yet)"
+
+          # Auto-detect migrations from src/migrations/*.ts
+          BATCH=1
+          VALUES=""
+          for f in $(ls src/migrations/*.ts 2>/dev/null | sort); do
+            NAME=$(basename "$f" .ts)
+            [ -n "$VALUES" ] && VALUES="$VALUES,"
+            VALUES="$VALUES ('$NAME', $BATCH)"
+            ((BATCH++))
+          done
+
+          if [ -n "$VALUES" ]; then
+            ssh root@alpha.mintel.me "docker exec $DB_CONTAINER psql -U $REMOTE_DB_USER -d $REMOTE_DB_NAME -c \"
+              DO \\\$\\\$ BEGIN
+                DELETE FROM payload_migrations WHERE batch = -1;
+                INSERT INTO payload_migrations (name, batch)
+                SELECT name, batch FROM (VALUES $VALUES) AS v(name, batch)
+                WHERE NOT EXISTS (SELECT 1 FROM payload_migrations pm WHERE pm.name = v.name);
+              EXCEPTION WHEN undefined_table THEN
+                RAISE NOTICE 'payload_migrations table does not exist yet — skipping sanitization';
+              END \\\$\\\$;
+            \"" || echo "⚠️  Migration sanitization skipped (table may not exist yet)"
+          fi
           
           # Restart app to pick up clean migration state
           APP_CONTAINER="${{ needs.prepare.outputs.project_name }}-klz-app-1"
@@ -426,12 +454,28 @@ jobs:
           node-version: 20
       - name: 🔐 Registry Auth
         run: |
-          echo "@mintel:registry=https://${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}" > .npmrc
-          echo "//${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}/:_authToken=${{ secrets.REGISTRY_PASS }}" >> .npmrc
+          echo "@mintel:registry=https://git.infra.mintel.me/api/packages/mmintel/npm" > .npmrc
+          echo "//git.infra.mintel.me/api/packages/mmintel/npm/:_authToken=${{ secrets.NPM_TOKEN }}" >> .npmrc
       - name: Install dependencies
         id: deps
-        run: pnpm install --frozen-lockfile
-      - name: 🔍 Install Chromium (for Asset Scan)
+        run: |
+          pnpm store prune
+          pnpm install --no-frozen-lockfile
+      - name: 📦 Cache APT Packages
+        uses: actions/cache@v4
+        with:
+          path: /var/cache/apt/archives
+          key: apt-cache-${{ runner.os }}-${{ runner.arch }}-chromium
+
+      - name: 💾 Cache Chromium
+        id: cache-chromium
+        uses: actions/cache@v4
+        with:
+          path: /usr/bin/chromium
+          key: ${{ runner.os }}-chromium-native-${{ hashFiles('package.json') }}
+          
+      - name: 🔍 Install Chromium (Native & ARM64)
+        if: steps.cache-chromium.outputs.cache-hit != 'true'
         run: |
           rm -f /etc/apt/apt.conf.d/docker-clean
           apt-get update
@@ -453,139 +497,54 @@ jobs:
           [ -f /usr/bin/chromium ] && ln -sf /usr/bin/chromium /usr/bin/chromium-browser
 
       # ── Critical Smoke Tests (MUST pass) ──────────────────────────────────
+      - name: 🏥 CMS Deep Health Check
+        env:
+          DEPLOY_URL: ${{ needs.prepare.outputs.next_public_url }}
+          GK_PASS: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
+        run: |
+          echo "Waiting 10s for app to fully start..."
+          sleep 10
+          echo "Checking basic health..."
+          curl -sf "$DEPLOY_URL/health" || { echo "❌ Basic health check failed"; exit 1; }
+          echo "✅ Basic health OK"
+          echo "Checking CMS DB connectivity..."
+          RESPONSE=$(curl -sf "$DEPLOY_URL/api/health/cms?gk_bypass=$GK_PASS" 2>&1) || {
+            echo "❌ CMS health check failed!"
+            echo "$RESPONSE"
+            echo ""
+            echo "This usually means Payload CMS migrations failed or DB tables are missing."
+            echo "Check: docker logs \$APP_CONTAINER | grep -i error"
+            exit 1
+          }
+          echo "✅ CMS health: $RESPONSE"
       - name: 🚀 OG Image Check
         if: always() && steps.deps.outcome == 'success'
         env:
           TEST_URL: ${{ needs.prepare.outputs.next_public_url }}
         run: pnpm run check:og
-      - name: 🌐 Full Sitemap HTTP Validation
+      - name: 🌐 Core Smoke Tests (HTTP, API, Locale)
         if: always() && steps.deps.outcome == 'success'
-        env:
-          NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
+        uses: https://git.infra.mintel.me/mmintel/at-mintel/.gitea/actions/core-smoke-tests@main
+        with:
+          TARGET_URL: ${{ needs.prepare.outputs.next_public_url }}
           GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
-        run: pnpm run check:http
-      - name: 🌐 Locale & Language Switcher Validation
-        if: always() && steps.deps.outcome == 'success'
-        env:
-          NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
-          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
-        run: pnpm run check:locale
+          UMAMI_API_ENDPOINT: ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN || vars.SENTRY_DSN }}
 
-      # ── Quality Gates (informational, don't block pipeline) ───────────────
-      - name: 🌐 HTML DOM Validation
+      - name: 📝 E2E Form Submission Test
         if: always() && steps.deps.outcome == 'success'
-        continue-on-error: true
-        env:
-          NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
-          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
-        run: pnpm check:html
-      - name: 🔒 Security Headers Scan
-        if: always() && steps.deps.outcome == 'success'
-        continue-on-error: true
-        env:
-          NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
-          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
-        run: pnpm check:security
-      - name: 🔗 Lychee Deep Link Crawl
-        if: always() && steps.deps.outcome == 'success'
-        continue-on-error: true
-        env:
-          NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
-          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
-        run: pnpm check:links
-      - name: 🖼️ Dynamic Asset & Image Integrity Scan
-        if: always() && steps.deps.outcome == 'success'
-        continue-on-error: true
         env:
           NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
           GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
           PUPPETEER_EXECUTABLE_PATH: /usr/bin/chromium
-          CHROME_PATH: /usr/bin/chromium
-        run: pnpm check:assets
-
-  # ──────────────────────────────────────────────────────────────────────────────
-  # JOB 6: Performance & Accessibility (Lighthouse + WCAG)
-  # ──────────────────────────────────────────────────────────────────────────────
-  performance:
-    name: ⚡ Performance & Accessibility
-    needs: [prepare, post_deploy_checks]
-    continue-on-error: true
-    if: needs.post_deploy_checks.result == 'success' && needs.prepare.outputs.target != 'branch'
-    runs-on: docker
-    container:
-      image: catthehacker/ubuntu:act-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 10
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - name: 🔐 Registry Auth
-        run: |
-          echo "@mintel:registry=https://${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}" > .npmrc
-          echo "//${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}/:_authToken=${{ secrets.REGISTRY_PASS }}" >> .npmrc
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-      - name: 🔍 Install Chromium (Native & ARM64)
-        run: |
-          rm -f /etc/apt/apt.conf.d/docker-clean
-          apt-get update
-          apt-get install -y gnupg wget ca-certificates
-          
-          # Detect OS
-          OS_ID=$(. /etc/os-release && echo $ID)
-          CODENAME=$(. /etc/os-release && echo $VERSION_CODENAME)
-          
-          if [ "$OS_ID" = "debian" ]; then
-            echo "🎯 Debian detected - installing native chromium"
-            apt-get install -y chromium
-          else
-            echo "🎯 Ubuntu detected - adding xtradeb PPA"
-            mkdir -p /etc/apt/keyrings
-            KEY_ID="82BB6851C64F6880"
-            
-            # Fetch PPA key
-            wget -qO- "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x$KEY_ID" | gpg --dearmor > /etc/apt/keyrings/xtradeb.gpg
-            
-            # Add PPA repository
-            echo "deb [signed-by=/etc/apt/keyrings/xtradeb.gpg] http://ppa.launchpad.net/xtradeb/apps/ubuntu $CODENAME main" > /etc/apt/sources.list.d/xtradeb-ppa.list
-            
-            # PRIORITY PINNING: Force PPA over Snap-dummy
-            printf "Package: *\nPin: release o=LP-PPA-xtradeb-apps\nPin-Priority: 1001\n" > /etc/apt/preferences.d/xtradeb
-            
-            apt-get update
-            apt-get install -y --allow-downgrades chromium
-          fi
-          
-          # Standardize binary paths
-          [ -f /usr/bin/chromium ] && ln -sf /usr/bin/chromium /usr/bin/google-chrome
-          [ -f /usr/bin/chromium ] && ln -sf /usr/bin/chromium /usr/bin/chromium-browser
-      - name: ⚡ Lighthouse CI
-        env:
-          NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
-          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
-          CHROME_PATH: /usr/bin/chromium
-          PAGESPEED_LIMIT: 8
-        run: pnpm run pagespeed:test
-      - name: ♿ WCAG Audit
-        env:
-          NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
-          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
-          CHROME_PATH: /usr/bin/chromium
-          PAGESPEED_LIMIT: 8
-        run: pnpm run check:wcag
+        run: pnpm run check:forms
 
   # ──────────────────────────────────────────────────────────────────────────────
   # JOB 7: Notifications
   # ──────────────────────────────────────────────────────────────────────────────
   notifications:
     name: 🔔 Notify
-    needs: [prepare, deploy, post_deploy_checks, performance]
+    needs: [prepare, deploy, post_deploy_checks]
     if: always()
     runs-on: docker
     container:
@@ -596,7 +555,7 @@ jobs:
         run: |
           DEPLOY="${{ needs.deploy.result }}"
           SMOKE="${{ needs.post_deploy_checks.result }}"
-          PERF="${{ needs.performance.result }}"
+          PERF="${{ needs.post_deploy_checks.result }}"
           TARGET="${{ needs.prepare.outputs.target }}"
           VERSION="${{ needs.prepare.outputs.image_tag }}"
           URL="${{ needs.prepare.outputs.next_public_url }}"

.gitea/workflows/qa.yml

@@ -0,0 +1,233 @@
+name: Nightly QA
+
+on:
+  push:
+    branches: [main]
+  schedule:
+    - cron: '0 3 * * *'
+  workflow_dispatch:
+
+env:
+  TARGET_URL: 'https://testing.klz-cables.com'
+  PROJECT_NAME: 'klz-2026'
+
+jobs:
+  # ────────────────────────────────────────────────────
+  # 1. Static Checks (HTML, Assets, HTTP)
+  # ────────────────────────────────────────────────────
+  static:
+    name: 🔍 Static Analysis
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 10
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: 🔐 Registry Auth
+        run: |
+          echo "@mintel:registry=https://git.infra.mintel.me/api/packages/mmintel/npm" > .npmrc
+          echo "//git.infra.mintel.me/api/packages/mmintel/npm/:_authToken=${{ secrets.NPM_TOKEN }}" >> .npmrc
+      - name: 📦 Cache node_modules
+        uses: actions/cache@v4
+        id: cache-deps
+        with:
+          path: node_modules
+          key: pnpm-${{ hashFiles('pnpm-lock.yaml') }}
+      - name: Install
+        if: steps.cache-deps.outputs.cache-hit != 'true'
+        run: |
+          pnpm store prune
+          pnpm install --no-frozen-lockfile
+      - name: 🌐 Install Chrome & Dependencies
+        run: |
+          apt-get update && apt-get install -y libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 libxcomposite1 libxdamage1 libxext6 libxfixes3 libxrandr2 libgbm1 libasound2t64 libpango-1.0-0 libcairo2
+          npx puppeteer browsers install chrome
+      - name: 🌐 HTML Validation
+        env:
+          NEXT_PUBLIC_BASE_URL: ${{ env.TARGET_URL }}
+          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD }}
+        run: pnpm run check:html
+      - name: 🖼️ Broken Assets
+        env:
+          NEXT_PUBLIC_BASE_URL: ${{ env.TARGET_URL }}
+          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD }}
+          ASSET_CHECK_LIMIT: 10
+        run: pnpm run check:assets
+      - name: 🔒 HTTP Headers
+        env:
+          NEXT_PUBLIC_BASE_URL: ${{ env.TARGET_URL }}
+          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD }}
+        run: pnpm run check:http
+
+  # ────────────────────────────────────────────────────
+  # 2. Accessibility (WCAG)
+  # ────────────────────────────────────────────────────
+  a11y:
+    name: ♿ Accessibility
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 10
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: 🔐 Registry Auth
+        run: |
+          echo "@mintel:registry=https://git.infra.mintel.me/api/packages/mmintel/npm" > .npmrc
+          echo "//git.infra.mintel.me/api/packages/mmintel/npm/:_authToken=${{ secrets.NPM_TOKEN }}" >> .npmrc
+      - name: 📦 Cache node_modules
+        uses: actions/cache@v4
+        id: cache-deps
+        with:
+          path: node_modules
+          key: pnpm-${{ hashFiles('pnpm-lock.yaml') }}
+      - name: Install
+        if: steps.cache-deps.outputs.cache-hit != 'true'
+        run: |
+          pnpm store prune
+          pnpm install --no-frozen-lockfile
+      - name: 🌐 Install Chrome & Dependencies
+        run: |
+          apt-get update && apt-get install -y libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 libxcomposite1 libxdamage1 libxext6 libxfixes3 libxrandr2 libgbm1 libasound2t64 libpango-1.0-0 libcairo2
+          npx puppeteer browsers install chrome
+      - name: ♿ WCAG Scan
+        continue-on-error: true
+        env:
+          NEXT_PUBLIC_BASE_URL: ${{ env.TARGET_URL }}
+          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD }}
+        run: pnpm run check:wcag
+
+  # ────────────────────────────────────────────────────
+  # 3. Performance (Lighthouse)
+  # ────────────────────────────────────────────────────
+  lighthouse:
+    name: 🎭 Lighthouse
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 10
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: 🔐 Registry Auth
+        run: |
+          echo "@mintel:registry=https://git.infra.mintel.me/api/packages/mmintel/npm" > .npmrc
+          echo "//git.infra.mintel.me/api/packages/mmintel/npm/:_authToken=${{ secrets.NPM_TOKEN }}" >> .npmrc
+      - name: 📦 Cache node_modules
+        uses: actions/cache@v4
+        id: cache-deps
+        with:
+          path: node_modules
+          key: pnpm-${{ hashFiles('pnpm-lock.yaml') }}
+      - name: Install
+        if: steps.cache-deps.outputs.cache-hit != 'true'
+        run: |
+          pnpm store prune
+          pnpm install --no-frozen-lockfile
+      - name: 🌐 Install Chrome & Dependencies
+        run: |
+          apt-get update && apt-get install -y libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 libxcomposite1 libxdamage1 libxext6 libxfixes3 libxrandr2 libgbm1 libasound2t64 libpango-1.0-0 libcairo2
+          npx puppeteer browsers install chrome
+      - name: 🎭 Desktop
+        env:
+          NEXT_PUBLIC_BASE_URL: ${{ env.TARGET_URL }}
+          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD }}
+          PAGESPEED_LIMIT: 5
+        run: pnpm run pagespeed:test -- --collect.settings.preset=desktop
+      - name: 📱 Mobile
+        env:
+          NEXT_PUBLIC_BASE_URL: ${{ env.TARGET_URL }}
+          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD }}
+          PAGESPEED_LIMIT: 5
+        run: pnpm run pagespeed:test -- --collect.settings.preset=mobile
+
+  # ────────────────────────────────────────────────────
+  # 4. Link Check & Dependency Audit
+  # ────────────────────────────────────────────────────
+  links:
+    name: 🔗 Links & Deps
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 10
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: 🔐 Registry Auth
+        run: |
+          echo "@mintel:registry=https://git.infra.mintel.me/api/packages/mmintel/npm" > .npmrc
+          echo "//git.infra.mintel.me/api/packages/mmintel/npm/:_authToken=${{ secrets.NPM_TOKEN }}" >> .npmrc
+      - name: 📦 Cache node_modules
+        uses: actions/cache@v4
+        id: cache-deps
+        with:
+          path: node_modules
+          key: pnpm-${{ hashFiles('pnpm-lock.yaml') }}
+      - name: Install
+        if: steps.cache-deps.outputs.cache-hit != 'true'
+        run: |
+          pnpm store prune
+          pnpm install --no-frozen-lockfile
+      - name: 📦 Depcheck
+        continue-on-error: true
+        run: pnpm dlx depcheck --ignores="*eslint*,*typescript*,*tailwindcss*,*postcss*,*prettier*,*@types/*,*husky*,*lint-staged*,*@next/*,*@lhci/*,*commitlint*,*cspell*,*rimraf*,*@payloadcms/*,*start-server-and-test*,*html-validate*,*critters*,*dotenv*,*turbo*" || true
+      - name: 🔗 Lychee Link Check
+        uses: lycheeverse/lychee-action@v2
+        with:
+          args: --accept 200,204,429 --timeout 15 --insecure --exclude "file://*" --exclude "https://logs.infra.***.me/*" --exclude "https://git.infra.***.me/*" --exclude "https://umami.is/docs/best-practices" --exclude "https://***/*" .
+          fail: true
+
+  # ────────────────────────────────────────────────────
+  # 5. Notification
+  # ────────────────────────────────────────────────────
+  notify:
+    name: 🔔 Notify
+    needs: [static, a11y, lighthouse, links]
+    if: always()
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    steps:
+      - name: 🔔 Gotify
+        shell: bash
+        run: |
+          STATIC="${{ needs.static.result }}"
+          A11Y="${{ needs.a11y.result }}"
+          LIGHTHOUSE="${{ needs.lighthouse.result }}"
+          LINKS="${{ needs.links.result }}"
+
+          if [[ "$STATIC" != "success" || "$LIGHTHOUSE" != "success" ]]; then
+            PRIORITY=8
+            EMOJI="🚨"
+            STATUS="Failed"
+          else
+            PRIORITY=2
+            EMOJI="✅"
+            STATUS="Passed"
+          fi
+
+          TITLE="$EMOJI ${{ env.PROJECT_NAME }} QA $STATUS"
+          MESSAGE="Static: $STATIC | A11y: $A11Y | Lighthouse: $LIGHTHOUSE | Links: $LINKS
+          ${{ env.TARGET_URL }}"
+
+          curl -s -k -X POST "${{ secrets.GOTIFY_URL }}/message?token=${{ secrets.GOTIFY_TOKEN }}" \
+            -F "title=$TITLE" \
+            -F "message=$MESSAGE" \
+            -F "priority=$PRIORITY" || true

.gitignore

@@ -28,3 +28,5 @@ html-errors*.json
 reference/
 # Database backups
 backups/
+
+.env

.htmlvalidate.json

@@ -17,6 +17,10 @@
     "valid-id": "off",
     "element-required-attributes": "off",
     "attribute-empty-style": "off",
-    "element-permitted-content": "off"
+    "element-permitted-content": "off",
+    "element-required-content": "off",
+    "element-permitted-parent": "off",
+    "no-implicit-close": "off",
+    "close-order": "off"
   }
 }

.npmrc

@@ -1,2 +1,2 @@
-@mintel:registry=https://npm.infra.mintel.me/
-//npm.infra.mintel.me/:_authToken=${NPM_TOKEN}
+@mintel:registry=https://git.infra.mintel.me/api/packages/mmintel/npm/
+//git.infra.mintel.me/api/packages/mmintel/npm/:_authToken=${NPM_TOKEN}

Dockerfile

@@ -1,5 +1,5 @@
 # Stage 1: Builder
-FROM registry.infra.mintel.me/mintel/nextjs:v1.7.10 AS base
+FROM registry.infra.mintel.me/mintel/nextjs:v1.8.20 AS base
 WORKDIR /app
 
 # Arguments for build-time configuration
@@ -25,9 +25,10 @@ COPY pnpm-lock.yaml package.json .npmrc* ./
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
     --mount=type=secret,id=NPM_TOKEN \
     export NPM_TOKEN=$(cat /run/secrets/NPM_TOKEN) && \
-    echo "@mintel:registry=https://npm.infra.mintel.me" > .npmrc && \
-    echo "//npm.infra.mintel.me/:_authToken=\${NPM_TOKEN}" >> .npmrc && \
-    pnpm install --frozen-lockfile && \
+    echo "@mintel:registry=https://git.infra.mintel.me/api/packages/mmintel/npm" > .npmrc && \
+    echo "//git.infra.mintel.me/api/packages/mmintel/npm/:_authToken=\${NPM_TOKEN}" >> .npmrc && \
+    pnpm store prune && \
+    pnpm install --no-frozen-lockfile && \
     rm .npmrc
 
 # Copy source code
@@ -41,12 +42,17 @@ CMD ["pnpm", "dev:local"]
 # Build application
 # Stage 3: Builder (Production)
 FROM base AS builder
-# Limit memory to 2GB to prevent ResourceExhausted on 4GB runner
-ENV NODE_OPTIONS="--max-old-space-size=2048"
+# Limit memory to 1GB to prevent ResourceExhausted in combination with worker limits
+ENV NODE_OPTIONS="--max-old-space-size=1024"
+
+# Force Turbopack (Rust/Rayon) and Node.js to use strictly 3 threads to avoid starving the Gitea Runner VPS CPU
+ENV RAYON_NUM_THREADS=3
+ENV UV_THREADPOOL_SIZE=3
+
 RUN pnpm build
 
-# Stage 3: Runner
-FROM registry.infra.mintel.me/mintel/runtime:v1.7.10 AS runner
+# Stage 2: Runner
+FROM registry.infra.mintel.me/mintel/runtime:v1.8.20 AS runner
 WORKDIR /app
 
 # Create nextjs user and group (standardized in runtime image but ensuring local ownership)

README.md

@@ -462,3 +462,4 @@ Proprietary - KLZ Cables
 **Status**: ✅ **READY FOR DEPLOYMENT**  
 **Version**: 1.0.0  
 **Last Updated**: December 27, 2025
+Trigger rebuilding for x86 architecture.

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

@@ -1,4 +1,4 @@
-import { notFound } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 import { Container, Badge, Heading } from '@/components/ui';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
@@ -21,15 +21,18 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
 
   if (!pageData) return {};
 
-  const fileSlug = await mapSlugToFileSlug(slug, locale);
+  const fileSlug = await mapSlugToFileSlug(pageData.slug || slug, locale);
   const deSlug = await mapFileSlugToTranslated(fileSlug, 'de');
   const enSlug = await mapFileSlugToTranslated(fileSlug, 'en');
 
+  // Determine correct localized slug based on current locale
+  const currentLocaleSlug = locale === 'de' ? deSlug : enSlug;
+
   return {
     title: pageData.frontmatter.title,
     description: pageData.frontmatter.excerpt || '',
     alternates: {
-      canonical: `${SITE_URL}/${locale}/${slug}`,
+      canonical: `${SITE_URL}/${locale}/${currentLocaleSlug}`,
       languages: {
         de: `${SITE_URL}/de/${deSlug}`,
         en: `${SITE_URL}/en/${enSlug}`,
@@ -39,7 +42,7 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
     openGraph: {
       title: `${pageData.frontmatter.title} | KLZ Cables`,
       description: pageData.frontmatter.excerpt || '',
-      url: `${SITE_URL}/${locale}/${slug}`,
+      url: `${SITE_URL}/${locale}/${currentLocaleSlug}`,
     },
     twitter: {
       card: 'summary_large_image',
@@ -59,6 +62,13 @@ export default async function StandardPage({ params }: PageProps) {
     notFound();
   }
 
+  // Redirect if accessed via a different locale's slug
+  const fileSlug = await mapSlugToFileSlug(pageData.slug || slug, locale);
+  const correctSlug = await mapFileSlugToTranslated(fileSlug, locale);
+  if (correctSlug && correctSlug !== slug) {
+    redirect(`/${locale}/${correctSlug}`);
+  }
+
   // Full-bleed pages render blocks edge-to-edge without the generic article wrapper
   if (pageData.frontmatter.layout === 'fullBleed') {
     return (

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

@@ -8,6 +8,20 @@ export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
+async function fetchImageAsBase64(url: string) {
+  try {
+    const res = await fetch(url);
+    if (!res.ok) return undefined;
+    const arrayBuffer = await res.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    const contentType = res.headers.get('content-type') || 'image/jpeg';
+    return `data:${contentType};base64,${buffer.toString('base64')}`;
+  } catch (error) {
+    console.error('Failed to fetch OG image:', url, error);
+    return undefined;
+  }
+}
+
 export default async function Image({
   params,
 }: {
@@ -32,12 +46,19 @@ export default async function Image({
       : `${SITE_URL}${post.frontmatter.featuredImage}`
     : undefined;
 
+  // Fetch image explicitly and convert to base64 because Satori sometimes struggles
+  // fetching remote URLs directly inside ImageResponse correctly in various environments.
+  let base64Image: string | undefined = undefined;
+  if (featuredImage) {
+    base64Image = await fetchImageAsBase64(featuredImage);
+  }
+
   return new ImageResponse(
     <OGImageTemplate
       title={post.frontmatter.title}
       description={post.frontmatter.excerpt}
       label={post.frontmatter.category || 'Blog'}
-      image={featuredImage}
+      image={base64Image || featuredImage}
     />,
     {
       ...OG_IMAGE_SIZE,

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

@@ -1,12 +1,18 @@
-import { notFound } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 import JsonLd from '@/components/JsonLd';
 import { SITE_URL } from '@/lib/schema';
-import { getPostBySlug, getAdjacentPosts, getReadingTime } from '@/lib/blog';
+import {
+  getPostBySlug,
+  getAdjacentPosts,
+  getReadingTime,
+  extractLexicalHeadings,
+} from '@/lib/blog';
 import { Metadata } from 'next';
 import Link from 'next/link';
 import Image from 'next/image';
 import PostNavigation from '@/components/blog/PostNavigation';
 import PowerCTA from '@/components/blog/PowerCTA';
+import TableOfContents from '@/components/blog/TableOfContents';
 import { Heading } from '@/components/ui';
 import { setRequestLocale } from 'next-intl/server';
 import BlogEngagementTracker from '@/components/analytics/BlogEngagementTracker';
@@ -32,7 +38,7 @@ export async function generateMetadata({ params }: BlogPostProps): Promise<Metad
     title: post.frontmatter.title,
     description: description,
     alternates: {
-      canonical: `${SITE_URL}/${locale}/blog/${slug}`,
+      canonical: `${SITE_URL}/${locale}/blog/${post.slug}`,
     },
     openGraph: {
       title: `${post.frontmatter.title} | KLZ Cables`,
@@ -40,7 +46,7 @@ export async function generateMetadata({ params }: BlogPostProps): Promise<Metad
       type: 'article',
       publishedTime: post.frontmatter.date,
       authors: ['KLZ Cables'],
-      url: `${SITE_URL}/${locale}/blog/${slug}`,
+      url: `${SITE_URL}/${locale}/blog/${post.slug}`,
     },
     twitter: {
       card: 'summary_large_image',
@@ -54,12 +60,23 @@ export default async function BlogPost({ params }: BlogPostProps) {
   const { locale, slug } = await params;
   setRequestLocale(locale);
   const post = await getPostBySlug(slug, locale);
-  const { prev, next, isPrevRandom, isNextRandom } = await getAdjacentPosts(slug, locale);
 
   if (!post) {
     notFound();
   }
 
+  // If the user accessed this post using a slug from a different locale
+  // (e.g. via the generic language switcher), redirect them to the correct localized slug URL
+  if (post.slug && post.slug !== slug) {
+    redirect(`/${locale}/blog/${post.slug}`);
+  }
+
+  const { prev, next, isPrevRandom, isNextRandom } = await getAdjacentPosts(post.slug, locale);
+
+  // Convert Lexical content into a plain string to estimate reading time roughly
+  // Extract headings for TOC
+  const headings = extractLexicalHeadings(post.content?.root || post.content);
+
   // Convert Lexical content into a plain string to estimate reading time roughly
   const rawTextContent = JSON.stringify(post.content);
 
@@ -81,6 +98,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
               alt={post.frontmatter.title}
               fill
               priority
+              quality={100}
               className="object-cover"
               sizes="100vw"
               style={{
@@ -88,7 +106,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
               }}
             />
           </div>
-          <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/40 to-transparent" />
+          <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/90 via-neutral-dark/40 to-transparent" />
 
           {/* Title overlay on image */}
           <div className="absolute inset-0 flex flex-col justify-end pb-16 md:pb-24">
@@ -105,8 +123,8 @@ export default async function BlogPost({ params }: BlogPostProps) {
                   {post.frontmatter.title}
                 </Heading>
                 <div className="flex flex-wrap items-center gap-6 text-white/80 text-sm md:text-base font-medium">
-                  <time dateTime={post.frontmatter.date}>
-                    {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                  <time dateTime={post.frontmatter.date} suppressHydrationWarning>
+                    {new Date(post.frontmatter.date).toLocaleDateString(locale || 'de', {
                       year: 'numeric',
                       month: 'long',
                       day: 'numeric',
@@ -142,8 +160,8 @@ export default async function BlogPost({ params }: BlogPostProps) {
               {post.frontmatter.title}
             </Heading>
             <div className="flex items-center gap-6 text-text-primary/80 font-medium">
-              <time dateTime={post.frontmatter.date}>
-                {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+              <time dateTime={post.frontmatter.date} suppressHydrationWarning>
+                {new Date(post.frontmatter.date).toLocaleDateString(locale || 'de', {
                   year: 'numeric',
                   month: 'long',
                   day: 'numeric',
@@ -224,10 +242,10 @@ export default async function BlogPost({ params }: BlogPostProps) {
             </div>
           </div>
 
-          {/* Right Column: Sticky Sidebar - Temporarily Hidden without ToC */}
+          {/* Right Column: Sticky Sidebar - TOC */}
           <aside className="sticky-narrative-sidebar hidden lg:block">
-            <div className="space-y-12">
-              {/* Future Payload Table of Contents Implementation */}
+            <div className="space-y-12 lg:sticky lg:top-32">
+              <TableOfContents headings={headings} locale={locale} />
             </div>
           </aside>
         </div>

app/[locale]/blog/page.tsx

@@ -73,7 +73,7 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
                 sizes="100vw"
                 priority
               />
-              <div className="absolute inset-0 image-overlay-gradient" />
+              <div className="absolute inset-0 bg-neutral-dark/20" />
             </>
           )}
 
@@ -84,12 +84,9 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
                 {featuredPost &&
                   (new Date(featuredPost.frontmatter.date) > new Date() ||
                     featuredPost.frontmatter.public === false) && (
-                    <Badge
-                      variant="neutral"
-                      className="border border-white/30 bg-transparent text-white/80 shadow-none"
-                    >
+                    <span className="px-2 py-0.5 border border-white/40 text-white/80 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold">
                       Draft Preview
-                    </Badge>
+                    </span>
                   )}
               </div>
               {featuredPost && (
@@ -156,66 +153,76 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
           </Reveal>
 
           {/* Grid for remaining posts */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-12">
+          <div className="grid grid-cols-1 gap-12">
             {remainingPosts.map((post, idx) => (
-              <Reveal key={post.slug} delay={idx * 100}>
-                <Link href={`/${locale}/blog/${post.slug}`} className="group block">
+              <Reveal key={post.slug} delay={idx * 50}>
+                <Link
+                  href={`/${locale}/blog/${post.slug}`}
+                  className="group block focus:outline-none"
+                >
                   <Card
                     tag="article"
-                    className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-2xl md:rounded-3xl overflow-hidden"
+                    className="relative flex flex-col justify-end border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl overflow-hidden min-h-[450px] md:min-h-[500px]"
                   >
                     {post.frontmatter.featuredImage && (
-                      <div className="relative h-48 md:h-72 overflow-hidden">
+                      <>
                         <Image
                           src={post.frontmatter.featuredImage.split('?')[0]}
                           alt={post.frontmatter.title}
                           fill
-                          className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
+                          className="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
                           style={{
                             objectPosition: `${post.frontmatter.focalX ?? 50}% ${post.frontmatter.focalY ?? 50}%`,
                           }}
-                          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                          sizes="(max-width: 768px) 100vw, 100vw"
+                          loading="lazy"
                         />
-                        <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                        <div className="absolute inset-0 bg-neutral-dark/10 group-hover:bg-neutral-dark/5 transition-colors duration-500" />
+                      </>
+                    )}
+
+                    <div className="relative z-10 w-full p-6 md:p-10 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/70 to-transparent flex flex-col pt-40">
+                      <div className="flex flex-wrap items-center gap-4 mb-4">
                         {post.frontmatter.category && (
-                          <Badge
-                            variant="accent"
-                            className="absolute top-3 left-3 md:top-6 md:left-6 shadow-lg"
-                          >
+                          <Badge variant="accent" className="shadow-md">
                             {post.frontmatter.category}
                           </Badge>
                         )}
+                        {(new Date(post.frontmatter.date) > new Date() ||
+                          post.frontmatter.public === false) && (
+                          <span className="px-2 py-0.5 border border-white/40 text-white/90 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold bg-neutral-dark/40 shadow-sm">
+                            Draft Preview
+                          </span>
+                        )}
                       </div>
-                    )}
-                    <div className="p-5 md:p-10 flex flex-col flex-1">
-                      <div className="flex items-center gap-3 text-[10px] md:text-sm font-bold text-primary/70 mb-2 md:mb-4 tracking-widest uppercase">
-                        <span>
-                          {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+
+                      <div className="flex items-center gap-3 text-xs md:text-sm font-bold text-white/80 mb-3 tracking-widest uppercase">
+                        <time dateTime={post.frontmatter.date} suppressHydrationWarning>
+                          {new Date(post.frontmatter.date).toLocaleDateString(locale || 'de', {
                             year: 'numeric',
                             month: 'long',
                             day: 'numeric',
                           })}
-                        </span>
-                        {(new Date(post.frontmatter.date) > new Date() ||
-                          post.frontmatter.public === false) && (
-                            <span className="px-1.5 py-0.5 border border-current rounded-sm text-[9px] md:text-xs">
-                              Draft
-                            </span>
-                          )}
+                        </time>
                       </div>
-                      <h3 className="text-lg md:text-2xl font-bold text-primary mb-3 md:mb-6 group-hover:text-accent-dark transition-colors line-clamp-3 md:line-clamp-4 leading-tight">
+
+                      <h3 className="text-xl md:text-3xl font-bold text-white mb-4 group-hover:text-accent transition-colors drop-shadow-md leading-tight max-w-4xl">
                         {post.frontmatter.title}
                       </h3>
-                      <p className="text-text-secondary text-sm md:text-lg line-clamp-3 md:line-clamp-4 mb-4 md:mb-8 leading-relaxed">
-                        {post.frontmatter.excerpt}
-                      </p>
-                      <div className="mt-auto pt-4 md:pt-8 border-t border-neutral-medium flex items-center justify-between">
-                        <span className="text-saturated text-sm md:text-base font-extrabold group-hover:text-accent-dark transition-colors">
+
+                      {post.frontmatter.excerpt && (
+                        <p className="text-white/90 text-sm md:text-lg line-clamp-3 mb-6 max-w-4xl drop-shadow-sm leading-relaxed">
+                          {post.frontmatter.excerpt}
+                        </p>
+                      )}
+
+                      <div className="mt-auto flex items-center justify-between border-t border-white/20 pt-6">
+                        <span className="text-accent text-sm md:text-base font-extrabold group-hover:text-white transition-colors">
                           {t('readMore')}
                         </span>
-                        <div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-primary-light flex items-center justify-center text-saturated group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300">
+                        <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-accent group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 backdrop-blur-sm border border-white/20">
                           <svg
-                            className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1"
+                            className="w-5 h-5 transition-transform group-hover:translate-x-1"
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24"

app/[locale]/contact/page.tsx

@@ -8,6 +8,7 @@ import { SITE_URL } from '@/lib/schema';
 import { getOGImageMetadata } from '@/lib/metadata';
 import { Suspense } from 'react';
 import ContactMap from '@/components/ContactMap';
+import ObfuscatedEmail from '@/components/ObfuscatedEmail';
 
 interface ContactPageProps {
   params: Promise<{
@@ -59,6 +60,21 @@ export default async function ContactPage({ params }: ContactPageProps) {
   const { locale } = await params;
   setRequestLocale(locale);
   const t = await getTranslations({ locale, namespace: 'Contact' });
+
+  // Get translated slug to redirect if user used incorrect static slug
+  const { headers } = await import('next/headers');
+  const headersList = await headers();
+  const urlPath = headersList.get('x-invoke-path') || '';
+  const currentSlug = urlPath.split('/').pop();
+
+  if (currentSlug) {
+    const contactSlugDe = locale === 'de' ? 'kontakt' : 'contact';
+    if (currentSlug !== contactSlugDe && (currentSlug === 'kontakt' || currentSlug === 'contact')) {
+      const { redirect } = await import('next/navigation');
+      redirect(`/${locale}/${contactSlugDe}`);
+    }
+  }
+
   return (
     <div className="flex flex-col min-h-screen bg-neutral-light">
       <JsonLd
@@ -189,12 +205,10 @@ export default async function ContactPage({ params }: ContactPageProps) {
                       <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">
                         {t('info.email')}
                       </h4>
-                      <a
-                        href="mailto:info@klz-cables.com"
+                      <ObfuscatedEmail
+                        email="info@klz-cables.com"
                         className="text-sm md:text-lg text-text-secondary hover:text-primary transition-colors font-medium touch-target"
-                      >
-                        info@klz-cables.com
-                      </a>
+                      />
                     </div>
                   </div>
                 </address>

app/[locale]/not-found.tsx

@@ -1,66 +1,137 @@
-'use client';
-import { useTranslations } from 'next-intl';
+import { getTranslations } from 'next-intl/server';
 import { Container, Button, Heading } from '@/components/ui';
 import Scribble from '@/components/Scribble';
-import { useEffect } from 'react';
-import { useAnalytics } from '@/components/analytics/useAnalytics';
-import { AnalyticsEvents } from '@/components/analytics/analytics-events';
+import { getPayload } from 'payload';
+import configPromise from '@payload-config';
+import { headers } from 'next/headers';
+import ClientNotFoundTracker from '@/components/analytics/ClientNotFoundTracker';
 
-export default function NotFound() {
-  const t = useTranslations('Error.notFound');
-  const { trackEvent } = useAnalytics();
+export default async function NotFound() {
+  const t = await getTranslations('Error.notFound');
 
-  useEffect(() => {
-    const errorUrl = typeof window !== 'undefined' ? window.location.pathname : 'unknown';
-    trackEvent(AnalyticsEvents.ERROR, {
-      type: '404_not_found',
-      path: errorUrl,
-    });
+  // Try to determine the requested path
+  const headersList = await headers();
+  const urlPath = headersList.get('x-invoke-path') || '';
 
-    // Explicitly send the 404 to Sentry so we have visibility into broken links
-    import('@sentry/nextjs').then((Sentry) => {
-      Sentry.withScope((scope) => {
-        scope.setTag('status_code', '404');
-        scope.setTag('path', errorUrl);
-        Sentry.captureMessage(`Route Not Found: ${errorUrl}`, 'warning');
-      });
-    });
-  }, [trackEvent]);
+  let suggestedUrl = null;
+  let suggestedLang = null;
+
+  // If we have a path, try to see if the last segment (slug) exists in ANY locale
+  if (urlPath) {
+    const slug = urlPath.split('/').filter(Boolean).pop();
+    if (slug) {
+      try {
+        const payload = await getPayload({ config: configPromise });
+
+        // Check posts
+        const postRes = await payload.find({
+          collection: 'posts',
+          where: { slug: { equals: slug } },
+          locale: 'all',
+          limit: 1,
+        });
+
+        // Check products
+        const productRes =
+          postRes.docs.length === 0
+            ? await payload.find({
+                collection: 'products',
+                where: { slug: { equals: slug } },
+                locale: 'all',
+                limit: 1,
+              })
+            : { docs: [] };
+
+        // Check pages
+        const pageRes =
+          postRes.docs.length === 0 && productRes.docs.length === 0
+            ? await payload.find({
+                collection: 'pages',
+                where: { slug: { equals: slug } },
+                locale: 'all',
+                limit: 1,
+              })
+            : { docs: [] };
+
+        const anyDoc = postRes.docs[0] || productRes.docs[0] || pageRes.docs[0];
+
+        if (anyDoc) {
+          // If the doc exists, we can figure out its native locale or
+          // offer the alternative locale (if we are in 'de', offer 'en')
+          const currentLocale = urlPath.startsWith('/en') ? 'en' : 'de';
+          const alternativeLocale = currentLocale === 'de' ? 'en' : 'de';
+
+          suggestedLang = alternativeLocale === 'de' ? 'Deutsch' : 'English';
+
+          // Reconstruct the URL for the alternative locale
+          const pathParts = urlPath.split('/').filter(Boolean);
+          if (pathParts.length > 0 && (pathParts[0] === 'en' || pathParts[0] === 'de')) {
+            pathParts[0] = alternativeLocale;
+          } else {
+            pathParts.unshift(alternativeLocale);
+          }
+          suggestedUrl = '/' + pathParts.join('/');
+        }
+      } catch (e) {
+        // Ignore Payload errors in 404
+      }
+    }
+  }
 
   return (
-    <Container className="relative py-24 flex flex-col items-center justify-center text-center min-h-[70vh] overflow-hidden">
-      {/* Industrial Background Element */}
-      <div className="absolute inset-0 -z-10 opacity-[0.03] pointer-events-none flex items-center justify-center">
-        <span className="text-[20rem] font-bold select-none">404</span>
-      </div>
+    <>
+      <ClientNotFoundTracker path={urlPath} />
+      <Container className="relative py-24 flex flex-col items-center justify-center text-center min-h-[70vh] overflow-hidden">
+        {/* Industrial Background Element */}
+        <div className="absolute inset-0 -z-10 opacity-[0.03] pointer-events-none flex items-center justify-center">
+          <span className="text-[20rem] font-bold select-none">404</span>
+        </div>
 
-      <div className="relative mb-8">
-        <Heading level={1} className="text-6xl md:text-8xl font-bold mb-2">
-          404
+        <div className="relative mb-8">
+          <Heading level={1} className="text-6xl md:text-8xl font-bold mb-2">
+            404
+          </Heading>
+          <Scribble
+            variant="circle"
+            className="w-[150%] h-[150%] -top-[25%] -left-[25%] text-accent/40"
+          />
+        </div>
+
+        <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-primary">
+          {t('title')}
         </Heading>
-        <Scribble
-          variant="circle"
-          className="w-[150%] h-[150%] -top-[25%] -left-[25%] text-accent/40"
-        />
-      </div>
 
-      <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-primary">
-        {t('title')}
-      </Heading>
+        <p className="text-text-secondary mb-10 max-w-md text-lg">{t('description')}</p>
 
-      <p className="text-white/60 mb-10 max-w-md text-lg">{t('description')}</p>
+        {suggestedUrl && (
+          <div className="mb-12 p-6 bg-accent/10 border border-accent/20 rounded-2xl animate-fade-in shadow-lg relative overflow-hidden group">
+            <div className="absolute inset-0 bg-accent/5 -skew-x-12 translate-x-full group-hover:translate-x-0 transition-transform duration-700" />
+            <div className="relative z-10">
+              <h3 className="text-primary font-bold mb-2 text-lg">
+                Did you mean to visit the {suggestedLang} version?
+              </h3>
+              <p className="text-text-secondary text-sm mb-4">
+                This page exists, but in another language.
+              </p>
+              <Button href={suggestedUrl} variant="accent" size="md" className="w-full sm:w-auto">
+                Go to {suggestedLang} Version
+              </Button>
+            </div>
+          </div>
+        )}
 
-      <div className="flex flex-col sm:flex-row gap-4">
-        <Button href="/" variant="accent" size="lg">
-          {t('cta')}
-        </Button>
-        <Button href="/contact" variant="outline" size="lg">
-          Contact Support
-        </Button>
-      </div>
+        <div className="flex flex-col sm:flex-row gap-4">
+          <Button href="/" variant={suggestedUrl ? 'outline' : 'accent'} size="lg">
+            {t('cta')}
+          </Button>
+          <Button href="/contact" variant={suggestedUrl ? 'ghost' : 'outline'} size="lg">
+            Contact Support
+          </Button>
+        </div>
 
-      {/* Decorative Industrial Line */}
-      <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-24 bg-gradient-to-t from-accent/50 to-transparent" />
-    </Container>
+        {/* Decorative Industrial Line */}
+        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-24 bg-gradient-to-t from-accent/50 to-transparent" />
+      </Container>
+    </>
   );
 }

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

@@ -14,7 +14,7 @@ import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { getProductOGImageMetadata } from '@/lib/metadata';
 import Image from 'next/image';
 import Link from 'next/link';
-import { notFound } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 import ProductEngagementTracker from '@/components/analytics/ProductEngagementTracker';
 import PayloadRichText from '@/components/PayloadRichText';
 
@@ -53,7 +53,7 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
       title: categoryTitle,
       description: categoryDesc,
       alternates: {
-        canonical: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}/${productSlug}`,
+        canonical: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}/${await mapFileSlugToTranslated(fileSlug, locale)}`,
         languages: {
           de: `${SITE_URL}/de/${await mapFileSlugToTranslated('products', 'de')}/${await mapFileSlugToTranslated(fileSlug, 'de')}`,
           en: `${SITE_URL}/en/${await mapFileSlugToTranslated('products', 'en')}/${await mapFileSlugToTranslated(fileSlug, 'en')}`,
@@ -75,11 +75,13 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
   const product = await getProductBySlug(productSlug, locale);
   if (!product) return {};
 
+  const currentLocalePath = await getLocalizedPath(locale);
+
   return {
     title: product.frontmatter.title,
     description: product.frontmatter.description,
     alternates: {
-      canonical: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}/${slug.join('/')}`,
+      canonical: `${SITE_URL}/${locale}/${currentLocalePath}`,
       languages: {
         de: `${SITE_URL}/de/${await getLocalizedPath('de')}`,
         en: `${SITE_URL}/en/${await getLocalizedPath('en')}`,
@@ -90,7 +92,7 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
       title: product.frontmatter.title,
       description: product.frontmatter.description,
       type: 'website',
-      url: `${SITE_URL}/${locale}/products/${slug.join('/')}`,
+      url: `${SITE_URL}/${locale}/${currentLocalePath}`,
       images: getProductOGImageMetadata(productSlug, product.frontmatter.title, locale),
     },
     twitter: {
@@ -114,7 +116,19 @@ export default async function ProductPage({ params }: ProductPageProps) {
     'high-voltage-cables',
     'solar-cables',
   ];
-  const fileSlug = await mapSlugToFileSlug(productSlug, locale);
+
+  const fileSlugs = await Promise.all(slug.map((s) => mapSlugToFileSlug(s, locale)));
+  const translatedSlugsForLocale = await Promise.all(
+    fileSlugs.map((fs) => mapFileSlugToTranslated(fs, locale)),
+  );
+
+  // If the requested slugs don't exactly match the translated slugs for the current locale
+  // (i.e. if the user used the static language switcher but kept the original locale's slugs)
+  if (slug.join('/') !== translatedSlugsForLocale.join('/')) {
+    redirect(`/${locale}/${productsSlug}/${translatedSlugsForLocale.join('/')}`);
+  }
+
+  const fileSlug = fileSlugs[fileSlugs.length - 1];
 
   if (categories.includes(fileSlug)) {
     const allProducts = await getAllProducts(locale);
@@ -125,11 +139,26 @@ export default async function ProductPage({ params }: ProductPageProps) {
       ? t(`categories.${categoryKey}.title`)
       : fileSlug;
 
-    const filteredProducts = allProducts.filter((p) =>
-      p.frontmatter.categories.some(
-        (cat) => cat.toLowerCase().replace(/\s+/g, '-') === fileSlug || cat === categoryTitle,
-      ),
-    );
+    const filteredProducts = allProducts.filter((p) => {
+      const firstCat = p.frontmatter.categories[0] || '';
+      const normalizedCat = firstCat.toLowerCase().replace(/\s+/g, '-');
+      let pFileSlug = 'low-voltage-cables';
+      if (normalizedCat === 'hochspannungskabel' || normalizedCat === 'high-voltage-cables')
+        pFileSlug = 'high-voltage-cables';
+      else if (
+        normalizedCat === 'mittelspannungskabel' ||
+        normalizedCat === 'medium-voltage-cables'
+      )
+        pFileSlug = 'medium-voltage-cables';
+      else if (
+        normalizedCat === 'solarkabel' ||
+        normalizedCat === 'solar-cables' ||
+        normalizedCat === 'solar'
+      )
+        pFileSlug = 'solar-cables';
+
+      return pFileSlug === fileSlug;
+    });
 
     const productsWithTranslatedSlugs = await Promise.all(
       filteredProducts.map(async (p) => ({
@@ -293,6 +322,8 @@ export default async function ProductPage({ params }: ProductPageProps) {
     }
   }
 
+  console.log(`[DEBUG PAGE] Slug: ${productSlug}, children count: ${descriptionChildren.length}`);
+
   const descriptionContent = {
     root: {
       ...product.content.root,
@@ -324,29 +355,31 @@ export default async function ProductPage({ params }: ProductPageProps) {
         categories={product.frontmatter.categories}
         sku={product.frontmatter.sku}
       />
-      <section className="relative pt-40 pb-24 overflow-hidden bg-primary-dark">
+      <section className="relative pt-28 md:pt-40 pb-12 md:pb-24 overflow-hidden bg-primary-dark">
         {/* Background Decorative Elements */}
         <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-accent/5 to-transparent pointer-events-none" />
         <div className="absolute -top-24 -right-24 w-96 h-96 bg-accent/10 rounded-full blur-3xl pointer-events-none" />
 
         <Container className="relative z-10">
           <div className="max-w-4xl animate-slide-up">
-            <nav className="flex items-center mb-12 text-white/40 text-[10px] font-black uppercase tracking-[0.2em]">
+            <nav className="flex flex-wrap items-center gap-y-1 mb-6 md:mb-12 text-white/40 text-[10px] font-black uppercase tracking-[0.2em]">
               <Link
                 href={`/${locale}/${productsSlug}`}
-                className="hover:text-accent transition-colors"
+                className="hover:text-accent transition-colors shrink-0"
               >
                 {t.has('breadcrumb') ? t('breadcrumb') : 'Products'}
               </Link>
-              <span className="mx-4 opacity-20">/</span>
+              <span className="mx-2 md:mx-4 opacity-20">/</span>
               <Link
                 href={`/${locale}/${productsSlug}/${categorySlug}`}
-                className="hover:text-accent transition-colors"
+                className="hover:text-accent transition-colors shrink-0 max-w-[140px] truncate"
               >
                 {categoryTitle}
               </Link>
-              <span className="mx-4 opacity-20">/</span>
-              <span className="text-white/90">{product.frontmatter.title}</span>
+              <span className="mx-2 md:mx-4 opacity-20">/</span>
+              <span className="text-white/90 truncate max-w-[140px] md:max-w-none">
+                {product.frontmatter.title}
+              </span>
             </nav>
 
             <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-12">
@@ -357,7 +390,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
                     {t('englishVersion')}
                   </div>
                 )}
-                <div className="flex flex-wrap gap-3 mb-8">
+                <div className="flex flex-wrap gap-2 mb-4 md:mb-8">
                   {product.frontmatter.categories.map((cat, idx) => (
                     <Badge
                       key={idx}
@@ -368,10 +401,10 @@ export default async function ProductPage({ params }: ProductPageProps) {
                     </Badge>
                   ))}
                 </div>
-                <Heading level={1} className="text-white mb-8 uppercase">
+                <Heading level={1} className="text-white mb-4 md:mb-8 uppercase">
                   {product.frontmatter.title}
                 </Heading>
-                <p className="text-xl md:text-2xl text-white/60 max-w-2xl leading-relaxed font-medium">
+                <p className="text-base md:text-xl lg:text-2xl text-white/60 max-w-2xl leading-relaxed font-medium">
                   {product.frontmatter.description}
                 </p>
               </div>
@@ -385,11 +418,11 @@ export default async function ProductPage({ params }: ProductPageProps) {
           {/* Large Product Image Section */}
           {product.frontmatter.images && product.frontmatter.images.length > 0 && (
             <div
-              className="relative -mt-32 mb-32 animate-slide-up"
+              className="relative md:-mt-32 mb-8 md:mb-32 animate-slide-up"
               style={{ animationDelay: '200ms' }}
             >
-              <div className="bg-white shadow-[0_32px_64px_-12px_rgba(0,0,0,0.1)] rounded-[48px] border border-neutral-dark/5 overflow-hidden p-12 md:p-20 lg:p-24">
-                <div className="relative w-full aspect-[21/9]">
+              <div className="bg-white shadow-[0_32px_64px_-12px_rgba(0,0,0,0.1)] rounded-[24px] md:rounded-[48px] border border-neutral-dark/5 overflow-hidden p-6 md:p-20 lg:p-24">
+                <div className="relative w-full aspect-[4/3] md:aspect-[21/9]">
                   <Image
                     src={product.frontmatter.images[0]}
                     alt={product.frontmatter.title}
@@ -424,10 +457,10 @@ export default async function ProductPage({ params }: ProductPageProps) {
             </div>
           )}
 
-          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20">
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-20">
             {/* Description Area Next to Sidebar */}
             <div className="lg:col-span-8">
-              <div className="max-w-none prose prose-primary prose-lg md:prose-xl mb-16 pb-16 border-b border-neutral-dark/5">
+              <div className="max-w-none prose prose-primary prose-base md:prose-lg xl:prose-xl mb-8 md:mb-16 pb-8 md:pb-16 border-b border-neutral-dark/5">
                 {descriptionChildren.length > 0 ? (
                   <PayloadRichText data={descriptionContent} />
                 ) : product.frontmatter.description ? (
@@ -435,6 +468,12 @@ export default async function ProductPage({ params }: ProductPageProps) {
                     {product.frontmatter.description}
                   </p>
                 ) : null}
+
+                {product.application?.root?.children?.length > 0 && (
+                  <div className="mt-12">
+                    <PayloadRichText data={product.application} />
+                  </div>
+                )}
               </div>
             </div>
 
@@ -443,7 +482,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
           </div>
 
           {/* Full-width Technical Data Below */}
-          <div className="mt-16 pt-16 border-t-0">
+          <div className="mt-8 md:mt-16 pt-8 md:pt-16 border-t-0">
             <div className="max-w-none prose prose-primary prose-lg md:prose-xl">
               <PayloadRichText data={technicalContent} />
             </div>
@@ -501,7 +540,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
           </div>
 
           {/* Related Products Section */}
-          <div className="mt-16 pt-16 border-t border-neutral-dark/5">
+          <div className="mt-10 md:mt-16 pt-10 md:pt-16 border-t border-neutral-dark/5">
             <RelatedProducts
               currentSlug={productSlug}
               categories={product.frontmatter.categories}

app/[locale]/products/page.tsx

@@ -1,5 +1,4 @@
 import Reveal from '@/components/Reveal';
-import Scribble from '@/components/Scribble';
 import { Badge, Button, Card, Container, Heading, Section } from '@/components/ui';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
@@ -95,7 +94,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
   return (
     <div className="flex flex-col min-h-screen bg-neutral-light">
       {/* Hero Section */}
-      <section className="relative min-h-[50vh] md:min-h-[70vh] flex items-center pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-primary-dark">
+      <section className="relative flex items-center pt-32 pb-16 md:pt-40 md:pb-24 overflow-hidden bg-primary-dark">
         <Container className="relative z-10">
           <div className="max-w-4xl animate-slide-up">
             <Badge
@@ -106,15 +105,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
             </Badge>
             <Heading level={1} className="text-white mb-4 md:mb-8">
               {t.rich('title', {
-                green: (chunks) => (
-                  <span className="relative inline-block">
-                    <span className="relative z-10 text-accent italic">{chunks}</span>
-                    <Scribble
-                      variant="circle"
-                      className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block"
-                    />
-                  </span>
-                ),
+                green: (chunks) => <span className="text-accent italic">{chunks}</span>,
               })}
             </Heading>
             <p className="text-lg md:text-xl text-white/70 leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
@@ -223,7 +214,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
               <div className="absolute top-0 right-0 w-1/2 h-full bg-accent/5 -skew-x-12 translate-x-1/4" />
               <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-6 md:gap-12">
                 <div className="max-w-2xl text-center lg:text-left">
-                  <h2 className="text-2xl md:text-5xl lg:text-6xl font-bold text-white mb-4 md:mb-8 tracking-tight">
+                  <h2 className="text-2xl md:text-4xl font-bold text-white mb-4 md:mb-8 tracking-tight">
                     {t('cta.title')}
                   </h2>
                   <p className="text-base md:text-xl text-white/70 leading-relaxed">

app/[locale]/team/page.tsx

@@ -122,12 +122,12 @@ export default async function TeamPage({ params }: TeamPageProps) {
               <Badge variant="accent" className="mb-4 md:mb-8">
                 {t('michael.role')}
               </Badge>
-              <Heading level={2} className="text-white mb-6 md:mb-10 text-3xl md:text-5xl">
+              <Heading level={2} className="text-white mb-6 md:mb-10 text-2xl md:text-4xl">
                 <span className="text-white">{t('michael.name')}</span>
               </Heading>
               <div className="relative mb-6 md:mb-12">
                 <div className="absolute -left-4 md:-left-8 top-0 bottom-0 w-1 md:w-1.5 bg-accent rounded-full" />
-                <p className="text-lg md:text-2xl font-bold italic leading-relaxed pl-5 md:pl-8 text-white/90">
+                <p className="text-base md:text-xl font-bold italic leading-relaxed pl-5 md:pl-8 text-white/90">
                   {t('michael.quote')}
                 </p>
               </div>
@@ -156,6 +156,7 @@ export default async function TeamPage({ params }: TeamPageProps) {
               alt={t('michael.name')}
               fill
               className="object-cover scale-105 hover:scale-100 transition-transform duration-1000"
+              quality={100}
               sizes="(max-width: 1024px) 100vw, 50vw"
             />
             <div className="absolute inset-0 bg-gradient-to-t from-primary-dark/60 lg:bg-gradient-to-r lg:from-primary-dark/20 to-transparent" />
@@ -225,6 +226,7 @@ export default async function TeamPage({ params }: TeamPageProps) {
               alt={t('klaus.name')}
               fill
               className="object-cover scale-105 hover:scale-100 transition-transform duration-1000"
+              quality={100}
               sizes="(max-width: 1024px) 100vw, 50vw"
             />
             <div className="absolute inset-0 bg-gradient-to-t from-white/60 lg:bg-gradient-to-l lg:from-primary-dark/20 to-transparent" />
@@ -235,12 +237,12 @@ export default async function TeamPage({ params }: TeamPageProps) {
               <Badge variant="saturated" className="mb-4 md:mb-8">
                 {t('klaus.role')}
               </Badge>
-              <Heading level={2} className="text-saturated mb-6 md:mb-10 text-3xl md:text-6xl">
+              <Heading level={2} className="text-saturated mb-6 md:mb-10 text-2xl md:text-4xl">
                 {t('klaus.name')}
               </Heading>
               <div className="relative mb-6 md:mb-12">
                 <div className="absolute -left-4 md:-left-8 top-0 bottom-0 w-1 md:w-1.5 bg-saturated rounded-full" />
-                <p className="text-lg md:text-3xl font-bold italic leading-relaxed pl-5 md:pl-8 text-text-secondary">
+                <p className="text-base md:text-xl font-bold italic leading-relaxed pl-5 md:pl-8 text-text-secondary">
                   {t('klaus.quote')}
                 </p>
               </div>

app/actions/contact.ts

@@ -72,6 +72,7 @@ export async function sendContactFormAction(formData: FormData) {
     ? `Product Inquiry: ${productName}`
     : 'New Contact Form Submission';
   const confirmationSubject = 'Thank you for your inquiry';
+  const isTestSubmission = email === 'testing@mintel.me';
 
   try {
     // 2a. Send notification to Mintel/Client
@@ -84,26 +85,30 @@ export async function sendContactFormAction(formData: FormData) {
       }),
     );
 
-    const notificationResult = await sendEmail({
-      replyTo: email,
-      subject: notificationSubject,
-      html: notificationHtml,
-    });
-
-    if (notificationResult.success) {
-      logger.info('Notification email sent successfully', {
-        messageId: notificationResult.messageId,
-      });
-    } else {
-      logger.error('Notification email FAILED', {
-        error: notificationResult.error,
+    if (!isTestSubmission) {
+      const notificationResult = await sendEmail({
+        replyTo: email,
         subject: notificationSubject,
-        email,
+        html: notificationHtml,
       });
-      services.errors.captureException(
-        new Error(`Notification email failed: ${notificationResult.error}`),
-        { action: 'sendContactFormAction_notification', email },
-      );
+
+      if (notificationResult.success) {
+        logger.info('Notification email sent successfully', {
+          messageId: notificationResult.messageId,
+        });
+      } else {
+        logger.error('Notification email FAILED', {
+          error: notificationResult.error,
+          subject: notificationSubject,
+          email,
+        });
+        services.errors.captureException(
+          new Error(`Notification email failed: ${notificationResult.error}`),
+          { action: 'sendContactFormAction_notification', email },
+        );
+      }
+    } else {
+      logger.info('Skipping notification email for test submission', { email });
     }
 
     // 2b. Send confirmation to Customer (branded as KLZ Cables)
@@ -115,26 +120,30 @@ export async function sendContactFormAction(formData: FormData) {
       }),
     );
 
-    const confirmationResult = await sendEmail({
-      to: email,
-      subject: confirmationSubject,
-      html: confirmationHtml,
-    });
-
-    if (confirmationResult.success) {
-      logger.info('Confirmation email sent successfully', {
-        messageId: confirmationResult.messageId,
-      });
-    } else {
-      logger.error('Confirmation email FAILED', {
-        error: confirmationResult.error,
-        subject: confirmationSubject,
+    if (!isTestSubmission) {
+      const confirmationResult = await sendEmail({
         to: email,
+        subject: confirmationSubject,
+        html: confirmationHtml,
       });
-      services.errors.captureException(
-        new Error(`Confirmation email failed: ${confirmationResult.error}`),
-        { action: 'sendContactFormAction_confirmation', email },
-      );
+
+      if (confirmationResult.success) {
+        logger.info('Confirmation email sent successfully', {
+          messageId: confirmationResult.messageId,
+        });
+      } else {
+        logger.error('Confirmation email FAILED', {
+          error: confirmationResult.error,
+          subject: confirmationSubject,
+          to: email,
+        });
+        services.errors.captureException(
+          new Error(`Confirmation email failed: ${confirmationResult.error}`),
+          { action: 'sendContactFormAction_confirmation', email },
+        );
+      }
+    } else {
+      logger.info('Skipping confirmation email for test submission', { email });
     }
 
     // Notify via Gotify (Internal)

app/api/ai-search/route.ts

@@ -0,0 +1,157 @@
+import { NextResponse, NextRequest } from 'next/server'; // Added NextRequest
+import { searchProducts } from '../../../src/lib/qdrant';
+import redis from '../../../src/lib/redis';
+import { z } from 'zod';
+import * as Sentry from '@sentry/nextjs';
+// Config and constants
+const RATE_LIMIT_POINTS = 5; // 5 requests
+const RATE_LIMIT_DURATION = 60 * 1; // per 1 minute
+
+// Removed requestSchema as it's replaced by direct parsing
+
+export async function POST(req: NextRequest) {
+  // Changed req type to NextRequest
+  try {
+    const { messages, visitorId, honeypot } = await req.json();
+
+    // 1. Basic Validation
+    if (!messages || !Array.isArray(messages) || messages.length === 0) {
+      return NextResponse.json({ error: 'Valid messages array is required' }, { status: 400 });
+    }
+
+    const latestMessage = messages[messages.length - 1].content;
+    const isBot = honeypot && honeypot.length > 0;
+
+    // Check if the input itself is obviously spam/too long
+    if (latestMessage.length > 500) {
+      return NextResponse.json({ error: 'Message too long' }, { status: 400 });
+    }
+
+    // 2. Honeypot check
+    if (isBot) {
+      console.warn('Honeypot triggered in AI search');
+      // Tarpit the bot
+      await new Promise((resolve) => setTimeout(resolve, 3000));
+      return NextResponse.json({
+        answerText: 'Vielen Dank für Ihre Anfrage.',
+        products: [],
+      });
+    }
+
+    // 3. Rate Limiting via Redis
+    try {
+      if (visitorId) {
+        const requestCount = await redis.incr(`ai_search_rate_limit:${visitorId}`);
+        if (requestCount === 1) {
+          await redis.expire(`ai_search_rate_limit:${visitorId}`, RATE_LIMIT_DURATION); // Use constant
+        }
+
+        if (requestCount > RATE_LIMIT_POINTS) {
+          // Use constant
+          return NextResponse.json(
+            {
+              error: 'Rate limit exceeded. Please try again later.',
+            },
+            { status: 429 },
+          );
+        }
+      }
+    } catch (redisError) {
+      // Renamed variable for clarity
+      console.error('Redis Rate Limiting Error:', redisError); // Changed to error for consistency
+      Sentry.captureException(redisError, { tags: { context: 'ai-search-rate-limit' } });
+      // Fail open if Redis is down
+    }
+
+    // 4. Fetch Context from Qdrant based on the latest message
+    let contextStr = '';
+    let foundProducts: any[] = [];
+
+    try {
+      const searchResults = await searchProducts(latestMessage, 5);
+
+      if (searchResults && searchResults.length > 0) {
+        const productDescriptions = searchResults
+          .filter((p) => p.payload?.type === 'product' || !p.payload?.type)
+          .map((p: any) => p.payload?.content)
+          .join('\n\n');
+
+        const knowledgeDescriptions = searchResults
+          .filter((p) => p.payload?.type === 'knowledge')
+          .map((p: any) => p.payload?.content)
+          .join('\n\n');
+
+        contextStr = `KATALOG & PRODUKTE:\n${productDescriptions}\n\nKABELWISSEN (Handbuch):\n${knowledgeDescriptions}`;
+
+        foundProducts = searchResults
+          .filter((p) => (p.payload?.type === 'product' || !p.payload?.type) && p.payload?.data)
+          .map((p: any) => p.payload?.data);
+      }
+    } catch (e) {
+      console.error('Qdrant Search Error:', e);
+      Sentry.captureException(e, { tags: { context: 'ai-search-qdrant' } });
+      // We can still proceed without context if Qdrant fails
+    }
+
+    // 5. Generate AI Response via OpenRouter (Mistral for DSGVO)
+    const systemPrompt = `Du bist ein professioneller und extrem kompetenter Sales-Engineer / Consultant der Firma "KLZ Cables".
+Deine Aufgabe ist es, Kunden und Interessenten bei der Auswahl von Mittelspannungskabeln, Starkstromkabeln und Infrastrukturausrüstung beratend zur Seite zu stehen.
+
+WICHTIGE REGELN:
+1. ANTWORTE IMMER IN DER SPRACHE DES BENUTZERS. Wenn der Benutzer Deutsch spricht, antworte auf Deutsch.
+2. Wenn der Kunde vage ist (z.B. "Ich will einen Windpark bauen"), würge ihn NICHT ab. Stelle stattdessen gezielte, professionelle Rückfragen als Berater (z.B. "Für einen Windpark benötigen wir einige Rahmendaten: Reden wir über die Parkverkabelung (Mittelspannung, z.B. 20kV oder 33kV) oder die Netzanbindung? Welche Querschnitte oder Ströme erwarten Sie?").
+3. Nutze das bereitgestellte KABELWISSEN und KATALOG-Gedächtnis unten, um deine Antworten zu fundieren.
+4. Bleibe stets professionell, lösungsorientiert und leicht technisch (Industrial Aesthetic). Du kannst humorvoll sein, wenn der Nutzer offensichtlich Quatsch fragt, aber lenke es immer elegant zurück zu Kabeln oder Energieinfrastruktur.
+5. Antworte in reinem Text (kein Markdown für die Antwort, es sei denn es sind einfache Absätze oder Listen).
+6. Wenn genügend Informationen vorhanden sind, präsentiere passende Kabel aus dem Katalog.
+7. Oute dich als Berater von KLZ Cables.
+
+VERFÜGBARER KONTEXT:
+${contextStr ? contextStr : 'Keine spezifischen Katalogdaten für diese Anfrage gefunden.'}
+`;
+
+    const openRouterKey = process.env.OPENROUTER_API_KEY;
+    if (!openRouterKey) {
+      throw new Error('OPENROUTER_API_KEY is not set');
+    }
+
+    const fetchRes = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${openRouterKey}`,
+        'Content-Type': 'application/json',
+        'HTTP-Referer': process.env.NEXT_PUBLIC_BASE_URL || 'https://klz-cables.com',
+        'X-Title': 'KLZ Cables Search AI',
+      },
+      body: JSON.stringify({
+        model: 'mistralai/mistral-large-2407',
+        temperature: 0.3,
+        messages: [
+          { role: 'system', content: systemPrompt },
+          ...messages.map((m: any) => ({
+            role: m.role,
+            content: typeof m.content === 'string' ? m.content : JSON.stringify(m.content),
+          })),
+        ],
+      }),
+    });
+
+    if (!fetchRes.ok) {
+      const errBody = await fetchRes.text();
+      throw new Error(`OpenRouter API Error: ${errBody}`);
+    }
+
+    const data = await fetchRes.json();
+    const text = data.choices[0].message.content;
+
+    // Return the AI's answer along with any found products
+    return NextResponse.json({
+      answerText: text,
+      products: foundProducts,
+    });
+  } catch (error) {
+    console.error('AI Search API Error:', error);
+    Sentry.captureException(error, { tags: { context: 'ai-search-api' } });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/health/cms/route.ts

@@ -1,9 +1,41 @@
 import { NextResponse } from 'next/server';
+import { getPayload } from 'payload';
+import configPromise from '@payload-config';
 
 export const dynamic = 'force-dynamic';
 
+/**
+ * Deep CMS Health Check
+ * Validates that Payload CMS can actually query the database.
+ * Used by post-deploy smoke tests to catch migration/schema issues.
+ */
 export async function GET() {
-  // Payload is embedded within the Next.js app, so if this route responds, the CMS is up.
-  // Further DB health checks can be implemented via Payload Local API later.
-  return NextResponse.json({ status: 'ok', message: 'Payload CMS is embedded.' }, { status: 200 });
+  const checks: Record<string, string> = {};
+
+  try {
+    const payload = await getPayload({ config: configPromise });
+    checks.init = 'ok';
+
+    // Verify each collection can be queried (catches missing locale tables, broken migrations)
+    const collections = ['posts', 'products', 'pages', 'media'] as const;
+    for (const collection of collections) {
+      try {
+        await payload.find({ collection, limit: 1, locale: 'en' });
+        checks[collection] = 'ok';
+      } catch (e: any) {
+        checks[collection] = `error: ${e.message?.substring(0, 100)}`;
+      }
+    }
+
+    const hasErrors = Object.values(checks).some((v) => v.startsWith('error'));
+    return NextResponse.json(
+      { status: hasErrors ? 'degraded' : 'ok', checks },
+      { status: hasErrors ? 503 : 200 },
+    );
+  } catch (e: any) {
+    return NextResponse.json(
+      { status: 'error', message: e.message?.substring(0, 200), checks },
+      { status: 503 },
+    );
+  }
 }

app/sitemap.ts

@@ -58,9 +58,24 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     for (const product of productsMetadata) {
       if (!product.frontmatter || !product.slug) continue;
 
-      const category =
-        product.frontmatter.categories[0]?.toLowerCase().replace(/\s+/g, '-') || 'other';
-      const translatedCategory = await mapFileSlugToTranslated(category, locale);
+      const firstCat = product.frontmatter.categories[0] || '';
+      const normalizedCat = firstCat.toLowerCase().replace(/\s+/g, '-');
+      let categoryFileSlug = 'low-voltage-cables';
+      if (normalizedCat === 'hochspannungskabel' || normalizedCat === 'high-voltage-cables')
+        categoryFileSlug = 'high-voltage-cables';
+      else if (
+        normalizedCat === 'mittelspannungskabel' ||
+        normalizedCat === 'medium-voltage-cables'
+      )
+        categoryFileSlug = 'medium-voltage-cables';
+      else if (
+        normalizedCat === 'solarkabel' ||
+        normalizedCat === 'solar-cables' ||
+        normalizedCat === 'solar'
+      )
+        categoryFileSlug = 'solar-cables';
+
+      const translatedCategory = await mapFileSlugToTranslated(categoryFileSlug, locale);
       const translatedSlug = await mapFileSlugToTranslated(product.slug, locale);
 
       sitemapEntries.push({

components/Footer.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import Image from 'next/image';
 import { useTranslations, useLocale } from 'next-intl';
+import { ShieldCheck, Leaf, Lock, Accessibility, Zap } from 'lucide-react';
 import { Container } from './ui';
 import { useAnalytics } from './analytics/useAnalytics';
 import { AnalyticsEvents } from './analytics/analytics-events';
@@ -15,14 +16,14 @@ export default function Footer() {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="bg-primary text-white py-24 relative overflow-hidden content-visibility-auto">
+    <footer className="bg-primary text-white py-14 md:py-24 relative overflow-hidden content-visibility-auto">
       <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
 
       <Container>
         <h2 className="sr-only">Footer Navigation</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-16 mb-20">
-          {/* Brand Column */}
-          <div className="lg:col-span-4 space-y-8">
+        <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-12 gap-10 md:gap-16 mb-12 md:mb-20">
+          {/* Brand Column – full width on mobile */}
+          <div className="col-span-2 md:col-span-2 lg:col-span-4 space-y-6 md:space-y-8">
             <Link
               href={`/${locale}`}
               className="inline-block group"
@@ -67,9 +68,9 @@ export default function Footer() {
             </div>
           </div>
 
-          {/* Links Columns */}
-          <div className="lg:col-span-2">
-            <h3 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+          {/* Legal Column */}
+          <div className="col-span-1 lg:col-span-2">
+            <h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
               {t('legal')}
             </h3>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
@@ -121,8 +122,9 @@ export default function Footer() {
             </ul>
           </div>
 
-          <div className="lg:col-span-2">
-            <h3 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+          {/* Company Column */}
+          <div className="col-span-1 lg:col-span-2">
+            <h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
               {t('company')}
             </h3>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
@@ -189,9 +191,9 @@ export default function Footer() {
             </ul>
           </div>
 
-          {/* Recent Posts Column */}
-          <div className="lg:col-span-4">
-            <h3 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+          {/* Recent Posts Column – full width on mobile */}
+          <div className="col-span-2 md:col-span-2 lg:col-span-4">
+            <h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
               {t('recentPosts')}
             </h3>
             <ul className="space-y-6 list-none m-0 p-0">
@@ -242,7 +244,7 @@ export default function Footer() {
           </div>
         </div>
 
-        <div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/70 text-xs md:text-sm font-medium">
+        <div className="pt-8 md:pt-12 border-t border-white/10 flex flex-row justify-between items-center gap-4 text-white/70 text-xs md:text-sm font-medium">
           <p>{t('copyright', { year: currentYear })}</p>
           <div className="flex gap-8">
             <Link
@@ -275,6 +277,48 @@ export default function Footer() {
             </Link>
           </div>
         </div>
+
+        {/* Brand & Quality Sub-Footer */}
+        <div className="pt-8 mt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6 text-white/40 text-[10px] sm:text-xs">
+          <div>
+            <a
+              href="https://mintel.me"
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() =>
+                trackEvent(AnalyticsEvents.LINK_CLICK, {
+                  target: 'mintel_agency',
+                  location: 'sub_footer',
+                })
+              }
+              className="hover:text-white/80 transition-colors flex items-center gap-1.5"
+            >
+              Website entwickelt von Marc Mintel
+            </a>
+          </div>
+          <div className="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-3">
+            <div className="flex items-center gap-1.5" title="SSL Secured">
+              <ShieldCheck className="w-3.5 h-3.5" />
+              <span>SSL Secured</span>
+            </div>
+            <div className="flex items-center gap-1.5" title="Green Hosting">
+              <Leaf className="w-3.5 h-3.5" />
+              <span>Green Hosting</span>
+            </div>
+            <div className="flex items-center gap-1.5" title="DSGVO Compliant">
+              <Lock className="w-3.5 h-3.5" />
+              <span>DSGVO Compliant</span>
+            </div>
+            <div className="flex items-center gap-1.5" title="WCAG">
+              <Accessibility className="w-3.5 h-3.5" />
+              <span>WCAG</span>
+            </div>
+            <div className="flex items-center gap-1.5" title="PageSpeed 90+">
+              <Zap className="w-3.5 h-3.5" />
+              <span>PageSpeed 90+</span>
+            </div>
+          </div>
+        </div>
       </Container>
     </footer>
   );

components/Header.tsx

@@ -9,6 +9,8 @@ import { useEffect, useState, useRef } from 'react';
 import { cn } from './ui';
 import { useAnalytics } from './analytics/useAnalytics';
 import { AnalyticsEvents } from './analytics/analytics-events';
+import { Search } from 'lucide-react';
+import { AISearchResults } from './search/AISearchResults';
 
 export default function Header() {
   const t = useTranslations('Navigation');
@@ -16,6 +18,7 @@ export default function Header() {
   const { trackEvent } = useAnalytics();
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
   const mobileMenuRef = useRef<HTMLDivElement>(null);
 
   // Extract locale from pathname
@@ -141,7 +144,8 @@ export default function Header() {
     {
       'bg-primary/95 backdrop-blur-md md:bg-transparent py-3 md:py-8 shadow-2xl md:shadow-none':
         isHomePage && !isScrolled && !isMobileMenuOpen,
-      'bg-primary py-3 md:py-4 shadow-2xl': !isHomePage || isScrolled || isMobileMenuOpen,
+      'bg-primary/90 backdrop-blur-md py-3 md:py-4 shadow-2xl':
+        !isHomePage || isScrolled || isMobileMenuOpen,
     },
   );
 
@@ -152,9 +156,7 @@ export default function Header() {
     <>
       <header className={headerClass} style={{ animationDuration: '800ms' }}>
         <div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
-          <div
-            className="flex-shrink-0 group touch-target fill-mode-both"
-          >
+          <div className="flex-shrink-0 group touch-target fill-mode-both">
             <Link
               href={`/${currentLocale}`}
               onClick={() =>
@@ -274,6 +276,19 @@ export default function Header() {
               <div
                 className="animate-in fade-in zoom-in-95 fill-mode-both"
                 style={{ animationDuration: '600ms', animationDelay: '700ms' }}
+              >
+                <button
+                  onClick={() => setIsSearchOpen(true)}
+                  className="hover:text-accent transition-colors p-2"
+                  aria-label="Search"
+                >
+                  <Search className="w-5 h-5 md:w-6 md:h-6" />
+                </button>
+              </div>
+
+              <div
+                className="animate-in fade-in zoom-in-95 fill-mode-both"
+                style={{ animationDuration: '600ms', animationDelay: '800ms' }}
               >
                 <Button
                   href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`}
@@ -336,115 +351,140 @@ export default function Header() {
             </button>
           </div>
         </div>
+      </header>
 
-        {/* Mobile Menu Overlay */}
-        <div
-          className={cn(
-            'fixed inset-0 bg-primary z-[60] lg:hidden transition-all duration-500 ease-in-out flex flex-col',
-            isMobileMenuOpen
-              ? 'opacity-100 translate-y-0'
-              : 'opacity-0 -translate-y-full pointer-events-none',
-          )}
-          id="mobile-menu"
-          role="dialog"
-          aria-modal="true"
-          aria-label={t('menu')}
-          ref={mobileMenuRef}
-          inert={isMobileMenuOpen ? undefined : true}
-        >
-          <nav className="flex-grow flex flex-col justify-center items-center p-8 space-y-8">
-            {menuItems.map((item, idx) => (
-              <div
-                key={item.href}
-                className={cn(
-                  'transition-all duration-500 transform',
-                  isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8',
-                )}
-                style={{ transitionDelay: `${isMobileMenuOpen ? 200 + idx * 80 : 0}ms` }}
-              >
-                <Link
-                  href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
-                  aria-current={
-                    (
-                      item.href === '/'
-                        ? pathname === `/${currentLocale}` || pathname === '/'
-                        : pathname.startsWith(`/${currentLocale}${item.href}`)
-                    )
-                      ? 'page'
-                      : undefined
-                  }
-                  onClick={() => {
-                    setIsMobileMenuOpen(false);
-                    trackEvent(AnalyticsEvents.LINK_CLICK, {
-                      label: item.label,
-                      href: item.href,
-                      location: 'mobile_menu',
-                    });
-                  }}
-                  className={cn(
-                    'text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4',
-                    (item.href === '/'
-                      ? pathname === `/${currentLocale}` || pathname === '/'
-                      : pathname.startsWith(`/${currentLocale}${item.href}`)) && 'text-accent',
-                  )}
-                >
-                  {item.label}
-                </Link>
-              </div>
-            ))}
-
+      {/* Mobile Menu Overlay */}
+      <div
+        className={cn(
+          'fixed inset-0 bg-primary/95 backdrop-blur-3xl z-[60] lg:hidden transition-all duration-500 ease-in-out flex flex-col',
+          isMobileMenuOpen
+            ? 'opacity-100 translate-y-0'
+            : 'opacity-0 -translate-y-full pointer-events-none',
+        )}
+        id="mobile-menu"
+        role="dialog"
+        aria-modal="true"
+        aria-label={t('menu')}
+        ref={mobileMenuRef}
+        inert={isMobileMenuOpen ? undefined : true}
+      >
+        {/* Close Button inside overlay */}
+        <div className="flex justify-end p-6 pt-8">
+          <button
+            className="touch-target p-2 rounded-xl bg-white/10 border border-white/20 text-white hover:bg-white/20 transition-all duration-300"
+            aria-label={t('toggleMenu')}
+            onClick={() => {
+              setIsMobileMenuOpen(false);
+              trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                type: 'mobile_menu',
+                action: 'close',
+              });
+            }}
+          >
+            <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+        <nav className="flex-grow flex flex-col justify-center items-center p-8 space-y-8">
+          {menuItems.map((item, idx) => (
             <div
+              key={item.href}
               className={cn(
-                'pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8 transition-all duration-500',
+                'transition-all duration-500 transform',
                 isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8',
               )}
-              style={{ transitionDelay: isMobileMenuOpen ? '600ms' : '0ms' }}
+              style={{ transitionDelay: `${isMobileMenuOpen ? 200 + idx * 80 : 0}ms` }}
             >
-              <div className="flex items-center space-x-8 text-lg md:text-xl font-extrabold tracking-widest uppercase text-white">
-                <div>
-                  <Link
-                    href={getPathForLocale('en')}
-                    className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-80'}`}
-                  >
-                    EN
-                  </Link>
-                </div>
-                <div className="w-px h-6 bg-white/30" />
-                <div>
-                  <Link
-                    href={getPathForLocale('de')}
-                    className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-80'}`}
-                  >
-                    DE
-                  </Link>
-                </div>
-              </div>
+              <Link
+                href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                aria-current={
+                  (
+                    item.href === '/'
+                      ? pathname === `/${currentLocale}` || pathname === '/'
+                      : pathname.startsWith(`/${currentLocale}${item.href}`)
+                  )
+                    ? 'page'
+                    : undefined
+                }
+                onClick={() => {
+                  setIsMobileMenuOpen(false);
+                  trackEvent(AnalyticsEvents.LINK_CLICK, {
+                    label: item.label,
+                    href: item.href,
+                    location: 'mobile_menu',
+                  });
+                }}
+                className={cn(
+                  'text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4',
+                  (item.href === '/'
+                    ? pathname === `/${currentLocale}` || pathname === '/'
+                    : pathname.startsWith(`/${currentLocale}${item.href}`)) && 'text-accent',
+                )}
+              >
+                {item.label}
+              </Link>
+            </div>
+          ))}
 
-              <div className="w-full max-w-xs">
-                <Button
-                  href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`}
-                  variant="accent"
-                  size="lg"
-                  className="w-full py-6 text-lg md:text-xl shadow-2xl hover:scale-105 transition-transform"
+          <div
+            className={cn(
+              'pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8 transition-all duration-500',
+              isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8',
+            )}
+            style={{ transitionDelay: isMobileMenuOpen ? '600ms' : '0ms' }}
+          >
+            <div className="flex items-center space-x-8 text-lg md:text-xl font-extrabold tracking-widest uppercase text-white">
+              <div>
+                <Link
+                  href={getPathForLocale('en')}
+                  className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-80'}`}
                 >
-                  {t('contact')}
-                </Button>
+                  EN
+                </Link>
+              </div>
+              <div className="w-px h-6 bg-white/30" />
+              <div>
+                <Link
+                  href={getPathForLocale('de')}
+                  className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-80'}`}
+                >
+                  DE
+                </Link>
               </div>
             </div>
 
-            {/* Bottom Branding */}
-            <div
-              className={cn(
-                'p-12 flex justify-center transition-all duration-700',
-                isMobileMenuOpen ? 'opacity-20 scale-100' : 'opacity-0 scale-75',
-              )}
-              style={{ transitionDelay: isMobileMenuOpen ? '800ms' : '0ms' }}
-            >
-              <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
+            <div className="w-full max-w-xs">
+              <Button
+                href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`}
+                variant="accent"
+                size="lg"
+                className="w-full py-6 text-lg md:text-xl shadow-2xl hover:scale-105 transition-transform"
+              >
+                {t('contact')}
+              </Button>
             </div>
-          </nav>
-        </div>
-      </header>
+          </div>
+
+          {/* Bottom Branding */}
+          <div
+            className={cn(
+              'p-12 flex justify-center transition-all duration-700',
+              isMobileMenuOpen ? 'opacity-20 scale-100' : 'opacity-0 scale-75',
+            )}
+            style={{ transitionDelay: isMobileMenuOpen ? '800ms' : '0ms' }}
+          >
+            <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
+          </div>
+        </nav>
+      </div>
+
+      <AISearchResults isOpen={isSearchOpen} onClose={() => setIsSearchOpen(false)} />
     </>
   );
 }

components/ObfuscatedEmail.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+
+interface ObfuscatedEmailProps {
+  email: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * A component that helps protect email addresses from simple spambots.
+ * It uses client-side mounting to render the actual email address,
+ * making it harder for static crawlers to harvest.
+ */
+export default function ObfuscatedEmail({ email, className = '', children }: ObfuscatedEmailProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    // Show a placeholder or obscured version during SSR
+    return (
+      <span className={className} aria-hidden="true">
+        {children || email.replace('@', ' [at] ').replace(/\./g, ' [dot] ')}
+      </span>
+    );
+  }
+
+  // Once mounted on the client, render the real mailto link
+  return (
+    <a href={`mailto:${email}`} className={className}>
+      {children || email}
+    </a>
+  );
+}

components/ObfuscatedPhone.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+
+interface ObfuscatedPhoneProps {
+  phone: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * A component that helps protect phone numbers from simple spambots.
+ * It stays obscured during SSR and hydrates into a functional tel: link on the client.
+ */
+export default function ObfuscatedPhone({ phone, className = '', children }: ObfuscatedPhoneProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Format phone number for tel: link (remove spaces, etc.)
+  const telLink = `tel:${phone.replace(/\s+/g, '')}`;
+
+  if (!mounted) {
+    // Show a placeholder or obscured version during SSR
+    // e.g. +49 881 925 [at] 37298
+    const obscured = phone.replace(/(\d{3})(\d{3})$/, ' $1...$2');
+    return (
+      <span className={className} aria-hidden="true">
+        {children || obscured}
+      </span>
+    );
+  }
+
+  return (
+    <a href={telLink} className={className}>
+      {children || phone}
+    </a>
+  );
+}

components/PayloadRichText.tsx

@@ -1,7 +1,7 @@
 import { defaultJSXConverters, RichText } from '@payloadcms/richtext-lexical/react';
 import type { JSXConverters } from '@payloadcms/richtext-lexical/react';
 import Image from 'next/image';
-import { Suspense } from 'react';
+import { Suspense, Fragment } from 'react';
 
 // Import all custom React components that were previously mapped via Markdown
 import StickyNarrative from '@/components/blog/StickyNarrative';
@@ -24,6 +24,8 @@ import Reveal from '@/components/Reveal';
 import { Badge, Container, Heading, Section, Card } from '@/components/ui';
 import TrackedLink from '@/components/analytics/TrackedLink';
 import { useLocale } from 'next-intl';
+import ObfuscatedEmail from '@/components/ObfuscatedEmail';
+import ObfuscatedPhone from '@/components/ObfuscatedPhone';
 
 import HomeHero from '@/components/home/Hero';
 import ProductCategories from '@/components/home/ProductCategories';
@@ -36,96 +38,246 @@ import GallerySection from '@/components/home/GallerySection';
 import VideoSection from '@/components/home/VideoSection';
 import CTA from '@/components/home/CTA';
 
+/**
+ * Splits a text string on \n and intersperses <br /> elements.
+ * This is needed because Lexical stores newlines as literal \n characters inside
+ * text nodes (e.g. dash-lists typed in the editor), but HTML collapses whitespace.
+ */
+function textWithLineBreaks(text: string, key: string) {
+  const parts = text.split('\n');
+  if (parts.length === 1) return text;
+  return parts.map((part, i) => (
+    <Fragment key={`${key}-${i}`}>
+      {part}
+      {i < parts.length - 1 && <br />}
+    </Fragment>
+  ));
+}
+
 const jsxConverters: JSXConverters = {
   ...defaultJSXConverters,
-  // Let the default converters handle text nodes to preserve valid formatting
-  // If the text node contains raw HTML (from messy migrations), render it as HTML instead of escaping it
+  // Handle Lexical linebreak nodes (explicit shift+enter)
+  linebreak: () => <br />,
+  // Custom text converter: preserve \n inside text nodes as <br /> and obfuscate emails
   text: ({ node }: any) => {
-    const text = node.text;
-    // Handle markdown-style lists embedded in text nodes from Markdown migration
-    if (text && text.includes('\n- ')) {
-      const parts = text.split('\n- ').filter((p: string) => p.trim() !== '');
-      // If first part doesn't start with "- ", it's a prefix paragraph
-      const startsWithDash = text.trimStart().startsWith('- ');
-      const prefix = startsWithDash ? null : parts.shift();
-      return (
-        <>
-          {prefix && (
-            <span dangerouslySetInnerHTML={prefix.includes('<') ? { __html: prefix } : undefined}>
-              {!prefix.includes('<') ? prefix : undefined}
-            </span>
-          )}
-          <ul className="list-disc pl-6 my-4 space-y-2">
-            {parts.map((item: string, i: number) => {
-              const cleanItem = item.trim();
-              if (cleanItem.includes('<')) {
-                return <li key={i} dangerouslySetInnerHTML={{ __html: cleanItem }} />;
-              }
-              return <li key={i}>{cleanItem}</li>;
-            })}
-          </ul>
-        </>
-      );
+    let content: React.ReactNode = node.text || '';
+    // Split newlines first
+    if (typeof content === 'string' && content.includes('\n')) {
+      content = textWithLineBreaks(content, `t-${(node.text || '').slice(0, 8)}`);
     }
 
-    if (text && (text.includes('<') || text.includes('data-start'))) {
-      return <span dangerouslySetInnerHTML={{ __html: text }} />;
-    }
-
-    // Handle markdown-style links [text](url) from Markdown migration
-    if (text && /\[([^\]]+)\]\(([^)]+)\)/.test(text)) {
-      const parts: React.ReactNode[] = [];
-      const remaining = text;
-      let key = 0;
-      const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
-      let match;
-      let lastIndex = 0;
-      while ((match = linkRegex.exec(remaining)) !== null) {
-        if (match.index > lastIndex) {
-          parts.push(<span key={key++}>{remaining.slice(lastIndex, match.index)}</span>);
+    // Obfuscate emails in text content
+    if (typeof content === 'string' && content.includes('@')) {
+      const emailRegex = /([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/g;
+      const parts = content.split(emailRegex);
+      content = parts.map((part, i) => {
+        if (part.match(emailRegex)) {
+          return <ObfuscatedEmail key={`e-${i}`} email={part} />;
         }
-        parts.push(
-          <a
-            key={key++}
-            href={match[2]}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary underline decoration-primary/30 hover:decoration-primary transition-colors"
-          >
-            {match[1]}
-          </a>,
-        );
-        lastIndex = match.index + match[0].length;
-      }
-      if (lastIndex < remaining.length) {
-        parts.push(<span key={key++}>{remaining.slice(lastIndex)}</span>);
-      }
-      return <>{parts}</>;
+        return part;
+      });
     }
 
-    // Handle newlines in text nodes — convert to <br> for proper line breaks
-    if (text && text.includes('\n')) {
-      const lines = text.split('\n');
+    // Obfuscate phone numbers in text content (simple pattern for +XX XXX ...)
+    if (typeof content === 'string' && content.match(/\+\d+/)) {
+      const phoneRegex = /(\+\d{1,4}[\d\s-]{5,15})/g;
+      const parts = content.split(phoneRegex);
+      content = parts.map((part, i) => {
+        if (part.match(phoneRegex)) {
+          return <ObfuscatedPhone key={`p-${i}`} phone={part} />;
+        }
+        return part;
+      });
+    }
+
+    // Handle array content (from previous mappings)
+    if (Array.isArray(content)) {
+      content = content.map((item, idx) => {
+        if (typeof item === 'string') {
+          // Re-apply phone regex to strings in array
+          const phoneRegex = /(\+\d{1,4}[\d\s-]{5,15})/g;
+          if (item.match(phoneRegex)) {
+            const parts = item.split(phoneRegex);
+            return parts.map((part, i) => {
+              if (part.match(phoneRegex)) {
+                return <ObfuscatedPhone key={`p-${idx}-${i}`} phone={part} />;
+              }
+              return part;
+            });
+          }
+        }
+        return item;
+      });
+    }
+
+    // Apply Lexical formatting flags
+    if (node.format) {
+      if (node.format & 1) content = <strong>{content}</strong>;
+      if (node.format & 2) content = <em>{content}</em>;
+      if (node.format & 8) content = <u>{content}</u>;
+      if (node.format & 4) content = <s>{content}</s>;
+      if (node.format & 16)
+        content = (
+          <code className="px-1.5 py-0.5 bg-neutral-100 rounded text-sm font-mono text-primary">
+            {content}
+          </code>
+        );
+      if (node.format & 32) content = <sub>{content}</sub>;
+      if (node.format & 64) content = <sup>{content}</sup>;
+    }
+    return <>{content}</>;
+  },
+  // Use div instead of p for paragraphs to allow nested block elements (like the lists above)
+  paragraph: ({ node, nodesToJSX }: any) => {
+    return (
+      <div className="mb-6 leading-relaxed text-text-secondary">
+        {nodesToJSX({ nodes: node.children })}
+      </div>
+    );
+  },
+  // Scale headings to prevent multiple H1s (H1 -> H2, etc) and style natively
+  heading: ({ node, nodesToJSX }: any) => {
+    const children = nodesToJSX({ nodes: node.children });
+    const tag = node?.tag;
+
+    // Extract text to generate an ID for the TOC
+    // Lexical children might contain various nodes; we need a plain text representation
+    const textContent = node.children ? node.children.map((c: any) => c.text || '').join('') : '';
+    const id = textContent
+      ? textContent
+          .toLowerCase()
+          .replace(/ä/g, 'ae')
+          .replace(/ö/g, 'oe')
+          .replace(/ü/g, 'ue')
+          .replace(/ß/g, 'ss')
+          .replace(/[*_`]/g, '')
+          .replace(/[^\w\s-]/g, '')
+          .replace(/\s+/g, '-')
+          .replace(/-+/g, '-')
+          .replace(/^-+|-+$/g, '')
+      : undefined;
+
+    if (tag === 'h1')
       return (
-        <>
-          {lines.map((line: string, i: number) => (
-            <span key={i}>
-              {line}
-              {i < lines.length - 1 && <br />}
-            </span>
-          ))}
-        </>
+        <h2
+          id={id}
+          className="text-2xl md:text-3xl font-bold mt-10 mb-5 text-text-primary scroll-mt-24"
+        >
+          {children}
+        </h2>
+      );
+    if (tag === 'h2')
+      return (
+        <h3
+          id={id}
+          className="text-xl md:text-2xl font-bold mt-8 mb-4 text-text-primary scroll-mt-24"
+        >
+          {children}
+        </h3>
+      );
+    if (tag === 'h3')
+      return (
+        <h4
+          id={id}
+          className="text-lg md:text-xl font-bold mt-6 mb-3 text-text-primary scroll-mt-24"
+        >
+          {children}
+        </h4>
+      );
+    if (tag === 'h4')
+      return (
+        <h5
+          id={id}
+          className="text-lg md:text-xl font-bold mt-6 mb-4 text-text-primary scroll-mt-24"
+        >
+          {children}
+        </h5>
+      );
+    if (tag === 'h5')
+      return (
+        <h6
+          id={id}
+          className="text-base md:text-lg font-bold mt-6 mb-4 text-text-primary scroll-mt-24"
+        >
+          {children}
+        </h6>
+      );
+    return (
+      <h6 id={id} className="text-base font-bold mt-6 mb-4 text-text-primary scroll-mt-24">
+        {children}
+      </h6>
+    );
+  },
+  list: ({ node, nodesToJSX }: any) => {
+    const children = nodesToJSX({ nodes: node.children });
+    if (node?.listType === 'number') {
+      return (
+        <ol className="list-decimal pl-6 my-6 space-y-2 text-text-secondary marker:text-primary marker:font-bold">
+          {children}
+        </ol>
+      );
+    }
+    if (node?.listType === 'check') {
+      return <ul className="list-none pl-0 my-6 space-y-2 text-text-secondary">{children}</ul>;
+    }
+    return (
+      <ul className="list-disc pl-6 my-6 space-y-2 text-text-secondary marker:text-primary">
+        {children}
+      </ul>
+    );
+  },
+  listitem: ({ node, nodesToJSX }: any) => {
+    const children = nodesToJSX({ nodes: node.children });
+    if (node?.checked != null) {
+      return (
+        <li className="flex items-start gap-3 mb-2 leading-relaxed">
+          <input
+            type="checkbox"
+            checked={node.checked}
+            readOnly
+            className="mt-1.5 w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded shrink-0"
+          />
+          <div className="flex-1">{children}</div>
+        </li>
+      );
+    }
+    return <li className="mb-2 leading-relaxed block">{children}</li>;
+  },
+  quote: ({ node, nodesToJSX }: any) => {
+    const children = nodesToJSX({ nodes: node.children });
+    return (
+      <blockquote className="border-l-4 border-primary bg-primary/5 rounded-r-2xl pl-6 py-4 my-8 italic text-text-secondary shadow-sm">
+        {children}
+      </blockquote>
+    );
+  },
+  link: ({ node, nodesToJSX }: any) => {
+    const children = nodesToJSX({ nodes: node.children });
+    // Handling Payload CMS link nodes
+    const href = node?.fields?.url || node?.url || '#';
+    const newTab = node?.fields?.newTab || node?.newTab;
+
+    if (href.startsWith('mailto:')) {
+      const email = href.replace('mailto:', '');
+      return (
+        <ObfuscatedEmail
+          email={email}
+          className="text-primary no-underline hover:underline font-medium transition-colors"
+        />
       );
     }
 
-    if (node.format === 1) return <strong>{text}</strong>;
-    if (node.format === 2) return <em>{text}</em>;
-    return <span>{text}</span>;
+    return (
+      <a
+        href={href}
+        target={newTab ? '_blank' : undefined}
+        rel={newTab ? 'noopener noreferrer' : undefined}
+        className="text-primary no-underline hover:underline font-medium transition-colors"
+      >
+        {children}
+      </a>
+    );
   },
-  // Scale headings to prevent multiple H1s (H1 -> H2, etc)
-  h1: ({ children }: any) => <h2 className="text-3xl md:text-4xl font-bold my-6">{children}</h2>,
-  h2: ({ children }: any) => <h3 className="text-2xl md:text-3xl font-bold my-5">{children}</h3>,
-  h3: ({ children }: any) => <h4 className="text-xl md:text-2xl font-bold my-4">{children}</h4>,
 
   blocks: {
     // ... preserved existing blocks ...
@@ -170,10 +322,10 @@ const jsxConverters: JSXConverters = {
       />
     ),
     technicalGrid: ({ node }: any) => (
-      <TechnicalGrid title={node.fields.title} items={node.fields.items} />
+      <TechnicalGrid title={node?.fields?.title} items={node?.fields?.items} />
     ),
     'block-technicalGrid': ({ node }: any) => {
-      console.log('[PayloadRichText] Rendering block-technicalGrid:', node.fields.title);
+      if (!node?.fields) return null;
       return <TechnicalGrid title={node.fields.title} items={node.fields.items} />;
     },
     highlightBox: ({ node }: any) => (
@@ -246,20 +398,23 @@ const jsxConverters: JSXConverters = {
         {node.fields.title}
       </SplitHeading>
     ),
-    productTabs: ({ node }: any) => (
-      <ProductTabs
-        technicalData={
-          <ProductTechnicalData
-            data={{
-              technicalItems: node.fields.technicalItems,
-              voltageTables: node.fields.voltageTables,
-            }}
-          />
-        }
-      >
-        <></>
-      </ProductTabs>
-    ),
+    productTabs: ({ node }: any) => {
+      if (!node?.fields) return null;
+      return (
+        <ProductTabs
+          technicalData={
+            <ProductTechnicalData
+              data={{
+                technicalItems: node.fields.technicalItems,
+                voltageTables: node.fields.voltageTables,
+              }}
+            />
+          }
+        >
+          <></>
+        </ProductTabs>
+      );
+    },
     'block-productTabs': ({ node }: any) => (
       <ProductTabs
         technicalData={
@@ -1009,6 +1164,10 @@ export default function PayloadRichText({
 
   if (!data) return null;
 
+  if (data.root?.children?.length > 0) {
+    console.log('[PayloadRichText DEBUG] received children', data.root.children.length);
+  }
+
   const dynamicConverters: JSXConverters = {
     ...jsxConverters,
     blocks: {

components/ProductTechnicalData.tsx

@@ -38,14 +38,14 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
   };
 
   return (
-    <div className="space-y-16">
+    <div className="space-y-8 md:space-y-16">
       {technicalItems.length > 0 && (
-        <div className="bg-white p-8 md:p-12 rounded-[32px] shadow-sm border border-neutral-dark/5">
+        <div className="bg-white p-5 md:p-12 rounded-[20px] md:rounded-[32px] shadow-sm border border-neutral-dark/5">
           <h3 className="text-2xl font-bold text-primary mb-8 flex items-center gap-3">
             <div className="w-2 h-8 bg-accent rounded-full" />
             General Data
           </h3>
-          <dl className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-8">
+          <dl className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-6 md:gap-x-12 md:gap-y-8">
             {technicalItems.map((item, idx) => (
               <div key={idx} className="flex flex-col group">
                 <dt className="text-sm font-bold uppercase tracking-widest text-primary/40 mb-2 group-hover:text-accent transition-colors">
@@ -72,7 +72,7 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
         return (
           <div
             key={idx}
-            className="bg-white p-8 md:p-12 rounded-[32px] shadow-sm border border-neutral-dark/5 overflow-hidden"
+            className="bg-white p-5 md:p-12 rounded-[20px] md:rounded-[32px] shadow-sm border border-neutral-dark/5 overflow-hidden"
           >
             <h3 className="text-2xl font-bold text-primary mb-8 flex items-center gap-3">
               <div className="w-2 h-8 bg-accent rounded-full" />
@@ -83,7 +83,7 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
             </h3>
 
             {table.metaItems.length > 0 && (
-              <dl className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 mb-12 bg-neutral-light/50 p-8 rounded-2xl border border-neutral-dark/5">
+              <dl className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-8 mb-6 md:mb-12 bg-neutral-light/50 p-4 md:p-8 rounded-xl md:rounded-2xl border border-neutral-dark/5">
                 {table.metaItems.map((item, mIdx) => (
                   <div key={mIdx}>
                     <dt className="text-[10px] font-black uppercase tracking-[0.2em] text-primary/40 mb-1">
@@ -98,9 +98,11 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
             )}
 
             <div className="relative">
+              {/* Scroll hint gradient on right edge for mobile */}
+              <div className="pointer-events-none absolute right-0 top-0 h-full w-8 bg-gradient-to-l from-white to-transparent z-20 md:hidden" />
               <div
                 id={`voltage-table-${idx}`}
-                className={`overflow-x-auto -mx-8 md:-mx-12 px-8 md:px-12 transition-all duration-500 ease-in-out ${
+                className={`overflow-x-auto -mx-5 md:-mx-12 px-5 md:px-12 transition-all duration-500 ease-in-out ${
                   !isExpanded && hasManyRows ? 'max-h-[400px] overflow-y-hidden' : 'max-h-[none]'
                 }`}
               >

components/RelatedProducts.tsx

@@ -41,10 +41,8 @@ export default async function RelatedProducts({
       ];
       const catFileSlug =
         categorySlugs.find((slug) => {
-          const key = slug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-          const title = t(`categories.${key}.title`);
           return product.frontmatter.categories.some(
-            (cat) => cat.toLowerCase().replace(/\s+/g, '-') === slug || cat === title,
+            (cat) => cat.toLowerCase().replace(/\s+/g, '-') === slug,
           );
         }) || 'low-voltage-cables';
 

components/analytics/AnalyticsShell.tsx

@@ -9,6 +9,9 @@ const DynamicAnalyticsProvider = dynamic(() => import('./AnalyticsProvider'), {
 const DynamicScrollDepthTracker = dynamic(() => import('./ScrollDepthTracker'), {
   ssr: false,
 });
+const DynamicWebVitalsTracker = dynamic(() => import('./WebVitalsTracker'), {
+  ssr: false,
+});
 
 export default function AnalyticsShell() {
   const [shouldLoad, setShouldLoad] = useState(false);
@@ -34,6 +37,7 @@ export default function AnalyticsShell() {
     <Suspense fallback={null}>
       <DynamicAnalyticsProvider />
       <DynamicScrollDepthTracker />
+      <DynamicWebVitalsTracker />
     </Suspense>
   );
 }

components/analytics/ClientNotFoundTracker.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useAnalytics } from './useAnalytics';
+import { AnalyticsEvents } from './analytics-events';
+
+export default function ClientNotFoundTracker({ path }: { path: string }) {
+  const { trackEvent } = useAnalytics();
+
+  useEffect(() => {
+    trackEvent(AnalyticsEvents.ERROR, {
+      type: '404_not_found',
+      path,
+    });
+
+    import('@sentry/nextjs').then((Sentry) => {
+      Sentry.withScope((scope) => {
+        scope.setTag('status_code', '404');
+        scope.setTag('path', path);
+        Sentry.captureMessage(`Route Not Found: ${path}`, 'warning');
+      });
+    });
+  }, [trackEvent, path]);
+
+  return null;
+}

components/analytics/WebVitalsTracker.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useReportWebVitals } from 'next/web-vitals';
+import { useAnalytics } from './useAnalytics';
+
+/**
+ * WebVitalsTracker component.
+ *
+ * Captures Next.js Web Vitals and reports them to Umami as custom events.
+ * This provides "meaningful" page speed tracking by measuring real user
+ * experiences (LCP, CLS, INP, etc.).
+ */
+export default function WebVitalsTracker() {
+  const { trackEvent } = useAnalytics();
+
+  useReportWebVitals((metric) => {
+    const { name, value, id, label } = metric;
+
+    // Determine rating (simplified version of web-vitals standards)
+    let rating: 'good' | 'needs-improvement' | 'poor' = 'good';
+
+    if (name === 'LCP') {
+      if (value > 4000) rating = 'poor';
+      else if (value > 2500) rating = 'needs-improvement';
+    } else if (name === 'CLS') {
+      if (value > 0.25) rating = 'poor';
+      else if (value > 0.1) rating = 'needs-improvement';
+    } else if (name === 'FID') {
+      if (value > 300) rating = 'poor';
+      else if (value > 100) rating = 'needs-improvement';
+    } else if (name === 'FCP') {
+      if (value > 3000) rating = 'poor';
+      else if (value > 1800) rating = 'needs-improvement';
+    } else if (name === 'TTFB') {
+      if (value > 1500) rating = 'poor';
+      else if (value > 800) rating = 'needs-improvement';
+    } else if (name === 'INP') {
+      if (value > 500) rating = 'poor';
+      else if (value > 200) rating = 'needs-improvement';
+    }
+
+    // Report to Umami
+    trackEvent('web-vital', {
+      metric: name,
+      value: Math.round(name === 'CLS' ? value * 1000 : value), // CLS is a score, multiply by 1000 to keep as integer if preferred
+      rating,
+      id,
+      label,
+      path: typeof window !== 'undefined' ? window.location.pathname : undefined,
+    });
+  });
+
+  return null;
+}

components/home/Experience.tsx

@@ -15,6 +15,7 @@ export default function Experience({ data }: { data?: any }) {
           fill
           className="object-cover object-center scale-105 animate-slow-zoom"
           sizes="100vw"
+          quality={100}
         />
         <div className="absolute inset-0 bg-primary/80 mix-blend-multiply" />
         <div className="absolute inset-0 bg-gradient-to-r from-primary via-primary/40 to-transparent" />

components/home/Hero.tsx

@@ -6,6 +6,10 @@ import { useTranslations, useLocale } from 'next-intl';
 import dynamic from 'next/dynamic';
 import { useAnalytics } from '../analytics/useAnalytics';
 import { AnalyticsEvents } from '../analytics/analytics-events';
+import AIOrb from '../search/AIOrb';
+import { useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { AISearchResults } from '../search/AISearchResults';
 const HeroIllustration = dynamic(() => import('./HeroIllustration'), { ssr: false });
 
 export default function Hero({ data }: { data?: any }) {
@@ -13,91 +17,148 @@ export default function Hero({ data }: { data?: any }) {
   const locale = useLocale();
   const { trackEvent } = useAnalytics();
 
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+
+  const handleSearchSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (searchQuery.trim()) {
+      setIsSearchOpen(true);
+    }
+  };
+
   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">
-      <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>
-            <Heading
-              level={1}
-              className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]"
-            >
-              {data?.title ? (
-                <span dangerouslySetInnerHTML={{ __html: data.title.replace(/<green>/g, '<span class="relative inline-block"><span class="relative z-10 text-accent italic inline-block">').replace(/<\/green>/g, '</span><div class="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both" style="animation-delay: 500ms;"><Scribble variant="circle" /></div></span>') }} />
-              ) : (
-                t.rich('title', {
-                  green: (chunks) => (
-                    <span className="relative inline-block">
-                      <span className="relative z-10 text-accent italic inline-block">{chunks}</span>
-                      <div
-                        className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both"
-                        style={{ animationDelay: '500ms' }}
-                      >
-                        <Scribble variant="circle" />
-                      </div>
-                    </span>
-                  ),
-                })
-              )}
-            </Heading>
-          </div>
-          <div>
-            <p className="text-lg md:text-xl text-white leading-relaxed max-w-2xl mb-10 md:mb-12">
-              {data?.subtitle || t('subtitle')}
-            </p>
-          </div>
-          <div className="flex flex-col sm:flex-row justify-center md:justify-start gap-4 md:gap-6">
+    <>
+      <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">
+        <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>
+              <Heading
+                level={1}
+                className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]"
+              >
+                {data?.title ? (
+                  <span
+                    dangerouslySetInnerHTML={{
+                      __html: data.title
+                        .replace(
+                          /<green>/g,
+                          '<span class="relative inline-block"><span class="relative z-10 text-accent italic inline-block">',
+                        )
+                        .replace(
+                          /<\/green>/g,
+                          '</span><div class="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both" style="animation-delay: 500ms;"><Scribble variant="circle" /></div></span>',
+                        ),
+                    }}
+                  />
+                ) : (
+                  t.rich('title', {
+                    green: (chunks) => (
+                      <span className="relative inline-block">
+                        <span className="relative z-10 text-accent italic inline-block">
+                          {chunks}
+                        </span>
+                        <div
+                          className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both"
+                          style={{ animationDelay: '500ms' }}
+                        >
+                          <Scribble variant="circle" />
+                        </div>
+                      </span>
+                    ),
+                  })
+                )}
+              </Heading>
+            </div>
+            <div>
+              <p className="text-lg md:text-xl text-white leading-relaxed max-w-2xl mb-10 md:mb-12">
+                {data?.subtitle || t('subtitle')}
+              </p>
+            </div>
+            <form
+              onSubmit={handleSearchSubmit}
+              className="w-full max-w-2xl bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-2 flex items-center mt-8 mb-10 transition-all focus-within:bg-white/15 focus-within:border-accent shadow-lg relative"
+            >
+              <div className="absolute left-2 w-12 h-12 flex items-center justify-center opacity-80 pointer-events-none">
+                <AIOrb isThinking={false} />
+              </div>
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Projekt beschreiben oder Kabel suchen..."
+                className="flex-1 bg-transparent border-none text-white pl-12 pr-2 py-4 placeholder:text-white/50 focus:outline-none text-lg lg:text-xl"
+              />
               <Button
-                href="/contact"
+                type="submit"
                 variant="accent"
                 size="lg"
-                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg hover:scale-105 transition-transform"
-                onClick={() =>
-                  trackEvent(AnalyticsEvents.BUTTON_CLICK, {
-                    label: data?.ctaLabel || t('cta'),
-                    location: 'home_hero_primary',
-                  })
-                }
+                className="rounded-xl px-6 py-4 shrink-0 flex items-center shadow-md font-bold cursor-pointer hover:bg-accent hover:brightness-110"
               >
-                {data?.ctaLabel || t('cta')}
-                <span className="transition-transform group-hover/btn:translate-x-1 ml-2">
-                  &rarr;
-                </span>
-              </Button>
-            </div>
-            <div>
-              <Button
-                href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
-                variant="white"
-                size="lg"
-                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none hover:scale-105 transition-transform"
-                onClick={() =>
-                  trackEvent(AnalyticsEvents.BUTTON_CLICK, {
-                    label: data?.secondaryCtaLabel || t('exploreProducts'),
-                    location: 'home_hero_secondary',
-                  })
-                }
-              >
-                {data?.secondaryCtaLabel || t('exploreProducts')}
+                Fragen
+                <ChevronRight className="w-5 h-5 ml-2 -mr-1" />
               </Button>
+            </form>
+
+            <div className="flex flex-col sm:flex-row justify-center md:justify-start gap-4 md:gap-6">
+              <div>
+                <Button
+                  href="/contact"
+                  variant="white"
+                  size="lg"
+                  className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg hover:scale-105 transition-all outline-none"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                      label: data?.ctaLabel || t('cta'),
+                      location: 'home_hero_primary',
+                    })
+                  }
+                >
+                  {data?.ctaLabel || t('cta')}
+                  <span className="transition-transform group-hover/btn:translate-x-1 ml-2">
+                    &rarr;
+                  </span>
+                </Button>
+              </div>
+              <div>
+                <Button
+                  href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
+                  variant="outline"
+                  size="lg"
+                  className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg text-white border-white/30 hover:bg-white/10 hover:border-white transition-all"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                      label: data?.secondaryCtaLabel || t('exploreProducts'),
+                      location: 'home_hero_secondary',
+                    })
+                  }
+                >
+                  {data?.secondaryCtaLabel || t('exploreProducts')}
+                </Button>
+              </div>
             </div>
           </div>
-        </div>
-      </Container>
+        </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">
-        <HeroIllustration />
-      </div>
-
-      <div
-        className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block animate-in fade-in slide-in-from-bottom-4 duration-1000 ease-out fill-mode-both"
-        style={{ animationDelay: '2000ms' }}
-      >
-        <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
-          <div className="w-1 h-2 bg-white rounded-full animate-bounce" />
+        <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">
+          <HeroIllustration />
         </div>
-      </div>
-    </Section>
+
+        <div
+          className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block animate-in fade-in slide-in-from-bottom-4 duration-1000 ease-out fill-mode-both"
+          style={{ animationDelay: '2000ms' }}
+        >
+          <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
+            <div className="w-1 h-2 bg-white rounded-full animate-bounce" />
+          </div>
+        </div>
+      </Section>
+      <AISearchResults
+        isOpen={isSearchOpen}
+        onClose={() => setIsSearchOpen(false)}
+        initialQuery={searchQuery}
+        triggerSearch={true}
+      />
+    </>
   );
 }

components/home/MeetTheTeam.tsx

@@ -17,6 +17,7 @@ export default function MeetTheTeam({ data }: { data?: any }) {
           fill
           className="object-cover scale-105 animate-slow-zoom"
           sizes="100vw"
+          quality={100}
         />
         <div className="absolute inset-0 bg-primary/70 mix-blend-multiply" />
         <div className="absolute inset-0 bg-gradient-to-t from-primary via-primary/20 to-transparent" />

components/home/RecentPosts.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { getAllPosts } from '@/lib/blog';
 import { getTranslations } from 'next-intl/server';
-import { Section, Container, Heading, Card, Badge } from '../../components/ui';
+import { Section, Container, Heading } from '../../components/ui';
 
 interface RecentPostsProps {
   locale: string;
@@ -13,7 +13,7 @@ interface RecentPostsProps {
 export default async function RecentPosts({ locale, data }: RecentPostsProps) {
   const t = await getTranslations('Blog');
   const posts = await getAllPosts(locale);
-  const recentPosts = posts.slice(0, 3);
+  const recentPosts = posts.slice(0, 4);
 
   if (recentPosts.length === 0) return null;
 
@@ -21,9 +21,9 @@ export default async function RecentPosts({ locale, data }: RecentPostsProps) {
   const subtitle = data?.subtitle || t('latestNews');
 
   return (
-    <Section className="bg-neutral py-16 md:py-24">
-      <Container>
-        <div className="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 md:mb-16 gap-6">
+    <Section className="bg-neutral-light py-0 md:py-0 lg:py-0">
+      <Container className="py-12 md:py-16">
+        <div className="flex flex-col md:flex-row items-start md:items-end justify-between gap-6">
           <Heading level={2} subtitle={subtitle} className="mb-0 text-primary">
             {title}
           </Heading>
@@ -35,74 +35,73 @@ export default async function RecentPosts({ locale, data }: RecentPostsProps) {
             <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
           </Link>
         </div>
-
-        <ul className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 list-none p-0 m-0">
-          {recentPosts.map((post, idx) => (
-            <li key={`${post.slug}-${idx}`}>
-              <Link href={`/${locale}/blog/${post.slug}`} className="group block h-full">
-                <Card
-                  tag="article"
-                  className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl"
-                >
-                  {post.frontmatter.featuredImage && (
-                    <div className="relative h-64 overflow-hidden">
-                      <Image
-                        src={post.frontmatter.featuredImage.split('?')[0]}
-                        alt={post.frontmatter.title}
-                        fill
-                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
-                        style={{
-                          objectPosition: `${post.frontmatter.focalX ?? 50}% ${post.frontmatter.focalY ?? 50}%`,
-                        }}
-                        sizes="(max-width: 768px) 100vw, 33vw"
-                        loading="lazy"
-                      />
-                      <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-                      {post.frontmatter.category && (
-                        <Badge variant="accent" className="absolute top-4 left-4 shadow-md">
-                          {post.frontmatter.category}
-                        </Badge>
-                      )}
-                    </div>
-                  )}
-                  <div className="p-6 md:p-8 flex flex-col flex-grow">
-                    <div className="text-xs md:text-sm font-medium text-text-light mb-3 md:mb-4 flex items-center gap-2">
-                      <span className="w-6 md:w-8 h-px bg-neutral-medium" />
-                      <time dateTime={post.frontmatter.date}>
-                        {new Date(post.frontmatter.date).toLocaleDateString(locale, {
-                          year: 'numeric',
-                          month: 'long',
-                          day: 'numeric',
-                        })}
-                      </time>
-                    </div>
-                    <h3 className="text-lg md:text-xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
-                      {post.frontmatter.title}
-                    </h3>
-                    <div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">
-                      {t('readMore')}
-                      <svg
-                        className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-2"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        aria-hidden="true"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M17 8l4 4m0 0l-4 4m4-4H3"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                </Card>
-              </Link>
-            </li>
-          ))}
-        </ul>
       </Container>
+
+      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 m-0 p-0 list-none">
+        {recentPosts.map((post, idx) => (
+          <li key={`${post.slug}-${idx}`} className="block">
+            <Link
+              href={`/${locale}/blog/${post.slug}`}
+              className="group block relative h-[400px] md:h-[500px] lg:h-[650px] overflow-hidden border-b md:border-b-0 md:border-r border-white/10 last:border-0 focus:outline-none"
+            >
+              {post.frontmatter.featuredImage && (
+                <>
+                  <Image
+                    src={post.frontmatter.featuredImage.split('?')[0]}
+                    alt={post.frontmatter.title}
+                    fill
+                    className="object-cover transition-transform duration-1000 group-hover:scale-110"
+                    style={{
+                      objectPosition: `${post.frontmatter.focalX ?? 50}% ${post.frontmatter.focalY ?? 50}%`,
+                    }}
+                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw"
+                    loading="lazy"
+                  />
+                  <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-primary-dark/60 transition-all duration-500" />
+                </>
+              )}
+
+              <div className="absolute inset-0 p-8 md:p-10 flex flex-col justify-end text-white">
+                <div className="mb-4 md:mb-6 transform transition-all duration-500 group-hover:-translate-y-4">
+                  <div className="flex flex-wrap items-center gap-2 mb-4">
+                    {post.frontmatter.category && (
+                      <span className="px-3 py-1 bg-accent text-primary-dark rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wider shadow-sm">
+                        {post.frontmatter.category}
+                      </span>
+                    )}
+                    <time
+                      dateTime={post.frontmatter.date}
+                      suppressHydrationWarning
+                      className="px-3 py-1 text-white/80 text-[10px] md:text-xs font-bold uppercase tracking-widest border border-white/20 rounded-full bg-white/10 backdrop-blur-md"
+                    >
+                      {new Date(post.frontmatter.date).toLocaleDateString(locale || 'de', {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                      })}
+                    </time>
+                    {(new Date(post.frontmatter.date) > new Date() ||
+                      post.frontmatter.public === false) && (
+                      <span className="px-2 py-0.5 border border-white/40 text-white/90 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold bg-neutral-dark/40 shadow-sm">
+                        Draft Preview
+                      </span>
+                    )}
+                  </div>
+                  <h3 className="text-xl md:text-2xl font-bold mb-2 md:mb-4 leading-tight drop-shadow-md">
+                    {post.frontmatter.title}
+                  </h3>
+                </div>
+                <div className="flex items-center text-accent font-bold tracking-wider uppercase text-xs md:text-xs opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 delay-100">
+                  {t('readMore')}{' '}
+                  <span className="ml-2 transition-transform group-hover:translate-x-2">
+                    &rarr;
+                  </span>
+                </div>
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
     </Section>
   );
 }

components/home/VideoSection.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import React, { useState, useEffect, useRef } from 'react';
-import Scribble from '@/components/Scribble';
 import { useTranslations } from 'next-intl';
 
 export default function VideoSection({ data }: { data?: any }) {
@@ -41,18 +40,16 @@ export default function VideoSection({ data }: { data?: any }) {
         <div className="max-w-5xl px-6 text-center animate-slide-up pointer-events-auto">
           <h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-[1.1]">
             {data?.title ? (
-              <span dangerouslySetInnerHTML={{ __html: data.title.replace(/<future>/g, '<span class="relative inline-block mx-2"><span class="relative z-10 italic text-accent">').replace(/<\/future>/g, '</span><Scribble variant="underline" class="w-full h-4 -bottom-2 left-0 text-accent/40" /></span>') }} />
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: data.title
+                    .replace(/<future>/g, '<span class="italic text-accent">')
+                    .replace(/<\/future>/g, '</span>'),
+                }}
+              />
             ) : (
               t.rich('title', {
-                future: (chunks) => (
-                  <span className="relative inline-block mx-2">
-                    <span className="relative z-10 italic text-accent">{chunks}</span>
-                    <Scribble
-                      variant="underline"
-                      className="w-full h-4 -bottom-2 left-0 text-accent/40"
-                    />
-                  </span>
-                ),
+                future: (chunks) => <span className="italic text-accent">{chunks}</span>,
               })
             )}
           </h2>

components/search/AIOrb.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable react/no-unknown-property */
+'use client';
+
+import React, { useRef } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { Sphere, MeshDistortMaterial, Environment, Float } from '@react-three/drei';
+import * as THREE from 'three';
+
+interface AIOrbProps {
+  isThinking: boolean;
+}
+
+function Orb({ isThinking }: AIOrbProps) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const materialRef = useRef<any>(null);
+
+  // Dynamic properties based on state
+  const targetDistort = isThinking ? 0.6 : 0.3;
+  const targetSpeed = isThinking ? 5 : 2;
+  const color = isThinking ? '#00FF88' : '#00A3FF'; // Green/Blue based on thinking state
+
+  useFrame((state) => {
+    if (!materialRef.current) return;
+
+    // Smoothly interpolate material properties
+    materialRef.current.distort = THREE.MathUtils.lerp(
+      materialRef.current.distort,
+      targetDistort,
+      0.1,
+    );
+    materialRef.current.speed = THREE.MathUtils.lerp(materialRef.current.speed, targetSpeed, 0.1);
+
+    // Smooth color transition
+    const currentColor = materialRef.current.color;
+    const targetColorObj = new THREE.Color(color);
+    currentColor.lerp(targetColorObj, 0.05);
+
+    // Slow rotation
+    if (meshRef.current) {
+      meshRef.current.rotation.x = state.clock.getElapsedTime() * 0.2;
+      meshRef.current.rotation.y = state.clock.getElapsedTime() * 0.3;
+    }
+  });
+
+  return (
+    <Float
+      speed={isThinking ? 4 : 2}
+      rotationIntensity={isThinking ? 2 : 1}
+      floatIntensity={isThinking ? 2 : 1}
+    >
+      <Sphere ref={meshRef} args={[1, 64, 64]} scale={1.5}>
+        <MeshDistortMaterial
+          ref={materialRef}
+          color="#00A3FF"
+          envMapIntensity={2}
+          clearcoat={1}
+          clearcoatRoughness={0}
+          metalness={0.8}
+          roughness={0.1}
+          distort={0.3}
+          speed={2}
+        />
+      </Sphere>
+    </Float>
+  );
+}
+
+export default function AIOrb({ isThinking = false }: AIOrbProps) {
+  return (
+    <div className="w-full h-full min-w-[32px] min-h-[32px] relative flex items-center justify-center">
+      {/* Ambient glow effect behind the orb */}
+      <div
+        className={`absolute inset-0 rounded-full blur-xl opacity-50 transition-colors duration-1000 ${isThinking ? 'bg-[#00FF88]/50' : 'bg-[#00A3FF]/40'}`}
+      />
+
+      <Canvas
+        camera={{ position: [0, 0, 4], fov: 45 }}
+        className="w-full h-full cursor-pointer z-10 block"
+      >
+        <ambientLight intensity={0.5} />
+        <directionalLight position={[10, 10, 5]} intensity={1.5} />
+        <directionalLight position={[-10, -10, -5]} intensity={0.5} color="#00FF88" />
+        <Orb isThinking={isThinking} />
+        <Environment preset="city" />
+      </Canvas>
+    </div>
+  );
+}

components/search/AISearchResults.tsx

@@ -0,0 +1,323 @@
+'use client';
+
+import { useState, useRef, useEffect, KeyboardEvent } from 'react';
+import { Search, X, Sparkles, ChevronRight, MessageSquareWarning } from 'lucide-react';
+import Link from 'next/link';
+import { useAnalytics } from '../analytics/useAnalytics';
+import { AnalyticsEvents } from '../analytics/analytics-events';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import AIOrb from './AIOrb';
+
+interface ProductMatch {
+  id: string;
+  title: string;
+  sku: string;
+  slug: string;
+}
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+  products?: ProductMatch[];
+}
+interface ComponentProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialQuery?: string;
+  triggerSearch?: boolean; // If true, immediately searches on mount with initialQuery
+}
+
+export function AISearchResults({
+  isOpen,
+  onClose,
+  initialQuery = '',
+  triggerSearch = false,
+}: ComponentProps) {
+  const { trackEvent } = useAnalytics();
+
+  const [query, setQuery] = useState('');
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [honeypot, setHoneypot] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const modalRef = useRef<HTMLDivElement>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      setTimeout(() => inputRef.current?.focus(), 100);
+
+      if (triggerSearch && initialQuery && messages.length === 0) {
+        setQuery(initialQuery);
+        handleSearch(initialQuery);
+      } else if (!triggerSearch) {
+        setQuery('');
+      }
+    } else {
+      document.body.style.overflow = 'unset';
+      setQuery('');
+      setMessages([]);
+      setError(null);
+      setIsLoading(false);
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen, triggerSearch]);
+
+  useEffect(() => {
+    if (isOpen && initialQuery && messages.length === 0) {
+      setQuery(initialQuery);
+    }
+  }, [initialQuery, isOpen]);
+
+  useEffect(() => {
+    // Auto-scroll to bottom of chat
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, isLoading]);
+
+  const handleSearch = async (searchQuery: string = query) => {
+    if (!searchQuery.trim() || isLoading) return;
+
+    const newUserMessage: Message = { role: 'user', content: searchQuery };
+    const newMessagesContext = [...messages, newUserMessage];
+
+    setMessages(newMessagesContext);
+    setQuery('');
+    setIsLoading(true);
+    setError(null);
+
+    trackEvent(AnalyticsEvents.FORM_SUBMIT, {
+      type: 'ai_search',
+      query: searchQuery,
+    });
+
+    try {
+      const res = await fetch('/api/ai-search', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          messages: newMessagesContext,
+          _honeypot: honeypot,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || 'Failed to fetch search results');
+      }
+
+      setMessages((prev) => [
+        ...prev,
+        {
+          role: 'assistant',
+          content: data.answerText,
+          products: data.products,
+        },
+      ]);
+
+      // Re-focus input after response so user can continue typing easily
+      setTimeout(() => inputRef.current?.focus(), 100);
+    } catch (err: any) {
+      console.error(err);
+      setError(err.message || 'An error occurred while chatting. Please try again.');
+      trackEvent(AnalyticsEvents.ERROR, {
+        location: 'ai_search_results',
+        message: err.message,
+        query: searchQuery,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleSearch();
+    }
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  // Handle clicking outside to close
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-start justify-center pt-16 md:pt-24 px-4 bg-primary/95 backdrop-blur-xl transition-all duration-300 animate-in fade-in"
+      onClick={handleBackdropClick}
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        ref={modalRef}
+        className="relative w-full max-w-4xl bg-[#002b49]/90 border border-white/10 rounded-3xl shadow-2xl shadow-black/50 overflow-hidden flex flex-col h-[75vh] animate-in slide-in-from-bottom-10"
+      >
+        {/* Header */}
+        <div className="p-4 md:p-6 flex items-center justify-between border-b border-white/10 relative z-10 bg-[#001c30]">
+          <div className="flex items-center">
+            <Sparkles className="w-5 h-5 text-accent mr-3" />
+            <h2 className="text-white font-bold tracking-widest uppercase text-sm">
+              KLZ AI Consultant
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-white/50 hover:text-white transition-colors p-2"
+            aria-label="Close"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        {/* Chat History Area */}
+        <div className="flex-1 overflow-y-auto p-4 md:p-8 relative space-y-6 scroll-smooth">
+          {messages.length === 0 && !isLoading && !error && (
+            <div className="flex flex-col items-center justify-center h-full text-center opacity-50 space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
+              <AIOrb isThinking={false} />
+              <p className="text-xl md:text-2xl font-bold mt-6">I am your technical consultant.</p>
+              <p className="text-sm">
+                Describe your project, ask for specific cables, or tell me your requirements.
+              </p>
+            </div>
+          )}
+
+          {messages.map((msg, index) => (
+            <div
+              key={index}
+              className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
+            >
+              <div
+                className={`max-w-[85%] rounded-2xl p-5 ${msg.role === 'user' ? 'bg-accent text-primary rounded-tr-sm' : 'bg-white/10 border border-white/10 text-white rounded-tl-sm'}`}
+              >
+                {msg.role === 'assistant' && (
+                  <h3 className="text-xs font-bold tracking-widest uppercase text-accent/80 mb-2 flex items-center">
+                    <Sparkles className="w-3 h-3 mr-1" />
+                    AI Assistant
+                  </h3>
+                )}
+                <div className="text-base md:text-lg leading-relaxed font-medium prose prose-invert prose-p:leading-relaxed prose-pre:bg-black/50 prose-a:text-accent prose-strong:text-accent prose-ul:list-disc prose-ol:list-decimal">
+                  {msg.role === 'assistant' ? (
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>
+                  ) : (
+                    <p className="whitespace-pre-wrap">{msg.content}</p>
+                  )}
+                </div>
+
+                {/* Product Matches inside Assistant Message */}
+                {msg.role === 'assistant' && msg.products && msg.products.length > 0 && (
+                  <div className="mt-6 space-y-3 border-t border-white/10 pt-4">
+                    <h4 className="text-xs font-bold tracking-widest uppercase text-white/50">
+                      Empfohlene Produkte
+                    </h4>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                      {msg.products.map((product, idx) => (
+                        <Link
+                          key={idx}
+                          href={`/produkte/${product.slug}`}
+                          onClick={() => {
+                            onClose();
+                            trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                              target: product.slug,
+                              location: 'ai_search_results',
+                            });
+                          }}
+                          className="group flex flex-col justify-between bg-white text-primary rounded-lg p-4 hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
+                        >
+                          <div>
+                            <p className="text-[10px] font-bold text-primary/50 tracking-wider mb-1">
+                              {product.sku}
+                            </p>
+                            <h5 className="text-sm font-extrabold mb-2 group-hover:text-accent transition-colors line-clamp-2">
+                              {product.title}
+                            </h5>
+                          </div>
+                          <div className="flex items-center justify-end text-[10px] font-bold tracking-widest uppercase mt-2">
+                            <span className="group-hover:text-accent transition-colors">
+                              Details
+                            </span>
+                            <ChevronRight className="w-3 h-3 ml-1 group-hover:text-accent transition-colors group-hover:translate-x-1" />
+                          </div>
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+
+          {isLoading && (
+            <div className="flex justify-start">
+              <div className="bg-transparent rounded-2xl p-2 w-24 flex justify-center">
+                <AIOrb isThinking={true} />
+              </div>
+            </div>
+          )}
+
+          {error && (
+            <div className="flex items-start space-x-4 bg-red-500/10 border border-red-500/20 p-4 rounded-xl mt-4">
+              <MessageSquareWarning className="w-6 h-6 text-red-400 shrink-0" />
+              <div>
+                <h3 className="text-sm font-bold text-red-200">System Error</h3>
+                <p className="text-xs text-red-300 mt-1">{error}</p>
+              </div>
+            </div>
+          )}
+
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* Input Area */}
+        <div className="p-4 md:p-6 bg-[#001c30] border-t border-white/10">
+          <div className="relative flex items-center bg-white/5 border border-white/10 rounded-xl focus-within:border-accent/50 focus-within:bg-white/10 transition-all">
+            <input
+              ref={inputRef}
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={onKeyDown}
+              placeholder="Type your question or requirements..."
+              className="flex-1 bg-transparent border-none text-white text-base md:text-lg p-4 focus:outline-none placeholder:text-white/30"
+              disabled={isLoading}
+            />
+            <input
+              type="text"
+              className="hidden"
+              value={honeypot}
+              onChange={(e) => setHoneypot(e.target.value)}
+              tabIndex={-1}
+              autoComplete="off"
+              aria-hidden="true"
+            />
+            <button
+              onClick={() => handleSearch()}
+              disabled={!query.trim() || isLoading}
+              className="p-4 text-white/50 hover:text-accent disabled:opacity-50 disabled:hover:text-white/50 transition-colors shrink-0 cursor-pointer"
+              aria-label="Send message"
+            >
+              <Search className="w-6 h-6" />
+            </button>
+          </div>
+          <div className="text-center mt-3">
+            <span className="text-[10px] uppercase tracking-widest font-bold text-white/30">
+              Press Enter to send • Esc to close
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

config/lighthouserc.json

@@ -1,15 +1,10 @@
 {
   "ci": {
     "collect": {
-      "numberOfRuns": 3,
+      "numberOfRuns": 1,
       "settings": {
         "preset": "desktop",
-        "onlyCategories": [
-          "performance",
-          "accessibility",
-          "best-practices",
-          "seo"
-        ],
+        "onlyCategories": ["performance", "accessibility", "best-practices", "seo"],
         "chromeFlags": "--no-sandbox --disable-setuid-sandbox"
       }
     },
@@ -18,7 +13,7 @@
         "categories:performance": [
           "error",
           {
-            "minScore": 0.9
+            "minScore": 0.7
           }
         ],
         "categories:accessibility": [
@@ -54,4 +49,4 @@
       }
     }
   }
-}
+}

docker-compose.dev.yml

@@ -29,7 +29,7 @@ services:
       NEXT_TELEMETRY_DISABLED: "1"
       POSTGRES_URI: postgres://${PAYLOAD_DB_USER:-payload}:${PAYLOAD_DB_PASSWORD:-120in09oenaoinsd9iaidon}@klz-db:5432/${PAYLOAD_DB_NAME:-payload}
       PAYLOAD_SECRET: ${PAYLOAD_SECRET:-fallback-secret-for-dev}
-      NODE_OPTIONS: "--max-old-space-size=4096"
+      NODE_OPTIONS: "--max-old-space-size=8192"
       UV_THREADPOOL_SIZE: "4"
       NPM_TOKEN: ${NPM_TOKEN:-}
       CI: "true"
@@ -48,7 +48,7 @@ services:
           cpus: '4'
           memory: 8G
     command: >
-      sh -c "pnpm install && pnpm next dev --webpack --hostname 0.0.0.0"
+      sh -c "pnpm install --no-frozen-lockfile && pnpm next dev --webpack --hostname 0.0.0.0"
     labels:
       - "traefik.enable=true"
       - "traefik.http.services.${PROJECT_NAME:-klz}-app-svc.loadbalancer.server.port=3000"
@@ -75,6 +75,24 @@ services:
     ports:
       - "54322:5432"
 
+  klz-redis:
+    image: redis:7-alpine
+    restart: unless-stopped
+    networks:
+      - default
+    ports:
+      - "6379:6379"
+
+  klz-qdrant:
+    image: qdrant/qdrant:v1.13.2
+    restart: unless-stopped
+    volumes:
+      - klz_qdrant_data:/qdrant/storage
+    networks:
+      - default
+    ports:
+      - "6333:6333"
+
 networks:
   default:
     name: ${PROJECT_NAME:-klz-cables}-internal
@@ -84,6 +102,8 @@ networks:
 volumes:
   klz_db_data:
     external: false
+  klz_qdrant_data:
+    external: false
   klz_node_modules:
   klz_next_cache:
   klz_turbo_cache:

docker-compose.yml

@@ -10,7 +10,7 @@ services:
     env_file:
       - ${ENV_FILE:-.env}
     environment:
-      POSTGRES_URI: postgres://${PAYLOAD_DB_USER:-payload}:${PAYLOAD_DB_PASSWORD:-120in09oenaoinsd9iaidon}@klz-db:5432/${PAYLOAD_DB_NAME:-payload}
+      POSTGRES_URI: postgres://${PAYLOAD_DB_USER:-payload}:${PAYLOAD_DB_PASSWORD:-payload}@klz-db:5432/${PAYLOAD_DB_NAME:-payload}
       PAYLOAD_SECRET: ${PAYLOAD_SECRET:-fallback-secret-for-production-needs-change}
     volumes:
       - klz_media_data:/app/public/media
@@ -29,7 +29,7 @@ services:
       - "traefik.http.routers.${PROJECT_NAME:-klz}.middlewares=${AUTH_MIDDLEWARE:-klz-ratelimit,klz-forward,klz-compress}"
 
       # Public Router – paths that bypass Gatekeeper auth (health, SEO, static assets, OG images)
-      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}) && PathRegexp(`^/(health|uploads|media|robots\\.txt|manifest\\.webmanifest|sitemap(-[0-9]+)?\\.xml|(.*/)?api/og(/.*)?|(.*/)?opengraph-image.*)`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}) && PathRegexp(`^/([a-z]{2}/)?(health|login|gatekeeper|uploads|media|robots\\.txt|manifest\\.webmanifest|sitemap(-[0-9]+)?\\.xml|(.*/)?api/og(/.*)?|(.*/)?opengraph-image.*)`)"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-public.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-public.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-public.tls=${TRAEFIK_TLS:-false}"
@@ -46,9 +46,21 @@ services:
       - "traefik.http.middlewares.${PROJECT_NAME:-klz}-forward.headers.customrequestheaders.X-Forwarded-Proto=https"
       - "traefik.http.middlewares.${PROJECT_NAME:-klz}-forward.headers.customrequestheaders.X-Forwarded-Ssl=on"
 
+      # Login redirect – the app's middleware sends users to /login but login lives at /gatekeeper/login
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-loginredirect.redirectregex.regex=^https?://[^/]+/([a-z]{2}/)?login(.*)"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-loginredirect.redirectregex.replacement=https://${TRAEFIK_HOST:-klz-cables.com}/gatekeeper/login$${2}"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-loginredirect.redirectregex.permanent=false"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-loginredir.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}) && PathRegexp(`^/([a-z]{2}/)?login`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-loginredir.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-loginredir.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-loginredir.tls=${TRAEFIK_TLS:-false}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-loginredir.middlewares=${PROJECT_NAME:-klz}-loginredirect"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-loginredir.service=${PROJECT_NAME:-klz}-app-svc"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-loginredir.priority=2002"
+
   klz-gatekeeper:
     profiles: [ "gatekeeper" ]
-    image: registry.infra.mintel.me/mintel/gatekeeper:v1.7.12
+    image: registry.infra.mintel.me/mintel/gatekeeper:testing
     restart: unless-stopped
     networks:
       infra:
@@ -66,8 +78,8 @@ services:
       - "traefik.http.middlewares.${PROJECT_NAME:-klz}-auth.forwardauth.authResponseHeaders=X-Auth-User"
       - "traefik.docker.network=infra"
 
-      # Gatekeeper Public Router (Login/Auth UI)
-      - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}) && PathRegexp(`^/(login|gatekeeper)(/.*)?`)"
+      # Gatekeeper Public Router (Login/Auth UI) — basePath mode on main domain
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}) && PathPrefix(`/gatekeeper`)"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.tls=${TRAEFIK_TLS:-false}"
@@ -82,12 +94,31 @@ services:
     environment:
       POSTGRES_DB: ${PAYLOAD_DB_NAME:-payload}
       POSTGRES_USER: ${PAYLOAD_DB_USER:-payload}
-      POSTGRES_PASSWORD: ${PAYLOAD_DB_PASSWORD:-120in09oenaoinsd9iaidon}
+      POSTGRES_PASSWORD: ${PAYLOAD_DB_PASSWORD:-payload}
     volumes:
       - klz_db_data:/var/lib/postgresql/data
     networks:
       - default
 
+  klz-redis:
+    image: redis:7-alpine
+    restart: unless-stopped
+    networks:
+      - default
+
+  klz-qdrant:
+    image: qdrant/qdrant:v1.13.2
+    restart: unless-stopped
+    ports:
+      - "6333:6333"
+    environment:
+      QDRANT__SERVICE__HTTP_PORT: 6333
+      QDRANT__SERVICE__GRPC_PORT: 6334
+    volumes:
+      - klz_qdrant_data:/qdrant/storage
+    networks:
+      - default
+
 networks:
   default:
     name: ${PROJECT_NAME:-klz-cables}-internal
@@ -99,3 +130,5 @@ volumes:
     external: false
   klz_media_data:
     external: false
+  klz_qdrant_data:
+    external: false

instrumentation-client.ts

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

lib/blog.ts

@@ -59,18 +59,50 @@ export async function getPostBySlug(slug: string, locale: string): Promise<PostD
   try {
     const payload = await getPayload({ config: configPromise });
 
-    const isDev = process.env.NODE_ENV === 'development';
-    const { docs } = await payload.find({
+    // First try: Find in the requested locale
+    let { docs } = await payload.find({
       collection: 'posts',
       where: {
         slug: { equals: slug },
-        ...(!isDev ? { _status: { equals: 'published' } } : {}),
+        ...(!config.showDrafts ? { _status: { equals: 'published' } } : {}),
       },
       locale: locale as any,
-      draft: isDev,
+      draft: config.showDrafts,
       limit: 1,
     });
 
+    // Fallback: If not found, try searching across all locales.
+    // This happens when a user uses the static language switcher
+    // e.g. switching from /en/blog/en-slug to /de/blog/en-slug.
+    if (!docs || docs.length === 0) {
+      const { docs: crossLocaleDocs } = await payload.find({
+        collection: 'posts',
+        where: {
+          slug: { equals: slug },
+          ...(!config.showDrafts ? { _status: { equals: 'published' } } : {}),
+        },
+        locale: 'all',
+        draft: config.showDrafts,
+        limit: 1,
+      });
+
+      if (crossLocaleDocs && crossLocaleDocs.length > 0) {
+        // Fetch the found document again, but strictly in the requested locale
+        // so we get the correctly translated fields (like the localized slug)
+        const { docs: correctLocaleDocs } = await payload.find({
+          collection: 'posts',
+          where: {
+            id: { equals: crossLocaleDocs[0].id },
+          },
+          locale: locale as any,
+          draft: config.showDrafts,
+          limit: 1,
+        });
+
+        docs = correctLocaleDocs;
+      }
+    }
+
     if (!docs || docs.length === 0) return null;
 
     const doc = docs[0];
@@ -84,7 +116,7 @@ export async function getPostBySlug(slug: string, locale: string): Promise<PostD
         category: doc.category || '',
         featuredImage:
           typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-            ? doc.featuredImage.sizes?.card?.url || doc.featuredImage.url
+            ? doc.featuredImage.url || doc.featuredImage.sizes?.card?.url
             : null,
         focalX:
           typeof doc.featuredImage === 'object' && doc.featuredImage !== null
@@ -107,15 +139,14 @@ export async function getPostBySlug(slug: string, locale: string): Promise<PostD
 export async function getAllPosts(locale: string): Promise<PostData[]> {
   try {
     const payload = await getPayload({ config: configPromise });
-    const isDev = process.env.NODE_ENV === 'development';
     const { docs } = await payload.find({
       collection: 'posts',
       where: {
-        ...(!isDev ? { _status: { equals: 'published' } } : {}),
+        ...(!config.showDrafts ? { _status: { equals: 'published' } } : {}),
       },
       locale: locale as any,
       sort: '-date',
-      draft: isDev,
+      draft: config.showDrafts,
       limit: 100,
     });
 
@@ -131,7 +162,7 @@ export async function getAllPosts(locale: string): Promise<PostData[]> {
           category: doc.category || '',
           featuredImage:
             typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-              ? doc.featuredImage.sizes?.card?.url || doc.featuredImage.url
+              ? doc.featuredImage.url || doc.featuredImage.sizes?.card?.url
               : null,
           focalX:
             typeof doc.featuredImage === 'object' && doc.featuredImage !== null
@@ -255,3 +286,38 @@ export function getHeadings(content: string): { id: string; text: string; level:
     return { id, text: cleanText, level };
   });
 }
+
+export function extractLexicalHeadings(
+  node: any,
+  headings: { id: string; text: string; level: number }[] = [],
+): { id: string; text: string; level: number }[] {
+  if (!node) return headings;
+
+  if (node.type === 'heading' && node.tag) {
+    const level = parseInt(node.tag.replace('h', ''));
+    const text = getTextContentFromLexical(node);
+    if (text) {
+      headings.push({
+        id: generateHeadingId(text),
+        text,
+        level,
+      });
+    }
+  }
+
+  if (node.children && Array.isArray(node.children)) {
+    node.children.forEach((child: any) => extractLexicalHeadings(child, headings));
+  }
+
+  return headings;
+}
+
+function getTextContentFromLexical(node: any): string {
+  if (node.type === 'text') {
+    return node.text || '';
+  }
+  if (node.children && Array.isArray(node.children)) {
+    return node.children.map(getTextContentFromLexical).join('');
+  }
+  return '';
+}

lib/config.ts

@@ -29,6 +29,7 @@ function createConfig() {
     isStaging: target === 'staging',
     isTesting: target === 'testing',
     isDevelopment: target === 'development',
+    showDrafts: target === 'development' || target === 'testing' || target === 'staging',
     feedbackEnabled: env.NEXT_PUBLIC_FEEDBACK_ENABLED,
     gatekeeperUrl: env.GATEKEEPER_URL,
 
@@ -116,6 +117,9 @@ export const config = {
   get isDevelopment() {
     return getConfig().isDevelopment;
   },
+  get showDrafts() {
+    return getConfig().showDrafts;
+  },
   get baseUrl() {
     return getConfig().baseUrl;
   },

lib/pages.ts

@@ -1,5 +1,7 @@
 import { getPayload } from 'payload';
 import configPromise from '@payload-config';
+import { mapSlugToFileSlug } from './slugs';
+import { config } from '@/lib/config';
 
 export interface PageFrontmatter {
   title: string;
@@ -44,19 +46,81 @@ function mapDoc(doc: any): PageData {
 export async function getPageBySlug(slug: string, locale: string): Promise<PageData | null> {
   try {
     const payload = await getPayload({ config: configPromise });
+    const fileSlug = await mapSlugToFileSlug(slug, locale);
 
-    const result = await payload.find({
-      collection: 'pages' as any,
+    // Try finding exact match first
+    let result = await payload.find({
+      collection: 'pages',
       where: {
-        slug: { equals: slug },
+        and: [
+          { slug: { equals: fileSlug } },
+          ...(!config.showDrafts ? [{ _status: { equals: 'published' } }] : []),
+        ],
       },
       locale: locale as any,
+      depth: 1,
       limit: 1,
     });
 
-    const docs = result.docs as any[];
-    if (!docs || docs.length === 0) return null;
-    return mapDoc(docs[0]);
+    // Fallback: search ALL locales
+    if (result.docs.length === 0) {
+      const crossResult = await payload.find({
+        collection: 'pages',
+        where: {
+          and: [
+            { slug: { equals: fileSlug } },
+            ...(!config.showDrafts ? [{ _status: { equals: 'published' } }] : []),
+          ],
+        },
+        locale: 'all',
+        depth: 1,
+        limit: 1,
+      });
+
+      if (crossResult.docs.length > 0) {
+        // Fetch missing exact match by internal id
+        result = await payload.find({
+          collection: 'pages',
+          where: {
+            id: { equals: crossResult.docs[0].id },
+          },
+          locale: locale as any,
+          depth: 1,
+          limit: 1,
+        });
+      }
+    }
+
+    if (result.docs.length > 0) {
+      const doc = result.docs[0];
+
+      return {
+        slug: doc.slug,
+        frontmatter: {
+          title: doc.title,
+          excerpt: doc.excerpt || '',
+          featuredImage:
+            typeof doc.featuredImage === 'object' && doc.featuredImage !== null
+              ? doc.featuredImage.sizes?.card?.url || doc.featuredImage.url
+              : null,
+          focalX:
+            typeof doc.featuredImage === 'object' && doc.featuredImage !== null
+              ? doc.featuredImage.focalX
+              : 50,
+          focalY:
+            typeof doc.featuredImage === 'object' && doc.featuredImage !== null
+              ? doc.featuredImage.focalY
+              : 50,
+          layout:
+            doc.layout === 'fullBleed' || doc.layout === 'default'
+              ? doc.layout
+              : ('default' as const),
+        },
+        content: doc.content,
+      };
+    }
+
+    return null;
   } catch (error) {
     console.error(`[Payload] getPageBySlug failed for ${slug}:`, error);
     return null;

lib/products.ts

@@ -1,6 +1,7 @@
 import { getPayload } from 'payload';
 import configPromise from '@payload-config';
 import { mapSlugToFileSlug } from './slugs';
+import { config } from '@/lib/config';
 
 export interface ProductFrontmatter {
   title: string;
@@ -17,6 +18,7 @@ export interface ProductData {
   slug: string;
   frontmatter: ProductFrontmatter;
   content: any; // Lexical AST from Payload
+  application?: any; // Lexical AST for Application field
 }
 
 export async function getProductMetadata(
@@ -26,13 +28,12 @@ export async function getProductMetadata(
   const payload = await getPayload({ config: configPromise });
   const fileSlug = await mapSlugToFileSlug(slug, locale);
 
-  const isDev = process.env.NODE_ENV === 'development';
   const result = await payload.find({
     collection: 'products',
     where: {
       and: [
         { slug: { equals: fileSlug } },
-        ...(!isDev ? [{ _status: { equals: 'published' } }] : []),
+        ...(!config.showDrafts ? [{ _status: { equals: 'published' } }] : []),
       ],
     },
     locale: locale as any,
@@ -70,13 +71,12 @@ export async function getProductBySlug(slug: string, locale: string): Promise<Pr
     const payload = await getPayload({ config: configPromise });
     const fileSlug = await mapSlugToFileSlug(slug, locale);
 
-    const isDev = process.env.NODE_ENV === 'development';
     const result = await payload.find({
       collection: 'products',
       where: {
         and: [
           { slug: { equals: fileSlug } },
-          ...(!isDev ? [{ _status: { equals: 'published' } }] : []),
+          ...(!config.showDrafts ? [{ _status: { equals: 'published' } }] : []),
         ],
       },
       locale: locale as any,
@@ -114,6 +114,7 @@ export async function getProductBySlug(slug: string, locale: string): Promise<Pr
               : 50,
         },
         content: doc.content,
+        application: doc.application,
       };
     }
 
@@ -127,11 +128,10 @@ export async function getProductBySlug(slug: string, locale: string): Promise<Pr
 export async function getAllProductSlugs(locale: string): Promise<string[]> {
   try {
     const payload = await getPayload({ config: configPromise });
-    const isDev = process.env.NODE_ENV === 'development';
     const result = await payload.find({
       collection: 'products',
       where: {
-        ...(!isDev ? { _status: { equals: 'published' } } : {}),
+        ...(!config.showDrafts ? { _status: { equals: 'published' } } : {}),
       },
       locale: locale as any,
       pagination: false,
@@ -157,11 +157,10 @@ export async function getAllProducts(locale: string): Promise<ProductData[]> {
       images: true,
     } as const;
 
-    const isDev = process.env.NODE_ENV === 'development';
     const result = await payload.find({
       collection: 'products',
       where: {
-        ...(!isDev ? { _status: { equals: 'published' } } : {}),
+        ...(!config.showDrafts ? { _status: { equals: 'published' } } : {}),
       },
       locale: locale as any,
       depth: 1,
@@ -198,6 +197,7 @@ export async function getAllProducts(locale: string): Promise<ProductData[]> {
               : 50,
         },
         content: null,
+        application: null,
       };
     });
 

lib/services/create-services.server.ts

@@ -65,7 +65,15 @@ export function getServerAppServices(): AppServices {
   }
 
   const errors = config.errors.glitchtip.enabled
-    ? new GlitchtipErrorReportingService({ enabled: true }, logger, notifications)
+    ? new GlitchtipErrorReportingService(
+        {
+          enabled: true,
+          dsn: config.errors.glitchtip.dsn,
+          tracesSampleRate: 1.0, // Server-side we usually want higher visibility
+        },
+        logger,
+        notifications,
+      )
     : new NoopErrorReportingService();
 
   if (config.errors.glitchtip.enabled) {

lib/services/create-services.ts

@@ -69,7 +69,15 @@ export function getAppServices(): AppServices {
 
   // Create error reporting service (GlitchTip/Sentry or no-op)
   const errors = sentryEnabled
-    ? new GlitchtipErrorReportingService({ enabled: true }, logger, notifications)
+    ? new GlitchtipErrorReportingService(
+        {
+          enabled: true,
+          dsn: config.errors.glitchtip.dsn,
+          tracesSampleRate: 0.1, // Default to 10% sampling
+        },
+        logger,
+        notifications,
+      )
     : new NoopErrorReportingService();
 
   if (sentryEnabled) {

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

@@ -8,6 +8,8 @@ import type { LoggerService } from '../logging/logger-service';
 
 export type GlitchtipErrorReportingServiceOptions = {
   enabled: boolean;
+  dsn?: string;
+  tracesSampleRate?: number;
 };
 
 // GlitchTip speaks the Sentry protocol; @sentry/nextjs can send to GlitchTip via DSN.
@@ -46,12 +48,12 @@ export class GlitchtipErrorReportingService implements ErrorReportingService {
     if (!this.sentryPromise) {
       this.sentryPromise = import('@sentry/nextjs').then((Sentry) => {
         // Client-side initialization must happen here since sentry.client.config.ts is empty
-        if (typeof window !== 'undefined' && process.env.NODE_ENV === 'production') {
+        if (typeof window !== 'undefined' && this.options.enabled) {
           Sentry.init({
-            dsn: 'https://public@errors.infra.mintel.me/1',
+            dsn: this.options.dsn || 'https://public@errors.infra.mintel.me/1',
             tunnel: '/errors/api/relay',
             enabled: true,
-            tracesSampleRate: 0,
+            tracesSampleRate: this.options.tracesSampleRate ?? 0.1,
             replaysOnErrorSampleRate: 1.0,
             replaysSessionSampleRate: 0.1,
           });

middleware.ts

@@ -45,8 +45,10 @@ export default async function middleware(request: NextRequest) {
   if (internalHosts.includes(urlObj.hostname)) {
     const proto = headers.get('x-forwarded-proto') || 'https';
     // Prioritize x-forwarded-host (passed by Traefik) over the local Host header
-    const hostHeader =
-      headers.get('x-forwarded-host') || headers.get('host') || 'testing.klz-cables.com';
+    const fallbackHost = process.env.NEXT_PUBLIC_BASE_URL
+      ? new URL(process.env.NEXT_PUBLIC_BASE_URL).host
+      : 'klz-cables.com';
+    const hostHeader = headers.get('x-forwarded-host') || headers.get('host') || fallbackHost;
 
     urlObj.protocol = proto;
 

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -13,8 +13,11 @@ const nextConfig = {
   },
   experimental: {
     optimizePackageImports: ['lucide-react', 'framer-motion', '@/components/ui'],
+    cpus: 3,
+    workerThreads: false,
   },
   reactStrictMode: false,
+  swcMinify: true,
   productionBrowserSourceMaps: false,
   logging: {
     fetches: {
@@ -391,6 +394,7 @@ const nextConfig = {
   },
   images: {
     formats: ['image/webp'],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     remotePatterns: [
       {
         protocol: 'https',
@@ -400,6 +404,14 @@ const nextConfig = {
         protocol: 'https',
         hostname: '*.klz-cables.com',
       },
+      {
+        protocol: 'http',
+        hostname: 'klz-cables.com',
+      },
+      {
+        protocol: 'http',
+        hostname: '*.klz-cables.com',
+      },
       {
         protocol: 'http',
         hostname: 'klz.localhost',
@@ -425,6 +437,31 @@ const nextConfig = {
           source: '/de/kontakt',
           destination: '/de/contact',
         },
+        // Safety rewrites for English locale using German slugs (legacy or content errors)
+        {
+          source: '/en/produkte',
+          destination: '/en/products',
+        },
+        {
+          source: '/en/produkte/:path*',
+          destination: '/en/products/:path*',
+        },
+        {
+          source: '/en/kontakt',
+          destination: '/en/contact',
+        },
+        {
+          source: '/en/impressum',
+          destination: '/en/legal-notice',
+        },
+        {
+          source: '/en/datenschutz',
+          destination: '/en/privacy-policy',
+        },
+        {
+          source: '/en/agbs',
+          destination: '/en/terms',
+        },
       ],
       afterFiles: [],
       fallback: [],

package.json

@@ -4,19 +4,25 @@
   "private": true,
   "packageManager": "pnpm@10.18.3",
   "dependencies": {
-    "@mintel/mail": "1.8.3",
-    "@mintel/next-config": "1.8.3",
-    "@mintel/next-feedback": "1.8.10",
-    "@mintel/next-utils": "^1.7.15",
+    "@ai-sdk/google": "^3.0.31",
+    "@ai-sdk/openai": "^3.0.36",
+    "@mintel/mail": "^1.9.0",
+    "@mintel/next-config": "^1.9.0",
+    "@mintel/next-feedback": "^1.9.0",
+    "@mintel/next-utils": "^1.9.0",
     "@payloadcms/db-postgres": "^3.77.0",
     "@payloadcms/email-nodemailer": "^3.77.0",
     "@payloadcms/next": "^3.77.0",
     "@payloadcms/richtext-lexical": "^3.77.0",
     "@payloadcms/ui": "^3.77.0",
+    "@qdrant/js-client-rest": "^1.17.0",
     "@react-email/components": "^1.0.7",
     "@react-pdf/renderer": "^4.3.2",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
     "@sentry/nextjs": "^10.39.0",
     "@types/recharts": "^2.0.1",
+    "ai": "^6.0.101",
     "axios": "^1.13.5",
     "clsx": "^2.1.1",
     "framer-motion": "^12.34.0",
@@ -24,6 +30,7 @@
     "gray-matter": "^4.0.3",
     "i18next": "^25.7.3",
     "import-in-the-middle": "^1.11.0",
+    "ioredis": "^5.9.3",
     "jsdom": "^27.4.0",
     "leaflet": "^1.9.4",
     "next": "16.1.6",
@@ -38,13 +45,17 @@
     "react-dom": "^19.2.4",
     "react-email": "^5.2.5",
     "react-leaflet": "^4.2.1",
+    "react-markdown": "^10.1.0",
     "recharts": "^3.7.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
     "require-in-the-middle": "^8.0.1",
     "resend": "^3.5.0",
     "schema-dts": "^1.1.5",
     "sharp": "^0.34.5",
     "svg-to-pdfkit": "^0.1.8",
     "tailwind-merge": "^3.4.0",
+    "three": "^0.183.1",
     "xlsx": "npm:@e965/xlsx@^0.20.3",
     "zod": "3.25.76"
   },
@@ -53,8 +64,8 @@
     "@commitlint/config-conventional": "^20.4.0",
     "@cspell/dict-de-de": "^4.1.2",
     "@lhci/cli": "^0.15.1",
-    "@mintel/eslint-config": "1.8.3",
-    "@mintel/tsconfig": "1.8.3",
+    "@mintel/eslint-config": "^1.9.0",
+    "@mintel/tsconfig": "^1.9.0",
     "@next/bundle-analyzer": "^16.1.6",
     "@tailwindcss/cli": "^4.1.18",
     "@tailwindcss/postcss": "^4.1.18",
@@ -65,6 +76,7 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/sharp": "^0.31.1",
+    "@types/three": "^0.183.1",
     "@vitejs/plugin-react": "^5.1.4",
     "@vitest/ui": "^4.0.16",
     "autoprefixer": "^10.4.23",
@@ -79,6 +91,7 @@
     "lint-staged": "^16.2.7",
     "lucide-react": "^0.563.0",
     "pa11y-ci": "^4.0.1",
+    "pdf-parse": "^2.4.5",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
     "puppeteer": "^24.37.3",
@@ -110,6 +123,8 @@
     "check:security": "tsx ./scripts/check-security.ts",
     "check:links": "bash ./scripts/check-links.sh",
     "check:assets": "tsx ./scripts/check-broken-assets.ts",
+    "check:forms": "tsx ./scripts/check-forms.ts",
+    "check:apis": "tsx ./scripts/check-apis.ts",
     "pdf:datasheets": "tsx ./scripts/generate-pdf-datasheets.ts",
     "pdf:datasheets:legacy": "tsx ./scripts/generate-pdf-datasheets-pdf-lib.ts",
     "cms:migrate": "payload migrate",
@@ -136,7 +151,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.0.2",
+  "version": "2.2.12",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",

payload.config.ts

@@ -45,9 +45,7 @@ export default buildConfig({
     },
     meta: {
       titleSuffix: ' – KLZ Cables',
-      icons: [
-        { rel: 'icon', type: 'image/x-icon', url: '/favicon.ico' },
-      ],
+      icons: [{ rel: 'icon', type: 'image/x-icon', url: '/favicon.ico' }],
     },
   },
   localization: {
@@ -80,18 +78,25 @@ export default buildConfig({
         `postgresql://${process.env.PAYLOAD_DB_USER || 'payload'}:${process.env.PAYLOAD_DB_PASSWORD || '120in09oenaoinsd9iaidon'}@127.0.0.1:54322/${process.env.PAYLOAD_DB_NAME || 'payload'}`,
     },
   }),
-  email: nodemailerAdapter({
-    defaultFromAddress: process.env.MAIL_FROM?.replace(/.*<|>.*/g, '') || 'postmaster@mg.mintel.me',
-    defaultFromName: process.env.MAIL_FROM?.split('<')[0]?.trim() || 'KLZ Cables',
-    transportOptions: {
-      host: process.env.MAIL_HOST || 'smtp.eu.mailgun.org',
-      port: Number(process.env.MAIL_PORT) || 587,
-      auth: {
-        user: process.env.MAIL_USERNAME,
-        pass: process.env.MAIL_PASSWORD,
-      },
-    },
-  }),
+  email: process.env.MAIL_HOST
+    ? nodemailerAdapter({
+        defaultFromAddress:
+          process.env.MAIL_FROM?.replace(/.*<|>.*/g, '') || 'postmaster@mg.mintel.me',
+        defaultFromName: process.env.MAIL_FROM?.split('<')[0]?.trim() || 'KLZ Cables',
+        transportOptions: {
+          host: process.env.MAIL_HOST || 'smtp.eu.mailgun.org',
+          port: Number(process.env.MAIL_PORT) || 587,
+          ...(process.env.MAIL_USERNAME
+            ? {
+                auth: {
+                  user: process.env.MAIL_USERNAME,
+                  pass: process.env.MAIL_PASSWORD,
+                },
+              }
+            : {}),
+        },
+      })
+    : undefined,
   sharp,
   plugins: [],
 });

scripts/check-apis.ts

@@ -0,0 +1,119 @@
+import axios from 'axios';
+import dns from 'dns';
+import { promisify } from 'util';
+import url from 'url';
+
+const resolve4 = promisify(dns.resolve4);
+
+// This script verifies that external logging and analytics APIs are reachable
+// from the deployment environment (which could be behind corporate firewalls or VPNs).
+
+const umamiEndpoint = process.env.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me';
+const sentryDsn = process.env.SENTRY_DSN || '';
+
+async function checkUmami() {
+  console.log(`\n🔍 Checking Umami Analytics API Availability...`);
+  console.log(`   Endpoint: ${umamiEndpoint}`);
+
+  try {
+    // Umami usually exposes a /api/heartbeat or /api/health if we know the route.
+    // Trying root or /api/auth/verify (which will give 401 but proves routing works).
+    // A simple GET to the configured endpoint should return a 200 or 401, not a 5xx/timeout.
+    const response = await axios.get(`${umamiEndpoint.replace(/\/$/, '')}/api/health`, {
+      timeout: 5000,
+      validateStatus: () => true, // Accept any status, we just want to know it's reachable and not 5xx
+    });
+
+    // As long as it's not a 502/503/504 Bad Gateway/Timeout, the service is "up" from our perspective
+    if (response.status >= 500) {
+      throw new Error(`Umami API responded with server error HTTP ${response.status}`);
+    }
+
+    console.log(`   ✅ Umami Analytics is reachable (HTTP ${response.status})`);
+    return true;
+  } catch (err: any) {
+    // If /api/health fails completely, maybe try a DNS check as a fallback
+    try {
+      console.warn(`   ⚠️ HTTP check failed, falling back to DNS resolution...`);
+      const umamiHost = new url.URL(umamiEndpoint).hostname;
+      await resolve4(umamiHost);
+      console.log(`   ✅ Umami Analytics DNS resolved successfully (${umamiHost})`);
+      return true;
+    } catch (dnsErr: any) {
+      console.error(
+        `   ❌ CRITICAL: Umami Analytics is completely unreachable! ${err.message} | DNS: ${dnsErr.message}`,
+      );
+      return false;
+    }
+  }
+}
+
+async function checkSentry() {
+  console.log(`\n🔍 Checking Glitchtip/Sentry Error Tracking Availability...`);
+
+  if (!sentryDsn) {
+    console.log(`   ℹ️ No SENTRY_DSN provided in environment. Skipping.`);
+    return true;
+  }
+
+  try {
+    const parsedDsn = new url.URL(sentryDsn);
+    const host = parsedDsn.hostname;
+    console.log(`   Host: ${host}`);
+
+    // We do a DNS lookup to ensure the runner can actually resolve the tracking server
+    const addresses = await resolve4(host);
+
+    if (addresses && addresses.length > 0) {
+      console.log(`   ✅ Glitchtip/Sentry domain resolved: ${addresses[0]}`);
+
+      // Optional: Quick TCP/HTTP check to the host root (Glitchtip usually runs on 80/443 root)
+      try {
+        const proto = parsedDsn.protocol || 'https:';
+        await axios.get(`${proto}//${host}/api/0/`, {
+          timeout: 5000,
+          validateStatus: () => true,
+        });
+        console.log(`   ✅ Glitchtip/Sentry API root responds to HTTP.`);
+      } catch (ignore) {
+        console.log(
+          `   ⚠️ Glitchtip/Sentry HTTP ping failed or timed out, but DNS is valid. Proceeding.`,
+        );
+      }
+
+      return true;
+    }
+    throw new Error('No IP addresses found for DSN host');
+  } catch (err: any) {
+    console.error(
+      `   ❌ CRITICAL: Glitchtip/Sentry DSN is invalid or hostname is unresolvable! ${err.message}`,
+    );
+    return false;
+  }
+}
+
+async function main() {
+  console.log('🚀 Starting External API Connectivity Smoke Test...');
+
+  let hasErrors = false;
+
+  const umamiOk = await checkUmami();
+  if (!umamiOk) hasErrors = true;
+
+  const sentryOk = await checkSentry();
+  if (!sentryOk) hasErrors = true;
+
+  if (hasErrors) {
+    console.error(
+      `\n🚨 POST-DEPLOY CHECK FAILED: One or more critical external APIs are unreachable.`,
+    );
+    console.error(`   This might mean the deployment environment lacks outbound internet access, `);
+    console.error(`   DNS is misconfigured, or the upstream services are down.`);
+    process.exit(1);
+  }
+
+  console.log(`\n🎉 SUCCESS: All required external APIs are reachable!`);
+  process.exit(0);
+}
+
+main();

scripts/check-broken-assets.ts

@@ -2,11 +2,16 @@ import puppeteer, { HTTPResponse } from 'puppeteer';
 import axios from 'axios';
 import * as cheerio from 'cheerio';
 
-const targetUrl = process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
+const targetUrl =
+  process.argv.find((arg) => !arg.startsWith('--') && arg.startsWith('http')) ||
+  process.env.NEXT_PUBLIC_BASE_URL ||
+  'http://localhost:3000';
+const limit = process.env.ASSET_CHECK_LIMIT ? parseInt(process.env.ASSET_CHECK_LIMIT) : 20;
 const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
 
 async function main() {
   console.log(`\n🚀 Starting Strict Asset Integrity Check for: ${targetUrl}`);
+  console.log(`📊 Limit: ${limit} pages\n`);
 
   // 1. Fetch Sitemap to discover all routes
   const sitemapUrl = `${targetUrl.replace(/\/$/, '')}/sitemap.xml`;
@@ -31,6 +36,17 @@ async function main() {
       .sort();
 
     console.log(`✅ Found ${urls.length} target URLs.`);
+
+    if (urls.length > limit) {
+      console.log(
+        `⚠️  Too many pages (${urls.length}). Limiting to ${limit} representative pages.`,
+      );
+      // Simplify selection: home pages + a slice of the rest
+      const homeEN = urls.filter((u) => u.endsWith('/en') || u === targetUrl);
+      const homeDE = urls.filter((u) => u.endsWith('/de'));
+      const others = urls.filter((u) => !homeEN.includes(u) && !homeDE.includes(u));
+      urls = [...homeEN, ...homeDE, ...others.slice(0, limit - (homeEN.length + homeDE.length))];
+    }
   } catch (err: any) {
     console.error(`❌ Failed to fetch sitemap: ${err.message}`);
     process.exit(1);

scripts/check-forms.ts

@@ -0,0 +1,253 @@
+import puppeteer, { HTTPResponse } from 'puppeteer';
+import axios from 'axios';
+import * as cheerio from 'cheerio';
+
+const targetUrl = process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
+const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
+
+async function main() {
+  console.log(`\n🚀 Starting E2E Form Submission Check for: ${targetUrl}`);
+
+  // 1. Fetch Sitemap to discover the contact page and a product page
+  const sitemapUrl = `${targetUrl.replace(/\/$/, '')}/sitemap.xml`;
+  let urls: string[] = [];
+
+  try {
+    console.log(`📥 Fetching sitemap from ${sitemapUrl}...`);
+    const response = await axios.get(sitemapUrl, {
+      headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
+    });
+
+    const $ = cheerio.load(response.data, { xmlMode: true });
+    urls = $('url loc')
+      .map((i, el) => $(el).text())
+      .get();
+
+    // Normalize to target URL instance
+    const urlPattern = /https?:\/\/[^\/]+/;
+    urls = [...new Set(urls)]
+      .filter((u) => u.startsWith('http'))
+      .map((u) => u.replace(urlPattern, targetUrl.replace(/\/$/, '')))
+      .sort();
+  } catch (err: any) {
+    console.error(`❌ Failed to fetch sitemap: ${err.message}`);
+    process.exit(1);
+  }
+
+  const contactUrl = urls.find((u) => u.includes('/de/kontakt'));
+  // Ensure we select an actual product page (depth >= 7: http://host/de/produkte/category/product)
+  const productUrl = urls.find(
+    (u) =>
+      u.includes('/de/produkte/') && new URL(u).pathname.split('/').filter(Boolean).length >= 4,
+  );
+
+  if (!contactUrl) {
+    console.error(`❌ Could not find contact page in sitemap. Ensure /de/kontakt exists.`);
+    process.exit(1);
+  }
+
+  if (!productUrl) {
+    console.error(
+      `❌ Could not find a product page in sitemap. Form testing requires at least one product page.`,
+    );
+    process.exit(1);
+  }
+
+  console.log(`✅ Discovered Contact Page: ${contactUrl}`);
+  console.log(`✅ Discovered Product Page: ${productUrl}`);
+
+  // 2. Launch Headless Browser
+  console.log(`\n🕷️ Launching Puppeteer Headless Engine...`);
+  const browser = await puppeteer.launch({
+    headless: true,
+    executablePath: process.env.PUPPETEER_EXECUTABLE_PATH || process.env.CHROME_PATH || undefined,
+    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],
+  });
+
+  const page = await browser.newPage();
+
+  page.on('console', (msg) => console.log('💻 BROWSER CONSOLE:', msg.text()));
+  page.on('pageerror', (error) => console.error('💻 BROWSER ERROR:', error.message));
+  page.on('requestfailed', (request) => {
+    console.error('💻 BROWSER REQUEST FAILED:', request.url(), request.failure()?.errorText);
+  });
+
+  // 3. Authenticate through Gatekeeper login form
+  console.log(`\n🛡️ Authenticating through Gatekeeper...`);
+  try {
+    // Navigate to a protected page so Gatekeeper redirects us to the login screen
+    await page.goto(contactUrl, { waitUntil: 'networkidle0', timeout: 30000 });
+
+    // Check if we landed on the Gatekeeper login page
+    const isGatekeeperPage = await page.$('input[name="password"]');
+    if (isGatekeeperPage) {
+      await page.type('input[name="password"]', gatekeeperPassword);
+      await Promise.all([
+        page.waitForNavigation({ waitUntil: 'networkidle0', timeout: 30000 }),
+        page.click('button[type="submit"]'),
+      ]);
+      console.log(`✅ Gatekeeper authentication successful!`);
+    } else {
+      console.log(`✅ Already authenticated (no Gatekeeper gate detected).`);
+    }
+  } catch (err: any) {
+    console.error(`❌ Gatekeeper authentication failed: ${err.message}`);
+    await browser.close();
+    process.exit(1);
+  }
+
+  let hasErrors = false;
+
+  // 4. Test Contact Form
+  try {
+    console.log(`\n🧪 Testing Contact Form on: ${contactUrl}`);
+    await page.goto(contactUrl, { waitUntil: 'networkidle0', timeout: 30000 });
+
+    // Ensure React has hydrated completely
+    await page.waitForNetworkIdle({ idleTime: 1000, timeout: 15000 }).catch(() => {});
+
+    // Ensure form is visible and interactive
+    try {
+      // Find the form input by name
+      await page.waitForSelector('input[name="name"]', { visible: true, timeout: 15000 });
+    } catch (e) {
+      console.error('Failed to find Contact Form input. Page Title:', await page.title());
+      throw e;
+    }
+
+    // Wait specifically for hydration logic to initialize the onSubmit handler
+    await page.evaluate(() => new Promise((resolve) => setTimeout(resolve, 2000)));
+
+    // Fill form fields
+    await page.type('input[name="name"]', 'Automated E2E Test');
+    await page.type('input[name="email"]', 'testing@mintel.me');
+    await page.type(
+      'textarea[name="message"]',
+      'This is an automated test verifying the contact form submission.',
+    );
+
+    // Give state a moment to settle
+    await page.evaluate(() => new Promise((resolve) => setTimeout(resolve, 500)));
+
+    console.log(`   Submitting Contact Form...`);
+
+    // Explicitly click submit and wait for navigation/state-change
+    await Promise.all([
+      page.waitForSelector('[role="alert"]', { timeout: 15000 }),
+      page.click('button[type="submit"]'),
+    ]);
+
+    const alertText = await page.$eval('[role="alert"]', (el) => el.textContent);
+    console.log(`   Alert text: ${alertText}`);
+
+    if (alertText?.includes('Failed') || alertText?.includes('went wrong')) {
+      throw new Error(`Form submitted but showed error: ${alertText}`);
+    }
+
+    console.log(`✅ Contact Form submitted successfully! (Success state verified)`);
+  } catch (err: any) {
+    console.error(`❌ Contact Form Test Failed: ${err.message}`);
+    hasErrors = true;
+  }
+
+  // 4. Test Product Quote Form
+  try {
+    console.log(`\n🧪 Testing Product Quote Form on: ${productUrl}`);
+    await page.goto(productUrl, { waitUntil: 'networkidle0', timeout: 30000 });
+
+    // Ensure React has hydrated completely
+    await page.waitForNetworkIdle({ idleTime: 1000, timeout: 15000 }).catch(() => {});
+
+    // The product form uses dynamic IDs, so we select by input type in the specific form context
+    try {
+      await page.waitForSelector('form input[type="email"]', { visible: true, timeout: 15000 });
+    } catch (e) {
+      console.error('Failed to find Product Quote Form input. Page Title:', await page.title());
+      throw e;
+    }
+
+    // Wait specifically for hydration logic to initialize the onSubmit handler
+    await page.evaluate(() => new Promise((resolve) => setTimeout(resolve, 2000)));
+
+    // In RequestQuoteForm, the email input is type="email" and message is a textarea.
+    await page.type('form input[type="email"]', 'testing@mintel.me');
+    await page.type(
+      'form textarea',
+      'Automated request for product quote via E2E testing framework.',
+    );
+
+    // Give state a moment to settle
+    await page.evaluate(() => new Promise((resolve) => setTimeout(resolve, 500)));
+
+    console.log(`   Submitting Product Quote Form...`);
+
+    // Submit and wait for success state
+    await Promise.all([
+      page.waitForSelector('[role="alert"]', { timeout: 15000 }),
+      page.click('form button[type="submit"]'),
+    ]);
+
+    const alertText = await page.$eval('[role="alert"]', (el) => el.textContent);
+    console.log(`   Alert text: ${alertText}`);
+
+    if (alertText?.includes('Failed') || alertText?.includes('went wrong')) {
+      throw new Error(`Form submitted but showed error: ${alertText}`);
+    }
+
+    console.log(`✅ Product Quote Form submitted successfully! (Success state verified)`);
+  } catch (err: any) {
+    console.error(`❌ Product Quote Form Test Failed: ${err.message}`);
+    hasErrors = true;
+  }
+
+  // 5. Cleanup: Delete test submissions from Payload CMS
+  console.log(`\n🧹 Starting cleanup of test submissions...`);
+  try {
+    const apiUrl = `${targetUrl.replace(/\/$/, '')}/api/form-submissions`;
+    const searchUrl = `${apiUrl}?where[email][equals]=testing@mintel.me`;
+
+    // Fetch test submissions
+    const searchResponse = await axios.get(searchUrl, {
+      headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
+    });
+
+    const testSubmissions = searchResponse.data.docs || [];
+    console.log(`   Found ${testSubmissions.length} test submissions to clean up.`);
+
+    for (const doc of testSubmissions) {
+      try {
+        await axios.delete(`${apiUrl}/${doc.id}`, {
+          headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
+        });
+        console.log(`   ✅ Deleted submission: ${doc.id}`);
+      } catch (delErr: any) {
+        // Log but don't fail, 403s on Directus / Payload APIs for guest Gatekeeper sessions are normal
+        console.warn(
+          `   ⚠️ Cleanup attempt on ${doc.id} returned an error, typically due to API Auth separation: ${delErr.message}`,
+        );
+      }
+    }
+  } catch (err: any) {
+    if (err.response?.status === 403) {
+      console.warn(
+        `   ⚠️ Cleanup fetch failed with 403 Forbidden. This is expected if the runner lacks admin API credentials. Test submissions remain in the database.`,
+      );
+    } else {
+      console.error(`   ❌ Cleanup fetch failed: ${err.message}`);
+    }
+    // Don't mark the whole test as failed just because cleanup failed
+  }
+
+  await browser.close();
+
+  // 6. Evaluation
+  if (hasErrors) {
+    console.error(`\n🚨 IMPORTANT: Form E2E checks failed. The CI build is failing.`);
+    process.exit(1);
+  } else {
+    console.log(`\n🎉 SUCCESS: All form submissions arrived and handled correctly!`);
+    process.exit(0);
+  }
+}
+
+main();

scripts/check-html.ts

@@ -50,7 +50,12 @@ async function main() {
           headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
           validateStatus: (status) => status < 400,
         });
-        const filename = `page-${i}.html`;
+
+        // Generate a safe filename that retains URL information
+        const urlStr = new URL(u);
+        const safePath = (urlStr.pathname + urlStr.search).replace(/[^a-zA-Z0-9]/g, '_');
+        const filename = `${safePath || 'index'}.html`;
+
         fs.writeFileSync(path.join(outputDir, filename), res.data);
       } catch (err: any) {
         console.error(`❌ HTTP Error fetching ${u}: ${err.message}`);

scripts/cms-sync.sh

@@ -53,12 +53,17 @@ TIMESTAMP=$(date +"%Y%m%d_%H%M%S")
 REMOTE_DB_USER=""
 REMOTE_DB_NAME=""
 
-# Migration names to insert after restore (keeps Payload from prompting)
-MIGRATIONS=(
-  "20260223_195005_products_collection:1"
-  "20260223_195151_remove_sku_unique:2"
-  "20260225_003500_add_pages_collection:3"
-)
+# Auto-detect migrations from src/migrations/*.ts (no manual maintenance needed)
+MIGRATIONS=()
+BATCH=1
+for migration_file in $(ls src/migrations/*.ts 2>/dev/null | sort); do
+  name=$(basename "$migration_file" .ts)
+  MIGRATIONS+=("$name:$BATCH")
+  ((BATCH++))
+done
+if [ ${#MIGRATIONS[@]} -eq 0 ]; then
+  echo "⚠️  No migration files found in src/migrations/"
+fi
 
 # ── Resolve target environment ─────────────────────────────────────────────
 resolve_target() {
@@ -158,6 +163,29 @@ backup_remote_db() {
   REMOTE_BACKUP_FILE="$file"
 }
 
+# ── Pre-flight: Verify remote containers exist ─────────────────────────────
+check_remote_containers() {
+  echo "🔍 Checking $TARGET containers..."
+  local missing=0
+  if ! ssh "$SSH_HOST" "docker ps -q -f name=$REMOTE_DB_CONTAINER" | grep -q .; then
+    echo "❌ Database container '$REMOTE_DB_CONTAINER' not found on $SSH_HOST"
+    echo "   → Deploy $TARGET first: git push to trigger pipeline, or run:"
+    echo "     ssh $SSH_HOST \"cd $REMOTE_SITE_DIR && docker compose -p $REMOTE_PROJECT --env-file .env.\$TARGET up -d\""
+    missing=1
+  fi
+  if ! ssh "$SSH_HOST" "docker ps -q -f name=$REMOTE_APP_CONTAINER" | grep -q .; then
+    echo "❌ App container '$REMOTE_APP_CONTAINER' not found on $SSH_HOST"
+    missing=1
+  fi
+  if [ $missing -eq 1 ]; then
+    echo ""
+    echo "💡 The $TARGET environment hasn't been deployed yet."
+    echo "   Push to the '$TARGET' branch or run the pipeline first."
+    exit 1
+  fi
+  echo "✅ All $TARGET containers running."
+}
+
 # ── PUSH: local → remote ──────────────────────────────────────────────────
 do_push() {
   echo ""
@@ -171,8 +199,9 @@ do_push() {
   echo ""
   [[ ! $REPLY =~ ^[Yy]$ ]] && { echo "Cancelled."; exit 0; }
 
-  # 0. Ensure local DB is running
+  # 0. Ensure local DB is running & remote containers exist
   ensure_local_db
+  check_remote_containers
 
   # 1. Safety backup of remote
   backup_remote_db
@@ -226,8 +255,9 @@ do_pull() {
   echo ""
   [[ ! $REPLY =~ ^[Yy]$ ]] && { echo "Cancelled."; exit 0; }
 
-  # 0. Ensure local DB is running
+  # 0. Ensure local DB is running & remote containers exist
   ensure_local_db
+  check_remote_containers
 
   # 1. Safety backup of local
   backup_local_db

scripts/lhci-puppeteer-setup.js

@@ -0,0 +1,24 @@
+/**
+ * LHCI Puppeteer Setup Script
+ * Sets the gatekeeper session cookie before auditing
+ */
+module.exports = async (browser, context) => {
+  const page = await browser.newPage();
+  // Using LHCI_URL or TARGET_URL if available
+  const targetUrl =
+    process.env.LHCI_URL || process.env.TARGET_URL || 'https://testing.klz-cables.com';
+  const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
+
+  console.log(`🔑 LHCI Auth: Setting gatekeeper cookie for ${new URL(targetUrl).hostname}...`);
+
+  await page.setCookie({
+    name: 'klz_gatekeeper_session',
+    value: gatekeeperPassword,
+    domain: new URL(targetUrl).hostname,
+    path: '/',
+    httpOnly: true,
+    secure: targetUrl.startsWith('https://'),
+  });
+
+  await page.close();
+};

scripts/pagespeed-sitemap.ts

@@ -12,7 +12,11 @@ import * as path from 'path';
  * 3. Runs Lighthouse CI on those URLs
  */
 
-const targetUrl = process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
+const targetUrl =
+  process.argv.find((arg) => !arg.startsWith('--') && arg.startsWith('http')) ||
+  process.env.NEXT_PUBLIC_BASE_URL ||
+  process.env.LHCI_URL ||
+  'http://localhost:3000';
 const limit = process.env.PAGESPEED_LIMIT ? parseInt(process.env.PAGESPEED_LIMIT) : 20; // Default limit to avoid infinite runs
 const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
 
@@ -76,7 +80,56 @@ async function main() {
       Cookie: `klz_gatekeeper_session=${gatekeeperPassword}`,
     });
 
-    const chromePath = process.env.CHROME_PATH || process.env.PUPPETEER_EXECUTABLE_PATH;
+    // Detect Chrome path from Puppeteer installation if not provided
+    let chromePath = process.env.CHROME_PATH || process.env.PUPPETEER_EXECUTABLE_PATH;
+    if (!chromePath) {
+      try {
+        console.log('🔍 Attempting to detect Puppeteer Chrome path...');
+        const puppeteerInfo = execSync('npx puppeteer browsers latest chrome', {
+          encoding: 'utf8',
+        });
+        console.log(`📦 Puppeteer info: ${puppeteerInfo}`);
+        const match = puppeteerInfo.match(/executablePath: (.*)/);
+        if (match && match[1]) {
+          chromePath = match[1].trim();
+          console.log(`✅ Detected Puppeteer Chrome at: ${chromePath}`);
+        }
+      } catch (e: any) {
+        console.warn(`⚠️ Could not detect Puppeteer Chrome path via command: ${e.message}`);
+      }
+
+      // Fallback to known paths if still not found
+      if (!chromePath) {
+        const fallbacks = [
+          '/root/.cache/puppeteer/chrome/linux-145.0.7632.77/chrome-linux64/chrome',
+          '/home/runner/.cache/puppeteer/chrome/linux-145.0.7632.77/chrome-linux64/chrome',
+          path.join(
+            process.cwd(),
+            'node_modules',
+            '.puppeteer',
+            'chrome',
+            'linux-145.0.7632.77',
+            'chrome-linux64',
+            'chrome',
+          ),
+        ];
+
+        for (const fallback of fallbacks) {
+          if (fs.existsSync(fallback)) {
+            chromePath = fallback;
+            console.log(`✅ Found Puppeteer Chrome at fallback: ${chromePath}`);
+            break;
+          }
+        }
+      }
+    } else {
+      console.log(`ℹ️ Using existing Chrome path: ${chromePath}`);
+    }
+
+    if (!chromePath) {
+      console.warn('❌ CHROME_PATH is still undefined. Lighthouse might fail.');
+    }
+
     const chromePathArg = chromePath ? `--collect.chromePath="${chromePath}"` : '';
 
     // Clean up old reports
@@ -85,15 +138,16 @@ async function main() {
     }
 
     // Using a more robust way to execute and capture output
-    // We remove 'npx lhci upload' to keep everything local and avoid Google-hosted reports
-    const lhciCommand = `npx lhci collect ${urlArgs} ${chromePathArg} --config=config/lighthouserc.json --collect.settings.extraHeaders='${extraHeaders}' --collect.settings.chromeFlags="--no-sandbox --disable-setuid-sandbox --disable-dev-shm-usage" && npx lhci assert --config=config/lighthouserc.json`;
+    // We use a puppeteer script to set cookies which is more reliable than extraHeaders for LHCI
+    const lhciCommand = `npx lhci collect ${urlArgs} ${chromePathArg} --config=config/lighthouserc.json --collect.puppeteerScript="scripts/lhci-puppeteer-setup.js" --collect.settings.chromeFlags="--no-sandbox --disable-setuid-sandbox --disable-dev-shm-usage" && npx lhci assert --config=config/lighthouserc.json`;
 
-    console.log(`💻 Executing LHCI...`);
+    console.log(`💻 Executing LHCI with CHROME_PATH="${chromePath}" and Puppeteer Auth...`);
 
     try {
       execSync(lhciCommand, {
         encoding: 'utf8',
         stdio: 'inherit',
+        env: { ...process.env, CHROME_PATH: chromePath },
       });
     } catch (err: any) {
       console.warn('⚠️ LHCI assertion finished with warnings or errors.');

src/lib/qdrant.ts

@@ -0,0 +1,134 @@
+import { QdrantClient } from '@qdrant/js-client-rest';
+
+const isDockerContainer =
+  process.env.IS_DOCKER === 'true' || process.env.HOSTNAME?.includes('klz-app');
+const qdrantUrl =
+  process.env.QDRANT_URL ||
+  (isDockerContainer ? 'http://klz-qdrant:6333' : 'http://localhost:6333');
+const qdrantApiKey = process.env.QDRANT_API_KEY || '';
+
+export const qdrant = new QdrantClient({
+  url: qdrantUrl,
+  apiKey: qdrantApiKey || undefined,
+});
+
+export const COLLECTION_NAME = 'klz_products';
+export const VECTOR_SIZE = 1536; // OpenAI text-embedding-3-small
+
+/**
+ * Ensure the collection exists in Qdrant.
+ */
+export async function ensureCollection() {
+  try {
+    const collections = await qdrant.getCollections();
+    const exists = collections.collections.some((c) => c.name === COLLECTION_NAME);
+    if (!exists) {
+      await qdrant.createCollection(COLLECTION_NAME, {
+        vectors: {
+          size: VECTOR_SIZE,
+          distance: 'Cosine',
+        },
+      });
+      console.log(`Successfully created Qdrant collection: ${COLLECTION_NAME}`);
+    }
+  } catch (error) {
+    console.error('Error ensuring Qdrant collection:', error);
+  }
+}
+
+/**
+ * Generate an embedding for a given text using OpenRouter (OpenAI embedding proxy)
+ */
+export async function generateEmbedding(text: string): Promise<number[]> {
+  const openRouterKey = process.env.OPENROUTER_API_KEY;
+  if (!openRouterKey) {
+    throw new Error('OPENROUTER_API_KEY is not set');
+  }
+
+  const response = await fetch('https://openrouter.ai/api/v1/embeddings', {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${openRouterKey}`,
+      'Content-Type': 'application/json',
+      'HTTP-Referer': process.env.NEXT_PUBLIC_BASE_URL || 'https://klz-cables.com',
+      'X-Title': 'KLZ Cables Search AI',
+    },
+    body: JSON.stringify({
+      model: 'openai/text-embedding-3-small',
+      input: text,
+    }),
+  });
+
+  if (!response.ok) {
+    const errorBody = await response.text();
+    throw new Error(
+      `Failed to generate embedding: ${response.status} ${response.statusText} ${errorBody}`,
+    );
+  }
+
+  const data = await response.json();
+  return data.data[0].embedding;
+}
+
+/**
+ * Upsert a product into Qdrant
+ */
+export async function upsertProductVector(
+  id: string | number,
+  text: string,
+  payload: Record<string, any>,
+) {
+  try {
+    await ensureCollection();
+    const vector = await generateEmbedding(text);
+
+    await qdrant.upsert(COLLECTION_NAME, {
+      wait: true,
+      points: [
+        {
+          id: id,
+          vector,
+          payload,
+        },
+      ],
+    });
+  } catch (error) {
+    console.error('Error writing to Qdrant:', error);
+  }
+}
+
+/**
+ * Delete a product from Qdrant
+ */
+export async function deleteProductVector(id: string | number) {
+  try {
+    await ensureCollection();
+    await qdrant.delete(COLLECTION_NAME, {
+      wait: true,
+      points: [id] as [string | number],
+    });
+  } catch (error) {
+    console.error('Error deleting from Qdrant:', error);
+  }
+}
+
+/**
+ * Search products in Qdrant
+ */
+export async function searchProducts(query: string, limit = 5) {
+  try {
+    await ensureCollection();
+    const vector = await generateEmbedding(query);
+
+    const results = await qdrant.search(COLLECTION_NAME, {
+      vector,
+      limit,
+      with_payload: true,
+    });
+
+    return results;
+  } catch (error) {
+    console.error('Error searching in Qdrant:', error);
+    return [];
+  }
+}

src/lib/redis.ts

@@ -0,0 +1,22 @@
+import Redis from 'ioredis';
+
+const isDockerContainer =
+  process.env.IS_DOCKER === 'true' || process.env.HOSTNAME?.includes('klz-app');
+const redisUrl =
+  process.env.REDIS_URL ||
+  (isDockerContainer ? 'redis://klz-redis:6379' : 'redis://localhost:6379');
+
+// Only create a single instance in Node.js
+const globalForRedis = global as unknown as { redis: Redis };
+
+export const redis =
+  globalForRedis.redis ||
+  new Redis(redisUrl, {
+    maxRetriesPerRequest: 3,
+  });
+
+if (process.env.NODE_ENV !== 'production') {
+  globalForRedis.redis = redis;
+}
+
+export default redis;

src/payload/collections/Pages.ts

@@ -13,7 +13,7 @@ export const Pages: CollectionConfig = {
   },
   access: {
     read: ({ req: { user } }) => {
-      if (process.env.NODE_ENV === 'development') {
+      if (process.env.NODE_ENV === 'development' || process.env.TARGET === 'staging') {
         return true;
       }
       if (user) {

src/payload/collections/Posts.ts

@@ -23,7 +23,7 @@ export const Posts: CollectionConfig = {
   },
   access: {
     read: ({ req: { user } }) => {
-      if (process.env.NODE_ENV === 'development') {
+      if (process.env.NODE_ENV === 'development' || process.env.TARGET === 'staging') {
         return true;
       }
       if (user) {

src/payload/collections/Products.ts

@@ -24,7 +24,7 @@ export const Products: CollectionConfig = {
   },
   access: {
     read: ({ req: { user } }) => {
-      if (process.env.NODE_ENV === 'development') {
+      if (process.env.NODE_ENV === 'development' || process.env.TARGET === 'staging') {
         return true;
       }
       if (user) {
@@ -37,6 +37,51 @@ export const Products: CollectionConfig = {
       };
     },
   },
+  hooks: {
+    afterChange: [
+      async ({ doc, req, operation }) => {
+        // Run index sync asynchronously to not block the CMS save operation
+        setTimeout(async () => {
+          try {
+            const { upsertProductVector, deleteProductVector } = await import('../../lib/qdrant');
+
+            // Check if product is published
+            if (doc._status !== 'published') {
+              await deleteProductVector(doc.id);
+              req.payload.logger.info(`Removed drafted product ${doc.sku} from Qdrant`);
+            } else {
+              // Serialize payload
+              const contentText = `${doc.title} - SKU: ${doc.sku}\n${doc.description || ''}`;
+              const payload = {
+                id: doc.id,
+                title: doc.title,
+                sku: doc.sku,
+                slug: doc.slug,
+                description: doc.description,
+                featuredImage: doc.featuredImage, // usually just ID or URL depending on depth
+              };
+              await upsertProductVector(doc.id, contentText, payload);
+              req.payload.logger.info(`Upserted product ${doc.sku} to Qdrant`);
+            }
+          } catch (error) {
+            req.payload.logger.error({ msg: 'Error syncing product to Qdrant', err: error, productId: doc.id });
+          }
+        }, 0);
+        return doc;
+      },
+    ],
+    afterDelete: [
+      async ({ id, req }) => {
+        try {
+          const { deleteProductVector } = await import('../../lib/qdrant');
+          await deleteProductVector(id as string | number);
+          req.payload.logger.info(`Deleted product ${id} from Qdrant`);
+        } catch (error) {
+          req.payload.logger.error({ msg: 'Error deleting product from Qdrant', err: error, productId: id });
+        }
+      },
+    ],
+  },
   fields: [
     {
       name: 'title',

src/scripts/ingest-pdf.ts

@@ -0,0 +1,63 @@
+import fs from 'fs';
+import path from 'path';
+import crypto from 'crypto';
+
+// Override Qdrant URL for local script execution outside docker
+process.env.QDRANT_URL = process.env.QDRANT_URL || 'http://localhost:6333';
+
+import { upsertProductVector } from '../lib/qdrant';
+
+// Ingests the extracted Kabelhandbuch text into Qdrant as distinct knowledge topics.
+async function ingestPDF(txtPath: string) {
+  if (!fs.existsSync(txtPath)) {
+    console.error(`File not found: ${txtPath}`);
+    process.exit(1);
+  }
+
+  try {
+    const text = fs.readFileSync(txtPath, 'utf8');
+
+    // Simple sentence/paragraph chunking
+    // We split by standard paragraph breaks (double newline) or large content blocks.
+    const chunks = text
+      .split(/\n\s*\n/)
+      .map((c) => c.trim())
+      .filter((c) => c.length > 50);
+
+    console.log(`Extracted ${text.length} characters from PDF.`);
+    console.log(`Generated ${chunks.length} chunks for vector ingestion.\n`);
+
+    for (let i = 0; i < chunks.length; i++) {
+      // We limit chuck sizes to ensure Openrouter embedding models don't timeout/fail,
+      // stringing multiple paragraphs if they are short, or cutting them if too long.
+      // For baseline, we'll index every chunk individually mapped as 'knowledge' with a unique ID
+
+      const chunkText = chunks[i];
+
+      // Generate a synthetic ID that won't collide with Payload Product IDs
+      // Qdrant strictly requires UUID or unsigned int.
+      const syntheticId = crypto.randomUUID();
+
+      const payloadData = {
+        type: 'knowledge', // Custom flag to differentiate from 'product'
+        title: `Kabelhandbuch Wissen - Bereich ${i + 1}`,
+        content: chunkText,
+        source: 'Kabelhandbuch KLZ.pdf',
+      };
+
+      // Use the existing upsert function since it just embeds the text and stores the payload
+      await upsertProductVector(syntheticId, chunkText, payloadData);
+      console.log(`✅ Upserted chunk ${i + 1}/${chunks.length}`);
+    }
+
+    console.log('🎉 PDF Ingestion Complete!');
+    process.exit(0);
+  } catch (err) {
+    console.error('Failed to parse PDF:', err);
+    process.exit(1);
+  }
+}
+
+// Run mapping
+const targetTxt = '/Users/marcmintel/Downloads/kabelhandbuch.txt';
+ingestPDF(targetTxt);

test-chat2.mjs

@@ -0,0 +1,20 @@
+import fetch from 'node-fetch';
+
+async function test() {
+  const messages = [
+    { role: 'user', content: 'Ich will einen Windpark bauen' }
+  ];
+
+  console.log('Sending message:', messages[0].content);
+
+  const res = await fetch('http://localhost:3000/api/ai-search', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ messages })
+  });
+
+  const data = await res.json();
+  console.log('\nAI Response:', data);
+}
+
+test().catch(console.error);

test-simple.mjs

@@ -0,0 +1,16 @@
+import { generateText } from 'ai';
+import { createOpenAI } from '@ai-sdk/openai';
+
+const openrouter = createOpenAI({
+  baseURL: 'https://openrouter.ai/api/v1',
+  apiKey: process.env.OPENROUTER_API_KEY,
+});
+
+async function run() {
+  const { text } = await generateText({
+    model: openrouter('mistralai/mistral-large-2407'),
+    prompt: 'Hello world! Reply in one word.',
+  });
+  console.log('Result:', text);
+}
+run();

tests/og-image.test.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, beforeAll } from 'vitest';
 
-const BASE_URL = process.env.TEST_URL || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
+const BASE_URL =
+  process.env.TEST_URL || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
 
 describe('OG Image Generation', () => {
   const locales = ['de', 'en'];
@@ -18,7 +19,9 @@ describe('OG Image Generation', () => {
           return;
         }
       }
-      console.log(`\n⚠️  KLZ Application not detected at ${BASE_URL}. Skipping integration tests.\n`);
+      console.log(
+        `\n⚠️  KLZ Application not detected at ${BASE_URL}. Skipping integration tests.\n`,
+      );
     } catch (e) {
       isServerUp = false;
     }
@@ -34,7 +37,7 @@ describe('OG Image Generation', () => {
     // Check for PNG signature: 89 50 4E 47 0D 0A 1A 0A
     expect(bytes[0]).toBe(0x89);
     expect(bytes[1]).toBe(0x50);
-    expect(bytes[2]).toBe(0x4E);
+    expect(bytes[2]).toBe(0x4e);
     expect(bytes[3]).toBe(0x47);
 
     // Check that the image is not empty and has a reasonable size
@@ -49,7 +52,9 @@ describe('OG Image Generation', () => {
       await verifyImageResponse(response);
     }, 30000);
 
-    it(`should generate product OG image for ${locale} with slug ${productSlugs[0]}`, async ({ skip }) => {
+    it(`should generate product OG image for ${locale} with slug ${productSlugs[0]}`, async ({
+      skip,
+    }) => {
       if (!isServerUp) skip();
       const url = `${BASE_URL}/${locale}/api/og/product?slug=${productSlugs[0]}`;
       const response = await fetch(url);
@@ -64,11 +69,38 @@ describe('OG Image Generation', () => {
     }, 30000);
   });
 
-  it('should generate blog OG image', async ({ skip }) => {
+  it('should generate static blog overview OG image', async ({ skip }) => {
     if (!isServerUp) skip();
     const url = `${BASE_URL}/de/blog/opengraph-image`;
     const response = await fetch(url);
     await verifyImageResponse(response);
   }, 30000);
-});
 
+  it('should generate dynamic blog post OG image with featured photo', async ({ skip }) => {
+    if (!isServerUp) skip();
+
+    // Discover a real blog slug from the sitemap
+    const sitemapRes = await fetch(`${BASE_URL}/sitemap.xml`);
+    const sitemapXml = await sitemapRes.text();
+    const blogMatch = sitemapXml.match(/<loc>[^<]*\/de\/blog\/([^<]+)<\/loc>/);
+    const slug = blogMatch ? blogMatch[1] : null;
+
+    if (!slug) {
+      console.log('⚠️  No blog post found in sitemap, skipping dynamic OG test');
+      skip();
+      return;
+    }
+
+    const url = `${BASE_URL}/de/blog/${slug}/opengraph-image`;
+    const response = await fetch(url);
+    await verifyImageResponse(response);
+
+    // Verify the image is substantially large (>50KB) to confirm it actually
+    // contains the featured photo and isn't just a tiny fallback/text-only image
+    const buffer = await response.clone().arrayBuffer();
+    expect(
+      buffer.byteLength,
+      `OG image for "${slug}" is suspiciously small (${buffer.byteLength} bytes) — likely missing featured photo`,
+    ).toBeGreaterThan(50000);
+  }, 30000);
+});