fix: mobile nav overlay z-index — solid background above header, hamburger button stays clickable

.gitea/workflows/deploy.yml

@@ -439,6 +439,11 @@ jobs:
           NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
           GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
         run: pnpm run check:http
+      - name: 🌐 Locale & Language Switcher Validation
+        env:
+          NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
+          GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
+        run: pnpm run check:locale
 
       # ── Quality Gates (informational, don't block pipeline) ───────────────
       - name: 🌐 HTML DOM Validation

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

@@ -97,7 +97,7 @@ export default async function StandardPage({ params }: PageProps) {
               <h3 className="text-2xl md:text-3xl font-bold mb-4">{t('needHelp')}</h3>
               <p className="text-lg text-white/70 mb-8">{t('supportTeamAvailable')}</p>
               <TrackedLink
-                href={`/${locale}/contact`}
+                href={`/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}`}
                 className="inline-flex items-center px-8 py-4 bg-accent text-primary-dark font-bold rounded-full hover:bg-white transition-all duration-300 group/link"
                 eventProperties={{
                   location: 'generic_page_support_cta',

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

@@ -258,7 +258,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
       (node.fields?.blockType === 'productTabs' ||
         node.fields?.blockType === 'productTechnicalData'),
   );
-  const descriptionChildren = rootChildren.filter(
+  let descriptionChildren = rootChildren.filter(
     (node: any) =>
       !(
         node.type === 'block' &&
@@ -267,6 +267,23 @@ export default async function ProductPage({ params }: ProductPageProps) {
       ),
   );
 
+  // If no standalone description nodes, extract from the productTabs block's embedded content
+  if (descriptionChildren.length === 0) {
+    const tabsBlock = rootChildren.find(
+      (node: any) => node.type === 'block' && node.fields?.blockType === 'productTabs',
+    );
+    if (tabsBlock?.fields?.content?.root?.children) {
+      descriptionChildren = tabsBlock.fields.content.root.children.filter((node: any) => {
+        // Filter out MDX parsing artifacts like `}>`
+        if (node.type === 'paragraph' && node.children?.length === 1) {
+          const text = node.children[0]?.text?.trim();
+          return text !== '}>' && text !== '{' && text !== '}';
+        }
+        return true;
+      });
+    }
+  }
+
   const descriptionContent = {
     root: {
       ...product.content.root,
@@ -402,7 +419,13 @@ export default async function ProductPage({ params }: ProductPageProps) {
             {/* Description Area Next to Sidebar */}
             <div className="lg:col-span-8">
               <div className="max-w-none prose prose-primary prose-lg md:prose-xl mb-16 pb-16 border-b border-neutral-dark/5">
-                <PayloadRichText data={descriptionContent} />
+                {descriptionChildren.length > 0 ? (
+                  <PayloadRichText data={descriptionContent} />
+                ) : product.frontmatter.description ? (
+                  <p className="text-lg md:text-xl text-text-secondary leading-relaxed">
+                    {product.frontmatter.description}
+                  </p>
+                ) : null}
               </div>
             </div>
 

app/[locale]/products/page.tsx

@@ -59,6 +59,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
   const solarSlug = await mapFileSlugToTranslated('solar-cables', locale);
 
   const productsSlug = await mapFileSlugToTranslated('products', locale);
+  const contactSlug = await mapFileSlugToTranslated('contact', locale);
 
   const categories = [
     {
@@ -230,10 +231,10 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                   </p>
                 </div>
                 <Button
-                  href={`/${locale}/contact`}
+                  href={`/${locale}/${contactSlug}`}
                   variant="accent"
                   size="lg"
-                  className="group whitespace-nowrap w-full md:w-auto md:h-16 md:px-10 md:text-xl"
+                  className="group whitespace-nowrap w-full md:w-auto md:h-16 px-6 md:px-10 text-sm md:text-xl"
                 >
                   {t('cta.button')}
                   <span className="ml-2 md:ml-4 transition-transform group-hover:translate-x-2">

components/Footer.tsx

@@ -173,12 +173,12 @@ export default function Footer() {
               </li>
               <li>
                 <Link
-                  href={`/${locale}/contact`}
+                  href={`/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}`}
                   className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
                   onClick={() =>
                     trackEvent(AnalyticsEvents.LINK_CLICK, {
                       label: navT('contact'),
-                      href: '/contact',
+                      href: locale === 'de' ? '/kontakt' : '/contact',
                       location: 'footer_company',
                     })
                   }

components/Header.tsx

@@ -93,6 +93,7 @@ export default function Header() {
     const segmentMap: Record<string, Record<string, string>> = {
       de: {
         produkte: 'products',
+        kontakt: 'contact',
         impressum: 'legal-notice',
         datenschutz: 'privacy-policy',
         agbs: 'terms',
@@ -103,6 +104,7 @@ export default function Header() {
       },
       en: {
         products: 'produkte',
+        contact: 'kontakt',
         'legal-notice': 'impressum',
         'privacy-policy': 'datenschutz',
         terms: 'agbs',
@@ -183,24 +185,40 @@ export default function Header() {
                   className="animate-in fade-in slide-in-from-bottom-4 fill-mode-both"
                   style={{ animationDuration: '500ms', animationDelay: `${150 + idx * 80}ms` }}
                 >
-                  <Link
-                    href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
-                    onClick={() => {
-                      setIsMobileMenuOpen(false);
-                      trackEvent(AnalyticsEvents.LINK_CLICK, {
-                        label: item.label,
-                        href: item.href,
-                        location: 'header_nav',
-                      });
-                    }}
-                    className={cn(
-                      textColorClass,
-                      'hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5',
-                    )}
-                  >
-                    {item.label}
-                    <span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-500 group-hover:w-full rounded-full shadow-[0_0_12px_rgba(130,237,32,0.6)]" />
-                  </Link>
+                  {(() => {
+                    const fullHref = `/${currentLocale}${item.href === '/' ? '' : item.href}`;
+                    const isActive =
+                      item.href === '/'
+                        ? pathname === `/${currentLocale}` || pathname === '/'
+                        : pathname.startsWith(fullHref);
+                    return (
+                      <Link
+                        href={fullHref}
+                        aria-current={isActive ? 'page' : undefined}
+                        onClick={() => {
+                          setIsMobileMenuOpen(false);
+                          trackEvent(AnalyticsEvents.LINK_CLICK, {
+                            label: item.label,
+                            href: item.href,
+                            location: 'header_nav',
+                          });
+                        }}
+                        className={cn(
+                          textColorClass,
+                          'hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5',
+                          isActive && 'text-accent',
+                        )}
+                      >
+                        {item.label}
+                        <span
+                          className={cn(
+                            'absolute -bottom-2 left-0 h-1 bg-accent transition-all duration-500 rounded-full shadow-[0_0_12px_rgba(130,237,32,0.6)]',
+                            isActive ? 'w-full' : 'w-0 group-hover:w-full',
+                          )}
+                        />
+                      </Link>
+                    );
+                  })()}
                 </div>
               ))}
             </nav>
@@ -256,7 +274,7 @@ export default function Header() {
                 style={{ animationDuration: '600ms', animationDelay: '700ms' }}
               >
                 <Button
-                  href={`/${currentLocale}/contact`}
+                  href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`}
                   variant="white"
                   size="md"
                   className="px-8 shadow-xl hover:scale-105 transition-transform"
@@ -275,7 +293,7 @@ export default function Header() {
             {/* Mobile Menu Button */}
             <button
               className={cn(
-                'lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-50 transition-all duration-300',
+                'lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-[70] relative transition-all duration-300',
                 textColorClass,
                 isMobileMenuOpen ? 'rotate-90 scale-110' : 'rotate-0 scale-100',
               )}
@@ -320,7 +338,7 @@ export default function Header() {
         {/* Mobile Menu Overlay */}
         <div
           className={cn(
-            'fixed inset-0 bg-primary z-40 lg:hidden transition-all duration-500 ease-in-out flex flex-col',
+            'fixed inset-0 bg-primary z-[60] lg:hidden transition-all duration-500 ease-in-out flex flex-col',
             isMobileMenuOpen
               ? 'opacity-100 translate-y-0'
               : 'opacity-0 -translate-y-full pointer-events-none',
@@ -344,6 +362,15 @@ export default function Header() {
               >
                 <Link
                   href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                  aria-current={
+                    (
+                      item.href === '/'
+                        ? pathname === `/${currentLocale}` || pathname === '/'
+                        : pathname.startsWith(`/${currentLocale}${item.href}`)
+                    )
+                      ? 'page'
+                      : undefined
+                  }
                   onClick={() => {
                     setIsMobileMenuOpen(false);
                     trackEvent(AnalyticsEvents.LINK_CLICK, {
@@ -352,7 +379,12 @@ export default function Header() {
                       location: 'mobile_menu',
                     });
                   }}
-                  className="text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4"
+                  className={cn(
+                    'text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4',
+                    (item.href === '/'
+                      ? pathname === `/${currentLocale}` || pathname === '/'
+                      : pathname.startsWith(`/${currentLocale}${item.href}`)) && 'text-accent',
+                  )}
                 >
                   {item.label}
                 </Link>
@@ -388,7 +420,7 @@ export default function Header() {
 
               <div className="w-full max-w-xs">
                 <Button
-                  href={`/${currentLocale}/contact`}
+                  href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`}
                   variant="accent"
                   size="lg"
                   className="w-full py-6 text-lg md:text-xl shadow-2xl hover:scale-105 transition-transform"

components/PayloadRichText.tsx

@@ -27,6 +27,70 @@ const jsxConverters: JSXConverters = {
       return <span dangerouslySetInnerHTML={{ __html: text }} />;
     }
 
+    // Handle markdown-style lists embedded in text nodes from MDX migration
+    if (text && text.includes('\n- ')) {
+      const parts = text.split('\n- ').filter(Boolean);
+      // If first part doesn't start with "- ", it's a prefix paragraph
+      const startsWithDash = text.trimStart().startsWith('- ');
+      const prefix = startsWithDash ? null : parts.shift();
+      return (
+        <>
+          {prefix && <span>{prefix}</span>}
+          <ul className="list-disc pl-6 my-4 space-y-2">
+            {parts.map((item: string, i: number) => (
+              <li key={i}>{item.trim()}</li>
+            ))}
+          </ul>
+        </>
+      );
+    }
+
+    // Handle markdown-style links [text](url) from MDX migration
+    if (text && /\[([^\]]+)\]\(([^)]+)\)/.test(text)) {
+      const parts: React.ReactNode[] = [];
+      const remaining = text;
+      let key = 0;
+      const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+      let match;
+      let lastIndex = 0;
+      while ((match = linkRegex.exec(remaining)) !== null) {
+        if (match.index > lastIndex) {
+          parts.push(<span key={key++}>{remaining.slice(lastIndex, match.index)}</span>);
+        }
+        parts.push(
+          <a
+            key={key++}
+            href={match[2]}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary underline decoration-primary/30 hover:decoration-primary transition-colors"
+          >
+            {match[1]}
+          </a>,
+        );
+        lastIndex = match.index + match[0].length;
+      }
+      if (lastIndex < remaining.length) {
+        parts.push(<span key={key++}>{remaining.slice(lastIndex)}</span>);
+      }
+      return <>{parts}</>;
+    }
+
+    // Handle newlines in text nodes — convert to <br> for proper line breaks
+    if (text && text.includes('\n')) {
+      const lines = text.split('\n');
+      return (
+        <>
+          {lines.map((line: string, i: number) => (
+            <span key={i}>
+              {line}
+              {i < lines.length - 1 && <br />}
+            </span>
+          ))}
+        </>
+      );
+    }
+
     if (node.format === 1) return <strong>{text}</strong>;
     if (node.format === 2) return <em>{text}</em>;
     return <span>{text}</span>;

cspell.json

@@ -84,7 +84,8 @@
     "Leitungen",
     "impressum",
     "datenschutz",
-    "agbs"
+    "agbs",
+    "kontakt"
   ],
   "ignorePaths": [
     "node_modules",

lib/blog.ts

@@ -60,13 +60,15 @@ export async function getPostBySlug(slug: string, locale: string): Promise<PostM
   try {
     const payload = await getPayload({ config: configPromise });
 
+    const isDev = process.env.NODE_ENV === 'development';
     const { docs } = await payload.find({
       collection: 'posts',
       where: {
         slug: { equals: slug },
         locale: { equals: locale },
+        ...(!isDev ? { _status: { equals: 'published' } } : {}),
       },
-      draft: process.env.NODE_ENV === 'development',
+      draft: isDev,
       limit: 1,
     });
 
@@ -107,16 +109,17 @@ export async function getPostBySlug(slug: string, locale: string): Promise<PostM
 export async function getAllPosts(locale: string): Promise<PostMdx[]> {
   try {
     const payload = await getPayload({ config: configPromise });
-    // Query only published posts (access checks applied automatically by Payload!)
+    const isDev = process.env.NODE_ENV === 'development';
     const { docs } = await payload.find({
       collection: 'posts',
       where: {
         locale: {
           equals: locale,
         },
+        ...(!isDev ? { _status: { equals: 'published' } } : {}),
       },
       sort: '-date',
-      draft: process.env.NODE_ENV === 'development', // Includes Drafts if running locally
+      draft: isDev,
       limit: 100,
     });
 

next.config.mjs

@@ -415,16 +415,24 @@ const nextConfig = {
     ],
   },
   async rewrites() {
-    return [
-      {
-        source: '/de/produkte',
-        destination: '/de/products',
-      },
-      {
-        source: '/de/produkte/:path*',
-        destination: '/de/products/:path*',
-      },
-    ];
+    return {
+      beforeFiles: [
+        {
+          source: '/de/produkte',
+          destination: '/de/products',
+        },
+        {
+          source: '/de/produkte/:path*',
+          destination: '/de/products/:path*',
+        },
+        {
+          source: '/de/kontakt',
+          destination: '/de/contact',
+        },
+      ],
+      afterFiles: [],
+      fallback: [],
+    };
   },
 };
 

package.json

@@ -106,6 +106,7 @@
     "check:wcag": "tsx ./scripts/wcag-sitemap.ts",
     "check:html": "tsx ./scripts/check-html.ts",
     "check:http": "tsx ./scripts/check-http.ts",
+    "check:locale": "tsx ./scripts/check-locale.ts",
     "check:spell": "cspell \"content/**/*.{md,mdx}\" \"app/**/*.tsx\" \"components/**/*.tsx\"",
     "check:security": "tsx ./scripts/check-security.ts",
     "check:links": "bash ./scripts/check-links.sh",

scripts/check-locale.ts

@@ -0,0 +1,191 @@
+import axios from 'axios';
+import * as cheerio from 'cheerio';
+
+/**
+ * Locale & Language Switcher Smoke Test
+ *
+ * For every URL in the sitemap:
+ * 1. Fetches the page HTML
+ * 2. Extracts <link rel="alternate" hreflang="..." href="..."> tags
+ * 3. Verifies each alternate URL uses correctly translated slugs
+ * 4. Verifies each alternate URL returns HTTP 200
+ */
+
+const targetUrl = process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
+const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
+
+// Expected slug translations: German key → English value
+const SLUG_MAP: Record<string, string> = {
+  produkte: 'products',
+  kontakt: 'contact',
+  niederspannungskabel: 'low-voltage-cables',
+  mittelspannungskabel: 'medium-voltage-cables',
+  hochspannungskabel: 'high-voltage-cables',
+  solarkabel: 'solar-cables',
+  impressum: 'legal-notice',
+  datenschutz: 'privacy-policy',
+  agbs: 'terms',
+};
+
+// Reverse map: English → German
+const REVERSE_SLUG_MAP: Record<string, string> = Object.fromEntries(
+  Object.entries(SLUG_MAP).map(([de, en]) => [en, de]),
+);
+
+const headers = { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` };
+
+function getExpectedTranslation(
+  sourcePath: string,
+  sourceLocale: string,
+  targetLocale: string,
+): string {
+  const segments = sourcePath.split('/').filter(Boolean);
+  // First segment is locale
+  segments[0] = targetLocale;
+
+  const map = sourceLocale === 'de' ? SLUG_MAP : REVERSE_SLUG_MAP;
+
+  return (
+    '/' +
+    segments
+      .map((seg, i) => {
+        if (i === 0) return seg; // locale
+        return map[seg] || seg; // translate or keep (product names like n2x2y stay the same)
+      })
+      .join('/')
+  );
+}
+
+async function main() {
+  console.log(`\n🌐 Starting Locale Smoke Test for: ${targetUrl}\n`);
+
+  // 1. Fetch sitemap
+  const sitemapUrl = `${targetUrl.replace(/\/$/, '')}/sitemap.xml`;
+  console.log(`📥 Fetching sitemap from ${sitemapUrl}...`);
+  const sitemapRes = await axios.get(sitemapUrl, { headers, validateStatus: (s) => s < 400 });
+  const $sitemap = cheerio.load(sitemapRes.data, { xmlMode: true });
+
+  let urls = $sitemap('url loc')
+    .map((_i, el) => $sitemap(el).text())
+    .get();
+
+  const urlPattern = /https?:\/\/[^/]+/;
+  urls = [...new Set(urls)]
+    .filter((u) => u.startsWith('http'))
+    .map((u) => u.replace(urlPattern, targetUrl.replace(/\/$/, '')))
+    .sort();
+
+  console.log(`✅ Found ${urls.length} URLs in sitemap.\n`);
+
+  let totalChecked = 0;
+  let totalPassed = 0;
+  let totalFailed = 0;
+  const failures: string[] = [];
+
+  for (const url of urls) {
+    const path = new URL(url).pathname;
+    const locale = path.split('/')[1];
+    if (!locale || !['de', 'en'].includes(locale)) continue;
+
+    try {
+      const res = await axios.get(url, { headers, validateStatus: null });
+      if (res.status >= 400) continue; // Skip pages that are already broken (check-http catches those)
+
+      const $ = cheerio.load(res.data);
+
+      // Extract hreflang alternate links
+      const alternates: { hreflang: string; href: string }[] = [];
+      $('link[rel="alternate"][hreflang]').each((_i, el) => {
+        const hreflang = $(el).attr('hreflang') || '';
+        let href = $(el).attr('href') || '';
+        if (href && hreflang && hreflang !== 'x-default') {
+          href = href.replace(urlPattern, targetUrl.replace(/\/$/, ''));
+          alternates.push({ hreflang, href });
+        }
+      });
+
+      if (alternates.length === 0) {
+        // Some pages may not have alternates, that's OK
+        continue;
+      }
+
+      totalChecked++;
+
+      // Validate each alternate
+      let pageOk = true;
+
+      for (const alt of alternates) {
+        if (alt.hreflang === locale) continue; // Same locale, skip
+
+        // 1. Check slug translation is correct
+        const expectedPath = getExpectedTranslation(path, locale, alt.hreflang);
+        const actualPath = new URL(alt.href).pathname;
+
+        if (actualPath !== expectedPath) {
+          console.error(
+            `❌ SLUG MISMATCH: ${path} → hreflang="${alt.hreflang}" expected ${expectedPath} but got ${actualPath}`,
+          );
+          failures.push(
+            `Slug mismatch: ${path} → ${alt.hreflang}: expected ${expectedPath}, got ${actualPath}`,
+          );
+          pageOk = false;
+          continue;
+        }
+
+        // 2. Check alternate URL returns 200
+        try {
+          const altRes = await axios.get(alt.href, {
+            headers,
+            validateStatus: null,
+            maxRedirects: 5,
+          });
+          if (altRes.status >= 400) {
+            console.error(`❌ BROKEN ALTERNATE: ${path} → ${alt.href} returned ${altRes.status}`);
+            failures.push(`Broken alternate: ${path} → ${alt.href} (${altRes.status})`);
+            pageOk = false;
+          }
+        } catch (err: any) {
+          console.error(`❌ NETWORK ERROR: ${path} → ${alt.href}: ${err.message}`);
+          failures.push(`Network error: ${path} → ${alt.href}: ${err.message}`);
+          pageOk = false;
+        }
+      }
+
+      if (pageOk) {
+        console.log(
+          `✅ ${path} — alternates OK (${alternates
+            .map((a) => a.hreflang)
+            .filter((h) => h !== locale)
+            .join(', ')})`,
+        );
+        totalPassed++;
+      } else {
+        totalFailed++;
+      }
+    } catch (err: any) {
+      console.error(`❌ NETWORK ERROR fetching ${url}: ${err.message}`);
+      totalFailed++;
+    }
+  }
+
+  console.log(`\n${'─'.repeat(60)}`);
+  console.log(`📊 Locale Smoke Test Results:`);
+  console.log(`   Pages checked: ${totalChecked}`);
+  console.log(`   Passed: ${totalPassed}`);
+  console.log(`   Failed: ${totalFailed}`);
+
+  if (failures.length > 0) {
+    console.log(`\n❌ Failures:`);
+    failures.forEach((f) => console.log(`   • ${f}`));
+    console.log(`\n❌ Locale Smoke Test FAILED.`);
+    process.exit(1);
+  } else {
+    console.log(`\n✨ All locale alternates are correctly translated and reachable!`);
+    process.exit(0);
+  }
+}
+
+main().catch((err) => {
+  console.error(`\n❌ Critical error:`, err.message);
+  process.exit(1);
+});

scripts/cms-sync.sh

@@ -163,7 +163,11 @@ do_push() {
 
   # 5. Sync media
   echo "🖼️  Syncing media files..."
-  rsync -az --delete --info=progress2 "$LOCAL_MEDIA_DIR/" "$SSH_HOST:$REMOTE_MEDIA_VOLUME/"
+  rsync -az --delete --progress "$LOCAL_MEDIA_DIR/" "$SSH_HOST:$REMOTE_MEDIA_VOLUME/"
+
+  # Fix ownership: rsync preserves local UID, but container runs as nextjs (1001)
+  echo "🔑 Fixing media file permissions..."
+  ssh "$SSH_HOST" "docker exec -u 0 $REMOTE_APP_CONTAINER chown -R 1001:65533 /app/public/media/ 2>/dev/null || true"
 
   # 6. Restart app
   echo "🔄 Restarting $TARGET app container..."