style(pdf): align AGB layout with technical datasheet hero and spacing

.gitea/workflows/deploy.yml

@@ -203,7 +203,7 @@ jobs:
       - name: 🐳 Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
       - name: 🔐 Registry Login
-        run: echo "${{ secrets.NPM_TOKEN }}" | docker login git.infra.mintel.me -u "${{ github.repository_owner }}" --password-stdin
+        run: echo "${{ secrets.REGISTRY_PASS }}" | docker login registry.infra.mintel.me -u "${{ secrets.REGISTRY_USER }}" --password-stdin
       - name: 🏗️ Build and Push
         uses: docker/build-push-action@v5
         with:
@@ -217,7 +217,7 @@ jobs:
             UMAMI_WEBSITE_ID=${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
             UMAMI_API_ENDPOINT=${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
             NPM_TOKEN=${{ secrets.NPM_TOKEN }}
-          tags: git.infra.mintel.me/mmintel/klz-2026:${{ needs.prepare.outputs.image_tag }}
+          tags: registry.infra.mintel.me/mintel/klz-2026:${{ needs.prepare.outputs.image_tag }}
           secrets: |
             "NPM_TOKEN=${{ secrets.NPM_TOKEN }}"
 
@@ -363,7 +363,7 @@ jobs:
           scp .env.deploy root@alpha.mintel.me:$SITE_DIR/$ENV_FILE
           scp docker-compose.yml root@alpha.mintel.me:$SITE_DIR/docker-compose.yml
           
-          ssh root@alpha.mintel.me "cd $SITE_DIR && echo '${{ secrets.NPM_TOKEN }}' | docker login git.infra.mintel.me -u '${{ github.repository_owner }}' --password-stdin"
+          ssh root@alpha.mintel.me "cd $SITE_DIR && echo '${{ secrets.REGISTRY_PASS }}' | docker login registry.infra.mintel.me -u '${{ secrets.REGISTRY_USER }}' --password-stdin"
           ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' pull"
           ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' up -d --remove-orphans"
           
@@ -576,6 +576,11 @@ jobs:
           Deploy: $DEPLOY | Smoke: $SMOKE | Perf: $PERF
           $URL"
 
+          if [[ -z "${{ secrets.GOTIFY_URL }}" || -z "${{ secrets.GOTIFY_TOKEN }}" ]]; then
+            echo "⚠️ Gotify credentials missing, skipping notification."
+            exit 0
+          fi
+
           curl -s -k -X POST "${{ secrets.GOTIFY_URL }}/message?token=${{ secrets.GOTIFY_TOKEN }}" \
             -F "title=$TITLE" \
             -F "message=$MESSAGE" \

.gitea/workflows/qa.yml

@@ -1,8 +1,6 @@
 name: Nightly QA
 
 on:
-  push:
-    branches: [main]
   schedule:
     - cron: '0 3 * * *'
   workflow_dispatch:
@@ -227,6 +225,11 @@ jobs:
           MESSAGE="Static: $STATIC | A11y: $A11Y | Lighthouse: $LIGHTHOUSE | Links: $LINKS
           ${{ env.TARGET_URL }}"
 
+          if [[ -z "${{ secrets.GOTIFY_URL }}" || -z "${{ secrets.GOTIFY_TOKEN }}" ]]; then
+            echo "⚠️ Gotify credentials missing, skipping notification."
+            exit 0
+          fi
+
           curl -s -k -X POST "${{ secrets.GOTIFY_URL }}/message?token=${{ secrets.GOTIFY_TOKEN }}" \
             -F "title=$TITLE" \
             -F "message=$MESSAGE" \

Dockerfile

@@ -1,5 +1,9 @@
 # Stage 1: Builder
-FROM git.infra.mintel.me/mmintel/nextjs:v1.8.20 AS base
+FROM node:20-alpine AS base
+RUN apk add --no-cache libc6-compat curl
+
+# Enable pnpm
+RUN corepack enable && corepack prepare pnpm@10.3.0 --activate
 WORKDIR /app
 
 # Arguments for build-time configuration
@@ -52,12 +56,17 @@ ENV UV_THREADPOOL_SIZE=3
 RUN pnpm build
 
 # Stage 2: Runner
-FROM git.infra.mintel.me/mmintel/runtime:v1.8.20 AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
+# Install curl for health checks
+RUN apk add --no-cache curl
+
 # Create nextjs user and group (standardized in runtime image but ensuring local ownership)
-USER root
-RUN chown -R nextjs:nodejs /app
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs && \
+    chown -R nextjs:nodejs /app
+
 USER nextjs
 
 ENV HOSTNAME="0.0.0.0"

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

@@ -1,4 +1,4 @@
-import { notFound, redirect } from 'next/navigation';
+import { notFound, redirect, permanentRedirect } from 'next/navigation';
 import { Container, Badge, Heading } from '@/components/ui';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
@@ -62,6 +62,15 @@ export default async function StandardPage({ params }: PageProps) {
     notFound();
   }
 
+  // Handle explicit CMS redirects (e.g. /en/terms -> /de/terms)
+  if (pageData.redirectUrl) {
+    if (pageData.redirectPermanent) {
+      permanentRedirect(pageData.redirectUrl);
+    } else {
+      redirect(pageData.redirectUrl);
+    }
+  }
+
   // Redirect if accessed via a different locale's slug
   const fileSlug = await mapSlugToFileSlug(pageData.slug || slug, locale);
   const correctSlug = await mapFileSlugToTranslated(fileSlug, locale);

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

@@ -134,13 +134,13 @@ export default async function BlogPost({ params }: BlogPostProps) {
                   <span>{getReadingTime(rawTextContent)} min read</span>
                   {(new Date(post.frontmatter.date) > new Date() ||
                     post.frontmatter.public === false) && (
-                    <>
-                      <span className="w-1 h-1 bg-white/30 rounded-full" />
-                      <span className="px-2 py-0.5 border border-white/40 text-white/80 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold">
-                        Draft Preview
-                      </span>
-                    </>
-                  )}
+                      <>
+                        <span className="w-1 h-1 bg-white/30 rounded-full" />
+                        <span className="px-2 py-0.5 border border-white/40 text-white/80 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold">
+                          Draft Preview
+                        </span>
+                      </>
+                    )}
                 </div>
               </div>
             </div>
@@ -171,13 +171,13 @@ export default async function BlogPost({ params }: BlogPostProps) {
               <span>{getReadingTime(rawTextContent)} min read</span>
               {(new Date(post.frontmatter.date) > new Date() ||
                 post.frontmatter.public === false) && (
-                <>
-                  <span className="w-1 h-1 bg-neutral-300 rounded-full" />
-                  <span className="px-2 py-0.5 border border-orange-500/50 text-orange-600 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold">
-                    Draft Preview
-                  </span>
-                </>
-              )}
+                  <>
+                    <span className="w-1 h-1 bg-neutral-300 rounded-full" />
+                    <span className="px-2 py-0.5 border border-orange-500/50 text-orange-600 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold">
+                      Draft Preview
+                    </span>
+                  </>
+                )}
             </div>
           </div>
         </header>

app/[locale]/layout.tsx

@@ -7,8 +7,10 @@ import AnalyticsShell from '@/components/analytics/AnalyticsShell';
 import { Metadata, Viewport } from 'next';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages } from 'next-intl/server';
+import { Suspense } from 'react';
 import '../../styles/globals.css';
 import { SITE_URL } from '@/lib/schema';
+import { config } from '@/lib/config';
 import FeedbackClientWrapper from '@/components/FeedbackClientWrapper';
 import { setRequestLocale } from 'next-intl/server';
 import { Inter } from 'next/font/google';
@@ -59,7 +61,6 @@ export const viewport: Viewport = {
   themeColor: '#001a4d',
 };
 
