ci: ensure docker cli is available in build job

.dockerignore

@@ -1,10 +1,10 @@
 node_modules
 .next
+!.next/cache
 .git
 .DS_Store
 .env
 *.md
 docs
 reference
-scripts
 public/datasheets/*.pdf

.env

@@ -1,7 +1,31 @@
+# Application
+NODE_ENV=production
+NEXT_PUBLIC_BASE_URL=https://klz-cables.com
+UMAMI_SCRIPT_URL=https://analytics.infra.mintel.me/script.js
+NEXT_PUBLIC_UMAMI_WEBSITE_ID=59a7db94-0100-4c7e-98ef-99f45b17f9c3
+SENTRY_DSN=https://c10957d0182245b1a2a806ac2d34a197@errors.infra.mintel.me/1
+LOG_LEVEL=info
+
+# WooCommerce & WordPress
 WOOCOMMERCE_URL=https://klz-cables.com
 WOOCOMMERCE_CONSUMER_KEY=ck_38d97df86880e8fefbd54ab5cdf47a9c5a9e5b39
 WOOCOMMERCE_CONSUMER_SECRET=cs_d675ee2ac2ec7c22de84ae5451c07e42b1717759
-WORDPRESS_APP_PASSWORD=DlJH 49dp fC3a Itc3 Sl7Z Wz0k'
+WORDPRESS_APP_PASSWORD="DlJH 49dp fC3a Itc3 Sl7Z Wz0k"
 
-# Umami Analytics
-NEXT_PUBLIC_UMAMI_WEBSITE_ID=59a7db94-0100-4c7e-98ef-99f45b17f9c3
+# 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
+
+# Directus
+DIRECTUS_URL=https://cms.klz-cables.com
+DIRECTUS_KEY=59fb8f4c1a51b18fe28ad947f713914e
+DIRECTUS_SECRET=7459038d41401dfb11254cf7f1ef2d0f
+DIRECTUS_ADMIN_EMAIL=marc@mintel.me
+DIRECTUS_ADMIN_PASSWORD=Tim300493.
+DIRECTUS_DB_NAME=directus
+DIRECTUS_DB_USER=directus
+DIRECTUS_DB_PASSWORD=directus

.env.example

@@ -0,0 +1,83 @@
+# ============================================================================
+# KLZ Cables - Environment Configuration
+# ============================================================================
+# Copy this file to .env for local development
+# For production, use .env.production as a template
+# ============================================================================
+
+# ────────────────────────────────────────────────────────────────────────────
+# Application Configuration
+# ────────────────────────────────────────────────────────────────────────────
+NODE_ENV=development
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
+
+# ────────────────────────────────────────────────────────────────────────────
+# Analytics (Umami)
+# ────────────────────────────────────────────────────────────────────────────
+# Optional: Leave empty to disable analytics
+NEXT_PUBLIC_UMAMI_WEBSITE_ID=
+NEXT_PUBLIC_UMAMI_SCRIPT_URL=https://analytics.infra.mintel.me/script.js
+
+# ────────────────────────────────────────────────────────────────────────────
+# Error Tracking (GlitchTip/Sentry)
+# ────────────────────────────────────────────────────────────────────────────
+# Optional: Leave empty to disable error tracking
+SENTRY_DSN=
+
+# ────────────────────────────────────────────────────────────────────────────
+# Email Configuration (SMTP)
+# ────────────────────────────────────────────────────────────────────────────
+# Required for contact form functionality
+MAIL_HOST=smtp.eu.mailgun.org
+MAIL_PORT=587
+MAIL_USERNAME=
+MAIL_PASSWORD=
+MAIL_FROM=KLZ Cables <noreply@klz-cables.com>
+MAIL_RECIPIENTS=info@klz-cables.com
+
+# ────────────────────────────────────────────────────────────────────────────
+# Logging
+# ────────────────────────────────────────────────────────────────────────────
+LOG_LEVEL=info
+GATEKEEPER_PASSWORD=klz2026
+SENTRY_DSN=
+# For Directus Error Tracking
+# SENTRY_ENVIRONMENT is set automatically by CI
+
+# ────────────────────────────────────────────────────────────────────────────
+# Deployment Configuration (CI/CD only)
+# ────────────────────────────────────────────────────────────────────────────
+# These are typically set by the CI/CD workflow
+IMAGE_TAG=latest
+TRAEFIK_HOST=klz-cables.com
+ENV_FILE=.env
+
+# ============================================================================
+# IMPORTANT NOTES
+# ============================================================================
+#
+# BUILD-TIME vs RUNTIME Variables:
+# ─────────────────────────────────
+# • NEXT_PUBLIC_* variables are baked into the client bundle at BUILD time
+#   They must be provided as --build-arg when building the Docker image
+#
+# • All other variables are used at RUNTIME only
+#   They are loaded from the .env file by docker-compose
+#
+# Docker Deployment:
+# ──────────────────
+# 1. Build-time: Only NEXT_PUBLIC_* vars are needed (via --build-arg)
+# 2. Runtime: All vars are loaded from .env file on the server
+# 3. Branch Deployments:
+#    - main branch uses .env.prod
+#    - staging branch uses .env.staging
+#    - CI/CD supports STAGING_ prefix for all secrets to override defaults
+#    - TRAEFIK_HOST is automatically derived from NEXT_PUBLIC_BASE_URL
+#
+# Security:
+# ─────────
+# • NEVER commit .env files with real credentials to git
+# • Use Gitea/GitHub secrets for CI/CD workflows
+# • Store production .env file securely on the server only
+#
+# ============================================================================

.env.production

@@ -0,0 +1,40 @@
+# ============================================================================
+# KLZ Cables - Production Environment Configuration
+# ============================================================================
+# This file contains runtime environment variables for the production deployment.
+# It should be placed on the production server at: /home/deploy/sites/klz-cables.com/.env
+#
+# IMPORTANT: This file contains sensitive data and should NEVER be committed to git.
+# ============================================================================
+
+# Application
+NODE_ENV=production
+NEXT_PUBLIC_BASE_URL=https://klz-cables.com
+
+# Analytics (Umami)
+NEXT_PUBLIC_UMAMI_WEBSITE_ID=
+NEXT_PUBLIC_UMAMI_SCRIPT_URL=https://analytics.infra.mintel.me/script.js
+
+# Error Tracking (GlitchTip/Sentry)
+SENTRY_DSN=
+
+# Email Configuration (Mailgun)
+MAIL_HOST=smtp.eu.mailgun.org
+MAIL_PORT=587
+MAIL_USERNAME=
+MAIL_PASSWORD=
+MAIL_FROM=KLZ Cables <noreply@klz-cables.com>
+MAIL_RECIPIENTS=info@klz-cables.com
+
+# Strapi
+STRAPI_DATABASE_NAME=strapi
+STRAPI_DATABASE_USERNAME=strapi
+STRAPI_DATABASE_PASSWORD=
+APP_KEYS=
+API_TOKEN_SALT=
+ADMIN_JWT_SECRET=
+TRANSFER_TOKEN_SALT=
+JWT_SECRET=
+
+# Varnish Cache Size (optional)
+VARNISH_CACHE_SIZE=256m

.eslintrc.json

@@ -1,12 +1,16 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"],
+  "extends": ["next/core-web-vitals", "next/typescript", "prettier"],
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
     "@typescript-eslint/no-require-imports": "off",
     "prefer-const": "warn",
     "react/no-unescaped-entities": "off",
     "@next/next/no-img-element": "warn"
   }
 }
-

.gitea/workflows/ci.yml

@@ -0,0 +1,32 @@
+name: CI - Lint, Typecheck & Test
+
+on:
+  push:
+    branches-ignore:
+      - main
+  pull_request:
+
+jobs:
+  quality-assurance:
+    runs-on: docker
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: 🔍 Lint
+        run: npm run lint
+
+      - name: 🏗️ Typecheck
+        run: npm run typecheck
+
+      - name: 🧪 Test
+        run: npm run test

.gitea/workflows/deploy.yml

@@ -4,212 +4,468 @@ on:
   push:
     branches:
       - main
+    tags:
+      - 'v*'
+  workflow_dispatch:
+    inputs:
+      skip_long_checks:
+        description: 'Skip tests? (true/false)'
+        required: false
+        default: 'false'
+
+concurrency:
+  group: ${{ github.workflow }}
+  cancel-in-progress: false
 
 jobs:
-  deploy:
+  # ──────────────────────────────────────────────────────────────────────────────
+  # JOB 1: Prepare & Determine Environment
+  # ──────────────────────────────────────────────────────────────────────────────
+  prepare:
+    name: 🔍 Prepare Environment
     runs-on: docker
-
+    outputs:
+      target:           ${{ steps.determine.outputs.target }}
+      image_tag:        ${{ steps.determine.outputs.image_tag }}
+      env_file:         ${{ steps.determine.outputs.env_file }}
+      traefik_host:     ${{ steps.determine.outputs.traefik_host }}
+      next_public_base_url: ${{ steps.determine.outputs.next_public_base_url }}
+      directus_url:     ${{ steps.determine.outputs.directus_url }}
+      directus_host:    ${{ steps.determine.outputs.directus_host }}
+      project_name:     ${{ steps.determine.outputs.project_name }}
+      is_prod:          ${{ steps.determine.outputs.is_prod }}
+      gotify_title:     ${{ steps.determine.outputs.gotify_title }}
+      gotify_priority:  ${{ steps.determine.outputs.gotify_priority }}
+      short_sha:        ${{ steps.determine.outputs.short_sha }}
+      commit_msg:       ${{ steps.determine.outputs.commit_msg }}
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v3
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
-      - name: Install tools
+      - name: 🔍 Environment & Version ermitteln
+        id: determine
+        shell: bash
+        run: |
+          TAG="${{ github.ref_name }}"
+          SHORT_SHA=$(echo "${{ github.sha }}" | cut -c1-9)
+          IMAGE_TAG="sha-${SHORT_SHA}"
+          COMMIT_MSG=$(git log -1 --pretty=%s || echo "No commit message available")
+
+          if [[ "${{ github.ref_type }}" == "branch" && "$TAG" == "main" ]]; then
+            if [[ "$COMMIT_MSG" =~ ^chore: ]]; then
+              TARGET="skip"
+              GOTIFY_TITLE="ℹ️ Skip Deploy (Chore)"
+              GOTIFY_PRIORITY=2
+            else
+              TARGET="testing"
+              IMAGE_TAG="main-${SHORT_SHA}"
+              ENV_FILE=".env.testing"
+              TRAEFIK_HOST='`testing.klz-cables.com`'
+              NEXT_PUBLIC_BASE_URL="https://testing.klz-cables.com"
+              DIRECTUS_URL="https://cms.testing.klz-cables.com"
+              DIRECTUS_HOST='`cms.testing.klz-cables.com`'
+              PROJECT_NAME="klz-cables-testing"
+              IS_PROD="false"
+              GOTIFY_TITLE="🧪 Testing-Deploy"
+              GOTIFY_PRIORITY=4
+            fi
+          elif [[ "${{ github.ref_type }}" == "tag" ]]; then
+            if [[ "$TAG" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+              TARGET="production"
+              IMAGE_TAG="$TAG"
+              ENV_FILE=".env.prod"
+              TRAEFIK_HOST='`klz-cables.com`, `www.klz-cables.com`'
+              NEXT_PUBLIC_BASE_URL="https://klz-cables.com"
+              DIRECTUS_URL="https://cms.klz-cables.com"
+              DIRECTUS_HOST='`cms.klz-cables.com`'
+              PROJECT_NAME="klz-cables-prod"
+              IS_PROD="true"
+              GOTIFY_TITLE="🚀 Production-Release"
+              GOTIFY_PRIORITY=6
+            elif [[ "$TAG" =~ -rc || "$TAG" =~ -beta || "$TAG" =~ -alpha ]]; then
+              TARGET="staging"
+              IMAGE_TAG="$TAG"
+              ENV_FILE=".env.staging"
+              TRAEFIK_HOST='`staging.klz-cables.com`'
+              NEXT_PUBLIC_BASE_URL="https://staging.klz-cables.com"
+              DIRECTUS_URL="https://cms.staging.klz-cables.com"
+              DIRECTUS_HOST='`cms.staging.klz-cables.com`'
+              PROJECT_NAME="klz-cables-staging"
+              IS_PROD="false"
+              GOTIFY_TITLE="🧪 Staging-Deploy (Pre-Release)"
+              GOTIFY_PRIORITY=5
+            else
+              TARGET="skip"
+              GOTIFY_TITLE="❓ Unbekannter Tag"
+              GOTIFY_PRIORITY=3
+            fi
+          else
+            TARGET="skip"
+          fi
+
+          echo "target=$TARGET" >> $GITHUB_OUTPUT
+          echo "image_tag=$IMAGE_TAG" >> $GITHUB_OUTPUT
+          echo "env_file=$ENV_FILE" >> $GITHUB_OUTPUT
+          echo "traefik_host=$TRAEFIK_HOST" >> $GITHUB_OUTPUT
+          echo "next_public_base_url=$NEXT_PUBLIC_BASE_URL" >> $GITHUB_OUTPUT
+          echo "directus_url=$DIRECTUS_URL" >> $GITHUB_OUTPUT
+          echo "directus_host=$DIRECTUS_HOST" >> $GITHUB_OUTPUT
+          echo "project_name=$PROJECT_NAME" >> $GITHUB_OUTPUT
+          echo "is_prod=$IS_PROD" >> $GITHUB_OUTPUT
+          echo "gotify_title=$GOTIFY_TITLE" >> $GITHUB_OUTPUT
+          echo "gotify_priority=$GOTIFY_PRIORITY" >> $GITHUB_OUTPUT
+          echo "short_sha=$SHORT_SHA" >> $GITHUB_OUTPUT
+          echo "commit_msg=$COMMIT_MSG" >> $GITHUB_OUTPUT
+
+  # ──────────────────────────────────────────────────────────────────────────────
+  # JOB 2: Quality Assurance (Lint & Test)
+  # ──────────────────────────────────────────────────────────────────────────────
+  qa:
+    name: 🧪 Quality Assurance
+    needs: prepare
+    if: needs.prepare.outputs.target != 'skip'
+    runs-on: docker
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: 📦 Restore npm cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: 🧪 Run Checks in Parallel
+        if: github.event.inputs.skip_long_checks != 'true'
+        run: |
+          npm run lint &
+          LINT_PID=$!
+          npm run typecheck &
+          TYPE_PID=$!
+          npm run test &
+          TEST_PID=$!
+
+          # Wait for all and fail if any fail
+          wait $LINT_PID || exit 1
+          wait $TYPE_PID || exit 1
+          wait $TEST_PID || exit 1
+
+  # ──────────────────────────────────────────────────────────────────────────────
+  # JOB 3: Build & Push Docker Image
+  # ──────────────────────────────────────────────────────────────────────────────
+  build:
+    name: 🏗️ Build & Push
+    needs: prepare
+    if: ${{ needs.prepare.outputs.target != 'skip' }}
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: 🐳 Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+
+      - name: 🔐 Registry Login
+        run: |
+          echo "${{ secrets.REGISTRY_PASS }}" | docker login registry.infra.mintel.me -u "${{ secrets.REGISTRY_USER }}" --password-stdin
+
+      - name: 🏗️ Docker Image bauen & pushen
+        env:
+          IMAGE_TAG: ${{ needs.prepare.outputs.image_tag }}
+          TARGET:    ${{ needs.prepare.outputs.target }}
+          NEXT_PUBLIC_BASE_URL:          ${{ needs.prepare.outputs.next_public_base_url }}
+          NEXT_PUBLIC_UMAMI_WEBSITE_ID:  ${{ needs.prepare.outputs.target == 'production' && secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID  || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_NEXT_PUBLIC_UMAMI_WEBSITE_ID  || secrets.TESTING_NEXT_PUBLIC_UMAMI_WEBSITE_ID  || secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID) }}
+          NEXT_PUBLIC_UMAMI_SCRIPT_URL:  ${{ needs.prepare.outputs.target == 'production' && secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL  || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_NEXT_PUBLIC_UMAMI_SCRIPT_URL  || secrets.TESTING_NEXT_PUBLIC_UMAMI_SCRIPT_URL  || secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL) }}
+          DIRECTUS_URL:                  ${{ needs.prepare.outputs.directus_url }}
+        run: |
+          echo "🏗️ Building → $TARGET / $IMAGE_TAG"
+          docker buildx build \
+            --pull \
+            --platform linux/arm64 \
+            --build-arg NEXT_PUBLIC_BASE_URL="$NEXT_PUBLIC_BASE_URL" \
+            --build-arg NEXT_PUBLIC_UMAMI_WEBSITE_ID="$NEXT_PUBLIC_UMAMI_WEBSITE_ID" \
+            --build-arg NEXT_PUBLIC_UMAMI_SCRIPT_URL="$NEXT_PUBLIC_UMAMI_SCRIPT_URL" \
+            --build-arg DIRECTUS_URL="$DIRECTUS_URL" \
+            -t registry.infra.mintel.me/mintel/klz-cables.com:$IMAGE_TAG \
+            --cache-from type=registry,ref=registry.infra.mintel.me/mintel/klz-cables.com:buildcache \
+            --cache-to type=registry,ref=registry.infra.mintel.me/mintel/klz-cables.com:buildcache,mode=max \
+            --push .
+
+      - name: 🏗️ Gatekeeper bauen & pushen
+        env:
+          IMAGE_TAG: ${{ needs.prepare.outputs.image_tag }}
+        run: |
+          docker buildx build \
+            --pull \
+            --platform linux/arm64 \
+            -t registry.infra.mintel.me/mintel/klz-cables-gatekeeper:$IMAGE_TAG \
+            --push ./gatekeeper
+
+
+  # ──────────────────────────────────────────────────────────────────────────────
+  # JOB 4: Deploy via SSH
+  # ──────────────────────────────────────────────────────────────────────────────
+  deploy:
+    name: 🚀 Deploy
+    needs: [prepare, build, qa]
+    if: ${{ needs.prepare.outputs.target != 'skip' }}
+    runs-on: docker
+    env:
+      TARGET:               ${{ needs.prepare.outputs.target }}
+      IMAGE_TAG:            ${{ needs.prepare.outputs.image_tag }}
+      ENV_FILE:             ${{ needs.prepare.outputs.env_file }}
+      TRAEFIK_HOST:         ${{ needs.prepare.outputs.traefik_host }}
+      NEXT_PUBLIC_BASE_URL:          ${{ needs.prepare.outputs.next_public_base_url }}
+      NEXT_PUBLIC_UMAMI_WEBSITE_ID:  ${{ needs.prepare.outputs.target == 'production' && secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID  || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_NEXT_PUBLIC_UMAMI_WEBSITE_ID  || secrets.TESTING_NEXT_PUBLIC_UMAMI_WEBSITE_ID  || secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID) }}
+      NEXT_PUBLIC_UMAMI_SCRIPT_URL:  ${{ needs.prepare.outputs.target == 'production' && secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL  || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_NEXT_PUBLIC_UMAMI_SCRIPT_URL  || secrets.TESTING_NEXT_PUBLIC_UMAMI_SCRIPT_URL  || secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL) }}
+      SENTRY_DSN:                    ${{ needs.prepare.outputs.target == 'production' && secrets.SENTRY_DSN                    || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_SENTRY_DSN                    || secrets.TESTING_SENTRY_DSN                    || secrets.SENTRY_DSN) }}
+      MAIL_HOST:                     ${{ secrets.MAIL_HOST }}
+      MAIL_PORT:                     ${{ secrets.MAIL_PORT }}
+      MAIL_USERNAME:                 ${{ secrets.MAIL_USERNAME }}
+      MAIL_PASSWORD:                 ${{ secrets.MAIL_PASSWORD }}
+      MAIL_FROM:                     ${{ secrets.MAIL_FROM }}
+      MAIL_RECIPIENTS:               ${{ secrets.MAIL_RECIPIENTS }}
+      DIRECTUS_URL:                  ${{ needs.prepare.outputs.directus_url }}
+      DIRECTUS_HOST:                 ${{ needs.prepare.outputs.directus_host }}
+      PROJECT_NAME:                  ${{ needs.prepare.outputs.project_name }}
+      DIRECTUS_KEY:                  ${{ secrets.DIRECTUS_KEY }}
+      DIRECTUS_SECRET:               ${{ secrets.DIRECTUS_SECRET }}
+      DIRECTUS_ADMIN_EMAIL:          ${{ secrets.DIRECTUS_ADMIN_EMAIL }}
+      DIRECTUS_ADMIN_PASSWORD:       ${{ secrets.DIRECTUS_ADMIN_PASSWORD }}
+      DIRECTUS_DB_NAME:              ${{ secrets.DIRECTUS_DB_NAME || 'directus' }}
+      DIRECTUS_DB_USER:              ${{ secrets.DIRECTUS_DB_USER || 'directus' }}
+      DIRECTUS_DB_PASSWORD:          ${{ secrets.DIRECTUS_DB_PASSWORD }}
+      DIRECTUS_API_TOKEN:            ${{ secrets.DIRECTUS_API_TOKEN }}
+      GATEKEEPER_PASSWORD:           ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: 🚀 Deploy to ${{ env.TARGET }}
+        run: |
+          echo "Deploying $TARGET → $IMAGE_TAG"
+
+          mkdir -p ~/.ssh
+          echo "${{ secrets.ALPHA_SSH_KEY }}" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keyscan -H alpha.mintel.me >> ~/.ssh/known_hosts 2>/dev/null
+
+          cat > /tmp/klz-cables.env << EOF
+          # Generated by CI - $TARGET - $(date -u)
+          NODE_ENV=production
+          NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL
+          NEXT_PUBLIC_UMAMI_WEBSITE_ID=$NEXT_PUBLIC_UMAMI_WEBSITE_ID
+          NEXT_PUBLIC_UMAMI_SCRIPT_URL=$NEXT_PUBLIC_UMAMI_SCRIPT_URL
+          SENTRY_DSN=$SENTRY_DSN
+          MAIL_HOST=$MAIL_HOST
+          MAIL_PORT=$MAIL_PORT
+          MAIL_USERNAME=$MAIL_USERNAME
+          MAIL_PASSWORD=$MAIL_PASSWORD
+          MAIL_FROM=$MAIL_FROM
+          MAIL_RECIPIENTS=$MAIL_RECIPIENTS
+
+          # Directus
+          DIRECTUS_URL=$DIRECTUS_URL
+          DIRECTUS_HOST=$DIRECTUS_HOST
+          DIRECTUS_KEY=$DIRECTUS_KEY
+          DIRECTUS_SECRET=$DIRECTUS_SECRET
+          DIRECTUS_ADMIN_EMAIL=$DIRECTUS_ADMIN_EMAIL
+          DIRECTUS_ADMIN_PASSWORD=$DIRECTUS_ADMIN_PASSWORD
+          DIRECTUS_DB_NAME=$DIRECTUS_DB_NAME
+          DIRECTUS_DB_USER=$DIRECTUS_DB_USER
+          DIRECTUS_DB_PASSWORD=$DIRECTUS_DB_PASSWORD
+          DIRECTUS_API_TOKEN=$DIRECTUS_API_TOKEN
+          INTERNAL_DIRECTUS_URL=http://directus:8055
+          GATEKEEPER_PASSWORD=$GATEKEEPER_PASSWORD
+
+          IMAGE_TAG=$IMAGE_TAG
+          TRAEFIK_HOST=$TRAEFIK_HOST
+          ENV_FILE=$ENV_FILE
+          AUTH_MIDDLEWARE=$( [[ "$TARGET" == "production" ]] && echo "compress" || echo "${PROJECT_NAME}-auth,compress" )
+          EOF
+
+          scp -o StrictHostKeyChecking=accept-new /tmp/klz-cables.env root@alpha.mintel.me:/home/deploy/sites/klz-cables.com/$ENV_FILE
+          scp -o StrictHostKeyChecking=accept-new docker-compose.yml root@alpha.mintel.me:/home/deploy/sites/klz-cables.com/docker-compose.yml
+
+          ssh -o StrictHostKeyChecking=accept-new root@alpha.mintel.me IMAGE_TAG="$IMAGE_TAG" ENV_FILE="$ENV_FILE" PROJECT_NAME="$PROJECT_NAME" bash << 'EOF'
+            set -e
+            cd /home/deploy/sites/klz-cables.com
+            chmod 600 "$ENV_FILE"
+            chown deploy:deploy "$ENV_FILE"
+            echo "${{ secrets.REGISTRY_PASS }}" | docker login registry.infra.mintel.me -u "${{ secrets.REGISTRY_USER }}" --password-stdin
+            echo "→ Pulling image: $IMAGE_TAG"
+            docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" pull
+            echo "→ Starting containers..."
+            docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" up -d --remove-orphans
+            docker system prune -f --filter "until=168h"
+            echo "→ Waiting 15s for warmup..."
+            sleep 15
+            echo "→ Container status:"
+            docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" ps
+            if ! docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" ps | grep -q "Up"; then
+              echo "❌ Fehler: Container nicht Up!"
+              docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" logs --tail=150
+              exit 1
+            fi
+
+  # ──────────────────────────────────────────────────────────────────────────────
+  # JOB 5: PageSpeed Test
+  # ──────────────────────────────────────────────────────────────────────────────
+  pagespeed:
+    name: ⚡ PageSpeed
+    needs: [prepare, deploy]
+    if: |
+      always() && 
+      needs.prepare.outputs.target != 'skip' &&
+      needs.deploy.result == 'success' && 
+      github.event.inputs.skip_long_checks != 'true'
+    runs-on: docker
+    outputs:
+      report_url: ${{ steps.save.outputs.report_url }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: 🔍 Install Chromium (Native & ARM64)
         run: |
           apt-get update
-          apt-get install -y \
-            docker.io \
-            openssh-client \
-            rsync
-
-      - name: Login to registry
-        env:
-          REGISTRY_USER: ${{ secrets.REGISTRY_USER }}
-          REGISTRY_PASS: ${{ secrets.REGISTRY_PASS }}
-        run: |
-          echo "$REGISTRY_PASS" | DOCKER_API_VERSION=1.44 docker login registry.infra.mintel.me -u "$REGISTRY_USER" --password-stdin
-
-      - name: Build image
-        run: |
-          DOCKER_API_VERSION=1.44 docker build \
-            --pull \
-            --build-arg NEXT_PUBLIC_UMAMI_WEBSITE_ID=${{ secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID }} \
-            --build-arg NEXT_PUBLIC_UMAMI_SCRIPT_URL=${{ secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL }} \
-            --build-arg NEXT_PUBLIC_SENTRY_DSN=${{ secrets.SENTRY_DSN }} \
-            -t registry.infra.mintel.me/mintel/klz-cables.com:latest .
-
-      - name: Push image
-        run: DOCKER_API_VERSION=1.44 docker push registry.infra.mintel.me/mintel/klz-cables.com:latest
-
-      - name: Setup SSH
-        run: |
-          mkdir -p ~/.ssh
-          printf "%s\n" "${{ secrets.ALPHA_SSH_KEY }}" > ~/.ssh/id_ed25519
-          chmod 600 ~/.ssh/id_ed25519
-          ssh-keyscan -H alpha.mintel.me >> ~/.ssh/known_hosts
-
-      - name: Sync docker-compose file to server
-        run: |
-          echo "Checking for docker-compose file..."
-
-          COMPOSE_FILE=""
-          if [ -f "docker-compose.yml" ]; then
-            COMPOSE_FILE="docker-compose.yml"
-          elif [ -f "docker-compose.yaml" ]; then
-            COMPOSE_FILE="docker-compose.yaml"
+          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 "ERROR: Keine docker-compose.yml oder .yaml gefunden!"
-            exit 1
-          fi
-
-          echo "Found and syncing: $COMPOSE_FILE"
-
-          # Create a temporary directory for files to sync
-          mkdir -p /tmp/klz-deploy
-          cp "$COMPOSE_FILE" /tmp/klz-deploy/
-          
-          # Check if varnish directory exists and copy it
-          if [ -d "varnish" ]; then
-            echo "Syncing varnish directory..."
-            cp -r varnish /tmp/klz-deploy/
-          fi
-
-          # Use tar to bundle files and send them via SSH in a single connection
-          tar czf - -C /tmp/klz-deploy . | \
-          ssh -i ~/.ssh/id_ed25519 -o StrictHostKeyChecking=no -o IPQoS=0x00 deploy@alpha.mintel.me \
-          "mkdir -p /home/deploy/sites/klz-cables.com/ && tar xzf - -C /home/deploy/sites/klz-cables.com/ && echo 'Files synced successfully' && ls -la /home/deploy/sites/klz-cables.com/"
-          
-          echo "File sync completed"
-
-      - name: Deploy on server
-        env:
-          REGISTRY_USER: ${{ secrets.REGISTRY_USER }}
-          REGISTRY_PASS: ${{ secrets.REGISTRY_PASS }}
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
-          NEXT_PUBLIC_UMAMI_SCRIPT_URL: ${{ secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL }}
-          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
-          REDIS_URL: ${{ secrets.REDIS_URL }}
-          REDIS_KEY_PREFIX: ${{ secrets.REDIS_KEY_PREFIX }}
-        run: |
-          echo "Starting deployment on server..."
-          
-          # Create deployment script on server
-          cat > /tmp/deploy.sh << 'DEPLOY_EOF'
-          #!/bin/bash
-          set -e
-          
-          echo '=== Starting deployment ==='
-          cd /home/deploy/sites/klz-cables.com
-          
-          echo '=== Creating .env ==='
-          cat > .env << EOF
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID=${NEXT_PUBLIC_UMAMI_WEBSITE_ID}
-          NEXT_PUBLIC_UMAMI_SCRIPT_URL=${NEXT_PUBLIC_UMAMI_SCRIPT_URL}
-          SENTRY_DSN=${SENTRY_DSN}
-          REDIS_URL=${REDIS_URL}
-          REDIS_KEY_PREFIX=${REDIS_KEY_PREFIX}
-          EOF
-          
-          echo '=== Logging into Docker registry ==='
-          echo '${REGISTRY_PASS}' | docker login registry.infra.mintel.me -u '${REGISTRY_USER}' --password-stdin
-          if [ $? -eq 0 ]; then
-            echo '✓ Registry login successful'
-          else
-            echo '✗ Registry login failed'
-            exit 1
-          fi
-          
-          echo '=== Checking if infra network exists ==='
-          if ! docker network inspect infra >/dev/null 2>&1; then
-            echo 'Creating infra network...'
-            docker network create infra || true
-          fi
-          
-          echo '=== Checking current containers ==='
-          docker compose ps
-
-          echo '=== Checking current image ==='
-          docker images registry.infra.mintel.me/mintel/klz-cables.com:latest
-
-          echo '=== Removing local image to force fresh pull ==='
-          docker rmi registry.infra.mintel.me/mintel/klz-cables.com:latest || true
-
-          echo '=== Pulling latest image ==='
-          docker compose pull
-          echo '✓ Image pull command completed'
-
-          echo '=== Verifying new image after pull ==='
-          docker images registry.infra.mintel.me/mintel/klz-cables.com:latest
-
-          echo '=== Checking if image was actually updated ==='
-          if docker inspect registry.infra.mintel.me/mintel/klz-cables.com:latest >/dev/null 2>&1; then
-            echo '✓ Image exists locally'
-          else
-            echo '✗ Image pull failed - image not found locally'
-            exit 1
-          fi
-          
-          echo '=== Stopping all containers ==='
-          docker compose down
-          echo '✓ Containers stopped'
-          
-          echo '=== Starting all containers ==='
-          docker compose up -d
-          echo '✓ Containers started'
-          
-          echo '=== Waiting for containers to be ready (30 seconds) ==='
-          sleep 30
-          
-          echo '=== Verifying deployment status ==='
-          docker compose ps
-          
-          echo '=== Checking app container logs ==='
-          docker compose logs --tail=30 app
-          
-          echo '=== Checking varnish container logs ==='
-          docker compose logs --tail=20 varnish
-
-          echo '=== Verifying application health ==='
-          # Wait a bit more for the app to be fully ready
-          sleep 15
-          if curl -f -s http://localhost:80/health > /dev/null 2>&1; then
-            echo '✓ Application health check passed'
-          else
-            echo '✗ Application health check failed - checking app logs'
-            docker compose logs --tail=50 app
-            exit 1
-          fi
-
-          echo '=== Cleaning up old images ==='
-          docker image prune -f --filter 'until=24h'
-
-          echo '=== Deployment completed successfully ==='
-          DEPLOY_EOF
-          
-          # Make script executable and copy to server
-          chmod +x /tmp/deploy.sh
-          
-          # Copy deployment script to server with keep-alive and timeout
-          scp -i ~/.ssh/id_ed25519 -o StrictHostKeyChecking=no -o IPQoS=0x00 -o ServerAliveInterval=30 -o ServerAliveCountMax=3 -o ConnectTimeout=30 /tmp/deploy.sh deploy@alpha.mintel.me:/tmp/deploy.sh
-          
-          # Execute deployment script on server with keep-alive and timeout
-          # Retry up to 3 times if connection is lost
-          for i in {1..3}; do
-            echo "Attempt $i of 3..."
-            if ssh -i ~/.ssh/id_ed25519 -o StrictHostKeyChecking=no -o IPQoS=0x00 -o ServerAliveInterval=30 -o ServerAliveCountMax=3 -o ConnectTimeout=30 -o ServerAliveTimeout=300 deploy@alpha.mintel.me "
-              set -e
-              bash /tmp/deploy.sh
-            "; then
-              echo "✓ Deployment successful on attempt $i"
-              break
-            else
-              echo "✗ Deployment failed on attempt $i"
-              if [ $i -eq 3 ]; then
-                echo "All deployment attempts failed"
-                exit 1
+            echo "🎯 Ubuntu detected - adding xtradeb PPA"
+            mkdir -p /etc/apt/keyrings
+            KEY_ID="82BB6851C64F6880"
+            
+            # Multi-method Key Fetch
+            SUCCESS=false
+            echo "Fetching key $KEY_ID..."
+            
+            # Method 1: gpg --recv-keys (standard)
+            for server in "hkp://keyserver.ubuntu.com:80" "hkp://keyserver.ubuntu.com:11371"; do
+              if gpg --no-default-keyring --keyring /tmp/xtradeb.gpg --keyserver "$server" --recv-keys "$KEY_ID"; then
+                gpg --no-default-keyring --keyring /tmp/xtradeb.gpg --export > /etc/apt/keyrings/xtradeb.gpg
+                SUCCESS=true && break
               fi
-              echo "Retrying in 10 seconds..."
-              sleep 10
+            done
+            
+            # Method 2: Direct wget (fallback)
+            if [ "$SUCCESS" = false ]; then
+              wget -qO- "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x$KEY_ID" | gpg --dearmor > /etc/apt/keyrings/xtradeb.gpg && SUCCESS=true
             fi
-          done
+            
+            if [ "$SUCCESS" = true ]; then
+              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
+            else
+              echo "⚠️ GPG fetch failed, using legacy apt-key as last resort..."
+              apt-key adv --keyserver keyserver.ubuntu.com --recv-keys "$KEY_ID" || true
+              echo "deb http://ppa.launchpad.net/xtradeb/apps/ubuntu $CODENAME main" > /etc/apt/sources.list.d/xtradeb-ppa.list
+            fi
+            
+            # 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 || apt-get install -y chromium-browser
+          fi
           
-          echo "Deployment completed"
+          # Force clean paths (remove existing dead links/files if they are snap wrappers)
+          rm -f /usr/bin/google-chrome /usr/bin/chromium-browser
+          [ -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
+          
+          echo "✅ Binary check:"
+          ls -l /usr/bin/chromium* /usr/bin/google-chrome || true
+        continue-on-error: true
+
+      - name: 🧪 Run PageSpeed (Lighthouse)
+        env:
+          NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_base_url }}
+          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
+          PAGESPEED_LIMIT: 8
+          PUPPETEER_EXECUTABLE_PATH: /usr/bin/chromium
+          CHROME_PATH: /usr/bin/chromium
+        run: npm run pagespeed:test
+
+      - name: 💾 Save Report URL
+        id: save
+        if: always()
+        run: |
+          if [ -f pagespeed-report-url.txt ]; then
+            URL=$(cat pagespeed-report-url.txt)
+            echo "report_url=$URL" >> $GITHUB_OUTPUT
+            echo "✅ Report URL found: $URL"
+          fi
+
+  # ──────────────────────────────────────────────────────────────────────────────
+  # JOB 6: Notifications
+  # ──────────────────────────────────────────────────────────────────────────────
+  notifications:
+    name: 🔔 Notifications
+    needs: [prepare, qa, build, deploy, pagespeed]
+    if: always()
+    runs-on: docker
+    steps:
+      - name: 📊 Deployment Summary
+        run: |
+          echo "┌──────────────────────────────┐"
+          echo "│ Deployment Summary           │"
+          echo "├──────────────────────────────┤"
+          echo "│ Status:     ${{ needs.deploy.result }} │"
+          echo "│ Umgebung:   ${{ needs.prepare.outputs.target || 'skipped' }} │"
+          echo "│ Version:    ${{ needs.prepare.outputs.image_tag }} │"
+          echo "│ Commit:     ${{ needs.prepare.outputs.short_sha }} │"
+          echo "│ Message:    ${{ needs.prepare.outputs.commit_msg }} │"
+          echo "└──────────────────────────────┘"
+
+      - name: 🔔 Gotify - Success
+        if: needs.deploy.result == 'success'
+        run: |
+          REPORT_MSG=""
+          if [ -n "${{ needs.pagespeed.outputs.report_url }}" ]; then
+            REPORT_MSG="\n\n⚡ **PageSpeed Report:**\n${{ needs.pagespeed.outputs.report_url }}"
+          fi
+
+          curl -s -k -X POST "${{ secrets.GOTIFY_URL }}/message?token=${{ secrets.GOTIFY_TOKEN }}" \
+            -F "title=${{ needs.prepare.outputs.gotify_title }}" \
+            -F "message=Erfolgreich deployt auf **${{ needs.prepare.outputs.target }}**\n\nVersion: **${{ needs.prepare.outputs.image_tag }}**\nCommit: ${{ needs.prepare.outputs.short_sha }} (${{ needs.prepare.outputs.commit_msg }})\nVon: ${{ github.actor }}\nRun: ${{ github.run_id }}${REPORT_MSG}" \
+            -F "priority=4" || true
+
+      - name: 🔔 Gotify - Failure
+        if: needs.deploy.result == 'failure' || needs.build.result == 'failure' || needs.qa.result == 'failure'
+        run: |
+          curl -s -k -X POST "${{ secrets.GOTIFY_URL }}/message?token=${{ secrets.GOTIFY_TOKEN }}" \
+            -F "title=❌ Deployment FEHLGESCHLAGEN – ${{ needs.prepare.outputs.target || 'unknown' }}" \
+            -F "message=**Fehler beim Deploy auf ${{ needs.prepare.outputs.target }}**\n\nVersion: ${{ needs.prepare.outputs.image_tag || '?' }}\nCommit: ${{ needs.prepare.outputs.short_sha || '?' }}\nVon: ${{ github.actor }}\nRun: ${{ github.run_id }}\n\nBitte Logs prüfen!" \
+            -F "priority=8" || true

.gitignore

@@ -1,2 +1,7 @@
 node_modules
-.next
+.next
+.DS_Store
+
+# Directus
+directus/uploads
+!directus/extensions/

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.lintstagedrc.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' --file ')}`;
+
+module.exports = {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand, 'prettier --write'],
+  '*.{json,md,css,scss}': ['prettier --write'],
+};

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100
+}

Dockerfile

@@ -3,12 +3,12 @@ FROM node:20-alpine AS base
 # Install dependencies only when needed
 FROM base AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat
+RUN apk add --no-cache libc6-compat curl
 WORKDIR /app
 
 # Install dependencies based on the preferred package manager
 COPY package.json package-lock.json* ./
-RUN npm ci
+RUN --mount=type=cache,target=/root/.npm npm ci
 
 
 # Rebuild the source code only when needed
@@ -20,22 +20,33 @@ COPY . .
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry during the build.
-ENV NEXT_TELEMETRY_DISABLED 1
+ENV NEXT_TELEMETRY_DISABLED=1
 
+# Build-time environment variables for Next.js
+# These are baked into the client bundle during build
+ARG NEXT_PUBLIC_BASE_URL
 ARG NEXT_PUBLIC_UMAMI_WEBSITE_ID
 ARG NEXT_PUBLIC_UMAMI_SCRIPT_URL
-ARG NEXT_PUBLIC_SENTRY_DSN
+ARG DIRECTUS_URL
+
+ENV NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL
 ENV NEXT_PUBLIC_UMAMI_WEBSITE_ID=$NEXT_PUBLIC_UMAMI_WEBSITE_ID
 ENV NEXT_PUBLIC_UMAMI_SCRIPT_URL=$NEXT_PUBLIC_UMAMI_SCRIPT_URL
-ENV NEXT_PUBLIC_SENTRY_DSN=$NEXT_PUBLIC_SENTRY_DSN
+ENV DIRECTUS_URL=$DIRECTUS_URL
 
-RUN npm run build
+# Validate environment variables during build
+RUN npx tsx scripts/validate-env.ts
+
+RUN --mount=type=cache,target=/app/.next/cache npm run build
 
 # Production image, copy all the files and run next
 FROM base AS runner
 WORKDIR /app
 
-ENV NODE_ENV production
+# Install curl for health checks
+RUN apk add --no-cache curl
+
+ENV NODE_ENV=production
 # Uncomment the following line in case you want to disable telemetry during runtime.
 # ENV NEXT_TELEMETRY_DISABLED 1
 
@@ -57,9 +68,9 @@ USER nextjs
 
 EXPOSE 3000
 
-ENV PORT 3000
+ENV PORT=3000
 # set hostname to localhost
-ENV HOSTNAME "0.0.0.0"
+ENV HOSTNAME="0.0.0.0"
 
 # server.js is created by next build from the standalone output
 # https://nextjs.org/docs/pages/api-reference/next-config-js/output

ENV_CLEANUP_SUMMARY.md

@@ -0,0 +1,272 @@
+# Environment Variables Cleanup - Summary
+
+## What Was Done
+
+Cleaned up the fragile, overkill environment variable mess and replaced it with a simple, clean, robust **fully automated** system.
+
+## Changes Made
+
+### 1. Dockerfile ✅
+**Before**: 4 build args including runtime-only variables (SENTRY_DSN)
+**After**: 3 build args - only `NEXT_PUBLIC_*` variables that need to be baked into the client bundle
+
+```dockerfile
+# Only these build args now:
+ARG NEXT_PUBLIC_BASE_URL
+ARG NEXT_PUBLIC_UMAMI_WEBSITE_ID
+ARG NEXT_PUBLIC_UMAMI_SCRIPT_URL
+```
+
+### 2. docker-compose.yml ✅
+**Before**: 12+ individual environment variables listed
+**After**: Single `env_file: .env` directive
+
+```yaml
+app:
+  image: registry.infra.mintel.me/mintel/klz-cables.com:latest
+  env_file:
+    - .env  # All runtime vars loaded from here
+```
+
+### 3. .gitea/workflows/deploy.yml ✅
+**Before**: Passing 12+ environment variables individually via SSH command (fragile!)
+**After**: **Fully automated** - workflow creates `.env` file from Gitea secrets and uploads it
+
+```yaml
+# Before (FRAGILE):
+ssh root@alpha.mintel.me \
+  "MAIL_FROM='${{ secrets.MAIL_FROM }}' \
+   MAIL_HOST='${{ secrets.MAIL_HOST }}' \
+   ... (12+ variables) \
+   /home/deploy/deploy.sh"
+
+# After (AUTOMATED):
+# 1. Create .env from secrets
+cat > /tmp/klz-cables.env << EOF
+NODE_ENV=production
+NEXT_PUBLIC_BASE_URL=${{ secrets.NEXT_PUBLIC_BASE_URL }}
+# ... all other vars from secrets
+EOF
+
+# 2. Upload to server
+scp /tmp/klz-cables.env root@alpha.mintel.me:/home/deploy/sites/klz-cables.com/.env
+
+# 3. Deploy
+ssh root@alpha.mintel.me "cd /home/deploy/sites/klz-cables.com && docker-compose up -d"
+```
+
+### 4. New Files Created ✅
+
+- **`.env.production`** - Template for reference (not used in automation)
+- **`docs/DEPLOYMENT.md`** - Complete deployment guide
+- **`docs/SERVER_SETUP.md`** - Server setup instructions
+- **`docs/ENV_MIGRATION.md`** - Migration guide from old to new system
+
+### 5. Updated Files ✅
+
+- **`.env.example`** - Clear documentation of all variables with build-time vs runtime notes
+
+## Architecture
+
+### Build Time (CI/CD)
+```
+Gitea Workflow
+  ↓
+  Only passes NEXT_PUBLIC_* as --build-arg
+  ↓
+Docker Build
+  ↓
+  Validates env vars
+  ↓
+  Bakes NEXT_PUBLIC_* into client bundle
+  ↓
+Push to Registry
+```
+
+### Runtime (Production Server) - FULLY AUTOMATED
+```
+Gitea Secrets
+  ↓
+  Workflow creates .env file
+  ↓
+  SCP uploads to server
+  ↓
+  Secured (chmod 600, chown deploy:deploy)
+  ↓
+docker-compose.yml (env_file: .env)
+  ↓
+  Loads .env into container
+  ↓
+Application runs with full config
+```
+
+## Key Benefits
+
+### 1. Simplicity
+- **Before**: 15+ Gitea secrets, variables in 3+ places
+- **After**: All secrets in Gitea, automatically deployed
+
+### 2. Clarity
+- **Before**: Confusing duplication, unclear which vars go where
+- **After**: Clear separation - build args vs runtime env file
+
+### 3. Robustness
+- **Before**: Fragile SSH command with 12+ inline variables
+- **After**: Robust automated file generation and upload
+
+### 4. Security
+- **Before**: Secrets potentially exposed in CI logs
+- **After**: Secrets masked in logs, .env auto-secured on server
+
+### 5. Maintainability
+- **Before**: Update in 3 places (Dockerfile, docker-compose.yml, deploy.yml)
+- **After**: Update Gitea secrets only - deployment is automatic
+
+### 6. **Zero Manual Steps** 🎉
+- **Before**: Manual .env file creation on server (error-prone, can be forgotten)
+- **After**: **Fully automated** - .env file created and uploaded on every deployment
+
+## What You Need to Do
+
+### Required Gitea Secrets
+
+Ensure these secrets are configured in your Gitea repository:
+
+**Build-Time (NEXT_PUBLIC_*):**
+- `NEXT_PUBLIC_BASE_URL` - Production URL (e.g., `https://klz-cables.com`)
+- `NEXT_PUBLIC_UMAMI_WEBSITE_ID` - Umami analytics ID
+- `NEXT_PUBLIC_UMAMI_SCRIPT_URL` - Umami script URL
+
+**Runtime:**
+- `SENTRY_DSN` - Error tracking DSN
+- `MAIL_HOST` - SMTP server
+- `MAIL_PORT` - SMTP port (e.g., `587`)
+- `MAIL_USERNAME` - SMTP username
+- `MAIL_PASSWORD` - SMTP password
+- `MAIL_FROM` - Sender email
+- `MAIL_RECIPIENTS` - Recipient emails (comma-separated)
+
+**Infrastructure:**
+- `REGISTRY_USER` - Docker registry username
+- `REGISTRY_PASS` - Docker registry password
+- `ALPHA_SSH_KEY` - SSH private key for deployment server
+
+**Notifications:**
+- `GOTIFY_URL` - Gotify notification server URL
+- `GOTIFY_TOKEN` - Gotify application token
+
+### That's It!
+
+**No manual steps required.** Just push to main branch and the workflow will:
+1. ✅ Build Docker image with NEXT_PUBLIC_* build args
+2. ✅ Create .env file from all secrets
+3. ✅ Upload .env to server
+4. ✅ Secure .env file (600 permissions, deploy:deploy ownership)
+5. ✅ Pull latest image
+6. ✅ Deploy with docker-compose
+
+## Files Changed
+
+```
+Modified:
+  ├── Dockerfile                      (removed redundant build args)
+  ├── docker-compose.yml              (use env_file instead of individual vars)
+  ├── .gitea/workflows/deploy.yml     (automated .env creation & upload)
+  ├── .env.example                    (clear documentation)
+  ├── lib/services/create-services.ts (removed redundant dotenv usage)
+  └── scripts/migrate-*.ts            (removed redundant dotenv usage)
+
+Created:
+  ├── .env.production                 (reference template)
+  ├── docs/DEPLOYMENT.md              (deployment guide)
+  ├── docs/SERVER_SETUP.md            (server setup guide)
+  ├── docs/ENV_MIGRATION.md           (migration guide)
+  └── ENV_CLEANUP_SUMMARY.md          (this file)
+```
+
+## Deployment Flow
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ Developer pushes to main branch                             │
+└─────────────────────────────────────────────────────────────┘
+                              ↓
+┌─────────────────────────────────────────────────────────────┐
+│ Gitea Workflow Triggered                                    │
+│                                                             │
+│ 1. Build Docker image (NEXT_PUBLIC_* build args)           │
+│ 2. Push to registry                                        │
+│ 3. Generate .env from secrets                              │
+│ 4. Upload .env to server via SCP                           │
+│ 5. SSH to server and deploy                                │
+└─────────────────────────────────────────────────────────────┘
+                              ↓
+┌─────────────────────────────────────────────────────────────┐
+│ Production Server                                           │
+│                                                             │
+│ 1. .env file secured (600, deploy:deploy)                  │
+│ 2. Docker login to registry                                │
+│ 3. Pull latest image                                       │
+│ 4. docker-compose down                                     │
+│ 5. docker-compose up -d (loads .env)                       │
+│ 6. Health checks pass                                      │
+└─────────────────────────────────────────────────────────────┘
+                              ↓
+┌─────────────────────────────────────────────────────────────┐
+│ ✅ Deployment Complete - Gotify Notification Sent          │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## Comparison: Before vs After
+
+| Aspect | Before | After |
+|--------|--------|-------|
+| **Gitea Secrets** | 15+ secrets | Same secrets, better organized |
+| **Build Args** | 4 vars (including runtime-only) | 3 vars (NEXT_PUBLIC_* only) |
+| **Runtime Vars** | Passed via SSH command | Auto-generated .env file |
+| **Manual Steps** | ❌ Manual .env creation | ✅ Fully automated |
+| **Maintenance** | Update in 3 places | Update Gitea secrets only |
+| **Security** | Secrets in CI logs | Secrets masked, .env secured |
+| **Clarity** | Confusing duplication | Clear separation |
+| **Robustness** | Fragile SSH command | Robust automation |
+| **Error-Prone** | ❌ Can forget .env | ✅ Impossible to forget |
+
+## Documentation
+
+- **[DEPLOYMENT.md](docs/DEPLOYMENT.md)** - Complete deployment guide
+- **[SERVER_SETUP.md](docs/SERVER_SETUP.md)** - Server setup instructions (mostly automated now)
+- **[ENV_MIGRATION.md](docs/ENV_MIGRATION.md)** - Migration from old to new system
+- **[.env.example](.env.example)** - Environment variables reference
+- **[.env.production](.env.production)** - Production template (for reference)
+
+## Troubleshooting
+
+### Deployment Fails
+
+1. **Check Gitea secrets** - Ensure all required secrets are set
+2. **Check workflow logs** - Look for specific error messages
+3. **SSH to server** - Verify .env file exists and has correct permissions
+4. **Check container logs** - `docker-compose logs -f app`
+
+### .env File Issues
+
+The workflow automatically:
+- Creates .env from secrets
+- Uploads to server
+- Sets 600 permissions
+- Sets deploy:deploy ownership
+
+If there are issues, check the workflow logs for the "📝 Preparing environment configuration" step.
+
+### Missing Environment Variables
+
+If a variable is missing:
+1. Add it to Gitea secrets
+2. Update `.gitea/workflows/deploy.yml` to include it in the .env generation
+3. Push to trigger new deployment
+
+---
+
+**Result**: Environment variable management is now simple, clean, robust, and **fully automated**! 🎉
+
+No more manual .env file creation. No more forgotten configuration. No more fragile SSH commands. Just push and deploy!

README.md

@@ -29,6 +29,35 @@ npm run export
 
 # Or run development server
 npm run dev
+
+### 🏗️ CMS (Strapi)
+The CMS runs in Docker. Use the following npm scripts for local development:
+
+```bash
+# Start Strapi and its database
+npm run cms:dev
+
+# View logs
+npm run cms:logs
+
+# Stop the CMS
+npm run cms:stop
+```
+
+Once running, you can access the Strapi admin panel at `http://localhost:1337/admin`.
+
+### 🔄 Data & Migration
+To sync data or migrate existing content:
+
+```bash
+# Export local data
+npm run cms:export -- my-data.tar.gz
+
+# Import data
+npm run cms:import -- my-data.tar.gz
+
+# Migrate existing MDX data to Strapi
+npm run cms:migrate
 ```
 
 ### Environment Variables
@@ -47,11 +76,6 @@ NEXT_PUBLIC_UMAMI_SCRIPT_URL=https://analytics.infra.mintel.me/script.js
 SENTRY_DSN=https://PUBLIC_KEY@errors.infra.mintel.me/PROJECT_ID
 NEXT_PUBLIC_SENTRY_DSN=https://PUBLIC_KEY@errors.infra.mintel.me/PROJECT_ID
 
-# Redis (optional cache)
-# Platform provides a shared redis container reachable as `redis`.
-# Pick a dedicated DB index per app, e.g. redis://redis:6379/2
-REDIS_URL=redis://redis:6379/2
-REDIS_KEY_PREFIX=klz:
 ```
 
 ## 📊 Project Overview
@@ -78,7 +102,8 @@ REDIS_KEY_PREFIX=klz:
 - **Framework**: Next.js 14 (App Router)
 - **Language**: TypeScript
 - **Styling**: SCSS
-- **Data**: Static JSON (WordPress export)
+- **CMS**: Strapi (Source of Truth)
+- **Data**: Static JSON (WordPress export) & Strapi API
 - **Email**: Resend
 - **Analytics**: Vercel (consent-based)
 - **CAPTCHA**: Cloudflare Turnstile
@@ -108,7 +133,7 @@ app/
 ├── api/
 │   └── contact/route.ts # Contact API
 ├── sitemap.ts          # Sitemap generator
-└── robots.ts           # Robots.txt generator
+├── robots.ts           # Robots.txt generator
 
 lib/
 ├── data.ts             # Data access
@@ -119,7 +144,7 @@ components/
 ├── LocaleSwitcher.tsx  # Language switcher
 ├── ContactForm.tsx     # Contact form
 ├── CookieConsent.tsx   # GDPR banner
-└── SEO.tsx             # SEO utilities
+├── SEO.tsx             # SEO utilities
 
 data/
 ├── raw/                # WordPress export
@@ -225,31 +250,69 @@ GET /robots.txt
 
 ## 🚀 Deployment
 
-### Vercel (Recommended)
-```bash
-# Install Vercel CLI
-npm i -g vercel
+### Automatic Deployment (Current Setup)
 
-# Deploy
-vercel --prod
+The project uses **Gitea Actions** for CI/CD. Every push to `main` or `staging` triggers:
+
+1. **Build**: Docker image built for `linux/arm64` with branch-specific build args
+2. **Push**: Image pushed to `registry.infra.mintel.me` with commit SHA tag
+3. **Deploy**: SSH to production server, pull and restart containers using branch-specific `.env` files
+
+**Workflow**: `.gitea/workflows/deploy.yml`
+
+**Branch Deployments**:
+- `main` branch: Deploys to production using `.env.prod`
+- `staging` branch: Deploys to staging using `.env.staging`
+
+**Environment Overrides**:
+The CI/CD workflow supports `STAGING_`-prefixed secrets (e.g., `STAGING_NEXT_PUBLIC_BASE_URL`) to override default secrets when deploying the `staging` branch.
+
+**Required Secrets** (configure in Gitea repository settings):
+- `REGISTRY_USER` - Docker registry username
+- `REGISTRY_PASS` - Docker registry password
+- `ALPHA_SSH_KEY` - SSH private key for deployment
+- `NEXT_PUBLIC_BASE_URL` - Application base URL (e.g., `https://klz-cables.com`)
+- `NEXT_PUBLIC_UMAMI_WEBSITE_ID` - Analytics ID
+- `NEXT_PUBLIC_UMAMI_SCRIPT_URL` - Analytics script URL
+- `SENTRY_DSN` - Error tracking DSN
+- `MAIL_HOST`, `MAIL_PORT`, `MAIL_USERNAME`, `MAIL_PASSWORD`, `MAIL_FROM`, `MAIL_RECIPIENTS` - Email configuration
+
+### Manual Deployment
+
+```bash
+# SSH into production server
+ssh deploy@alpha.mintel.me
+
+# Navigate to project
+cd /home/deploy/sites/klz-cables.com
+
+# Pull latest image and restart
+docker compose pull
+docker compose up -d --force-recreate --remove-orphans
+docker image prune -f
 ```
 
-### Static Export
+Or use the convenience script:
 ```bash
-# Build and export
-npm run build
-npm run export
-
-# Deploy to any static host
-# Upload /out directory
+bash scripts/deploy-webhook.sh
 ```
 
-### Netlify
-```bash
-# Connect repository
-# Set build command: npm run build
-# Set publish directory: out
+### Architecture
+
 ```
+Client → Traefik (TLS) → Next.js App
+```
+
+**Domains**:
+- `klz-cables.com` - Production
+- `www.klz-cables.com` - Production (www)
+- `staging.klz-cables.com` - Staging
+
+**Services**:
+- `app`: Next.js application (port 3000)
+- `traefik`: Reverse proxy (external)
+
+For detailed deployment documentation, see [`docs/DEPLOYMENT.md`](docs/DEPLOYMENT.md).
 
 ## 📈 Performance
 

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

@@ -0,0 +1,31 @@
+import { ImageResponse } from 'next/og';
+import { getPageBySlug } from '@/lib/pages';
+import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+
+export const runtime = 'nodejs';
+
+export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string } }) {
+  const pageData = await getPageBySlug(slug, locale);
+
+  if (!pageData) {
+    return new Response('Page not found', { status: 404 });
+  }
+
+  const fonts = await getOgFonts();
+
+  return new ImageResponse(
+    (
+      <OGImageTemplate
+        title={pageData.frontmatter.title}
+        description={pageData.frontmatter.excerpt}
+        label="Information"
+      />
+    ),
+    {
+      ...OG_IMAGE_SIZE,
+      fonts,
+    }
+  );
+}
+

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

@@ -1,8 +1,12 @@
 import { notFound } from 'next/navigation';
 import { MDXRemote } from 'next-mdx-remote/rsc';
-import { Section, Container, Heading, Badge } from '@/components/ui';
+import { Container, Badge, Heading } from '@/components/ui';
 import { getTranslations } from 'next-intl/server';
 import { Metadata } from 'next';
+import { getPageBySlug, getAllPages } from '@/lib/pages';
+import { mdxComponents } from '@/components/blog/MDXComponents';
+import { getOGImageMetadata } from '@/lib/metadata';
+import { SITE_URL } from '@/lib/schema';
 
 interface PageProps {
   params: {
@@ -11,10 +15,23 @@ interface PageProps {
   };
 }
 
+export async function generateStaticParams() {
+  const locales = ['en', 'de'];
+  const params = [];
+
+  for (const locale of locales) {
+    const pages = await getAllPages(locale);
+    for (const page of pages) {
+      params.push({ locale, slug: page.slug });
+    }
+  }
+
+  return params;
+}
+
 export async function generateMetadata({ params: { locale, slug } }: PageProps): Promise<Metadata> {
-  const { getPageBySlug } = await import('@/lib/pages');
   const pageData = await getPageBySlug(slug, locale);
-  
+
   if (!pageData) return {};
 
   return {
@@ -23,15 +40,16 @@ export async function generateMetadata({ params: { locale, slug } }: PageProps):
     alternates: {
       canonical: `/${locale}/${slug}`,
       languages: {
-        'de': `/de/${slug}`,
-        'en': `/en/${slug}`,
+        de: `/de/${slug}`,
+        en: `/en/${slug}`,
         'x-default': `/en/${slug}`,
       },
     },
     openGraph: {
       title: `${pageData.frontmatter.title} | KLZ Cables`,
       description: pageData.frontmatter.excerpt || '',
-      url: `https://klz-cables.com/${locale}/${slug}`,
+      url: `${SITE_URL}/${locale}/${slug}`,
+      images: getOGImageMetadata(slug, pageData.frontmatter.title, locale),
     },
     twitter: {
       card: 'summary_large_image',
@@ -42,7 +60,6 @@ export async function generateMetadata({ params: { locale, slug } }: PageProps):
 }
 
 export default async function StandardPage({ params: { locale, slug } }: PageProps) {
-  const { getPageBySlug } = await import('@/lib/pages');
   const pageData = await getPageBySlug(slug, locale);
   const t = await getTranslations('StandardPage');
 
@@ -51,7 +68,7 @@ export default async function StandardPage({ params: { locale, slug } }: PagePro
   }
 
   return (
-    <div className="flex flex-col min-h-screen bg-neutral-light">
+    <div className="flex flex-col min-h-screen bg-white">
       {/* Hero Section */}
       <section className="bg-primary-dark text-white py-20 md:py-32 relative overflow-hidden">
         <div className="absolute inset-0 opacity-20">
@@ -59,68 +76,52 @@ export default async function StandardPage({ params: { locale, slug } }: PagePro
         </div>
         <Container className="relative z-10">
           <div className="max-w-4xl animate-slide-up">
-            <Badge variant="accent" className="mb-4 md:mb-6">{t('badge')}</Badge>
-            <Heading level={1} className="text-3xl md:text-5xl lg:text-6xl text-white mb-0">
-              <span className="text-white">{pageData.frontmatter.title}</span>
+            <Badge variant="accent" className="mb-4 md:mb-6">
+              {t('badge')}
+            </Badge>
+            <Heading level={1} className="text-white mb-0">
+              {pageData.frontmatter.title}
             </Heading>
           </div>
         </Container>
       </section>
 
-      <Section className="bg-white -mt-8 md:-mt-12 relative z-20 rounded-t-[32px] md:rounded-t-[60px] shadow-2xl py-12 md:py-28">
-        <Container>
-          <div className="sticky-narrative-container">
-            {/* Sticky Narrative Sidebar - Mobile Optimized */}
-            <div className="sticky-narrative-sidebar mb-8 lg:mb-0">
-              <div className="lg:sticky lg:top-32 space-y-4 md:space-y-8">
-                {/* Mobile-only chip/stepper feel */}
-                <div className="flex lg:hidden overflow-x-auto pb-4 gap-3 no-scrollbar -mx-4 px-4">
-                  <Badge variant="primary" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm">{t('overview')}</Badge>
-                  <Badge variant="neutral" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm opacity-60">{t('details')}</Badge>
-                  <Badge variant="neutral" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm opacity-60">{t('support')}</Badge>
-                </div>
-
-                <div className="p-6 md:p-8 bg-neutral-light rounded-2xl md:rounded-3xl border border-neutral-medium shadow-sm">
-                  <h3 className="text-lg md:text-xl font-bold text-primary mb-3 md:mb-4 flex items-center gap-2">
-                    <span className="w-1.5 h-6 bg-accent rounded-full" />
-                    {t('quickNavigation')}
-                  </h3>
-                  <nav className="space-y-3 md:space-y-4">
-                    <p className="text-sm md:text-base text-text-secondary leading-relaxed">
-                      {t('exploreDetails', { title: pageData.frontmatter.title })}
-                    </p>
-                  </nav>
-                </div>
-                
-                <div className="p-6 md:p-8 bg-primary-dark rounded-2xl md:rounded-3xl text-white shadow-xl relative overflow-hidden group">
-                  <div className="absolute top-0 right-0 w-24 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
-                  <h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 relative z-10">{t('needHelp')}</h3>
-                  <p className="text-sm md:text-base text-white/70 mb-4 md:mb-6 relative z-10">{t('supportTeamAvailable')}</p>
-                  <a href={`/${locale}/contact`} className="inline-flex items-center text-accent font-bold hover:underline touch-target relative z-10 group/link">
-                    {t('contactUs')} 
-                    <span className="ml-2 transition-transform group-hover/link:translate-x-1">&rarr;</span>
-                  </a>
-                </div>
-              </div>
+      {/* Main Content Area */}
+      <div className="container mx-auto px-4 py-16 md:py-24">
+        <div className="max-w-4xl mx-auto">
+          {/* Excerpt/Lead paragraph if available */}
+          {pageData.frontmatter.excerpt && (
+            <div className="mb-16 animate-slight-fade-in-from-bottom">
+              <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-medium border-l-4 border-primary pl-8 py-2 italic">
+                {pageData.frontmatter.excerpt}
+              </p>
             </div>
+          )}
 
-            {/* Main Content */}
-            <div className="sticky-narrative-content">
-              <article className="prose prose-sm md:prose-lg lg:prose-xl prose-primary max-w-none 
-                prose-headings:text-primary prose-headings:font-bold prose-headings:tracking-tight
-                prose-p:text-text-secondary prose-p:leading-relaxed
-                prose-strong:text-primary prose-strong:font-extrabold
-                prose-a:text-primary prose-a:font-bold prose-a:no-underline hover:prose-a:underline
-                prose-img:rounded-2xl md:prose-img:rounded-3xl prose-img:shadow-2xl
-                prose-ul:list-disc prose-ul:pl-5 md:prose-ul:pl-6
-                prose-li:text-text-secondary
-              ">
-                <MDXRemote source={pageData.content} />
-              </article>
+          {/* Main content with shared blog components */}
+          <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-2xl prose-img:shadow-2xl prose-blockquote:border-primary prose-blockquote:bg-primary/5 prose-blockquote:rounded-r-2xl prose-strong:text-primary animate-slight-fade-in-from-bottom">
+            <MDXRemote source={pageData.content} components={mdxComponents} />
+          </div>
+
+          {/* Support Section */}
+          <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group animate-slight-fade-in-from-bottom">
+            <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
+            <div className="relative z-10 max-w-2xl">
+              <h3 className="text-2xl md:text-3xl font-bold mb-4">{t('needHelp')}</h3>
+              <p className="text-lg text-white/70 mb-8">{t('supportTeamAvailable')}</p>
+              <a
+                href={`/${locale}/contact`}
+                className="inline-flex items-center px-8 py-4 bg-accent text-primary-dark font-bold rounded-full hover:bg-white transition-all duration-300 group/link"
+              >
+                {t('contactUs')}
+                <span className="ml-2 transition-transform group-hover/link:translate-x-1">
+                  &rarr;
+                </span>
+              </a>
             </div>
           </div>
-        </Container>
-      </Section>
+        </div>
+      </div>
     </div>
   );
 }

app/[locale]/api/og/product/route.tsx

@@ -0,0 +1,74 @@
+import { ImageResponse } from 'next/og';
+import { getProductBySlug } from '@/lib/mdx';
+import { getTranslations } from 'next-intl/server';
+import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { NextRequest } from 'next/server';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+
+export const runtime = 'nodejs';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { locale: string } }
+) {
+  const { searchParams, origin } = new URL(request.url);
+  const slug = searchParams.get('slug');
+  const locale = params.locale || 'en';
+
+  if (!slug) {
+    return new Response('Missing slug', { status: 400 });
+  }
+
+  const fonts = await getOgFonts();
+  const t = await getTranslations({ locale, namespace: 'Products' });
+
+  // Check if it's a category page
+  const categories = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
+  if (categories.includes(slug)) {
+    const categoryKey = slug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+    const categoryTitle = t.has(`categories.${categoryKey}.title`) ? t(`categories.${categoryKey}.title`) : slug;
+    const categoryDesc = t.has(`categories.${categoryKey}.description`) ? t(`categories.${categoryKey}.description`) : '';
+
+    return new ImageResponse(
+      (
+        <OGImageTemplate
+          title={categoryTitle}
+          description={categoryDesc}
+          label="Product Category"
+        />
+      ),
+      {
+        ...OG_IMAGE_SIZE,
+        fonts,
+      }
+    );
+  }
+
+  const product = await getProductBySlug(slug, locale);
+
+  if (!product) {
+    return new Response('Product not found', { status: 404 });
+  }
+
+  const featuredImage = product.frontmatter.images?.[0]
+    ? (product.frontmatter.images[0].startsWith('http')
+      ? product.frontmatter.images[0]
+      : `${origin}${product.frontmatter.images[0]}`)
+    : undefined;
+
+  return new ImageResponse(
+    (
+      <OGImageTemplate
+        title={product.frontmatter.title}
+        description={product.frontmatter.description}
+        label={product.frontmatter.categories?.[0] || 'Product'}
+        image={featuredImage}
+      />
+    ),
+    {
+      ...OG_IMAGE_SIZE,
+      fonts,
+    }
+  );
+}
+

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

@@ -1,113 +1,44 @@
 import { ImageResponse } from 'next/og';
 import { getPostBySlug } from '@/lib/blog';
+import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { SITE_URL } from '@/lib/schema';
 
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string } }) {
+export default async function Image({
+  params: { locale, slug },
+}: {
+  params: { locale: string; slug: string };
+}) {
   const post = await getPostBySlug(slug, locale);
 
   if (!post) {
-    return new ImageResponse(
-      <div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: '#001a4d' }} />
-    );
+    return new Response('Post not found', { status: 404 });
   }
 
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          height: '100%',
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          justifyContent: 'flex-end',
-          backgroundColor: '#001a4d',
-          padding: '80px',
-          position: 'relative',
-        }}
-      >
-        {/* Background Image Overlay if available */}
-        {post.frontmatter.featuredImage && (
-          <img
-            src={post.frontmatter.featuredImage.startsWith('http') ? post.frontmatter.featuredImage : `https://klz-cables.com${post.frontmatter.featuredImage}`}
-            alt=""
-            style={{
-              position: 'absolute',
-              inset: 0,
-              width: '100%',
-              height: '100%',
-              objectFit: 'cover',
-              opacity: 0.4,
-            }}
-          />
-        )}
-        
-        {/* Gradient Overlay */}
-        <div
-          style={{
-            position: 'absolute',
-            inset: 0,
-            background: 'linear-gradient(to top, rgba(0,26,77,1) 0%, rgba(0,26,77,0.4) 100%)',
-          }}
-        />
+  const fonts = await getOgFonts();
 
-        <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 10 }}>
-          {post.frontmatter.category && (
-            <div
-              style={{
-                fontSize: '20px',
-                fontWeight: 'bold',
-                color: '#00ff99',
-                textTransform: 'uppercase',
-                letterSpacing: '0.1em',
-                marginBottom: '16px',
-                backgroundColor: 'rgba(0,255,153,0.1)',
-                padding: '4px 12px',
-                borderRadius: '4px',
-              }}
-            >
-              {post.frontmatter.category}
-            </div>
-          )}
-          <div
-            style={{
-              fontSize: '64px',
-              fontWeight: '900',
-              color: 'white',
-              lineHeight: '1.1',
-              maxWidth: '900px',
-              marginBottom: '24px',
-            }}
-          >
-            {post.frontmatter.title}
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <div
-              style={{
-                fontSize: '24px',
-                color: 'rgba(255,255,255,0.6)',
-                fontWeight: '500',
-              }}
-            >
-              KLZ Cables Blog
-            </div>
-            <div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#00ff99', margin: '0 16px' }} />
-            <div
-              style={{
-                fontSize: '24px',
-                color: 'rgba(255,255,255,0.6)',
-              }}
-            >
-              {new Date(post.frontmatter.date).toLocaleDateString(locale, { year: 'numeric', month: 'long', day: 'numeric' })}
-            </div>
-          </div>
-        </div>
-      </div>
-    ),
+  // We don't have request.url here, but we can assume the domain from SITE_URL or config
+  // For local images during dev, relative paths in <img> might not work in Satori
+  // but if we are in nodejs runtime, we could potentially read from disk.
+  // For now, let's just make sure it's absolute.
+  const featuredImage = post.frontmatter.featuredImage
+    ? post.frontmatter.featuredImage.startsWith('http')
+      ? post.frontmatter.featuredImage
+      : `${SITE_URL}${post.frontmatter.featuredImage}`
+    : undefined;
+
+  return new ImageResponse(
+    <OGImageTemplate
+      title={post.frontmatter.title}
+      description={post.frontmatter.excerpt}
+      label={post.frontmatter.category || 'Blog'}
+      image={featuredImage}
+    />,
     {
-      width: 1200,
-      height: 630,
-    }
+      ...OG_IMAGE_SIZE,
+      fonts,
+    },
   );
 }

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

@@ -5,6 +5,13 @@ import { getBreadcrumbSchema, SITE_URL, LOGO_URL } from '@/lib/schema';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import { getPostBySlug, getAdjacentPosts, getReadingTime, getHeadings } from '@/lib/blog';
 import { Metadata } from 'next';
+import Link from 'next/link';
+import PostNavigation from '@/components/blog/PostNavigation';
+import PowerCTA from '@/components/blog/PowerCTA';
+import TableOfContents from '@/components/blog/TableOfContents';
+import { mdxComponents } from '@/components/blog/MDXComponents';
+import { Heading } from '@/components/ui';
+import { getOGImageMetadata } from '@/lib/metadata';
 
 interface BlogPostProps {
   params: {
@@ -13,9 +20,11 @@ interface BlogPostProps {
   };
 }
 
-export async function generateMetadata({ params: { locale, slug } }: BlogPostProps): Promise<Metadata> {
+export async function generateMetadata({
+  params: { locale, slug },
+}: BlogPostProps): Promise<Metadata> {
   const post = await getPostBySlug(slug, locale);
-  
+
   if (!post) return {};
 
   const description = post.frontmatter.excerpt || '';
@@ -25,8 +34,8 @@ export async function generateMetadata({ params: { locale, slug } }: BlogPostPro
     alternates: {
       canonical: `/${locale}/blog/${slug}`,
       languages: {
-        'de': `/de/blog/${slug}`,
-        'en': `/en/blog/${slug}`,
+        de: `/de/blog/${slug}`,
+        en: `/en/blog/${slug}`,
         'x-default': `/en/blog/${slug}`,
       },
     },
@@ -36,7 +45,8 @@ export async function generateMetadata({ params: { locale, slug } }: BlogPostPro
       type: 'article',
       publishedTime: post.frontmatter.date,
       authors: ['KLZ Cables'],
-      url: `https://klz-cables.com/${locale}/blog/${slug}`,
+      url: `${SITE_URL}/${locale}/blog/${slug}`,
+      images: getOGImageMetadata(`blog/${slug}`, post.frontmatter.title, locale),
     },
     twitter: {
       card: 'summary_large_image',
@@ -46,151 +56,6 @@ export async function generateMetadata({ params: { locale, slug } }: BlogPostPro
   };
 }
 
-import Link from 'next/link';
-import VisualLinkPreview from '@/components/blog/VisualLinkPreview';
-import { Callout } from '@/components/ui';
-import HighlightBox from '@/components/blog/HighlightBox';
-import Stats from '@/components/blog/Stats';
-import AnimatedImage from '@/components/blog/AnimatedImage';
-import ChatBubble from '@/components/blog/ChatBubble';
-import SplitHeading from '@/components/blog/SplitHeading';
-import PostNavigation from '@/components/blog/PostNavigation';
-import PowerCTA from '@/components/blog/PowerCTA';
-import TableOfContents from '@/components/blog/TableOfContents';
-import StickyNarrative from '@/components/blog/StickyNarrative';
-import TechnicalGrid from '@/components/blog/TechnicalGrid';
-import ComparisonGrid from '@/components/blog/ComparisonGrid';
-
-const components = {
-  VisualLinkPreview,
-  Callout,
-  HighlightBox,
-  Stats,
-  AnimatedImage,
-  ChatBubble,
-  PowerCTA,
-  SplitHeading,
-  StickyNarrative,
-  TechnicalGrid,
-  ComparisonGrid,
-  h1: () => null,
-  a: ({ href, children, ...props }: any) => {
-    if (href?.startsWith('/')) {
-      return (
-        <Link href={href} {...props} className="text-primary font-medium hover:underline decoration-2 underline-offset-2 transition-all">
-          {children}
-        </Link>
-      );
-    }
-    return (
-      <a
-        href={href}
-        {...props}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-primary font-medium hover:underline decoration-2 underline-offset-2 transition-all inline-flex items-center gap-1"
-      >
-        {children}
-        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-        </svg>
-      </a>
-    );
-  },
-  img: (props: any) => (
-    <AnimatedImage src={props.src} alt={props.alt} />
-  ),
-  h2: ({ children, ...props }: any) => (
-    <SplitHeading {...props} className="mt-16 mb-6 pb-3 border-b-2 border-primary/20">
-      {children}
-    </SplitHeading>
-  ),
-  h3: ({ children, ...props }: any) => (
-    <h3 {...props} className="text-2xl font-bold text-text-primary mt-12 mb-4">
-      {children}
-    </h3>
-  ),
-  p: ({ children, ...props }: any) => (
-    <p {...props} className="text-lg text-text-secondary leading-relaxed mb-6">
-      {children}
-    </p>
-  ),
-  ul: ({ children, ...props }: any) => (
-    <ul {...props} className="my-8 space-y-3">
-      {children}
-    </ul>
-  ),
-  ol: ({ children, ...props }: any) => (
-    <ol {...props} className="my-8 space-y-3 list-decimal list-inside">
-      {children}
-    </ol>
-  ),
-  li: ({ children, ...props }: any) => (
-    <li {...props} className="text-lg text-text-secondary flex items-start gap-3">
-      <span className="text-primary mt-1.5 flex-shrink-0">
-        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-        </svg>
-      </span>
-      <span className="flex-1">{children}</span>
-    </li>
-  ),
-  blockquote: ({ children, ...props }: any) => (
-    <blockquote {...props} className="my-8 pl-6 border-l-4 border-primary bg-neutral-light/30 py-4 pr-6 rounded-r-lg">
-      <div className="text-lg text-text-primary italic">
-        {children}
-      </div>
-    </blockquote>
-  ),
-  strong: ({ children, ...props }: any) => (
-    <strong {...props} className="font-bold text-primary">
-      {children}
-    </strong>
-  ),
-  code: ({ children, ...props }: any) => (
-    <code {...props} className="px-2 py-1 bg-neutral-light text-primary rounded font-mono text-sm">
-      {children}
-    </code>
-  ),
-  pre: ({ children, ...props }: any) => (
-    <pre {...props} className="my-8 p-6 bg-neutral-dark/5 rounded-xl overflow-x-auto">
-      {children}
-    </pre>
-  ),
-  table: ({ children, ...props }: any) => (
-    <div className="my-8 overflow-x-auto rounded-lg border border-neutral-200 shadow-sm">
-      <table {...props} className="w-full text-left text-sm text-text-secondary">
-        {children}
-      </table>
-    </div>
-  ),
-  thead: ({ children, ...props }: any) => (
-    <thead {...props} className="bg-neutral-50 text-text-primary font-semibold border-b border-neutral-200">
-      {children}
-    </thead>
-  ),
-  tbody: ({ children, ...props }: any) => (
-    <tbody {...props} className="divide-y divide-neutral-200 bg-white">
-      {children}
-    </tbody>
-  ),
-  tr: ({ children, ...props }: any) => (
-    <tr {...props} className="hover:bg-neutral-50/50 transition-colors">
-      {children}
-    </tr>
-  ),
-  th: ({ children, ...props }: any) => (
-    <th {...props} className="px-6 py-4 whitespace-nowrap">
-      {children}
-    </th>
-  ),
-  td: ({ children, ...props }: any) => (
-    <td {...props} className="px-6 py-4">
-      {children}
-    </td>
-  ),
-};
-
 export default async function BlogPost({ params: { locale, slug } }: BlogPostProps) {
   const post = await getPostBySlug(slug, locale);
   const { prev, next } = await getAdjacentPosts(slug, locale);
@@ -203,16 +68,15 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
 
   return (
     <article className="bg-white min-h-screen font-sans selection:bg-primary/10 selection:text-primary">
-      
       {/* Featured Image Header */}
       {post.frontmatter.featuredImage ? (
         <div className="relative w-full h-[70vh] min-h-[500px] overflow-hidden group">
-          <div 
+          <div
             className="absolute inset-0 bg-cover bg-center transition-transform duration-[3s] ease-out scale-110 group-hover:scale-100"
             style={{ backgroundImage: `url(${post.frontmatter.featuredImage})` }}
           />
           <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark 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">
             <div className="container mx-auto px-4">
@@ -224,15 +88,18 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
                     </span>
                   </div>
                 )}
-                <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-8 leading-[1.1] drop-shadow-2xl animate-slight-fade-in-from-bottom [animation-delay:200ms]">
+                <Heading
+                  level={1}
+                  className="text-white mb-8 drop-shadow-2xl animate-slight-fade-in-from-bottom [animation-delay:200ms]"
+                >
                   {post.frontmatter.title}
-                </h1>
+                </Heading>
                 <div className="flex flex-wrap items-center gap-6 text-white/80 text-sm md:text-base font-medium animate-slight-fade-in-from-bottom [animation-delay:400ms]">
                   <time dateTime={post.frontmatter.date}>
                     {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                       year: 'numeric',
                       month: 'long',
-                      day: 'numeric'
+                      day: 'numeric',
                     })}
                   </time>
                   <span className="w-1 h-1 bg-white/30 rounded-full" />
@@ -252,15 +119,15 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
                 </span>
               </div>
             )}
-            <h1 className="text-4xl md:text-5xl font-bold text-text-primary mb-8 leading-tight">
+            <Heading level={1} className="mb-8">
               {post.frontmatter.title}
-            </h1>
+            </Heading>
             <div className="flex items-center gap-6 text-text-secondary font-medium">
               <time dateTime={post.frontmatter.date}>
                 {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                   year: 'numeric',
                   month: 'long',
-                  day: 'numeric'
+                  day: 'numeric',
                 })}
               </time>
               <span className="w-1 h-1 bg-neutral-300 rounded-full" />
@@ -286,7 +153,7 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
 
             {/* Main content with enhanced styling */}
             <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-2xl prose-img:shadow-2xl prose-blockquote:border-primary prose-blockquote:bg-primary/5 prose-blockquote:rounded-r-2xl prose-strong:text-primary animate-slight-fade-in-from-bottom [animation-delay:800ms]">
-              <MDXRemote source={post.content} components={components} />
+              <MDXRemote source={post.content} components={mdxComponents} />
             </div>
 
             {/* Power CTA */}
@@ -305,8 +172,18 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
                 href={`/${locale}/blog`}
                 className="inline-flex items-center gap-3 text-text-secondary hover:text-primary font-bold text-sm uppercase tracking-widest transition-all group"
               >
-                <svg className="w-5 h-5 transition-transform group-hover:-translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                <svg
+                  className="w-5 h-5 transition-transform group-hover:-translate-x-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 19l-7-7 7-7"
+                  />
                 </svg>
                 {locale === 'de' ? 'Zurück zur Übersicht' : 'Back to Overview'}
               </Link>
@@ -325,57 +202,63 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
       {/* Structured Data */}
       <JsonLd
         id={`jsonld-${slug}`}
-        data={{
-          '@context': 'https://schema.org',
-          '@type': 'BlogPosting',
-          headline: post.frontmatter.title,
-          datePublished: post.frontmatter.date,
-          dateModified: post.frontmatter.date,
-          image: post.frontmatter.featuredImage ? `https://klz-cables.com${post.frontmatter.featuredImage}` : undefined,
-          author: {
-            '@type': 'Organization',
-            name: 'KLZ Cables',
-            url: 'https://klz-cables.com',
-            logo: 'https://klz-cables.com/logo.png'
-          },
-          publisher: {
-            '@type': 'Organization',
-            name: 'KLZ Cables',
-            logo: {
-              '@type': 'ImageObject',
-              url: 'https://klz-cables.com/logo.png',
+        data={
+          {
+            '@context': 'https://schema.org',
+            '@type': 'BlogPosting',
+            headline: post.frontmatter.title,
+            datePublished: post.frontmatter.date,
+            dateModified: post.frontmatter.date,
+            image: post.frontmatter.featuredImage
+              ? `${SITE_URL}${post.frontmatter.featuredImage}`
+              : undefined,
+            author: {
+              '@type': 'Organization',
+              name: 'KLZ Cables',
+              url: SITE_URL,
+              logo: `${SITE_URL}/logo-blue.svg`,
             },
-          },
-          description: post.frontmatter.excerpt,
-          mainEntityOfPage: {
-            '@type': 'WebPage',
-            '@id': `https://klz-cables.com/${locale}/blog/${slug}`,
-          },
-          articleSection: post.frontmatter.category,
-          wordCount: post.content.split(/\s+/).length,
-          timeRequired: `PT${getReadingTime(post.content)}M`
-        }}
+            publisher: {
+              '@type': 'Organization',
+              name: 'KLZ Cables',
+              logo: {
+                '@type': 'ImageObject',
+                url: `${SITE_URL}/logo-blue.svg`,
+              },
+            },
+            description: post.frontmatter.excerpt,
+            mainEntityOfPage: {
+              '@type': 'WebPage',
+              '@id': `${SITE_URL}/${locale}/blog/${slug}`,
+            },
+            articleSection: post.frontmatter.category,
+            wordCount: post.content.split(/\s+/).length,
+            timeRequired: `PT${getReadingTime(post.content)}M`,
+          } as any
+        }
       />
       <JsonLd
         id={`breadcrumb-${slug}`}
-        data={{
-          '@context': 'https://schema.org',
-          '@type': 'BreadcrumbList',
-          itemListElement: [
-            {
-              '@type': 'ListItem',
-              position: 1,
-              name: 'Blog',
-              item: `https://klz-cables.com/${locale}/blog`,
-            },
-            {
-              '@type': 'ListItem',
-              position: 2,
-              name: post.frontmatter.title,
-              item: `https://klz-cables.com/${locale}/blog/${slug}`,
-            },
-          ],
-        }}
+        data={
+          {
+            '@context': 'https://schema.org',
+            '@type': 'BreadcrumbList',
+            itemListElement: [
+              {
+                '@type': 'ListItem',
+                position: 1,
+                name: 'Blog',
+                item: `${SITE_URL}/${locale}/blog`,
+              },
+              {
+                '@type': 'ListItem',
+                position: 2,
+                name: post.frontmatter.title,
+                item: `${SITE_URL}/${locale}/blog/${slug}`,
+              },
+            ],
+          } as any
+        }
       />
     </article>
   );

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

@@ -0,0 +1,25 @@
+import { ImageResponse } from 'next/og';
+import { getTranslations } from 'next-intl/server';
+import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+
+export const runtime = 'nodejs';
+
+export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+  const t = await getTranslations({ locale, namespace: 'Blog.meta' });
+  const fonts = await getOgFonts();
+
+  return new ImageResponse(
+    (
+      <OGImageTemplate
+        title={t('title')}
+        description={t('description')}
+        label="Blog"
+      />
+    ),
+    {
+      ...OG_IMAGE_SIZE,
+      fonts,
+    }
+  );
+}

app/[locale]/blog/page.tsx

@@ -3,6 +3,8 @@ import { getAllPosts } from '@/lib/blog';
 import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
 import Reveal from '@/components/Reveal';
 import { getTranslations } from 'next-intl/server';
+import { getOGImageMetadata } from '@/lib/metadata';
+import { SITE_URL } from '@/lib/schema';
 
 interface BlogIndexProps {
   params: {
@@ -18,15 +20,16 @@ export async function generateMetadata({ params: { locale } }: BlogIndexProps) {
     alternates: {
       canonical: `/${locale}/blog`,
       languages: {
-        'de': '/de/blog',
-        'en': '/en/blog',
+        de: '/de/blog',
+        en: '/en/blog',
         'x-default': '/en/blog',
       },
     },
     openGraph: {
       title: `${t('title')} | KLZ Cables`,
       description: t('description'),
-      url: `https://klz-cables.com/${locale}/blog`,
+      url: `${SITE_URL}/${locale}/blog`,
+      images: getOGImageMetadata('blog', t('title'), locale),
     },
     twitter: {
       card: 'summary_large_image',
@@ -39,10 +42,10 @@ export async function generateMetadata({ params: { locale } }: BlogIndexProps) {
 export default async function BlogIndex({ params: { locale } }: BlogIndexProps) {
   const t = await getTranslations('Blog');
   const posts = await getAllPosts(locale);
-  
+
   // Sort posts by date descending
-  const sortedPosts = [...posts].sort((a, b) => 
-    new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime()
+  const sortedPosts = [...posts].sort(
+    (a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime(),
   );
 
   const featuredPost = sortedPosts[0];
@@ -51,38 +54,49 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
   return (
     <div className="bg-neutral-light min-h-screen">
       {/* Hero Section - Immersive Magazine Feel */}
-      <section className="relative h-[50vh] md:h-[70vh] min-h-[400px] md:min-h-[600px] flex items-center overflow-hidden bg-primary-dark">
-        {featuredPost && featuredPost.frontmatter.featuredImage && (
-          <>
-            <img
-              src={featuredPost.frontmatter.featuredImage}
-              alt={featuredPost.frontmatter.title}
-              className="absolute inset-0 w-full h-full object-cover scale-105 animate-slow-zoom opacity-40 md:opacity-60"
-            />
-            <div className="absolute inset-0 image-overlay-gradient" />
-          </>
-        )}
-        
-        <Container className="relative z-10">
-          <div className="max-w-4xl animate-slide-up">
-            <Badge variant="saturated" className="mb-4 md:mb-6">{t('featuredPost')}</Badge>
-            {featuredPost && (
-              <>
-                <h1 className="text-3xl md:text-6xl font-extrabold text-white mb-4 md:mb-8 leading-[1.1] line-clamp-3 md:line-clamp-none">
-                  {featuredPost.frontmatter.title}
-                </h1>
-                <p className="text-base md:text-xl text-white/80 mb-6 md:mb-10 line-clamp-2 md:line-clamp-2 max-w-2xl">
-                  {featuredPost.frontmatter.excerpt}
-                </p>
-                <Button href={`/${locale}/blog/${featuredPost.slug}`} variant="accent" size="lg" className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl">
-                  {t('readFullArticle')}
-                  <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
-                </Button>
-              </>
-            )}
-          </div>
-        </Container>
-      </section>
+      <Reveal>
+        <section className="relative h-[50vh] md:h-[70vh] min-h-[400px] md:min-h-[600px] flex items-center overflow-hidden bg-primary-dark">
+          {featuredPost && featuredPost.frontmatter.featuredImage && (
+            <>
+              <img
+                src={featuredPost.frontmatter.featuredImage}
+                alt={featuredPost.frontmatter.title}
+                className="absolute inset-0 w-full h-full object-cover scale-105 animate-slow-zoom opacity-40 md:opacity-60"
+              />
+              <div className="absolute inset-0 image-overlay-gradient" />
+            </>
+          )}
+
+          <Container className="relative z-10">
+            <div className="max-w-4xl animate-slide-up">
+              <Badge variant="saturated" className="mb-4 md:mb-6">
+                {t('featuredPost')}
+              </Badge>
+              {featuredPost && (
+                <>
+                  <Heading level={1} className="text-white mb-4 md:mb-8">
+                    {featuredPost.frontmatter.title}
+                  </Heading>
+                  <p className="text-base md:text-xl text-white/80 mb-6 md:mb-10 line-clamp-2 md:line-clamp-2 max-w-2xl">
+                    {featuredPost.frontmatter.excerpt}
+                  </p>
+                  <Button
+                    href={`/${locale}/blog/${featuredPost.slug}`}
+                    variant="accent"
+                    size="lg"
+                    className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl"
+                  >
+                    {t('readFullArticle')}
+                    <span className="ml-3 transition-transform group-hover:translate-x-2">
+                      &rarr;
+                    </span>
+                  </Button>
+                </>
+              )}
+            </div>
+          </Container>
+        </section>
+      </Reveal>
 
       <Section className="bg-neutral-light py-12 md:py-28">
         <Container>
@@ -93,10 +107,30 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
               </Heading>
               <div className="flex flex-wrap gap-2 md:gap-4">
                 {/* Category filters could go here */}
-                <Badge variant="primary" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.all')}</Badge>
-                <Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.industry')}</Badge>
-                <Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.technical')}</Badge>
-                <Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.sustainability')}</Badge>
+                <Badge
+                  variant="primary"
+                  className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4"
+                >
+                  {t('categories.all')}
+                </Badge>
+                <Badge
+                  variant="neutral"
+                  className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4"
+                >
+                  {t('categories.industry')}
+                </Badge>
+                <Badge
+                  variant="neutral"
+                  className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4"
+                >
+                  {t('categories.technical')}
+                </Badge>
+                <Badge
+                  variant="neutral"
+                  className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4"
+                >
+                  {t('categories.sustainability')}
+                </Badge>
               </div>
             </div>
           </Reveal>
@@ -116,7 +150,10 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
                         />
                         <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-3 left-3 md:top-6 md:left-6 shadow-lg">
+                          <Badge
+                            variant="accent"
+                            className="absolute top-3 left-3 md:top-6 md:left-6 shadow-lg"
+                          >
                             {post.frontmatter.category}
                           </Badge>
                         )}
@@ -127,7 +164,7 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
                         {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                           year: 'numeric',
                           month: 'long',
-                          day: 'numeric'
+                          day: 'numeric',
                         })}
                       </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-2 leading-tight">
@@ -141,8 +178,18 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
                           {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">
-                          <svg className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                          <svg
+                            className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M17 8l4 4m0 0l-4 4m4-4H3"
+                            />
                           </svg>
                         </div>
                       </div>
@@ -152,13 +199,21 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
               </Reveal>
             ))}
           </div>
-          
+
           {/* Pagination Placeholder */}
           <div className="mt-12 md:mt-24 flex justify-center gap-2 md:gap-4">
-            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base" disabled>{t('prev')}</Button>
-            <Button variant="primary" size="sm" className="md:h-11 md:px-6 md:text-base">1</Button>
-            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">2</Button>
-            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">{t('next')}</Button>
+            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base" disabled>
+              {t('prev')}
+            </Button>
+            <Button variant="primary" size="sm" className="md:h-11 md:px-6 md:text-base">
+              1
+            </Button>
+            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">
+              2
+            </Button>
+            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">
+              {t('next')}
+            </Button>
           </div>
         </Container>
       </Section>

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

@@ -0,0 +1,28 @@
+import { ImageResponse } from 'next/og';
+import { getTranslations } from 'next-intl/server';
+import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+
+export const runtime = 'nodejs';
+
+export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+  const t = await getTranslations({ locale, namespace: 'Contact' });
+  const fonts = await getOgFonts();
+
+  const title = t('meta.title') || t('title');
+  const description = t('meta.description') || t('subtitle');
+
+  return new ImageResponse(
+    (
+      <OGImageTemplate
+        title={title}
+        description={description}
+        label="Contact"
+      />
+    ),
+    {
+      ...OG_IMAGE_SIZE,
+      fonts,
+    }
+  );
+}

app/[locale]/contact/page.tsx

@@ -1,9 +1,21 @@
-import { useTranslations } from 'next-intl';
-import { getTranslations } from 'next-intl/server';
-import { Metadata } from 'next';
+import ContactForm from '@/components/ContactForm';
 import JsonLd from '@/components/JsonLd';
-import { getBreadcrumbSchema, SITE_URL, LOGO_URL } from '@/lib/schema';
-import { Section, Container, Button, Heading, Card, Input, Textarea, Label } from '@/components/ui';
+import Reveal from '@/components/Reveal';
+import { Container, Heading, Section } from '@/components/ui';
+import { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+import { SITE_URL } from '@/lib/schema';
+import { getOGImageMetadata } from '@/lib/metadata';
+import { Suspense } from 'react';
+import dynamic from 'next/dynamic';
+const LeafletMap = dynamic(() => import('@/components/LeafletMap'), {
+  ssr: false,
+  loading: () => (
+    <div className="h-full w-full bg-neutral-medium flex items-center justify-center">
+      <div className="animate-pulse text-primary font-medium">Loading Map...</div>
+    </div>
+  ),
+});
 
 interface ContactPageProps {
   params: {
@@ -11,36 +23,51 @@ interface ContactPageProps {
   };
 }
 
-export async function generateMetadata({ params: { locale } }: ContactPageProps): Promise<Metadata> {
+export async function generateMetadata({
+  params: { locale },
+}: ContactPageProps): Promise<Metadata> {
   const t = await getTranslations({ locale, namespace: 'Contact' });
+  const title = t('meta.title') || t('title');
+  const description = t('meta.description') || t('subtitle');
   return {
-    title: t('title'),
-    description: t('subtitle'),
+    title,
+    description,
     alternates: {
-      canonical: `/${locale}/contact`,
+      canonical: `${SITE_URL}/${locale}/contact`,
       languages: {
-        'de': '/de/contact',
-        'en': '/en/contact',
-        'x-default': '/en/contact',
+        'de-DE': '/de/contact',
+        'en-US': '/en/contact',
       },
     },
     openGraph: {
-      title: `${t('title')} | KLZ Cables`,
-      description: t('subtitle'),
-      url: `https://klz-cables.com/${locale}/contact`,
+      title: `${title} | KLZ Cables`,
+      description,
+      url: `${SITE_URL}/${locale}/contact`,
+      siteName: 'KLZ Cables',
+      images: getOGImageMetadata('contact', title, locale),
+      locale: `${locale.toUpperCase()}_DE`,
+      type: 'website',
     },
     twitter: {
       card: 'summary_large_image',
-      title: `${t('title')} | KLZ Cables`,
-      description: t('subtitle'),
+      title: `${title} | KLZ Cables`,
+      description,
+      images: [`${SITE_URL}/${locale}/contact/opengraph-image`],
+    },
+    robots: {
+      index: true,
+      follow: true,
     },
   };
 }
 
-export default function ContactPage() {
-  const t = useTranslations('Contact');
-  const locale = t('locale') || 'en'; // Fallback if needed, but usually passed via params
+export async function generateStaticParams() {
+  return [{ locale: 'de' }, { locale: 'en' }];
+}
 
+export default async function ContactPage({ params }: ContactPageProps) {
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: 'Contact' });
   return (
     <div className="flex flex-col min-h-screen bg-neutral-light">
       <JsonLd
@@ -53,7 +80,7 @@ export default function ContactPage() {
               '@type': 'ListItem',
               position: 1,
               name: t('title'),
-              item: `https://klz-cables.com/${locale}/contact`,
+              item: `${SITE_URL}/${locale}/contact`,
             },
           ],
         }}
@@ -64,57 +91,50 @@ export default function ContactPage() {
           '@context': 'https://schema.org',
           '@type': 'LocalBusiness',
           name: 'KLZ Cables',
-          image: 'https://klz-cables.com/logo.png',
-          '@id': 'https://klz-cables.com',
-          url: 'https://klz-cables.com',
-          telephone: '+49 881 92537298',
+          image: `${SITE_URL}/logo.png`,
+          '@id': SITE_URL,
+          url: SITE_URL,
           address: {
             '@type': 'PostalAddress',
-            streetAddress: 'Trifthofstraße 57',
-            addressLocality: 'Weilheim i. OB',
-            postalCode: '82362',
+            streetAddress: 'Raiffeisenstraße 22',
+            addressLocality: 'Remshalden',
+            postalCode: '73630',
             addressCountry: 'DE',
           },
           geo: {
             '@type': 'GeoCoordinates',
-            latitude: 47.8407,
-            longitude: 11.1421,
+            latitude: 48.8144,
+            longitude: 9.4144,
           },
           openingHoursSpecification: [
             {
               '@type': 'OpeningHoursSpecification',
-              dayOfWeek: [
-                'Monday',
-                'Tuesday',
-                'Wednesday',
-                'Thursday',
-                'Friday'
-              ],
+              dayOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
               opens: '08:00',
-              closes: '17:00'
-            }
+              closes: '17:00',
+            },
           ],
-          sameAs: [
-            'https://www.linkedin.com/company/klz-cables'
-          ]
+          sameAs: ['https://www.linkedin.com/company/klz-cables'],
         }}
       />
       {/* Hero Section */}
-      <section className="bg-primary-dark text-white py-20 md:py-32 relative overflow-hidden">
-        <div className="absolute inset-0 opacity-20">
-          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
-        </div>
-        <Container className="relative z-10">
-          <div className="max-w-4xl animate-slide-up">
-            <Heading level={1} subtitle={t('heroSubtitle')} className="text-white mb-4 md:mb-6">
-              <span className="text-white">{t('title')}</span>
-            </Heading>
-            <p className="text-lg md:text-xl text-white/70 leading-relaxed max-w-2xl">
-              {t('subtitle')}
-            </p>
+      <Reveal>
+        <section className="bg-primary-dark text-white py-20 md:py-32 relative overflow-hidden">
+          <div className="absolute inset-0 opacity-20">
+            <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
           </div>
-        </Container>
-      </section>
+          <Container className="relative z-10">
+            <div className="max-w-4xl">
+              <Heading level={1} subtitle={t('heroSubtitle')} className="text-white mb-4 md:mb-6">
+                <span className="text-white">{t('title')}</span>
+              </Heading>
+              <p className="text-lg md:text-xl text-white/70 leading-relaxed max-w-2xl">
+                {t('subtitle')}
+              </p>
+            </div>
+          </Container>
+        </section>
+      </Reveal>
 
       <Section className="bg-neutral-light -mt-8 md:-mt-20 relative z-20 py-12 md:py-28">
         <Container>
@@ -128,13 +148,30 @@ export default function ContactPage() {
                 <div className="space-y-4 md:space-y-8">
                   <div className="flex items-start gap-4 md:gap-6 group">
                     <div className="w-10 h-10 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-saturated/10 flex items-center justify-center text-saturated group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm flex-shrink-0">
-                      <svg className="w-5 h-5 md:w-7 md:h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                      <svg
+                        className="w-5 h-5 md:w-7 md:h-7"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+                        />
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+                        />
                       </svg>
                     </div>
                     <div>
-                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">{t('info.office')}</h4>
+                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">
+                        {t('info.office')}
+                      </h4>
                       <p className="text-sm md:text-lg text-text-secondary leading-relaxed whitespace-pre-line">
                         {t('info.address')}
                       </p>
@@ -143,33 +180,40 @@ export default function ContactPage() {
 
                   <div className="flex items-start gap-4 md:gap-6 group">
                     <div className="w-10 h-10 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-saturated/10 flex items-center justify-center text-saturated group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm flex-shrink-0">
-                      <svg className="w-5 h-5 md:w-7 md:h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                      <svg
+                        className="w-5 h-5 md:w-7 md:h-7"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                        />
                       </svg>
                     </div>
                     <div>
-                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">{t('info.phone')}</h4>
-                      <a href="tel:+4988192537298" className="text-sm md:text-lg text-text-secondary hover:text-primary transition-colors font-medium touch-target">+49 881 92537298</a>
-                    </div>
-                  </div>
-
-                  <div className="flex items-start gap-4 md:gap-6 group">
-                    <div className="w-10 h-10 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-saturated/10 flex items-center justify-center text-saturated group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm flex-shrink-0">
-                      <svg className="w-5 h-5 md:w-7 md:h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                      </svg>
-                    </div>
-                    <div>
-                      <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-vertriebs-gmbh.com" className="text-sm md:text-lg text-text-secondary hover:text-primary transition-colors font-medium touch-target">info@klz-vertriebs-gmbh.com</a>
+                      <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"
+                        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>
                 </div>
               </div>
 
               <div className="p-6 md:p-10 bg-white rounded-2xl md:rounded-3xl border border-neutral-medium shadow-sm animate-fade-in">
-                <Heading level={4} className="mb-4 md:mb-6">{t('hours.title')}</Heading>
-                <ul className="space-y-2 md:space-y-4">
+                <Heading level={4} className="mb-4 md:mb-6">
+                  {t('hours.title')}
+                </Heading>
+                <ul className="space-y-2 md:space-y-4 list-none m-0 p-0">
                   <li className="flex justify-between items-center pb-2 md:pb-4 border-b border-neutral-medium text-sm md:text-base">
                     <span className="font-bold text-primary">{t('hours.weekdays')}</span>
                     <span className="text-text-secondary">{t('hours.weekdaysTime')}</span>
@@ -184,71 +228,29 @@ export default function ContactPage() {
 
             {/* Contact Form */}
             <div className="lg:col-span-7">
-              <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl animate-slide-up">
-                <Heading level={3} subtitle={t('form.subtitle')} className="mb-6 md:mb-10">
-                  {t('form.title')}
-                </Heading>
-                <form className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
-                  <div className="space-y-1 md:space-y-2">
-                    <Label htmlFor="name">{t('form.name')}</Label>
-                    <Input 
-                      type="text" 
-                      id="name" 
-                      name="name"
-                      autoComplete="name"
-                      enterKeyHint="next"
-                      placeholder={t('form.namePlaceholder')}
-                      required
-                    />
-                  </div>
-                  <div className="space-y-1 md:space-y-2">
-                    <Label htmlFor="email">{t('form.email')}</Label>
-                    <Input 
-                      type="email" 
-                      id="email" 
-                      name="email"
-                      autoComplete="email"
-                      inputMode="email"
-                      enterKeyHint="next"
-                      placeholder={t('form.emailPlaceholder')}
-                      required
-                    />
-                  </div>
-                  <div className="md:col-span-2 space-y-1 md:space-y-2">
-                    <Label htmlFor="message">{t('form.message')}</Label>
-                    <Textarea 
-                      id="message" 
-                      name="message"
-                      rows={4} 
-                      enterKeyHint="send"
-                      placeholder={t('form.messagePlaceholder')}
-                      required
-                    />
-                  </div>
-                  <div className="md:col-span-2 pt-2 md:pt-4">
-                    <Button type="submit" variant="saturated" size="lg" className="w-full shadow-xl shadow-saturated/20 md:h-16 md:px-10 md:text-xl active:scale-[0.98] transition-transform">
-                      {t('form.submit')}
-                    </Button>
-                  </div>
-                </form>
-              </Card>
+              <Suspense
+                fallback={
+                  <div className="animate-pulse bg-neutral-medium h-96 rounded-2xl md:rounded-3xl"></div>
+                }
+              >
+                <ContactForm />
+              </Suspense>
             </div>
           </div>
         </Container>
       </Section>
-      
-      {/* Map Placeholder */}
+
+      {/* Map Section */}
       <section className="h-[300px] md:h-[500px] bg-neutral-medium relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="text-center">
-            <div className="w-20 h-20 bg-primary rounded-full flex items-center justify-center text-white mb-4 mx-auto shadow-2xl animate-bounce">
-              <svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-              </svg>
+        <Suspense
+          fallback={
+            <div className="h-full w-full bg-neutral-medium animate-pulse flex items-center justify-center">
+              <div className="text-primary font-medium">Loading Map...</div>
             </div>
-            <p className="font-bold text-primary text-xl">{t('map.comingSoon')}</p>
-          </div>
-        </div>
+          }
+        >
+          <LeafletMap address={t('info.address')} lat={48.8144} lng={9.4144} />
+        </Suspense>
       </section>
     </div>
   );

app/[locale]/error.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import * as Sentry from '@sentry/nextjs';
 import { useEffect } from 'react';
 import { useTranslations } from 'next-intl';
-import { Container, Button } from '@/components/ui';
+import { getAppServices } from '@/lib/services/create-services';
+import { Container, Button, Heading } from '@/components/ui';
+import Scribble from '@/components/Scribble';
 
 export default function Error({
   error,
@@ -15,18 +16,51 @@ export default function Error({
   const t = useTranslations('Error');
 
   useEffect(() => {
-    Sentry.captureException(error);
+    const services = getAppServices();
+    services.errors.captureException(error);
+    services.logger.error('Application error caught by boundary', {
+      message: error.message,
+      stack: error.stack,
+      digest: error.digest
+    });
   }, [error]);
 
   return (
-    <Container className="py-24 flex flex-col items-center justify-center text-center min-h-[60vh]">
-      <h2 className="text-3xl font-bold mb-4">{t('title')}</h2>
-      <p className="text-white/60 mb-8 max-w-md">
+    <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">500</span>
+      </div>
+
+      <div className="relative mb-8">
+        <Heading level={1} className="text-6xl md:text-8xl font-bold mb-2 text-saturated">
+          500
+        </Heading>
+        <Scribble 
+          variant="underline" 
+          className="w-full h-6 -bottom-2 left-0 text-saturated/40" 
+        />
+      </div>
+
+      <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4">
+        {t('title')}
+      </Heading>
+      
+      <p className="text-white/60 mb-10 max-w-md text-lg">
         {t('description')}
       </p>
-      <Button onClick={() => reset()}>
-        {t('tryAgain')}
-      </Button>
+
+      <div className="flex flex-col sm:flex-row gap-4">
+        <Button onClick={() => reset()} variant="saturated" size="lg">
+          {t('tryAgain')}
+        </Button>
+        <Button href="/" variant="outline" size="lg">
+          {t('goHome')}
+        </Button>
+      </div>
+
+      {/* Decorative Industrial Line */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-px h-24 bg-gradient-to-b from-saturated/50 to-transparent" />
     </Container>
   );
 }

app/[locale]/layout.tsx

@@ -1,62 +1,24 @@
-import {NextIntlClientProvider} from 'next-intl';
-import {getMessages, getTranslations} from 'next-intl/server';
-import '../../styles/globals.css';
-import Header from '@/components/Header';
 import Footer from '@/components/Footer';
-import UmamiScript from '@/components/analytics/UmamiScript';
-import AnalyticsProvider from '@/components/analytics/AnalyticsProvider';
-import { Metadata, Viewport } from 'next';
+import Header from '@/components/Header';
 import JsonLd from '@/components/JsonLd';
-import { getOrganizationSchema, SITE_URL } from '@/lib/schema';
+import AnalyticsProvider from '@/components/analytics/AnalyticsProvider';
+import CMSConnectivityNotice from '@/components/CMSConnectivityNotice';
+import { Metadata, Viewport } from 'next';
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages } from 'next-intl/server';
+import '../../styles/globals.css';
+import { SITE_URL } from '@/lib/schema';
 
-export async function generateMetadata({params: {locale}}: {params: {locale: string}}): Promise<Metadata> {
-  const t = await getTranslations({locale, namespace: 'Index.meta'});
- 
-  return {
-    title: {
-      default: t('title'),
-      template: `%s | KLZ Cables`
-    },
-    description: t('description'),
-    metadataBase: new URL('https://klz-cables.com'),
-    icons: {
-      icon: '/favicon.ico',
-      apple: '/apple-touch-icon.png',
-    },
-    alternates: {
-      canonical: `/${locale}`,
-      languages: {
-        'de': '/de',
-        'en': '/en',
-        'x-default': '/en',
-      },
-    },
-    openGraph: {
-      type: 'website',
-      locale: locale === 'de' ? 'de_DE' : 'en_US',
-      url: `https://klz-cables.com/${locale}`,
-      siteName: 'KLZ Cables',
-      title: t('title'),
-      description: t('description'),
-    },
-    twitter: {
-      card: 'summary_large_image',
-      title: t('title'),
-      description: t('description'),
-    },
-    robots: {
-      index: true,
-      follow: true,
-      googleBot: {
-        index: true,
-        follow: true,
-        'max-video-preview': -1,
-        'max-image-preview': 'large',
-        'max-snippet': -1,
-      },
-    },
-  };
-}
+export const metadata: Metadata = {
+  metadataBase: new URL(SITE_URL),
+  icons: {
+    icon: [
+      { url: '/favicon.ico', sizes: 'any' },
+      { url: '/logo-blue.svg', type: 'image/svg+xml' },
+    ],
+    apple: [{ url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' }],
+  },
+};
 
 export const viewport: Viewport = {
   width: 'device-width',
@@ -66,31 +28,28 @@ export const viewport: Viewport = {
   viewportFit: 'cover',
   themeColor: '#001a4d',
 };
- 
+
 export default async function LocaleLayout({
   children,
-  params: {locale}
+  params: { locale },
 }: {
   children: React.ReactNode;
-  params: {locale: string};
+  params: { locale: string };
 }) {
   // Providing all messages to the client
   // side is the easiest way to get started
   const messages = await getMessages();
- 
+
   return (
     <html lang={locale} className="scroll-smooth overflow-x-hidden">
       <body className="flex flex-col min-h-screen font-sans selection:bg-accent selection:text-primary-dark antialiased overflow-x-hidden">
         <NextIntlClientProvider messages={messages} locale={locale}>
-          {/* Loads Umami only when NEXT_PUBLIC_UMAMI_WEBSITE_ID is set */}
-          <UmamiScript />
-
+          <JsonLd />
           <Header />
-          <main className="flex-grow animate-fade-in overflow-visible">
-            {children}
-          </main>
+          <main className="flex-grow animate-fade-in overflow-visible">{children}</main>
           <Footer />
-          
+          <CMSConnectivityNotice />
+
           {/* Sends pageviews for client-side navigations */}
           <AnalyticsProvider />
         </NextIntlClientProvider>

app/[locale]/not-found.tsx

@@ -0,0 +1,46 @@
+import { useTranslations } from 'next-intl';
+import { Container, Button, Heading } from '@/components/ui';
+import Scribble from '@/components/Scribble';
+
+export default function NotFound() {
+  const t = useTranslations('Error.notFound');
+
+  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>
+
+      <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>
+      
+      <p className="text-white/60 mb-10 max-w-md text-lg">
+        {t('description')}
+      </p>
+
+      <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>
+
+      {/* 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]/opengraph-image.tsx

@@ -1,92 +1,26 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
+import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
-export const runtime = 'edge';
+export const runtime = 'nodejs';
 
 export default async function Image({ params: { locale } }: { params: { locale: string } }) {
   const t = await getTranslations({ locale, namespace: 'Index.meta' });
+  const fonts = await getOgFonts();
 
   return new ImageResponse(
     (
-      <div
-        style={{
-          height: '100%',
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          justifyContent: 'center',
-          backgroundColor: '#001a4d', // Primary Blue from Styleguide
-          padding: '80px',
-          position: 'relative',
-        }}
-      >
-        {/* Background Pattern / Scribble placeholder */}
-        <div
-          style={{
-            position: 'absolute',
-            top: '-100px',
-            right: '-100px',
-            width: '600px',
-            height: '600px',
-            borderRadius: '50%',
-            background: 'radial-gradient(circle, rgba(0,255,153,0.1) 0%, transparent 70%)',
-          }}
-        />
-
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
-          <div
-            style={{
-              fontSize: '24px',
-              fontWeight: 'bold',
-              color: '#00ff99', // Accent Green
-              textTransform: 'uppercase',
-              letterSpacing: '0.2em',
-              marginBottom: '20px',
-            }}
-          >
-            KLZ Cables
-          </div>
-          <div
-            style={{
-              fontSize: '72px',
-              fontWeight: '900',
-              color: 'white',
-              lineHeight: '1.1',
-              maxWidth: '800px',
-              marginBottom: '30px',
-            }}
-          >
-            {t('title')}
-          </div>
-          <div
-            style={{
-              fontSize: '32px',
-              color: 'rgba(255,255,255,0.7)',
-              maxWidth: '700px',
-            }}
-          >
-            {t('description')}
-          </div>
-        </div>
-
-        {/* Bottom Accent Line */}
-        <div
-          style={{
-            position: 'absolute',
-            bottom: '80px',
-            left: '80px',
-            width: '120px',
-            height: '8px',
-            backgroundColor: '#00ff99',
-            borderRadius: '4px',
-          }}
-        />
-      </div>
+      <OGImageTemplate
+        title={t('title')}
+        description={t('description')}
+        label="Reliable Energy Infrastructure"
+      />
     ),
     {
-      width: 1200,
-      height: 630,
+      ...OG_IMAGE_SIZE,
+      fonts,
     }
   );
 }
+

app/[locale]/page.tsx

@@ -1,6 +1,6 @@
 import Hero from '@/components/home/Hero';
 import JsonLd from '@/components/JsonLd';
-import { getBreadcrumbSchema } from '@/lib/schema';
+import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
 import ProductCategories from '@/components/home/ProductCategories';
 import WhatWeDo from '@/components/home/WhatWeDo';
 import RecentPosts from '@/components/home/RecentPosts';
@@ -11,26 +11,92 @@ import GallerySection from '@/components/home/GallerySection';
 import VideoSection from '@/components/home/VideoSection';
 import CTA from '@/components/home/CTA';
 import Reveal from '@/components/Reveal';
+import { getTranslations } from 'next-intl/server';
+import { Metadata } from 'next';
+import { getOGImageMetadata } from '@/lib/metadata';
 
 export default function HomePage({ params: { locale } }: { params: { locale: string } }) {
   return (
     <div className="flex flex-col min-h-screen">
       <JsonLd
         id="breadcrumb-home"
-        data={getBreadcrumbSchema([
-          { name: 'Home', item: `/${locale}` },
-        ])}
+        data={getBreadcrumbSchema([{ name: 'Home', item: `/${locale}` }])}
       />
       <Hero />
-      <Reveal><ProductCategories /></Reveal>
-      <Reveal><WhatWeDo /></Reveal>
-      <Reveal><RecentPosts locale={locale} /></Reveal>
-      <Reveal><Experience /></Reveal>
-      <Reveal><WhyChooseUs /></Reveal>
-      <Reveal><MeetTheTeam /></Reveal>
-      <Reveal><GallerySection /></Reveal>
-      <Reveal><VideoSection /></Reveal>
-      <Reveal><CTA /></Reveal>
+      <Reveal>
+        <ProductCategories />
+      </Reveal>
+      <Reveal>
+        <WhatWeDo />
+      </Reveal>
+      <Reveal>
+        <RecentPosts locale={locale} />
+      </Reveal>
+      <Reveal>
+        <Experience />
+      </Reveal>
+      <Reveal>
+        <WhyChooseUs />
+      </Reveal>
+      <Reveal>
+        <MeetTheTeam />
+      </Reveal>
+      <Reveal>
+        <GallerySection />
+      </Reveal>
+      <Reveal>
+        <VideoSection />
+      </Reveal>
+      <Reveal>
+        <CTA />
+      </Reveal>
     </div>
   );
 }
+
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}): Promise<Metadata> {
+  // Use translations for meta where available (namespace: Index.meta)
+  // Fallback to a sensible default if translation keys are missing.
+  let t;
+  try {
+    t = await getTranslations({ locale, namespace: 'Index.meta' });
+  } catch (err) {
+    // If translations for Index.meta are not present, try generic Index namespace
+    try {
+      t = await getTranslations({ locale, namespace: 'Index' });
+    } catch (e) {
+      t = (key: string) => '';
+    }
+  }
+
+  const title = t('title') || 'KLZ Cables';
+  const description = t('description') || '';
+
+  return {
+    title,
+    description,
+    alternates: {
+      canonical: `/${locale}`,
+      languages: {
+        de: '/de',
+        en: '/en',
+        'x-default': '/en',
+      },
+    },
+    openGraph: {
+      title: `${title} | KLZ Cables`,
+      description,
+      url: `${SITE_URL}/${locale}`,
+      images: getOGImageMetadata('', title, locale),
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: `${title} | KLZ Cables`,
+      description,
+    },
+  };
+}

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

@@ -5,12 +5,14 @@ import ProductSidebar from '@/components/ProductSidebar';
 import ProductTabs from '@/components/ProductTabs';
 import ProductTechnicalData from '@/components/ProductTechnicalData';
 import RelatedProducts from '@/components/RelatedProducts';
-import { Badge, Container, Section } from '@/components/ui';
+import DatasheetDownload from '@/components/DatasheetDownload';
+import { Badge, Container, Heading, Section } from '@/components/ui';
 import { getDatasheetPath } from '@/lib/datasheets';
 import { getAllProducts, getProductBySlug } from '@/lib/mdx';
-import { mapFileSlugToTranslated } from '@/lib/slugs';
+import { mapFileSlugToTranslated, mapSlugToFileSlug } from '@/lib/slugs';
 import { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
+import { getProductOGImageMetadata } from '@/lib/metadata';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -29,11 +31,23 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
   const t = await getTranslations('Products');
 
   // Check if it's a category page
-  const categories = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
-  if (categories.includes(productSlug)) {
-    const categoryKey = productSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-    const categoryTitle = t.has(`categories.${categoryKey}.title`) ? t(`categories.${categoryKey}.title`) : productSlug;
-    const categoryDesc = t.has(`categories.${categoryKey}.description`) ? t(`categories.${categoryKey}.description`) : '';
+  const categories = [
+    'low-voltage-cables',
+    'medium-voltage-cables',
+    'high-voltage-cables',
+    'solar-cables',
+  ];
+  const fileSlug = await mapSlugToFileSlug(productSlug, locale);
+  if (categories.includes(fileSlug)) {
+    const categoryKey = fileSlug
+      .replace(/-cables$/, '')
+      .replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+    const categoryTitle = t.has(`categories.${categoryKey}.title`)
+      ? t(`categories.${categoryKey}.title`)
+      : fileSlug;
+    const categoryDesc = t.has(`categories.${categoryKey}.description`)
+      ? t(`categories.${categoryKey}.description`)
+      : '';
 
     return {
       title: categoryTitle,
@@ -41,15 +55,16 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
       alternates: {
         canonical: `/${locale}/products/${productSlug}`,
         languages: {
-          'de': `/de/products/${await mapFileSlugToTranslated(productSlug, 'de')}`,
-          'en': `/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+          de: `/de/products/${await mapFileSlugToTranslated(productSlug, 'de')}`,
+          en: `/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
           'x-default': `/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
         },
       },
       openGraph: {
         title: `${categoryTitle} | KLZ Cables`,
         description: categoryDesc,
-        url: `https://klz-cables.com/${locale}/products/${productSlug}`,
+        url: `${SITE_URL}/${locale}/products/${productSlug}`,
+        images: getProductOGImageMetadata(fileSlug, categoryTitle, locale),
       },
       twitter: {
         card: 'summary_large_image',
@@ -68,8 +83,8 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
     alternates: {
       canonical: `/${locale}/products/${slug.join('/')}`,
       languages: {
-        'de': `/de/products/${await mapFileSlugToTranslated(slug[0], 'de')}/${await mapFileSlugToTranslated(productSlug, 'de')}`,
-        'en': `/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+        de: `/de/products/${await mapFileSlugToTranslated(slug[0], 'de')}/${await mapFileSlugToTranslated(productSlug, 'de')}`,
+        en: `/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
         'x-default': `/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
       },
     },
@@ -77,7 +92,8 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
       title: `${product.frontmatter.title} | KLZ Cables`,
       description: product.frontmatter.description,
       type: 'website',
-      url: `https://klz-cables.com/${locale}/products/${slug.join('/')}`,
+      url: `${SITE_URL}/${locale}/products/${slug.join('/')}`,
+      images: getProductOGImageMetadata(productSlug, product.frontmatter.title, locale),
     },
     twitter: {
       card: 'summary_large_image',
@@ -90,20 +106,36 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
 const components = {
   ProductTechnicalData,
   ProductTabs,
-  p: (props: any) => <p {...props} className="text-lg md:text-xl text-text-secondary leading-relaxed mb-8 font-medium" />,
+  p: (props: any) => (
+    <p
+      {...props}
+      className="text-lg md:text-xl text-text-secondary leading-relaxed mb-8 font-medium"
+    />
+  ),
   h2: (props: any) => (
     <div className="relative mb-16">
-      <h2 {...props} className="text-3xl md:text-4xl font-black text-primary tracking-tighter uppercase mb-6" />
+      <h2
+        {...props}
+        className="text-3xl md:text-4xl font-black text-primary tracking-tighter uppercase mb-6"
+      />
       <div className="w-20 h-1.5 bg-accent rounded-full" />
     </div>
   ),
-  h3: (props: any) => <h3 {...props} className="text-2xl md:text-3xl font-black text-primary mb-10 tracking-tight uppercase" />,
+  h3: (props: any) => (
+    <h3
+      {...props}
+      className="text-2xl md:text-3xl font-black text-primary mb-10 tracking-tight uppercase"
+    />
+  ),
   ul: (props: any) => <ul {...props} className="list-none pl-0 mb-10" />,
   section: (props: any) => <div {...props} className="block" />,
   li: (props: any) => (
     <li className="flex items-start gap-4 group mb-4 last:mb-0">
       <div className="mt-2.5 w-2 h-2 rounded-full bg-accent flex-shrink-0 group-hover:scale-125 transition-transform" />
-      <span {...props} className="text-lg md:text-xl text-text-secondary leading-relaxed font-medium" />
+      <span
+        {...props}
+        className="text-lg md:text-xl text-text-secondary leading-relaxed font-medium"
+      />
     </li>
   ),
   strong: (props: any) => <strong {...props} className="font-black text-primary" />,
@@ -112,13 +144,26 @@ const components = {
       <table {...props} className="min-w-full divide-y divide-neutral-dark/10" />
     </div>
   ),
-  th: (props: any) => <th {...props} className="px-8 py-6 bg-neutral-light/50 text-left text-[10px] font-black uppercase tracking-[0.25em] text-primary/60" />,
-  td: (props: any) => <td {...props} className="px-8 py-6 text-text-secondary border-t border-neutral-dark/5 text-lg md:text-xl font-medium" />,
+  th: (props: any) => (
+    <th
+      {...props}
+      className="px-8 py-6 bg-neutral-light/50 text-left text-[10px] font-black uppercase tracking-[0.25em] text-primary/60"
+    />
+  ),
+  td: (props: any) => (
+    <td
+      {...props}
+      className="px-8 py-6 text-text-secondary border-t border-neutral-dark/5 text-lg md:text-xl font-medium"
+    />
+  ),
   hr: () => <hr className="my-24 border-t-2 border-neutral-dark/5" />,
   blockquote: (props: any) => (
     <div className="my-20 p-10 md:p-16 bg-primary-dark rounded-[40px] relative overflow-hidden group">
       <div className="absolute top-0 right-0 w-64 h-64 bg-accent/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl group-hover:bg-accent/20 transition-colors duration-700" />
-      <div className="relative z-10 italic text-2xl md:text-3xl text-white/90 leading-relaxed font-black tracking-tight" {...props} />
+      <div
+        className="relative z-10 italic text-2xl md:text-3xl text-white/90 leading-relaxed font-black tracking-tight"
+        {...props}
+      />
     </div>
   ),
 };
@@ -129,26 +174,36 @@ export default async function ProductPage({ params }: ProductPageProps) {
   const t = await getTranslations('Products');
 
   // Check if it's a category page
-  const categories = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
-  if (categories.includes(productSlug)) {
+  const categories = [
+    'low-voltage-cables',
+    'medium-voltage-cables',
+    'high-voltage-cables',
+    'solar-cables',
+  ];
+  const fileSlug = await mapSlugToFileSlug(productSlug, locale);
+
+  if (categories.includes(fileSlug)) {
     const allProducts = await getAllProducts(locale);
-    const categoryKey = productSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-    const categoryTitle = t.has(`categories.${categoryKey}.title`) ? t(`categories.${categoryKey}.title`) : productSlug;
-    
+    const categoryKey = fileSlug
+      .replace(/-cables$/, '')
+      .replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+    const categoryTitle = t.has(`categories.${categoryKey}.title`)
+      ? t(`categories.${categoryKey}.title`)
+      : fileSlug;
+
     // Filter products for this category
-    const filteredProducts = allProducts.filter(p =>
-      p.frontmatter.categories.some(cat =>
-        cat.toLowerCase().replace(/\s+/g, '-') === productSlug ||
-        cat === categoryTitle
-      )
+    const filteredProducts = allProducts.filter((p) =>
+      p.frontmatter.categories.some(
+        (cat) => cat.toLowerCase().replace(/\s+/g, '-') === fileSlug || cat === categoryTitle,
+      ),
     );
 
     // Get translated product slugs
     const productsWithTranslatedSlugs = await Promise.all(
       filteredProducts.map(async (p) => ({
         ...p,
-        translatedSlug: await mapFileSlugToTranslated(p.slug, locale)
-      }))
+        translatedSlug: await mapFileSlugToTranslated(p.slug, locale),
+      })),
     );
 
     return (
@@ -157,13 +212,15 @@ export default async function ProductPage({ params }: ProductPageProps) {
           <Container className="relative z-10">
             <div className="max-w-4xl animate-slide-up">
               <nav className="flex items-center mb-8 text-white/40 text-sm font-bold uppercase tracking-widest">
-                <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">{t('title')}</Link>
+                <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">
+                  {t('title')}
+                </Link>
                 <span className="mx-3 opacity-30">/</span>
                 <span className="text-white/90">{categoryTitle}</span>
               </nav>
-              <h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold text-white mb-8 tracking-tight leading-[1.05]">
+              <Heading level={1} className="text-white mb-8">
                 {categoryTitle}
-              </h1>
+              </Heading>
               <div className="h-1.5 w-24 bg-accent rounded-full" />
             </div>
           </Container>
@@ -195,7 +252,10 @@ export default async function ProductPage({ params }: ProductPageProps) {
                   <div className="p-8 md:p-10">
                     <div className="flex flex-wrap gap-2 mb-4">
                       {product.frontmatter.categories.map((cat, i) => (
-                        <span key={i} className="text-[10px] font-bold uppercase tracking-widest text-primary/40">
+                        <span
+                          key={i}
+                          className="text-[10px] font-bold uppercase tracking-widest text-primary/40"
+                        >
                           {cat}
                         </span>
                       ))}
@@ -210,8 +270,18 @@ export default async function ProductPage({ params }: ProductPageProps) {
                       <span className="border-b-2 border-primary/10 group-hover:border-accent-dark transition-colors pb-1">
                         {t('details')}
                       </span>
-                      <svg className="w-5 h-5 ml-3 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                      <svg
+                        className="w-5 h-5 ml-3 transition-transform group-hover:translate-x-1"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M17 8l4 4m0 0l-4 4m4-4H3"
+                        />
                       </svg>
                     </div>
                   </div>
@@ -231,7 +301,9 @@ export default async function ProductPage({ params }: ProductPageProps) {
   }
 
   // Extract technical data for schema
-  const technicalDataMatch = product.content.match(/technicalData=\{<ProductTechnicalData data=\{(.*?)\}\s*\/>\}/s);
+  const technicalDataMatch = product.content.match(
+    /technicalData=\{<ProductTechnicalData data=\{(.*?)\}\s*\/>\}/s,
+  );
   let technicalItems = [];
   if (technicalDataMatch) {
     try {
@@ -245,11 +317,16 @@ export default async function ProductPage({ params }: ProductPageProps) {
   const datasheetPath = getDatasheetPath(productSlug, locale);
   const isFallback = (product.frontmatter as any).isFallback;
   const categorySlug = slug[0];
-  const categoryKey = categorySlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-  const categoryTitle = t.has(`categories.${categoryKey}.title`) ? t(`categories.${categoryKey}.title`) : categorySlug;
+  const categoryFileSlug = await mapSlugToFileSlug(categorySlug, locale);
+  const categoryKey = categoryFileSlug
+    .replace(/-cables$/, '')
+    .replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+  const categoryTitle = t.has(`categories.${categoryKey}.title`)
+    ? t(`categories.${categoryKey}.title`)
+    : categoryFileSlug;
 
   const sidebar = (
-    <ProductSidebar 
+    <ProductSidebar
       productName={product.frontmatter.title}
       productImage={product.frontmatter.images?.[0]}
       datasheetPath={datasheetPath}
@@ -279,17 +356,24 @@ export default async function ProductPage({ params }: ProductPageProps) {
         {/* 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]">
-              <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">{t('title')}</Link>
+              <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">
+                {t('title')}
+              </Link>
               <span className="mx-4 opacity-20">/</span>
-              <Link href={`/${locale}/products/${categorySlug}`} className="hover:text-accent transition-colors">{categoryTitle}</Link>
+              <Link
+                href={`/${locale}/products/${categorySlug}`}
+                className="hover:text-accent transition-colors"
+              >
+                {categoryTitle}
+              </Link>
               <span className="mx-4 opacity-20">/</span>
               <span className="text-white/90">{product.frontmatter.title}</span>
             </nav>
-            
+
             <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-12">
               <div className="flex-1">
                 {isFallback && (
@@ -300,14 +384,18 @@ export default async function ProductPage({ params }: ProductPageProps) {
                 )}
                 <div className="flex flex-wrap gap-3 mb-8">
                   {product.frontmatter.categories.map((cat, idx) => (
-                    <Badge key={idx} variant="accent" className="bg-white/5 text-white/80 border-white/10 backdrop-blur-md px-5 py-2 text-[10px] font-black tracking-[0.15em]">
+                    <Badge
+                      key={idx}
+                      variant="accent"
+                      className="bg-white/5 text-white/80 border-white/10 backdrop-blur-md px-5 py-2 text-[10px] font-black tracking-[0.15em]"
+                    >
                       {cat}
                     </Badge>
                   ))}
                 </div>
-                <h1 className="text-6xl md:text-8xl lg:text-9xl font-black text-white mb-8 tracking-tighter leading-[0.9] uppercase">
+                <Heading level={1} className="text-white mb-8 uppercase">
                   {product.frontmatter.title}
-                </h1>
+                </Heading>
                 <p className="text-xl md:text-2xl text-white/60 max-w-2xl leading-relaxed font-medium">
                   {product.frontmatter.description}
                 </p>
@@ -321,11 +409,14 @@ export default async function ProductPage({ params }: ProductPageProps) {
         <Container className="relative">
           {/* Large Product Image Section */}
           {product.frontmatter.images && product.frontmatter.images.length > 0 && (
-            <div className="relative -mt-32 mb-32 animate-slide-up" style={{ animationDelay: '200ms' }}>
+            <div
+              className="relative -mt-32 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]">
-                  <Image 
-                    src={product.frontmatter.images[0]} 
+                  <Image
+                    src={product.frontmatter.images[0]}
                     alt={product.frontmatter.title}
                     fill
                     className="object-contain transition-transform duration-1000 hover:scale-105"
@@ -334,12 +425,20 @@ export default async function ProductPage({ params }: ProductPageProps) {
                   {/* Subtle reflection/shadow effect */}
                   <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-3/4 h-12 bg-black/5 blur-3xl rounded-[100%]" />
                 </div>
-                
+
                 {product.frontmatter.images.length > 1 && (
                   <div className="flex justify-center gap-8 mt-20">
                     {product.frontmatter.images.slice(0, 5).map((img, idx) => (
-                      <div key={idx} className="relative w-24 h-24 md:w-32 md:h-32 border-2 border-neutral-dark/5 rounded-3xl overflow-hidden bg-neutral-light/30 hover:border-accent transition-all duration-500 cursor-pointer group p-4">
-                        <Image src={img} alt="" fill className="object-contain p-4 transition-transform duration-700 group-hover:scale-110" />
+                      <div
+                        key={idx}
+                        className="relative w-24 h-24 md:w-32 md:h-32 border-2 border-neutral-dark/5 rounded-3xl overflow-hidden bg-neutral-light/30 hover:border-accent transition-all duration-500 cursor-pointer group p-4"
+                      >
+                        <Image
+                          src={img}
+                          alt=""
+                          fill
+                          className="object-contain p-4 transition-transform duration-700 group-hover:scale-110"
+                        />
                       </div>
                     ))}
                   </div>
@@ -352,21 +451,35 @@ export default async function ProductPage({ params }: ProductPageProps) {
             <div className="w-full">
               {/* Main Content Area */}
               <div className="max-w-none">
-                 <MDXRemote source={processedContent} components={productComponents} />
+                <MDXRemote source={processedContent} components={productComponents} />
               </div>
 
+              {/* Datasheet Download Section - Only for Medium Voltage for now */}
+              {categoryFileSlug === 'medium-voltage-cables' && datasheetPath && (
+                <div className="mt-24 pt-24 border-t-2 border-neutral-dark/5">
+                  <div className="mb-12">
+                    <h2 className="text-3xl md:text-4xl font-black text-primary tracking-tighter uppercase mb-4">
+                      {t('downloadDatasheet')}
+                    </h2>
+                    <div className="h-1.5 w-24 bg-accent rounded-full" />
+                  </div>
+                  <DatasheetDownload datasheetPath={datasheetPath} />
+                </div>
+              )}
+
               {/* Structured Data */}
-              <Script
+              <JsonLd
                 id={`jsonld-${product.slug}`}
-                type="application/ld+json"
-                dangerouslySetInnerHTML={{
-                  __html: JSON.stringify({
+                data={
+                  {
                     '@context': 'https://schema.org',
                     '@type': 'Product',
                     name: product.frontmatter.title,
                     description: product.frontmatter.description,
-                    sku: product.frontmatter.sku,
-                    image: product.frontmatter.images?.[0] ? `https://klz-cables.com${product.frontmatter.images[0]}` : undefined,
+                    sku: product.frontmatter.sku || product.slug.toUpperCase(),
+                    image: product.frontmatter.images?.[0]
+                      ? `${SITE_URL}${product.frontmatter.images[0]}`
+                      : undefined,
                     brand: {
                       '@type': 'Brand',
                       name: 'KLZ Cables',
@@ -375,20 +488,31 @@ export default async function ProductPage({ params }: ProductPageProps) {
                       '@type': 'Offer',
                       availability: 'https://schema.org/InStock',
                       priceCurrency: 'EUR',
-                      url: `https://klz-cables.com/${locale}/products/${slug.join('/')}`,
+                      url: `${SITE_URL}/${locale}/products/${slug.join('/')}`,
+                      itemCondition: 'https://schema.org/NewCondition',
                     },
-                  }),
-                }}
+                    additionalProperty: technicalItems.map((item: any) => ({
+                      '@type': 'PropertyValue',
+                      name: item.label,
+                      value: item.value,
+                    })),
+                    category: product.frontmatter.categories.join(', '),
+                    mainEntityOfPage: {
+                      '@type': 'WebPage',
+                      '@id': `${SITE_URL}/${locale}/products/${slug.join('/')}`,
+                    },
+                  } as any
+                }
               />
             </div>
           </div>
 
           {/* Related Products Section */}
           <div className="mt-16 pt-16 border-t border-neutral-dark/5">
-            <RelatedProducts 
-              currentSlug={productSlug} 
-              categories={product.frontmatter.categories} 
-              locale={locale} 
+            <RelatedProducts
+              currentSlug={productSlug}
+              categories={product.frontmatter.categories}
+              locale={locale}
             />
           </div>
         </Container>

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

@@ -0,0 +1,29 @@
+import { ImageResponse } from 'next/og';
+import { getTranslations } from 'next-intl/server';
+import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+
+export const runtime = 'nodejs';
+
+export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+  const t = await getTranslations({ locale, namespace: 'Products' });
+  const fonts = await getOgFonts();
+
+  const title = t('meta.title') || t('title');
+  const description = t('meta.description') || t('subtitle');
+
+  return new ImageResponse(
+    (
+      <OGImageTemplate
+        title={title}
+        description={description}
+        label="Products"
+      />
+    ),
+    {
+      ...OG_IMAGE_SIZE,
+      fonts,
+    }
+  );
+}
+

app/[locale]/products/page.tsx

@@ -1,11 +1,13 @@
 import Reveal from '@/components/Reveal';
 import Scribble from '@/components/Scribble';
-import { Badge, Button, Card, Container, Section } from '@/components/ui';
+import { Badge, Button, Card, Container, Heading, Section } from '@/components/ui';
 import { getTranslations } from 'next-intl/server';
 import { Metadata } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
 import { mapFileSlugToTranslated } from '@/lib/slugs';
+import { getOGImageMetadata } from '@/lib/metadata';
+import { SITE_URL } from '@/lib/schema';
 
 interface ProductsPageProps {
   params: {
@@ -13,28 +15,33 @@ interface ProductsPageProps {
   };
 }
 
-export async function generateMetadata({ params: { locale } }: ProductsPageProps): Promise<Metadata> {
+export async function generateMetadata({
+  params: { locale },
+}: ProductsPageProps): Promise<Metadata> {
   const t = await getTranslations({ locale, namespace: 'Products' });
+  const title = t('meta.title') || t('title');
+  const description = t('meta.description') || t('subtitle');
   return {
-    title: t('title'),
-    description: t('subtitle'),
+    title,
+    description,
     alternates: {
       canonical: `/${locale}/products`,
       languages: {
-        'de': '/de/products',
-        'en': '/en/products',
+        de: '/de/products',
+        en: '/en/products',
         'x-default': '/en/products',
       },
     },
     openGraph: {
-      title: `${t('title')} | KLZ Cables`,
-      description: t('subtitle'),
-      url: `https://klz-cables.com/${locale}/products`,
+      title: `${title} | KLZ Cables`,
+      description,
+      url: `${SITE_URL}/${locale}/products`,
+      images: getOGImageMetadata('products', title, locale),
     },
     twitter: {
       card: 'summary_large_image',
-      title: `${t('title')} | KLZ Cables`,
-      description: t('subtitle'),
+      title: `${title} | KLZ Cables`,
+      description,
     },
   };
 }
@@ -54,29 +61,29 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
       desc: t('categories.lowVoltage.description'),
       img: '/uploads/2024/11/low-voltage-category.webp',
       icon: '/uploads/2024/11/Low-Voltage.svg',
-      href: `/${params.locale}/products/${lowVoltageSlug}`
+      href: `/${params.locale}/products/${lowVoltageSlug}`,
     },
     {
       title: t('categories.mediumVoltage.title'),
       desc: t('categories.mediumVoltage.description'),
       img: '/uploads/2024/11/medium-voltage-category.webp',
       icon: '/uploads/2024/11/Medium-Voltage.svg',
-      href: `/${params.locale}/products/${mediumVoltageSlug}`
+      href: `/${params.locale}/products/${mediumVoltageSlug}`,
     },
     {
       title: t('categories.highVoltage.title'),
       desc: t('categories.highVoltage.description'),
       img: '/uploads/2024/11/high-voltage-category.webp',
       icon: '/uploads/2024/11/High-Voltage.svg',
-      href: `/${params.locale}/products/${highVoltageSlug}`
+      href: `/${params.locale}/products/${highVoltageSlug}`,
     },
     {
       title: t('categories.solar.title'),
       desc: t('categories.solar.description'),
       img: '/uploads/2024/11/solar-category.webp',
       icon: '/uploads/2024/11/Solar.svg',
-      href: `/${params.locale}/products/${solarSlug}`
-    }
+      href: `/${params.locale}/products/${solarSlug}`,
+    },
   ];
 
   return (
@@ -85,24 +92,35 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
       <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">
         <Container className="relative z-10">
           <div className="max-w-4xl animate-slide-up">
-            <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg px-3 py-1 md:px-4 md:py-1.5">
+            <Badge
+              variant="saturated"
+              className="mb-4 md:mb-8 shadow-lg px-3 py-1 md:px-4 md:py-1.5"
+            >
               {t('heroSubtitle')}
             </Badge>
-            <h1 className="text-4xl md:text-6xl lg:text-7xl font-extrabold text-white mb-4 md:mb-8 tracking-tight leading-[1.05]">
+            <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" />
+                    <Scribble
+                      variant="circle"
+                      className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block"
+                    />
                   </span>
-                )
+                ),
               })}
-            </h1>
+            </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">
               {t('subtitle')}
             </p>
             <div className="flex flex-wrap gap-4 md:gap-6">
-              <Button href="#categories" variant="accent" size="lg" className="group w-full md:w-auto">
+              <Button
+                href="#categories"
+                variant="accent"
+                size="lg"
+                className="group w-full md:w-auto"
+              >
                 {t('viewProducts')}
                 <span className="ml-3 transition-transform group-hover:translate-y-1">↓</span>
               </Button>
@@ -119,8 +137,8 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                 <Link key={idx} href={category.href} className="group block">
                   <Card className="h-full border-none shadow-sm hover:shadow-2xl transition-all duration-500 rounded-[24px] md:rounded-[48px] overflow-hidden bg-white active:scale-[0.98]">
                     <div className="relative h-[200px] md:h-[400px] overflow-hidden">
-                      <Image 
-                        src={category.img} 
+                      <Image
+                        src={category.img}
                         alt={category.title}
                         fill
                         className="object-cover transition-transform duration-1000 group-hover:scale-105"
@@ -128,13 +146,22 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                         unoptimized
                       />
                       <div className="absolute inset-0 image-overlay-gradient opacity-80 group-hover:opacity-90 transition-opacity duration-500" />
-                      
+
                       <div className="absolute top-3 right-3 md:top-8 md:right-8 w-10 h-10 md:w-20 md:h-20 bg-white/10 backdrop-blur-md rounded-xl md:rounded-[24px] flex items-center justify-center border border-white/20 shadow-2xl transition-all duration-500 group-hover:scale-110 group-hover:bg-white/20">
-                        <Image src={category.icon} alt="" width={24} height={24} className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80" />
+                        <Image
+                          src={category.icon}
+                          alt=""
+                          width={24}
+                          height={24}
+                          className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80"
+                        />
                       </div>
 
                       <div className="absolute bottom-4 left-4 md:bottom-10 md:left-10 right-4 md:right-10">
-                        <Badge variant="accent" className="mb-2 md:mb-4 shadow-lg bg-accent text-primary-dark border-none text-[10px] md:text-xs">
+                        <Badge
+                          variant="accent"
+                          className="mb-2 md:mb-4 shadow-lg bg-accent text-primary-dark border-none text-[10px] md:text-xs"
+                        >
                           {t('categoryLabel')}
                         </Badge>
                         <h2 className="text-xl md:text-4xl font-bold text-white leading-tight transition-transform duration-500 group-hover:translate-x-1">
@@ -151,8 +178,18 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                           {t('viewProducts')}
                         </span>
                         <div className="ml-3 md:ml-4 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 shadow-sm">
-                          <svg className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                          <svg
+                            className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M17 8l4 4m0 0l-4 4m4-4H3"
+                            />
                           </svg>
                         </div>
                       </div>
@@ -164,27 +201,38 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
           </div>
         </Container>
       </Section>
-      
+
       {/* Technical Support CTA */}
-      <Section className="bg-white py-12 md:py-28">
-        <Container>
-          <div className="bg-primary-dark rounded-[32px] md:rounded-[64px] p-6 md:p-20 lg:p-24 relative overflow-hidden">
-            <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">{t('cta.title')}</h2>
-                <p className="text-base md:text-xl text-white/70 leading-relaxed">
-                  {t('cta.description')}
-                </p>
+      <Reveal>
+        <Section className="bg-white py-12 md:py-28">
+          <Container>
+            <div className="bg-primary-dark rounded-[32px] md:rounded-[64px] p-6 md:p-20 lg:p-24 relative overflow-hidden">
+              <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">
+                    {t('cta.title')}
+                  </h2>
+                  <p className="text-base md:text-xl text-white/70 leading-relaxed">
+                    {t('cta.description')}
+                  </p>
+                </div>
+                <Button
+                  href={`/${params.locale}/contact`}
+                  variant="accent"
+                  size="lg"
+                  className="group whitespace-nowrap w-full md:w-auto md:h-16 md:px-10 md:text-xl"
+                >
+                  {t('cta.button')}
+                  <span className="ml-4 transition-transform group-hover:translate-x-2">
+                    &rarr;
+                  </span>
+                </Button>
               </div>
-              <Button href={`/${params.locale}/contact`} variant="accent" size="lg" className="group whitespace-nowrap w-full md:w-auto md:h-16 md:px-10 md:text-xl">
-                {t('cta.button')}
-                <span className="ml-4 transition-transform group-hover:translate-x-2">&rarr;</span>
-              </Button>
             </div>
-          </div>
-        </Container>
-      </Section>
+          </Container>
+        </Section>
+      </Reveal>
     </div>
   );
 }

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

@@ -0,0 +1,29 @@
+import { ImageResponse } from 'next/og';
+import { getTranslations } from 'next-intl/server';
+import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+
+export const runtime = 'nodejs';
+
+export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+  const t = await getTranslations({ locale, namespace: 'Team' });
+  const fonts = await getOgFonts();
+
+  const title = t('meta.title') || t('hero.subtitle');
+  const description = t('meta.description') || t('hero.title');
+
+  return new ImageResponse(
+    (
+      <OGImageTemplate
+        title={title}
+        description={description}
+        label="Our Team"
+      />
+    ),
+    {
+      ...OG_IMAGE_SIZE,
+      fonts,
+    }
+  );
+}
+

app/[locale]/team/page.tsx

@@ -1,11 +1,12 @@
-import { useTranslations } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
 import { Metadata } from 'next';
 import JsonLd from '@/components/JsonLd';
 import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
 import { Section, Container, Heading, Badge, Button } from '@/components/ui';
+import { getOGImageMetadata } from '@/lib/metadata';
 import Image from 'next/image';
 import Reveal from '@/components/Reveal';
+import Gallery from '@/components/team/Gallery';
 
 interface TeamPageProps {
   params: {
@@ -15,40 +16,41 @@ interface TeamPageProps {
 
 export async function generateMetadata({ params: { locale } }: TeamPageProps): Promise<Metadata> {
   const t = await getTranslations({ locale, namespace: 'Team' });
+  const title = t('meta.title') || t('hero.subtitle');
+  const description = t('meta.description') || t('hero.title');
   return {
-    title: t('hero.subtitle'),
-    description: t('hero.title'),
+    title,
+    description,
     alternates: {
       canonical: `/${locale}/team`,
       languages: {
-        'de': '/de/team',
-        'en': '/en/team',
+        de: '/de/team',
+        en: '/en/team',
         'x-default': '/en/team',
       },
     },
     openGraph: {
-      title: `${t('hero.subtitle')} | KLZ Cables`,
-      description: t('hero.title'),
-      url: `https://klz-cables.com/${locale}/team`,
+      title: `${title} | KLZ Cables`,
+      description,
+      url: `${SITE_URL}/${locale}/team`,
+      images: getOGImageMetadata('team', title, locale),
     },
     twitter: {
       card: 'summary_large_image',
-      title: `${t('hero.subtitle')} | KLZ Cables`,
-      description: t('hero.title'),
+      title: `${title} | KLZ Cables`,
+      description,
     },
   };
 }
 
-export default function TeamPage() {
-  const t = useTranslations('Team');
+export default async function TeamPage({ params: { locale } }: TeamPageProps) {
+  const t = await getTranslations({ locale, namespace: 'Team' });
 
   return (
     <div className="flex flex-col min-h-screen bg-neutral-light">
       <JsonLd
         id="breadcrumb-team"
-        data={getBreadcrumbSchema([
-          { name: t('hero.subtitle'), item: `/team` },
-        ])}
+        data={getBreadcrumbSchema([{ name: t('hero.subtitle'), item: `/team` }])}
       />
       <JsonLd
         id="person-michael"
@@ -61,10 +63,8 @@ export default function TeamPage() {
             '@type': 'Organization',
             name: 'KLZ Cables',
           },
-          sameAs: [
-            'https://www.linkedin.com/in/michael-bodemer-33b493122/'
-          ],
-          image: `${SITE_URL}/uploads/2024/12/DSC07768-Large.webp`
+          sameAs: ['https://www.linkedin.com/in/michael-bodemer-33b493122/'],
+          image: `${SITE_URL}/uploads/2024/12/DSC07768-Large.webp`,
         }}
       />
       <JsonLd
@@ -78,35 +78,37 @@ export default function TeamPage() {
             '@type': 'Organization',
             name: 'KLZ Cables',
           },
-          sameAs: [
-            'https://www.linkedin.com/in/klaus-mintel-b80a8b193/'
-          ],
-          image: `${SITE_URL}/uploads/2024/12/DSC07963-Large.webp`
+          sameAs: ['https://www.linkedin.com/in/klaus-mintel-b80a8b193/'],
+          image: `${SITE_URL}/uploads/2024/12/DSC07963-Large.webp`,
         }}
       />
       {/* Hero Section */}
-      <section className="relative flex items-center justify-center overflow-hidden bg-primary-dark pt-32 pb-24 md:pt-[14%] md:pb-[12%]">
-        <div className="absolute inset-0 z-0">
-          <Image 
-            src="/uploads/2024/12/DSC07655-Large.webp" 
-            alt="KLZ Team" 
-            fill
-            className="object-cover scale-105 animate-slow-zoom opacity-30 md:opacity-40"
-            priority
-          />
-          <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
-        </div>
-        
-        <Container className="relative z-10 text-center text-white max-w-5xl animate-slide-up">
-          <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">{t('hero.badge')}</Badge>
-          <h1 className="text-3xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1] mb-4 md:mb-8">
-            {t('hero.subtitle')}
-          </h1>
-          <p className="text-lg md:text-2xl text-white/70 font-medium italic">
-            {t('hero.title')}
-          </p>
-        </Container>
-      </section>
+      <Reveal>
+        <section className="relative flex items-center justify-center overflow-hidden bg-primary-dark pt-32 pb-24 md:pt-[14%] md:pb-[12%]">
+          <div className="absolute inset-0 z-0">
+            <Image
+              src="/uploads/2024/12/DSC07655-Large.webp"
+              alt="KLZ Team"
+              fill
+              className="object-cover scale-105 animate-slow-zoom opacity-30 md:opacity-40"
+              priority
+            />
+            <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
+          </div>
+
+          <Container className="relative z-10 text-center text-white max-w-5xl">
+            <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
+              {t('hero.badge')}
+            </Badge>
+            <Heading level={1} className="text-white mb-4 md:mb-8">
+              {t('hero.subtitle')}
+            </Heading>
+            <p className="text-lg md:text-2xl text-white/70 font-medium italic">
+              {t('hero.title')}
+            </p>
+          </Container>
+        </section>
+      </Reveal>
 
       {/* Michael Bodemer Section - Sticky Narrative Split Layout */}
       <section className="relative bg-white overflow-hidden">
@@ -114,7 +116,9 @@ export default function TeamPage() {
           <Reveal className="w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center bg-primary-dark text-white relative order-2 lg:order-1">
             <div className="absolute top-0 right-0 w-32 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
             <div className="relative z-10">
-              <Badge variant="accent" className="mb-4 md:mb-8">{t('michael.role')}</Badge>
+              <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">
                 <span className="text-white">{t('michael.name')}</span>
               </Heading>
@@ -127,9 +131,9 @@ export default function TeamPage() {
               <p className="text-base md:text-xl leading-relaxed text-white/70 mb-6 md:mb-12 max-w-xl">
                 {t('michael.description')}
               </p>
-              <Button 
-                href="https://www.linkedin.com/in/michael-bodemer-33b493122/" 
-                variant="accent" 
+              <Button
+                href="https://www.linkedin.com/in/michael-bodemer-33b493122/"
+                variant="accent"
                 size="lg"
                 className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl active:scale-95 transition-transform"
               >
@@ -138,77 +142,91 @@ export default function TeamPage() {
               </Button>
             </div>
           </Reveal>
-          <div className="w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden order-1 lg:order-2">
-            <Image 
-              src="/uploads/2024/12/DSC07768-Large.webp" 
-              alt={t('michael.name')} 
-              fill 
+          <Reveal className="w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden order-1 lg:order-2">
+            <Image
+              src="/uploads/2024/12/DSC07768-Large.webp"
+              alt={t('michael.name')}
+              fill
               className="object-cover scale-105 hover:scale-100 transition-transform duration-1000"
               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" />
-          </div>
+          </Reveal>
         </div>
       </section>
 
       {/* Legacy Section - Immersive Background */}
-      <section className="relative py-16 md:py-48 bg-primary-dark text-white overflow-hidden">
-        <div className="absolute inset-0 z-0">
-          <Image 
-            src="/uploads/2024/12/1694273920124-copy.webp" 
-            alt={t('legacy.subtitle')} 
-            fill
-            className="object-cover opacity-20 md:opacity-30 scale-110 animate-slow-zoom"
-            sizes="100vw"
-          />
-          <div className="absolute inset-0 bg-primary-dark/60 mix-blend-multiply" />
-        </div>
-        <Container className="relative z-10">
-          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16 items-center">
-            <div className="lg:col-span-6">
-              <Heading level={2} subtitle={t('legacy.subtitle')} className="text-white mb-6 md:mb-10">
-                <span className="text-white">{t('legacy.title')}</span>
-              </Heading>
-              <div className="space-y-4 md:space-y-8 text-base md:text-2xl text-white/80 leading-relaxed font-medium">
-                <p className="border-l-4 border-accent pl-5 md:pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-xl md:rounded-r-2xl">
-                  {t('legacy.p1')}
-                </p>
-                <p className="pl-6 md:pl-9 line-clamp-3 md:line-clamp-none">
-                  {t('legacy.p2')}
-                </p>
-              </div>
-            </div>
-            <div className="lg:col-span-6 grid grid-cols-2 md:grid-cols-2 gap-3 md:gap-6">
-              <div className="p-4 md:p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl md:rounded-[32px] hover:bg-white/10 transition-colors">
-                <div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">{t('legacy.expertise')}</div>
-                <div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">{t('legacy.expertiseDesc')}</div>
-              </div>
-              <div className="p-4 md:p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl md:rounded-[32px] hover:bg-white/10 transition-colors">
-                <div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">{t('legacy.network')}</div>
-                <div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">{t('legacy.networkDesc')}</div>
-              </div>
-            </div>
+      <Reveal>
+        <section className="relative py-16 md:py-48 bg-primary-dark text-white overflow-hidden">
+          <div className="absolute inset-0 z-0">
+            <Image
+              src="/uploads/2024/12/1694273920124-copy.webp"
+              alt={t('legacy.subtitle')}
+              fill
+              className="object-cover opacity-20 md:opacity-30 scale-110 animate-slow-zoom"
+              sizes="100vw"
+            />
+            <div className="absolute inset-0 bg-primary-dark/60 mix-blend-multiply" />
           </div>
-        </Container>
-      </section>
+          <Container className="relative z-10">
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16 items-center">
+              <div className="lg:col-span-6">
+                <Heading
+                  level={2}
+                  subtitle={t('legacy.subtitle')}
+                  className="text-white mb-6 md:mb-10"
+                >
+                  <span className="text-white">{t('legacy.title')}</span>
+                </Heading>
+                <div className="space-y-4 md:space-y-8 text-base md:text-2xl text-white/80 leading-relaxed font-medium">
+                  <p className="border-l-4 border-accent pl-5 md:pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-xl md:rounded-r-2xl">
+                    {t('legacy.p1')}
+                  </p>
+                  <p className="pl-6 md:pl-9 line-clamp-3 md:line-clamp-none">{t('legacy.p2')}</p>
+                </div>
+              </div>
+              <div className="lg:col-span-6 grid grid-cols-2 md:grid-cols-2 gap-3 md:gap-6">
+                <div className="p-4 md:p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl md:rounded-[32px] hover:bg-white/10 transition-colors">
+                  <div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">
+                    {t('legacy.expertise')}
+                  </div>
+                  <div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">
+                    {t('legacy.expertiseDesc')}
+                  </div>
+                </div>
+                <div className="p-4 md:p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl md:rounded-[32px] hover:bg-white/10 transition-colors">
+                  <div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">
+                    {t('legacy.network')}
+                  </div>
+                  <div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">
+                    {t('legacy.networkDesc')}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Container>
+        </section>
+      </Reveal>
 
       {/* Klaus Mintel Section - Reversed Split Layout */}
       <section className="relative bg-white overflow-hidden">
         <div className="flex flex-col lg:flex-row">
-          <div className="w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden order-1">
-            <Image 
-              src="/uploads/2024/12/DSC07963-Large.webp" 
-              alt={t('klaus.name')} 
-              fill 
+          <Reveal className="w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden order-1">
+            <Image
+              src="/uploads/2024/12/DSC07963-Large.webp"
+              alt={t('klaus.name')}
+              fill
               className="object-cover scale-105 hover:scale-100 transition-transform duration-1000"
               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" />
-          </div>
+          </Reveal>
           <Reveal className="w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center bg-neutral-light text-saturated relative order-2">
             <div className="absolute top-0 left-0 w-32 h-full bg-saturated/5 skew-x-12 -translate-x-1/2" />
             <div className="relative z-10">
-              <Badge variant="saturated" className="mb-4 md:mb-8">{t('klaus.role')}</Badge>
+              <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">
                 {t('klaus.name')}
               </Heading>
@@ -221,9 +239,9 @@ export default function TeamPage() {
               <p className="text-base md:text-xl leading-relaxed text-text-secondary mb-6 md:mb-12 max-w-xl">
                 {t('klaus.description')}
               </p>
-              <Button 
-                href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/" 
-                variant="saturated" 
+              <Button
+                href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/"
+                variant="saturated"
                 size="lg"
                 className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl active:scale-95 transition-transform"
               >
@@ -247,11 +265,14 @@ export default function TeamPage() {
                 <p className="text-base md:text-xl text-text-secondary leading-relaxed">
                   {t('manifesto.tagline')}
                 </p>
-                
+
                 {/* Mobile-only progress indicator */}
                 <div className="flex lg:hidden mt-8 gap-2">
                   {[0, 1, 2, 3, 4, 5].map((i) => (
-                    <div key={i} className="h-1.5 flex-1 bg-neutral-medium rounded-full overflow-hidden">
+                    <div
+                      key={i}
+                      className="h-1.5 flex-1 bg-neutral-medium rounded-full overflow-hidden"
+                    >
                       <div className="h-full bg-accent w-0 group-active:w-full transition-all duration-500" />
                     </div>
                   ))}
@@ -260,12 +281,21 @@ export default function TeamPage() {
             </div>
             <div className="sticky-narrative-content grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-10">
               {[0, 1, 2, 3, 4, 5].map((idx) => (
-                <div key={idx} className="p-6 md:p-10 bg-neutral-light rounded-2xl md:rounded-[40px] border border-transparent hover:border-accent hover:bg-white hover:shadow-2xl transition-all duration-500 group active:scale-[0.98] touch-target-none">
+                <div
+                  key={idx}
+                  className="p-6 md:p-10 bg-neutral-light rounded-2xl md:rounded-[40px] border border-transparent hover:border-accent hover:bg-white hover:shadow-2xl transition-all duration-500 group active:scale-[0.98] touch-target-none"
+                >
                   <div className="w-10 h-10 md:w-16 md:h-16 bg-white rounded-xl md:rounded-2xl flex items-center justify-center mb-4 md:mb-8 shadow-sm group-hover:bg-accent transition-colors duration-500">
-                    <span className="text-primary font-extrabold text-lg md:text-2xl group-hover:text-primary-dark">0{idx + 1}</span>
+                    <span className="text-primary font-extrabold text-lg md:text-2xl group-hover:text-primary-dark">
+                      0{idx + 1}
+                    </span>
                   </div>
-                  <h3 className="text-lg md:text-2xl font-bold mb-2 md:mb-4 text-primary">{t(`manifesto.items.${idx}.title`)}</h3>
-                  <p className="text-sm md:text-lg text-text-secondary leading-relaxed">{t(`manifesto.items.${idx}.description`)}</p>
+                  <h3 className="text-lg md:text-2xl font-bold mb-2 md:mb-4 text-primary">
+                    {t(`manifesto.items.${idx}.title`)}
+                  </h3>
+                  <p className="text-sm md:text-lg text-text-secondary leading-relaxed">
+                    {t(`manifesto.items.${idx}.description`)}
+                  </p>
                 </div>
               ))}
             </div>
@@ -273,29 +303,9 @@ export default function TeamPage() {
         </Container>
       </Section>
 
-      {/* Gallery Section - Premium Treatment */}
-      <Section className="bg-primary-dark py-16 md:py-32">
-        <Container>
-          <Heading level={2} subtitle={t('gallery.subtitle')} align="center" className="text-white mb-12 md:mb-20">
-            <span className="text-white">{t('gallery.title')}</span>
-          </Heading>
-          <div className="grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-6">
-            {[
-              '/uploads/2024/12/DSC07539-Large-600x400.webp',
-              '/uploads/2024/12/DSC07460-Large-600x400.webp',
-              '/uploads/2024/12/DSC07469-Large-600x400.webp',
-              '/uploads/2024/12/DSC07433-Large-600x400.webp',
-              '/uploads/2024/12/DSC07387-Large-600x400.webp'
-            ].map((src, idx) => (
-              <div key={idx} className="relative aspect-[3/4] rounded-2xl md:rounded-[32px] overflow-hidden group shadow-2xl">
-                <Image src={src} alt={t('gallery.title')} fill className="object-cover transition-transform duration-1000 group-hover:scale-110" />
-                <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-transparent transition-all duration-500" />
-                <div className="absolute inset-0 border-0 group-hover:border-[8px] md:group-hover:border-[12px] border-white/10 transition-all duration-500 pointer-events-none" />
-              </div>
-            ))}
-          </div>
-        </Container>
-      </Section>
+      <Reveal>
+        <Gallery />
+      </Reveal>
     </div>
   );
 }

app/actions/contact.ts

@@ -0,0 +1,72 @@
+"use server";
+
+import client, { ensureAuthenticated } from "@/lib/directus";
+import { createItem } from "@directus/sdk";
+import { sendEmail } from "@/lib/mail/mailer";
+import ContactEmail from "@/components/emails/ContactEmail";
+import React from "react";
+import { getServerAppServices } from "@/lib/services/create-services.server";
+
+export async function sendContactFormAction(formData: FormData) {
+  const services = getServerAppServices();
+  const logger = services.logger.child({ action: 'sendContactFormAction' });
+  const name = formData.get("name") as string;
+  const email = formData.get("email") as string;
+  const message = formData.get("message") as string;
+  const productName = formData.get("productName") as string | null;
+
+  if (!name || !email || !message) {
+    logger.warn('Missing required fields in contact form', { name: !!name, email: !!email, message: !!message });
+    return { success: false, error: "Missing required fields" };
+  }
+
+  // 1. Save to Directus
+  try {
+    await ensureAuthenticated();
+    if (productName) {
+      await client.request(createItem('product_requests', {
+        product_name: productName,
+        email,
+        message
+      }));
+      logger.info('Product request stored in Directus');
+    } else {
+      await client.request(createItem('contact_submissions', {
+        name,
+        email,
+        message
+      }));
+      logger.info('Contact submission stored in Directus');
+    }
+  } catch (error) {
+    logger.error('Failed to store submission in Directus', { error });
+    // We continue anyway to try sending the email, but maybe we should report this
+  }
+
+  // 2. Send Email
+  logger.info('Sending contact form email', { email, productName });
+
+  const subject = productName
+    ? `Product Inquiry: ${productName}`
+    : "New Contact Form Submission";
+
+  const result = await sendEmail({
+    subject,
+    template: React.createElement(ContactEmail, {
+      name,
+      email,
+      message,
+      productName: productName || undefined,
+      subject,
+    }),
+  });
+
+  if (result.success) {
+    logger.info('Contact form email sent successfully', { messageId: result.messageId });
+  } else {
+    logger.error('Failed to send contact form email', { error: result.error });
+    services.errors.captureException(result.error, { action: 'sendContactFormAction', email });
+  }
+
+  return result;
+}

app/api/health/cms/route.ts

@@ -0,0 +1,9 @@
+import { checkHealth } from '@/lib/directus';
+import { NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+    const health = await checkHealth();
+    return NextResponse.json(health, { status: health.status === 'ok' ? 200 : 503 });
+}

app/health/route.ts

@@ -1,5 +1,9 @@
+import { getServerAppServices } from '@/lib/services/create-services.server';
+
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
+  const services = getServerAppServices();
+  services.logger.debug('Health check requested');
   return new Response('OK', { status: 200 });
 }

app/manifest.ts

@@ -15,6 +15,11 @@ export default function manifest(): MetadataRoute.Manifest {
         sizes: 'any',
         type: 'image/x-icon',
       },
+      {
+        src: '/logo.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
       {
         src: '/apple-touch-icon.png',
         sizes: '180x180',

app/robots.ts

@@ -1,12 +1,20 @@
+import { config } from '@/lib/config';
 import { MetadataRoute } from 'next';
 
 export default function robots(): MetadataRoute.Robots {
+  const baseUrl = config.baseUrl || 'https://klz-cables.com';
   return {
-    rules: {
-      userAgent: '*',
-      allow: '/',
-      disallow: ['/api/', '/health/'],
-    },
-    sitemap: 'https://klz-cables.com/sitemap.xml',
+    rules: [
+      {
+        userAgent: '*',
+        allow: '/',
+        disallow: ['/api/', '/health/'],
+      },
+      {
+        userAgent: ['GPTBot', 'ClaudeBot', 'PerplexityBot', 'Google-Extended', 'OAI-SearchBot'],
+        allow: '/',
+      },
+    ],
+    sitemap: `${baseUrl}/sitemap.xml`,
   };
 }

app/sitemap.ts

@@ -1,10 +1,11 @@
+import { config } from '@/lib/config';
 import { MetadataRoute } from 'next';
 import { getAllProducts } from '@/lib/mdx';
 import { getAllPosts } from '@/lib/blog';
 import { getAllPages } from '@/lib/pages';
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  const baseUrl = 'https://klz-cables.com';
+  const baseUrl = config.baseUrl || 'https://klz-cables.com';
   const locales = ['de', 'en'];
 
   const routes = [
@@ -38,7 +39,8 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
       // We need to find the category for the product to build the URL
       // In this project, products are under /products/[category]/[slug]
       // The category is in product.frontmatter.categories
-      const category = product.frontmatter.categories[0]?.toLowerCase().replace(/\s+/g, '-') || 'other';
+      const category =
+        product.frontmatter.categories[0]?.toLowerCase().replace(/\s+/g, '-') || 'other';
       sitemapEntries.push({
         url: `${baseUrl}/${locale}/products/${category}/${product.slug}`,
         lastModified: new Date(),

commitlint.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'header-max-length': [2, 'always', 500],
+    'subject-case': [0],
+    'subject-full-stop': [0],
+  },
+};

components/CMSConnectivityNotice.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { AlertCircle, RefreshCw, Database } from 'lucide-react';
+
+export default function CMSConnectivityNotice() {
+  const [status, setStatus] = useState<'checking' | 'ok' | 'error'>('checking');
+  const [errorMsg, setErrorMsg] = useState('');
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Only show if we've detected an issue AND we are in a context where we want to see it
+    const checkCMS = async () => {
+      const isDebug = new URLSearchParams(window.location.search).has('cms_debug');
+      const isLocal =
+        window.location.hostname === 'localhost' || window.location.hostname.includes('127.0.0.1');
+      const isStaging =
+        window.location.hostname.includes('staging') ||
+        window.location.hostname.includes('testing');
+
+      // Only proceed with check if it's developer context
+      if (!isLocal && !isStaging && !isDebug) return;
+
+      try {
+        const response = await fetch('/api/health/cms');
+        const data = await response.json();
+
+        if (data.status !== 'ok') {
+          setStatus('error');
+          setErrorMsg(data.message);
+          setIsVisible(true);
+        } else {
+          setStatus('ok');
+          setIsVisible(false);
+        }
+      } catch (err) {
+        // If it's a connection error, only show if we are really debugging
+        if (isDebug || isLocal) {
+          setStatus('error');
+          setErrorMsg('Could not connect to CMS health endpoint');
+          setIsVisible(true);
+        }
+      }
+    };
+
+    checkCMS();
+  }, []);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-[9999] animate-slide-up">
+      <div className="bg-red-500/90 backdrop-blur-md border border-red-400 text-white p-4 rounded-2xl shadow-2xl max-w-sm">
+        <div className="flex items-start gap-3">
+          <div className="bg-white/20 p-2 rounded-lg">
+            <AlertCircle className="w-5 h-5" />
+          </div>
+          <div className="flex-1">
+            <h4 className="font-bold text-sm mb-1">CMS Issue Detected</h4>
+            <p className="text-xs opacity-90 leading-relaxed mb-3">
+              {errorMsg === 'relation "products" does not exist'
+                ? 'The database schema is missing. Please sync your local data to this environment.'
+                : errorMsg || 'The application cannot connect to the Directus CMS.'}
+            </p>
+            <div className="flex gap-2">
+              <button
+                onClick={() => window.location.reload()}
+                className="bg-white text-red-600 text-[10px] font-bold uppercase tracking-wider px-3 py-1.5 rounded-lg flex items-center gap-2 hover:bg-neutral-100 transition-colors"
+              >
+                <RefreshCw className="w-3 h-3" />
+                Retry
+              </button>
+              <button
+                onClick={() => setIsVisible(false)}
+                className="bg-black/20 text-white text-[10px] font-bold uppercase tracking-wider px-3 py-1.5 rounded-lg hover:bg-black/30 transition-colors"
+              >
+                Dismiss
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/ContactForm.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { Button, Heading, Card, Input, Textarea, Label } from '@/components/ui';
+import { sendContactFormAction } from '@/app/actions/contact';
+import { useAnalytics } from '@/components/analytics/useAnalytics';
+
+export default function ContactForm() {
+  const t = useTranslations('Contact');
+  const { trackEvent } = useAnalytics();
+  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setStatus('submitting');
+
+    const formData = new FormData(e.currentTarget);
+    const email = formData.get('email') as string;
+    
+    try {
+      const result = await sendContactFormAction(formData);
+      if (result.success) {
+        trackEvent('contact_form_submission', {
+          form_type: 'general',
+          email,
+        });
+        setStatus('success');
+        (e.target as HTMLFormElement).reset();
+      } else {
+        console.error('Contact form submission failed:', { email, error: result.error });
+        setStatus('error');
+      }
+    } catch (error) {
+      console.error('Contact form submission error:', { email, error });
+      setStatus('error');
+    }
+  }
+
+  if (status === 'success') {
+    return (
+      <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl text-center">
+        <div className="w-20 h-20 bg-accent rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-accent/20">
+          <svg className="w-10 h-10 text-primary-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+        <Heading level={3} className="mb-4">
+          {t('form.successTitle') || 'Message Sent!'}
+        </Heading>
+        <p className="text-text-secondary text-lg mb-8">
+          {t('form.successDesc') || 'Thank you for your message. We will get back to you as soon as possible.'}
+        </p>
+        <Button onClick={() => setStatus('idle')} variant="saturated">
+          {t('form.sendAnother') || 'Send another message'}
+        </Button>
+      </Card>
+    );
+  }
+
+  if (status === 'error') {
+    return (
+      <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-destructive/20 shadow-2xl text-center bg-destructive/5 animate-slide-up">
+        <div className="w-20 h-20 bg-destructive rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-destructive/20">
+          <svg className="w-10 h-10 text-destructive-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="15" y1="9" x2="9" y2="15" strokeLinecap="round" strokeLinejoin="round" />
+            <line x1="9" y1="9" x2="15" y2="15" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </div>
+        <Heading level={3} className="mb-4 text-destructive font-black">
+          {t('form.errorTitle') || 'Submission Failed!'}
+        </Heading>
+        <p className="text-destructive/80 text-lg mb-8 leading-relaxed font-medium">
+          {t('form.error') || 'Something went wrong. Please check your input and try again.'}
+        </p>
+        <Button onClick={() => setStatus('idle')} variant="saturated" size="lg" className="w-full bg-destructive hover:bg-destructive/90 text-destructive-foreground border-destructive shadow-lg shadow-destructive/20">
+          {t('form.tryAgain') || 'Try Again'}
+        </Button>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl animate-slide-up">
+      <Heading level={3} subtitle={t('form.subtitle')} className="mb-6 md:mb-10">
+        {t('form.title')}
+      </Heading>
+      <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
+        <div className="space-y-1 md:space-y-2">
+          <Label htmlFor="name">{t('form.name')}</Label>
+          <Input 
+            type="text" 
+            id="name" 
+            name="name"
+            autoComplete="name"
+            enterKeyHint="next"
+            placeholder={t('form.namePlaceholder')}
+            required
+          />
+        </div>
+        <div className="space-y-1 md:space-y-2">
+          <Label htmlFor="email">{t('form.email')}</Label>
+          <Input 
+            type="email" 
+            id="email" 
+            name="email"
+            autoComplete="email"
+            inputMode="email"
+            enterKeyHint="next"
+            placeholder={t('form.emailPlaceholder')}
+            required
+          />
+        </div>
+        <div className="md:col-span-2 space-y-1 md:space-y-2">
+          <Label htmlFor="message">{t('form.message')}</Label>
+          <Textarea 
+            id="message" 
+            name="message"
+            rows={4} 
+            enterKeyHint="send"
+            placeholder={t('form.messagePlaceholder')}
+            required
+          />
+        </div>
+        <div className="md:col-span-2 pt-2 md:pt-4">
+          <Button 
+            type="submit" 
+            variant="saturated" 
+            size="lg" 
+            disabled={status === 'submitting'}
+            className="w-full shadow-xl shadow-saturated/20 md:h-16 md:px-10 md:text-xl active:scale-[0.98] transition-transform"
+          >
+            {status === 'submitting' ? (
+              <span className="flex items-center gap-2">
+                <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                {t('form.submitting') || 'Sending...'}
+              </span>
+            ) : t('form.submit')}
+          </Button>
+        </div>
+      </form>
+    </Card>
+  );
+}

components/DatasheetDownload.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { cn } from '@/components/ui/utils';
+import { useTranslations } from 'next-intl';
+
+interface DatasheetDownloadProps {
+  datasheetPath: string;
+  className?: string;
+}
+
+export default function DatasheetDownload({ datasheetPath, className }: DatasheetDownloadProps) {
+  const t = useTranslations('Products');
+
+  return (
+    <div className={cn("mt-8 animate-slight-fade-in-from-bottom", className)}>
+      <a 
+        href={datasheetPath} 
+        target="_blank"
+        rel="noopener noreferrer"
+        className="group relative block w-full overflow-hidden rounded-[32px] bg-primary-dark p-1 transition-all duration-500 hover:shadow-[0_20px_50px_rgba(0,0,0,0.2)] hover:-translate-y-1"
+      >
+        {/* Animated Background Gradient */}
+        <div className="absolute inset-0 bg-gradient-to-r from-accent via-saturated to-accent opacity-20 group-hover:opacity-40 transition-opacity duration-500 animate-gradient-x" />
+        
+        {/* Inner Content */}
+        <div className="relative flex items-center gap-6 rounded-[31px] bg-primary-dark/90 backdrop-blur-xl p-6 md:p-8 border border-white/10">
+          {/* Icon Container */}
+          <div className="relative flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-2xl bg-white/5 border border-white/10 group-hover:bg-accent group-hover:border-white/20 transition-all duration-500">
+            <div className="absolute inset-0 rounded-2xl bg-accent/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+            <svg 
+              className="relative h-8 w-8 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3" 
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path 
+                strokeLinecap="round" 
+                strokeLinejoin="round" 
+                strokeWidth={1.5} 
+                d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" 
+              />
+            </svg>
+          </div>
+
+          {/* Text Content */}
+          <div className="flex-1">
+            <div className="flex items-center gap-2 mb-1">
+              <span className="text-[10px] font-black uppercase tracking-[0.2em] text-accent">PDF Datasheet</span>
+            </div>
+            <h3 className="text-xl md:text-2xl font-black text-white uppercase tracking-tighter leading-none group-hover:text-accent transition-colors duration-300">
+              {t('downloadDatasheet')}
+            </h3>
+            <p className="mt-2 text-sm font-medium text-white/60 leading-relaxed">
+              {t('downloadDatasheetDesc')}
+            </p>
+          </div>
+
+          {/* Arrow Icon */}
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-accent group-hover:text-white group-hover:translate-x-1 transition-all duration-500">
+            <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
+            </svg>
+          </div>
+        </div>
+      </a>
+    </div>
+  );
+}

components/Footer.tsx

@@ -31,7 +31,7 @@ export default function Footer() {
               {t('tagline')}
             </p>
             <div className="flex gap-4">
-              <a href="https://www.linkedin.com/company/klz-vertriebs-gmbh/" target="_blank" rel="noopener noreferrer" className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center hover:bg-accent hover:text-primary-dark transition-all duration-300 border border-white/10">
+              <a href="https://www.linkedin.com/company/klz-vertriebs-gmbh/" target="_blank" rel="noopener noreferrer" className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center text-white hover:bg-accent hover:text-primary-dark transition-all duration-300 border border-white/10">
                 <span className="sr-only">LinkedIn</span>
                 <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24">
                   <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
@@ -43,35 +43,49 @@ export default function Footer() {
           {/* Links Columns */}
           <div className="lg:col-span-2">
             <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('legal')}</h4>
-            <ul className="space-y-4 text-white/70">
-              <li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="hover:text-white transition-colors">{t('legalNotice')}</Link></li>
-              <li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="hover:text-white transition-colors">{t('privacyPolicy')}</Link></li>
-              <li><Link href={`/${locale}/${t('termsSlug')}`} className="hover:text-white transition-colors">{t('terms')}</Link></li>
+            <ul className="space-y-4 text-white/70 list-none m-0 p-0">
+              <li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('legalNotice')}</Link></li>
+              <li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('privacyPolicy')}</Link></li>
+              <li><Link href={`/${locale}/${t('termsSlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('terms')}</Link></li>
             </ul>
           </div>
 
           <div className="lg:col-span-2">
             <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('company')}</h4>
-            <ul className="space-y-4 text-white/70">
-              <li><Link href={`/${locale}/team`} className="hover:text-white transition-colors">{navT('team')}</Link></li>
-              <li><Link href={`/${locale}/products`} className="hover:text-white transition-colors">{navT('products')}</Link></li>
-              <li><Link href={`/${locale}/blog`} className="hover:text-white transition-colors">{navT('blog')}</Link></li>
-              <li><Link href={`/${locale}/contact`} className="hover:text-white transition-colors">{navT('contact')}</Link></li>
+            <ul className="space-y-4 text-white/70 list-none m-0 p-0">
+              <li><Link href={`/${locale}/team`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('team')}</Link></li>
+              <li><Link href={`/${locale}/products`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('products')}</Link></li>
+              <li><Link href={`/${locale}/blog`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('blog')}</Link></li>
+              <li><Link href={`/${locale}/contact`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('contact')}</Link></li>
             </ul>
           </div>
 
           {/* Recent Posts Column */}
           <div className="lg:col-span-4">
             <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('recentPosts')}</h4>
-            <ul className="space-y-6">
+            <ul className="space-y-6 list-none m-0 p-0">
               {[
-                "Focus on wind farm construction: three typical cable challenges",
-                "Why the N2XS(F)2Y is the ideal cable for your energy project"
+                {
+                  title: locale === 'de'
+                    ? "Windparkbau im Fokus: drei typische Kabelherausforderungen"
+                    : "Focus on wind farm construction: three typical cable challenges",
+                  slug: locale === 'de'
+                    ? "windparkbau-im-fokus-drei-typische-kabelherausforderungen"
+                    : "focus-on-wind-farm-construction-three-typical-cable-challenges"
+                },
+                {
+                  title: locale === 'de'
+                    ? "Warum das N2XS(F)2Y das ideale Kabel für Ihr Energieprojekt ist"
+                    : "Why the N2XS(F)2Y is the ideal cable for your energy project",
+                  slug: locale === 'de'
+                    ? "n2xsf2y-mittelspannungskabel-energieprojekt"
+                    : "why-the-n2xsf2y-is-the-ideal-cable-for-your-energy-project"
+                }
               ].map((post, i) => (
                 <li key={i}>
-                  <Link href="#" className="group block">
+                  <Link href={`/${locale}/blog/${post.slug}`} className="group block text-white/80">
                     <p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2 text-base md:text-base">
-                      {post}
+                      {post.title}
                     </p>
                     <span className="text-xs text-white/40 uppercase tracking-widest">{t('readArticle')} &rarr;</span>
                   </Link>
@@ -84,8 +98,8 @@ export default function Footer() {
         <div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/40 text-xs md:text-sm font-medium">
           <p>{t('copyright', { year: currentYear })}</p>
           <div className="flex gap-8">
-            <Link href="/en" className="hover:text-white transition-colors">English</Link>
-            <Link href="/de" className="hover:text-white transition-colors">Deutsch</Link>
+            <Link href="/en" locale="en" className="hover:text-white transition-colors">English</Link>
+            <Link href="/de" locale="de" className="hover:text-white transition-colors">Deutsch</Link>
           </div>
         </div>
       </Container>

components/Header.tsx

@@ -2,6 +2,7 @@
 
 import Link from 'next/link';
 import Image from 'next/image';
+import { motion } from 'framer-motion';
 import { useTranslations } from 'next-intl';
 import { usePathname } from 'next/navigation';
 import { Button } from './ui';
@@ -58,7 +59,7 @@ export default function Header() {
   ];
 
   const headerClass = cn(
-    "fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p",
+    "fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu",
     {
       "bg-transparent py-4 md:py-8": isHomePage && !isScrolled && !isMobileMenuOpen,
       "bg-primary py-3 md:py-4 shadow-2xl": !isHomePage || isScrolled || isMobileMenuOpen,
@@ -70,79 +71,168 @@ export default function Header() {
 
   return (
     <>
-      <header className={headerClass}>
+      <motion.header
+        className={headerClass}
+        initial={{ y: -100, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.8, ease: "easeOut" }}
+      >
         <div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
-          <Link href={`/${currentLocale}`} className="flex-shrink-0 group touch-target">
-            <Image 
-              src={logoSrc} 
-              alt={t('home')} 
-              width={120} 
-              height={120} 
-              className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
-              priority
-              unoptimized
-            />
-          </Link>
+          <motion.div
+            className="flex-shrink-0 group touch-target"
+            initial={{ scale: 0.8, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
+          >
+            <Link href={`/${currentLocale}`}>
+              <Image
+                src={logoSrc}
+                alt={t('home')}
+                width={120}
+                height={120}
+                className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
+                priority
+                unoptimized
+              />
+            </Link>
+          </motion.div>
 
-          <div className="flex items-center gap-4 md:gap-12">
-            <nav className="hidden lg:flex items-center space-x-10">
-              {menuItems.map((item) => (
-                <Link 
-                  key={item.href} 
-                  href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
-                  className={cn(
-                    textColorClass,
-                    "hover:text-accent font-bold transition-all text-base md:text-lg tracking-tight relative group"
-                  )}
+          <motion.div
+            className="flex items-center gap-4 md:gap-12"
+            initial="hidden"
+            animate="visible"
+            variants={{
+              visible: {
+                transition: {
+                  staggerChildren: 0.08,
+                  delayChildren: 0.3
+                }
+              }
+            }}
+          >
+            <motion.nav
+              className="hidden lg:flex items-center space-x-10"
+              variants={navVariants}
+            >
+              {menuItems.map((item, idx) => (
+                <motion.div
+                  key={item.href}
+                  variants={navLinkVariants}
                 >
-                  {item.label}
-                  <span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-300 group-hover:w-full rounded-full" />
-                </Link>
+                  <Link
+                    href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                    className={cn(
+                      textColorClass,
+                      "hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5"
+                    )}
+                  >
+                    {item.label}
+                    <span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-500 group-hover:w-full rounded-full shadow-[0_0_12px_rgba(130,237,32,0.6)]" />
+                  </Link>
+                </motion.div>
               ))}
-            </nav>
+            </motion.nav>
 
-            <div className={cn("hidden lg:flex items-center space-x-8", textColorClass)}>
-              <div className="flex items-center space-x-4 text-xs md:text-sm font-extrabold tracking-widest uppercase">
-                <Link 
-                  href={getPathForLocale('en')} 
-                  className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
-                >
-                  EN
-                </Link>
-                <div className="w-px h-4 bg-current opacity-20" />
-                <Link 
-                  href={getPathForLocale('de')} 
-                  className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
-                >
-                  DE
-                </Link>
-              </div>
-              
-              <Button 
-                href={`/${currentLocale}/contact`}
-                variant="white" 
-                size="md"
-                className="px-8 shadow-xl"
+            <motion.div
+              className={cn("hidden lg:flex items-center space-x-8", textColorClass)}
+              variants={headerRightVariants}
+            >
+              <motion.div
+                className="flex items-center space-x-4 text-xs md:text-sm font-extrabold tracking-widest uppercase"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.5, delay: 0.6 }}
               >
-                {t('contact')}
-              </Button>
-            </div>
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.4, delay: 0.65 }}
+                >
+                  <Link
+                    href={getPathForLocale('en')}
+                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
+                  >
+                    EN
+                  </Link>
+                </motion.div>
+                <motion.div
+                  className="w-px h-4 bg-current opacity-20"
+                  initial={{ scaleY: 0 }}
+                  animate={{ scaleY: 1 }}
+                  transition={{ duration: 0.4, delay: 0.7 }}
+                />
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.4, delay: 0.75 }}
+                >
+                  <Link
+                    href={getPathForLocale('de')}
+                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
+                  >
+                    DE
+                  </Link>
+                </motion.div>
+              </motion.div>
+              
+              <motion.div
+                initial={{ scale: 0.9, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                transition={{ duration: 0.6, type: "spring", stiffness: 400, delay: 0.7 }}
+              >
+                <Button
+                  href={`/${currentLocale}/contact`}
+                  variant="white"
+                  size="md"
+                  className="px-8 shadow-xl"
+                >
+                  {t('contact')}
+                </Button>
+              </motion.div>
+            </motion.div>
 
             {/* Mobile Menu Button */}
-            <button 
-              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-              className={cn("lg:hidden touch-target p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 z-50", textColorClass)}
+            <motion.button
+              className={cn("lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-50", textColorClass)}
               aria-label={t('toggleMenu')}
+              initial={{ scale: 0.8, opacity: 0, rotate: -180 }}
+              animate={{ scale: 1, opacity: 1, rotate: 0 }}
+              transition={{ duration: 0.6, type: "spring", stiffness: 300, damping: 20, delay: 0.5 }}
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
             >
-              <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <motion.svg
+                className="w-7 h-7"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                initial={{ scale: 0 }}
+                animate={{ scale: 1 }}
+                transition={{ duration: 0.3, delay: 0.6 }}
+              >
                 {isMobileMenuOpen ? (
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  <motion.path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                    initial={{ pathLength: 0 }}
+                    animate={{ pathLength: 1 }}
+                    transition={{ duration: 0.4, delay: 0.7 }}
+                  />
                 ) : (
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                  <motion.path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 6h16M4 12h16M4 18h16"
+                    initial={{ pathLength: 0 }}
+                    animate={{ pathLength: 1 }}
+                    transition={{ duration: 0.4, delay: 0.7 }}
+                  />
                 )}
-              </svg>
-            </button>
-          </div>
+              </motion.svg>
+            </motion.button>
+          </motion.div>
         </div>
 
         {/* Mobile Menu Overlay */}
@@ -150,58 +240,156 @@ export default function Header() {
           "fixed inset-0 bg-primary z-40 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"
         )}>
-          <div className="flex-grow flex flex-col justify-center items-center p-8 space-y-8">
+          <motion.div
+            className="flex-grow flex flex-col justify-center items-center p-8 space-y-8"
+            initial="closed"
+            animate={isMobileMenuOpen ? "open" : "closed"}
+            variants={{
+              open: {
+                transition: {
+                  staggerChildren: 0.1,
+                  delayChildren: 0.2
+                }
+              }
+            }}
+          >
             {menuItems.map((item, idx) => (
-              <Link 
-                key={item.href} 
-                href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
-                className={cn(
-                  "text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform",
-                  isMobileMenuOpen ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
-                )}
-                style={{ transitionDelay: `${idx * 100}ms` }}
+              <motion.div
+                key={item.href}
+                variants={{
+                  closed: { opacity: 0, y: 50, scale: 0.9 },
+                  open: {
+                    opacity: 1,
+                    y: 0,
+                    scale: 1,
+                    transition: {
+                      duration: 0.6,
+                      ease: "easeOut",
+                      delay: idx * 0.08
+                    }
+                  }
+                }}
               >
-                {item.label}
-              </Link>
+                <Link
+                  href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                  className="text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4"
+                >
+                  {item.label}
+                </Link>
+              </motion.div>
             ))}
             
-            <div className={cn(
-              "pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8 transition-all duration-500 delay-500",
-              isMobileMenuOpen ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
-            )}>
-              <div className="flex items-center space-x-8 text-lg md:text-xl font-extrabold tracking-widest uppercase text-white">
-                <Link 
-                  href={getPathForLocale('en')} 
-                  className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
-                >
-                  EN
-                </Link>
-                <div className="w-px h-6 bg-white/20" />
-                <Link 
-                  href={getPathForLocale('de')} 
-                  className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
-                >
-                  DE
-                </Link>
-              </div>
-              
-              <Button 
-                href={`/${currentLocale}/contact`}
-                variant="accent" 
-                size="lg"
-                className="w-full max-w-xs py-6 text-lg md:text-xl shadow-2xl"
+            <motion.div
+              className="pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8"
+              initial={{ opacity: 0, y: 30 }}
+              animate={isMobileMenuOpen ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.5, delay: 0.8 }}
+            >
+              <motion.div
+                className="flex items-center space-x-8 text-lg md:text-xl font-extrabold tracking-widest uppercase text-white"
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.4, delay: 0.9 }}
               >
-                {t('contact')}
-              </Button>
-            </div>
-          </div>
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 0.3, delay: 1.0 }}
+                >
+                  <Link
+                    href={getPathForLocale('en')}
+                    className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
+                  >
+                    EN
+                  </Link>
+                </motion.div>
+                <motion.div
+                  className="w-px h-6 bg-white/20"
+                  initial={{ scaleX: 0 }}
+                  animate={{ scaleX: 1 }}
+                  transition={{ duration: 0.4, delay: 1.05 }}
+                />
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 0.3, delay: 1.1 }}
+                >
+                  <Link
+                    href={getPathForLocale('de')}
+                    className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
+                  >
+                    DE
+                  </Link>
+                </motion.div>
+              </motion.div>
+              
+              <motion.div
+                initial={{ scale: 0.9, opacity: 0, y: 20 }}
+                animate={{ scale: 1, opacity: 1, y: 0 }}
+                transition={{ type: "spring", stiffness: 400, damping: 20, delay: 1.2 }}
+              >
+                <Button
+                  href={`/${currentLocale}/contact`}
+                  variant="accent"
+                  size="lg"
+                  className="w-full max-w-xs py-6 text-lg md:text-xl shadow-2xl"
+                >
+                  {t('contact')}
+                </Button>
+              </motion.div>
+            </motion.div>
           
           {/* Bottom Branding */}
-          <div className="p-12 flex justify-center opacity-20">
-            <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
-          </div>
+          <motion.div
+            className="p-12 flex justify-center opacity-20"
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={isMobileMenuOpen ? { opacity: 0.2, scale: 1 } : { opacity: 0, scale: 0.8 }}
+            transition={{ duration: 0.5, delay: 1.4 }}
+          >
+            <motion.div
+              initial={{ scale: 0.5 }}
+              animate={{ scale: 1 }}
+              transition={{ type: "spring", stiffness: 300, delay: 1.5 }}
+            >
+              <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
+            </motion.div>
+          </motion.div>
+        </motion.div>
         </div>
-      </header>
+      </motion.header>
     </>
   );
 }
+
+const navVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.06,
+      delayChildren: 0.1
+    }
+  }
+} as const;
+
+const navLinkVariants = {
+  hidden: { opacity: 0, y: 20, scale: 0.9 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: {
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }
+} as const;
+
+const headerRightVariants = {
+  hidden: { opacity: 0, x: 30 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: 0.6, ease: "easeOut" }
+  }
+} as const;

components/JsonLd.tsx

@@ -1,16 +1,51 @@
-import Script from 'next/script';
+import { Thing, WithContext } from 'schema-dts';
 
 interface JsonLdProps {
   id?: string;
-  data: any;
+  data?: WithContext<Thing> | WithContext<Thing>[];
 }
 
 export default function JsonLd({ id, data }: JsonLdProps) {
+  // If data is provided, use it. Otherwise, use the default Organization + WebSite schema.
+  const schemaData = data || [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'Organization',
+      name: 'KLZ Cables',
+      url: 'https://klz-cables.com',
+      logo: 'https://klz-cables.com/logo-blue.svg',
+      sameAs: [
+        'https://www.linkedin.com/company/klz-cables',
+      ],
+      description: 'Premium Cable Solutions for Renewable Energy and Infrastructure.',
+      address: {
+        '@type': 'PostalAddress',
+        addressCountry: 'DE',
+      },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'WebSite',
+      name: 'KLZ Cables',
+      url: 'https://klz-cables.com',
+      potentialAction: {
+        '@type': 'SearchAction',
+        target: {
+          '@type': 'EntryPoint',
+          urlTemplate: 'https://klz-cables.com/search?q={search_term_string}',
+        },
+        'query-input': 'required name=search_term_string',
+      },
+    }
+  ];
+
   return (
-    <Script
-      id={id || `jsonld-${Math.random().toString(36).substr(2, 9)}`}
+    <script
+      id={id}
       type="application/ld+json"
-      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify(schemaData),
+      }}
     />
   );
 }

components/LeafletMap.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+// Fix for default marker icon in Leaflet with Next.js
+const DefaultIcon = L.icon({
+  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+});
+
+L.Marker.prototype.options.icon = DefaultIcon;
+
+interface LeafletMapProps {
+  address: string;
+  lat: number;
+  lng: number;
+}
+
+export default function LeafletMap({ address, lat, lng }: LeafletMapProps) {
+  const position: [number, number] = [lat, lng];
+
+  return (
+    <MapContainer
+      center={position}
+      zoom={15}
+      scrollWheelZoom={false}
+      className="h-full w-full z-0"
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      <Marker position={position}>
+        <Popup>
+          <div className="text-primary font-bold">KLZ Cables</div>
+          <div className="text-sm whitespace-pre-line">{address}</div>
+        </Popup>
+      </Marker>
+    </MapContainer>
+  );
+}

components/Lightbox.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import React, { useEffect, useState, useCallback } from 'react';
+import Image from 'next/image';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useRouter, useSearchParams, usePathname } from 'next/navigation';
+
+interface LightboxProps {
+  isOpen: boolean;
+  images: string[];
+  initialIndex: number;
+  onClose: () => void;
+}
+
+export default function Lightbox({ isOpen, images, initialIndex, onClose }: LightboxProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  const updateUrl = useCallback((index: number | null) => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (index !== null) {
+      params.set('photo', index.toString());
+    } else {
+      params.delete('photo');
+    }
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+  }, [pathname, router, searchParams]);
+
+  const prevImage = useCallback(() => {
+    setCurrentIndex((prev) => {
+      const next = prev === 0 ? images.length - 1 : prev - 1;
+      updateUrl(next);
+      return next;
+    });
+  }, [images.length, updateUrl]);
+
+  const nextImage = useCallback(() => {
+    setCurrentIndex((prev) => {
+      const next = prev === images.length - 1 ? 0 : prev + 1;
+      updateUrl(next);
+      return next;
+    });
+  }, [images.length, updateUrl]);
+
+  useEffect(() => {
+    const photoParam = searchParams.get('photo');
+    if (photoParam !== null) {
+      const index = parseInt(photoParam, 10);
+      if (!isNaN(index) && index >= 0 && index < images.length) {
+        setCurrentIndex(index);
+      }
+    }
+  }, [searchParams, images.length]);
+
+  useEffect(() => {
+    if (isOpen) {
+      updateUrl(currentIndex);
+    }
+  }, [isOpen, currentIndex, updateUrl]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') handleClose();
+      if (e.key === 'ArrowLeft') prevImage();
+      if (e.key === 'ArrowRight') nextImage();
+    };
+
+    // Lock scroll
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    document.body.style.overflow = 'hidden';
+    
+    window.addEventListener('keydown', handleKeyDown);
+    
+    return () => {
+      document.body.style.overflow = originalStyle;
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, prevImage, nextImage]);
+
+  if (!mounted) return null;
+
+  const handleClose = () => {
+    updateUrl(null);
+    onClose();
+  };
+
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-[99999] flex items-center justify-center">
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.5 }}
+            className="absolute inset-0 bg-primary/95 backdrop-blur-xl"
+            onClick={handleClose}
+          />
+
+          <motion.button
+            initial={{ opacity: 0, scale: 0.5 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.5 }}
+            transition={{ delay: 0.1, duration: 0.4 }}
+            onClick={handleClose}
+            className="absolute top-6 right-6 text-white/60 hover:text-white transition-all duration-500 z-[10000] rounded-full w-14 h-14 flex items-center justify-center hover:bg-white/5 group border border-white/10"
+            aria-label="Close lightbox"
+          >
+            <div className="relative w-full h-full flex items-center justify-center group-hover:rotate-90 transition-transform duration-500">
+              <span className="text-3xl font-extralight leading-none mb-1">×</span>
+            </div>
+          </motion.button>
+          
+          <motion.button
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -20 }}
+            transition={{ delay: 0.2, duration: 0.4 }}
+            onClick={prevImage}
+            className="absolute left-6 top-1/2 -translate-y-1/2 text-white/60 hover:text-white transition-all duration-500 w-14 h-14 flex items-center justify-center hover:bg-white/5 rounded-full z-[10000] group border border-white/10"
+            aria-label="Previous image"
+          >
+            <span className="text-4xl font-extralight group-hover:-translate-x-1 transition-transform duration-500">‹</span>
+          </motion.button>
+          
+          <motion.button
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: 20 }}
+            transition={{ delay: 0.2, duration: 0.4 }}
+            onClick={nextImage}
+            className="absolute right-6 top-1/2 -translate-y-1/2 text-white/60 hover:text-white transition-all duration-500 w-14 h-14 flex items-center justify-center hover:bg-white/5 rounded-full z-[10000] group border border-white/10"
+            aria-label="Next image"
+          >
+            <span className="text-4xl font-extralight group-hover:translate-x-1 transition-transform duration-500">›</span>
+          </motion.button>
+
+          <motion.div 
+            initial={{ opacity: 0, y: 40, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 20, scale: 0.98 }}
+            transition={{ duration: 0.6, ease: [0.25, 0.46, 0.45, 0.94] }}
+            className="relative w-full h-full max-w-6xl max-h-[85vh] flex flex-col items-center justify-center p-4 md:p-12 z-20 pointer-events-none"
+          >
+            <div className="pointer-events-auto w-full h-full flex flex-col items-center justify-center">
+              <div className="relative w-full h-full shadow-[0_40px_100px_-20px_rgba(0,0,0,0.6)] ring-1 ring-white/20 overflow-hidden bg-primary-dark/50 rounded-2xl flex items-center justify-center">
+                <AnimatePresence mode="wait" initial={false}>
+                  <motion.div
+                    key={currentIndex}
+                    initial={{ opacity: 0, scale: 1.1, filter: 'blur(10px)' }}
+                    animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
+                    exit={{ opacity: 0, scale: 0.9, filter: 'blur(10px)' }}
+                    transition={{ duration: 0.7, ease: [0.25, 0.46, 0.45, 0.94] }}
+                    className="relative w-full h-full"
+                  >
+                    <Image
+                      src={images[currentIndex]}
+                      alt={`Gallery image ${currentIndex + 1}`}
+                      fill
+                      className="object-cover transition-transform duration-1000 hover:scale-[1.03]"
+                      unoptimized
+                    />
+                  </motion.div>
+                </AnimatePresence>
+                
+                {/* Technical Detail: Subtle grid overlay to reinforce industrial precision */}
+                <div className="absolute inset-0 pointer-events-none opacity-[0.03] bg-[url('/grid.svg')] bg-repeat z-10" />
+                
+                {/* Premium Reflection: Subtle gradient to give material feel */}
+                <div className="absolute inset-0 pointer-events-none bg-gradient-to-tr from-white/10 via-transparent to-transparent opacity-40 z-10" />
+              </div>
+              
+              <motion.div 
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 10 }}
+                transition={{ delay: 0.3, duration: 0.4 }}
+                className="mt-8 flex items-center gap-4"
+              >
+                <div className="h-px w-12 bg-white/20" />
+                <div className="bg-white/5 backdrop-blur-2xl text-white px-6 py-2 rounded-full border border-white/10 text-[11px] font-bold tracking-[0.2em] uppercase">
+                  {currentIndex + 1} <span className="text-accent mx-3">/</span> {images.length}
+                </div>
+                <div className="h-px w-12 bg-white/20" />
+              </motion.div>
+            </div>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>,
+    document.body
+  );
+}

components/OGImageTemplate.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+
+interface OGImageTemplateProps {
+  title: string;
+  description?: string;
+  label?: string;
+  image?: string;
+  mode?: 'dark' | 'light' | 'image';
+}
+
+export function OGImageTemplate({
+  title,
+  description,
+  label,
+  image,
+  mode = 'dark',
+}: OGImageTemplateProps) {
+  const primaryBlue = '#001a4d';
+  const accentGreen = '#82ed20';
+  const saturatedBlue = '#011dff';
+
+  const containerStyle: React.CSSProperties = {
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    backgroundColor: mode === 'light' ? '#ffffff' : primaryBlue,
+    padding: '80px',
+    position: 'relative',
+    fontFamily: 'Inter',
+  };
+
+  return (
+    <div style={containerStyle}>
+      {/* Background Image with Overlay */}
+      {image && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+          }}
+        >
+          <img
+            src={image}
+            alt=""
+            width="1200"
+            height="630"
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+            }}
+          />
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              background: 'linear-gradient(to right, rgba(0,26,77,0.95), rgba(0,26,77,0.6))',
+            }}
+          />
+        </div>
+      )}
+
+      {/* Decorative Brand Accent (Top Right) */}
+      <div
+        style={{
+          position: 'absolute',
+          top: '-150px',
+          right: '-150px',
+          width: '600px',
+          height: '600px',
+          borderRadius: '300px',
+          backgroundColor: `${accentGreen}15`,
+          display: 'flex',
+        }}
+      />
+
+      <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 10 }}>
+        {/* Label / Category */}
+        {label && (
+          <div
+            style={{
+              fontSize: '24px',
+              fontWeight: 700,
+              color: accentGreen,
+              textTransform: 'uppercase',
+              letterSpacing: '0.3em',
+              marginBottom: '32px',
+              display: 'flex',
+            }}
+          >
+            {label}
+          </div>
+        )}
+
+        {/* Title */}
+        <div
+          style={{
+            fontSize: title.length > 40 ? '64px' : '82px',
+            fontWeight: 700,
+            color: 'white',
+            lineHeight: '1.05',
+            maxWidth: '950px',
+            marginBottom: '40px',
+            display: 'flex',
+            letterSpacing: '-0.02em',
+          }}
+        >
+          {title}
+        </div>
+
+        {/* Description */}
+        {description && (
+          <div
+            style={{
+              fontSize: '32px',
+              color: 'rgba(255,255,255,0.7)',
+              maxWidth: '850px',
+              lineHeight: '1.4',
+              display: 'flex',
+              fontWeight: 400,
+            }}
+          >
+            {description.length > 160 ? description.substring(0, 157) + '...' : description}
+          </div>
+        )}
+      </div>
+
+      {/* Brand Footer */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: '80px',
+          left: '80px',
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <div
+          style={{
+            width: '80px',
+            height: '6px',
+            backgroundColor: accentGreen,
+            borderRadius: '3px',
+            marginRight: '24px',
+          }}
+        />
+        <div
+          style={{
+            fontSize: '24px',
+            fontWeight: 700,
+            color: 'white',
+            textTransform: 'uppercase',
+            letterSpacing: '0.15em',
+            display: 'flex',
+          }}
+        >
+          KLZ Cables
+        </div>
+      </div>
+
+      {/* Saturated Blue Brand Strip */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          width: '12px',
+          height: '100%',
+          backgroundColor: saturatedBlue,
+        }}
+      />
+    </div>
+  );
+}
+

components/ProductSidebar.tsx

@@ -3,6 +3,7 @@
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import RequestQuoteForm from '@/components/RequestQuoteForm';
+import DatasheetDownload from '@/components/DatasheetDownload';
 import Scribble from '@/components/Scribble';
 import { cn } from '@/components/ui/utils';
 
@@ -64,33 +65,7 @@ export default function ProductSidebar({ productName, productImage, datasheetPat
 
       {/* Datasheet Download */}
       {datasheetPath && (
-        <a 
-          href={datasheetPath} 
-          target="_blank"
-          rel="noopener noreferrer"
-          className="block bg-white rounded-2xl border border-neutral-medium overflow-hidden group transition-all duration-500 hover:shadow-xl hover:border-saturated/30 hover:-translate-y-0.5"
-        >
-          <div className="p-4 flex items-center gap-4">
-            <div className="w-12 h-12 rounded-xl bg-neutral-medium/20 flex items-center justify-center flex-shrink-0 group-hover:bg-saturated group-hover:text-white transition-all duration-500 text-saturated border border-transparent group-hover:border-white/20">
-              <svg className="w-6 h-6 transition-transform duration-500 group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
-            </div>
-            <div className="flex-1 min-w-0">
-              <h3 className="text-sm md:text-base font-heading font-black text-neutral-dark m-0 uppercase tracking-tighter leading-tight group-hover:text-saturated transition-colors duration-300">
-                {t('downloadDatasheet')}
-              </h3>
-              <p className="text-text-secondary text-[10px] md:text-xs m-0 mt-0.5 font-semibold leading-tight truncate uppercase tracking-widest opacity-60">
-                {t('downloadDatasheetDesc')}
-              </p>
-            </div>
-            <div className="text-neutral-dark/20 group-hover:text-saturated transition-all duration-500 transform group-hover:translate-x-1">
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
-              </svg>
-            </div>
-          </div>
-        </a>
+        <DatasheetDownload datasheetPath={datasheetPath} className="mt-0" />
       )}
     </div>
   );

components/RequestQuoteForm.tsx

@@ -3,6 +3,8 @@
 import React, { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { Input, Textarea, Button } from '@/components/ui';
+import { sendContactFormAction } from '@/app/actions/contact';
+import { useAnalytics } from '@/components/analytics/useAnalytics';
 
 interface RequestQuoteFormProps {
   productName: string;
@@ -10,6 +12,7 @@ interface RequestQuoteFormProps {
 
 export default function RequestQuoteForm({ productName }: RequestQuoteFormProps) {
   const t = useTranslations('Products.form');
+  const { trackEvent } = useAnalytics();
   const [email, setEmail] = useState('');
   const [request, setRequest] = useState('');
   const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
@@ -18,15 +21,30 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
     e.preventDefault();
     setStatus('submitting');
 
-    // Simulate API call
-    await new Promise((resolve) => setTimeout(resolve, 1000));
+    const formData = new FormData();
+    formData.append('name', 'Product Inquiry'); // Default name for product inquiries
+    formData.append('email', email);
+    formData.append('message', request);
+    formData.append('productName', productName);
 
-    // Here you would typically send the data to your backend
-    console.log('Form submitted:', { productName, email, request });
-
-    setStatus('success');
-    setEmail('');
-    setRequest('');
+    try {
+      const result = await sendContactFormAction(formData);
+      if (result.success) {
+        trackEvent('contact_form_submission', {
+          form_type: 'product_quote',
+          product_name: productName,
+          email: email,
+        });
+        setStatus('success');
+        setEmail('');
+        setRequest('');
+      } else {
+        setStatus('error');
+      }
+    } catch (error) {
+      console.error('Form submission error:', error);
+      setStatus('error');
+    }
   };
 
   if (status === 'success') {
@@ -41,7 +59,7 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
         <p className="text-text-secondary text-xs leading-tight mb-4 !mt-0">
           {t('successDesc', { productName })}
         </p>
-        <button 
+        <button
           onClick={() => setStatus('idle')}
           className="inline-flex items-center text-[9px] font-bold uppercase tracking-[0.2em] text-primary hover:text-accent transition-colors group"
         >
@@ -53,6 +71,32 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
     );
   }
 
+  if (status === 'error') {
+    return (
+      <div className="bg-destructive/5 border border-destructive/20 text-destructive p-4 rounded-xl text-center animate-fade-in !mt-0">
+        <div className="w-10 h-10 bg-destructive rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg shadow-destructive/20">
+          <svg className="w-5 h-5 text-destructive-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="15" y1="9" x2="9" y2="15" />
+            <line x1="9" y1="9" x2="15" y2="15" />
+          </svg>
+        </div>
+        <h3 className="text-base font-extrabold mb-1 tracking-tight !mt-0 text-destructive">{t('errorTitle') || 'Submission Failed'}</h3>
+        <p className="text-destructive/80 text-xs leading-tight mb-4 !mt-0">
+          {t('errorDesc') || 'Something went wrong. Please try again.'}
+        </p>
+        <button
+          onClick={() => setStatus('idle')}
+          className="inline-flex items-center text-[9px] font-bold uppercase tracking-[0.2em] text-destructive hover:text-destructive/80 transition-colors group"
+        >
+          <span className="border-b-2 border-destructive/10 group-hover:border-destructive/30 transition-colors pb-1">
+            {t('tryAgain') || 'Try Again'}
+          </span>
+        </button>
+      </div>
+    );
+  }
+
   return (
     <form onSubmit={handleSubmit} className="space-y-3 !mt-0">
       <div className="space-y-2 !mt-0">

components/analytics/AnalyticsProvider.tsx

@@ -3,6 +3,7 @@
 import { useEffect } from 'react';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { getAppServices } from '@/lib/services/create-services';
+import Script from 'next/script';
 
 /**
  * AnalyticsProvider Component
@@ -40,6 +41,19 @@ export default function AnalyticsProvider() {
     }
   }, [pathname, searchParams]);
 
-  return null;
+  const websiteId = process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID;
+  if (!websiteId) return null;
+
+  return (
+    <Script
+      id="umami-analytics"
+      src="/stats/script.js"
+      data-website-id={websiteId}
+      data-host-url="/stats"
+      strategy="afterInteractive"
+      data-domains="klz-cables.com"
+      defer
+    />
+  );
 }
 

components/analytics/UmamiScript.tsx

@@ -1,60 +0,0 @@
-import Script from 'next/script';
-
-interface UmamiScriptProps {
-  /**
-   * Custom website ID to override the environment variable
-   */
-  websiteId?: string;
-  /**
-   * Custom script URL to override the environment variable
-   */
-  scriptUrl?: string;
-}
-
-/**
- * Umami Analytics Script Component
- *
- * Loads the Umami analytics script only when a website ID is available.
- * Uses Next.js Script component with 'afterInteractive' strategy for optimal performance.
- *
- * @example
- * ```tsx
- * // Uses environment variables automatically
- * <UmamiScript />
- *
- * // Or provide custom values
- * <UmamiScript websiteId="custom-id" scriptUrl="https://custom.analytics.com/script.js" />
- * ```
- */
-export default function UmamiScript({ websiteId, scriptUrl }: UmamiScriptProps) {
-  // Use provided website ID or fall back to environment variable
-  const finalWebsiteId = websiteId ?? process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID;
-  
-  // If no website ID is available, don't render the script
-  if (!finalWebsiteId) {
-    if (process.env.NODE_ENV === 'development') {
-      console.warn('[Umami] NEXT_PUBLIC_UMAMI_WEBSITE_ID is not set. Analytics will be disabled.');
-    }
-    return null;
-  }
-
-  // Use provided script URL or fall back to environment variable or default
-  const finalScriptUrl = scriptUrl ??
-    process.env.NEXT_PUBLIC_UMAMI_SCRIPT_URL ??
-    'https://analytics.infra.mintel.me/script.js';
-
-  return (
-    <Script
-      id="umami-analytics"
-      src={finalScriptUrl}
-      data-website-id={finalWebsiteId}
-      strategy="afterInteractive"
-      defer
-      // Add error handling for script loading failures
-      onError={(error) => {
-        console.error('[Umami] Failed to load analytics script:', error);
-      }}
-    />
-  );
-}
-

components/blog/MDXComponents.tsx

@@ -0,0 +1,171 @@
+import Link from 'next/link';
+import VisualLinkPreview from '@/components/blog/VisualLinkPreview';
+import { Callout } from '@/components/ui';
+import HighlightBox from '@/components/blog/HighlightBox';
+import Stats from '@/components/blog/Stats';
+import AnimatedImage from '@/components/blog/AnimatedImage';
+import ChatBubble from '@/components/blog/ChatBubble';
+import SplitHeading from '@/components/blog/SplitHeading';
+import PowerCTA from '@/components/blog/PowerCTA';
+import StickyNarrative from '@/components/blog/StickyNarrative';
+import TechnicalGrid from '@/components/blog/TechnicalGrid';
+import ComparisonGrid from '@/components/blog/ComparisonGrid';
+
+export const mdxComponents = {
+  VisualLinkPreview,
+  Callout,
+  HighlightBox,
+  Stats,
+  AnimatedImage,
+  ChatBubble,
+  PowerCTA,
+  SplitHeading,
+  StickyNarrative,
+  TechnicalGrid,
+  ComparisonGrid,
+  h1: () => null,
+  a: ({ href, children, ...props }: any) => {
+    // Special handling for PDF downloads to make them prominent
+    if (href?.endsWith('.pdf')) {
+      return (
+        <a
+          href={href}
+          {...props}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-3 px-6 py-3 bg-primary text-white font-bold rounded-xl hover:bg-accent hover:text-primary-dark transition-all duration-300 no-underline my-8 group shadow-lg hover:shadow-xl hover:-translate-y-1"
+        >
+          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          <span>{children}</span>
+          <span className="text-xs opacity-50 font-normal group-hover:opacity-100 transition-opacity">(PDF)</span>
+        </a>
+      );
+    }
+
+    if (href?.startsWith('/')) {
+      return (
+        <Link href={href} {...props} className="text-primary font-medium hover:underline decoration-2 underline-offset-2 transition-all">
+          {children}
+        </Link>
+      );
+    }
+    return (
+      <a
+        href={href}
+        {...props}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-primary font-medium hover:underline decoration-2 underline-offset-2 transition-all inline-flex items-center gap-1"
+      >
+        {children}
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+        </svg>
+      </a>
+    );
+  },
+  img: (props: any) => (
+    <AnimatedImage src={props.src} alt={props.alt} />
+  ),
+  h2: ({ children, ...props }: any) => {
+    const id = typeof children === 'string'
+      ? children.toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-')
+      : props.id;
+    return (
+      <SplitHeading {...props} id={id} className="mt-16 mb-6 pb-3 border-b-2 border-primary/20">
+        {children}
+      </SplitHeading>
+    );
+  },
+  h3: ({ children, ...props }: any) => {
+    const id = typeof children === 'string'
+      ? children.toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-')
+      : props.id;
+    return (
+      <h3 {...props} id={id} className="text-2xl font-bold text-text-primary mt-12 mb-4">
+        {children}
+      </h3>
+    );
+  },
+  p: ({ children, ...props }: any) => (
+    <p {...props} className="text-lg text-text-secondary leading-relaxed mb-6">
+      {children}
+    </p>
+  ),
+  ul: ({ children, ...props }: any) => (
+    <ul {...props} className="my-8 space-y-3">
+      {children}
+    </ul>
+  ),
+  ol: ({ children, ...props }: any) => (
+    <ol {...props} className="my-8 space-y-3 list-decimal list-inside">
+      {children}
+    </ol>
+  ),
+  li: ({ children, ...props }: any) => (
+    <li {...props} className="text-lg text-text-secondary flex items-start gap-3">
+      <span className="text-primary mt-1.5 flex-shrink-0">
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+        </svg>
+      </span>
+      <span className="flex-1">{children}</span>
+    </li>
+  ),
+  blockquote: ({ children, ...props }: any) => (
+    <blockquote {...props} className="my-8 pl-6 border-l-4 border-primary bg-neutral-light/30 py-4 pr-6 rounded-r-lg">
+      <div className="text-lg text-text-primary italic">
+        {children}
+      </div>
+    </blockquote>
+  ),
+  strong: ({ children, ...props }: any) => (
+    <strong {...props} className="font-bold text-primary">
+      {children}
+    </strong>
+  ),
+  code: ({ children, ...props }: any) => (
+    <code {...props} className="px-2 py-1 bg-neutral-light text-primary rounded font-mono text-sm">
+      {children}
+    </code>
+  ),
+  pre: ({ children, ...props }: any) => (
+    <pre {...props} className="my-8 p-6 bg-neutral-dark/5 rounded-xl overflow-x-auto">
+      {children}
+    </pre>
+  ),
+  table: ({ children, ...props }: any) => (
+    <div className="my-8 overflow-x-auto rounded-lg border border-neutral-200 shadow-sm">
+      <table {...props} className="w-full text-left text-sm text-text-secondary">
+        {children}
+      </table>
+    </div>
+  ),
+  thead: ({ children, ...props }: any) => (
+    <thead {...props} className="bg-neutral-50 text-text-primary font-semibold border-b border-neutral-200">
+      {children}
+    </thead>
+  ),
+  tbody: ({ children, ...props }: any) => (
+    <tbody {...props} className="divide-y divide-neutral-200 bg-white">
+      {children}
+    </tbody>
+  ),
+  tr: ({ children, ...props }: any) => (
+    <tr {...props} className="hover:bg-neutral-50/50 transition-colors">
+      {children}
+    </tr>
+  ),
+  th: ({ children, ...props }: any) => (
+    <th {...props} className="px-6 py-4 whitespace-nowrap">
+      {children}
+    </th>
+  ),
+  td: ({ children, ...props }: any) => (
+    <td {...props} className="px-6 py-4">
+      {children}
+    </td>
+  ),
+};

components/blog/TableOfContents.tsx

@@ -19,7 +19,7 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
 
   useEffect(() => {
     const observerOptions = {
-      rootMargin: '-100px 0% -80% 0%',
+      rootMargin: '-10% 0% -70% 0%',
       threshold: 0
     };
 
@@ -31,12 +31,18 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
       });
     }, observerOptions);
 
-    const elements = headings.map((h) => document.getElementById(h.id));
-    elements.forEach((el) => {
-      if (el) observer.observe(el);
-    });
+    // Use a small delay to ensure MDX content is rendered and IDs are present
+    const timer = setTimeout(() => {
+      const elements = headings.map((h) => document.getElementById(h.id));
+      elements.forEach((el) => {
+        if (el) observer.observe(el);
+      });
+    }, 500);
 
-    return () => observer.disconnect();
+    return () => {
+      clearTimeout(timer);
+      observer.disconnect();
+    };
   }, [headings]);
 
   if (headings.length === 0) return null;
@@ -75,7 +81,7 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
                   }
                 }}
               >
-                {heading.text}
+                {heading.text.replace(/\*\*(.*?)\*\*/g, '$1')}
               </a>
             </li>
           ))}

components/emails/ContactEmail.tsx

@@ -0,0 +1,115 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+import * as React from "react";
+
+interface ContactEmailProps {
+  name: string;
+  email: string;
+  message: string;
+  subject?: string;
+  productName?: string;
+}
+
+export const ContactEmail = ({
+  name,
+  email,
+  message,
+  subject = "New Contact Form Submission",
+  productName,
+}: ContactEmailProps) => (
+  <Html>
+    <Head />
+    <Preview>{subject}</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Heading style={h1}>{subject}</Heading>
+        {productName && (
+          <Text style={text}>
+            <strong>Product Inquiry:</strong> {productName}
+          </Text>
+        )}
+        <Section style={section}>
+          <Text style={text}>
+            <strong>Name:</strong> {name}
+          </Text>
+          <Text style={text}>
+            <strong>Email:</strong> {email}
+          </Text>
+          <Hr style={hr} />
+          <Text style={text}>
+            <strong>Message:</strong>
+          </Text>
+          <Text style={messageText}>{message}</Text>
+        </Section>
+        <Hr style={hr} />
+        <Text style={footer}>
+          This email was sent from the contact form on klz-cables.com
+        </Text>
+      </Container>
+    </Body>
+  </Html>
+);
+
+export default ContactEmail;
+
+const main = {
+  backgroundColor: "#f6f9fc",
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+};
+
+const container = {
+  backgroundColor: "#ffffff",
+  margin: "0 auto",
+  padding: "20px 0 48px",
+  marginBottom: "64px",
+};
+
+const section = {
+  padding: "0 48px",
+};
+
+const h1 = {
+  color: "#333",
+  fontSize: "24px",
+  fontWeight: "bold",
+  padding: "0 48px",
+  margin: "30px 0",
+};
+
+const text = {
+  color: "#333",
+  fontSize: "16px",
+  lineHeight: "24px",
+  textAlign: "left" as const,
+};
+
+const messageText = {
+  ...text,
+  backgroundColor: "#f4f4f4",
+  padding: "15px",
+  borderRadius: "4px",
+  whiteSpace: "pre-wrap" as const,
+};
+
+const hr = {
+  borderColor: "#e6ebf1",
+  margin: "20px 0",
+};
+
+const footer = {
+  color: "#8898aa",
+  fontSize: "12px",
+  lineHeight: "16px",
+  textAlign: "center" as const,
+  marginTop: "20px",
+};

components/home/GallerySection.tsx

@@ -1,10 +1,15 @@
-import React from 'react';
+'use client';
+
+import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import { Section, Container, Heading } from '../../components/ui';
+import Lightbox from '../Lightbox';
+import { useSearchParams } from 'next/navigation';
 
 export default function GallerySection() {
   const t = useTranslations('Home.gallery');
+  const searchParams = useSearchParams();
   const images = [
     '/uploads/2024/12/DSC07433-Large-600x400.webp',
     '/uploads/2024/12/DSC07460-Large-600x400.webp',
@@ -14,8 +19,22 @@ export default function GallerySection() {
     '/uploads/2024/12/DSC07768-Large.webp',
   ];
 
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+
+  useEffect(() => {
+    const photoParam = searchParams.get('photo');
+    if (photoParam !== null) {
+      const index = parseInt(photoParam, 10);
+      if (!isNaN(index) && index >= 0 && index < images.length) {
+        setLightboxIndex(index);
+        setLightboxOpen(true);
+      }
+    }
+  }, [searchParams, images.length]);
+
   return (
-    <Section className="bg-white text-neutral-dark py-32">
+    <Section className="bg-white text-white py-32">
       <Container>
         <Heading level={2} subtitle={t('subtitle')} align="center">
           {t('title')}
@@ -23,9 +42,16 @@ export default function GallerySection() {
         
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
           {images.map((src, idx) => (
-            <div key={idx} className="relative aspect-[4/3] overflow-hidden rounded-3xl group shadow-lg hover:shadow-2xl transition-all duration-700">
-              <Image 
-                src={src} 
+            <button
+              key={idx}
+              onClick={() => {
+                setLightboxIndex(idx);
+                setLightboxOpen(true);
+              }}
+              className="relative aspect-[4/3] overflow-hidden rounded-3xl group shadow-lg hover:shadow-2xl transition-all duration-700 cursor-pointer"
+            >
+              <Image
+                src={src}
                 alt={`${t('alt')} ${idx + 1}`}
                 fill
                 className="object-cover transition-transform duration-1000 group-hover:scale-110"
@@ -33,10 +59,17 @@ export default function GallerySection() {
               />
               <div className="absolute inset-0 bg-primary-dark/20 group-hover:bg-transparent transition-all duration-500" />
               <div className="absolute inset-0 border-0 group-hover:border-[16px] border-white/10 transition-all duration-500 pointer-events-none" />
-            </div>
+            </button>
           ))}
         </div>
       </Container>
+
+      <Lightbox
+        isOpen={lightboxOpen}
+        images={images}
+        initialIndex={lightboxIndex}
+        onClose={() => setLightboxOpen(false)}
+      />
     </Section>
   );
 }

components/home/Hero.tsx

@@ -1,48 +1,168 @@
-import React from 'react';
-import { useTranslations } from 'next-intl';
-import { Container, Button, Section, Heading } from '@/components/ui';
+'use client';
+
 import Scribble from '@/components/Scribble';
+import { Button, Container, Heading, Section } from '@/components/ui';
+import { motion } from 'framer-motion';
+import { useTranslations } from 'next-intl';
 import HeroIllustration from './HeroIllustration';
 
 export default function Hero() {
   const t = useTranslations('Home.hero');
 
   return (
-    <Section className="relative h-[70vh] md:h-[90vh] flex items-center justify-center overflow-hidden bg-primary py-0 md:py-0 lg:py-0">
-      <HeroIllustration />
-      
-      <Container className="relative z-10 text-left text-white w-full">
-        <div className="max-w-5xl animate-slide-up">
-          <Heading level={1} className="mb-4 md:mb-8 max-w-[15ch] md:max-w-none text-white">
-            {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>
-              )
-            })}
-          </Heading>
-          <p className="text-lg md:text-xl text-white leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
-            {t('subtitle')}
-          </p>
-          <div className="flex flex-col md:flex-row gap-3 md:gap-6">
-            <Button href="/contact" variant="accent" size="lg" className="group w-full md:w-auto md:h-16 md:px-10 md:text-lg">
-              {t('cta')}
-              <span className="ml-3 transition-transform group-hover:translate-x-1">&rarr;</span>
-            </Button>
-            <Button href="/products" variant="ghost" size="lg" className="group w-full md:w-auto text-white hover:bg-white/10 md:bg-white md:text-saturated md:hover:bg-neutral-light md:h-16 md:px-10 md:text-lg">
-              {t('exploreProducts')}
-            </Button>
-          </div>
-        </div>
+    <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">
+        <motion.div
+          className="max-w-5xl mx-auto md:mx-0"
+          initial="hidden"
+          animate="visible"
+          variants={containerVariants}
+        >
+          <motion.div variants={headingVariants}>
+            <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]">
+              {t.rich('title', {
+                green: (chunks) => (
+                  <span className="relative inline-block">
+                    <motion.span
+                      className="relative z-10 text-accent italic"
+                      variants={accentVariants}
+                    >
+                      {chunks}
+                    </motion.span>
+                    <motion.div
+                      variants={scribbleVariants}
+                      className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10"
+                    >
+                      <Scribble variant="circle" />
+                    </motion.div>
+                  </span>
+                )
+              })}
+            </Heading>
+          </motion.div>
+          <motion.div variants={subtitleVariants}>
+            <p className="text-lg md:text-xl text-white/90 leading-relaxed max-w-2xl mb-10 md:mb-12">
+              {t('subtitle')}
+            </p>
+          </motion.div>
+          <motion.div
+            className="flex flex-col sm:flex-row justify-center md:justify-start gap-4 md:gap-6"
+            variants={buttonContainerVariants}
+          >
+            <motion.div variants={buttonVariants}>
+              <Button href="/contact" 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">
+                {t('cta')}
+                <span className="transition-transform group-hover/btn:translate-x-1">&rarr;</span>
+              </Button>
+            </motion.div>
+            <motion.div variants={buttonVariants}>
+              <Button href="/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">
+                {t('exploreProducts')}
+              </Button>
+            </motion.div>
+          </motion.div>
+        </motion.div>
       </Container>
+
+      <motion.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"
+        initial={{ opacity: 0, scale: 0.95, filter: 'blur(20px)' }}
+        animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
+        transition={{ duration: 2.2, ease: 'easeOut', delay: 0.05 }}
+      >
+        <HeroIllustration />
+      </motion.div>
       
-      <div className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 animate-bounce hidden sm:block">
+      <motion.div
+        className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block"
+        initial={{ opacity: 0, y: 16 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 1, ease: "easeOut", delay: 3 }}
+      >
         <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" />
+          <motion.div
+            className="w-1 h-2 bg-white rounded-full"
+            animate={{ y: [0, -10, 0] }}
+            transition={{
+              duration: 1.5,
+              repeat: Infinity,
+              ease: "easeInOut"
+            }}
+          />
         </div>
-      </div>
+      </motion.div>
     </Section>
   );
 }
+
+const containerVariants = {
+  hidden: { opacity: 1 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.12,
+      delayChildren: 0.4
+    }
+  }
+} as const;
+
+const headingVariants = {
+  hidden: { opacity: 0, y: 60, scale: 0.85 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 1.2, ease: [0.25, 0.46, 0.45, 0.94] }
+  }
+} as const;
+
+const accentVariants = {
+  hidden: { opacity: 0, scale: 0.9, rotate: -5 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    rotate: 0,
+    transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] }
+  }
+} as const;
+
+const scribbleVariants = {
+  hidden: { opacity: 0, scale: 0, rotate: 180 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    rotate: 0,
+    transition: { duration: 1, type: "spring", stiffness: 300, damping: 20 }
+  }
+} as const;
+
+const subtitleVariants = {
+  hidden: { opacity: 0, y: 40, scale: 0.95 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 1, ease: [0.25, 0.46, 0.45, 0.94] }
+  }
+} as const;
+
+const buttonContainerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.15,
+      delayChildren: 0.4
+    }
+  }
+} as const;
+
+const buttonVariants = {
+  hidden: { opacity: 0, y: 30, scale: 0.9 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { type: "spring", stiffness: 400, damping: 20 }
+  }
+} as const;

components/home/HeroIllustration.tsx

@@ -163,11 +163,589 @@ const POWER_LINES = [
 
 export default function HeroIllustration() {
   return (
-    <div className="absolute inset-0 z-0 overflow-hidden bg-primary">
+    <div className="absolute md:inset-0 z-0 overflow-visible bg-primary w-full h-full">
+      <svg
+        viewBox="400 0 1000 1100"
+        className="w-full h-full opacity-60 md:opacity-100 scale-[1.44] md:scale-100 translate-x-0 overflow-visible md:hidden"
+        preserveAspectRatio="xMidYMid meet"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          {/* Electric energy flow gradient */}
+          <linearGradient id="energy-pulse" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="#82ed20" stopOpacity="0" />
+            <stop offset="30%" stopColor="#82ed20" stopOpacity="0.6" />
+            <stop offset="50%" stopColor="#9bf14d" stopOpacity="1" />
+            <stop offset="70%" stopColor="#82ed20" stopOpacity="0.6" />
+            <stop offset="100%" stopColor="#82ed20" stopOpacity="0" />
+          </linearGradient>
+
+          {/* Wind flow gradient */}
+          <linearGradient id="wind-flow" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="white" stopOpacity="0" />
+            <stop offset="30%" stopColor="white" stopOpacity="0.4" />
+            <stop offset="50%" stopColor="white" stopOpacity="0.6" />
+            <stop offset="70%" stopColor="white" stopOpacity="0.4" />
+            <stop offset="100%" stopColor="white" stopOpacity="0" />
+          </linearGradient>
+
+          {/* Sun ray gradient */}
+          <linearGradient id="sun-ray" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="#FFD700" stopOpacity="0.6" />
+            <stop offset="50%" stopColor="#FFD700" stopOpacity="0.3" />
+            <stop offset="100%" stopColor="#82ed20" stopOpacity="0.1" />
+          </linearGradient>
+
+          {/* Glow filter */}
+          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur stdDeviation="3" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+
+          {/* Soft glow for nodes */}
+          <filter id="soft-glow" x="-100%" y="-100%" width="300%" height="300%">
+            <feGaussianBlur stdDeviation="2" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+
+          {/* Sun glow filter */}
+          <filter id="sun-glow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur stdDeviation="4" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+
+        {/* Main scene container - positioned to the right */}
+        <g transform="translate(900, 100)">
+          
+          {/* === ISOMETRIC GRID === */}
+          <g opacity="0.15">
+            {/* Horizontal grid lines (going from top-left to bottom-right) */}
+            {[...Array(GRID.rows + 1)].map((_, row) => {
+              const start = gridToScreen(0, row);
+              const end = gridToScreen(GRID.cols, row);
+              return (
+                <line
+                  key={`h-${row}`}
+                  x1={start.x}
+                  y1={start.y}
+                  x2={end.x}
+                  y2={end.y}
+                  stroke="white"
+                  strokeWidth="1"
+                />
+              );
+            })}
+            {/* Vertical grid lines (going from top-right to bottom-left) */}
+            {[...Array(GRID.cols + 1)].map((_, col) => {
+              const start = gridToScreen(col, 0);
+              const end = gridToScreen(col, GRID.rows);
+              return (
+                <line
+                  key={`v-${col}`}
+                  x1={start.x}
+                  y1={start.y}
+                  x2={end.x}
+                  y2={end.y}
+                  stroke="white"
+                  strokeWidth="1"
+                />
+              );
+            })}
+          </g>
+
+          {/* Grid intersection nodes */}
+          <g opacity="0.2">
+            {[...Array(GRID.cols + 1)].map((_, col) =>
+              [...Array(GRID.rows + 1)].map((_, row) => {
+                const pos = gridToScreen(col, row);
+                return (
+                  <circle
+                    key={`node-${col}-${row}`}
+                    cx={pos.x}
+                    cy={pos.y}
+                    r="2"
+                    fill="white"
+                  />
+                );
+              })
+            )}
+          </g>
+
+          {/* === POWER LINES (Base cables) === */}
+          <g stroke="white" strokeWidth="2" strokeOpacity="0.25">
+            {POWER_LINES.map((line, i) => {
+              const from = gridToScreen(line.from.col, line.from.row);
+              const to = gridToScreen(line.to.col, line.to.row);
+              return (
+                <line
+                  key={`cable-${i}`}
+                  x1={from.x}
+                  y1={from.y}
+                  x2={to.x}
+                  y2={to.y}
+                />
+              );
+            })}
+          </g>
+
+          {/* === ANIMATED ENERGY FLOW === */}
+          <g filter="url(#glow)">
+            {POWER_LINES.map((line, i) => {
+              const from = gridToScreen(line.from.col, line.from.row);
+              const to = gridToScreen(line.to.col, line.to.row);
+              const length = Math.sqrt(
+                Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2)
+              );
+              return (
+                <line
+                  key={`flow-${i}`}
+                  x1={from.x}
+                  y1={from.y}
+                  x2={to.x}
+                  y2={to.y}
+                  stroke="url(#energy-pulse)"
+                  strokeWidth="3"
+                  strokeLinecap="round"
+                  strokeDasharray={`${length * 0.2} ${length * 0.8}`}
+                >
+                  <animate
+                    attributeName="stroke-dashoffset"
+                    from={length}
+                    to={0}
+                    dur={`${1.5 + (i % 3) * 0.5}s`}
+                    repeatCount="indefinite"
+                  />
+                </line>
+              );
+            })}
+          </g>
+
+          {/* === SOLAR PANELS === */}
+          {INFRASTRUCTURE.solar.map((panel, i) => {
+            const pos = gridToScreen(panel.col, panel.row);
+            return (
+              <g key={`solar-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Panel base */}
+                <path
+                  d="M -20 0 L 0 -10 L 20 0 L 0 10 Z"
+                  fill="white"
+                  fillOpacity="0.1"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.4"
+                />
+                {/* Panel surface (tilted) */}
+                <path
+                  d="M -15 -5 L 0 -15 L 15 -5 L 0 5 Z"
+                  fill="white"
+                  fillOpacity="0.15"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.5"
+                />
+                {/* Panel grid lines */}
+                <line x1="-7" y1="-10" x2="7" y2="0" stroke="white" strokeWidth="0.5" strokeOpacity="0.3" />
+                <line x1="0" y1="-15" x2="0" y2="5" stroke="white" strokeWidth="0.5" strokeOpacity="0.3" />
+                {/* Connection glow */}
+                <circle r="4" fill="#82ed20" fillOpacity="0.4" filter="url(#soft-glow)">
+                  <animate attributeName="fillOpacity" values="0.3;0.6;0.3" dur="2s" repeatCount="indefinite" />
+                </circle>
+              </g>
+            );
+          })}
+
+          {/* === WIND TURBINES === */}
+          {INFRASTRUCTURE.wind.map((turbine, i) => {
+            const pos = gridToScreen(turbine.col, turbine.row);
+            return (
+              <g key={`wind-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Base */}
+                <ellipse cx="0" cy="0" rx="10" ry="5" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
+                {/* Tower */}
+                <line x1="0" y1="0" x2="0" y2="-60" stroke="white" strokeWidth="2" strokeOpacity="0.5" />
+                {/* Nacelle */}
+                <ellipse cx="0" cy="-60" rx="6" ry="3" fill="white" fillOpacity="0.3" stroke="white" strokeWidth="1" />
+                {/* Blades */}
+                <g transform="translate(0, -60)">
+                  {[0, 120, 240].map((angle, j) => (
+                    <line
+                      key={`blade-${i}-${j}`}
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="-30"
+                      stroke="white"
+                      strokeWidth="1.5"
+                      strokeOpacity="0.6"
+                      transform={`rotate(${angle})`}
+                    >
+                      <animateTransform
+                        attributeName="transform"
+                        type="rotate"
+                        from={`${angle} 0 0`}
+                        to={`${angle + 360} 0 0`}
+                        dur={`${3 + i}s`}
+                        repeatCount="indefinite"
+                      />
+                    </line>
+                  ))}
+                  <circle r="3" fill="white" fillOpacity="0.4" />
+                </g>
+                {/* Connection glow */}
+                <circle r="5" fill="#82ed20" fillOpacity="0.4" filter="url(#soft-glow)">
+                  <animate attributeName="fillOpacity" values="0.3;0.6;0.3" dur="2.5s" repeatCount="indefinite" />
+                </circle>
+              </g>
+            );
+          })}
+
+          {/* === SUBSTATIONS === */}
+          {INFRASTRUCTURE.substations.map((sub, i) => {
+            const pos = gridToScreen(sub.col, sub.row);
+            const isCollection = sub.type === 'collection';
+            return (
+              <g key={`substation-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Base platform */}
+                <path
+                  d="M -25 0 L 0 -12 L 25 0 L 0 12 Z"
+                  fill="white"
+                  fillOpacity="0.1"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.4"
+                />
+                {/* Building */}
+                <path
+                  d={isCollection
+                    ? "M -18 0 L -18 -20 L 0 -32 L 18 -20 L 18 0"
+                    : "M -22 0 L -22 -25 L 0 -37 L 22 -25 L 22 0"
+                  }
+                  fill="white"
+                  fillOpacity="0.08"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.5"
+                />
+                {/* Equipment */}
+                <rect x="-10" y="-12" width="6" height="8" fill="white" fillOpacity="0.2" stroke="white" strokeWidth="0.5" />
+                <rect x="4" y="-12" width="6" height="8" fill="white" fillOpacity="0.2" stroke="white" strokeWidth="0.5" />
+                {/* Insulators */}
+                <line x1="-7" y1="-12" x2="-7" y2="-22" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
+                <line x1="7" y1="-12" x2="7" y2="-22" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
+                <circle cx="-7" cy="-22" r="2" fill="white" fillOpacity="0.4" />
+                <circle cx="7" cy="-22" r="2" fill="white" fillOpacity="0.4" />
+                {/* Connection glow */}
+                <circle r="8" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
+                  <animate attributeName="r" values="6;10;6" dur="3s" repeatCount="indefinite" />
+                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite" />
+                </circle>
+              </g>
+            );
+          })}
+
+          {/* === TRANSMISSION TOWERS === */}
+          {INFRASTRUCTURE.towers.map((tower, i) => {
+            const pos = gridToScreen(tower.col, tower.row);
+            return (
+              <g key={`tower-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Base */}
+                <ellipse cx="0" cy="0" rx="8" ry="4" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
+                {/* Tower legs */}
+                <path d="M -6 0 L -3 -45 M 6 0 L 3 -45" stroke="white" strokeWidth="1.5" strokeOpacity="0.5" />
+                {/* Cross braces */}
+                <path d="M -5 -10 L 5 -10 M -4 -20 L 4 -20 M -3 -30 L 3 -30 M -3 -45 L 3 -45" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
+                {/* Cross arms */}
+                <line x1="-12" y1="-40" x2="12" y2="-40" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
+                <line x1="-10" y1="-32" x2="10" y2="-32" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
+                {/* Insulators */}
+                <circle cx="-10" cy="-40" r="1.5" fill="white" fillOpacity="0.4" />
+                <circle cx="10" cy="-40" r="1.5" fill="white" fillOpacity="0.4" />
+                {/* Connection glow */}
+                <circle r="5" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
+                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur="2s" repeatCount="indefinite" />
+                </circle>
+              </g>
+            );
+          })}
+
+          {/* === CITY BUILDINGS === */}
+          {INFRASTRUCTURE.city.map((building, i) => {
+            const pos = gridToScreen(building.col, building.row);
+            const heights = { tall: 70, medium: 45, small: 30 };
+            const height = heights[building.type as keyof typeof heights];
+            return (
+              <g key={`building-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Base */}
+                <path
+                  d="M -12 0 L 0 -6 L 12 0 L 0 6 Z"
+                  fill="white"
+                  fillOpacity="0.1"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.3"
+                />
+                {/* Building front */}
+                <path
+                  d={`M -12 0 L -12 -${height} L 0 -${height + 6} L 0 -6 Z`}
+                  fill="white"
+                  fillOpacity="0.1"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.4"
+                />
+                {/* Building side */}
+                <path
+                  d={`M 0 -6 L 0 -${height + 6} L 12 -${height} L 12 0 Z`}
+                  fill="white"
+                  fillOpacity="0.05"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.3"
+                />
+                {/* Windows */}
+                {[...Array(Math.floor(height / 15))].map((_, w) => (
+                  <g key={`window-${i}-${w}`}>
+                    <rect x="-9" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
+                    <rect x="-4" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
+                    <rect x="3" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
+                    <rect x="7" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
+                  </g>
+                ))}
+                {/* Connection glow */}
+                <circle r="4" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
+                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur={`${2 + i * 0.3}s`} repeatCount="indefinite" />
+                </circle>
+              </g>
+            );
+          })}
+
+          {/* === CITY 2 BUILDINGS (bottom-left) === */}
+          {INFRASTRUCTURE.city2.map((building, i) => {
+            const pos = gridToScreen(building.col, building.row);
+            const heights = { tall: 70, medium: 45, small: 30 };
+            const height = heights[building.type as keyof typeof heights];
+            return (
+              <g key={`building2-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Base */}
+                <path
+                  d="M -12 0 L 0 -6 L 12 0 L 0 6 Z"
+                  fill="white"
+                  fillOpacity="0.1"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.3"
+                />
+                {/* Building front */}
+                <path
+                  d={`M -12 0 L -12 -${height} L 0 -${height + 6} L 0 -6 Z`}
+                  fill="white"
+                  fillOpacity="0.1"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.4"
+                />
+                {/* Building side */}
+                <path
+                  d={`M 0 -6 L 0 -${height + 6} L 12 -${height} L 12 0 Z`}
+                  fill="white"
+                  fillOpacity="0.05"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.3"
+                />
+                {/* Windows */}
+                {[...Array(Math.floor(height / 15))].map((_, w) => (
+                  <g key={`window2-${i}-${w}`}>
+                    <rect x="-9" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
+                    <rect x="-4" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
+                    <rect x="3" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
+                    <rect x="7" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
+                  </g>
+                ))}
+                {/* Connection glow */}
+                <circle r="4" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
+                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur={`${2.5 + i * 0.3}s`} repeatCount="indefinite" />
+                </circle>
+              </g>
+            );
+          })}
+
+          {/* === TREES === */}
+          {INFRASTRUCTURE.trees.map((tree, i) => {
+            const pos = gridToScreen(tree.col, tree.row);
+            return (
+              <g key={`tree-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Trunk */}
+                <line x1="0" y1="0" x2="0" y2="-15" stroke="white" strokeWidth="2" strokeOpacity="0.3" />
+                {/* Foliage - layered circles for tree crown */}
+                <ellipse cx="0" cy="-22" rx="10" ry="8" fill="white" fillOpacity="0.12" stroke="white" strokeWidth="0.5" strokeOpacity="0.2" />
+                <ellipse cx="-5" cy="-26" rx="7" ry="6" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="0.5" strokeOpacity="0.15" />
+                <ellipse cx="5" cy="-26" rx="7" ry="6" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="0.5" strokeOpacity="0.15" />
+                <ellipse cx="0" cy="-30" rx="6" ry="5" fill="white" fillOpacity="0.08" stroke="white" strokeWidth="0.5" strokeOpacity="0.1" />
+              </g>
+            );
+          })}
+
+          {/* === ABSTRACT WIND EFFECTS === */}
+          {INFRASTRUCTURE.wind.map((turbine, i) => {
+            const pos = gridToScreen(turbine.col, turbine.row);
+            return (
+              <g key={`wind-effect-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Wind swoosh lines - curved paths flowing toward turbine */}
+                {[0, 1, 2].map((j) => (
+                  <path
+                    key={`wind-line-${i}-${j}`}
+                    d={`M ${-80 - j * 15} ${-70 - j * 8} Q ${-50 - j * 10} ${-65 - j * 5} ${-20} ${-60}`}
+                    stroke="url(#wind-flow)"
+                    strokeWidth="2"
+                    fill="none"
+                    strokeLinecap="round"
+                    opacity="0"
+                  >
+                    <animate
+                      attributeName="opacity"
+                      values="0;0.6;0"
+                      dur={`${2 + j * 0.5}s`}
+                      begin={`${j * 0.7 + i * 0.3}s`}
+                      repeatCount="indefinite"
+                    />
+                    <animate
+                      attributeName="stroke-dashoffset"
+                      from="100"
+                      to="0"
+                      dur={`${2 + j * 0.5}s`}
+                      begin={`${j * 0.7 + i * 0.3}s`}
+                      repeatCount="indefinite"
+                    />
+                  </path>
+                ))}
+                {/* Additional wind particles */}
+                {[0, 1, 2, 3].map((j) => (
+                  <circle
+                    key={`wind-particle-${i}-${j}`}
+                    r="1.5"
+                    fill="white"
+                    opacity="0"
+                  >
+                    <animate
+                      attributeName="cx"
+                      values={`${-70 - j * 10};${-10}`}
+                      dur={`${1.5 + j * 0.3}s`}
+                      begin={`${j * 0.4 + i * 0.2}s`}
+                      repeatCount="indefinite"
+                    />
+                    <animate
+                      attributeName="cy"
+                      values={`${-75 - j * 5};${-60}`}
+                      dur={`${1.5 + j * 0.3}s`}
+                      begin={`${j * 0.4 + i * 0.2}s`}
+                      repeatCount="indefinite"
+                    />
+                    <animate
+                      attributeName="opacity"
+                      values="0;0.5;0"
+                      dur={`${1.5 + j * 0.3}s`}
+                      begin={`${j * 0.4 + i * 0.2}s`}
+                      repeatCount="indefinite"
+                    />
+                  </circle>
+                ))}
+              </g>
+            );
+          })}
+
+          {/* === SCHEMATIC SUN RAYS === */}
+          {/* Simple downward rays above each solar panel */}
+          {INFRASTRUCTURE.solar.map((panel, i) => {
+            const pos = gridToScreen(panel.col, panel.row);
+            return (
+              <g key={`sun-ray-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Three short schematic rays coming down to panel */}
+                {[-8, 0, 8].map((offset, j) => (
+                  <line
+                    key={`ray-${i}-${j}`}
+                    x1={offset}
+                    y1={-45}
+                    x2={offset * 0.3}
+                    y2={-18}
+                    stroke="#FFD700"
+                    strokeWidth="1.5"
+                    strokeOpacity="0.4"
+                    strokeLinecap="round"
+                    strokeDasharray="4 6"
+                  >
+                    <animate
+                      attributeName="strokeOpacity"
+                      values="0.2;0.5;0.2"
+                      dur={`${2 + j * 0.3}s`}
+                      begin={`${i * 0.2}s`}
+                      repeatCount="indefinite"
+                    />
+                    <animate
+                      attributeName="stroke-dashoffset"
+                      from="10"
+                      to="0"
+                      dur="1.5s"
+                      repeatCount="indefinite"
+                    />
+                  </line>
+                ))}
+              </g>
+            );
+          })}
+
+          {/* === ENERGY PARTICLES === */}
+          {POWER_LINES.map((line, i) => {
+            const from = gridToScreen(line.from.col, line.from.row);
+            const to = gridToScreen(line.to.col, line.to.row);
+            return (
+              <circle
+                key={`particle-${i}`}
+                r="3"
+                fill="#82ed20"
+                filter="url(#soft-glow)"
+              >
+                <animate
+                  attributeName="cx"
+                  values={`${from.x};${to.x}`}
+                  dur={`${1 + (i % 4) * 0.3}s`}
+                  repeatCount="indefinite"
+                />
+                <animate
+                  attributeName="cy"
+                  values={`${from.y};${to.y}`}
+                  dur={`${1 + (i % 4) * 0.3}s`}
+                  repeatCount="indefinite"
+                />
+                <animate
+                  attributeName="opacity"
+                  values="0;0.8;0"
+                  dur={`${1 + (i % 4) * 0.3}s`}
+                  repeatCount="indefinite"
+                />
+              </circle>
+            );
+          })}
+
+        </g>
+      </svg>
+
+      {/* Desktop SVG - Original */}
       <svg
         viewBox="-400 -200 1800 1100"
-        className="w-full h-full opacity-40 md:opacity-100 scale-150 md:scale-100 translate-x-1/4 md:translate-x-0"
-        preserveAspectRatio="xMidYMid slice"
+        className="w-full h-full opacity-100 scale-100 translate-x-0 hidden md:block"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -741,7 +1319,7 @@ export default function HeroIllustration() {
 
         </g>
       </svg>
-      <div className="absolute inset-0 bg-gradient-to-b from-primary/10 via-transparent to-primary/90" />
+      <div className="absolute inset-0 bg-gradient-to-b from-primary/10 via-transparent to-primary/90 pointer-events-none" />
     </div>
   );
 }

components/home/RecentPosts.tsx

@@ -19,7 +19,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
     <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">
-          <Heading level={2} subtitle={t('latestNews')} className="mb-0">
+          <Heading level={2} subtitle={t('latestNews')} className="mb-0 text-primary">
             {t('allArticles')}
           </Heading>
           <Link href={`/${locale}/blog`} className="group flex items-center text-primary font-bold text-base md:text-lg touch-target">

components/home/WhatWeDo.tsx

@@ -6,12 +6,12 @@ export default function WhatWeDo() {
   const t = useTranslations('Home.whatWeDo');
 
   return (
-    <Section className="bg-white text-neutral-dark">
+    <Section className="bg-white">
       <Container>
         <div className="sticky-narrative-container">
           <div className="sticky-narrative-sidebar">
             <div className="lg:sticky lg:top-32">
-              <Heading level={2} subtitle={t('expertise')}>
+              <Heading level={2} subtitle={t('expertise')} className="text-primary-dark">
                 {t('title')}
               </Heading>
               <p className="text-base md:text-lg text-text-secondary leading-relaxed">
@@ -33,7 +33,7 @@ export default function WhatWeDo() {
                   </span>
                   <div className="h-px flex-grow bg-neutral-medium" />
                 </div>
-                <h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 text-saturated group-hover:text-accent-dark transition-colors">{t(`items.${idx}.title`)}</h3>
+                <h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 text-primary-dark group-hover:text-accent-dark transition-colors">{t(`items.${idx}.title`)}</h3>
                 <p className="text-text-secondary text-base md:text-base leading-relaxed">{t(`items.${idx}.description`)}</p>
               </div>
             ))}

components/home/WhyChooseUs.tsx

@@ -6,12 +6,12 @@ export default function WhyChooseUs() {
   const t = useTranslations('Home.whyChooseUs');
 
   return (
-    <Section className="bg-neutral-light text-neutral-dark">
+    <Section className="bg-neutral-light">
       <Container>
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24">
           <div className="lg:col-span-4 order-1 lg:order-2">
             <div className="sticky top-32">
-              <Heading level={2} subtitle={t('whyKlz')}>
+              <Heading level={2} subtitle={t('whyKlz')} className="text-primary-dark">
                 {t('title')}
               </Heading>
               <p className="text-base md:text-lg text-text-secondary leading-relaxed">
@@ -26,7 +26,7 @@ export default function WhyChooseUs() {
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                       </svg>
                     </div>
-                    <span className="font-bold text-saturated text-base md:text-base">{t(`features.${i}`)}</span>
+                    <span className="font-bold text-primary-dark text-base md:text-base">{t(`features.${i}`)}</span>
                   </div>
                 ))}
               </div>
@@ -36,9 +36,9 @@ export default function WhyChooseUs() {
             {[0, 1, 2, 3].map((idx) => (
               <div key={idx} className="p-10 bg-white rounded-3xl border border-neutral-medium hover:border-accent transition-all duration-500 hover:shadow-xl group">
                 <div className="w-14 h-14 bg-saturated/10 rounded-2xl flex items-center justify-center mb-8 group-hover:bg-accent transition-colors duration-500">
-                  <span className="text-saturated font-bold text-lg group-hover:text-primary-dark">0{idx + 1}</span>
+                  <span className="text-white font-bold text-lg group-hover:text-primary-dark">0{idx + 1}</span>
                 </div>
-                <h3 className="text-xl font-bold mb-4 text-saturated">{t(`items.${idx}.title`)}</h3>
+                <h3 className="text-xl font-bold mb-4 text-primary-dark">{t(`items.${idx}.title`)}</h3>
                 <p className="text-text-secondary text-base md:text-base leading-relaxed">{t(`items.${idx}.description`)}</p>
               </div>
             ))}

components/team/Gallery.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import Image from 'next/image';
+import Lightbox from '@/components/Lightbox';
+import { Section, Container, Heading } from '@/components/ui';
+
+export default function Gallery() {
+  const t = useTranslations('Team');
+
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+
+  const teamGalleryImages = [
+    '/uploads/2024/12/DSC07539-Large-600x400.webp',
+    '/uploads/2024/12/DSC07460-Large-600x400.webp',
+    '/uploads/2024/12/DSC07469-Large-600x400.webp',
+    '/uploads/2024/12/DSC07433-Large-600x400.webp',
+    '/uploads/2024/12/DSC07387-Large-600x400.webp'
+  ];
+
+  return (
+    <Section className="bg-primary-dark py-16 md:py-32">
+      <Container>
+        <Heading level={2} subtitle={t('gallery.subtitle')} align="center" className="text-white mb-12 md:mb-20">
+          <span className="text-white">{t('gallery.title')}</span>
+        </Heading>
+        <div className="grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-6">
+          {teamGalleryImages.map((src, idx) => (
+            <button
+              key={idx}
+              onClick={() => {
+                setLightboxIndex(idx);
+                setLightboxOpen(true);
+              }}
+              className="relative aspect-[3/4] rounded-2xl md:rounded-[32px] overflow-hidden group shadow-2xl cursor-pointer"
+            >
+              <Image src={src} alt={t('gallery.title')} fill className="object-cover transition-transform duration-1000 group-hover:scale-110" />
+              <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-transparent transition-all duration-500" />
+              <div className="absolute inset-0 border-0 group-hover:border-[8px] md:group-hover:border-[12px] border-white/10 transition-all duration-500 pointer-events-none" />
+            </button>
+          ))}
+        </div>
+      </Container>
+
+      <Lightbox
+        isOpen={lightboxOpen}
+        images={teamGalleryImages}
+        initialIndex={lightboxIndex}
+        onClose={() => setLightboxOpen(false)}
+      />
+    </Section>
+  );
+}

components/ui/Button.tsx

@@ -11,16 +11,16 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 }
 
 export function Button({ className, variant = 'primary', size = 'md', href, ...props }: ButtonProps) {
-  const baseStyles = 'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95';
+  const baseStyles = 'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-500 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95 hover:-translate-y-1 hover:scale-[1.02] relative overflow-hidden group/btn isolate';
   
   const variants = {
-    primary: 'bg-primary text-white hover:bg-primary-dark shadow-md hover:shadow-lg',
-    secondary: 'bg-secondary text-white hover:bg-secondary-light shadow-md hover:shadow-lg',
-    accent: 'bg-accent text-primary-dark hover:bg-accent-dark shadow-md hover:shadow-lg',
-    saturated: 'bg-saturated text-white hover:bg-primary shadow-md hover:shadow-lg',
-    outline: 'border-2 border-primary bg-transparent hover:bg-primary hover:text-white text-primary',
-    ghost: 'hover:bg-primary-light text-primary',
-    white: 'bg-white text-primary hover:bg-neutral-light shadow-md hover:shadow-lg',
+    primary: 'bg-primary text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
+    secondary: 'bg-secondary text-white shadow-md hover:shadow-secondary/30 hover:shadow-2xl',
+    accent: 'bg-accent text-primary-dark shadow-md hover:shadow-accent/30 hover:shadow-2xl',
+    saturated: 'bg-saturated text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
+    outline: 'border-2 border-primary bg-transparent text-primary hover:text-white hover:shadow-primary/20 hover:shadow-xl',
+    ghost: 'text-primary hover:shadow-lg',
+    white: 'bg-white text-primary shadow-md hover:shadow-primary/30 hover:shadow-2xl hover:text-white',
   };
 
   const sizes = {
@@ -32,15 +32,42 @@ export function Button({ className, variant = 'primary', size = 'md', href, ...p
 
   const styles = cn(baseStyles, variants[variant], sizes[size], className);
 
+  const overlayColors = {
+    primary: 'bg-primary-dark',
+    secondary: 'bg-secondary-light',
+    accent: 'bg-accent-dark',
+    saturated: 'bg-primary',
+    outline: 'bg-primary',
+    ghost: 'bg-primary-light/10',
+    white: 'bg-primary-light',
+  };
+
+  const content = (
+    <>
+      <span className={cn(
+        "relative z-10 flex items-center justify-center gap-2 transition-colors duration-500",
+        variant === 'white' ? "group-hover/btn:text-primary-dark" : ""
+      )}>
+        {props.children}
+      </span>
+      <span className={cn(
+        "absolute inset-0 translate-y-[101%] group-hover/btn:translate-y-0 transition-transform duration-500 ease-out",
+        overlayColors[variant]
+      )} />
+    </>
+  );
+
   if (href) {
     return (
       <Link href={href} className={styles}>
-        {props.children}
+        {content}
       </Link>
     );
   }
 
   return (
-    <button className={styles} {...props} />
+    <button className={styles} {...props}>
+      {content}
+    </button>
   );
 }

components/ui/Heading.tsx

@@ -17,9 +17,9 @@ export function Heading({
   const Tag = `h${level}` as any;
   
   const sizes = {
-    1: 'text-3xl md:text-5xl lg:text-6xl font-extrabold leading-[1.1] tracking-tight',
-    2: 'text-2xl md:text-4xl lg:text-5xl font-bold leading-[1.2] tracking-tight',
-    3: 'text-xl md:text-2xl lg:text-3xl font-bold leading-[1.3] tracking-tight',
+    1: 'text-2xl md:text-4xl lg:text-5xl font-bold leading-[1.1] tracking-tight',
+    2: 'text-xl md:text-3xl lg:text-4xl font-bold leading-[1.2] tracking-tight',
+    3: 'text-lg md:text-2xl lg:text-3xl font-bold leading-[1.3] tracking-tight',
     4: 'text-lg md:text-xl lg:text-2xl font-bold leading-[1.4]',
     5: 'text-base md:text-lg font-bold leading-[1.5]',
     6: 'text-base md:text-lg font-semibold leading-[1.6]',

data/blog/de/windparkbau-im-fokus-drei-typische-kabelherausforderungen.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Windparkbau im Fokus: drei typische Kabelherausforderungen'
-date: '2025-11-05T10:16:10'
+date: '2025-01-05T10:16:10'
 featuredImage: /uploads/2025/04/image_fx_-2025-02-20T193520.620.webp
 locale: de
 category: Kabel Technologie
@@ -81,11 +81,13 @@ title="Wann klagt der NABU gegen Windkraftprojekte?"
 summary="45 Klagen wurden wegen Fehlplanungen bei Windenergie zwischen 2010 und 2019 vom NABU auf den Weg gebracht. Nicht weil der Windenergieausbau aufgehalten werden soll, sondern weil immer wieder Vorhaben und Planungen eklatant gegen Naturschutzrecht verstoßen."
 image="https://www.nabu.de/imperia/md/nabu/images/umwelt/energie/energietraeger/windkraft/161125-nabu-windrad-allgaeu-heidrun-burchard.jpeg"
 />
+<AnimatedImage src="/uploads/2025/02/image_fx_-7.webp" alt="Windpark Baustelle" width={1408} height={768} />
+
 ## Qualität und Nachhaltigkeit als Erfolgsfaktor
 Neben Zeit und Logistik spielt auch die [**Kabelqualität**](https://www.windkraft-journal.de/2025/07/14/planungsempfehlung-bei-der-verkabelung-von-windparks-durch-wind-turbine-com/214028) eine entscheidende Rolle für die langfristige Performance eines **Windparks**. Schließlich sollen die installierten **[Mittelspannungs](/de/stromkabel/mittelspannungskabel/)– und [Hochspannungskabel](/de/stromkabel/hochspannungskabel/)** über Jahrzehnte zuverlässig Energie übertragen – selbst unter extremen Witterungsbedingungen und wechselnden Lastzyklen.
 Ein hochwertiges **Kabelsystem für Windkraftanlagen** zeichnet sich durch mehrere Faktoren aus:
 - **Materialqualität:** VPE-isolierte Kabel wie [**NA2XS(F)2Y** ](/de/products/medium-voltage-cables/na2xsf2y/)oder [**N2XS(F)2Y**](/de/products/medium-voltage-cables/n2xsf2y/) bieten hohe elektrische Festigkeit und exzellenten Langzeitschutz.
-- **[Normkonformität](https://www.zvei.org/fileadmin/user_upload/Presse_und_Medien/Publikationen/2017/September/ZVEI_Leitfaden_Kabel_und_Leitungen_in_Windkraftanlagen/ZVEI-Leitfaden-Kabel-und-Leitungen-in-Windkraftanlagen-September-2017.pdf):** Alle eingesetzten Komponenten sollten den einschlägigen Normen wie **DIN VDE 0276**, **VDE 0298** oder **IEC 60502** entsprechen.
+- **Normkonformität (PDF):** [Alle eingesetzten Komponenten sollten den einschlägigen Normen](https://www.zvei.org/fileadmin/user_upload/Presse_und_Medien/Publikationen/2017/September/ZVEI_Leitfaden_Kabel_und_Leitungen_in_Windkraftanlagen/ZVEI-Leitfaden-Kabel-und-Leitungen-in-Windkraftanlagen-September-2017.pdf) wie **DIN VDE 0276**, **VDE 0298** oder **IEC 60502** entsprechen.
 - **Montagefreundlichkeit:** Die Kabelkonstruktion muss so ausgelegt sein, dass sie sich effizient und sicher verlegen lässt – auch bei schwierigen Bodenbedingungen.
 - **Umweltaspekte:** Recyclingfähige Materialien und die [Wiederverwendung von Trommeln oder Leitermaterialien](/de/recycling-von-kabeltrommeln-nachhaltigkeit-im-windkraftprojekt/) reduzieren den ökologischen Fußabdruck.
 
@@ -93,6 +95,8 @@ Immer mehr Projektentwickler legen Wert auf **nachhaltige Kabelsysteme**, die En
 Die Kombination aus **technischer Qualität**, **ökologischer Verantwortung** und **effizienter Logistik** macht moderne **Windparkverkabelung** zu einem zentralen Erfolgsfaktor im Netzausbau. Wer hier auf durchdachte Lösungen setzt, schafft die Basis für einen stabilen und nachhaltigen Energiefluss – heute und in Zukunft.
 [Welche Kabel Sie für Ihr Windparkprojekt brauchen und welche Unterschiede es gibt, erklären wir Ihnen hier.](/de/welche-kabel-fuer-windkraft-unterschiede-von-nieder-bis-hoechstspannung-erklaert/)
 
+<AnimatedImage src="/uploads/2025/01/offshore-wind-power-and-energy-farm-with-many-wind-2023-11-27-04-51-29-utc-scaled.webp" alt="Windpark Landschaft" width={2560} height={1707} />
+
 ## Fazit: Erfolgreich ans Netz
 Die Verkabelung ist das Rückgrat jedes **Windparks** – und gleichzeitig einer der sensibelsten Projektbereiche. Enge Zeitpläne, komplexe Logistik und spontane Änderungen sind dabei keine Ausnahme, sondern Alltag. Wer diese Herausforderungen frühzeitig erkennt und gezielt plant, verhindert Stillstand, Kostensteigerungen und Terminverschiebungen.
 Erfolgreiche **Windpark-Kabelprojekte** zeichnen sich durch drei Dinge aus:
@@ -106,4 +110,4 @@ Ob [**Mittelspannung**](/de/stromkabel/mittelspannungskabel/), **Erdkabel** oder
 Unser Vorteil liegt in der **Praxisnähe**: Wir wissen, wie eng Bauzeiten im Windparkbau sind, welche Kabelsysteme sich bewährt haben und worauf es bei der Logistik wirklich ankommt. Durch unsere **Lagerkapazitäten in der Mitte Deutschlands** reagieren wir schnell auf Änderungen und halten Lieferketten stabil – auch wenn Projekte dynamisch verlaufen.
 Mit unserem Netzwerk, unserer Marktkenntnis und unserer Leidenschaft für erneuerbare Energien sorgen wir dafür, dass Ihr **Windkraftprojekt** pünktlich und reibungslos ans Netz geht.
 ➡️ **Planen Sie ein neues Windparkprojekt oder benötigen Unterstützung bei der Kabelauswahl?**Dann sprechen Sie uns an – wir liefern die **Kabel, Lösungen und Erfahrung**, die Ihr Projekt erfolgreich machen.
-[Jetzt Kontakt aufnehmen](/de/contact/)
+[Jetzt Kontakt aufnehmen](/de/kontakt/)

data/blog/en/focus-on-wind-farm-construction-three-typical-cable-challenges.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Focus on wind farm construction: three typical cable challenges'
-date: '2025-11-05T10:16:15'
+date: '2025-01-05T10:16:15'
 featuredImage: /uploads/2025/04/image_fx_-2025-02-20T193520.620.webp
 locale: en
 category: Kabel Technologie
@@ -28,21 +28,14 @@ In this article, we look at the** 3 biggest challenges in wind farm construction
 
 Find out why onshore wind farms are a crucial pillar of the energy transition here:
 
-<VisualLinkPreview 
-  url="
-<VisualLinkPreview 
+<VisualLinkPreview
   url="https://www.enbw.com/unternehmen/themen/windkraft/onshore-wind-pfeiler-der-energiewende.html"
   title="Onshore-Windenergie als Pfeiler der Energiewende | EnBW"
   summary="Viele Faktoren haben den Bau von Windenergieanlagen in den letzten Jahren gebremst. Lesen Sie hier die Gründe!"
   image="https://www.enbw.com/media/image-proxy/1600x914,q70,focus50x49,zoom1.0/https://www.enbw.com/media/presse/images/newsroom/onshore-windpark-langenburg-7zu4_1701415033580.jpg"
 />
-"
-  title="Onshore-Windenergie als Pfeiler der Energiewende | EnBW"
-  summary="Viele Faktoren haben den Bau von Windenergieanlagen in den letzten Jahren gebremst. Lesen Sie hier die Gründe!"
-  image="https://www.enbw.com/media/image-proxy/1600x914,q70,focus50x49,zoom1.0/https://www.enbw.com/media/presse/images/newsroom/onshore-windpark-langenburg-7zu4_1701415033580.jpg"
-/>
 
-<AnimatedImage src="/uploads/2025/04/image_fx_-7.webp" alt="Wind farm construction site" width={1408} height={768} />
+<AnimatedImage src="/uploads/2025/02/image_fx_-7.webp" alt="Wind farm construction site" width={1408} height={768} />
 
 ## Challenge 1: Tight construction timelines and fixed deadlines
 
@@ -70,19 +63,12 @@ With precise [**cable capacity**](https://www.a-eberle.de/infobrief/infobrief-20
 
 Want to know which cable types are used in wind farms? Check out this article:
 
-<VisualLinkPreview 
-  url="
-<VisualLinkPreview 
+<VisualLinkPreview
   url="https://wind-turbine.com/magazin/ratgeber/250713/welche-arten-von-kabeln-benoetigt-man-fuer-den-bau-eines-windparks.html"
   title="Welche Arten von Kabeln benötigt man für den Bau eines Windparks?"
   summary="Die Verkabelung ist ein zentrales Element jeder Windkraftanlage und beeinflusst maßgeblich die Effizienz, Sicherheit und Wirtschaftlichkeit eines Windparks.…"
   image="https://wind-turbine.com/i/53689/68738caa5e58ffdf06031cf2/2/1200/630/68738c85497af_KabelfreinenWindparkpng.png"
 />
-"
-  title="Welche Arten von Kabeln benötigt man für den Bau eines Windparks?"
-  summary="Die Verkabelung ist ein zentrales Element jeder Windkraftanlage und beeinflusst maßgeblich die Effizienz, Sicherheit und Wirtschaftlichkeit eines Windparks.…"
-  image="https://wind-turbine.com/i/53689/68738caa5e58ffdf06031cf2/2/1200/630/68738c85497af_KabelfreinenWindparkpng.png"
-/>
 
 ## Challenge 2: Large delivery volumes and specialized packaging
 
@@ -109,7 +95,7 @@ A clear [**cable logistics strategy**](https://logistik-heute.de/galerien/mammut
 
 Anyone who integrates **packaging, storage and labeling** early into the planning process ensures that the **wind farm cables** arrive exactly where they&#8217;re needed – with no time lost and no disruption to the construction flow.
 
-<AnimatedImage src="/uploads/2025/08/NA2XSF2Y_3x1x300_RM-25_12-20kV-0.webp" alt="NA2XSF2Y Cable" width={1920} height={1080} />
+<AnimatedImage src="/uploads/2025/08/NA2XSF2X_3x1x300_RM-25_12-20kV-3.webp" alt="NA2XSF2Y Cable" width={1920} height={1080} />
 
 ## Challenge 3: Last-minute project changes
 
@@ -132,19 +118,12 @@ Short-term changes aren’t the exception – they’re part of everyday life in
 
 Avoid delays or issues during your wind power project by understanding early on why NABU may file objections to certain sites:
 
-<VisualLinkPreview 
-  url="
-<VisualLinkPreview 
+<VisualLinkPreview
   url="https://www.nabu.de/umwelt-und-ressourcen/energie/erneuerbare-energien-energiewende/windenergie/26913.html"
   title="Wann klagt der NABU gegen Windkraftprojekte?"
   summary="45 Klagen wurden wegen Fehlplanungen bei Windenergie zwischen 2010 und 2019 vom NABU auf den Weg gebracht. Nicht weil der Windenergieausbau aufgehalten werden soll, sondern weil immer wieder Vorhaben und Planungen eklatant gegen Naturschutzrecht verstoßen."
   image="https://www.nabu.de/imperia/md/nabu/images/umwelt/energie/energietraeger/windkraft/161125-nabu-windrad-allgaeu-heidrun-burchard.jpeg"
 />
-"
-  title="Wann klagt der NABU gegen Windkraftprojekte?"
-  summary="45 Klagen wurden wegen Fehlplanungen bei Windenergie zwischen 2010 und 2019 vom NABU auf den Weg gebracht. Nicht weil der Windenergieausbau aufgehalten werden soll, sondern weil immer wieder Vorhaben und Planungen eklatant gegen Naturschutzrecht verstoßen."
-  image="https://www.nabu.de/imperia/md/nabu/images/umwelt/energie/energietraeger/windkraft/161125-nabu-windrad-allgaeu-heidrun-burchard.jpeg"
-/>
 
 ## Quality and sustainability as success factors
 
@@ -152,7 +131,7 @@ In addition to time and logistics, [**cable quality**](https://www.windkraft-jou
 
 A high-quality **cable system for wind power** stands out due to several factors:
 - **Material quality:** XLPE-insulated cables like [**NA2XS(F)2Y**](/en/products/medium-voltage-cables/na2xsf2y/) or [**N2XS(F)2Y**](/en/products/medium-voltage-cables/n2xsf2y/) provide high dielectric strength and excellent long-term protection.
-- **[Standards compliance](https://www.zvei.org/fileadmin/user_upload/Presse_und_Medien/Publikationen/2017/September/ZVEI_Leitfaden_Kabel_und_Leitungen_in_Windkraftanlagen/ZVEI-Leitfaden-Kabel-und-Leitungen-in-Windkraftanlagen-September-2017.pdf):** All components used should meet key standards such as **DIN VDE 0276**, **VDE 0298**, or **IEC 60502**.
+- **Standards compliance (PDF):** [All components used should meet key standards](https://www.zvei.org/fileadmin/user_upload/Presse_und_Medien/Publikationen/2017/September/ZVEI_Leitfaden_Kabel_und_Leitungen_in_Windkraftanlagen/ZVEI-Leitfaden-Kabel-und-Leitungen-in-Windkraftanlagen-September-2017.pdf) such as **DIN VDE 0276**, **VDE 0298**, or **IEC 60502**.
 - **Ease of installation:** Cable design must allow for efficient and safe installation – even under difficult ground conditions.
 - **Environmental aspects:** Recyclable materials and the [reuse of drums or conductor materials](/de/recycling-von-kabeltrommeln-nachhaltigkeit-im-windkraftprojekt/) help reduce ecological footprint.
 
@@ -162,7 +141,7 @@ The combination of **technical quality**, **ecological responsibility**, and **e
 
 [Find out here which cables are suitable for your wind farm project and what makes the difference between low and high voltage options.](/de/welche-kabel-fuer-windkraft-unterschiede-von-nieder-bis-hoechstspannung-erklaert/)
 
-<AnimatedImage src="/uploads/2025/01/green-alternative-eco-friendly-energy-windmill-tu-2023-11-27-05-10-51-utc-scaled.webp" alt="Wind farm landscape" width={2560} height={1707} />
+<AnimatedImage src="/uploads/2025/01/offshore-wind-power-and-energy-farm-with-many-wind-2023-11-27-04-51-29-utc-scaled.webp" alt="Wind farm landscape" width={2560} height={1707} />
 
 ## Conclusion: Successfully connected to the grid
 

data/pages/de/agbs.mdx

@@ -1,93 +1,115 @@
 ---
-title: Terms – Deutsch
-excerpt: >-
-  [vc_column column_padding=”no-extra-padding”
-  column_padding_tablet=”inherit”
-  column_padding_phone=”inherit”
-  column_padding_position=”all”
-  column_element_direction_desktop=”default”
-  column_element_spacing=”default”
-  desktop_text_alignment=”default”
-  tablet_text_alignment=”default”
-  phone_text_alignment=”default”
-  background_color_opacity=”1″
-  background_hover_color_opacity=”1″
-  column_backdrop_filter=”none”
-  column_shadow=”none”…
+title: AGB
+excerpt: Liefer- und Zahlungsbedingungen der KLZ Vertriebs GmbH.
 featuredImage: null
 locale: de
 ---
-# Terms – Deutsch
 
-<h1 class="p1">Liefer- und Zahlungsbedingungen</h1>
-<p class="p1">Stand November 2024</p>
+*Stand Januar 2026*
 
-<h3 class="p1"><span class="s1">1.</span> Allgemeines</h3>
-<p class="p2">Diese Liefer- und Zahlungsbedingungen (L&amp;Z) der KLZ Vertriebs GmbH gelten ausschließlich; entgegenstehende oder von unseren Bedingungen abweichende Bedingungen des Kunden erkennen wir nicht an, es sei denn, wir hätten ausdrücklich schriftlich ihrer Geltung zugestimmt. Unsere L&amp;Z gelten auch dann, wenn wir in Kenntnis entgegenstehender oder von unseren L&amp;Z abweichender Bedingungen des Bestellers die Lieferung an diesen vorbehaltlos ausführen. Unsere L&amp;Z gelten nur gegenüber Unternehmern im Sinn von § 310 Abs. 1 BGB sowie juristischen Personen des <span class="s3">öffentlichen </span>Rechts oder öffentlich-rechtliches Sondervermögen.</p>
-<p class="p2">Nebenabreden, Vorbehalte, Änderungen, Ergänzungen usw. bedürfen zu ihrer Wirksamkeit unserer schriftlichen Bestätigung.</p>
-<p class="p2">Hinweise auf die Geltung gesetzlicher Vorschriften haben nur klarstellende Bedeutung. Auch ohne eine derartige Klarstellung gelten daher die gesetzlichen Vorschriften, soweit sie in diesen L&amp;Z nicht unmittelbar abgeändert oder <span class="s3">ausdrücklich </span>ausgeschlossen werden.</p>
+## 1. Allgemeines
 
-<h3 class="p1"><span class="s1">2.</span> Angebote</h3>
-<p class="p1">Sofern nicht ausdrücklich als bindend bezeichnet, sind unsere Angebote freibleibend; die Bestellung des <span class="s2">Kunden ist </span>als Angebot gemäß § 145 BGB zu qualifizieren.</p>
+Diese Liefer- und Zahlungsbedingungen (L&Z) der KLZ Vertriebs GmbH gelten ausschließlich; entgegenstehende oder von unseren Bedingungen abweichende Bedingungen des Kunden erkennen wir nicht an, es sei denn, wir hätten ausdrücklich schriftlich ihrer Geltung zugestimmt. Unsere L&Z gelten auch dann, wenn wir in Kenntnis entgegenstehender oder von unseren L&Z abweichender Bedingungen des Bestellers die Lieferung an diesen vorbehaltlos ausführen. Unsere L&Z gelten nur gegenüber Unternehmern im Sinn von § 310 Abs. 1 BGB sowie juristischen Personen des öffentlichen Rechts oder öffentlich-rechtliches Sondervermögen.
 
-<h3 class="p1"><span class="s1">3.</span> Preise</h3>
-<p class="p1">Alle von uns genannten Preise verstehen sich zzgl. der jeweiligen gesetzlichen Mehrwertsteuer vor Metallzuschlag fracht- frei innerhalb der Bundesrepublik Deutschland (Festland), jedoch ohne Abladen. Die Verkaufspreise, soweit sie als Hohlpreis deklariert sind, enthalten keinerlei Metallwerte. Diese werden zusätzlich separat berechnet.</p>
+Nebenabreden, Vorbehalte, Änderungen, Ergänzungen usw. bedürfen zu ihrer Wirksamkeit unserer schriftlichen Bestätigung.
 
-<h3 class="p1"><span class="s1">4.</span> Metallnotierung</h3>
-<p class="p2">Basis zur Kupferabrechnung ist die Notierung &#8220;LME Copper official price cash offer&#8221;, Durchschnitt des Liefervormonats zuzüglich der dann aktuellen von uns benannten Kupfer-Prämie.</p>
-<p class="p2">Basis zur Aluminiumabrechnung ist die Notierung &#8220;LME Aluminium official price cash offer&#8221;, Durchschnitt des Liefervormonats zuzüglich der dann von uns benannten Aluminium-Prämie. USD werden auf Basis des EUR/USD LME-FX-Rate (MTLE) in EUR umgerechnet. Die entsprechenden Notierungen können Sie der Web-Seite www.westmetall.com entnehmen. Die Prämienzuschläge können stark variieren und KLZ behält sich das Recht vor, diese fristgerecht anzupassen, ungeachtet der Angebotslegung.</p>
+Hinweise auf die Geltung gesetzlicher Vorschriften haben nur klarstellende Bedeutung. Auch ohne eine derartige Klarstellung gelten daher die gesetzlichen Vorschriften, soweit sie in diesen L&Z nicht unmittelbar abgeändert oder ausdrücklich ausgeschlossen werden.
 
-<h3 class="p1"><span class="s1">5.</span> Metallzahl</h3>
-<p class="p2">Die von uns ausgewiesene Metallzahl ist eine rein kaufmännische Berechnungsgröße für den Metallinhalt, die in die Berechnung des Gesamtpreises eines Kabels eingeht. Damit entsprechen wir Ihrem Wunsch eine Vergleichbarkeit in ihrem System auf Hohlpreisbasis zu ermöglichen. Die Metallzahl gibt damit nicht das Gewicht des tatsächlich im Kabel enthaltenen Leitermetalls an. Sie ist ein rein kalkulatorischer Berechnungsfaktor, der jedoch keine unmittelbaren Rückschlüsse auf die im Kabel verwendeten Kupfer- bzw. Aluminiummengen zulässt. Wir weisen ausdrücklich darauf hin, final nur den Vollpreis für Vergleichszwecke heranzuziehen. Soweit Sie es wünschen andere Metallzahlen zu Grunde zu legen, sind wir gerne dazu bereit, das Angebot in den Bestandteilen umzurechnen. Bei jeglicher Änderung bleibt aber der Vollpreis der gleiche Betrag.</p>
+## 2. Angebote
 
-<h3 class="p1"><span class="s1">6.</span> Auftragsänderung / Auftragsstorno</h3>
-<p class="p2">Nach Auftragsbestätigung werden Änderungen an bestätigten Aufträgen nur nach Prüfung und gesonderter ausdrücklicher Zustimmung durch uns akzeptiert. Wir behalten uns bei allen Auftragsänderungen das Recht vor, einen durch die Änderung entstandenen Mehraufwand, wie z.B. Bearbeitungskosten oder Entsorgungskosten in Rech<span class="s2">nung zu stellen.</span></p>
+Sofern nicht ausdrücklich als bindend bezeichnet, sind unsere Angebote freibleibend; die Bestellung des Kunden ist als Angebot gemäß § 145 BGB zu qualifizieren.
 
-<h3 class="p1"><span class="s1">7.</span> Eigentumsvorbehalt</h3>
-<p class="p2">Wir behalten uns an den von uns gelieferten Waren – nachfolgend: Vorbehaltsware – bis zur vollständigen Begleichung aller unserer Forderungen aus den Geschäftsbeziehungen mit dem Besteller, das Eigentum vor. Der Eigentumsvorbehalt bleibt auch dann bestehen, wenn einzelne Forderungen in eine laufende Rechnung aufgenommen <span class="s2">werden (Kontokorrentvorbehalt).</span></p>
+## 3. Preise
 
-<h3 class="p1"><span class="s1">8. </span>Zahlungsbedingungen <span class="s3">| </span>Aufrechnung <span class="s3">| </span>Zurückbehaltungsrechte</h3>
-<p class="p2">Unsere Rechnungen sind 14 Tage nach Rechnungsdatum ohne jeden Abzug zahlbar. Bei Nichteinhaltung der vereinbarten Zahlungsbedingungen sind wir berechtigt, Zinsen in Höhe von 7 %-Punkten <span class="s4">über dem </span>Basiszinssatz zu berechnen; das Recht zur Geltendmachung weitergehender Schäden, insbesondere <span class="s5">nachgewiesener </span>höherer Zinsen, bleibt hiervon unberührt.</p>
+Die Preise gelten für den in unseren Angeboten und Auftragsbestätigungen aufgeführten Leistungs- und Lieferumfang. Mehrleistungen werden gesondert berechnet. Die Hohlpreise verstehen sich in Euro zuzüglich Metallzuschlag, gegebenenfalls Verpackung, auftragsspezifischer Schnittkosten und der gesetzlichen Mehrwertsteuer.
 
-<h3 class="p1"><span class="s1">9.</span> Liefervorbehalt <span class="s3">|</span> Teillieferungen</h3>
-<p class="p2">Sämtliche Lieferzusagen unsererseits stehen, sofern nichts anderes ausdrücklich schriftlich vereinbart ist, unter dem Vorbehalt der richtigen und rechtzeitigen Belieferung durch unsere Produzenten. Wir behalten uns jederzeit Teillieferungen vor. Darüber hinaus behalten wir uns branchenübliche Über- oder Unter<span class="s4">lieferungen </span>bis zu 10 % der bestellten Menge vor.</p>
+## 4. Metallnotierung
 
-<h3 class="p1"><span class="s1">10.</span> Lieferfristen und Liefertermine</h3>
-<p class="p2">Die Lieferfrist wird individuell vereinbart bzw. von uns bei Annahme der Bestellung angegeben. Sofern wir verbindliche Lieferfristen aus Gründen, die wir nicht zu vertreten haben, nicht einhalten können (Nichtverfügbarkeit der Leistung), werden wir den Besteller hierüber unverzüglich informieren und gleichzeitig die voraussichtliche, neue Lieferfrist mitteilen. Ist die Leistung auch innerhalb der neuen Lieferfrist nicht verfügbar, sind wir berechtigt, ganz oder teilweise vom Vertrag zurückzutreten. Eine bereits erbrachte Gegenleistung des Bestellers werden wir unverzüglich erstatten. Nichtverfügbarkeit der Leistung liegt beispielsweise vor bei nicht recht- zeitiger Selbstbelieferung durch unseren Zulieferer, wenn wir ein kongruentes Deckungsgeschäft abgeschlossen haben, bei sonstigen Störungen in der Lieferkette etwa aufgrund höherer Gewalt oder wenn wir im Einzelfall zur <span class="s3">Beschaffung nicht verpflichtet sind.</span></p>
-<p class="p2">Der Eintritt unseres Lieferverzugs bestimmt sich nach den gesetzlichen Vorschriften. In jedem Fall ist aber eine <span class="s3">Mahnung durch </span>den Käufer erforderlich.</p>
-<p class="p2">Die gesetzlichen Rechte bleiben im Übrigen unberührt.</p>
-<p class="p2">Fixgeschäfte setzen die ausdrückliche schriftliche Bezeichnung als solche voraus. Ansonsten ist der Besteller <span class="s4">stets </span>verpflichtet, uns schriftlich eine angemessene Nachfrist zu setzen, wenn von uns zugesagte Termine und/ oder Fristen nicht eingehalten werden. Wird auch die Nachfrist nicht eingehalten, ist der Besteller berechtigt, vom <span class="s3">Vertrag zurückzutreten.</span></p>
-<p class="p2">Im Fall höherer Gewalt und/oder sonstiger von uns nicht vorhersehbarer außergewöhnlicher und/oder unverschul<span class="s3">deter </span>Umstände, auch wenn sie bei unserem Vorlieferanten eintreten, verlängert sich eine von uns zugesagte <span class="s4">Lieferfrist bis zur </span>Behebung des vorerwähnten Ereignisses. Ist dieser Zeitpunkt nicht überblickbar, sind sowohl der Besteller als auch wir berechtigt, von dem abgeschlossenen Vertrag zurückzutreten. In diesem Fall sind beiderseits <span class="s3">Schadensersatzansprüche </span>ausgeschlossen. Wir verpflichten uns, bei Bekanntwerden vorerwähnter Umstände <span class="s4">den</span> <span class="s4">Besteller</span> <span class="s4">hiervon</span> <span class="s4">unverzüglich</span> <span class="s4">zu </span>benachrichtigen.</p>
-<p class="p2">Ist die Einhaltung eines Termins davon abhängig, dass uns seitens des Bestellers bestimmte Angaben und/oder Pläne, Freigabeerklärungen oder ähnliches erteilt werden, beginnt die Lieferfrist erst von dem Zeitpunkt an zu lau- fen, zu dem uns die vollständigen Angaben des Bestellers schriftlich vorliegen. Wird die Anlieferung auf Wunsch des Bestellers über den vertraglich vorgesehenen Zeitpunkt hinausgeschoben, kann von uns beginnend mit einer Frist von frühestens 10 Werktagen nach Anzeige der Versandbereitschaft dem Besteller ein Lagergeld in Höhe von 2 % des Rechnungsbetrages für jeden angefangenen Monat, maximal jedoch <span class="s3">10 % insgesamt berechnet werden.</span></p>
+Basis zur Kupferabrechnung ist die Notierung „LME Copper official price cash offer“, Durchschnitt des Liefervormonats zuzüglich der dann aktuellen von uns benannten Kupfer-Prämie.
+Basis zur Aluminiumabrechnung ist die Notierung „LME Aluminium official price cash offer“, Durchschnitt des Liefervormonats zuzüglich der dann von uns benannten Aluminium-Prämie. USD werden auf Basis des EUR/USD LME-FX-Rate (MTLE) in EUR umgerechnet. Die entsprechenden Notierungen können Sie der Web-Seite [www.westmetall.com](https://www.westmetall.com) entnehmen. Die Prämienzuschläge können stark variieren und KLZ behält sich das Recht vor, diese fristgerecht anzupassen, ungeachtet der Angebotslegung.
 
-<h3 class="p1"><span class="s1">11.</span> Abrufaufträge</h3>
-<p class="p2">Wird uns ein Abrufauftrag erteilt und werden über die Abruftermine keine gesonderten schriftlichen Vereinbarungen getroffen, ist der Besteller verpflichtet, uns die einzelnen Abruftermine so mitzuteilen, dass zwischen Eingang der Abrufmitteilung bei uns und Auslieferung mindestens 14 Werktage und die letzte Auslieferung spätestens 90 <span class="s2">Tage nach unserer Auftragsbestätigung </span>liegt.</p>
+## 5. Metallzahl
 
-<h3 class="p1"><span class="s1">12.</span> Maß- und Gewichtsangaben</h3>
-<p class="p2">Alle Angaben über Durchmesser, Gewicht, technische Gestaltung, Herstellung und Umfang der von uns zu liefernden <span class="s3">Ware stehen </span>unter dem Vorbehalt der Abweichung innerhalb der handelsüblichen zulässigen Toleranzen. Darüber hinaus behalten wir uns Änderungen, die einer technischen Verbesserung dienen, jederzeit vor. Farbabweichungen und/oder Abweichungen in der äußeren Beschaffenheit der von uns zu liefernden Ware, die jedoch deren Qualität und technische Wirksamkeit unbeeinflusst lässt, begründen keine Mängelhaftungsansprüche des Bestellers.</p>
+Die von uns ausgewiesene Metallzahl ist eine rein kaufmännische Berechnungsgröße für den Metallinhalt, die in die Berechnung des Gesamtpreises eines Kabels eingeht. Damit entsprechen wir Ihrem Wunsch eine Vergleichbarkeit in ihrem System auf Hohlpreisbasis zu ermöglichen. Die Metallzahl gibt damit nicht das Gewicht des tatsächlich im Kabel enthaltenen Leitermetalls an. Sie ist ein rein kalkulatorischer Berechnungsfaktor, der jedoch keine unmittelbaren Rückschlüsse auf die im Kabel verwendeten Kupfer- bzw. Aluminiummengen zulässt. Wir weisen ausdrücklich darauf hin, final nur den Vollpreis für Vergleichszwecke heranzuziehen. Soweit Sie es wünschen andere Metallzahlen zu Grunde zu legen, sind wir gerne dazu bereit, das Angebot in den Bestandteilen umzurechnen. Bei jeglicher Änderung bleibt aber der Vollpreis der gleiche Betrag.
 
-<h3 class="p1"><span class="s1">13.</span> Gefahrübergang und -tragung</h3>
-<p class="p2">Die Lieferung erfolgt DAP frei Bestimmungsort Deutschland, wo auch der Erfüllungsort für die Lieferung und eine etwaige Nacherfüllung ist.</p>
-<p class="p2">Wird die bestellte Ware von uns versandbereit gestellt und/oder verzögert sich die Versendung und/oder der Abruf aus Gründen, die vom Besteller zu vertreten sind, sind wir berechtigt, Ersatz des hieraus entstehenden Schadens einschließlich Mehraufwendungen zu verlangen. Hierfür berechnen wir eine pauschale Entschädigung i.H.v 2% des Rechnungsbetrages für jeden angefangenen Monat, maximal jedoch 10 % insgesamt beginnend mit der Lieferfrist bzw. – mangels einer Lieferfrist – mit der Mitteilung der Versandbereitschaft der Ware.</p>
-<p class="p2">Der Nachweis eines höheren Schadens und unsere gesetzlichen Ansprüche (insbesondere Ersatz von Mehraufwendungen, angemessene Entschädigung, Kündigung) bleiben unberührt; die Pauschale ist aber auf weitergehende Geldansprüche anzurechnen. Dem Besteller bleibt der Nachweis gestattet, dass uns überhaupt kein oder nur ein <span class="s3">wesentlich geringerer Schaden </span>als vorstehende Pauschale entstanden ist. Rücksendungen an uns, die nicht vorher von uns schriftlich bestätigt worden sind, erfolgen auf alleinige Gefahr des <span class="s4">Bestellers.</span></p>
+## 6. Auftragsänderung / Auftragsstorno
 
-<h3 class="p1"><span class="s1">14.</span> Mängelhaftung</h3>
-<p class="p2">Wir haften nur dann für die Einhaltung objektiver Anforderungen an der Ware, wenn und soweit zwischen dem Besteller und uns keine Beschaffenheitsvereinbarung getroffen wurde. Die einzuhaltenden subjektiven Anforderungen gehen den einzuhaltenden objektiven Anforderungen vor. Im Zweifel ergeben sich die vereinbarten Anforderungen <span class="s3">an die Ware aus dem von uns </span>bereitgestellten Datenblatt. Einzelne, nicht immer auszuschließende marginale Abweichungen, dürfen durch Reparaturen, wie zum Beispiel Mantelmanschetten nachgebessert werden.</p>
-<p class="p2">Jedwede Mängelhaftungsansprüche des Bestellers setzen voraus, dass dieser die ihm übersandte Ware unverzüglich, d. h. in der Regel sofort bei Anlieferung (noch in Anwesenheit des Transporteurs) auf ihre ordnungsgemäße Beschaffenheit hin überprüft und uns zu verzeichnende sichtbare Mängel unmittelbar nach Erhalt der Ware und verdeckte Mängel unmittelbar nach deren Feststellung schriftlich mitteilt. Soweit ein rechtzeitig gerügter, nicht nur unerheblicher Mangel der Kaufsache vorliegt, sind wir nach unserer Wahl zur Mangelbeseitigung oder zur Ersatz<span class="s3">lieferung (Nacherfüllung) berechtigt.</span></p>
-<p class="p2">Wir übernehmen im Rahmen der Nacherfüllung in keinem Fall Ein- oder Ausbaukosten, wenn und soweit die Mangelhaftigkeit der Ware zum Zeitpunkt des Einbaus dem Besteller bekannt oder grob fahrlässig unbekannt geblieben <span class="s4">ist.</span></p>
-<p class="p2">Sind wir zur Mangelbeseitigung/Ersatzlieferung nicht bereit oder nicht in der Lage oder verzögert sich diese über angemessene Fristen hinaus aus Gründen, die wir zu vertreten haben, oder schlägt sie in sonstiger Weise fehl, so ist der Besteller nach seiner Wahl berechtigt, vom Vertrag zurückzutreten oder eine entsprechende Minderung des <span class="s3">Kaufpreises zu verlangen.</span></p>
-<p class="p2">Weitergehende Ansprüche des Bestellers, gleich aus welchem Rechtsgrund, sind nach näherer Maßgabe der Regelungen in nachstehender Ziffer 15 ausgeschlossen bzw. beschränkt.</p>
-<p class="p1">Die Verjährungsfristen für Mängelhaftungsansprüche beträgt 24 Monate ab Übergabe der Ware.</p>
-<p class="p1">Sollte es bei einer Mängelrüge zu unterschiedlichen Meinungen bezüglich des Kabelschaden kommen, gilt hier im Zweifelsfall nur die Expertise des VDE-Instituts selbst. Andere, auch akkreditierte Testlabore, akzeptieren wir nicht. Wir weisen ausdrücklich daraufhin, dass beim Verlegen des Kabels in den Graben oder in Rohren, bzw. in Bauwerke eine ständige Sichtkontrolle durch den Kabelverleger vorzunehmen ist, ob Auffälligkeiten zu vermerken sind. Eine spätere Reklamation, die fahrlässiges Verhalten vermuten lässt, schränkt sich damit ein.</p>
+Nach Auftragsbestätigung werden Änderungen an bestätigten Aufträgen nur nach Prüfung und gesonderter ausdrücklicher Zustimmung durch uns akzeptiert. Wir behalten uns bei allen Auftragsänderungen das Recht vor, einen durch die Änderung entstandenen Mehraufwand, wie z.B. Bearbeitungskosten oder Entsorgungskosten in Rechnung zu stellen.
 
-<h3 class="p1"><span class="s1">15.</span> Schadenersatz <span class="s3">| </span>Gesamthaftung</h3>
-<p class="p2">Wir haften unbeschränkt nur für Vorsatz und grobe Fahrlässigkeit sowie für Schäden aus einer Verletzung von Leben, Körper oder Gesundheit, die auf mindestens fahrlässiger Pflichtverletzung unsererseits oder unserer gesetzlichen Vertreter oder Erfüllungsgehilfen beruhen; ebenso haften wir unbeschränkt im Fall von uns übernommenen bzw. abgegebenen Garantien und Zusicherungen, sofern ein davon umfasster Mangel unsere Haftung auslöst sowie im Fall einer Haftung nach dem Produkthaftungsgesetz oder sonstigen Gefährdungshaftungstatbeständen. Im Fall sonstiger schuldhafter Verletzung wesentlicher Vertragspflichten („Kardinalpflichten“) ist unsere verbleibende Haftung auf den vertragstypischen vorhersehbaren Schaden beschränkt. Mangelfolgeschäden sowie entgangener Gewinn schließen wir grundsätzlich aus.</p>
+## 7. Eigentumsvorbehalt
 
-<h3 class="p1"><span class="s1">16.</span> Kabeltrommeln</h3>
-<p class="p2">Unsere Kabel werden auf stabilen Vollholztrommeln geliefert. Auf Wunsch vermitteln wir Ihnen Partner, die diese Trommeln gegen eine Gebühr abholen.</p>
+Wir behalten uns an den von uns gelieferten Waren – nachfolgend: Vorbehaltsware – bis zur vollständigen Begleichung aller unserer Forderungen aus den Geschäftsbeziehungen mit dem Besteller, das Eigentum vor. Der Eigentumsvorbehalt bleibt auch dann bestehen, wenn einzelne Forderungen in eine laufende Rechnung aufgenommen werden (Kontokorrentvorbehalt).
 
-<h3 class="p1"><span class="s1">17.</span> Sonstiges</h3>
-<p class="p2">Es gilt ausschließlich das Recht der Bundesrepublik Deutschland unter Ausschluss des UN-Kaufrechts (CISG). Gerichtsstand ist nach unserer Wahl Stuttgart, der Erfüllungsort der Lieferverpflichtung oder das für den Sitz des Bestellers zuständige Gericht, sofern der Besteller Kaufmann, juristische Person des öffentlichen Rechts oder öffentlich-rechtliches Sondervermögen ist oder keinen allgemeinen Gerichtsstand im Inland hat.</p>
-<p class="p2">Mit der Veröffentlichung der vorliegenden L&amp;Z im Internet werden alle von uns früher verwendeten Bedingungen gegenstandslos.</p>
+## 8. Zahlungsbedingungen | Aufrechnung | Zurückbehaltungsrechte
 
-<p class="p1"><a href="/uploads/2025/01/agbs.pdf">Download als PDF</a></p>
+Unsere Rechnungen sind 10 Tage nach Rechnungsdatum ohne jeden Abzug zahlbar. Rechnungsstellung bzw. Datum ist grundsätzlich der Tag der Übergabe an den Spediteur soweit wir aus unseren deutschen Lägern liefern. Ansonsten gilt bei Direktimporten der Tag der Verzollung, der zeitnah zum Anliefertag liegt. Bei Nichteinhaltung der vereinbarten Zahlungsbedingungen sind wir berechtigt, Zinsen in Höhe von 7 %-Punkten über dem Basiszinssatz zu berechnen; das Recht zur Geltendmachung weitergehender Schäden, insbesondere nachgewiesener höherer Zinsen, bleibt hiervon unberührt.
+
+## 9. Liefervorbehalt | Teillieferungen
+
+Sämtliche Lieferzusagen unsererseits stehen, sofern nichts anderes ausdrücklich schriftlich vereinbart ist, unter dem Vorbehalt der richtigen und rechtzeitigen Belieferung durch unsere Produzenten. Wir behalten uns jederzeit Teillieferungen vor. Darüber hinaus behalten wir uns branchenübliche Über- oder Unterlieferungen bis zu 10 % der bestellten Menge vor.
+
+## 10. Lieferfristen und Liefertermine
+
+Die Lieferfrist wird individuell vereinbart bzw. von uns bei Annahme der Bestellung angegeben. Sofern wir verbindliche Lieferfristen aus Gründen, die wir nicht zu vertreten haben, nicht einhalten können (Nichtverfügbarkeit der Leistung), werden wir den Besteller hierüber unverzüglich informieren und gleichzeitig die voraussichtliche, neue Lieferfrist mitteilen. Ist die Leistung auch innerhalb der neuen Lieferfrist nicht verfügbar, sind wir berechtigt, ganz oder teilweise vom Vertrag zurückzutreten. Eine bereits erbrachte Gegenleistung des Bestellers werden wir unverzüglich erstatten. Nichtverfügbarkeit der Leistung liegt beispielsweise vor bei nicht rechtzeitiger Selbstbelieferung durch unseren Zulieferer, wenn wir ein kongruentes Deckungsgeschäft abgeschlossen haben, bei sonstigen Störungen in der Lieferkette etwa aufgrund höherer Gewalt oder wenn wir im Einzelfall zur Beschaffung nicht verpflichtet sind.
+
+Der Eintritt unseres Lieferverzugs bestimmt sich nach den gesetzlichen Vorschriften. In jedem Fall ist aber eine Mahnung durch den Käufer erforderlich.
+
+Die gesetzlichen Rechte bleiben im Übrigen unberührt.
+
+Fixgeschäfte setzen die ausdrückliche schriftliche Bezeichnung als solche voraus. Ansonsten ist der Besteller stets verpflichtet, uns schriftlich eine angemessene Nachfrist zu setzen, wenn von uns zugesagte Termine und/ oder Fristen nicht einhalten werden. Wird auch die Nachfrist nicht eingehalten, ist der Besteller berechtigt, vom Vertrag zurückzutreten.
+
+Im Fall höherer Gewalt und/oder sonstiger von uns nicht vorhersehbarer außergewöhnlicher und/oder unverschuldeter Umstände, auch wenn sie bei unserem Vorlieferanten eintreten, verlängert sich eine von uns zugesagte Lieferfrist bis zur Behebung des vorerwähnten Ereignisses. Ist dieser Zeitpunkt nicht überblickbar, sind sowohl der Besteller als auch wir berechtigt, von dem abgeschlossenen Vertrag zurückzutreten. In diesem Fall sind beiderseits Schadensersatzansprüche ausgeschlossen. Wir verpflichten uns, bei Bekanntwerden vorerwähnter Umstände den Besteller hiervon unverzüglich zu benachrichtigen.
+
+Ist die Einhaltung eines Termins davon abhängig, dass uns seitens des Bestellers bestimmte Angaben und/oder Pläne, Freigabeerklärungen oder ähnliches erteilt werden, beginnt die Lieferfrist erst von dem Zeitpunkt an zu laufen, zu dem uns die vollständigen Angaben des Bestellers schriftlich vorliegen. Wird die Anlieferung auf Wunsch des Bestellers über den vertraglich vorgesehenen Zeitpunkt hinausgeschoben, kann von uns beginnend mit einer Frist von frühestens 10 Werktagen nach Anzeige der Versandbereitschaft dem Besteller ein Lagergeld in Höhe von 2 % des Rechnungsbetrages für jeden angefangenen Monat, maximal jedoch 10 % insgesamt berechnet werden.
+
+## 11. Abrufaufträge
+
+Wird uns ein Abrufauftrag erteilt und werden über die Abruftermine keine gesonderten schriftlichen Vereinbarungen getroffen, ist der Besteller verpflichtet, uns die einzelnen Abruftermine so mitzuteilen, dass zwischen Eingang der Abrufmitteilung bei uns und Auslieferung mindestens 14 Werktage und die letzte Auslieferung spätestens 90 Tage nach unserer Auftragsbestätigung liegt.
+
+## 12. Maß- und Gewichtsangaben
+
+Alle Angaben über Durchmesser, Gewicht, technische Gestaltung, Herstellung und Umfang der von uns zu liefernden Ware stehen unter dem Vorbehalt der Abweichung innerhalb der handelsüblichen zulässigen Toleranzen. Darüber hinaus behalten wir uns Änderungen, die einer technischen Verbesserung dienen, jederzeit vor. Farbabweichungen und/oder Abweichungen in der äußeren Beschaffenheit der von uns zu liefernden Ware, die jedoch deren Qualität und technische Wirksamkeit unbeeinflusst lässt, begründen keine Mängelhaftungsansprüche des Bestellers.
+
+## 13. Gefahrübergang und -tragung
+
+Die Lieferung erfolgt DAP frei Bestimmungsort Deutschland, wo auch der Erfüllungsort für die Lieferung und eine etwaige Nacherfüllung ist.
+
+Wird die bestellte Ware von uns versandbereit gestellt und/oder verzögert sich die Versendung und/oder der Abruf aus Gründen, die vom Besteller zu vertreten sind, sind wir berechtigt, Ersatz des hieraus entstehenden Schadens einschließlich Mehraufwendungen für Einlagerungen zu verlangen. Hierfür berechnen wir eine pauschale Entschädigung i.H. von 2% des Rechnungsbetrages für jeden angefangenen Monat, maximal jedoch 10 % insgesamt beginnend mit der Lieferfrist bzw. – mangels einer Lieferfrist – mit der Mitteilung der Versandbereitschaft der Ware.
+
+Der Nachweis eines höheren Schadens und unsere gesetzlichen Ansprüche (insbesondere Ersatz von Mehraufwendungen, angemessene Entschädigung, Kündigung) bleiben unberührt; die Pauschale ist aber auf weitergehende Geldansprüche anzurechnen. Dem Besteller bleibt der Nachweis gestattet, dass uns überhaupt kein oder nur ein wesentlich geringerer Schaden als vorstehende Pauschale entstanden ist. Rücksendungen an uns, die nicht vorher von uns schriftlich bestätigt worden sind, erfolgen auf alleinige Gefahr des Bestellers.
+
+## 14. Mängelhaftung
+
+Wir haften nur dann für die Einhaltung objektiver Anforderungen an der Ware, wenn und soweit zwischen dem Besteller und uns keine Beschaffenheitsvereinbarung getroffen wurde. Die einzuhaltenden subjektiven Anforderungen gehen den einzuhaltenden objektiven Anforderungen vor. Im Zweifel ergeben sich die vereinbarten Anforderungen an die Ware aus dem von uns bereitgestellten Datenblatt. Einzelne, nicht immer auszuschließende marginale Abweichungen, dürfen durch Reparaturen, wie zum Beispiel Mantelmanschetten nachgebessert werden.
+
+Jedwede Mängelhaftungsansprüche des Bestellers setzen voraus, dass dieser die ihm übersandte Ware unverzüglich, d. h. in der Regel sofort bei Anlieferung (noch in Anwesenheit des Transporteurs) auf ihre ordnungsgemäße Beschaffenheit hin überprüft und uns zu verzeichnende sichtbare Mängel unmittelbar nach Erhalt der Ware und verdeckte Mängel unmittelbar nach deren Feststellung schriftlich mitteilt. Soweit ein rechtzeitig gerügter, nicht nur unerheblicher Mangel der Kaufsache vorliegt, sind wir nach unserer Wahl zur Mangelbeseitigung oder zur Ersatzlieferung (Nacherfüllung) berechtigt.
+
+Wir übernehmen im Rahmen der Nacherfüllung in keinem Fall Ein- oder Ausbaukosten, wenn und soweit die Mangelhaftigkeit der Ware zum Zeitpunkt des Einbaus dem Besteller bekannt oder grob fahrlässig unbekannt geblieben ist.
+
+Sind wir zur Mangelbeseitigung/Ersatzlieferung nicht bereit oder nicht in der Lage oder verzögert sich diese über angemessene Fristen hinaus aus Gründen, die wir zu vertreten haben, oder schlägt sie in sonstiger Weise fehl, so ist der Besteller nach seiner Wahl berechtigt, vom Vertrag zurückzutreten oder eine entsprechende Minderung des Kaufpreises zu verlangen.
+
+Weitergehende Ansprüche des Bestellers, gleich aus welchem Rechtsgrund, sind nach näherer Maßgabe der Regelungen in nachstehender Ziffer 15 ausgeschlossen bzw. beschränkt.
+
+Die Verjährungsfristen für Mängelhaftungsansprüche beträgt 24 Monate ab Übergabe der Ware.
+
+Sollte es bei einer Mängelrüge zu unterschiedlichen Meinungen bezüglich des Kabelschaden kommen, gilt hier im Zweifelsfall nur die Expertise des VDE-Instituts selbst. Andere, auch akkreditierte Testlabore, akzeptieren wir nicht.
+
+Wir weisen ausdrücklich daraufhin, dass beim Verlegen des Kabels in den Gräben oder in Rohren, bzw. in Bauwerke eine ständige Sichtkontrolle durch den Kabelverleger vorzunehmen ist, ob Auffälligkeiten zu vermerken sind. Eine spätere Reklamation, die fahrlässiges Verhalten vermuten lässt, schränkt sich damit ein. Dies gilt auch bei der Annahme der Ware, wo offensichtliche Beschädigungen direkt zu kommunizieren sind. Spätere Ansprüche nach Akzeptanz einer einwandfreien Belieferung sind detailliert zu beweisen.
+
+## 15. Schadenersatz | Gesamthaftung
+
+Wir haften unbeschränkt nur für Vorsatz und grobe Fahrlässigkeit sowie für Schäden aus einer Verletzung von Leben, Körper oder Gesundheit, die auf mindestens fahrlässiger Pflichtverletzung unsererseits oder unserer gesetzlichen Vertreter oder Erfüllungsgehilfen beruhen; ebenso haften wir unbeschränkt im Fall von uns übernommenen bzw. abgegebenen Garantien und Zusicherungen, sofern ein davon umfasster Mangel unsere Haftung auslöst sowie im Fall einer Haftung nach dem Produkthaftungsgesetz oder sonstigen Gefährdungshaftungstatbeständen. Im Fall sonstiger schuldhafter Verletzung wesentlicher Vertragspflichten („Kardinalpflichten“) ist unsere verbleibende Haftung auf den vertragstypischen vorhersehbaren Schaden beschränkt. Mangelfolgeschäden sowie entgangener Gewinn schließen wir grundsätzlich aus.
+
+## 16. Kabeltrommeln
+
+Unsere Kabel werden auf stabilen Vollholztrommeln geliefert. Auf Wunsch vermitteln wir Ihnen Partner, die diese Trommeln gegen eine Gebühr abholen.
+
+## 17. Sonstiges
+
+Es gilt ausschließlich das Recht der Bundesrepublik Deutschland unter Ausschluss des UN-Kaufrechts (CISG). Gerichtsstand ist nach unserer Wahl Stuttgart, der Erfüllungsort der Lieferverpflichtung oder das für den Sitz des Bestellers zuständige Gericht, sofern der Besteller Kaufmann, juristische Person des öffentlichen Rechts oder öffentlich-rechtliches Sondervermögen ist oder keinen allgemeinen Gerichtsstand im Inland hat.
+
+Mit der Veröffentlichung der vorliegenden L&Z im Internet werden alle von uns früher verwendeten Bedingungen gegenstandslos.
+
+Remshalden, 28.1.2026
+
+[Download als PDF](/AGB-KLZ-1-2026.pdf)

data/pages/de/datenschutz.mdx

@@ -1,53 +1,59 @@
 ---
-title: Privacy Policy – Deutsch
-excerpt: >-
-  [vc_column column_padding=”no-extra-padding”
-  column_padding_tablet=”inherit”
-  column_padding_phone=”inherit”
-  column_padding_position=”all”
-  column_element_direction_desktop=”default”
-  column_element_spacing=”default”
-  desktop_text_alignment=”default”
-  tablet_text_alignment=”default”
-  phone_text_alignment=”default”
-  background_color_opacity=”1″
-  background_hover_color_opacity=”1″
-  column_backdrop_filter=”none”
-  column_shadow=”none”…
+title: Datenschutzerklärung
+excerpt: Informationen zum Umgang mit Ihren persönlichen Daten bei der KLZ Vertriebs GmbH.
 featuredImage: null
 locale: de
 ---
-# Privacy Policy – Deutsch
 
-<h1>Datenschutzerklärung</h1>
-<h3>1. Datenschutz auf einen Blick</h3>
-<p><strong>Allgemeine Hinweise</strong><br />
-Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie unsere Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können. Ausführliche Informationen zum Thema Datenschutz entnehmen Sie unserer unten aufgeführten Datenschutzerklärung.</p>
-<hr />
-<h3>2. Allgemeine Hinweise und Pflichtinformationen</h3>
-<p><strong>Datenschutz</strong><br />
-Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.</p>
-<p>Wenn Sie diese Website nutzen, werden verschiedene personenbezogene Daten erhoben. Personenbezogene Daten sind Daten, mit denen Sie persönlich identifiziert werden können. Diese Datenschutzerklärung erläutert, welche Daten wir erheben und wofür wir sie nutzen. Sie erläutert auch, wie und zu welchem Zweck dies geschieht.</p>
-<p>Wir weisen darauf hin, dass die Datenübertragung im Internet (z. B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.</p>
-<hr />
-<p><strong>Widerruf Ihrer Einwilligung zur Datenverarbeitung</strong><br />
-Viele Datenverarbeitungsvorgänge sind nur mit Ihrer ausdrücklichen Einwilligung möglich. Sie können eine bereits erteilte Einwilligung jederzeit widerrufen. Dazu reicht eine formlose Mitteilung per E-Mail an uns. Die Rechtmäßigkeit der bis zum Widerruf erfolgten Datenverarbeitung bleibt vom Widerruf unberührt.</p>
-<hr />
-<p><strong>Beschwerderecht bei der zuständigen Aufsichtsbehörde</strong><br />
-Im Falle von Verstößen gegen das Datenschutzrecht steht dem Betroffenen ein Beschwerderecht bei der zuständigen Aufsichtsbehörde zu. Die zuständige Aufsichtsbehörde für Datenschutzfragen ist der Datenschutzbeauftragte des Bundeslandes, in dem unser Unternehmen seinen Sitz hat. Eine Liste der Datenschutzbeauftragten sowie deren Kontaktdaten können Sie folgendem Link entnehmen:<br />
-<a href="https://www.bfdi.bund.de/DE/Infothek/Anschriften_Links/anschriften_links-node.html" target="_new" rel="noopener noreferrer nofollow" target="_blank">https://www.bfdi.bund.de/DE/Infothek/Anschriften_Links/anschriften_links-node.html</a>.</p>
-<hr />
-<p><strong>Recht auf Datenübertragbarkeit</strong><br />
-Sie haben das Recht, Daten, die wir auf Grundlage Ihrer Einwilligung oder zur Erfüllung eines Vertrags automatisiert verarbeiten, an sich oder an einen Dritten in einem gängigen, maschinenlesbaren Format aushändigen zu lassen. Sofern Sie die direkte Übertragung der Daten an einen anderen Verantwortlichen verlangen, erfolgt dies nur, soweit es technisch machbar ist.</p>
-<hr />
-<p><strong>Auskunft, Sperrung, Löschung</strong><br />
-Im Rahmen der geltenden gesetzlichen Bestimmungen haben Sie jederzeit das Recht auf unentgeltliche Auskunft über Ihre gespeicherten personenbezogenen Daten, deren Herkunft und Empfänger sowie den Zweck der Datenverarbeitung. Gegebenenfalls haben Sie ein Recht auf Berichtigung, Sperrung oder Löschung dieser Daten. Hierzu sowie zu weiteren Fragen zum Thema personenbezogene Daten können Sie sich jederzeit unter der im Impressum angegebenen Adresse an uns wenden.</p>
-<hr />
-<p><strong>Widerspruch gegen Werbe-E-Mails</strong><br />
-Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-E-Mails, vor.</p>
-<hr />
-<h3>3. Datenerfassung in unserem Unternehmen</h3>
-<p><strong>Datenübermittlung bei Vertragsschluss für Dienstleistungen und digitale Inhalte</strong><br />
-Wir übermitteln personenbezogene Daten an Dritte nur dann, wenn dies im Rahmen der Vertragsabwicklung notwendig ist, z. B. an das mit der Zahlungsabwicklung beauftragte Kreditinstitut.</p>
-<p>Eine weitergehende Übermittlung der Daten erfolgt nicht bzw. nur dann, wenn Sie der Übermittlung ausdrücklich zugestimmt haben. Eine Weitergabe Ihrer Daten an Dritte ohne ausdrückliche Einwilligung, etwa zu Werbezwecken, erfolgt nicht.</p>
-<p>Rechtsgrundlage für die Datenverarbeitung ist Art. 6 Abs. 1 lit. b DSGVO, der die Verarbeitung von Daten zur Erfüllung eines Vertrags oder vorvertraglicher Maßnahmen gestattet.
+## 1. Datenschutz auf einen Blick
+
+### Allgemeine Hinweise
+Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie unsere Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können. Ausführliche Informationen zum Thema Datenschutz entnehmen Sie unserer unten aufgeführten Datenschutzerklärung.
+
+---
+
+## 2. Allgemeine Hinweise und Pflichtinformationen
+
+### Datenschutz
+Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
+
+Wenn Sie diese Website nutzen, werden verschiedene personenbezogene Daten erhoben. Personenbezogene Daten sind Daten, mit denen Sie persönlich identifiziert werden können. Diese Datenschutzerklärung erläutert, welche Daten wir erheben und wofür wir sie nutzen. Sie erläutert auch, wie und zu welchem Zweck dies geschieht.
+
+Wir weisen darauf hin, dass die Datenübertragung im Internet (z. B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.
+
+---
+
+### Widerruf Ihrer Einwilligung zur Datenverarbeitung
+Viele Datenverarbeitungsvorgänge sind nur mit Ihrer ausdrücklichen Einwilligung möglich. Sie können eine bereits erteilte Einwilligung jederzeit widerrufen. Dazu reicht eine formlose Mitteilung per E-Mail an uns. Die Rechtmäßigkeit der bis zum Widerruf erfolgten Datenverarbeitung bleibt vom Widerruf unberührt.
+
+---
+
+### Beschwerderecht bei der zuständigen Aufsichtsbehörde
+Im Falle von Verstößen gegen das Datenschutzrecht steht dem Betroffenen ein Beschwerderecht bei der zuständigen Aufsichtsbehörde zu. Die zuständige Aufsichtsbehörde für Datenschutzfragen ist der Datenschutzbeauftragte des Bundeslandes, in dem unser Unternehmen seinen Sitz hat. Eine Liste der Datenschutzbeauftragten sowie deren Kontaktdaten können Sie folgendem Link entnehmen:
+[https://www.bfdi.bund.de/DE/Infothek/Anschriften_Links/anschriften_links-node.html](https://www.bfdi.bund.de/DE/Infothek/Anschriften_Links/anschriften_links-node.html).
+
+---
+
+### Recht auf Datenübertragbarkeit
+Sie haben das Recht, Daten, die wir auf Grundlage Ihrer Einwilligung oder zur Erfüllung eines Vertrags automatisiert verarbeiten, an sich oder an einen Dritten in einem gängigen, maschinenlesbaren Format aushändigen zu lassen. Sofern Sie die direkte Übertragung der Daten an einen anderen Verantwortlichen verlangen, erfolgt dies nur, soweit es technisch machbar ist.
+
+---
+
+### Auskunft, Sperrung, Löschung
+Im Rahmen der geltenden gesetzlichen Bestimmungen haben Sie jederzeit das Recht auf unentgeltliche Auskunft über Ihre gespeicherten personenbezogenen Daten, deren Herkunft und Empfänger sowie den Zweck der Datenverarbeitung. Gegebenenfalls haben Sie ein Recht auf Berichtigung, Sperrung oder Löschung dieser Daten. Hierzu sowie zu weiteren Fragen zum Thema personenbezogene Daten können Sie sich jederzeit unter der im Impressum angegebenen Adresse an uns wenden.
+
+---
+
+### Widerspruch gegen Werbe-E-Mails
+Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-E-Mails, vor.
+
+---
+
+## 3. Datenerfassung in unserem Unternehmen
+
+### Datenübermittlung bei Vertragsschluss für Dienstleistungen und digitale Inhalte
+Wir übermitteln personenbezogene Daten an Dritte nur dann, wenn dies im Rahmen der Vertragsabwicklung notwendig ist, z. B. an das mit der Zahlungsabwicklung beauftragte Kreditinstitut.
+
+Eine weitergehende Übermittlung der Daten erfolgt nicht bzw. nur dann, wenn Sie der Übermittlung ausdrücklich zugestimmt haben. Eine Weitergabe Ihrer Daten an Dritte ohne ausdrückliche Einwilligung, etwa zu Werbezwecken, erfolgt nicht.
+
+Rechtsgrundlage für die Datenverarbeitung ist Art. 6 Abs. 1 lit. b DSGVO, der die Verarbeitung von Daten zur Erfüllung eines Vertrags oder vorvertraglicher Maßnahmen gestattet.

data/pages/de/impressum.mdx

@@ -1,34 +1,26 @@
 ---
-title: Legal Notice – Deutsch
-excerpt: >-
-  [vc_column column_padding=”no-extra-padding”
-  column_padding_tablet=”inherit”
-  column_padding_phone=”inherit”
-  column_padding_position=”all”
-  column_element_direction_desktop=”default”
-  column_element_spacing=”default”
-  desktop_text_alignment=”default”
-  tablet_text_alignment=”default”
-  phone_text_alignment=”default”
-  background_color_opacity=”1″
-  background_hover_color_opacity=”1″
-  column_backdrop_filter=”none”
-  column_shadow=”none”…
+title: Impressum
+excerpt: Rechtliche Informationen und Kontaktdaten der KLZ Vertriebs GmbH.
 featuredImage: null
 locale: de
 ---
-# Legal Notice – Deutsch
 
-<h1>Impressum</h1>
-<p><strong>Verantwortlich für den Inhalt:</strong><br />
-Michael Bodemer</p>
-<p><strong>KLZ Vertriebs GmbH</strong><br />
-Raiffeisenstraße 22<br />
-73630 Remshalden</p>
-<p><a rel="noopener">info@klz-cables.com</a><br />
-<a href="http://www.klz-cables.com" target="_new" rel="noopener noreferrer nofollow" target="_blank">www.klz-cables.com</a></p>
-<p>Amtsgericht Stuttgart<br />
-HRB-Nr. 798037<br />
-Gerichtsstand: Stuttgart</p>
-<p><strong>Urheberrecht:</strong><br />
+## Verantwortlich für den Inhalt
+Michael Bodemer
+
+**KLZ Vertriebs GmbH**  
+Raiffeisenstraße 22  
+73630 Remshalden  
+Deutschland
+
+## Kontakt
+E-Mail: [info@klz-cables.com](mailto:info@klz-cables.com)  
+Web: [www.klz-cables.com](https://www.klz-cables.com)
+
+## Registereintrag
+Amtsgericht Stuttgart  
+HRB-Nr. 798037  
+Gerichtsstand: Stuttgart
+
+## Urheberrecht
 Alle auf dieser Website veröffentlichten Texte, Bilder und sonstigen Informationen unterliegen dem Urheberrecht, sofern nicht anders angegeben. Jegliche Vervielfältigung, Verbreitung, Speicherung, Übermittlung, Nachbildung oder Weitergabe der Inhalte ist ohne vorherige schriftliche Genehmigung ausdrücklich untersagt. Für weitere Informationen wenden Sie sich bitte an die oben genannte Adresse.

data/pages/de/team.mdx

@@ -96,6 +96,12 @@ locale: de
 </div>
 </div>
 
+<div class="mt-4">
+  <a href="/vcf/michael-bodemer" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 no-underline">
+    vCard Michael Bodemer herunterladen
+  </a>
+</div>
+
 <h3>Verbindungen, die Geschichte schreiben</h3>
 <p>Bei KLZ vereinen wir Tradition und Innovation zu zuverlässigen Energielösungen. Unsere Wurzeln reichen tief in die Geschichte der Kabeltechnologie zurück – mit jeder Menge praktischer Erfahrung und einem Blick für zukunftsweisende Entwicklungen.</p>
 <p>In jedem Projekt steckt nicht nur technisches Know-how, sondern auch das Bewusstsein für das Handwerk, das die Welt seit Generationen verbindet. Historische Illustrationen aus den frühen Tagen der Energiebranche erinnern uns daran, wie weit wir gekommen sind – und dass echte Exzellenz immer mit Sorgfalt beginnt.
@@ -129,4 +135,10 @@ locale: de
 </div>
 </div>
 
+<div class="mt-4">
+  <a href="/vcf/klaus-mintel" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 no-underline">
+    vCard Klaus Mintel herunterladen
+  </a>
+</div>
+
 <h2>Unser Manifest</h2>

data/pages/en/legal-notice.mdx

@@ -1,34 +1,26 @@
 ---
-title: Legal Notice – English
-excerpt: >-
-  [vc_column column_padding=”no-extra-padding”
-  column_padding_tablet=”inherit”
-  column_padding_phone=”inherit”
-  column_padding_position=”all”
-  column_element_direction_desktop=”default”
-  column_element_spacing=”default”
-  desktop_text_alignment=”default”
-  tablet_text_alignment=”default”
-  phone_text_alignment=”default”
-  background_color_opacity=”1″
-  background_hover_color_opacity=”1″
-  column_backdrop_filter=”none”
-  column_shadow=”none”…
+title: Legal Notice
+excerpt: Legal information and contact details for KLZ Vertriebs GmbH.
 featuredImage: null
 locale: en
 ---
-# Legal Notice – English
 
-<h1>Legal Notice</h1>
-<p><strong>Responsible for the content:</strong><br />
-Michael Bodemer</p>
-<p>KLZ Vertriebs GmbH<br />
-Raiffeisenstraße 22<br />
-73630 Remshalden</p>
-<p>info@klz-cables.com<br />
-www.klz-cables.com</p>
-<p>Local Court Stuttgart<br />
-HRB-Nr. 798037<br />
-Place of jurisdiction: Stuttgart</p>
-<p>Copyright:<br />
+## Responsible for the content
+Michael Bodemer
+
+**KLZ Vertriebs GmbH**  
+Raiffeisenstraße 22  
+73630 Remshalden  
+Germany
+
+## Contact
+Email: [info@klz-cables.com](mailto:info@klz-cables.com)  
+Web: [www.klz-cables.com](https://www.klz-cables.com)
+
+## Registration
+Local Court Stuttgart  
+HRB-Nr. 798037  
+Place of jurisdiction: Stuttgart
+
+## Copyright
 All texts, images and other information published on the website are subject to copyright unless otherwise indicated. Any duplication, distribution, storage, transmission, reproduction or forwarding of the contents without written permission is expressly prohibited. For further information, please contact the above address.

data/pages/en/privacy-policy.mdx

@@ -1,41 +1,36 @@
 ---
-title: Privacy Policy – English
-excerpt: >-
-  [vc_column column_padding=”no-extra-padding”
-  column_padding_tablet=”inherit”
-  column_padding_phone=”inherit”
-  column_padding_position=”all”
-  column_element_direction_desktop=”default”
-  column_element_spacing=”default”
-  desktop_text_alignment=”default”
-  tablet_text_alignment=”default”
-  phone_text_alignment=”default”
-  background_color_opacity=”1″
-  background_hover_color_opacity=”1″
-  column_backdrop_filter=”none”
-  column_shadow=”none”…
+title: Privacy Policy
+excerpt: Information on how we handle your personal data at KLZ Vertriebs GmbH.
 featuredImage: null
 locale: en
 ---
-# Privacy Policy – English
 
-<h1>Privacy Policy</h1>
-<h2 class="text-2xl mb-4">1. Data protection at a glance</h2>
-<h3 class="text-xl">General information</h3>
-<p class="mb-4">The following information provides a simple overview of what happens to your personal data when you visit our website. Personal data are all data with which you can be personally identified. For detailed information on the subject of data protection, please refer to our data protection declaration listed below this text.</p>
-<h2 class="text-2xl mb-4">2. General notes and compulsory information</h2>
-<h3 class="text-xl">Data protection</h3>
-<p class="mb-4">The operators of these pages take the protection of your personal data very seriously. We treat your personal data confidentially and in accordance with the legal data protection regulations and this data protection declaration. When you use this website, various personal data is collected. Personal data is data with which you can be personally identified. This privacy policy explains what data we collect and what we use it for. It also explains how we do this and for what purpose. We would like to point out that data transmission over the Internet (e.g. communication by e-mail) can have security gaps. It is not possible to completely protect data from access by third parties.</p>
-<h3 class="text-xl">Revocation of your consent to data processing</h3>
-<p class="mb-4">Many data processing operations are only possible with your express consent. You can revoke a previously granted consent at any time. For this purpose, an informal notification by e-mail to us is sufficient. The lawfulness of the data processing that took place up to the revocation remains unaffected by the revocation.</p>
-<h3 class="text-xl">Right of appeal to the competent supervisory authority</h3>
-<p class="mb-4">In the event of violations of data protection law, the person concerned has a right of appeal to the competent supervisory authority. The competent supervisory authority for data protection issues is the data protection commissioner of the federal state in which our company is located. A list of the data protection officers and their contact details can be found at the following link: https://www.bfdi.bund.de/DE/Infothek/Anschriften_Links/anschriften_links-node.html.</p>
-<h3 class="text-xl">Right to data transferability</h3>
-<p class="mb-4">You have the right to have data which we process automatically on the basis of your consent or in fulfilment of a contract handed over to you or to a third party in a common, machine-readable format. If you request the direct transfer of the data to another responsible party, this will only be done to the extent that it is technically feasible.</p>
-<h3 class="text-xl">Information, blocking, deletion</h3>
-<p class="mb-4">Within the framework of the applicable legal provisions, you have the right at any time to receive information free of charge about your stored personal data, its origin and recipients and the purpose of the data processing and, if applicable, a right to correct, block or delete this data. For this purpose, as well as for further questions regarding personal data, you can contact us at any time at the address given in the imprint.</p>
-<h3 class="text-xl">Contradiction against advertising mails</h3>
-<p class="mb-4">The use of contact data published within the scope of the imprint obligation for the transmission of not expressly requested advertising and information material is hereby contradicted. The operators of the site expressly reserve the right to take legal action in the event of unsolicited sending of advertising information, such as through spam e-mails.</p>
-<h2 class="text-2xl mb-4">3. Data collection in our company</h2>
-<h3 class="text-xl">Data transfer upon conclusion of the contract for services and digital contents</h3>
-<p class="mb-4">We only transfer personal data to third parties if this is necessary within the scope of processing the contract, e.g. to the credit institution commissioned with processing payments. Any further transmission of data will not take place or only if you have expressly agreed to the transmission. Your data will not be passed on to third parties without your express consent, for example for advertising purposes. The basis for data processing is Art. 6 Par. 1 letter b DSGVO, which permits the processing of data for the fulfilment of a contract or pre-contractual measures.</p>
+## 1. Data protection at a glance
+
+### General information
+The following information provides a simple overview of what happens to your personal data when you visit our website. Personal data are all data with which you can be personally identified. For detailed information on the subject of data protection, please refer to our data protection declaration listed below this text.
+
+## 2. General notes and compulsory information
+
+### Data protection
+The operators of these pages take the protection of your personal data very seriously. We treat your personal data confidentially and in accordance with the legal data protection regulations and this data protection declaration. When you use this website, various personal data is collected. Personal data is data with which you can be personally identified. This privacy policy explains what data we collect and what we use it for. It also explains how we do this and for what purpose. We would like to point out that data transmission over the Internet (e.g. communication by e-mail) can have security gaps. It is not possible to completely protect data from access by third parties.
+
+### Revocation of your consent to data processing
+Many data processing operations are only possible with your express consent. You can revoke a previously granted consent at any time. For this purpose, an informal notification by e-mail to us is sufficient. The lawfulness of the data processing that took place up to the revocation remains unaffected by the revocation.
+
+### Right of appeal to the competent supervisory authority
+In the event of violations of data protection law, the person concerned has a right of appeal to the competent supervisory authority. The competent supervisory authority for data protection issues is the data protection commissioner of the federal state in which our company is located. A list of the data protection officers and their contact details can be found at the following link: [https://www.bfdi.bund.de/DE/Infothek/Anschriften_Links/anschriften_links-node.html](https://www.bfdi.bund.de/DE/Infothek/Anschriften_Links/anschriften_links-node.html).
+
+### Right to data transferability
+You have the right to have data which we process automatically on the basis of your consent or in fulfilment of a contract handed over to you or to a third party in a common, machine-readable format. If you request the direct transfer of the data to another responsible party, this will only be done to the extent that it is technically feasible.
+
+### Information, blocking, deletion
+Within the framework of the applicable legal provisions, you have the right at any time to receive information free of charge about your stored personal data, its origin and recipients and the purpose of the data processing and, if applicable, a right to correct, block or delete this data. For this purpose, as well as for further questions regarding personal data, you can contact us at any time at the address given in the imprint.
+
+### Contradiction against advertising mails
+The use of contact data published within the scope of the imprint obligation for the transmission of not expressly requested advertising and information material is hereby contradicted. The operators of the site expressly reserve the right to take legal action in the event of unsolicited sending of advertising information, such as through spam e-mails.
+
+## 3. Data collection in our company
+
+### Data transfer upon conclusion of the contract for services and digital contents
+We only transfer personal data to third parties if this is necessary within the scope of processing the contract, e.g. to the credit institution commissioned with processing payments. Any further transmission of data will not take place or only if you have expressly agreed to the transmission. Your data will not be passed on to third parties without your express consent, for example for advertising purposes. The basis for data processing is Art. 6 Par. 1 letter b DSGVO, which permits the processing of data for the fulfilment of a contract or pre-contractual measures.

data/pages/en/team.mdx

@@ -62,6 +62,13 @@ locale: en
 
 <h2>Challenges exist to be solved, not to debate how complicated they are.</h2>
 Michael Bodemer is the go-to guy when things get complicated—and let’s face it, that’s often the case with cable networks. With sharp insight and a knack for practical solutions, Michael is one of our key players. He’s not just detail-oriented; he’s a driving force—whether it’s in planning, customer interactions, or securing the best cables for every project.
+
+<div class="mt-4">
+  <a href="/vcf/michael-bodemer" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 no-underline">
+    Download vCard Michael Bodemer
+  </a>
+</div>
+
 <h3><strong>A Legacy of Excellence in Every Connection</strong></h3>
 <p>At KLZ, our expertise is built on generations of dedication to the energy industry. With decades of hands-on experience, we’ve grown alongside the evolution of cable technology, combining traditional craftsmanship with modern innovation. Each project we take on reflects a deep understanding of what it takes to create lasting, reliable energy solutions.</p>
 <p>Paired with historic illustrations from the industry’s early days, our story is a reminder of how far cables have come – and how much care has always gone into connecting the world.
@@ -69,4 +76,11 @@ Michael Bodemer is the go-to guy when things get complicated—and let’s face
 
 <h2>Sometimes all it takes is a clear head and a good cable to make the world a little better.</h2>
 Klaus is the man with the experience, bringing perspective and calm to the table—even when cable chaos threatens to take over. With impressive industry knowledge and a network as solid as our cables, he ensures everything runs smoothly. Klaus isn’t just a problem solver; he’s a strategic thinker who knows how to get to the point with a touch of humor.
+
+<div class="mt-4">
+  <a href="/vcf/klaus-mintel" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 no-underline">
+    Download vCard Klaus Mintel
+  </a>
+</div>
+
 <h2>Our manifesto</h2>

data/pages/en/terms.mdx

@@ -1,93 +1,116 @@
 ---
-title: Terms – English
-excerpt: >-
-  [vc_column column_padding=”no-extra-padding”
-  column_padding_tablet=”inherit”
-  column_padding_phone=”inherit”
-  column_padding_position=”all”
-  column_element_direction_desktop=”default”
-  column_element_spacing=”default”
-  desktop_text_alignment=”default”
-  tablet_text_alignment=”default”
-  phone_text_alignment=”default”
-  background_color_opacity=”1″
-  background_hover_color_opacity=”1″
-  column_backdrop_filter=”none”
-  column_shadow=”none”…
+title: Terms
+excerpt: Delivery and Payment Terms of KLZ Vertriebs GmbH.
 featuredImage: null
 locale: en
 ---
-# Terms – English
 
-<h1 class="p1">Liefer- und Zahlungsbedingungen</h1>
-<p class="p1">Stand November 2024</p>
+*Status January 2026*
 
-<h3 class="p1"><span class="s1">1.</span> Allgemeines</h3>
-<p class="p2">Diese Liefer- und Zahlungsbedingungen (L&amp;Z) der KLZ Vertriebs GmbH gelten ausschließlich; entgegenstehende oder von unseren Bedingungen abweichende Bedingungen des Kunden erkennen wir nicht an, es sei denn, wir hätten ausdrücklich schriftlich ihrer Geltung zugestimmt. Unsere L&amp;Z gelten auch dann, wenn wir in Kenntnis entgegenstehender oder von unseren L&amp;Z abweichender Bedingungen des Bestellers die Lieferung an diesen vorbehaltlos ausführen. Unsere L&amp;Z gelten nur gegenüber Unternehmern im Sinn von § 310 Abs. 1 BGB sowie juristischen Personen des <span class="s3">öffentlichen </span>Rechts oder öffentlich-rechtliches Sondervermögen.</p>
-<p class="p2">Nebenabreden, Vorbehalte, Änderungen, Ergänzungen usw. bedürfen zu ihrer Wirksamkeit unserer schriftlichen Bestätigung.</p>
-<p class="p2">Hinweise auf die Geltung gesetzlicher Vorschriften haben nur klarstellende Bedeutung. Auch ohne eine derartige Klarstellung gelten daher die gesetzlichen Vorschriften, soweit sie in diesen L&amp;Z nicht unmittelbar abgeändert oder <span class="s3">ausdrücklich </span>ausgeschlossen werden.</p>
+## 1. General
 
-<h3 class="p1"><span class="s1">2.</span> Angebote</h3>
-<p class="p1">Sofern nicht ausdrücklich als bindend bezeichnet, sind unsere Angebote freibleibend; die Bestellung des <span class="s2">Kunden ist </span>als Angebot gemäß § 145 BGB zu qualifizieren.</p>
+These delivery and payment terms (DPT) of KLZ Vertriebs GmbH apply exclusively; contrary or deviating conditions of the customer are not recognized by us, unless we have expressly agreed in writing to their validity. Our DPT also apply if we execute the delivery to the customer without reservation in knowledge of contrary or deviating conditions of the order. Our DPT only apply to entrepreneurs within the meaning of § 310 (1) BGB as well as legal persons of public law or public-law special assets.
 
-<h3 class="p1"><span class="s1">3.</span> Preise</h3>
-<p class="p1">Alle von uns genannten Preise verstehen sich zzgl. der jeweiligen gesetzlichen Mehrwertsteuer vor Metallzuschlag fracht- frei innerhalb der Bundesrepublik Deutschland (Festland), jedoch ohne Abladen. Die Verkaufspreise, soweit sie als Hohlpreis deklariert sind, enthalten keinerlei Metallwerte. Diese werden zusätzlich separat berechnet.</p>
+Side agreements, reservations, changes, supplements, etc. require our written confirmation for their validity.
 
-<h3 class="p1"><span class="s1">4.</span> Metallnotierung</h3>
-<p class="p2">Basis zur Kupferabrechnung ist die Notierung &#8220;LME Copper official price cash offer&#8221;, Durchschnitt des Liefervormonats zuzüglich der dann aktuellen von uns benannten Kupfer-Prämie.</p>
-<p class="p2">Basis zur Aluminiumabrechnung ist die Notierung &#8220;LME Aluminium official price cash offer&#8221;, Durchschnitt des Liefervormonats zuzüglich der dann von uns benannten Aluminium-Prämie. USD werden auf Basis des EUR/USD LME-FX-Rate (MTLE) in EUR umgerechnet. Die entsprechenden Notierungen können Sie der Web-Seite www.westmetall.com entnehmen. Die Prämienzuschläge können stark variieren und KLZ behält sich das Recht vor, diese fristgerecht anzupassen, ungeachtet der Angebotslegung.</p>
+References to the applicability of legal provisions have only clarifying significance. Even without such clarification, the legal provisions therefore apply, insofar as they are not directly amended or expressly excluded in these DPT.
 
-<h3 class="p1"><span class="s1">5.</span> Metallzahl</h3>
-<p class="p2">Die von uns ausgewiesene Metallzahl ist eine rein kaufmännische Berechnungsgröße für den Metallinhalt, die in die Berechnung des Gesamtpreises eines Kabels eingeht. Damit entsprechen wir Ihrem Wunsch eine Vergleichbarkeit in ihrem System auf Hohlpreisbasis zu ermöglichen. Die Metallzahl gibt damit nicht das Gewicht des tatsächlich im Kabel enthaltenen Leitermetalls an. Sie ist ein rein kalkulatorischer Berechnungsfaktor, der jedoch keine unmittelbaren Rückschlüsse auf die im Kabel verwendeten Kupfer- bzw. Aluminiummengen zulässt. Wir weisen ausdrücklich darauf hin, final nur den Vollpreis für Vergleichszwecke heranzuziehen. Soweit Sie es wünschen andere Metallzahlen zu Grunde zu legen, sind wir gerne dazu bereit, das Angebot in den Bestandteilen umzurechnen. Bei jeglicher Änderung bleibt aber der Vollpreis der gleiche Betrag.</p>
+## 2. Offers
 
-<h3 class="p1"><span class="s1">6.</span> Auftragsänderung / Auftragsstorno</h3>
-<p class="p2">Nach Auftragsbestätigung werden Änderungen an bestätigten Aufträgen nur nach Prüfung und gesonderter ausdrücklicher Zustimmung durch uns akzeptiert. Wir behalten uns bei allen Auftragsänderungen das Recht vor, einen durch die Änderung entstandenen Mehraufwand, wie z.B. Bearbeitungskosten oder Entsorgungskosten in Rech<span class="s2">nung zu stellen.</span></p>
+Unless expressly designated as binding, our offers are non-binding; the customer's order is to be qualified as an offer according to § 145 BGB.
 
-<h3 class="p1"><span class="s1">7.</span> Eigentumsvorbehalt</h3>
-<p class="p2">Wir behalten uns an den von uns gelieferten Waren – nachfolgend: Vorbehaltsware – bis zur vollständigen Begleichung aller unserer Forderungen aus den Geschäftsbeziehungen mit dem Besteller, das Eigentum vor. Der Eigentumsvorbehalt bleibt auch dann bestehen, wenn einzelne Forderungen in eine laufende Rechnung aufgenommen <span class="s2">werden (Kontokorrentvorbehalt).</span></p>
+## 3. Prices
 
-<h3 class="p1"><span class="s1">8. </span>Zahlungsbedingungen <span class="s3">| </span>Aufrechnung <span class="s3">| </span>Zurückbehaltungsrechte</h3>
-<p class="p2">Unsere Rechnungen sind 14 Tage nach Rechnungsdatum ohne jeden Abzug zahlbar. Bei Nichteinhaltung der vereinbarten Zahlungsbedingungen sind wir berechtigt, Zinsen in Höhe von 7 %-Punkten <span class="s4">über dem </span>Basiszinssatz zu berechnen; das Recht zur Geltendmachung weitergehender Schäden, insbesondere <span class="s5">nachgewiesener </span>höherer Zinsen, bleibt hiervon unberührt.</p>
+The prices apply to the scope of services and deliveries listed in our offers and order confirmations. Additional services will be charged separately. The hollow prices are in Euro plus metal surcharge, if applicable packaging, order-specific cutting costs and the statutory value-added tax.
 
-<h3 class="p1"><span class="s1">9.</span> Liefervorbehalt <span class="s3">|</span> Teillieferungen</h3>
-<p class="p2">Sämtliche Lieferzusagen unsererseits stehen, sofern nichts anderes ausdrücklich schriftlich vereinbart ist, unter dem Vorbehalt der richtigen und rechtzeitigen Belieferung durch unsere Produzenten. Wir behalten uns jederzeit Teillieferungen vor. Darüber hinaus behalten wir uns branchenübliche Über- oder Unter<span class="s4">lieferungen </span>bis zu 10 % der bestellten Menge vor.</p>
+## 4. Metal quotation
 
-<h3 class="p1"><span class="s1">10.</span> Lieferfristen und Liefertermine</h3>
-<p class="p2">Die Lieferfrist wird individuell vereinbart bzw. von uns bei Annahme der Bestellung angegeben. Sofern wir verbindliche Lieferfristen aus Gründen, die wir nicht zu vertreten haben, nicht einhalten können (Nichtverfügbarkeit der Leistung), werden wir den Besteller hierüber unverzüglich informieren und gleichzeitig die voraussichtliche, neue Lieferfrist mitteilen. Ist die Leistung auch innerhalb der neuen Lieferfrist nicht verfügbar, sind wir berechtigt, ganz oder teilweise vom Vertrag zurückzutreten. Eine bereits erbrachte Gegenleistung des Bestellers werden wir unverzüglich erstatten. Nichtverfügbarkeit der Leistung liegt beispielsweise vor bei nicht recht- zeitiger Selbstbelieferung durch unseren Zulieferer, wenn wir ein kongruentes Deckungsgeschäft abgeschlossen haben, bei sonstigen Störungen in der Lieferkette etwa aufgrund höherer Gewalt oder wenn wir im Einzelfall zur <span class="s3">Beschaffung nicht verpflichtet sind.</span></p>
-<p class="p2">Der Eintritt unseres Lieferverzugs bestimmt sich nach den gesetzlichen Vorschriften. In jedem Fall ist aber eine <span class="s3">Mahnung durch </span>den Käufer erforderlich.</p>
-<p class="p2">Die gesetzlichen Rechte bleiben im Übrigen unberührt.</p>
-<p class="p2">Fixgeschäfte setzen die ausdrückliche schriftliche Bezeichnung als solche voraus. Ansonsten ist der Besteller <span class="s4">stets </span>verpflichtet, uns schriftlich eine angemessene Nachfrist zu setzen, wenn von uns zugesagte Termine und/ oder Fristen nicht eingehalten werden. Wird auch die Nachfrist nicht eingehalten, ist der Besteller berechtigt, vom <span class="s3">Vertrag zurückzutreten.</span></p>
-<p class="p2">Im Fall höherer Gewalt und/oder sonstiger von uns nicht vorhersehbarer außergewöhnlicher und/oder unverschul<span class="s3">deter </span>Umstände, auch wenn sie bei unserem Vorlieferanten eintreten, verlängert sich eine von uns zugesagte <span class="s4">Lieferfrist bis zur </span>Behebung des vorerwähnten Ereignisses. Ist dieser Zeitpunkt nicht überblickbar, sind sowohl der Besteller als auch wir berechtigt, von dem abgeschlossenen Vertrag zurückzutreten. In diesem Fall sind beiderseits <span class="s3">Schadensersatzansprüche </span>ausgeschlossen. Wir verpflichten uns, bei Bekanntwerden vorerwähnter Umstände <span class="s4">den</span> <span class="s4">Besteller</span> <span class="s4">hiervon</span> <span class="s4">unverzüglich</span> <span class="s4">zu </span>benachrichtigen.</p>
-<p class="p2">Ist die Einhaltung eines Termins davon abhängig, dass uns seitens des Bestellers bestimmte Angaben und/oder Pläne, Freigabeerklärungen oder ähnliches erteilt werden, beginnt die Lieferfrist erst von dem Zeitpunkt an zu lau- fen, zu dem uns die vollständigen Angaben des Bestellers schriftlich vorliegen. Wird die Anlieferung auf Wunsch des Bestellers über den vertraglich vorgesehenen Zeitpunkt hinausgeschoben, kann von uns beginnend mit einer Frist von frühestens 10 Werktagen nach Anzeige der Versandbereitschaft dem Besteller ein Lagergeld in Höhe von 2 % des Rechnungsbetrages für jeden angefangenen Monat, maximal jedoch <span class="s3">10 % insgesamt berechnet werden.</span></p>
+Basis for copper billing is the quotation "LME Copper official price cash offer", average of the delivery month plus the then current copper premium named by us.
 
-<h3 class="p1"><span class="s1">11.</span> Abrufaufträge</h3>
-<p class="p2">Wird uns ein Abrufauftrag erteilt und werden über die Abruftermine keine gesonderten schriftlichen Vereinbarungen getroffen, ist der Besteller verpflichtet, uns die einzelnen Abruftermine so mitzuteilen, dass zwischen Eingang der Abrufmitteilung bei uns und Auslieferung mindestens 14 Werktage und die letzte Auslieferung spätestens 90 <span class="s2">Tage nach unserer Auftragsbestätigung </span>liegt.</p>
+Basis for aluminum billing is the quotation "LME Aluminium official price cash offer", average of the delivery month plus the then current aluminum premium named by us. USD are converted to EUR on the basis of the EUR/USD LME-FX-Rate (MTLE). The corresponding quotations can be taken from the website [www.westmetall.com](https://www.westmetall.com). The premium surcharges can vary strongly and KLZ reserves the right to adjust these in due time, regardless of the offer submission.
 
-<h3 class="p1"><span class="s1">12.</span> Maß- und Gewichtsangaben</h3>
-<p class="p2">Alle Angaben über Durchmesser, Gewicht, technische Gestaltung, Herstellung und Umfang der von uns zu liefernden <span class="s3">Ware stehen </span>unter dem Vorbehalt der Abweichung innerhalb der handelsüblichen zulässigen Toleranzen. Darüber hinaus behalten wir uns Änderungen, die einer technischen Verbesserung dienen, jederzeit vor. Farbabweichungen und/oder Abweichungen in der äußeren Beschaffenheit der von uns zu liefernden Ware, die jedoch deren Qualität und technische Wirksamkeit unbeeinflusst lässt, begründen keine Mängelhaftungsansprüche des Bestellers.</p>
+## 5. Metal number
 
-<h3 class="p1"><span class="s1">13.</span> Gefahrübergang und -tragung</h3>
-<p class="p2">Die Lieferung erfolgt DAP frei Bestimmungsort Deutschland, wo auch der Erfüllungsort für die Lieferung und eine etwaige Nacherfüllung ist.</p>
-<p class="p2">Wird die bestellte Ware von uns versandbereit gestellt und/oder verzögert sich die Versendung und/oder der Abruf aus Gründen, die vom Besteller zu vertreten sind, sind wir berechtigt, Ersatz des hieraus entstehenden Schadens einschließlich Mehraufwendungen zu verlangen. Hierfür berechnen wir eine pauschale Entschädigung i.H.v 2% des Rechnungsbetrages für jeden angefangenen Monat, maximal jedoch 10 % insgesamt beginnend mit der Lieferfrist bzw. – mangels einer Lieferfrist – mit der Mitteilung der Versandbereitschaft der Ware.</p>
-<p class="p2">Der Nachweis eines höheren Schadens und unsere gesetzlichen Ansprüche (insbesondere Ersatz von Mehraufwendungen, angemessene Entschädigung, Kündigung) bleiben unberührt; die Pauschale ist aber auf weitergehende Geldansprüche anzurechnen. Dem Besteller bleibt der Nachweis gestattet, dass uns überhaupt kein oder nur ein <span class="s3">wesentlich geringerer Schaden </span>als vorstehende Pauschale entstanden ist. Rücksendungen an uns, die nicht vorher von uns schriftlich bestätigt worden sind, erfolgen auf alleinige Gefahr des <span class="s4">Bestellers.</span></p>
+The metal number indicated by us is a purely commercial calculation figure for the metal content, which goes into the calculation of the total price of a cable. Thereby we comply with your wish to enable comparability in your system on hollow price basis. The metal number does not indicate the weight of the conductor metal actually contained in the cable. It is a purely calculatory calculation factor, however, which does not allow any direct conclusions on the copper or aluminum quantities used in the cable. We expressly point out that only the full price should be used for comparison purposes. Insofar as you wish to use other metal numbers as a basis, we are happy to recalculate the offer in its components. However, the full price remains the same amount in any change.
 
-<h3 class="p1"><span class="s1">14.</span> Mängelhaftung</h3>
-<p class="p2">Wir haften nur dann für die Einhaltung objektiver Anforderungen an der Ware, wenn und soweit zwischen dem Besteller und uns keine Beschaffenheitsvereinbarung getroffen wurde. Die einzuhaltenden subjektiven Anforderungen gehen den einzuhaltenden objektiven Anforderungen vor. Im Zweifel ergeben sich die vereinbarten Anforderungen <span class="s3">an die Ware aus dem von uns </span>bereitgestellten Datenblatt. Einzelne, nicht immer auszuschließende marginale Abweichungen, dürfen durch Reparaturen, wie zum Beispiel Mantelmanschetten nachgebessert werden.</p>
-<p class="p2">Jedwede Mängelhaftungsansprüche des Bestellers setzen voraus, dass dieser die ihm übersandte Ware unverzüglich, d. h. in der Regel sofort bei Anlieferung (noch in Anwesenheit des Transporteurs) auf ihre ordnungsgemäße Beschaffenheit hin überprüft und uns zu verzeichnende sichtbare Mängel unmittelbar nach Erhalt der Ware und verdeckte Mängel unmittelbar nach deren Feststellung schriftlich mitteilt. Soweit ein rechtzeitig gerügter, nicht nur unerheblicher Mangel der Kaufsache vorliegt, sind wir nach unserer Wahl zur Mangelbeseitigung oder zur Ersatz<span class="s3">lieferung (Nacherfüllung) berechtigt.</span></p>
-<p class="p2">Wir übernehmen im Rahmen der Nacherfüllung in keinem Fall Ein- oder Ausbaukosten, wenn und soweit die Mangelhaftigkeit der Ware zum Zeitpunkt des Einbaus dem Besteller bekannt oder grob fahrlässig unbekannt geblieben <span class="s4">ist.</span></p>
-<p class="p2">Sind wir zur Mangelbeseitigung/Ersatzlieferung nicht bereit oder nicht in der Lage oder verzögert sich diese über angemessene Fristen hinaus aus Gründen, die wir zu vertreten haben, oder schlägt sie in sonstiger Weise fehl, so ist der Besteller nach seiner Wahl berechtigt, vom Vertrag zurückzutreten oder eine entsprechende Minderung des <span class="s3">Kaufpreises zu verlangen.</span></p>
-<p class="p2">Weitergehende Ansprüche des Bestellers, gleich aus welchem Rechtsgrund, sind nach näherer Maßgabe der Regelungen in nachstehender Ziffer 15 ausgeschlossen bzw. beschränkt.</p>
-<p class="p1">Die Verjährungsfristen für Mängelhaftungsansprüche beträgt 24 Monate ab Übergabe der Ware.</p>
-<p class="p1">Sollte es bei einer Mängelrüge zu unterschiedlichen Meinungen bezüglich des Kabelschaden kommen, gilt hier im Zweifelsfall nur die Expertise des VDE-Instituts selbst. Andere, auch akkreditierte Testlabore, akzeptieren wir nicht. Wir weisen ausdrücklich daraufhin, dass beim Verlegen des Kabels in den Graben oder in Rohren, bzw. in Bauwerke eine ständige Sichtkontrolle durch den Kabelverleger vorzunehmen ist, ob Auffälligkeiten zu vermerken sind. Eine spätere Reklamation, die fahrlässiges Verhalten vermuten lässt, schränkt sich damit ein.</p>
+## 6. Order change / Order cancellation
 
-<h3 class="p1"><span class="s1">15.</span> Schadenersatz <span class="s3">| </span>Gesamthaftung</h3>
-<p class="p2">Wir haften unbeschränkt nur für Vorsatz und grobe Fahrlässigkeit sowie für Schäden aus einer Verletzung von Leben, Körper oder Gesundheit, die auf mindestens fahrlässiger Pflichtverletzung unsererseits oder unserer gesetzlichen Vertreter oder Erfüllungsgehilfen beruhen; ebenso haften wir unbeschränkt im Fall von uns übernommenen bzw. abgegebenen Garantien und Zusicherungen, sofern ein davon umfasster Mangel unsere Haftung auslöst sowie im Fall einer Haftung nach dem Produkthaftungsgesetz oder sonstigen Gefährdungshaftungstatbeständen. Im Fall sonstiger schuldhafter Verletzung wesentlicher Vertragspflichten („Kardinalpflichten“) ist unsere verbleibende Haftung auf den vertragstypischen vorhersehbaren Schaden beschränkt. Mangelfolgeschäden sowie entgangener Gewinn schließen wir grundsätzlich aus.</p>
+After order confirmation, changes to confirmed orders are only accepted after examination and separate express consent by us. We reserve the right in all order changes to charge the additional effort caused by the change, such as processing costs or disposal costs in the bill.
 
-<h3 class="p1"><span class="s1">16.</span> Kabeltrommeln</h3>
-<p class="p2">Unsere Kabel werden auf stabilen Vollholztrommeln geliefert. Auf Wunsch vermitteln wir Ihnen Partner, die diese Trommeln gegen eine Gebühr abholen.</p>
+## 7. Retention of title
 
-<h3 class="p1"><span class="s1">17.</span> Sonstiges</h3>
-<p class="p2">Es gilt ausschließlich das Recht der Bundesrepublik Deutschland unter Ausschluss des UN-Kaufrechts (CISG). Gerichtsstand ist nach unserer Wahl Stuttgart, der Erfüllungsort der Lieferverpflichtung oder das für den Sitz des Bestellers zuständige Gericht, sofern der Besteller Kaufmann, juristische Person des öffentlichen Rechts oder öffentlich-rechtliches Sondervermögen ist oder keinen allgemeinen Gerichtsstand im Inland hat.</p>
-<p class="p2">Mit der Veröffentlichung der vorliegenden L&amp;Z im Internet werden alle von uns früher verwendeten Bedingungen gegenstandslos.</p>
+We retain title to the goods delivered by us – hereinafter: reserved goods – until full settlement of all our claims from the business relationship with the orderer. The retention of title also remains in effect if individual claims are included in a running account (current account reservation).
 
-<p class="p1"><a href="/uploads/2025/01/agbs.pdf">Download als PDF</a></p>
+## 8. Payment terms | Offsetting | Right of retention
+
+Our invoices are payable 10 days after invoice date without any deduction. Invoicing or date is basically the day of handover to the forwarder as far as we deliver from our German warehouses. Otherwise, in the case of direct imports, the day of customs clearance, which is close to the delivery day, applies. In case of non-compliance with the agreed payment terms, we are entitled to calculate interest at a rate of 7 percentage points above the base interest rate; the right to assert further damages, in particular proven higher interest, remains unaffected by this.
+
+## 9. Delivery reservation | Partial deliveries
+
+All delivery promises on our part are subject, unless otherwise expressly agreed in writing, to the reservation of correct and timely delivery by our producers. We reserve the right to partial deliveries at any time. In addition, we reserve the right to industry-standard over- or underdeliveries up to 10% of the ordered quantity.
+
+## 10. Delivery periods and dates
+
+The delivery period is individually agreed or stated by us upon acceptance of the order. If we cannot meet binding delivery periods for reasons for which we are not responsible (non-availability of the service), we will inform the customer of this immediately and at the same time communicate the expected new delivery period. If the service is also not available within the new delivery period, we are entitled to withdraw from the contract in whole or in part. An already rendered consideration of the customer will be refunded immediately. Non-availability of the service exists, for example, in case of non-timely self-supply by our supplier, if we have concluded a congruent covering transaction, in case of other disruptions in the supply chain due to force majeure or if we are not obliged to procure in individual cases.
+
+The occurrence of our delivery delay is determined according to the legal provisions. In any case, however, a dunning by the buyer is required.
+
+The legal rights remain otherwise unaffected.
+
+Fixed transactions require the express written designation as such. Otherwise, the orderer is always obliged to set us a reasonable grace period in writing if promised dates and/or periods are not met. If the grace period is also not met, the orderer is entitled to withdraw from the contract.
+
+In case of force majeure and/or other unforeseeable extraordinary and/or unavoidable circumstances, even if they occur at our supplier, a promised delivery period is extended until the remediation of the aforementioned event. If this point in time is not foreseeable, both the orderer and we are entitled to withdraw from the concluded contract. In this case, both sides' claims for damages are excluded. We undertake, upon becoming aware of the aforementioned circumstances, to inform the orderer hereof immediately to notify.
+
+If compliance with a date depends on the orderer providing certain information and/or plans, release declarations or similar, the delivery period only begins to run from the point in time at which the complete information of the orderer is available to us in writing. If the delivery is postponed beyond the contractually foreseen point in time at the request of the orderer, we can, starting with a period of at least 10 working days after notification of readiness for shipment, charge the orderer a storage fee of 2% of the invoice amount for each month started, however maximum 10% in total.
+
+## 11. Call-off orders
+
+If a call-off order is issued to us and no separate written agreements are made about the call-off dates, the orderer is obliged to inform us of the individual call-off dates in such a way that between receipt of the call-off notification with us and delivery at least 14 working days and the last delivery at the latest 90 days after our order confirmation lie.
+
+## 12. Dimension and weight specifications
+
+All information about diameter, weight, technical design, manufacture and scope of the goods to be delivered by us are subject to the reservation of deviation within the commercially usual permissible tolerances. Furthermore, we reserve the right to make changes that serve technical improvement at any time. Color deviations and/or deviations in the external characteristics of the goods to be delivered by us, which however leave their quality and technical effectiveness unaffected, do not give rise to any claims for defects by the orderer.
+
+## 13. Transfer of risk and burden
+
+Delivery is made DAP free destination Germany, where the place of performance for delivery and any subsequent performance is also located.
+
+If the ordered goods are made ready for shipment by us and/or the dispatch and/or the call-off is delayed for reasons for which the orderer is responsible, we are entitled to demand compensation for the damage resulting therefrom including additional expenses for storage. For this, we calculate a flat-rate compensation of 2% of the invoice amount for each month started, however maximum 10% in total, starting with the delivery period or – lacking a delivery period – with the notification of readiness for shipment of the goods.
+
+Proof of higher damage and our legal claims (in particular compensation for additional expenses, reasonable compensation, termination) remain unaffected; the flat-rate is however to be credited against further monetary claims. The orderer is permitted to prove that no damage or only a substantially lower damage than the aforementioned flat-rate has arisen for us. Returns to us, which have not been confirmed by us in writing beforehand, are at the sole risk of the orderer.
+
+## 14. Liability for defects
+
+We are only liable for compliance with objective requirements for the goods if and insofar as no quality agreement has been concluded between the orderer and us. The subjective requirements to be met take precedence over the objective requirements to be met. In case of doubt, the agreed requirements for the goods result from the data sheet provided by us. Individual, not always unavoidable marginal deviations may be remedied by repairs, such as sleeve cuffs.
+
+Any claims for defects by the orderer presuppose that the orderer checks the goods sent to him immediately, i.e. usually immediately upon delivery (still in the presence of the carrier) for their proper condition and notifies us of visible defects to be recorded immediately after receipt of the goods and hidden defects immediately after their discovery in writing. Insofar as a timely, not only insignificant defect of the purchase item exists, we are entitled at our choice to remedy the defect or to make an replacement delivery (subsequent performance).
+
+We do not assume any installation or removal costs within the scope of subsequent performance, if and insofar as the defectiveness of the goods was known to the orderer at the time of installation or grossly negligent unknown remained.
+
+If we are not willing or able to remedy the defect/make a replacement delivery or if this is delayed beyond reasonable periods for reasons for which we are responsible, or if it fails in any other way, the orderer is entitled at his choice to withdraw from the contract or to demand a corresponding reduction of the purchase price.
+
+Further claims of the orderer, regardless of the legal basis, are excluded or limited according to the detailed provisions in the following item 15.
+
+The limitation periods for claims for defects are 24 months from delivery of the goods.
+
+If there are different opinions regarding cable damage in the event of a defect notification, only the expertise of the VDE Institute itself applies in case of doubt. We do not accept other, even accredited test laboratories.
+
+We expressly point out that when laying the cable in the trench or in pipes, or in buildings, a constant visual inspection must be carried out by the cable layer to check for any noticeable features. A later complaint that suggests negligent behavior is thus restricted. This also applies to the acceptance of the goods, where obvious damage must be communicated directly. Subsequent claims after acceptance of a faultless delivery must be proven in detail.
+
+## 15. Damages | Total liability
+
+We are liable without limitation only for intent and gross negligence as well as for damage resulting from a violation of life, body or health, which is based on at least negligent breach of duty on our part or on the part of our legal representatives or vicarious agents; we are also liable without limitation in the case of guarantees and assurances assumed or given by us, insofar as a defect covered by them triggers our liability, as well as in the case of liability under the Product Liability Act or other risk liability provisions. In the case of other culpable violation of essential contractual obligations ("cardinal obligations"), our remaining liability is limited to the contract-typical foreseeable damage. Consequential damages as well as lost profits are fundamentally excluded.
+
+## 16. Cable drums
+
+Our cables are delivered on stable solid wood drums. Upon request, we will mediate partners who will pick up these drums for a fee.
+
+## 17. Other
+
+Only the law of the Federal Republic of Germany applies, excluding the UN Convention on Contracts for the International Sale of Goods (CISG). The place of jurisdiction is at our choice Stuttgart, the place of performance for the delivery obligation or the court responsible for the seat of the orderer, provided the orderer is a merchant, a legal person under public law or a public-law special asset or has no general place of jurisdiction in Germany.
+
+With the publication of these DPT on the Internet, all previously used conditions of ours become void.
+
+Remshalden, January 28, 2026
+
+[Download as PDF](/AGB-KLZ-1-2026.pdf)

data/products/de/h1z2z2-k.mdx

@@ -10,6 +10,12 @@ categories:
   - Solarkabel
 images:
   - /uploads/2025/06/H1Z2Z2-K-scaled.webp
+application: >
+  Das H1Z2Z2-K entspricht der Norm DIN EN 50618 (VDE 0283-618) und ist speziell für die
+  Verkabelung von Photovoltaiksystemen konzipiert. Es kann fest verlegt oder flexibel
+  geführt werden – im Gebäude, im Freien, in Industrieanlagen, landwirtschaftlichen
+  Betrieben oder sogar in explosionsgefährdeten Bereichen. Die Leitung ist UV-, ozon-
+  und wasserbeständig (AD7) und darf direkt in der Erde verlegt werden.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/n2x2y.mdx

@@ -10,6 +10,12 @@ categories:
   - Niederspannungskabel
 images:
   - /uploads/2025/01/N2X2Y-scaled.webp
+application: >
+  Das N2X2Y entspricht den Normen HD 603 S1 Teil 5G und HD 627 S1 Teil 4H (gleichlautend
+  mit DIN VDE 0276-603 und -627) und ist für eine Betriebsfrequenz von 50 Hz ausgelegt.
+  Es eignet sich für die feste Verlegung in Innenräumen, im Erdreich, im Freien und in
+  Industrieumgebungen mit hohen Temperatur- und Belastungsanforderungen. Die maximale
+  Betriebstemperatur liegt bei +90 °C, im Kurzschlussfall sind +250 °C zulässig.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/n2xfk2y.mdx

@@ -9,6 +9,12 @@ description: >
 categories:
   - Hochspannungskabel
 images: []
+application: >
+  Die N2X(F)K2Y-Hochspannungskabelserie ist speziell für den Einsatz in
+  Hochspannungsanwendungen konzipiert, wobei sie eine optimale Leistung durch die
+  Verwendung von hochleitfähigem Kupfer und einer fortschrittlichen XLPE-Isolierung
+  bietet. Diese Kombination gewährleistet eine hohe Durchschlagsfestigkeit und eine
+  effiziente Thermozyklierung unter verschiedenen Betriebsbedingungen.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/n2xfkld2y.mdx

@@ -9,6 +9,13 @@ description: >
 categories:
   - Hochspannungskabel
 images: []
+application: >
+  Die N2X(F)KLD2Y-Hochspannungskabel Serie 2 sind speziell für den Einsatz in
+  Hochspannungsanwendungen konzipiert, wobei sie eine optimale Leistung durch die
+  Verwendung von hochleitfähigen Kupferleitern und einer fortschrittlichen
+  XLPE-Isolierung bieten. Diese Kabelserie ist besonders geeignet für anspruchsvolle
+  industrielle Umgebungen, wo hohe Durchschlagsfestigkeit und
+  Thermozyklierungsfähigkeit erforderlich sind.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/n2xs2y.mdx

@@ -10,6 +10,12 @@ categories:
   - Mittelspannungskabel
 images:
   - /uploads/2025/01/N2XS2Y-scaled.webp
+application: >
+  Das N2XS2Y erfüllt die Normen DIN VDE 0276-620, HD 620 S2 und IEC 60502. Es eignet sich
+  zur Verlegung in Innenräumen, Kabelkanälen, im Freien, im Wasser, auf Kabelpritschen
+  und insbesondere im Erdreich. Aufgrund seines widerstandsfähigen Mantels wird es
+  häufig in Industrieanlagen, Kraftwerken und Schaltstationen eingesetzt, wo Stabilität
+  und Langlebigkeit gefordert sind.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/n2xsf2y.mdx

@@ -10,6 +10,12 @@ categories:
   - Mittelspannungskabel
 images:
   - /uploads/2025/01/N2XSF2Y-3-scaled.webp
+application: >
+  Das N2XS(F)2Y erfüllt die gängigen Normen DIN VDE 0276-620, HD 620 S2 und IEC 60502 und
+  ist für die Verlegung in Innenräumen, Kabelkanälen, im Freien, in Wasser, Erde und auf
+  Kabelpritschen geeignet. Besonders in EVU-Netzen, Industrieanlagen und Kraftwerken
+  spielt dieses Kabel seine Stärken aus – überall dort, wo Langlebigkeit,
+  Wasserdichtigkeit und Sicherheit gefragt sind.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/n2xsfl2y-hv.mdx

@@ -10,6 +10,12 @@ categories:
   - Hochspannungskabel
 images:
   - /uploads/2025/06/N2XSFL2Y-3-scaled.webp
+application: >
+  Das N2XS(FL)2Y ist konzipiert für die Verlegung im Erdreich, in Kabelkanälen, in Rohren,
+  im Freien und in Innenräumen. Es entspricht der Norm IEC 60840 und lässt sich
+  individuell auf projektspezifische Anforderungen anpassen. Typisch eingesetzt wird es
+  in Übertragungsnetzen, Umspannwerken und großen Industrieanlagen, wo maximale
+  Zuverlässigkeit gefordert ist.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/n2xsfl2y-mv.mdx

@@ -10,6 +10,12 @@ categories:
   - Mittelspannungskabel
 images:
   - /uploads/2025/01/N2XSFL2Y-2-scaled.webp
+application: >
+  Das N2XS(FL)2Y erfüllt die Standards DIN VDE 0276-620, HD 620 S2 und IEC 60502. Es
+  eignet sich hervorragend für die Verlegung in Innenräumen, Kabelkanälen, im Freien, in
+  Erde, im Wasser sowie auf Kabelpritschen – insbesondere in EVU-Netzen,
+  Industrieanlagen und Schaltstationen, wo erhöhte Anforderungen an mechanische
+  Belastbarkeit und Wasserdichtigkeit bestehen.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/n2xsy.mdx

@@ -10,6 +10,12 @@ categories:
   - Mittelspannungskabel
 images:
   - /uploads/2025/01/N2XSY-scaled.webp
+application: >
+  Das N2XSY erfüllt die Normen DIN VDE 0276-620, HD 620 S2 und IEC 60502. Es ist
+  ausgelegt für die Verlegung in Innenräumen, Kabelkanälen, im Wasser, im Erdreich oder
+  im Freien (bei geschützter Installation). Ob in Industrieanlagen, Kraftwerken oder
+  Schaltanlagen – dieses Kabel sorgt für eine sichere und verlustarme
+  Energieübertragung im Mittelspannungsbereich.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/n2xy.mdx

@@ -10,6 +10,13 @@ categories:
   - Niederspannungskabel
 images:
   - /uploads/2025/01/N2XY-scaled.webp
+application: >
+  Das N2XY wird in Niederspannungsanlagen zur Energieverteilung eingesetzt – zum Beispiel
+  in Kabeltrassen, Rohren, auf Wänden oder direkt im Erdreich. Es lässt sich sowohl im
+  Innen- als auch im Außenbereich installieren und ist auch für feuchte Umgebungen
+  geeignet. Dank verschiedener Aderkonfigurationen (einadrig bis vieradrig) und
+  Querschnitten bis 630 mm² lässt sich das Kabel flexibel an die jeweilige Anwendung
+  anpassen.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/na2x2y.mdx

@@ -10,6 +10,12 @@ categories:
   - Niederspannungskabel
 images:
   - /uploads/2025/01/NA2X2Y-scaled.webp
+application: >
+  Das NA2X2Y entspricht der Norm DIN VDE 0276-603 (HD 603) und ist ausgelegt für die
+  feste Verlegung in Innenräumen, Kabelkanälen, im Erdreich, im Wasser oder im Freien.
+  Es kommt bevorzugt in Kraftwerken, Industrieanlagen, Schaltanlagen und Ortsnetzen zum
+  Einsatz – überall dort, wo robuste Kabel gefragt sind, die im Betrieb und bei der
+  Verlegung hohen mechanischen Belastungen standhalten.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/na2xfk2y.mdx

@@ -9,6 +9,12 @@ description: >
 categories:
   - Hochspannungskabel
 images: []
+application: >
+  Die NA2X(F)K2Y-Hochspannungskabelserie ist speziell für den Einsatz in
+  Hochspannungsanwendungen entwickelt worden, wobei sie sich durch eine hohe
+  Strombelastbarkeit und exzellente Kurzschlussstromfestigkeit auszeichnet. Diese Kabel
+  sind mit einer fortschrittlichen XLPE-Isolierung ausgestattet, die eine hohe
+  Durchschlagsfestigkeit and Thermozyklierungsfähigkeit bietet.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/na2xfkld2y.mdx

@@ -9,6 +9,12 @@ description: >
 categories:
   - Hochspannungskabel
 images: []
+application: >
+  Die NA2X(F)KLD2Y-Hochspannungskabelserie ist für den Einsatz in
+  Hochspannungsanwendungen konzipiert und bietet eine optimale Lösung für
+  anspruchsvolle industrielle Umgebungen. Mit ihrer fortschrittlichen
+  XLPE-Isolierung und Kupferleitern erfüllt sie hohe Anforderungen an die
+  Durchschlagsfestigkeit und Thermozyklierung.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/na2xs2y.mdx

@@ -10,6 +10,12 @@ categories:
   - Mittelspannungskabel
 images:
   - /uploads/2025/01/NA2XS2Y-scaled.webp
+application: >
+  Das NA2XS2Y erfüllt die Normen DIN VDE 0276-620, HD 620 S2 und IEC 60502 und ist
+  speziell für die feste Verlegung in Innenräumen, Kabelkanälen, im Freien, in Erde und
+  in Wasser ausgelegt. Es findet seinen Einsatz in Industrieanlagen, Schaltstationen
+  und Kraftwerken, besonders dort, wo das Kabel beim Verlegen oder im Betrieb
+  mechanisch stark beansprucht wird.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/na2xsf2y.mdx

@@ -10,6 +10,12 @@ categories:
   - Mittelspannungskabel
 images:
   - /uploads/2025/01/NA2XSF2Y-3-scaled.webp
+application: >
+  Das NA2XS(F)2Y entspricht den Normen DIN VDE 0276-620, HD 620 S2 und IEC 60502. Es
+  eignet sich für die Verlegung in Innenräumen, Kabelkanälen, im Erdreich, im Wasser, im
+  Freien oder auf Kabelpritschen. Der Einsatzschwerpunkt liegt in EVU-Netzen,
+  Industrieanlagen und Umspannwerken, wo zusätzliche Sicherheitsreserven gegen
+  eindringende Feuchtigkeit und mechanische Belastung erforderlich sind.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/na2xsfl2y-hv.mdx

@@ -10,6 +10,12 @@ categories:
   - Hochspannungskabel
 images:
   - /uploads/2025/06/NA2XSFL2Y-3-scaled.webp
+application: >
+  Das NA2XS(FL)2Y erfüllt die Anforderungen der IEC 60840 und eignet sich für die
+  Verlegung im Erdreich, in Kabelkanälen, in Innenräumen, in Rohren und im Freien. Es
+  wird projektbezogen gefertigt und kommt insbesondere in Übertragungsnetzen,
+  Versorgungs-Infrastrukturen und Umspannwerken zum Einsatz, wo Sicherheit und
+  Langlebigkeit an erster Stelle stehen.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/na2xsfl2y-mv.mdx

@@ -10,6 +10,13 @@ categories:
   - Mittelspannungskabel
 images:
   - /uploads/2025/01/NA2XSFL2Y-3-scaled.webp
+application: >
+  Das NA2XS(FL)2Y erfüllt die Normen DIN VDE 0276-620, HD 620 S2 und IEC 60502. Es ist
+  ideal für die Verlegung in Energieversorgungsnetzen (EVU), Innenräumen, Kabelkanälen,
+  im Freien, in Erde und in Wasser geeignet. Dank seiner Konstruktion mit
+  längswasserdichter Ausführung und Alu-PE-Schichtenmantel bleibt es auch bei
+  Beschädigungen betriebssicher – der Wassereinfluss wird gezielt auf die Schadstelle
+  begrenzt.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/na2xsy.mdx

@@ -11,6 +11,12 @@ categories:
   - Mittelspannungskabel
 images:
   - /uploads/2025/01/NA2XSY-scaled.webp
+application: >
+  Das NA2XSY erfüllt die Anforderungen der Normen DIN VDE 0276-620, HD 620 S2 und IEC
+  60502. Es eignet sich für die Verlegung in Innenräumen, Kabelkanälen, im Erdreich, im
+  Wasser oder im Freien – allerdings nur bei geschützter Verlegung. Typische
+  Einsatzorte sind Industrieanlagen, Kraftwerke und Schaltanlagen, in denen
+  Mittelspannung mit hoher Betriebssicherheit transportiert werden muss.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/na2xy.mdx

@@ -10,6 +10,11 @@ categories:
   - Niederspannungskabel
 images:
   - /uploads/2025/01/NA2XY-scaled.webp
+application: >
+  Das NA2XY entspricht der Norm DIN VDE 0276-603 (HD 603) und ist ideal für die feste
+  Verlegung in Innenräumen, Kabelkanälen, im Freien, im Wasser oder im Erdreich
+  geeignet. Typische Einsatzorte sind Kraftwerke, Industrieanlagen, Schaltanlagen sowie
+  Ortsnetze, bei denen mechanische Belastung im Betrieb berücksichtigt werden muss.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/nay2y.mdx

@@ -11,6 +11,12 @@ categories:
   - Niederspannungskabel
 images:
   - /uploads/2025/01/NAY2Y-scaled.webp
+application: >
+  Das NAY2Y erfüllt die Anforderungen der Norm TP PRAKAB 12/03 in Anlehnung an VDE
+  0276-603 und eignet sich für die feste Verlegung in Innenräumen, Kabelkanälen, im
+  Erdreich, im Wasser und im Außenbereich. Es ist ideal für Anwendungen in Kraftwerken,
+  Industrie- und Schaltanlagen sowie in lokalen Versorgungsnetzen – überall dort, wo
+  mechanische Belastung im Betrieb oder bei der Verlegung eine Rolle spielt.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/naycwy.mdx

@@ -10,6 +10,12 @@ categories:
   - Niederspannungskabel
 images:
   - /uploads/2025/01/NAYCWY-scaled.webp
+application: >
+  Das NAYCWY entspricht der Norm DIN VDE 0276-603 (HD 603) und eignet sich für den
+  Einsatz in Kraftwerken, Industrieanlagen, Schaltanlagen und Ortsnetzen. Es lässt sich
+  fest verlegen – in Innenräumen, Kabelkanälen, im Freien, im Erdreich oder in Wasser.
+  Dank des konzentrischen Leiters bietet es zusätzlichen Schutz bei mechanischer
+  Beschädigung und ermöglicht eine sichere Potenzialführung.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/nayy.mdx

@@ -11,6 +11,12 @@ categories:
   - Niederspannungskabel
 images:
   - /uploads/2025/01/NAYY-scaled.webp
+application: >
+  Das NAYY ist ein Energieverteilungskabel nach VDE 0276-603, das sich besonders für
+  Anwendungen in Kraftwerken, Ortsnetzen, Industrie- und Schaltanlagen eignet. Dank
+  seiner robusten Konstruktion lässt es sich fest verlegen – sei es im Innenraum, im
+  Kabelkanal, im Freien oder im Erdreich. Auch bei Installation in Wasser bleibt das
+  Kabel zuverlässig im Betrieb.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/ny2y.mdx

@@ -10,6 +10,12 @@ categories:
   - Niederspannungskabel
 images:
   - /uploads/2025/01/NY2Y-scaled.webp
+application: >
+  Das NY2Y ist ein Niederspannungskabel für den Einsatz in Kraftwerken, Industrie- und
+  Schaltanlagen sowie in Ortsnetzen. Es eignet sich für die feste Verlegung in
+  Innenräumen, Kabelkanälen, im Freien, im Wasser und im Erdreich – überall dort, wo
+  starke mechanische Belastungen beim Verlegen und im Betrieb zu erwarten sind. Die
+  Konstruktion erfüllt die Vorgaben gemäß TP PRAKAB 16/03 in Anlehnung an VDE 0276-603.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{

data/products/de/nycwy.mdx

@@ -10,6 +10,13 @@ categories:
   - Niederspannungskabel
 images:
   - /uploads/2025/01/NYCWY-scaled.webp
+application: >
+  Das NYCWY gehört zu den klassischen Niederspannungskabeln nach VDE-Standard und ist
+  für Nennspannungen bis 1 kV ausgelegt. Es kommt überall dort zum Einsatz, wo Energie
+  zuverlässig verteilt werden muss – in Gebäuden, Industrieanlagen, Trafostationen oder
+  direkt im Erdreich. Auch in Kabeltrassen, Betonumgebungen oder unter Wasser lässt es
+  sich problemlos verlegen. Die Materialwahl sorgt dafür, dass dieses Kabel selbst
+  unter rauen Bedingungen durchhält – ganz ohne zusätzliche Schutzmaßnahmen.
 locale: de
 ---
 <ProductTabs technicalData={<ProductTechnicalData data={{