-import AutoBrochureModal from '@/components/AutoBrochureModal';
 export default async function Layout(props: {
   children: React.ReactNode;
   params: Promise<{ locale: string }>;
@@ -76,7 +77,7 @@ export default async function Layout(props: {
   let messages: Record<string, any> = {};
   try {
     messages = await getMessages();
-  } catch {
+  } catch (error) {
     messages = {};
   }
 
@@ -90,7 +91,6 @@ export default async function Layout(props: {
     'Home',
     'Error',
     'StandardPage',
-    'Brochure',
   ];
   const clientMessages: Record<string, any> = {};
   for (const key of clientKeys) {
@@ -132,11 +132,7 @@ export default async function Layout(props: {
   const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
 
   return (
-    <html
-      lang={safeLocale}
-      className={`scroll-smooth overflow-x-hidden ${inter.variable}`}
-      data-scroll-behavior="smooth"
-    >
+    <html lang={safeLocale} className={`overflow-x-hidden ${inter.variable}`}>
       <head>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
@@ -160,8 +156,6 @@ export default async function Layout(props: {
 
           <AnalyticsShell />
           <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />
-
-          <AutoBrochureModal />
         </NextIntlClientProvider>
       </body>
     </html>

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

@@ -2,12 +2,11 @@ import JsonLd from '@/components/JsonLd';
 import { SITE_URL } from '@/lib/schema';
 import ProductSidebar from '@/components/ProductSidebar';
 import ProductTabs from '@/components/ProductTabs';
-import ExcelDownload from '@/components/ExcelDownload';
 import ProductTechnicalData from '@/components/ProductTechnicalData';
 import RelatedProducts from '@/components/RelatedProducts';
 import DatasheetDownload from '@/components/DatasheetDownload';
 import { Badge, Card, Container, Heading, Section } from '@/components/ui';
-import { getDatasheetPath, getExcelDatasheetPath } from '@/lib/datasheets';
+import { getDatasheetPath } from '@/lib/datasheets';
 import { getAllProducts, getProductBySlug } from '@/lib/products';
 import { mapFileSlugToTranslated, mapSlugToFileSlug } from '@/lib/slugs';
 import { Metadata } from 'next';
@@ -279,7 +278,6 @@ export default async function ProductPage({ params }: ProductPageProps) {
   }
 
   const datasheetPath = getDatasheetPath(productSlug, locale);
-  const excelPath = getExcelDatasheetPath(productSlug, locale);
   const isFallback = (product.frontmatter as any).isFallback;
   const categorySlug = slug[0];
   const categoryFileSlug = await mapSlugToFileSlug(categorySlug, locale);
@@ -345,7 +343,6 @@ export default async function ProductPage({ params }: ProductPageProps) {
       productName={product.frontmatter.title}
       productImage={product.frontmatter.images?.[0]}
       datasheetPath={datasheetPath}
-      excelPath={excelPath}
     />
   );
 
@@ -499,15 +496,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
                   </h2>
                   <div className="h-1.5 w-24 bg-accent rounded-full" />
                 </div>
-                <div className="flex flex-row flex-wrap items-center gap-4 max-w-2xl">
-                  <DatasheetDownload
-                    datasheetPath={datasheetPath}
-                    className="mt-0 w-full sm:w-auto"
-                  />
-                  {excelPath && (
-                    <ExcelDownload excelPath={excelPath} className="mt-0 w-full sm:w-auto" />
-                  )}
-                </div>
+                <DatasheetDownload datasheetPath={datasheetPath} />
               </div>
             )}
 

app/actions/brochure.ts

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

app/actions/contact.ts

@@ -25,14 +25,6 @@ export async function sendContactFormAction(formData: FormData) {
   // Track attempt
   services.analytics.track('contact-form-attempt');
 
-  // Anti-spam Honeypot Check
-  const honeypot = formData.get('company_website') as string;
-  if (honeypot) {
-    logger.warn('Spam detected via honeypot in contact request', { email: formData.get('email') });
-    // Silently succeed to fool the bot without doing actual work
-    return { success: true };
-  }
-
   const name = formData.get('name') as string;
   const email = formData.get('email') as string;
   const message = formData.get('message') as string;

app/api/pages/[slug]/pdf/route.tsx

@@ -0,0 +1,64 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getPayload } from 'payload';
+import configPromise from '@payload-config';
+import { renderToStream } from '@react-pdf/renderer';
+import React from 'react';
+import { PDFPage } from '@/lib/pdf-page';
+
+export async function GET(req: NextRequest, { params }: { params: Promise<{ slug: string }> }) {
+  try {
+    const { slug } = await params;
+
+    // Get Payload App
+    const payload = await getPayload({ config: configPromise });
+
+    // Fetch the page
+    const pages = await payload.find({
+      collection: 'pages',
+      where: {
+        slug: { equals: slug },
+        _status: { equals: 'published' },
+      },
+      limit: 1,
+    });
+
+    if (pages.totalDocs === 0) {
+      return new NextResponse('Page not found', { status: 404 });
+    }
+
+    const page = pages.docs[0];
+
+    // Determine locale from searchParams or default to 'de'
+    const searchParams = req.nextUrl.searchParams;
+    const locale = (searchParams.get('locale') as 'en' | 'de') || 'de';
+
+    // Render the React-PDF document into a stream
+    const stream = await renderToStream(<PDFPage page={page} locale={locale} />);
+
+    // Pipe the Node.js Readable stream into a valid fetch/Web Response stream
+    const body = new ReadableStream({
+      start(controller) {
+        stream.on('data', (chunk) => controller.enqueue(chunk));
+        stream.on('end', () => controller.close());
+        stream.on('error', (err) => controller.error(err));
+      },
+      cancel() {
+        (stream as any).destroy?.();
+      },
+    });
+
+    const filename = `${slug}.pdf`;
+
+    return new NextResponse(body, {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/pdf',
+        'Content-Disposition': `attachment; filename="${filename}"`,
+        // Cache control if needed, skip for now.
+      },
+    });
+  } catch (error) {
+    console.error('Error generating PDF:', error);
+    return new NextResponse('Internal Server Error', { status: 500 });
+  }
+}

components/AutoBrochureModal.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import dynamic from 'next/dynamic';
-
-const BrochureModal = dynamic(() => import('./BrochureModal'), { ssr: false });
-
-export default function AutoBrochureModal() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    // Check if user has already seen or interacted with the modal
-    const hasSeenModal = localStorage.getItem('klz_brochure_modal_seen');
-
-    if (!hasSeenModal) {
-      // Auto-open after 5 seconds to not interrupt immediate page load
-      const timer = setTimeout(() => {
-        setIsOpen(true);
-        // Mark as seen so it doesn't bother them again on next page load
-        localStorage.setItem('klz_brochure_modal_seen', 'true');
-      }, 5000);
-
-      return () => clearTimeout(timer);
-    }
-  }, []);
-
-  return <BrochureModal isOpen={isOpen} onClose={() => setIsOpen(false)} />;
-}

components/BrochureCTA.tsx

@@ -1,88 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useTranslations } from 'next-intl';
-import { cn } from '@/components/ui/utils';
-import dynamic from 'next/dynamic';
-
-const BrochureModal = dynamic(() => import('./BrochureModal'), { ssr: false });
-
-interface Props {
-  className?: string;
-  compact?: boolean;
-}
-
-/**
- * BrochureCTA — Shows a button that opens a modal asking for an email address.
- * The full-catalog PDF is ONLY revealed after email submission.
- * No direct download link is exposed anywhere.
- */
-export default function BrochureCTA({ className, compact = false }: Props) {
-  const t = useTranslations('Brochure');
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <div className={cn(className)}>
-        <button
-          type="button"
-          onClick={() => setOpen(true)}
-          className={cn(
-            'group relative flex w-full items-center gap-4 overflow-hidden rounded-[28px] bg-[#000d26] border border-white/[0.08] text-left cursor-pointer',
-            'transition-all duration-300 hover:border-[#82ed20]/30 hover:shadow-[0_8px_30px_rgba(0,0,0,0.3)]',
-            compact ? 'p-4 md:p-5' : 'p-6 md:p-8',
-          )}
-        >
-          {/* Green top accent */}
-          <span className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#82ed20]/50 to-transparent" />
-
-          {/* Icon */}
-          <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#82ed20]/10 border border-[#82ed20]/20 group-hover:bg-[#82ed20] transition-colors duration-300">
-            <svg
-              className="h-5 w-5 text-[#82ed20] group-hover:text-[#000d26] transition-colors duration-300"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-              />
-            </svg>
-          </span>
-
-          {/* Labels */}
-          <span className="flex-1 min-w-0">
-            <span className="block text-[9px] font-black uppercase tracking-[0.2em] text-[#82ed20] mb-0.5">
-              PDF Katalog
-            </span>
-            <span
-              className={cn(
-                'block font-black text-white uppercase tracking-tight group-hover:text-[#82ed20] transition-colors duration-200',
-                compact ? 'text-base' : 'text-lg md:text-xl',
-              )}
-            >
-              {t('ctaTitle')}
-            </span>
-          </span>
-
-          {/* Arrow */}
-          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-[#82ed20] group-hover:text-[#000d26] transition-all duration-300">
-            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2.5}
-                d="M9 5l7 7-7 7"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-
-      <BrochureModal isOpen={open} onClose={() => setOpen(false)} />
-    </>
-  );
-}

components/BrochureModal.tsx

@@ -1,254 +0,0 @@
-'use client';
-
-import { useState, useRef, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { useTranslations, useLocale } from 'next-intl';
-import { cn } from '@/components/ui/utils';
-import { requestBrochureAction } from '@/app/actions/brochure';
-import { useAnalytics } from './analytics/useAnalytics';
-import { AnalyticsEvents } from './analytics/analytics-events';
-
-interface BrochureModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export default function BrochureModal({ isOpen, onClose }: BrochureModalProps) {
-  const t = useTranslations('Brochure');
-  const locale = useLocale();
-  const { trackEvent } = useAnalytics();
-  const formRef = useRef<HTMLFormElement>(null);
-  const modalRef = useRef<HTMLDivElement>(null);
-  const [state, setState] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
-  const [errorMsg, setErrorMsg] = useState('');
-
-  // Close on escape + lock scroll + focus trap
-  useEffect(() => {
-    if (!isOpen) return;
-
-    // Auto-focus input when opened
-    const firstInput = document.getElementById('brochure-email');
-    if (firstInput) {
-      setTimeout(() => firstInput.focus(), 50);
-    }
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-
-      if (e.key === 'Tab' && modalRef.current) {
-        const focusable = modalRef.current.querySelectorAll(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-        ) as NodeListOf<HTMLElement>;
-
-        if (focusable.length > 0) {
-          const first = focusable[0];
-          const last = focusable[focusable.length - 1];
-
-          if (e.shiftKey && document.activeElement === first) {
-            last.focus();
-            e.preventDefault();
-          } else if (!e.shiftKey && document.activeElement === last) {
-            first.focus();
-            e.preventDefault();
-          }
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    // Strict overflow lock on mobile as well
-    document.body.style.setProperty('overflow', 'hidden', 'important');
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.body.style.overflow = '';
-    };
-  }, [isOpen, onClose]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!formRef.current) return;
-
-    setState('submitting');
-    setErrorMsg('');
-
-    try {
-      const formData = new FormData(formRef.current);
-      formData.set('locale', locale);
-
-      const result = await requestBrochureAction(formData);
-
-      if (result.success) {
-        setState('success');
-        trackEvent(AnalyticsEvents.DOWNLOAD, {
-          file_name: `klz-product-catalog-${locale}.pdf`,
-          file_type: 'brochure',
-          location: 'brochure_modal',
-        });
-      } else {
-        setState('error');
-        setErrorMsg(result.error || 'Something went wrong');
-      }
-    } catch {
-      setState('error');
-      setErrorMsg('Network error');
-    }
-  };
-
-  const handleClose = () => {
-    setState('idle');
-    setErrorMsg('');
-    onClose();
-  };
-
-  if (!isOpen) return null;
-
-  const modal = (
-    <div
-      className="fixed inset-0 z-[9999] flex items-center justify-center p-4"
-      role="dialog"
-      aria-modal="true"
-    >
-      {/* Backdrop */}
-      <div
-        className="absolute inset-0 bg-black/70 backdrop-blur-sm"
-        onClick={handleClose}
-        aria-hidden="true"
-      />
-
-      {/* Modal Panel */}
-      <div
-        ref={modalRef}
-        className="relative z-10 w-full max-w-md rounded-[28px] bg-[#000d26] border border-white/10 shadow-[0_40px_80px_rgba(0,0,0,0.6)] overflow-hidden"
-      >
-        {/* Accent bar at top */}
-        <div className="h-1 w-full bg-gradient-to-r from-[#82ed20] via-[#5cb516] to-[#82ed20]" />
-
-        {/* Close Button */}
-        <button
-          type="button"
-          onClick={handleClose}
-          className="absolute top-4 right-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/5 text-white/40 hover:bg-white/10 hover:text-white transition-colors cursor-pointer"
-          aria-label={t('close')}
-        >
-          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
-        </button>
-
-        <div className="p-8 pt-7">
-          {/* Icon + Header */}
-          <div className="mb-7">
-            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#82ed20]/10 border border-[#82ed20]/20 mb-4">
-              <svg
-                className="h-6 w-6 text-[#82ed20]"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={1.5}
-                  d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-                />
-              </svg>
-            </div>
-            <h2 className="text-2xl font-black text-white uppercase tracking-tight leading-none mb-2">
-              {t('title')}
-            </h2>
-            <p className="text-sm text-white/50 leading-relaxed">{t('subtitle')}</p>
-          </div>
-
-          {state === 'success' ? (
-            <div>
-              <div className="flex items-center gap-3 mb-6 p-4 rounded-2xl bg-[#82ed20]/10 border border-[#82ed20]/20">
-                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-[#82ed20]/20">
-                  <svg
-                    className="h-5 w-5 text-[#82ed20]"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M5 13l4 4L19 7"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <p className="text-sm font-bold text-[#82ed20]">
-                    {locale === 'de' ? 'Erfolgreich gesendet' : 'Successfully sent'}
-                  </p>
-                  <p className="text-xs text-white/50 mt-0.5">
-                    {locale === 'de'
-                      ? 'Bitte prüfen Sie Ihren Posteingang.'
-                      : 'Please check your inbox.'}
-                  </p>
-                </div>
-              </div>
-              <button
-                type="button"
-                onClick={handleClose}
-                className="flex items-center justify-center gap-3 w-full py-4 px-6 rounded-2xl bg-white/10 hover:bg-white/20 text-white font-black text-sm uppercase tracking-widest transition-colors"
-              >
-                {t('close')}
-              </button>
-            </div>
-          ) : (
-            <form ref={formRef} onSubmit={handleSubmit}>
-              <div className="mb-5">
-                <label
-                  htmlFor="brochure-email"
-                  className="block text-[10px] font-black uppercase tracking-[0.2em] text-white/40 mb-2"
-                >
-                  {t('emailLabel')}
-                </label>
-                <input
-                  id="brochure-email"
-                  name="email"
-                  type="email"
-                  required
-                  autoComplete="email"
-                  placeholder={t('emailPlaceholder')}
-                  className="w-full rounded-xl bg-white/5 border border-white/10 px-4 py-3.5 text-white placeholder:text-white/20 text-sm font-medium focus:outline-none focus:border-[#82ed20]/40 transition-colors"
-                  disabled={state === 'submitting'}
-                />
-              </div>
-
-              {state === 'error' && errorMsg && (
-                <p className="text-red-400 text-xs mb-4 font-medium">{errorMsg}</p>
-              )}
-
-              <button
-                type="submit"
-                disabled={state === 'submitting'}
-                className={cn(
-                  'w-full py-4 px-6 rounded-2xl font-black text-sm uppercase tracking-widest transition-colors',
-                  state === 'submitting'
-                    ? 'bg-white/10 text-white/40 cursor-wait'
-                    : 'bg-[#82ed20] hover:bg-[#6dd318] text-[#000d26]',
-                )}
-              >
-                {state === 'submitting' ? t('submitting') : t('submit')}
-              </button>
-
-              <p className="mt-4 text-[10px] text-white/25 text-center leading-relaxed">
-                {t('privacyNote')}
-              </p>
-            </form>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-
-  return createPortal(modal, document.body);
-}

components/ContactForm.tsx

@@ -139,15 +139,6 @@ export default function ContactForm() {
         {t('form.title')}
       </Heading>
       <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
-        {/* Anti-spam Honeypot */}
-        <input
-          type="text"
-          name="company_website"
-          tabIndex={-1}
-          autoComplete="off"
-          style={{ display: 'none' }}
-          aria-hidden="true"
-        />
         <div className="space-y-1 md:space-y-2">
           <Label htmlFor="contact-name">{t('form.name')}</Label>
           <Input

components/DatasheetDownload.tsx

@@ -33,12 +33,12 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
         <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-5 rounded-[31px] bg-primary-dark/90 backdrop-blur-xl p-6 md:px-6 md:py-6 border border-white/10">
+        <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-14 w-14 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="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-7 w-7 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3"
+              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"
@@ -54,13 +54,13 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
           </div>
 
           {/* Text Content */}
-          <div className="flex-1 min-w-0">
+          <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 font-black text-white uppercase tracking-tighter leading-none group-hover:text-accent transition-colors duration-300">
+            <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">
@@ -69,9 +69,9 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
           </div>
 
           {/* Arrow Icon */}
-          <div className="flex h-10 w-10 flex-shrink-0 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">
+          <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-5 w-5"
+              className="h-6 w-6"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"

components/ExcelDownload.tsx

@@ -1,94 +0,0 @@
-'use client';
-
-import { cn } from '@/components/ui/utils';
-import { useTranslations } from 'next-intl';
-import { useAnalytics } from './analytics/useAnalytics';
-import { AnalyticsEvents } from './analytics/analytics-events';
-
-interface ExcelDownloadProps {
-    excelPath: string;
-    className?: string;
-}
-
-export default function ExcelDownload({ excelPath, className }: ExcelDownloadProps) {
-    const t = useTranslations('Products');
-    const { trackEvent } = useAnalytics();
-
-    return (
-        <div className={cn('mt-4 animate-slight-fade-in-from-bottom', className)}>
-            <a
-                href={excelPath}
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={() =>
-                    trackEvent(AnalyticsEvents.DOWNLOAD, {
-                        file_name: excelPath.split('/').pop(),
-                        file_path: excelPath,
-                        file_type: 'excel',
-                        location: 'product_page',
-                    })
-                }
-                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-emerald-500 via-teal-400 to-emerald-500 opacity-20 group-hover:opacity-40 transition-opacity duration-500 animate-gradient-x" />
-
-                {/* Inner Content */}
-                <div className="relative flex items-center gap-5 rounded-[31px] bg-primary-dark/90 backdrop-blur-xl p-6 md:px-6 md:py-6 border border-white/10">
-                    {/* Icon Container */}
-                    <div className="relative flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-2xl bg-white/5 border border-white/10 group-hover:bg-emerald-600 group-hover:border-white/20 transition-all duration-500">
-                        <div className="absolute inset-0 rounded-2xl bg-emerald-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-                        {/* Spreadsheet/Table Icon */}
-                        <svg
-                            className="relative h-7 w-7 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                            aria-hidden="true"
-                        >
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={1.5}
-                                d="M3 10h18M3 14h18M10 3v18M3 6a3 3 0 013-3h12a3 3 0 013 3v12a3 3 0 01-3 3H6a3 3 0 01-3-3V6z"
-                            />
-                        </svg>
-                    </div>
-
-                    {/* Text Content */}
-                    <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 mb-1">
-                            <span className="text-[10px] font-black uppercase tracking-[0.2em] text-emerald-400">
-                                Excel Datasheet
-                            </span>
-                        </div>
-                        <h3 className="text-xl font-black text-white uppercase tracking-tighter leading-none group-hover:text-emerald-400 transition-colors duration-300">
-                            {t('downloadExcel')}
-                        </h3>
-                        <p className="mt-2 text-sm font-medium text-white/60 leading-relaxed">
-                            {t('downloadExcelDesc')}
-                        </p>
-                    </div>
-
-                    {/* Arrow Icon */}
-                    <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-emerald-600 group-hover:text-white group-hover:translate-x-1 transition-all duration-500">
-                        <svg
-                            className="h-5 w-5"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                            aria-hidden="true"
-                        >
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2.5}
-                                d="M9 5l7 7-7 7"
-                            />
-                        </svg>
-                    </div>
-                </div>
-            </a>
-        </div>
-    );
-}

components/Footer.tsx

@@ -6,7 +6,6 @@ import { useTranslations, useLocale } from 'next-intl';
 import { Container } from './ui';
 import { useAnalytics } from './analytics/useAnalytics';
 import { AnalyticsEvents } from './analytics/analytics-events';
-import FooterBrochureForm from './FooterBrochureForm';
 
 export default function Footer() {
   const t = useTranslations('Footer');
@@ -244,10 +243,6 @@ export default function Footer() {
           </div>
         </div>
 
-        <div className="mb-12 md:mb-16">
-          <FooterBrochureForm />
-        </div>
-
         <div className="pt-8 md:pt-12 border-t border-white/10 flex flex-row justify-between items-center gap-4 text-white/70 text-xs md:text-sm font-medium">
           <p>{t('copyright', { year: currentYear })}</p>
           <div className="flex gap-8">

components/FooterBrochureForm.tsx

@@ -1,134 +0,0 @@
-'use client';
-
-import { useState, useRef } from 'react';
-import { useTranslations, useLocale } from 'next-intl';
-import { requestBrochureAction } from '@/app/actions/brochure';
-import { cn } from '@/components/ui/utils';
-import { useAnalytics } from './analytics/useAnalytics';
-import { AnalyticsEvents } from './analytics/analytics-events';
-
-interface Props {
-  className?: string;
-}
-
-export default function FooterBrochureForm({ className }: Props) {
-  const t = useTranslations('Brochure');
-  const locale = useLocale();
-  const { trackEvent } = useAnalytics();
-  const formRef = useRef<HTMLFormElement>(null);
-
-  const [phase, setPhase] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
-  const [err, setErr] = useState('');
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!formRef.current) return;
-    setPhase('loading');
-
-    const fd = new FormData(formRef.current);
-    fd.set('locale', locale);
-
-    try {
-      const res = await requestBrochureAction(fd);
-      if (res.success) {
-        setPhase('success');
-        trackEvent(AnalyticsEvents.DOWNLOAD, {
-          file_name: `klz-product-catalog-${locale}.pdf`,
-          file_type: 'brochure',
-          location: 'footer_inline',
-        });
-      } else {
-        setErr(res.error || 'Error');
-        setPhase('error');
-      }
-    } catch {
-      setErr('Network error');
-      setPhase('error');
-    }
-  }
-
-  if (phase === 'success') {
-    return (
-      <div
-        className={cn(
-          'flex flex-col sm:flex-row items-center gap-4 bg-white/5 border border-[#82ed20]/20 rounded-2xl p-6',
-          className,
-        )}
-      >
-        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#82ed20]/20 text-[#82ed20]">
-          <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-          </svg>
-        </div>
-        <div>
-          <h4 className="text-white font-bold mb-1">
-            {locale === 'de' ? 'Erfolgreich angefordert!' : 'Successfully requested!'}
-          </h4>
-          <p className="text-white/60 text-sm">
-            {locale === 'de'
-              ? 'Wir haben Ihnen den Katalog soeben per E-Mail zugesendet.'
-              : 'We have just sent the catalog to your email.'}
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cn(
-        'bg-white/5 border border-white/10 rounded-3xl p-6 md:p-8 flex flex-col md:flex-row items-start md:items-center justify-between gap-6 md:gap-12',
-        className,
-      )}
-    >
-      <div className="flex-1 max-w-xl">
-        <h4 className="text-lg font-black text-white uppercase tracking-tight mb-2">
-          {t('ctaTitle')}
-        </h4>
-        <p className="text-sm text-white/60 leading-relaxed mb-0">{t('subtitle')}</p>
-      </div>
-
-      <form
-        ref={formRef}
-        onSubmit={handleSubmit}
-        className="w-full md:w-auto flex flex-col sm:flex-row gap-3"
-      >
-        {/* Anti-spam Honeypot */}
-        <input
-          type="text"
-          name="company_website"
-          tabIndex={-1}
-          autoComplete="off"
-          style={{ display: 'none' }}
-          aria-hidden="true"
-        />
-
-        <div className="relative w-full sm:w-64">
-          <input
-            name="email"
-            type="email"
-            required
-            placeholder={t('emailPlaceholder')}
-            disabled={phase === 'loading'}
-            className="w-full bg-primary-dark border border-white/20 rounded-xl px-4 py-3 text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-[#82ed20]/50 transition-colors"
-          />
-        </div>
-        <button
-          type="submit"
-          disabled={phase === 'loading'}
-          className={cn(
-            'flex items-center justify-center shrink-0 px-6 py-3 rounded-xl font-bold text-sm uppercase tracking-widest transition-colors',
-            phase === 'loading'
-              ? 'bg-white/10 text-white/40 cursor-wait'
-              : 'bg-[#82ed20] text-[#000d26] hover:bg-[#6dd318] cursor-pointer',
-          )}
-        >
-          {phase === 'loading' ? t('submitting') : t('submit')}
-        </button>
-      </form>
-      {phase === 'error' && err && (
-        <div className="absolute mt-16 text-red-400 text-xs font-medium">{err}</div>
-      )}
-    </div>
-  );
-}

components/PDFDownloadBlock.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import React from 'react';
+import { usePathname } from 'next/navigation';
+
+export const PDFDownloadBlock: React.FC<{ label: string; style: string }> = ({ label, style }) => {
+  const pathname = usePathname();
+
+  // Extract slug from pathname
+  const segments = pathname.split('/').filter(Boolean);
+  // Pathname is usually /[locale]/[slug] or /[locale]/products/[slug]
+  // We want the page slug.
+  const slug = segments[segments.length - 1] || 'home';
+
+  const href = `/api/pages/${slug}/pdf`;
+
+  return (
+    <div className="my-8">
+      <a
+        href={href}
+        className={`inline-flex items-center px-8 py-3.5 font-bold rounded-full transition-all duration-300 shadow-lg hover:shadow-xl group ${
+          style === 'primary'
+            ? 'bg-primary text-white hover:bg-primary-dark'
+            : style === 'secondary'
+              ? 'bg-accent text-primary-dark hover:bg-neutral-light'
+              : 'border-2 border-primary text-primary hover:bg-primary hover:text-white'
+        }`}
+      >
+        <span className="mr-3 transition-transform group-hover:scale-12 bit-bounce">📄</span>
+        {label}
+      </a>
+    </div>
+  );
+};

components/PayloadRichText.tsx

@@ -37,6 +37,7 @@ import MeetTheTeam from '@/components/home/MeetTheTeam';
 import GallerySection from '@/components/home/GallerySection';
 import VideoSection from '@/components/home/VideoSection';
 import CTA from '@/components/home/CTA';
+import { PDFDownloadBlock } from '@/components/PDFDownloadBlock';
 
 /**
  * Splits a text string on \n and intersperses <br /> elements.
@@ -429,6 +430,12 @@ const jsxConverters: JSXConverters = {
         {node.fields.content && <RichText data={node.fields.content} converters={jsxConverters} />}
       </ProductTabs>
     ),
+    pdfDownload: ({ node }: any) => (
+      <PDFDownloadBlock label={node.fields.label} style={node.fields.style} />
+    ),
+    'block-pdfDownload': ({ node }: any) => (
+      <PDFDownloadBlock label={node.fields.label} style={node.fields.style} />
+    ),
     // ─── New Page Blocks ───────────────────────────────────────────
     heroSection: ({ node }: any) => {
       const f = node.fields;

components/ProductSidebar.tsx

@@ -4,7 +4,6 @@ import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import RequestQuoteForm from '@/components/RequestQuoteForm';
 import DatasheetDownload from '@/components/DatasheetDownload';
-import ExcelDownload from '@/components/ExcelDownload';
 import Scribble from '@/components/Scribble';
 import { cn } from '@/components/ui/utils';
 
@@ -12,7 +11,6 @@ interface ProductSidebarProps {
   productName: string;
   productImage?: string;
   datasheetPath?: string | null;
-  excelPath?: string | null;
   className?: string;
 }
 
@@ -20,7 +18,6 @@ export default function ProductSidebar({
   productName,
   productImage,
   datasheetPath,
-  excelPath,
   className,
 }: ProductSidebarProps) {
   const t = useTranslations('Products');
@@ -73,9 +70,6 @@ export default function ProductSidebar({
 
       {/* Datasheet Download */}
       {datasheetPath && <DatasheetDownload datasheetPath={datasheetPath} className="mt-0" />}
-
-      {/* Excel Download – right below datasheet */}
-      {excelPath && <ExcelDownload excelPath={excelPath} className="mt-0" />}
     </aside>
   );
 }

components/ProductTechnicalData.tsx

@@ -2,7 +2,6 @@
 
 import React, { useState } from 'react';
 import { useTranslations } from 'next-intl';
-import { formatTechnicalValue } from '@/lib/utils/technical';
 
 interface KeyValueItem {
   label: string;
@@ -46,40 +45,22 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
             <div className="w-2 h-8 bg-accent rounded-full" />
             General Data
           </h3>
-          <dl className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-6 md:gap-x-12 md:gap-y-8">
-            {technicalItems.map((item, idx) => {
-              const formatted = formatTechnicalValue(item.value);
-              return (
-                <div key={idx} className="flex flex-col group">
-                  <dt className="text-sm font-bold uppercase tracking-widest text-primary/40 mb-2 group-hover:text-accent transition-colors">
-                    {item.label}
-                  </dt>
-                  <dd className="text-lg font-semibold text-text-primary">
-                    {formatted.isList ? (
-                      <div className="flex flex-wrap gap-2 mt-1">
-                        {formatted.parts.map((p, pIdx) => (
-                          <span
-                            key={pIdx}
-                            className="inline-block px-3 py-1 bg-neutral-light border border-neutral-dark/10 rounded-lg text-xs font-bold text-primary shadow-sm hover:border-accent/40 transition-colors"
-                          >
-                            {p}
-                          </span>
-                        ))}
-                      </div>
-                    ) : (
-                      <>
-                        {item.value}{' '}
-                        {item.unit && (
-                          <span className="text-sm font-normal text-text-secondary ml-1">
-                            {item.unit}
-                          </span>
-                        )}
-                      </>
-                    )}
-                  </dd>
-                </div>
-              );
-            })}
+          <dl className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-6 md:gap-x-12 md:gap-y-8">
+            {technicalItems.map((item, idx) => (
+              <div key={idx} className="flex flex-col group">
+                <dt className="text-sm font-bold uppercase tracking-widest text-primary/40 mb-2 group-hover:text-accent transition-colors">
+                  {item.label}
+                </dt>
+                <dd className="text-lg font-semibold text-text-primary">
+                  {item.value}{' '}
+                  {item.unit && (
+                    <span className="text-sm font-normal text-text-secondary ml-1">
+                      {item.unit}
+                    </span>
+                  )}
+                </dd>
+              </div>
+            ))}
           </dl>
         </div>
       )}
@@ -96,7 +77,7 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
             <h3 className="text-2xl font-bold text-primary mb-8 flex items-center gap-3">
               <div className="w-2 h-8 bg-accent rounded-full" />
               {table.voltageLabel !== 'Voltage unknown' &&
-                table.voltageLabel !== 'Spannung unbekannt'
+              table.voltageLabel !== 'Spannung unbekannt'
                 ? table.voltageLabel
                 : 'Technical Specifications'}
             </h3>
@@ -121,8 +102,9 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
               <div className="pointer-events-none absolute right-0 top-0 h-full w-8 bg-gradient-to-l from-white to-transparent z-20 md:hidden" />
               <div
                 id={`voltage-table-${idx}`}
-                className={`overflow-x-auto -mx-5 md:-mx-12 px-5 md:px-12 transition-all duration-500 ease-in-out ${!isExpanded && hasManyRows ? 'max-h-[400px] overflow-y-hidden' : 'max-h-[none]'
-                  }`}
+                className={`overflow-x-auto -mx-5 md:-mx-12 px-5 md:px-12 transition-all duration-500 ease-in-out ${
+                  !isExpanded && hasManyRows ? 'max-h-[400px] overflow-y-hidden' : 'max-h-[none]'
+                }`}
               >
                 <table className="min-w-full border-separate border-spacing-0">
                   <thead>

components/RequestQuoteForm.tsx

@@ -165,16 +165,6 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
 
   return (
     <form onSubmit={handleSubmit} className="space-y-3 !mt-0">
-      {/* Anti-spam Honeypot */}
-      <input
-        type="text"
-        name="company_website"
-        tabIndex={-1}
-        autoComplete="off"
-        style={{ display: 'none' }}
-        aria-hidden="true"
-      />
-
       <div className="space-y-2 !mt-0">
         <div className="space-y-1 !mt-0">
           <label htmlFor={emailId} className="sr-only">

components/blog/TechnicalGrid.tsx

@@ -1,5 +1,5 @@
+import React from 'react';
 import Scribble from '@/components/Scribble';
-import { formatTechnicalValue } from '@/lib/utils/technical';
 
 interface TechnicalGridItem {
   label: string;
@@ -18,41 +18,25 @@ export default function TechnicalGrid({ title, items }: TechnicalGridProps) {
         <h3 className="text-2xl font-bold text-text-primary mb-8 flex items-center gap-4 relative">
           <span className="relative inline-block">
             {title}
-            <Scribble
-              variant="underline"
-              className="absolute -bottom-2 left-0 w-full h-3 text-accent/40"
+            <Scribble 
+              variant="underline" 
+              className="absolute -bottom-2 left-0 w-full h-3 text-accent/40" 
             />
           </span>
         </h3>
       )}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {items.map((item, index) => {
-          const formatted = formatTechnicalValue(item.value);
-          return (
-            <div key={index} className="bg-white p-8 rounded-2xl border border-neutral-200 shadow-sm hover:shadow-md transition-all duration-300 group relative overflow-hidden">
-              <div className="absolute top-0 right-0 w-16 h-16 bg-primary/5 -mr-8 -mt-8 rotate-45 transition-transform group-hover:scale-110" />
-              <span className="block text-xs font-bold text-primary uppercase tracking-[0.2em] mb-3 opacity-70">
-                {item.label}
-              </span>
-              <div className="text-lg text-text-secondary leading-relaxed group-hover:text-text-primary transition-colors">
-                {formatted.isList ? (
-                  <div className="flex flex-wrap gap-2 mt-2">
-                    {formatted.parts.map((p, pIdx) => (
-                      <span
-                        key={pIdx}
-                        className="inline-block px-3 py-1 bg-neutral-light border border-neutral-dark/10 rounded-lg text-xs font-bold text-primary shadow-sm group-hover:border-accent/40 transition-colors"
-                      >
-                        {p}
-                      </span>
-                    ))}
-                  </div>
-                ) : (
-                  item.value
-                )}
-              </div>
-            </div>
-          );
-        })}
+        {items.map((item, index) => (
+          <div key={index} className="bg-white p-8 rounded-2xl border border-neutral-200 shadow-sm hover:shadow-md transition-all duration-300 group relative overflow-hidden">
+            <div className="absolute top-0 right-0 w-16 h-16 bg-primary/5 -mr-8 -mt-8 rotate-45 transition-transform group-hover:scale-110" />
+            <span className="block text-xs font-bold text-primary uppercase tracking-[0.2em] mb-3 opacity-70">
+              {item.label}
+            </span>
+            <span className="text-lg text-text-secondary leading-relaxed group-hover:text-text-primary transition-colors">
+              {item.value}
+            </span>
+          </div>
+        ))}
       </div>
     </div>
   );

components/emails/BrochureDeliveryEmail.tsx

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

components/home/RecentPosts.tsx

@@ -74,14 +74,11 @@ export default async function RecentPosts({ locale, data }: RecentPostsProps) {
                       suppressHydrationWarning
                       className="px-3 py-1 text-white/80 text-[10px] md:text-xs font-bold uppercase tracking-widest border border-white/20 rounded-full bg-white/10 backdrop-blur-md"
                     >
-                      {new Date(post.frontmatter.date).toLocaleDateString(
-                        ['en', 'de'].includes(locale) ? locale : 'de',
-                        {
-                          year: 'numeric',
-                          month: 'short',
-                          day: 'numeric',
-                        },
-                      )}
+                      {new Date(post.frontmatter.date).toLocaleDateString(locale || 'de', {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                      })}
                     </time>
                     {(new Date(post.frontmatter.date) > new Date() ||
                       post.frontmatter.public === false) && (

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   klz-app:
-    image: git.infra.mintel.me/mmintel/klz-2026:${IMAGE_TAG:-latest}
+    image: registry.infra.mintel.me/mintel/klz-2026:${IMAGE_TAG:-latest}
     restart: unless-stopped
     networks:
       default:
@@ -60,7 +60,7 @@ services:
 
   klz-gatekeeper:
     profiles: [ "gatekeeper" ]
-    image: git.infra.mintel.me/mmintel/gatekeeper:testing
+    image: registry.infra.mintel.me/mintel/gatekeeper:testing
     restart: unless-stopped
     networks:
       infra:

lib/datasheets.ts

@@ -7,7 +7,7 @@ import path from 'path';
  */
 export function getDatasheetPath(slug: string, locale: string): string | null {
   const datasheetsDir = path.join(process.cwd(), 'public', 'datasheets');
-
+  
   if (!fs.existsSync(datasheetsDir)) {
     return null;
   }
@@ -16,21 +16,16 @@ export function getDatasheetPath(slug: string, locale: string): string | null {
   const normalizedSlug = slug.replace(/-hv$|-mv$/, '');
 
   // Subdirectories to search in
-  const subdirs = ['', 'products', 'low-voltage', 'medium-voltage', 'high-voltage', 'solar'];
+  const subdirs = ['', 'low-voltage', 'medium-voltage', 'high-voltage', 'solar'];
 
   // List of patterns to try for the current locale
-  // Also try with -mv and -hv suffixes since some product slugs omit the voltage class
   const patterns = [
     `${slug}-${locale}.pdf`,
     `${slug}-2-${locale}.pdf`,
     `${slug}-3-${locale}.pdf`,
-    `${slug}-mv-${locale}.pdf`,
-    `${slug}-hv-${locale}.pdf`,
     `${normalizedSlug}-${locale}.pdf`,
     `${normalizedSlug}-2-${locale}.pdf`,
     `${normalizedSlug}-3-${locale}.pdf`,
-    `${normalizedSlug}-mv-${locale}.pdf`,
-    `${normalizedSlug}-hv-${locale}.pdf`,
   ];
 
   for (const subdir of subdirs) {
@@ -49,70 +44,9 @@ export function getDatasheetPath(slug: string, locale: string): string | null {
       `${slug}-en.pdf`,
       `${slug}-2-en.pdf`,
       `${slug}-3-en.pdf`,
-      `${slug}-mv-en.pdf`,
-      `${slug}-hv-en.pdf`,
       `${normalizedSlug}-en.pdf`,
       `${normalizedSlug}-2-en.pdf`,
       `${normalizedSlug}-3-en.pdf`,
-      `${normalizedSlug}-mv-en.pdf`,
-      `${normalizedSlug}-hv-en.pdf`,
-    ];
-    for (const subdir of subdirs) {
-      for (const pattern of enPatterns) {
-        const relativePath = path.join(subdir, pattern);
-        const filePath = path.join(datasheetsDir, relativePath);
-        if (fs.existsSync(filePath)) {
-          return `/datasheets/${relativePath}`;
-        }
-      }
-    }
-  }
-
-  return null;
-}
-
-/**
- * Finds the datasheet Excel path for a given product slug and locale.
- * Checks public/datasheets for matching .xlsx files.
- */
-export function getExcelDatasheetPath(slug: string, locale: string): string | null {
-  const datasheetsDir = path.join(process.cwd(), 'public', 'datasheets');
-
-  if (!fs.existsSync(datasheetsDir)) {
-    return null;
-  }
-
-  const normalizedSlug = slug.replace(/-hv$|-mv$/, '');
-  const subdirs = ['', 'products', 'low-voltage', 'medium-voltage', 'high-voltage', 'solar'];
-
-  const patterns = [
-    `${slug}-${locale}.xlsx`,
-    `${slug}-2-${locale}.xlsx`,
-    `${slug}-3-${locale}.xlsx`,
-    `${normalizedSlug}-${locale}.xlsx`,
-    `${normalizedSlug}-2-${locale}.xlsx`,
-    `${normalizedSlug}-3-${locale}.xlsx`,
-  ];
-
-  for (const subdir of subdirs) {
-    for (const pattern of patterns) {
-      const relativePath = path.join(subdir, pattern);
-      const filePath = path.join(datasheetsDir, relativePath);
-      if (fs.existsSync(filePath)) {
-        return `/datasheets/${relativePath}`;
-      }
-    }
-  }
-
-  // Fallback to English if locale is not 'en'
-  if (locale !== 'en') {
-    const enPatterns = [
-      `${slug}-en.xlsx`,
-      `${slug}-2-en.xlsx`,
-      `${slug}-3-en.xlsx`,
-      `${normalizedSlug}-en.xlsx`,
-      `${normalizedSlug}-2-en.xlsx`,
-      `${normalizedSlug}-3-en.xlsx`,
     ];
     for (const subdir of subdirs) {
       for (const pattern of enPatterns) {

lib/og-helper.tsx

@@ -11,10 +11,21 @@ export async function getOgFonts() {
 
   try {
     console.log(`[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`);
-    const boldFont = readFileSync(boldFontPath);
-    const regularFont = readFileSync(regularFontPath);
+    const boldFontBuffer = readFileSync(boldFontPath);
+    const regularFontBuffer = readFileSync(regularFontPath);
+
+    // Satori (Vercel OG) strictly requires an ArrayBuffer, not a Node Buffer view.
+    const boldFont = boldFontBuffer.buffer.slice(
+      boldFontBuffer.byteOffset,
+      boldFontBuffer.byteOffset + boldFontBuffer.byteLength,
+    );
+    const regularFont = regularFontBuffer.buffer.slice(
+      regularFontBuffer.byteOffset,
+      regularFontBuffer.byteOffset + regularFontBuffer.byteLength,
+    );
+
     console.log(
-      `[OG] Fonts loaded successfully (${boldFont.length} and ${regularFont.length} bytes)`,
+      `[OG] Fonts loaded successfully (${boldFont.byteLength} and ${regularFont.byteLength} bytes)`,
     );
 
     return [

lib/pages.ts

@@ -15,6 +15,8 @@ export interface PageFrontmatter {
 
 export interface PageData {
   slug: string;
+  redirectUrl?: string;
+  redirectPermanent?: boolean;
   frontmatter: PageFrontmatter;
   content: any; // Lexical AST Document
 }
@@ -96,6 +98,8 @@ export async function getPageBySlug(slug: string, locale: string): Promise<PageD
 
       return {
         slug: doc.slug,
+        redirectUrl: doc.redirectUrl,
+        redirectPermanent: doc.redirectPermanent ?? true,
         frontmatter: {
           title: doc.title,
           excerpt: doc.excerpt || '',

lib/pdf-brochure.tsx

@@ -1,806 +0,0 @@
-import * as React from 'react';
-import {
-    Document,
-    Page,
-    View,
-    Text,
-    Image,
-} from '@react-pdf/renderer';
-
-// ─── Brand Tokens ───────────────────────────────────────────────────────────
-
-const C = {
-    navy: '#001a4d',
-    navyDeep: '#000d26',
-    green: '#4da612',
-    greenLight: '#e8f5d8',
-    white: '#FFFFFF',
-    offWhite: '#f8f9fa',
-    gray100: '#f3f4f6',
-    gray200: '#e5e7eb',
-    gray300: '#d1d5db',
-    gray400: '#9ca3af',
-    gray600: '#4b5563',
-    gray900: '#111827',
-};
-
-const PAGE = { w: 595.28, h: 841.89 }; // A4 in points
-const MARGIN = 56;
-const CONTENT_W = PAGE.w - MARGIN * 2;
-const HEADER_H = 52;
-const FOOTER_H = 48;
-const BODY_TOP = HEADER_H + 40;
-const BODY_BOTTOM = FOOTER_H + 24;
-
-// ─── Types ──────────────────────────────────────────────────────────────────
-
-export interface BrochureProduct {
-    id: number;
-    name: string;
-    shortDescriptionHtml: string;
-    descriptionHtml: string;
-    applicationHtml?: string;
-    images: string[];
-    featuredImage: string | null;
-    sku: string;
-    slug: string;
-    categories: Array<{ name: string }>;
-    attributes: Array<{ name: string; options: string[] }>;
-    qrWebsite?: string | Buffer;
-    qrDatasheet?: string | Buffer;
-}
-
-export interface BrochureProps {
-    products: BrochureProduct[];
-    locale: 'en' | 'de';
-    companyInfo: {
-        tagline: string;
-        values: Array<{ title: string; description: string }>;
-        address: string;
-        phone: string;
-        email: string;
-        website: string;
-    };
-    logoBlack?: string | Buffer;
-    logoWhite?: string | Buffer;
-    introContent?: { title: string; excerpt: string; heroImage?: string | Buffer };
-    marketingSections?: Array<{
-        title: string;
-        subtitle: string;
-        description?: string;
-        items?: Array<{ title: string; description: string }>;
-        highlights?: Array<{ value: string; label: string }>;
-        pullQuote?: string;
-    }>;
-    galleryImages?: Array<string | Buffer | undefined>;
-    messages?: Record<string, any>;
-    directorPhotos?: { michael?: Buffer; klaus?: Buffer };
-}
-
-// ─── Helpers ────────────────────────────────────────────────────────────────
-
-const strip = (html: string): string => html.replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim();
-
-const imgValid = (src?: string | Buffer): boolean => {
-    if (!src) return false;
-    if (Buffer.isBuffer(src)) return src.length > 0;
-    return true;
-};
-
-const labels = (locale: 'en' | 'de') => locale === 'de' ? {
-    catalog: 'Kabelkatalog',
-    subtitle: 'WIR SORGEN DAFÜR, DASS DER STROM FLIESST – MIT QUALITÄTSGEPRÜFTEN KABELN. VON DER NIEDERSPANNUNG BIS ZUR HOCHSPANNUNG.',
-    about: 'Über uns',
-    toc: 'Inhalt',
-    overview: 'Übersicht',
-    application: 'Anwendungsbereich',
-    specs: 'Technische Daten',
-    contact: 'Kontakt',
-    qrWeb: 'Details',
-    qrPdf: 'PDF',
-    values: 'Unsere Werte',
-    edition: 'Ausgabe',
-    page: 'Seite',
-    property: 'Eigenschaft',
-    value: 'Wert',
-    other: 'Sonstige'
-} : {
-    catalog: 'Cable Catalog',
-    subtitle: 'WE ENSURE THE CURRENT FLOWS – WITH QUALITY-TESTED CABLES. FROM LOW TO HIGH VOLTAGE.',
-    about: 'About Us',
-    toc: 'Contents',
-    overview: 'Overview',
-    application: 'Application',
-    specs: 'Technical Data',
-    contact: 'Contact',
-    qrWeb: 'Details',
-    qrPdf: 'PDF',
-    values: 'Our Values',
-    edition: 'Edition',
-    page: 'Page',
-    property: 'Property',
-    value: 'Value',
-    other: 'Other'
-};
-
-// ─── Rich Text ──────────────────────────────────────────────────────────────
-
-const RichText: React.FC<{ children: string; style?: any; gap?: number; color?: string }> = ({ children, style = {}, gap = 8, color }) => {
-    const paragraphs = children.split('\n\n').filter(p => p.trim());
-    return (
-        <View style={{ gap }}>
-            {paragraphs.map((para, pIdx) => {
-                const parts: Array<{ text: string; bold?: boolean; italic?: boolean }> = [];
-                let rem = para;
-                while (rem.length > 0) {
-                    const bm = rem.match(/\*\*(.+?)\*\*/);
-                    const im = rem.match(/(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)/);
-                    const first = [bm, im].filter(Boolean).sort((a, b) => (a!.index || 0) - (b!.index || 0))[0];
-                    if (!first || first.index === undefined) { parts.push({ text: rem }); break; }
-                    if (first.index > 0) parts.push({ text: rem.substring(0, first.index) });
-                    parts.push({ text: first[1], bold: first[0].startsWith('**'), italic: !first[0].startsWith('**') });
-                    rem = rem.substring(first.index + first[0].length);
-                }
-                return (
-                    <Text key={pIdx} style={style}>
-                        {parts.map((part, i) => (
-                            <Text key={i} style={{
-                                ...(part.bold ? { fontWeight: 700, fontFamily: 'Helvetica-Bold', color: color || C.navyDeep } : {}),
-                                ...(part.italic ? { fontWeight: 700, fontFamily: 'Helvetica-Bold', color: C.green } : {}),
-                            }}>{part.text}</Text>
-                        ))}
-                    </Text>
-                );
-            })}
-        </View>
-    );
-};
-
-// ─── Shared Components ──────────────────────────────────────────────────────
-
-// Thin brand bar at the top of every page
-const Header: React.FC<{ logo?: string | Buffer; right?: string; dark?: boolean }> = ({ logo, right, dark }) => (
-    <View style={{
-        position: 'absolute', top: 0, left: 0, right: 0, height: HEADER_H,
-        flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end',
-        paddingHorizontal: MARGIN, paddingBottom: 12,
-    }} fixed>
-        {logo ? <Image src={logo} style={{ width: 56 }} /> : <Text style={{ fontSize: 14, fontWeight: 700, color: dark ? C.white : C.navy }}>KLZ</Text>}
-        {right && <Text style={{ fontSize: 7, fontWeight: 700, color: dark ? C.gray400 : C.gray400, letterSpacing: 1.2, textTransform: 'uppercase' }}>{right}</Text>}
-    </View>
-);
-
-const PageFooter: React.FC<{ left: string; right: string; dark?: boolean }> = ({ left, right, dark }) => (
-    <View style={{
-        position: 'absolute', bottom: 20, left: MARGIN, right: MARGIN,
-        flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
-        borderTopWidth: 0.5, borderTopColor: dark ? 'rgba(255,255,255,0.15)' : C.gray200, borderTopStyle: 'solid',
-        paddingTop: 8,
-    }} fixed>
-        <Text style={{ fontSize: 7, color: dark ? C.gray400 : C.gray400, letterSpacing: 0.8, textTransform: 'uppercase' }}>{left}</Text>
-        <Text style={{ fontSize: 7, color: dark ? C.gray400 : C.gray400, letterSpacing: 0.8, textTransform: 'uppercase' }}>{right}</Text>
-    </View>
-);
-
-// Green accent bar
-const AccentBar = () => <View style={{ width: 40, height: 3, backgroundColor: C.green, marginBottom: 16 }} />;
-
-// ─── FadeImage ─────────────────────────────────────────────────────────────
-// Simulates a gradient fade at one edge using stacked opacity bands.
-// React-pdf has no CSS gradient support, so we stack 14 semi-opaque rectangles.
-//
-// 'position' param: which edge fades INTO the page background
-//   'bottom'  → image visible at top, fades down into bgColor
-//   'top'     → image visible at bottom, fades up into bgColor
-//   'right'   → image on left side, fades right into bgColor
-//
-// The component must be placed ABSOLUTE (position: 'absolute') on the page.
-
-const FadeImage: React.FC<{
-    src: string | Buffer;
-    top?: number; left?: number; right?: number; bottom?: number;
-    width: number | string;
-    height: number;
-    fadeEdge: 'bottom' | 'top' | 'right' | 'left';
-    fadeSize?: number;   // how many points the fade spans
-    bgColor: string;
-    opacity?: number;    // overall image darkness (0–1, applied via overlay)
-}> = ({ src, top, left, right, bottom, width, height, fadeEdge, fadeSize = 120, bgColor, opacity = 0 }) => {
-    const STEPS = 40; // High number of overlapping bands
-
-    const bands = Array.from({ length: STEPS }, (_, i) => {
-        // i=0 is the widest band reaching deepest into the image.
-        // i=STEPS-1 is the narrowest band right at the fade edge.
-        // Because they all anchor at the edge and overlap, their opacity compounds.
-        // We use an ease-in curve for distance to make the fade look natural.
-        const t = 1.0 / STEPS;
-        const easeDist = Math.pow((i + 1) / STEPS, 1.2);
-        const dist = fadeSize * easeDist;
-
-        const style: any = {
-            position: 'absolute',
-            backgroundColor: bgColor,
-            opacity: t,
-        };
-
-        // All bands anchor at the fade edge and extend inward by `dist`
-        if (fadeEdge === 'bottom') {
-            Object.assign(style, { left: 0, right: 0, height: dist, bottom: 0 });
-        } else if (fadeEdge === 'top') {
-            Object.assign(style, { left: 0, right: 0, height: dist, top: 0 });
-        } else if (fadeEdge === 'right') {
-            Object.assign(style, { top: 0, bottom: 0, width: dist, right: 0 });
-        } else {
-            Object.assign(style, { top: 0, bottom: 0, width: dist, left: 0 });
-        }
-
-        return style;
-    });
-
-    return (
-        <View style={{ position: 'absolute', top, left, right, bottom, width, height }}>
-            <Image src={src} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-            {/* Overlay using bgColor to "wash out" / dilute the image */}
-            {opacity > 0 && <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: bgColor, opacity }} />}
-            {/* Gradient fade bands */}
-            {bands.map((s, i) => <View key={i} style={s} />)}
-        </View>
-    );
-};
-
-// ═══════════════════════════════════════════════════════════════════════════
-// PAGE 1: COVER
-// ═══════════════════════════════════════════════════════════════════════════
-
-const CoverPage: React.FC<{
-    locale: 'en' | 'de';
-    introContent?: BrochureProps['introContent'];
-    logoWhite?: string | Buffer;
-    galleryImages?: Array<string | Buffer | undefined>;
-}> = ({ locale, introContent, logoWhite, galleryImages }) => {
-    const l = labels(locale);
-    const dateStr = new Date().toLocaleDateString(locale === 'en' ? 'en-US' : 'de-DE', { year: 'numeric', month: 'long' });
-    const bg = galleryImages?.[0] || introContent?.heroImage;
-
-    return (
-        <Page size="A4" style={{ fontFamily: 'Helvetica' }}>
-            {/* Full-page background image with dark overlay */}
-            {imgValid(bg) && (
-                <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
-                    <Image src={bg!} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                    <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: C.navyDeep, opacity: 0.82 }} />
-                </View>
-            )}
-            {!imgValid(bg) && <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: C.navyDeep }} />}
-
-            {/* Vertical accent stripe */}
-            <View style={{ position: 'absolute', top: 0, left: 0, width: 5, height: '40%', backgroundColor: C.green }} />
-
-            {/* Logo top-left */}
-            <View style={{ position: 'absolute', top: 56, left: MARGIN }}>
-                {imgValid(logoWhite) ? <Image src={logoWhite!} style={{ width: 120 }} /> : <Text style={{ fontSize: 24, fontWeight: 700, color: C.white }}>KLZ</Text>}
-            </View>
-
-            {/* Main title block — bottom third of page */}
-            <View style={{ position: 'absolute', bottom: 160, left: MARGIN, right: MARGIN }}>
-                <View style={{ width: 40, height: 3, backgroundColor: C.green, marginBottom: 24 }} />
-                <Text style={{ fontSize: 32, fontWeight: 700, color: C.white, textTransform: 'uppercase', letterSpacing: -0.5, lineHeight: 1.05 }}>
-                    {l.catalog}
-                </Text>
-                <Text style={{ fontSize: 12, color: C.gray300, lineHeight: 1.8, marginTop: 16, maxWidth: 340 }}>
-                    {introContent?.excerpt || l.subtitle}
-                </Text>
-            </View>
-
-            {/* Bottom bar */}
-            <View style={{ position: 'absolute', bottom: 40, left: MARGIN, right: MARGIN, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                <Text style={{ fontSize: 8, color: C.gray400, letterSpacing: 1, textTransform: 'uppercase' }}>{l.edition} {dateStr}</Text>
-                <Text style={{ fontSize: 9, fontWeight: 700, color: C.green }}>www.klz-cables.com</Text>
-            </View>
-        </Page>
-    );
-};
-
-// ═══════════════════════════════════════════════════════════════════════════
-// PAGES 2–N: INFO PAGES  (each marketing section = own page)
-// ═══════════════════════════════════════════════════════════════════════════
-
-const InfoPage: React.FC<{
-    section: NonNullable<BrochureProps['marketingSections']>[0];
-    image?: string | Buffer;
-    logoBlack?: string | Buffer;
-    logoWhite?: string | Buffer;
-    dark?: boolean;
-    imagePosition?: 'top' | 'bottom-half';
-}> = ({ section, image, logoBlack, logoWhite, dark, imagePosition = 'top' }) => {
-    const bg = dark ? C.navyDeep : C.white;
-    const textColor = dark ? C.gray300 : C.gray600;
-    const titleColor = dark ? C.white : C.navyDeep;
-    const boldColor = dark ? C.white : C.navyDeep;
-    const headerLogo = dark ? (logoWhite || logoBlack) : logoBlack;
-
-    // Image at top: 240pt tall, content starts below via paddingTop
-    const IMG_TOP_H = 240;
-    const bodyTopWithImg = imagePosition === 'top' && imgValid(image)
-        ? IMG_TOP_H + 24  // content starts below image
-        : BODY_TOP;
-
-    return (
-        <Page size="A4" style={{ fontFamily: 'Helvetica', backgroundColor: bg, paddingBottom: BODY_BOTTOM, paddingHorizontal: MARGIN }}>
-            {/* Absolute image — from page edge, fades into bg */}
-            {imgValid(image) && imagePosition === 'top' && (
-                <FadeImage
-                    src={image!}
-                    top={0} left={0} right={0}
-                    width="100%" height={IMG_TOP_H}
-                    fadeEdge="bottom" fadeSize={120}
-                    bgColor={bg}
-                    opacity={dark ? 0.85 : 0.9} // EXTREMELY high opacity of bgColor to make image incredibly subtle
-                />
-            )}
-            {imgValid(image) && imagePosition === 'bottom-half' && (
-                <FadeImage
-                    src={image!}
-                    bottom={FOOTER_H + 20} left={0} right={0}
-                    width="100%" height={340}
-                    fadeEdge="top" fadeSize={140}
-                    bgColor={bg}
-                    opacity={dark ? 0.85 : 0.9} // Extremely subtle
-                />
-            )}
-
-            {/* Header — on top of image */}
-            <Header logo={headerLogo} right="KLZ Cables" dark={dark} />
-            <PageFooter left="KLZ Cables" right="www.klz-cables.com" dark={dark} />
-
-            {/* Content — pushed below image when top-position */}
-            <View style={{ paddingTop: bodyTopWithImg }}>
-
-                {/* Label + Title */}
-                <Text style={{ fontSize: 7, fontWeight: 700, color: C.green, textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 8 }}>{section.subtitle}</Text>
-                <Text style={{ fontSize: 24, fontWeight: 700, color: titleColor, letterSpacing: -0.5, marginBottom: 16 }}>{section.title}</Text>
-
-                {/* Description */}
-                {section.description && (
-                    <View style={{ marginBottom: 24 }}>
-                        <RichText style={{ fontSize: 10, color: textColor, lineHeight: 1.7 }} gap={8} color={boldColor}>
-                            {section.description}
-                        </RichText>
-                    </View>
-                )}
-
-                {/* Highlights */}
-                {section.highlights && section.highlights.length > 0 && (
-                    <View style={{ flexDirection: 'row', gap: 12, marginBottom: 24 }}>
-                        {section.highlights.map((h, i) => (
-                            <View key={i} style={{
-                                flex: 1,
-                                backgroundColor: dark ? 'rgba(255,255,255,0.04)' : C.offWhite,
-                                borderLeftWidth: 3, borderLeftColor: C.green, borderLeftStyle: 'solid',
-                                paddingVertical: 12, paddingHorizontal: 12,
-                            }}>
-                                <Text style={{ fontSize: 10, fontWeight: 700, color: dark ? C.white : C.navy, marginBottom: 4 }}>{h.value}</Text>
-                                <Text style={{ fontSize: 7, color: dark ? C.gray400 : C.gray600, textTransform: 'uppercase', letterSpacing: 0.5 }}>{h.label}</Text>
-                            </View>
-                        ))}
-                    </View>
-                )}
-
-                {/* Pull quote */}
-                {section.pullQuote && (
-                    <View style={{
-                        borderLeftWidth: 3, borderLeftColor: C.green, borderLeftStyle: 'solid',
-                        paddingLeft: 16, paddingVertical: 8, marginBottom: 24,
-                    }}>
-                        <Text style={{ fontSize: 12, fontWeight: 700, color: titleColor, lineHeight: 1.5 }}>
-                            „{section.pullQuote}"
-                        </Text>
-                    </View>
-                )}
-
-                {/* Items — 2-column grid */}
-                {section.items && section.items.length > 0 && (
-                    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 20 }}>
-                        {section.items.map((item, i) => (
-                            <View key={i} style={{ width: '46%' }} minPresenceAhead={60}>
-                                <Text style={{ fontSize: 9, fontWeight: 700, color: titleColor, marginBottom: 4 }}>{item.title}</Text>
-                                <View style={{ width: 20, height: 1.5, backgroundColor: dark ? 'rgba(255,255,255,0.2)' : C.gray300, marginBottom: 6 }} />
-                                <RichText style={{ fontSize: 8.5, color: textColor, lineHeight: 1.6 }} gap={4} color={boldColor}>
-                                    {item.description}
-                                </RichText>
-                            </View>
-                        ))}
-                    </View>
-                )}
-            </View>
-        </Page>
-    );
-};
-
-// About page (first info page)
-const AboutPage: React.FC<{
-    locale: 'en' | 'de';
-    companyInfo: BrochureProps['companyInfo'];
-    logoBlack?: string | Buffer;
-    image?: string | Buffer;
-    messages?: Record<string, any>;
-    directorPhotos?: { michael?: Buffer; klaus?: Buffer };
-}> = ({ locale, companyInfo, logoBlack, image, messages, directorPhotos }) => {
-    const l = labels(locale);
-
-    // Image at top: 200pt tall (smaller to leave more room for content)
-    const IMG_TOP_H = 200;
-    const bodyTopWithImg = imgValid(image) ? IMG_TOP_H + 16 : BODY_TOP;
-
-    // Pull directors content from messages if available
-    const team = messages?.Team || {};
-    const michael = team.michael;
-    const klaus = team.klaus;
-    const legacy = team.legacy;
-
-    return (
-        <Page size="A4" style={{ fontFamily: 'Helvetica', backgroundColor: C.white, paddingBottom: BODY_BOTTOM, paddingHorizontal: MARGIN }}>
-            {/* Top-aligned image fading into white bottom */}
-            {imgValid(image) && (
-                <FadeImage
-                    src={image!}
-                    top={0} left={0} right={0}
-                    width="100%" height={IMG_TOP_H}
-                    fadeEdge="bottom" fadeSize={140}
-                    bgColor={C.white}
-                    opacity={0.92}
-                />
-            )}
-
-            <Header logo={logoBlack} right="KLZ Cables" />
-            <PageFooter left="KLZ Cables" right="www.klz-cables.com" />
-
-            {/* Content pushed below the fading image */}
-            <View style={{ paddingTop: bodyTopWithImg }}>
-                <Text style={{ fontSize: 7, fontWeight: 700, color: C.green, textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 8 }}>{l.about}</Text>
-                <Text style={{ fontSize: 22, fontWeight: 700, color: C.navyDeep, letterSpacing: -0.5, marginBottom: 6 }}>KLZ Cables</Text>
-                <AccentBar />
-
-                <RichText style={{ fontSize: 10, color: C.gray900, lineHeight: 1.8 }} gap={8}>
-                    {companyInfo.tagline}
-                </RichText>
-
-                {/* Company mission — makes immediately clear what KLZ does */}
-                <View style={{ marginTop: 12, marginBottom: 8 }}>
-                    <RichText style={{ fontSize: 9, color: C.gray600, lineHeight: 1.7 }} gap={6}>
-                        {locale === 'de'
-                            ? 'KLZ Cables ist Ihr Spezialist für Energiekabel von 1 kV bis 220 kV. Wir beliefern Energieversorger, Wind- und Solarparks sowie die Industrie mit VDE-geprüften Kabeln – von der Niederspannung über die Mittelspannung bis zur Hochspannung. Mit einem europaweiten Netzwerk und jahrzehntelanger Erfahrung sorgen wir für zuverlässige Kabelinfrastruktur.'
-                            : 'KLZ Cables is your specialist for power cables from 1 kV to 220 kV. We supply energy providers, wind and solar parks, and industry with VDE-certified cables – from low voltage through medium voltage to high voltage. With a Europe-wide network and decades of experience, we ensure reliable cable infrastructure.'
-                        }
-                    </RichText>
-                </View>
-
-                {/* Directors — two-column */}
-                {(michael || klaus) && (
-                    <View style={{ marginTop: 20 }}>
-                        <Text style={{ fontSize: 7, fontWeight: 700, color: C.green, textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 12 }}>
-                            {locale === 'de' ? 'Die Geschäftsführer' : 'The Directors'}
-                        </Text>
-                        <View style={{ flexDirection: 'row', gap: 20 }}>
-                            {[{ data: michael, photo: directorPhotos?.michael }, { data: klaus, photo: directorPhotos?.klaus }].filter(p => p.data).map((p, i) => (
-                                <View key={i} style={{ flex: 1 }}>
-                                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 6 }}>
-                                        {p.photo && (
-                                            <Image src={p.photo} style={{ width: 32, height: 32, borderRadius: 16 }} />
-                                        )}
-                                        <View>
-                                            <Text style={{ fontSize: 10, fontWeight: 700, color: C.navyDeep, marginBottom: 1 }}>{p.data.name}</Text>
-                                            <Text style={{ fontSize: 7, fontWeight: 700, color: C.green, textTransform: 'uppercase', letterSpacing: 0.8 }}>{p.data.role}</Text>
-                                        </View>
-                                    </View>
-                                    <Text style={{ fontSize: 8, color: C.gray600, lineHeight: 1.6, marginBottom: 6 }}>{p.data.description}</Text>
-                                    {p.data.quote && (
-                                        <View style={{ borderLeftWidth: 2, borderLeftColor: C.green, borderLeftStyle: 'solid', paddingLeft: 8 }}>
-                                            <Text style={{ fontSize: 8, fontWeight: 700, color: C.navyDeep, fontStyle: 'italic', lineHeight: 1.5 }}>
-                                                „{p.data.quote}“
-                                            </Text>
-                                        </View>
-                                    )}
-                                </View>
-                            ))}
-                        </View>
-                    </View>
-                )}
-
-                {/* Values grid */}
-                <View style={{ marginTop: 20 }}>
-                    <Text style={{ fontSize: 7, fontWeight: 700, color: C.green, textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 12 }}>{l.values}</Text>
-                    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 16 }}>
-                        {companyInfo.values.map((v, i) => (
-                            <View key={i} style={{ width: '46%', marginBottom: 4 }}>
-                                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 4 }}>
-                                    <View style={{ width: 20, height: 20, backgroundColor: C.green, justifyContent: 'center', alignItems: 'center' }}>
-                                        <Text style={{ fontSize: 8, fontWeight: 700, color: C.white }}>0{i + 1}</Text>
-                                    </View>
-                                    <Text style={{ fontSize: 9, fontWeight: 700, color: C.navyDeep }}>{v.title}</Text>
-                                </View>
-                                <Text style={{ fontSize: 8, color: C.gray600, lineHeight: 1.5, paddingLeft: 28 }}>{v.description}</Text>
-                            </View>
-                        ))}
-                    </View>
-                </View>
-            </View>
-        </Page>
-    );
-};
-
-// ═══════════════════════════════════════════════════════════════════════════
-// TOC PAGE
-// ═══════════════════════════════════════════════════════════════════════════
-
-const TocPage: React.FC<{
-    products: BrochureProduct[];
-    locale: 'en' | 'de';
-    logoBlack?: string | Buffer;
-    productStartPage: number;
-}> = ({ products, locale, logoBlack, productStartPage }) => {
-    const l = labels(locale);
-
-    // Group products by their first category
-    const categories: Array<{ name: string; products: Array<BrochureProduct & { startingPage: number }> }> = [];
-    let currentPageNum = productStartPage;
-    for (const p of products) {
-        const catName = p.categories[0]?.name || l.other;
-        let category = categories.find(c => c.name === catName);
-        if (!category) {
-            category = { name: catName, products: [] };
-            categories.push(category);
-        }
-        category.products.push({ ...p, startingPage: currentPageNum });
-        currentPageNum++;
-    }
-
-    return (
-        <Page size="A4" style={{ fontFamily: 'Helvetica', backgroundColor: C.white, paddingBottom: BODY_BOTTOM, paddingHorizontal: MARGIN }}>
-            <Header logo={logoBlack} right={l.overview} />
-            <PageFooter left="KLZ Cables" right="www.klz-cables.com" />
-
-            <View style={{ paddingTop: BODY_TOP + 40 }}>
-                <Text style={{ fontSize: 24, fontWeight: 700, color: C.navyDeep, letterSpacing: -0.5, marginBottom: 24 }}>
-                    {l.catalog}
-                </Text>
-
-                {categories.map((cat, i) => (
-                    <View key={i} style={{ marginBottom: 16 }} minPresenceAhead={40}>
-                        {cat.name && (
-                            <Text style={{ fontSize: 8, fontWeight: 700, color: C.green, textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 8 }}>
-                                {cat.name}
-                            </Text>
-                        )}
-                        <View style={{ flexDirection: 'column', gap: 6 }}>
-                            {cat.products.map((p, j) => (
-                                <View key={j} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end' }}>
-                                    <Text style={{ fontSize: 9, fontWeight: 700, color: C.navyDeep }}>{p.name}</Text>
-                                    <View style={{ flex: 1, borderBottomWidth: 1, borderBottomColor: C.gray200, borderBottomStyle: 'dotted', marginHorizontal: 8, marginBottom: 3 }} />
-                                    <Text style={{ fontSize: 9, color: C.gray600 }}>{(p.startingPage || 0).toString().padStart(2, '0')}</Text>
-                                </View>
-                            ))}
-                        </View>
-                    </View>
-                ))}
-            </View>
-        </Page>
-    );
-};
-
-// ═══════════════════════════════════════════════════════════════════════════
-// PRODUCT PAGES
-// ═══════════════════════════════════════════════════════════════════════════
-
-const ProductPage: React.FC<{
-    product: BrochureProduct;
-    locale: 'en' | 'de';
-    logoBlack?: string | Buffer;
-}> = ({ product, locale, logoBlack }) => {
-    const l = labels(locale);
-
-    return (
-        <Page size="A4" style={{ fontFamily: 'Helvetica', backgroundColor: C.white, paddingTop: BODY_TOP, paddingBottom: BODY_BOTTOM, paddingHorizontal: MARGIN }}>
-            <Header logo={logoBlack} right="KLZ Cables" />
-            <PageFooter left="KLZ Cables" right="www.klz-cables.com" />
-
-            {/* Product image block reduced strictly to 110pt high */}
-            {product.featuredImage && (
-                <View style={{ height: 110, marginBottom: 20, marginHorizontal: -MARGIN }}>
-                    <Image src={product.featuredImage as unknown as Buffer} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
-                </View>
-            )}
-
-            {/* Labels & Name */}
-            {product.categories.length > 0 && (
-                <Text style={{ fontSize: 7, fontWeight: 700, color: C.green, textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 8 }}>
-                    {product.categories.map(c => c.name).join(' • ')}
-                </Text>
-            )}
-            <Text style={{ fontSize: 20, fontWeight: 700, color: C.navyDeep, letterSpacing: -0.5, marginBottom: 16 }}>{product.name}</Text>
-
-            {/* Description — full width */}
-            {product.descriptionHtml && (
-                <View style={{ marginBottom: 16 }}>
-                    <Text style={{ fontSize: 7, fontWeight: 700, color: C.green, textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 6 }}>{l.application}</Text>
-                    <RichText style={{ fontSize: 9, color: C.gray600, lineHeight: 1.6 }} gap={6}>
-                        {product.descriptionHtml}
-                    </RichText>
-                </View>
-            )}
-
-            {/* Technical Data — full-width striped table */}
-            {product.attributes && product.attributes.length > 0 && (
-                <View style={{ marginBottom: 16 }}>
-                    <Text style={{ fontSize: 7, fontWeight: 700, color: C.green, textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 8 }}>{l.specs}</Text>
-
-                    {/* Table header */}
-                    <View style={{ flexDirection: 'row', borderBottomWidth: 1.5, borderBottomColor: C.navy, borderBottomStyle: 'solid', paddingBottom: 5, paddingHorizontal: 10, marginBottom: 2 }}>
-                        <View style={{ width: '50%' }}>
-                            <Text style={{ fontSize: 7, fontWeight: 700, color: C.gray400, textTransform: 'uppercase', letterSpacing: 0.8 }}>{l.property}</Text>
-                        </View>
-                        <View style={{ flex: 1 }}>
-                            <Text style={{ fontSize: 7, fontWeight: 700, color: C.gray400, textTransform: 'uppercase', letterSpacing: 0.8 }}>{l.value}</Text>
-                        </View>
-                    </View>
-
-                    {product.attributes.map((attr, i) => (
-                        <View key={i} style={{
-                            flexDirection: 'row',
-                            paddingVertical: 5, paddingHorizontal: 10,
-                            backgroundColor: i % 2 === 0 ? C.white : C.offWhite,
-                            borderBottomWidth: i < product.attributes.length - 1 ? 0.5 : 0,
-                            borderBottomColor: C.gray200, borderBottomStyle: 'solid',
-                        }}>
-                            <View style={{ width: '50%', paddingRight: 12 }}>
-                                <Text style={{ fontSize: 8, fontWeight: 700, color: C.navyDeep }}>{attr.name}</Text>
-                            </View>
-                            <View style={{ flex: 1 }}>
-                                <Text style={{ fontSize: 8, color: C.gray900 }}>{attr.options.join(', ')}</Text>
-                            </View>
-                        </View>
-                    ))}
-                </View>
-            )}
-
-            {/* QR Codes — horizontal row at bottom */}
-            {(product.qrWebsite || product.qrDatasheet) && (
-                <View style={{ flexDirection: 'row', gap: 24, marginTop: 8 }}>
-                    {product.qrWebsite && (
-                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-                            <View style={{ borderWidth: 1, borderColor: C.gray200, borderStyle: 'solid', padding: 2 }}>
-                                <Image src={product.qrWebsite} style={{ width: 36, height: 36 }} />
-                            </View>
-                            <View>
-                                <Text style={{ fontSize: 7, fontWeight: 700, color: C.navyDeep, textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 1 }}>{l.qrWeb}</Text>
-                                <Text style={{ fontSize: 7, color: C.gray400 }}>{locale === 'de' ? 'Produktseite' : 'Product Page'}</Text>
-                            </View>
-                        </View>
-                    )}
-                    {product.qrDatasheet && (
-                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-                            <View style={{ borderWidth: 1, borderColor: C.gray200, borderStyle: 'solid', padding: 2 }}>
-                                <Image src={product.qrDatasheet} style={{ width: 36, height: 36 }} />
-                            </View>
-                            <View>
-                                <Text style={{ fontSize: 7, fontWeight: 700, color: C.navyDeep, textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 1 }}>{l.qrPdf}</Text>
-                                <Text style={{ fontSize: 7, color: C.gray400 }}>{locale === 'de' ? 'Datenblatt' : 'Datasheet'}</Text>
-                            </View>
-                        </View>
-                    )}
-                </View>
-            )}
-        </Page>
-    );
-};
-
-// ═══════════════════════════════════════════════════════════════════════════
-// BACK COVER
-// ═══════════════════════════════════════════════════════════════════════════
-
-const BackCover: React.FC<{
-    companyInfo: BrochureProps['companyInfo'];
-    locale: 'en' | 'de';
-    logoWhite?: string | Buffer;
-    image?: string | Buffer;
-}> = ({ companyInfo, locale, logoWhite, image }) => {
-    const l = labels(locale);
-
-    return (
-        <Page size="A4" style={{ fontFamily: 'Helvetica' }}>
-            {/* Background */}
-            {imgValid(image) && (
-                <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
-                    <Image src={image!} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                    <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: C.navyDeep, opacity: 0.92 }} />
-                </View>
-            )}
-            {!imgValid(image) && <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: C.navyDeep }} />}
-
-            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: MARGIN }}>
-                {imgValid(logoWhite) ? (
-                    <Image src={logoWhite!} style={{ width: 160, marginBottom: 40 }} />
-                ) : (
-                    <Text style={{ fontSize: 28, fontWeight: 700, color: C.white, letterSpacing: 3, textTransform: 'uppercase', marginBottom: 40 }}>KLZ CABLES</Text>
-                )}
-
-                <View style={{ width: 40, height: 3, backgroundColor: C.green, marginBottom: 40 }} />
-
-                <Text style={{ fontSize: 8, fontWeight: 700, color: C.green, textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 12 }}>{l.contact}</Text>
-                <Text style={{ fontSize: 12, color: C.white, lineHeight: 1.8, textAlign: 'center', marginBottom: 20 }}>{companyInfo.address}</Text>
-
-                <Text style={{ fontSize: 12, color: C.white, marginBottom: 4 }}>{companyInfo.phone}</Text>
-                <Text style={{ fontSize: 12, color: C.gray300, marginBottom: 24 }}>{companyInfo.email}</Text>
-
-                <Text style={{ fontSize: 13, fontWeight: 700, color: C.green }}>{companyInfo.website}</Text>
-            </View>
-
-            <View style={{ position: 'absolute', bottom: 28, left: MARGIN, right: MARGIN, alignItems: 'center' }} fixed>
-                <Text style={{ fontSize: 8, color: C.gray400 }}>© {new Date().getFullYear()} KLZ Cables GmbH</Text>
-            </View>
-        </Page>
-    );
-};
-
-// ═══════════════════════════════════════════════════════════════════════════
-// DOCUMENT
-// ═══════════════════════════════════════════════════════════════════════════
-
-export const PDFBrochure: React.FC<BrochureProps> = ({
-    products, locale, companyInfo, introContent,
-    marketingSections, logoBlack, logoWhite, galleryImages, messages, directorPhotos,
-}) => {
-    // Cover(1) + About(1) + marketingSections.length + TOC(1) + products + BackCover(1)
-    const numInfoPages = 1 + (marketingSections?.length || 0);
-    const productStartPage = 1 + numInfoPages + 1;
-
-    // Image assignment — each page gets a UNIQUE image, never repeating
-    // galleryImages indices: 0=cover, 1=about, 2..N-2=info sections, N-1=back cover
-    // TOC intentionally gets NO image (clean list page)
-    const totalGallery = galleryImages?.length || 0;
-    const backCoverImgIdx = totalGallery - 1;
-
-    // Section themes: alternate light/dark
-    const sectionThemes: Array<'light' | 'dark'> = [];
-    // imagePosition: alternate between top and bottom-half for variety
-    const imagePositions: Array<'top' | 'bottom-half'> = [];
-    if (marketingSections) {
-        for (let i = 0; i < marketingSections.length; i++) {
-            sectionThemes.push(i % 2 === 1 ? 'dark' : 'light');
-            imagePositions.push(i % 2 === 0 ? 'top' : 'bottom-half');
-        }
-    }
-
-    return (
-        <Document>
-            <CoverPage locale={locale} introContent={introContent} logoWhite={logoWhite} galleryImages={galleryImages} />
-
-            {/* About page — image[1] */}
-            <AboutPage locale={locale} companyInfo={companyInfo} logoBlack={logoBlack} image={galleryImages?.[1]} messages={messages} directorPhotos={directorPhotos} />
-
-            {/* Info sections — images[2..] each unique, alternating top/bottom and light/dark */}
-            {marketingSections?.map((section, i) => (
-                <InfoPage
-                    key={`info-${i}`}
-                    section={section}
-                    image={galleryImages?.[i + 2]}
-                    logoBlack={logoBlack}
-                    logoWhite={logoWhite}
-                    dark={sectionThemes[i] === 'dark'}
-                    imagePosition={imagePositions[i]}
-                />
-            ))}
-
-            {/* TOC — no decorative image, clean list */}
-            <TocPage products={products} locale={locale} logoBlack={logoBlack} productStartPage={productStartPage} />
-
-            {/* Products — each on its own page */}
-            {products.map(p => (
-                <ProductPage key={p.id} product={p} locale={locale} logoBlack={logoBlack} />
-            ))}
-
-            {/* Back cover — last gallery image */}
-            <BackCover companyInfo={companyInfo} locale={locale} logoWhite={logoWhite} image={galleryImages?.[backCoverImgIdx]} />
-        </Document>
-    );
-};

lib/pdf-datasheet.tsx

@@ -1,52 +1,30 @@
 import * as React from 'react';
 import { Document, Page, View, Text, Image, StyleSheet, Font } from '@react-pdf/renderer';
 
-// Register fonts (using system fonts for now, can be customized)
-Font.register({
-  family: 'Helvetica',
-  fonts: [
-    { src: '/fonts/Helvetica.ttf', fontWeight: 400 },
-    { src: '/fonts/Helvetica-Bold.ttf', fontWeight: 700 },
-  ],
-});
-
-// ─── Brand Tokens (matching brochure) ────────────────────────────────────────
-const C = {
-  navy: '#001a4d',
-  navyDeep: '#000d26',
-  green: '#4da612',
-  greenLight: '#e8f5d8',
-  white: '#FFFFFF',
-  offWhite: '#f8f9fa',
-  gray100: '#f3f4f6',
-  gray200: '#e5e7eb',
-  gray300: '#d1d5db',
-  gray400: '#9ca3af',
-  gray600: '#4b5563',
-  gray900: '#111827',
-};
-
-const MARGIN = 56;
+// Standard fonts like Helvetica are built-in to PDF and don't require registration
+// unless we want to use specific TTF files. Using built-in Helvetica for maximum stability.
 
+// Industrial/technical/restrained design - STYLEGUIDE.md compliant
 const styles = StyleSheet.create({
   page: {
-    color: C.gray900,
+    color: '#111827', // Text Primary
     lineHeight: 1.5,
-    backgroundColor: C.white,
+    backgroundColor: '#FFFFFF',
     paddingTop: 0,
-    paddingBottom: 80,
+    paddingBottom: 100,
     fontFamily: 'Helvetica',
   },
 
   // Hero-style header
   hero: {
-    backgroundColor: C.white,
+    backgroundColor: '#FFFFFF',
     paddingTop: 24,
     paddingBottom: 0,
-    paddingHorizontal: MARGIN,
+    paddingHorizontal: 72,
     marginBottom: 20,
     position: 'relative',
     borderBottomWidth: 0,
+    borderBottomColor: '#e5e7eb',
   },
 
   header: {
@@ -57,17 +35,17 @@ const styles = StyleSheet.create({
   },
 
   logoText: {
-    fontSize: 22,
+    fontSize: 24,
     fontWeight: 700,
-    color: C.navyDeep,
-    letterSpacing: 2,
+    color: '#000d26',
+    letterSpacing: 1,
     textTransform: 'uppercase',
   },
 
   docTitle: {
-    fontSize: 8,
+    fontSize: 10,
     fontWeight: 700,
-    color: C.green,
+    color: '#001a4d',
     letterSpacing: 2,
     textTransform: 'uppercase',
   },
@@ -86,10 +64,10 @@ const styles = StyleSheet.create({
     height: 120,
     justifyContent: 'center',
     alignItems: 'center',
-    borderRadius: 4,
+    borderRadius: 8,
     borderWidth: 1,
-    borderColor: C.gray200,
-    backgroundColor: C.white,
+    borderColor: '#e5e7eb',
+    backgroundColor: '#FFFFFF',
     overflow: 'hidden',
   },
 
@@ -101,7 +79,7 @@ const styles = StyleSheet.create({
   productName: {
     fontSize: 24,
     fontWeight: 700,
-    color: C.navyDeep,
+    color: '#000d26',
     marginBottom: 0,
     textTransform: 'uppercase',
     letterSpacing: -0.5,
@@ -109,7 +87,7 @@ const styles = StyleSheet.create({
 
   productMeta: {
     fontSize: 10,
-    color: C.gray600,
+    color: '#4b5563',
     fontWeight: 700,
     textTransform: 'uppercase',
     letterSpacing: 1,
@@ -123,13 +101,13 @@ const styles = StyleSheet.create({
 
   noImage: {
     fontSize: 8,
-    color: C.gray400,
+    color: '#9ca3af',
     textAlign: 'center',
   },
 
   // Content Area
   content: {
-    paddingHorizontal: MARGIN,
+    paddingHorizontal: 72,
   },
 
   // Content sections
@@ -138,40 +116,40 @@ const styles = StyleSheet.create({
   },
 
   sectionTitle: {
-    fontSize: 8,
+    fontSize: 14,
     fontWeight: 700,
-    color: C.green,
-    marginBottom: 6,
+    color: '#000d26', // Primary Dark
+    marginBottom: 8,
     textTransform: 'uppercase',
-    letterSpacing: 1.5,
+    letterSpacing: -0.2,
   },
 
   sectionAccent: {
     width: 30,
-    height: 2,
-    backgroundColor: C.green,
+    height: 3,
+    backgroundColor: '#82ed20', // Accent Green
     marginBottom: 8,
-    borderRadius: 1,
+    borderRadius: 1.5,
   },
 
   description: {
-    fontSize: 10,
+    fontSize: 11,
     lineHeight: 1.7,
-    color: C.gray600,
+    color: '#4b5563', // Text Secondary
   },
 
   // Technical data table
   specsTable: {
-    marginTop: 4,
-    borderWidth: 0,
-    borderRadius: 0,
+    marginTop: 8,
+    border: '1px solid #e5e7eb',
+    borderRadius: 8,
     overflow: 'hidden',
   },
 
   specsTableRow: {
     flexDirection: 'row',
-    borderBottomWidth: 0.5,
-    borderBottomColor: C.gray200,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e5e7eb',
   },
 
   specsTableRowLast: {
@@ -180,85 +158,83 @@ const styles = StyleSheet.create({
 
   specsTableLabelCell: {
     flex: 1,
-    paddingVertical: 5,
-    paddingHorizontal: 12,
-    backgroundColor: C.offWhite,
-    borderRightWidth: 0.5,
-    borderRightColor: C.gray200,
+    paddingVertical: 4,
+    paddingHorizontal: 16,
+    backgroundColor: '#f8f9fa',
+    borderRightWidth: 1,
+    borderRightColor: '#e5e7eb',
   },
 
   specsTableValueCell: {
     flex: 1,
-    paddingVertical: 5,
-    paddingHorizontal: 12,
+    paddingVertical: 4,
+    paddingHorizontal: 16,
   },
 
   specsTableLabelText: {
-    fontSize: 8,
+    fontSize: 9,
     fontWeight: 700,
-    color: C.navyDeep,
+    color: '#000d26',
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
 
   specsTableValueText: {
-    fontSize: 9,
-    color: C.gray900,
-    fontWeight: 400,
+    fontSize: 10,
+    color: '#111827',
+    fontWeight: 500,
   },
 
   // Categories
   categories: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: 6,
+    gap: 8,
   },
 
   categoryTag: {
-    backgroundColor: C.offWhite,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderWidth: 0.5,
-    borderColor: C.gray200,
-    borderRadius: 3,
+    backgroundColor: '#f8f9fa',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    border: '1px solid #e5e7eb',
+    borderRadius: 100,
   },
 
   categoryText: {
-    fontSize: 7,
-    color: C.gray600,
+    fontSize: 8,
+    color: '#4b5563',
     fontWeight: 700,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
 
-  // Footer — matches brochure style
+  // Footer
   footer: {
     position: 'absolute',
-    bottom: 28,
-    left: MARGIN,
-    right: MARGIN,
+    bottom: 40,
+    left: 72,
+    right: 72,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingTop: 12,
-    borderTopWidth: 2,
-    borderTopColor: C.green,
+    paddingTop: 24,
+    borderTop: '1px solid #e5e7eb',
   },
 
   footerText: {
-    fontSize: 7,
-    color: C.gray400,
-    fontWeight: 400,
+    fontSize: 8,
+    color: '#9ca3af',
+    fontWeight: 500,
     textTransform: 'uppercase',
-    letterSpacing: 0.8,
+    letterSpacing: 1,
   },
 
   footerBrand: {
-    fontSize: 9,
+    fontSize: 10,
     fontWeight: 700,
-    color: C.navyDeep,
+    color: '#000d26',
     textTransform: 'uppercase',
-    letterSpacing: 1.5,
+    letterSpacing: 1,
   },
 });
 

lib/pdf-page.tsx

@@ -0,0 +1,328 @@
+import * as React from 'react';
+import { Document, Page, View, Text, StyleSheet, Font, Link } from '@react-pdf/renderer';
+
+// Standard fonts like Helvetica are built-in to PDF and don't require registration
+// unless we want to use specific TTF files. Using built-in Helvetica for maximum stability.
+
+// ─── Brand Tokens (matching datasheet) ──────────────────────────────────
+const C = {
+  navy: '#001a4d',
+  navyDeep: '#000d26',
+  accent: '#82ed20',
+  white: '#FFFFFF',
+  offWhite: '#f8f9fa',
+  gray100: '#f3f4f6',
+  gray200: '#e5e7eb',
+  gray300: '#d1d5db',
+  gray400: '#9ca3af',
+  gray600: '#4b5563',
+  gray900: '#111827',
+};
+
+const MARGIN = 72;
+
+const styles = StyleSheet.create({
+  page: {
+    color: C.gray900,
+    lineHeight: 1.5,
+    backgroundColor: C.white,
+    paddingTop: 0,
+    paddingBottom: 100,
+    fontFamily: 'Helvetica',
+  },
+
+  // Hero-style header
+  hero: {
+    backgroundColor: C.white,
+    paddingTop: 24,
+    paddingBottom: 20,
+    paddingHorizontal: MARGIN,
+    marginBottom: 20,
+    position: 'relative',
+    borderBottomWidth: 1,
+    borderBottomColor: C.gray200,
+  },
+
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+
+  logoText: {
+    fontSize: 24,
+    fontWeight: 700,
+    color: C.navyDeep,
+    letterSpacing: 1,
+    textTransform: 'uppercase',
+  },
+
+  docTitle: {
+    fontSize: 10,
+    fontWeight: 700,
+    color: C.navy,
+    letterSpacing: 2,
+    textTransform: 'uppercase',
+  },
+
+  productHero: {
+    marginTop: 0,
+  },
+
+  pageTitle: {
+    fontSize: 24,
+    fontWeight: 700,
+    color: C.navyDeep,
+    marginBottom: 0,
+    textTransform: 'uppercase',
+    letterSpacing: -0.5,
+  },
+
+  accentBar: {
+    width: 30,
+    height: 3,
+    backgroundColor: C.accent,
+    marginTop: 8,
+    borderRadius: 1.5,
+  },
+
+  // Content Area
+  content: {
+    paddingHorizontal: MARGIN,
+  },
+
+  // Lexical Elements
+  paragraph: {
+    fontSize: 10,
+    color: C.gray600,
+    lineHeight: 1.7,
+    marginBottom: 12,
+  },
+  heading1: {
+    fontSize: 16,
+    fontWeight: 700,
+    color: C.navyDeep,
+    marginTop: 20,
+    marginBottom: 10,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+  heading2: {
+    fontSize: 12,
+    fontWeight: 700,
+    color: C.navyDeep,
+    marginTop: 16,
+    marginBottom: 8,
+  },
+  heading3: {
+    fontSize: 10,
+    fontWeight: 700,
+    color: C.navyDeep,
+    marginTop: 12,
+    marginBottom: 6,
+  },
+  list: {
+    marginBottom: 12,
+    marginLeft: 8,
+  },
+  listItem: {
+    flexDirection: 'row',
+    marginBottom: 4,
+  },
+  listItemBullet: {
+    width: 12,
+    fontSize: 10,
+    color: C.accent,
+    fontWeight: 700,
+  },
+  listItemContent: {
+    flex: 1,
+    fontSize: 10,
+    color: C.gray600,
+    lineHeight: 1.7,
+  },
+  link: {
+    color: C.accent,
+    textDecoration: 'none',
+  },
+  textBold: {
+    fontWeight: 700,
+    fontFamily: 'Helvetica-Bold',
+    color: C.navyDeep,
+  },
+  textItalic: {
+    fontStyle: 'italic',
+  },
+
+  // Footer — matches brochure style
+  footer: {
+    position: 'absolute',
+    bottom: 40,
+    left: MARGIN,
+    right: MARGIN,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingTop: 24,
+    borderTopWidth: 1,
+    borderTopColor: C.gray200,
+  },
+
+  footerText: {
+    fontSize: 8,
+    color: C.gray400,
+    fontWeight: 500,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+
+  footerBrand: {
+    fontSize: 10,
+    fontWeight: 700,
+    color: C.navyDeep,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+});
+
+// ─── Lexical to React-PDF Renderer ────────────────────────────────
+
+const renderLexicalNode = (node: any, idx: number): React.ReactNode => {
+  if (!node) return null;
+
+  switch (node.type) {
+    case 'text': {
+      const format = node.format || 0;
+      const isBold = (format & 1) !== 0;
+      const isItalic = (format & 2) !== 0;
+
+      let elementStyle: any = {};
+      if (isBold) elementStyle = { ...elementStyle, ...styles.textBold };
+      if (isItalic) elementStyle = { ...elementStyle, ...styles.textItalic };
+
+      return (
+        <Text key={idx} style={elementStyle}>
+          {node.text}
+        </Text>
+      );
+    }
+
+    case 'paragraph': {
+      return (
+        <Text key={idx} style={styles.paragraph}>
+          {node.children?.map((child: any, i: number) => renderLexicalNode(child, i))}
+        </Text>
+      );
+    }
+
+    case 'heading': {
+      let hStyle = styles.heading3;
+      if (node.tag === 'h1') hStyle = styles.heading1;
+      if (node.tag === 'h2') hStyle = styles.heading2;
+
+      return (
+        <Text key={idx} style={hStyle}>
+          {node.children?.map((child: any, i: number) => renderLexicalNode(child, i))}
+        </Text>
+      );
+    }
+
+    case 'list': {
+      return (
+        <View key={idx} style={styles.list}>
+          {node.children?.map((child: any, i: number) => {
+            if (child.type === 'listitem') {
+              return (
+                <View key={i} style={styles.listItem}>
+                  <Text style={styles.listItemBullet}>
+                    {node.listType === 'number' ? `${i + 1}.` : '•'}
+                  </Text>
+                  <Text style={styles.listItemContent}>
+                    {child.children?.map((c: any, ci: number) => renderLexicalNode(c, ci))}
+                  </Text>
+                </View>
+              );
+            }
+            return renderLexicalNode(child, i);
+          })}
+        </View>
+      );
+    }
+
+    case 'link': {
+      const href = node.fields?.url || node.url || '#';
+      return (
+        <Link key={idx} src={href} style={styles.link}>
+          {node.children?.map((child: any, i: number) => renderLexicalNode(child, i))}
+        </Link>
+      );
+    }
+
+    case 'linebreak': {
+      return <Text key={idx}>{'\n'}</Text>;
+    }
+
+    // Ignore payload blocks recursively to avoid crashing
+    case 'block':
+      return null;
+
+    default:
+      if (node.children) {
+        return (
+          <Text key={idx}>
+            {node.children.map((child: any, i: number) => renderLexicalNode(child, i))}
+          </Text>
+        );
+      }
+      return null;
+  }
+};
+
+interface PDFPageProps {
+  page: any;
+  locale?: string;
+}
+
+export const PDFPage: React.FC<PDFPageProps> = ({ page, locale = 'de' }) => {
+  const dateStr = new Date().toLocaleDateString(locale === 'en' ? 'en-US' : 'de-DE', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+  return (
+    <Document>
+      <Page size="A4" style={styles.page}>
+        {/* Hero Header */}
+        <View style={styles.hero} fixed>
+          <View style={styles.header}>
+            <View>
+              <Text style={styles.logoText}>KLZ</Text>
+            </View>
+            <Text style={styles.docTitle}>{locale === 'en' ? 'Document' : 'Dokument'}</Text>
+          </View>
+
+          <View style={styles.productHero}>
+            <Text style={styles.pageTitle}>{page.title}</Text>
+            <View style={styles.accentBar} />
+          </View>
+        </View>
+
+        <View style={styles.content}>
+          <View>
+            {page.content?.root?.children?.map((node: any, i: number) =>
+              renderLexicalNode(node, i),
+            )}
+          </View>
+        </View>
+
+        {/* Minimal footer */}
+        <View style={styles.footer} fixed>
+          <Text style={styles.footerBrand}>KLZ CABLES</Text>
+          <Text style={styles.footerText}>{dateStr}</Text>
+        </View>
+      </Page>
+    </Document>
+  );
+};

lib/utils/technical.ts

@@ -1,106 +0,0 @@
-/**
- * Utility for formatting technical data values.
- * Handles long lists of standards and simplifies repetitive strings.
- */
-
-export interface FormattedTechnicalValue {
-    original: string;
-    isList: boolean;
-    parts: string[];
-    displayValue: string;
-}
-
-/**
- * Formats a technical value string.
- * Detects if it's a list (separated by / or ,) and tries to clean it up.
- */
-export function formatTechnicalValue(value: string | null | undefined): FormattedTechnicalValue {
-    if (!value) {
-        return { original: '', isList: false, parts: [], displayValue: '' };
-    }
-
-    const str = String(value).trim();
-
-    // Detect list separators
-    let parts: string[] = [];
-    if (str.includes(' / ')) {
-        parts = str.split(' / ').map(p => p.trim());
-    } else if (str.includes(' /')) {
-        parts = str.split(' /').map(p => p.trim());
-    } else if (str.includes('/ ')) {
-        parts = str.split('/ ').map(p => p.trim());
-    } else if (str.split('/').length > 2) {
-        // Check if it's actually many standards separated by / without spaces
-        // e.g. EN123/EN456/EN789
-        const split = str.split('/');
-        if (split.length > 3) {
-            parts = split.map(p => p.trim());
-        }
-    }
-
-    // If no parts found yet, try comma
-    if (parts.length === 0 && str.includes(', ')) {
-        parts = str.split(', ').map(p => p.trim());
-    }
-
-    // Filter out empty parts
-    parts = parts.filter(Boolean);
-
-    // If we have parts, let's see if we can simplify them
-    if (parts.length > 2) {
-        // Find common prefix to condense repetitive standards
-        let commonPrefix = '';
-        const first = parts[0];
-        const last = parts[parts.length - 1];
-        let i = 0;
-        while (i < first.length && first.charAt(i) === last.charAt(i)) {
-            i++;
-        }
-        commonPrefix = first.substring(0, i);
-
-        // If a meaningful prefix exists (e.g., "EN 60 332-1-")
-        if (commonPrefix.length > 4) {
-            // Trim trailing spaces/dashes before comparing words
-            const basePrefix = commonPrefix.trim();
-            const suffixParts: string[] = [];
-
-            for (let idx = 0; idx < parts.length; idx++) {
-                if (idx === 0) {
-                    suffixParts.push(parts[idx]);
-                } else {
-                    const suffix = parts[idx].substring(commonPrefix.length).trim();
-                    if (suffix) {
-                        suffixParts.push(suffix);
-                    }
-                }
-            }
-
-            // Condense into a single string like "EN 60 332-1-2 / -3 / -4"
-            // Wait, returning a single string might still wrap badly. 
-            // Instead, we return them as chunks or just a condensed string.
-            const condensedString = suffixParts[0] + ' / -' + suffixParts.slice(1).join(' / -');
-
-            return {
-                original: str,
-                isList: false, // Turn off badge rendering to use text block instead
-                parts: [condensedString],
-                displayValue: condensedString
-            };
-        }
-
-        // If no common prefix, return as list so UI can render badges
-        return {
-            original: str,
-            isList: true,
-            parts,
-            displayValue: parts.join(', ')
-        };
-    }
-
-    return {
-        original: str,
-        isList: false,
-        parts: [str],
-        displayValue: str
-    };
-}

messages/de.json

@@ -3,7 +3,7 @@
     "pages": {
       "impressum": "impressum",
       "datenschutz": "datenschutz",
-      "agbs": "agbs",
+      "agbs": "terms",
       "kontakt": "contact",
       "team": "team",
       "blog": "blog",
@@ -74,7 +74,7 @@
     "privacyPolicy": "Datenschutz",
     "privacyPolicySlug": "datenschutz",
     "terms": "AGB",
-    "termsSlug": "agbs",
+    "termsSlug": "terms",
     "products": "Produkte",
     "lowVoltage": "Niederspannungskabel",
     "mediumVoltage": "Mittelspannungskabel",
@@ -226,10 +226,6 @@
     "requestQuoteDesc": "Erhalten Sie technische Spezifikationen und Preise für Ihr Projekt.",
     "downloadDatasheet": "Datenblatt herunterladen",
     "downloadDatasheetDesc": "Erhalten Sie die vollständigen technischen Spezifikationen als PDF.",
-    "downloadExcel": "Excel herunterladen",
-    "downloadExcelDesc": "Erhalten Sie die technischen Daten als editierbare Tabelle.",
-    "downloadBrochure": "Produktbroschüre",
-    "downloadBrochureDesc": "Laden Sie unseren kompletten Produktkatalog mit allen technischen Spezifikationen herunter.",
     "form": {
       "contactInfo": "Kontaktinformationen",
       "projectDetails": "Projektdetails",
@@ -399,21 +395,5 @@
       "description": "Es scheint, als wäre das Kabel zu dieser Seite unterbrochen worden. Wir konnten die gesuchte Ressource nicht finden.",
       "cta": "Zurück zur Sicherheit"
     }
-  },
-  "Brochure": {
-    "title": "Produktkatalog",
-    "subtitle": "Erhalten Sie unsere komplette Produktbroschüre mit allen technischen Spezifikationen und Kabellösungen.",
-    "emailPlaceholder": "ihre@email.de",
-    "emailLabel": "E-Mail-Adresse",
-    "submit": "Broschüre erhalten",
-    "submitting": "Wird gesendet...",
-    "successTitle": "Ihre Broschüre ist bereit!",
-    "successDesc": "Vielen Dank für Ihr Interesse. Klicken Sie unten, um den kompletten KLZ-Produktkatalog herunterzuladen.",
-    "download": "Broschüre herunterladen",
-    "privacyNote": "Mit dem Absenden erklären Sie sich mit unserer Datenschutzerklärung einverstanden.",
-    "close": "Schließen",
-    "ctaTitle": "Kompletter Produktkatalog",
-    "ctaDesc": "Alle Datenblätter in einem Premium-PDF — technische Spezifikationen, Kabellösungen & mehr.",
-    "ctaButton": "Kostenlose Broschüre erhalten"
   }
-}
+}

messages/en.json

@@ -3,7 +3,7 @@
     "pages": {
       "legal-notice": "impressum",
       "privacy-policy": "datenschutz",
-      "terms": "agbs",
+      "terms": "terms",
       "contact": "contact",
       "team": "team",
       "blog": "blog",
@@ -226,10 +226,6 @@
     "requestQuoteDesc": "Get technical specifications and pricing for your project.",
     "downloadDatasheet": "Download Datasheet",
     "downloadDatasheetDesc": "Get the full technical specifications in PDF format.",
-    "downloadExcel": "Download Excel",
-    "downloadExcelDesc": "Get the technical data as editable spreadsheet.",
-    "downloadBrochure": "Product Brochure",
-    "downloadBrochureDesc": "Download our complete product catalog with all technical specifications.",
     "form": {
       "contactInfo": "Contact Information",
       "projectDetails": "Project Details",
@@ -399,21 +395,5 @@
       "description": "It seems the cable to this page has been disconnected. We couldn't find the resource you were looking for.",
       "cta": "Back to Safety"
     }
-  },
-  "Brochure": {
-    "title": "Product Catalog",
-    "subtitle": "Get our complete product brochure with all technical specifications and cable solutions.",
-    "emailPlaceholder": "your@email.com",
-    "emailLabel": "Email Address",
-    "submit": "Get Brochure",
-    "submitting": "Sending...",
-    "successTitle": "Your brochure is ready!",
-    "successDesc": "Thank you for your interest. Click below to download the complete KLZ product catalog.",
-    "download": "Download Brochure",
-    "privacyNote": "By submitting you agree to our privacy policy.",
-    "close": "Close",
-    "ctaTitle": "Complete Product Catalog",
-    "ctaDesc": "All datasheets in one premium PDF — technical specifications, cable solutions & more.",
-    "ctaButton": "Get Free Brochure"
   }
-}
+}

middleware.ts

@@ -102,7 +102,7 @@ export default async function middleware(request: NextRequest) {
 
 export const config = {
   matcher: [
-    '/((?!api|_next/static|_next/image|favicon.ico|admin|manifest.webmanifest|.*\\.(?:svg|png|jpg|jpeg|gif|webp|pdf|xlsx|txt|vcf|xml|webm|mp4|map)$).*)',
+    '/((?!api|_next/static|_next/image|favicon.ico|admin|manifest.webmanifest|.*\\.(?:svg|png|jpg|jpeg|gif|webp|pdf|txt|vcf|xml|webm|mp4|map)$).*)',
     '/(de|en)/:path*',
   ],
 };

next.config.mjs

@@ -12,12 +12,18 @@ const nextConfig = {
     maxInactiveAge: 60 * 1000,
   },
   experimental: {
+    staleTimes: {
+      dynamic: 0,
+      static: 30,
+    },
     optimizePackageImports: ['lucide-react', 'framer-motion', '@/components/ui'],
     cpus: 3,
     workerThreads: false,
+    serverActions: {
+      allowedOrigins: ["*.klz-cables.com", "*.branch.klz-cables.com", "localhost:3000", "klz.localhost"],
+    },
   },
   reactStrictMode: false,
-  swcMinify: true,
   productionBrowserSourceMaps: false,
   logging: {
     fetches: {
@@ -25,18 +31,6 @@ const nextConfig = {
     },
   },
   ...(isProd ? { output: 'standalone' } : {}),
-  async rewrites() {
-    return [
-      {
-        source: '/:locale/datasheets/:path*',
-        destination: '/datasheets/:path*',
-      },
-      {
-        source: '/:locale/brochure/:path*',
-        destination: '/brochure/:path*',
-      },
-    ];
-  },
   async headers() {
     const isProd = process.env.NODE_ENV === 'production';
     const umamiDomain = new URL(process.env.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me').origin;
@@ -91,7 +85,7 @@ const nextConfig = {
       },
       {
         key: 'Strict-Transport-Security',
-        value: isProd ? 'max-age=63072000; includeSubDomains; preload' : 'max-age=0',
+        value: 'max-age=63072000; includeSubDomains; preload',
       },
     ];
 
@@ -405,7 +399,6 @@ const nextConfig = {
     ];
   },
   images: {
-    qualities: [75, 100],
     formats: ['image/webp'],
     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     remotePatterns: [
@@ -471,10 +464,6 @@ const nextConfig = {
           source: '/en/datenschutz',
           destination: '/en/privacy-policy',
         },
-        {
-          source: '/en/agbs',
-          destination: '/en/terms',
-        },
       ],
       afterFiles: [],
       fallback: [],

package.json

@@ -115,8 +115,6 @@
     "check:apis": "tsx ./scripts/check-apis.ts",
     "pdf:datasheets": "tsx ./scripts/generate-pdf-datasheets.ts",
     "pdf:datasheets:legacy": "tsx ./scripts/generate-pdf-datasheets-pdf-lib.ts",
-    "excel:datasheets": "tsx ./scripts/generate-excel-datasheets.ts",
-    "brochure:generate": "tsx ./scripts/generate-brochure.ts",
     "cms:migrate": "payload migrate",
     "cms:seed": "tsx ./scripts/seed-payload.ts",
     "assets:push:testing": "bash ./scripts/assets-sync.sh local testing",

payload-types.ts

@@ -87,7 +87,9 @@ export interface Config {
     products: ProductsSelect<false> | ProductsSelect<true>;
     pages: PagesSelect<false> | PagesSelect<true>;
     'payload-kv': PayloadKvSelect<false> | PayloadKvSelect<true>;
-    'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
+    'payload-locked-documents':
+      | PayloadLockedDocumentsSelect<false>
+      | PayloadLockedDocumentsSelect<true>;
     'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
     'payload-migrations': PayloadMigrationsSelect<false> | PayloadMigrationsSelect<true>;
   };
@@ -98,6 +100,9 @@ export interface Config {
   globals: {};
   globalsSelect: {};
   locale: 'de' | 'en';
+  widgets: {
+    collections: CollectionsWidget;
+  };
   user: User;
   jobs: {
     tasks: unknown;
@@ -249,7 +254,7 @@ export interface FormSubmission {
   id: number;
   name: string;
   email: string;
-  type: 'contact' | 'product_quote' | 'brochure_download';
+  type: 'contact' | 'product_quote';
   /**
    * The specific KLZ product the user requested a quote for.
    */
@@ -328,6 +333,14 @@ export interface Page {
   layout?: ('default' | 'fullBleed') | null;
   excerpt?: string | null;
   featuredImage?: (number | null) | Media;
+  /**
+   * If set, visiting this page will immediately redirect the user to this URL (e.g. /de/terms).
+   */
+  redirectUrl?: string | null;
+  /**
+   * Check for a permanent (301) redirect. Uncheck for a temporary (302) redirect.
+   */
+  redirectPermanent?: boolean | null;
   content: {
     root: {
       type: string;
@@ -574,6 +587,8 @@ export interface PagesSelect<T extends boolean = true> {
   layout?: T;
   excerpt?: T;
   featuredImage?: T;
+  redirectUrl?: T;
+  redirectPermanent?: T;
   content?: T;
   updatedAt?: T;
   createdAt?: T;
@@ -619,6 +634,16 @@ export interface PayloadMigrationsSelect<T extends boolean = true> {
   updatedAt?: T;
   createdAt?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "collections_widget".
+ */
+export interface CollectionsWidget {
+  data?: {
+    [k: string]: unknown;
+  };
+  width: 'full';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "StatsBlock".
@@ -957,7 +982,6 @@ export interface Auth {
   [k: string]: unknown;
 }
 
-
 declare module 'payload' {
   export interface GeneratedTypes extends Config {}
-}
+}

payload.config.ts

@@ -71,6 +71,8 @@ export default buildConfig({
   },
   db: postgresAdapter({
     prodMigrations: migrations,
+    migrationDir:
+      process.env.NODE_ENV === 'production' ? undefined : path.resolve(dirname, 'src/migrations'),
     pool: {
       connectionString:
         process.env.DATABASE_URI ||