From cde21647734e15cc8a4db4269cde6730c0726684 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Tue, 16 Jun 2026 14:25:58 +0200
Subject: [PATCH] feat: connect header and footer to cms as globals

---
 .gitignore                              |   3 +
 src/Footer/Component.tsx                |  11 +-
 src/Footer/RowLabel.tsx                 |  10 +-
 src/Footer/config.ts                    | 121 +++++++-
 src/Header/Nav/index.tsx                |   5 +-
 src/Header/RowLabel.tsx                 |   6 +-
 src/Header/config.ts                    | 133 +++++++-
 src/app/(frontend)/[[...slug]]/page.tsx |  13 +-
 src/endpoints/seed/index.ts             |  58 +---
 src/payload-types.ts                    | 343 ++++++++++++++-------
 src/spa/NextApp.tsx                     |  13 +-
 src/spa/cmsNavigation.ts                | 198 ++++++++++++
 src/spa/components/layout/Layout.tsx    | 384 ++++++++----------------
 13 files changed, 842 insertions(+), 456 deletions(-)
 create mode 100644 src/spa/cmsNavigation.ts

diff --git a/.gitignore b/.gitignore
index 7ad09c3..d5c96fb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,9 @@ node_modules
 .next
 next-env.d.ts
 .vercel
+content.db
+*.sqlite
+*.sqlite3
 
 # Payload default media upload directory
 public/media/
diff --git a/src/Footer/Component.tsx b/src/Footer/Component.tsx
index 737a295..e3f2405 100644
--- a/src/Footer/Component.tsx
+++ b/src/Footer/Component.tsx
@@ -3,13 +3,12 @@ import Link from 'next/link'
 import React from 'react'
 
 import { ThemeSelector } from '@/providers/Theme/ThemeSelector'
-import { CMSLink } from '@/components/Link'
 import { Logo } from '@/components/Logo/Logo'
 
 export async function Footer() {
   const footerData = await getCachedGlobal('footer', 1)()
 
-  const navItems = footerData?.navItems || []
+  const linkColumns = footerData?.linkColumns || []
 
   return (
     <footer className="mt-auto border-t border-border bg-black dark:bg-card text-white">
@@ -21,9 +20,11 @@ export async function Footer() {
         <div className="flex flex-col-reverse items-start md:flex-row gap-4 md:items-center">
           <ThemeSelector />
           <nav className="flex flex-col md:flex-row gap-4">
-            {navItems.map(({ link }, i) => {
-              return <CMSLink className="text-white" key={i} {...link} />
-            })}
+            {linkColumns.flatMap((column) => column.links || []).map((link, i) => (
+              <Link className="text-white" key={`${link.path}-${i}`} href={link.path || '/'}>
+                {link.label}
+              </Link>
+            ))}
           </nav>
         </div>
       </div>
diff --git a/src/Footer/RowLabel.tsx b/src/Footer/RowLabel.tsx
index a6f9494..7dfd428 100644
--- a/src/Footer/RowLabel.tsx
+++ b/src/Footer/RowLabel.tsx
@@ -1,13 +1,13 @@
 'use client'
-import { Header } from '@/payload-types'
+import { Footer } from '@/payload-types'
 import { RowLabelProps, useRowLabel } from '@payloadcms/ui'
 
 export const RowLabel: React.FC<RowLabelProps> = () => {
-  const data = useRowLabel<NonNullable<Header['navItems']>[number]>()
+  const data = useRowLabel<NonNullable<Footer['linkColumns']>[number]>()
 
-  const label = data?.data?.link?.label
-    ? `Nav item ${data.rowNumber !== undefined ? data.rowNumber + 1 : ''}: ${data?.data?.link?.label}`
-    : 'Row'
+  const label = data?.data?.label
+    ? `Link column ${data.rowNumber !== undefined ? data.rowNumber + 1 : ''}: ${data.data.label}`
+    : 'Link column'
 
   return <div>{label}</div>
 }
diff --git a/src/Footer/config.ts b/src/Footer/config.ts
index ca9b54b..b716555 100644
--- a/src/Footer/config.ts
+++ b/src/Footer/config.ts
@@ -1,29 +1,122 @@
 import type { GlobalConfig } from 'payload'
 
-import { link } from '@/fields/link'
 import { revalidateFooter } from './hooks/revalidateFooter'
+import { defaultFooterData } from '@/spa/cmsNavigation'
+
+const linkFields = [
+  { name: 'label', type: 'text' as const, required: true },
+  { name: 'path', type: 'text' as const, required: true },
+]
+
+const socialFields = [
+  { name: 'label', type: 'text' as const, required: true },
+  { name: 'href', type: 'text' as const, required: true },
+  {
+    name: 'icon',
+    type: 'select' as const,
+    required: true,
+    options: [
+      { label: 'Instagram', value: 'instagram' },
+      { label: 'LinkedIn', value: 'linkedin' },
+      { label: 'Facebook', value: 'facebook' },
+    ],
+  },
+]
 
 export const Footer: GlobalConfig = {
   slug: 'footer',
   access: {
     read: () => true,
   },
+  admin: {
+    livePreview: {
+      url: () => '/',
+    },
+    preview: () => '/',
+  },
   fields: [
     {
-      name: 'navItems',
-      type: 'array',
-      fields: [
-        link({
-          appearances: false,
-        }),
-      ],
-      maxRows: 6,
-      admin: {
-        initCollapsed: true,
-        components: {
-          RowLabel: '@/Footer/RowLabel#RowLabel',
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Brand & Copy',
+          fields: [
+            { name: 'logo', type: 'upload', relationTo: 'media', admin: { description: 'Falls leer, wird /bmp-logo.png verwendet.' } },
+            { name: 'logoAlt', type: 'text', defaultValue: defaultFooterData.logoAlt, required: true },
+            { name: 'headlinePrefix', type: 'text', defaultValue: defaultFooterData.headlinePrefix, required: true },
+            { name: 'headlineAccent', type: 'text', defaultValue: defaultFooterData.headlineAccent, required: true },
+            { name: 'headlineSuffix', type: 'text', defaultValue: defaultFooterData.headlineSuffix, required: true },
+            { name: 'sinceLabel', type: 'text', defaultValue: defaultFooterData.sinceLabel, required: true },
+            { name: 'year', type: 'text', defaultValue: defaultFooterData.year, required: true },
+            { name: 'description', type: 'textarea', defaultValue: defaultFooterData.description, required: true },
+            { name: 'copyright', type: 'text', defaultValue: defaultFooterData.copyright, required: true },
+          ],
         },
-      },
+        {
+          label: 'Links',
+          fields: [
+            {
+              name: 'ctas',
+              label: 'CTA links',
+              type: 'array',
+              defaultValue: defaultFooterData.ctas,
+              fields: [
+                ...linkFields,
+                {
+                  name: 'variant',
+                  type: 'select',
+                  defaultValue: 'primary',
+                  options: [
+                    { label: 'Primary gold button', value: 'primary' },
+                    { label: 'Secondary outline button', value: 'secondary' },
+                    { label: 'Subtle text link', value: 'subtle' },
+                  ],
+                },
+              ],
+              maxRows: 4,
+              admin: { initCollapsed: true },
+            },
+            {
+              name: 'linkColumns',
+              type: 'array',
+              defaultValue: defaultFooterData.linkColumns,
+              fields: [
+                { name: 'label', type: 'text', required: true },
+                { name: 'links', type: 'array', fields: linkFields, required: true, admin: { initCollapsed: true } },
+              ],
+              maxRows: 4,
+              admin: {
+                initCollapsed: true,
+                components: {
+                  RowLabel: '@/Footer/RowLabel#RowLabel',
+                },
+              },
+            },
+          ],
+        },
+        {
+          label: 'Partner & Social',
+          fields: [
+            { name: 'partnerLabel', type: 'text', defaultValue: defaultFooterData.partnerLabel, required: true },
+            {
+              name: 'partnerLogos',
+              type: 'array',
+              fields: [
+                { name: 'image', type: 'upload', relationTo: 'media', required: true },
+                { name: 'alt', type: 'text', required: true },
+              ],
+              admin: { initCollapsed: true },
+            },
+            {
+              name: 'socialLinks',
+              type: 'array',
+              defaultValue: defaultFooterData.socialLinks,
+              fields: socialFields,
+              admin: { initCollapsed: true },
+            },
+          ],
+        },
+      ],
     },
   ],
   hooks: {
diff --git a/src/Header/Nav/index.tsx b/src/Header/Nav/index.tsx
index 070fcca..8df3296 100644
--- a/src/Header/Nav/index.tsx
+++ b/src/Header/Nav/index.tsx
@@ -4,7 +4,6 @@ import React from 'react'
 
 import type { Header as HeaderType } from '@/payload-types'
 
-import { CMSLink } from '@/components/Link'
 import Link from 'next/link'
 import { SearchIcon } from 'lucide-react'
 
@@ -13,8 +12,8 @@ export const HeaderNav: React.FC<{ data: HeaderType }> = ({ data }) => {
 
   return (
     <nav className="flex gap-3 items-center">
-      {navItems.map(({ link }, i) => {
-        return <CMSLink key={i} {...link} appearance="link" />
+      {navItems.map((item, i) => {
+        return <Link key={i} href={item.path || '/'}>{item.label}</Link>
       })}
       <Link href="/search">
         <span className="sr-only">Search</span>
diff --git a/src/Header/RowLabel.tsx b/src/Header/RowLabel.tsx
index a6f9494..d782342 100644
--- a/src/Header/RowLabel.tsx
+++ b/src/Header/RowLabel.tsx
@@ -5,9 +5,9 @@ import { RowLabelProps, useRowLabel } from '@payloadcms/ui'
 export const RowLabel: React.FC<RowLabelProps> = () => {
   const data = useRowLabel<NonNullable<Header['navItems']>[number]>()
 
-  const label = data?.data?.link?.label
-    ? `Nav item ${data.rowNumber !== undefined ? data.rowNumber + 1 : ''}: ${data?.data?.link?.label}`
-    : 'Row'
+  const label = data?.data?.label
+    ? `Nav item ${data.rowNumber !== undefined ? data.rowNumber + 1 : ''}: ${data.data.label}`
+    : 'Nav item'
 
   return <div>{label}</div>
 }
diff --git a/src/Header/config.ts b/src/Header/config.ts
index 58fe89c..394df0e 100644
--- a/src/Header/config.ts
+++ b/src/Header/config.ts
@@ -1,29 +1,134 @@
 import type { GlobalConfig } from 'payload'
 
-import { link } from '@/fields/link'
 import { revalidateHeader } from './hooks/revalidateHeader'
+import { defaultHeaderData } from '@/spa/cmsNavigation'
+
+const linkFields = [
+  { name: 'label', type: 'text' as const, required: true },
+  { name: 'path', type: 'text' as const, required: true },
+]
+
+const socialFields = [
+  { name: 'label', type: 'text' as const, required: true },
+  { name: 'href', type: 'text' as const, required: true },
+  {
+    name: 'icon',
+    type: 'select' as const,
+    required: true,
+    options: [
+      { label: 'Instagram', value: 'instagram' },
+      { label: 'LinkedIn', value: 'linkedin' },
+      { label: 'Facebook', value: 'facebook' },
+    ],
+  },
+]
 
 export const Header: GlobalConfig = {
   slug: 'header',
   access: {
     read: () => true,
   },
+  admin: {
+    livePreview: {
+      url: () => '/',
+    },
+    preview: () => '/',
+  },
   fields: [
     {
-      name: 'navItems',
-      type: 'array',
-      fields: [
-        link({
-          appearances: false,
-        }),
-      ],
-      maxRows: 6,
-      admin: {
-        initCollapsed: true,
-        components: {
-          RowLabel: '@/Header/RowLabel#RowLabel',
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Brand & Overlay',
+          fields: [
+            { name: 'logo', type: 'upload', relationTo: 'media', admin: { description: 'Falls leer, wird /bmp-logo.png verwendet.' } },
+            { name: 'overlayLogoAlt', type: 'text', defaultValue: defaultHeaderData.overlayLogoAlt, required: true },
+            { name: 'overlayKicker', type: 'text', defaultValue: defaultHeaderData.overlayKicker, required: true },
+            { name: 'overlayHeadline', type: 'textarea', defaultValue: defaultHeaderData.overlayHeadline, required: true },
+            { name: 'mobileWatermark', type: 'textarea', defaultValue: defaultHeaderData.mobileWatermark, required: true },
+            { name: 'menuLabel', type: 'text', defaultValue: defaultHeaderData.menuLabel, required: true },
+            { name: 'openLabel', type: 'text', defaultValue: defaultHeaderData.openLabel, required: true },
+            { name: 'closeLabel', type: 'text', defaultValue: defaultHeaderData.closeLabel, required: true },
+            { name: 'overviewLabel', type: 'text', defaultValue: defaultHeaderData.overviewLabel, required: true },
+          ],
         },
-      },
+        {
+          label: 'Navigation',
+          fields: [
+            {
+              name: 'navItems',
+              type: 'array',
+              defaultValue: defaultHeaderData.navItems,
+              fields: [
+                { name: 'key', type: 'text', required: true, admin: { description: 'Stable internal key, e.g. presse.' } },
+                ...linkFields,
+                { name: 'subLabel', type: 'text' },
+                {
+                  name: 'sub',
+                  label: 'Sub navigation',
+                  type: 'array',
+                  fields: linkFields,
+                  admin: { initCollapsed: true },
+                },
+              ],
+              maxRows: 8,
+              admin: {
+                initCollapsed: true,
+                components: {
+                  RowLabel: '@/Header/RowLabel#RowLabel',
+                },
+              },
+            },
+            {
+              name: 'secondaryLinks',
+              type: 'array',
+              defaultValue: defaultHeaderData.secondaryLinks,
+              fields: linkFields,
+              admin: { initCollapsed: true },
+            },
+            {
+              name: 'ctas',
+              label: 'CTA links',
+              type: 'array',
+              defaultValue: defaultHeaderData.ctas,
+              fields: [
+                ...linkFields,
+                {
+                  name: 'variant',
+                  type: 'select',
+                  defaultValue: 'primary',
+                  options: [
+                    { label: 'Primary gold button', value: 'primary' },
+                    { label: 'Secondary outline button', value: 'secondary' },
+                    { label: 'Upload dashed link', value: 'upload' },
+                  ],
+                },
+              ],
+              maxRows: 3,
+              admin: { initCollapsed: true },
+            },
+          ],
+        },
+        {
+          label: 'Social & Language',
+          fields: [
+            {
+              name: 'socialLinks',
+              type: 'array',
+              defaultValue: defaultHeaderData.socialLinks,
+              fields: socialFields,
+              admin: { initCollapsed: true },
+            },
+            {
+              name: 'languages',
+              type: 'array',
+              defaultValue: defaultHeaderData.languages.map((label) => ({ label })),
+              fields: [{ name: 'label', type: 'text', required: true }],
+              maxRows: 4,
+            },
+          ],
+        },
+      ],
     },
   ],
   hooks: {
diff --git a/src/app/(frontend)/[[...slug]]/page.tsx b/src/app/(frontend)/[[...slug]]/page.tsx
index 7b6d5a8..eabc48a 100644
--- a/src/app/(frontend)/[[...slug]]/page.tsx
+++ b/src/app/(frontend)/[[...slug]]/page.tsx
@@ -1,4 +1,10 @@
+import configPromise from '@payload-config'
+import { getPayload } from 'payload'
+
 import NextApp from '@/spa/NextApp'
+import { normalizeFooterData, normalizeHeaderData } from '@/spa/cmsNavigation'
+
+export const dynamic = 'force-dynamic'
 
 type Args = {
   params: Promise<{ slug?: string[] }>
@@ -7,6 +13,11 @@ type Args = {
 export default async function Page({ params }: Args) {
   const { slug = [] } = await params
   const pathname = `/${slug.join('/')}`.replace(/\/$/, '') || '/'
+  const payload = await getPayload({ config: configPromise })
+  const [header, footer] = await Promise.all([
+    payload.findGlobal({ slug: 'header', depth: 1 }).catch(() => undefined),
+    payload.findGlobal({ slug: 'footer', depth: 1 }).catch(() => undefined),
+  ])
 
-  return <NextApp pathname={pathname} />
+  return <NextApp pathname={pathname} header={normalizeHeaderData(header)} footer={normalizeFooterData(footer)} />
 }
diff --git a/src/endpoints/seed/index.ts b/src/endpoints/seed/index.ts
index 1565e92..2bc3656 100644
--- a/src/endpoints/seed/index.ts
+++ b/src/endpoints/seed/index.ts
@@ -9,6 +9,7 @@ import { imageHero1 } from './image-hero-1'
 import { post1 } from './post-1'
 import { post2 } from './post-2'
 import { post3 } from './post-3'
+import { defaultFooterData, defaultHeaderData } from '@/spa/cmsNavigation'
 
 const collections: CollectionSlug[] = [
   'categories',
@@ -48,9 +49,7 @@ export const seed = async ({
     globals.map((global) =>
       payload.updateGlobal({
         slug: global,
-        data: {
-          navItems: [],
-        },
+        data: {},
         depth: 0,
         context: {
           disableRevalidate: true,
@@ -217,60 +216,17 @@ export const seed = async ({
 
   payload.logger.info(`— Seeding globals...`)
 
+  const { logo: _headerLogo, ...headerSeedData } = defaultHeaderData
+  const { logo: _footerLogo, partnerLogos: _partnerLogos, ...footerSeedData } = defaultFooterData
+
   await Promise.all([
     payload.updateGlobal({
       slug: 'header',
-      data: {
-        navItems: [
-          {
-            link: {
-              type: 'custom',
-              label: 'Posts',
-              url: '/posts',
-            },
-          },
-          {
-            link: {
-              type: 'reference',
-              label: 'Contact',
-              reference: {
-                relationTo: 'pages',
-                value: contactPage.id,
-              },
-            },
-          },
-        ],
-      },
+      data: headerSeedData as any,
     }),
     payload.updateGlobal({
       slug: 'footer',
-      data: {
-        navItems: [
-          {
-            link: {
-              type: 'custom',
-              label: 'Admin',
-              url: '/admin',
-            },
-          },
-          {
-            link: {
-              type: 'custom',
-              label: 'Source Code',
-              newTab: true,
-              url: 'https://github.com/payloadcms/payload/tree/3.x/templates/website',
-            },
-          },
-          {
-            link: {
-              type: 'custom',
-              label: 'Payload',
-              newTab: true,
-              url: 'https://payloadcms.com/',
-            },
-          },
-        ],
-      },
+      data: footerSeedData as any,
     }),
   ])
 
diff --git a/src/payload-types.ts b/src/payload-types.ts
index 8cad02f..6c3fca0 100644
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@@ -106,7 +106,7 @@ export interface Config {
     'payload-migrations': PayloadMigrationsSelect<false> | PayloadMigrationsSelect<true>;
   };
   db: {
-    defaultIDType: string;
+    defaultIDType: number;
   };
   fallbackLocale: null;
   globals: {
@@ -156,7 +156,7 @@ export interface UserAuthOperations {
  * via the `definition` "pages".
  */
 export interface Page {
-  id: string;
+  id: number;
   title: string;
   hero: {
     type: 'none' | 'highImpact' | 'mediumImpact' | 'lowImpact';
@@ -183,11 +183,11 @@ export interface Page {
             reference?:
               | ({
                   relationTo: 'pages';
-                  value: string | Page;
+                  value: number | Page;
                 } | null)
               | ({
                   relationTo: 'posts';
-                  value: string | Post;
+                  value: number | Post;
                 } | null);
             url?: string | null;
             label: string;
@@ -199,7 +199,7 @@ export interface Page {
           id?: string | null;
         }[]
       | null;
-    media?: (string | null) | Media;
+    media?: (number | null) | Media;
   };
   layout: (CallToActionBlock | ContentBlock | MediaBlock | ArchiveBlock | FormBlock)[];
   meta?: {
@@ -207,7 +207,7 @@ export interface Page {
     /**
      * Maximum upload file size: 12MB. Recommended file size for images is <500KB.
      */
-    image?: (string | null) | Media;
+    image?: (number | null) | Media;
     description?: string | null;
   };
   publishedAt?: string | null;
@@ -225,9 +225,9 @@ export interface Page {
  * via the `definition` "posts".
  */
 export interface Post {
-  id: string;
+  id: number;
   title: string;
-  heroImage?: (string | null) | Media;
+  heroImage?: (number | null) | Media;
   content: {
     root: {
       type: string;
@@ -243,18 +243,18 @@ export interface Post {
     };
     [k: string]: unknown;
   };
-  relatedPosts?: (string | Post)[] | null;
-  categories?: (string | Category)[] | null;
+  relatedPosts?: (number | Post)[] | null;
+  categories?: (number | Category)[] | null;
   meta?: {
     title?: string | null;
     /**
      * Maximum upload file size: 12MB. Recommended file size for images is <500KB.
      */
-    image?: (string | null) | Media;
+    image?: (number | null) | Media;
     description?: string | null;
   };
   publishedAt?: string | null;
-  authors?: (string | User)[] | null;
+  authors?: (number | User)[] | null;
   populatedAuthors?:
     | {
         id?: string | null;
@@ -275,7 +275,7 @@ export interface Post {
  * via the `definition` "media".
  */
 export interface Media {
-  id: string;
+  id: number;
   alt?: string | null;
   caption?: {
     root: {
@@ -292,7 +292,7 @@ export interface Media {
     };
     [k: string]: unknown;
   } | null;
-  folder?: (string | null) | FolderInterface;
+  folder?: (number | null) | FolderInterface;
   updatedAt: string;
   createdAt: string;
   url?: string | null;
@@ -368,18 +368,18 @@ export interface Media {
  * via the `definition` "payload-folders".
  */
 export interface FolderInterface {
-  id: string;
+  id: number;
   name: string;
-  folder?: (string | null) | FolderInterface;
+  folder?: (number | null) | FolderInterface;
   documentsAndFolders?: {
     docs?: (
       | {
           relationTo?: 'payload-folders';
-          value: string | FolderInterface;
+          value: number | FolderInterface;
         }
       | {
           relationTo?: 'media';
-          value: string | Media;
+          value: number | Media;
         }
     )[];
     hasNextPage?: boolean;
@@ -394,17 +394,17 @@ export interface FolderInterface {
  * via the `definition` "categories".
  */
 export interface Category {
-  id: string;
+  id: number;
   title: string;
   /**
    * When enabled, the slug will auto-generate from the title field on save and autosave.
    */
   generateSlug?: boolean | null;
   slug: string;
-  parent?: (string | null) | Category;
+  parent?: (number | null) | Category;
   breadcrumbs?:
     | {
-        doc?: (string | null) | Category;
+        doc?: (number | null) | Category;
         url?: string | null;
         label?: string | null;
         id?: string | null;
@@ -418,7 +418,7 @@ export interface Category {
  * via the `definition` "users".
  */
 export interface User {
-  id: string;
+  id: number;
   name?: string | null;
   updatedAt: string;
   createdAt: string;
@@ -467,11 +467,11 @@ export interface CallToActionBlock {
           reference?:
             | ({
                 relationTo: 'pages';
-                value: string | Page;
+                value: number | Page;
               } | null)
             | ({
                 relationTo: 'posts';
-                value: string | Post;
+                value: number | Post;
               } | null);
           url?: string | null;
           label: string;
@@ -517,11 +517,11 @@ export interface ContentBlock {
           reference?:
             | ({
                 relationTo: 'pages';
-                value: string | Page;
+                value: number | Page;
               } | null)
             | ({
                 relationTo: 'posts';
-                value: string | Post;
+                value: number | Post;
               } | null);
           url?: string | null;
           label: string;
@@ -542,7 +542,7 @@ export interface ContentBlock {
  * via the `definition` "MediaBlock".
  */
 export interface MediaBlock {
-  media: string | Media;
+  media: number | Media;
   id?: string | null;
   blockName?: string | null;
   blockType: 'mediaBlock';
@@ -569,12 +569,12 @@ export interface ArchiveBlock {
   } | null;
   populateBy?: ('collection' | 'selection') | null;
   relationTo?: 'posts' | null;
-  categories?: (string | Category)[] | null;
+  categories?: (number | Category)[] | null;
   limit?: number | null;
   selectedDocs?:
     | {
         relationTo: 'posts';
-        value: string | Post;
+        value: number | Post;
       }[]
     | null;
   id?: string | null;
@@ -586,7 +586,7 @@ export interface ArchiveBlock {
  * via the `definition` "FormBlock".
  */
 export interface FormBlock {
-  form: string | Form;
+  form: number | Form;
   enableIntro?: boolean | null;
   introContent?: {
     root: {
@@ -612,7 +612,7 @@ export interface FormBlock {
  * via the `definition` "forms".
  */
 export interface Form {
-  id: string;
+  id: number;
   title: string;
   fields?:
     | (
@@ -786,7 +786,7 @@ export interface Form {
  * via the `definition` "redirects".
  */
 export interface Redirect {
-  id: string;
+  id: number;
   /**
    * You will need to rebuild the website when changing this field.
    */
@@ -796,11 +796,11 @@ export interface Redirect {
     reference?:
       | ({
           relationTo: 'pages';
-          value: string | Page;
+          value: number | Page;
         } | null)
       | ({
           relationTo: 'posts';
-          value: string | Post;
+          value: number | Post;
         } | null);
     url?: string | null;
   };
@@ -812,8 +812,8 @@ export interface Redirect {
  * via the `definition` "form-submissions".
  */
 export interface FormSubmission {
-  id: string;
-  form: string | Form;
+  id: number;
+  form: number | Form;
   submissionData?:
     | {
         field: string;
@@ -831,18 +831,18 @@ export interface FormSubmission {
  * via the `definition` "search".
  */
 export interface Search {
-  id: string;
+  id: number;
   title?: string | null;
   priority?: number | null;
   doc: {
     relationTo: 'posts';
-    value: string | Post;
+    value: number | Post;
   };
   slug?: string | null;
   meta?: {
     title?: string | null;
     description?: string | null;
-    image?: (string | null) | Media;
+    image?: (number | null) | Media;
   };
   categories?:
     | {
@@ -860,7 +860,7 @@ export interface Search {
  * via the `definition` "payload-kv".
  */
 export interface PayloadKv {
-  id: string;
+  id: number;
   key: string;
   data:
     | {
@@ -877,7 +877,7 @@ export interface PayloadKv {
  * via the `definition` "payload-jobs".
  */
 export interface PayloadJob {
-  id: string;
+  id: number;
   /**
    * Input data provided to the job
    */
@@ -969,52 +969,52 @@ export interface PayloadJob {
  * via the `definition` "payload-locked-documents".
  */
 export interface PayloadLockedDocument {
-  id: string;
+  id: number;
   document?:
     | ({
         relationTo: 'pages';
-        value: string | Page;
+        value: number | Page;
       } | null)
     | ({
         relationTo: 'posts';
-        value: string | Post;
+        value: number | Post;
       } | null)
     | ({
         relationTo: 'media';
-        value: string | Media;
+        value: number | Media;
       } | null)
     | ({
         relationTo: 'categories';
-        value: string | Category;
+        value: number | Category;
       } | null)
     | ({
         relationTo: 'users';
-        value: string | User;
+        value: number | User;
       } | null)
     | ({
         relationTo: 'redirects';
-        value: string | Redirect;
+        value: number | Redirect;
       } | null)
     | ({
         relationTo: 'forms';
-        value: string | Form;
+        value: number | Form;
       } | null)
     | ({
         relationTo: 'form-submissions';
-        value: string | FormSubmission;
+        value: number | FormSubmission;
       } | null)
     | ({
         relationTo: 'search';
-        value: string | Search;
+        value: number | Search;
       } | null)
     | ({
         relationTo: 'payload-folders';
-        value: string | FolderInterface;
+        value: number | FolderInterface;
       } | null);
   globalSlug?: string | null;
   user: {
     relationTo: 'users';
-    value: string | User;
+    value: number | User;
   };
   updatedAt: string;
   createdAt: string;
@@ -1024,10 +1024,10 @@ export interface PayloadLockedDocument {
  * via the `definition` "payload-preferences".
  */
 export interface PayloadPreference {
-  id: string;
+  id: number;
   user: {
     relationTo: 'users';
-    value: string | User;
+    value: number | User;
   };
   key?: string | null;
   value?:
@@ -1047,7 +1047,7 @@ export interface PayloadPreference {
  * via the `definition` "payload-migrations".
  */
 export interface PayloadMigration {
-  id: string;
+  id: number;
   name?: string | null;
   batch?: number | null;
   updatedAt: string;
@@ -1636,24 +1636,64 @@ export interface PayloadMigrationsSelect<T extends boolean = true> {
  * via the `definition` "header".
  */
 export interface Header {
-  id: string;
+  id: number;
+  /**
+   * Falls leer, wird /bmp-logo.png verwendet.
+   */
+  logo?: (number | null) | Media;
+  overlayLogoAlt: string;
+  overlayKicker: string;
+  overlayHeadline: string;
+  mobileWatermark: string;
+  menuLabel: string;
+  openLabel: string;
+  closeLabel: string;
+  overviewLabel: string;
   navItems?:
     | {
-        link: {
-          type?: ('reference' | 'custom') | null;
-          newTab?: boolean | null;
-          reference?:
-            | ({
-                relationTo: 'pages';
-                value: string | Page;
-              } | null)
-            | ({
-                relationTo: 'posts';
-                value: string | Post;
-              } | null);
-          url?: string | null;
-          label: string;
-        };
+        /**
+         * Stable internal key, e.g. presse.
+         */
+        key: string;
+        label: string;
+        path: string;
+        subLabel?: string | null;
+        sub?:
+          | {
+              label: string;
+              path: string;
+              id?: string | null;
+            }[]
+          | null;
+        id?: string | null;
+      }[]
+    | null;
+  secondaryLinks?:
+    | {
+        label: string;
+        path: string;
+        id?: string | null;
+      }[]
+    | null;
+  ctas?:
+    | {
+        label: string;
+        path: string;
+        variant?: ('primary' | 'secondary' | 'upload') | null;
+        id?: string | null;
+      }[]
+    | null;
+  socialLinks?:
+    | {
+        label: string;
+        href: string;
+        icon: 'instagram' | 'linkedin' | 'facebook';
+        id?: string | null;
+      }[]
+    | null;
+  languages?:
+    | {
+        label: string;
         id?: string | null;
       }[]
     | null;
@@ -1665,24 +1705,51 @@ export interface Header {
  * via the `definition` "footer".
  */
 export interface Footer {
-  id: string;
-  navItems?:
+  id: number;
+  /**
+   * Falls leer, wird /bmp-logo.png verwendet.
+   */
+  logo?: (number | null) | Media;
+  logoAlt: string;
+  headlinePrefix: string;
+  headlineAccent: string;
+  headlineSuffix: string;
+  sinceLabel: string;
+  year: string;
+  description: string;
+  copyright: string;
+  ctas?:
     | {
-        link: {
-          type?: ('reference' | 'custom') | null;
-          newTab?: boolean | null;
-          reference?:
-            | ({
-                relationTo: 'pages';
-                value: string | Page;
-              } | null)
-            | ({
-                relationTo: 'posts';
-                value: string | Post;
-              } | null);
-          url?: string | null;
+        label: string;
+        path: string;
+        variant?: ('primary' | 'secondary' | 'subtle') | null;
+        id?: string | null;
+      }[]
+    | null;
+  linkColumns?:
+    | {
+        label: string;
+        links: {
           label: string;
-        };
+          path: string;
+          id?: string | null;
+        }[];
+        id?: string | null;
+      }[]
+    | null;
+  partnerLabel: string;
+  partnerLogos?:
+    | {
+        image: number | Media;
+        alt: string;
+        id?: string | null;
+      }[]
+    | null;
+  socialLinks?:
+    | {
+        label: string;
+        href: string;
+        icon: 'instagram' | 'linkedin' | 'facebook';
         id?: string | null;
       }[]
     | null;
@@ -1694,20 +1761,60 @@ export interface Footer {
  * via the `definition` "header_select".
  */
 export interface HeaderSelect<T extends boolean = true> {
+  logo?: T;
+  overlayLogoAlt?: T;
+  overlayKicker?: T;
+  overlayHeadline?: T;
+  mobileWatermark?: T;
+  menuLabel?: T;
+  openLabel?: T;
+  closeLabel?: T;
+  overviewLabel?: T;
   navItems?:
     | T
     | {
-        link?:
+        key?: T;
+        label?: T;
+        path?: T;
+        subLabel?: T;
+        sub?:
           | T
           | {
-              type?: T;
-              newTab?: T;
-              reference?: T;
-              url?: T;
               label?: T;
+              path?: T;
+              id?: T;
             };
         id?: T;
       };
+  secondaryLinks?:
+    | T
+    | {
+        label?: T;
+        path?: T;
+        id?: T;
+      };
+  ctas?:
+    | T
+    | {
+        label?: T;
+        path?: T;
+        variant?: T;
+        id?: T;
+      };
+  socialLinks?:
+    | T
+    | {
+        label?: T;
+        href?: T;
+        icon?: T;
+        id?: T;
+      };
+  languages?:
+    | T
+    | {
+        label?: T;
+        id?: T;
+      };
   updatedAt?: T;
   createdAt?: T;
   globalType?: T;
@@ -1717,20 +1824,52 @@ export interface HeaderSelect<T extends boolean = true> {
  * via the `definition` "footer_select".
  */
 export interface FooterSelect<T extends boolean = true> {
-  navItems?:
+  logo?: T;
+  logoAlt?: T;
+  headlinePrefix?: T;
+  headlineAccent?: T;
+  headlineSuffix?: T;
+  sinceLabel?: T;
+  year?: T;
+  description?: T;
+  copyright?: T;
+  ctas?:
     | T
     | {
-        link?:
+        label?: T;
+        path?: T;
+        variant?: T;
+        id?: T;
+      };
+  linkColumns?:
+    | T
+    | {
+        label?: T;
+        links?:
           | T
           | {
-              type?: T;
-              newTab?: T;
-              reference?: T;
-              url?: T;
               label?: T;
+              path?: T;
+              id?: T;
             };
         id?: T;
       };
+  partnerLabel?: T;
+  partnerLogos?:
+    | T
+    | {
+        image?: T;
+        alt?: T;
+        id?: T;
+      };
+  socialLinks?:
+    | T
+    | {
+        label?: T;
+        href?: T;
+        icon?: T;
+        id?: T;
+      };
   updatedAt?: T;
   createdAt?: T;
   globalType?: T;
@@ -1756,14 +1895,14 @@ export interface TaskSchedulePublish {
     doc?:
       | ({
           relationTo: 'pages';
-          value: string | Page;
+          value: number | Page;
         } | null)
       | ({
           relationTo: 'posts';
-          value: string | Post;
+          value: number | Post;
         } | null);
     global?: string | null;
-    user?: (string | null) | User;
+    user?: (number | null) | User;
   };
   output?: unknown;
 }
diff --git a/src/spa/NextApp.tsx b/src/spa/NextApp.tsx
index 413f2a7..6f42762 100644
--- a/src/spa/NextApp.tsx
+++ b/src/spa/NextApp.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react'
 
 import Layout from '@/spa/components/layout/Layout'
 import ScrollToTop from '@/spa/components/layout/ScrollToTop'
+import type { SpaFooterData, SpaHeaderData } from '@/spa/cmsNavigation'
 import About from '@/spa/pages/About'
 import BlogDetail from '@/spa/pages/BlogDetail'
 import Contact from '@/spa/pages/Contact'
@@ -41,7 +42,15 @@ function resolvePage(pathname: string) {
   return Home
 }
 
-export default function NextApp({ pathname }: { pathname: string }) {
+export default function NextApp({
+  pathname,
+  header,
+  footer,
+}: {
+  pathname: string
+  header?: SpaHeaderData
+  footer?: SpaFooterData
+}) {
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
@@ -70,7 +79,7 @@ export default function NextApp({ pathname }: { pathname: string }) {
   return (
     <>
       <ScrollToTop />
-      <Layout>
+      <Layout header={header} footer={footer}>
         <Page />
       </Layout>
     </>
diff --git a/src/spa/cmsNavigation.ts b/src/spa/cmsNavigation.ts
new file mode 100644
index 0000000..113ae0b
--- /dev/null
+++ b/src/spa/cmsNavigation.ts
@@ -0,0 +1,198 @@
+import type { Media } from '@/payload-types'
+
+export type SpaIconName = 'instagram' | 'linkedin' | 'facebook'
+export type SpaLink = { label: string; path: string }
+export type SpaSocialLink = { label: string; href: string; icon: SpaIconName }
+export type SpaCtaLink = SpaLink & { variant?: 'primary' | 'secondary' | 'subtle' | 'upload' }
+export type SpaMedia = { url?: string; alt?: string }
+
+export type SpaHeaderNavItem = SpaLink & {
+  key: string
+  subLabel?: string
+  sub?: SpaLink[]
+}
+
+export type SpaHeaderData = {
+  logo?: SpaMedia
+  overlayKicker: string
+  overlayHeadline: string
+  overlayLogoAlt: string
+  mobileWatermark: string
+  menuLabel: string
+  openLabel: string
+  closeLabel: string
+  overviewLabel: string
+  navItems: SpaHeaderNavItem[]
+  secondaryLinks: SpaLink[]
+  socialLinks: SpaSocialLink[]
+  ctas: SpaCtaLink[]
+  languages: string[]
+}
+
+export type SpaFooterLinkColumn = { label: string; links: SpaLink[] }
+export type SpaPartnerLogo = { image?: SpaMedia; alt: string }
+
+export type SpaFooterData = {
+  logo?: SpaMedia
+  logoAlt: string
+  headlinePrefix: string
+  headlineAccent: string
+  headlineSuffix: string
+  sinceLabel: string
+  year: string
+  description: string
+  ctas: SpaCtaLink[]
+  linkColumns: SpaFooterLinkColumn[]
+  partnerLabel: string
+  partnerLogos: SpaPartnerLogo[]
+  copyright: string
+  socialLinks: SpaSocialLink[]
+}
+
+export const defaultSocialLinks: SpaSocialLink[] = [
+  { href: 'https://instagram.com', icon: 'instagram', label: 'Instagram' },
+  { href: 'https://linkedin.com', icon: 'linkedin', label: 'LinkedIn' },
+  { href: 'https://facebook.com', icon: 'facebook', label: 'Facebook' },
+]
+
+export const defaultHeaderData: SpaHeaderData = {
+  logo: { url: '/bmp-logo.png', alt: 'Der Bayerische Mittelstandspreis 2026' },
+  overlayKicker: 'Bayerischer Mittelstandspreis',
+  overlayHeadline: 'EXZELLENZ HAT\nEINEN NAMEN.',
+  overlayLogoAlt: 'BMP Logo',
+  mobileWatermark: 'Exzellenz\nseit 2005',
+  menuLabel: 'Menü',
+  openLabel: 'Navigation öffnen',
+  closeLabel: 'Menü schließen',
+  overviewLabel: 'Überblick',
+  languages: ['DE', 'EN'],
+  socialLinks: defaultSocialLinks,
+  navItems: [
+    {
+      key: 'preistraeger', label: 'Preisträger:innen', path: '/preistraeger', subLabel: 'PREISTRÄGER:INNEN',
+      sub: [
+        { label: 'Alle Preisträger:innen', path: '/preistraeger' },
+        { label: 'Sieger & Aufsteiger 2025', path: '/preistraeger' },
+      ],
+    },
+    {
+      key: 'teilnahme', label: 'Ihr Weg zum Preis', path: '/teilnahme', subLabel: 'IHR WEG ZUM PREIS',
+      sub: [
+        { label: 'Teilnahmevoraussetzungen', path: '/teilnahme#voraussetzungen' },
+        { label: 'Kriterien & Bewertung', path: '/teilnahme#kriterien' },
+        { label: 'Fristen & Termine', path: '/teilnahme#fristen' },
+        { label: 'Bewerbungsformular', path: '/teilnahme#bewerben' },
+      ],
+    },
+    {
+      key: 'bmp', label: 'Der BMP', path: '/der-bmp', subLabel: 'DER BMP',
+      sub: [
+        { label: 'Was ist der Preis?', path: '/der-bmp#was-ist' },
+        { label: 'Geschichte & Werte', path: '/der-bmp#geschichte' },
+        { label: 'Vorteile der Auszeichnung', path: '/der-bmp#vorteile' },
+      ],
+    },
+    {
+      key: 'netzwerk', label: 'Netzwerk', path: '/netzwerk', subLabel: 'NETZWERK',
+      sub: [
+        { label: 'Jury-Mitglieder', path: '/netzwerk#jury' },
+        { label: 'Partner & Sponsoren', path: '/netzwerk#partner' },
+        { label: 'Schirmherrschaft', path: '/netzwerk#schirmherrschaft' },
+        { label: 'Mitglied werden', path: '/mitglied-werden' },
+      ],
+    },
+    {
+      key: 'presse', label: 'Presse', path: '/presse', subLabel: 'PRESSE',
+      sub: [
+        { label: 'Events & Gala', path: '/presse#events' },
+        { label: 'Downloads & Impressionen', path: '/presse#downloads' },
+      ],
+    },
+  ],
+  secondaryLinks: [
+    { label: 'Startseite', path: '/' },
+    { label: 'Kontakt', path: '/kontakt' },
+    { label: 'Impressum', path: '/impressum' },
+    { label: 'Datenschutz', path: '/datenschutz' },
+  ],
+  ctas: [
+    { label: 'Jetzt bewerben', path: '/teilnahme#bewerben', variant: 'primary' },
+    { label: 'Mitglied werden', path: '/mitglied-werden', variant: 'secondary' },
+    { label: 'Formular hochladen', path: '/formular-hochladen', variant: 'upload' },
+  ],
+}
+
+export const defaultFooterData: SpaFooterData = {
+  logo: { url: '/bmp-logo.png', alt: 'Bayerischer Mittelstandspreis' },
+  logoAlt: 'Bayerischer Mittelstandspreis',
+  headlinePrefix: 'Der Preis des',
+  headlineAccent: 'Bayerischen',
+  headlineSuffix: 'Mittelstands',
+  sinceLabel: 'Exzellenz seit 2005',
+  year: '2026',
+  description: 'Die renommierteste Auszeichnung für herausragende Unternehmen des bayerischen Mittelstands.',
+  ctas: [
+    { label: 'Kostenlos bewerben', path: '/teilnahme#bewerben', variant: 'primary' },
+    { label: 'Mitglied werden', path: '/mitglied-werden', variant: 'secondary' },
+    { label: 'Sponsoring-Anfrage →', path: '/netzwerk#sponsoring', variant: 'subtle' },
+  ],
+  linkColumns: [
+    { label: 'BMP 2026', links: [
+      { label: 'Startseite', path: '/' },
+      { label: 'Preisträger', path: '/preistraeger' },
+      { label: 'Teilnahme', path: '/teilnahme' },
+    ] },
+    { label: 'Engagement', links: [
+      { label: 'Netzwerk & Jury', path: '/netzwerk' },
+      { label: 'Presse', path: '/presse' },
+      { label: 'Kontakt', path: '/kontakt' },
+    ] },
+    { label: 'Legal', links: [
+      { label: 'Datenschutz', path: '/datenschutz' },
+      { label: 'Impressum', path: '/impressum' },
+    ] },
+  ],
+  partnerLabel: 'Partner',
+  partnerLogos: [
+    { alt: 'EWIF – Europäisches Wirtschaftsforum', image: { url: '/images/ewif-logo.png' } },
+    { alt: 'Hochschule für angewandtes Management · Gipfeldialog Altaussee', image: { url: '/images/partner-logos.png' } },
+  ],
+  copyright: '© 2026 Bayerischer Mittelstandspreis · Alle Rechte vorbehalten',
+  socialLinks: defaultSocialLinks,
+}
+
+const isMedia = (value: unknown): value is Media => Boolean(value && typeof value === 'object' && 'url' in value)
+const mediaToSpa = (value: unknown, fallback?: SpaMedia): SpaMedia | undefined => {
+  if (isMedia(value)) return { url: value.url || fallback?.url, alt: value.alt || fallback?.alt }
+  return fallback
+}
+
+export function normalizeHeaderData(header: any): SpaHeaderData {
+  return {
+    ...defaultHeaderData,
+    ...header,
+    logo: mediaToSpa(header?.logo, defaultHeaderData.logo),
+    navItems: header?.navItems?.length ? header.navItems : defaultHeaderData.navItems,
+    secondaryLinks: header?.secondaryLinks?.length ? header.secondaryLinks : defaultHeaderData.secondaryLinks,
+    socialLinks: header?.socialLinks?.length ? header.socialLinks : defaultHeaderData.socialLinks,
+    ctas: header?.ctas?.length ? header.ctas : defaultHeaderData.ctas,
+    languages: header?.languages?.length ? header.languages.map((item: any) => item.label || item).filter(Boolean) : defaultHeaderData.languages,
+  }
+}
+
+export function normalizeFooterData(footer: any): SpaFooterData {
+  return {
+    ...defaultFooterData,
+    ...footer,
+    logo: mediaToSpa(footer?.logo, defaultFooterData.logo),
+    ctas: footer?.ctas?.length ? footer.ctas : defaultFooterData.ctas,
+    linkColumns: footer?.linkColumns?.length ? footer.linkColumns : defaultFooterData.linkColumns,
+    socialLinks: footer?.socialLinks?.length ? footer.socialLinks : defaultFooterData.socialLinks,
+    partnerLogos: footer?.partnerLogos?.length
+      ? footer.partnerLogos.map((item: any, index: number) => ({
+          alt: item.alt || defaultFooterData.partnerLogos[index]?.alt || '',
+          image: mediaToSpa(item.image, defaultFooterData.partnerLogos[index]?.image),
+        }))
+      : defaultFooterData.partnerLogos,
+  }
+}
diff --git a/src/spa/components/layout/Layout.tsx b/src/spa/components/layout/Layout.tsx
index 033c4d1..ba5e381 100644
--- a/src/spa/components/layout/Layout.tsx
+++ b/src/spa/components/layout/Layout.tsx
@@ -5,79 +5,26 @@ import { Link, useLocation } from '@/spa/router';
 import { ArrowRight, Upload } from 'lucide-react';
 import LoadingScreen from '@/spa/components/ui/LoadingScreen';
 import { useIsMobile } from '@/spa/hooks/useIsMobile';
+import {
+  defaultFooterData,
+  defaultHeaderData,
+  type SpaFooterData,
+  type SpaHeaderData,
+  type SpaIconName,
+} from '@/spa/cmsNavigation';
 
-interface LayoutProps { children: React.ReactNode; }
+interface LayoutProps { children: React.ReactNode; header?: SpaHeaderData; footer?: SpaFooterData; }
 
 /* ── SVG icons ─────────────────────────────────────────── */
 const IgIcon = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".8" fill="currentColor" stroke="none"/></svg>;
 const LiIcon = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>;
 const FbIcon = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>;
-const SOCIAL = [
-  { href:'https://instagram.com', Icon:IgIcon, label:'Instagram' },
-  { href:'https://linkedin.com',  Icon:LiIcon, label:'LinkedIn'  },
-  { href:'https://facebook.com',  Icon:FbIcon, label:'Facebook'  },
-];
+const ICONS: Record<SpaIconName, () => React.ReactElement> = {
+  instagram: IgIcon,
+  linkedin: LiIcon,
+  facebook: FbIcon,
+};
 
-/* ── Nav data ──────────────────────────────────────────── */
-interface NavItem {
-  key: string; label: string; path: string;
-  subLabel?: string;
-  sub?: { label: string; path: string }[];
-}
-const NAV: NavItem[] = [
-  {
-    key: 'preistraeger', label: 'Preisträger:innen', path: '/preistraeger',
-    subLabel: 'PREISTRÄGER:INNEN',
-    sub: [
-      { label: 'Alle Preisträger:innen',      path: '/preistraeger' },
-      { label: 'Sieger & Aufsteiger 2025',    path: '/preistraeger' },
-    ],
-  },
-  {
-    key: 'teilnahme', label: 'Ihr Weg zum Preis', path: '/teilnahme',
-    subLabel: 'IHR WEG ZUM PREIS',
-    sub: [
-      { label: 'Teilnahmevoraussetzungen',    path: '/teilnahme#voraussetzungen' },
-      { label: 'Kriterien & Bewertung',       path: '/teilnahme#kriterien' },
-      { label: 'Fristen & Termine',           path: '/teilnahme#fristen' },
-      { label: 'Bewerbungsformular',          path: '/teilnahme#bewerben' },
-    ],
-  },
-  {
-    key: 'bmp', label: 'Der BMP', path: '/der-bmp',
-    subLabel: 'DER BMP',
-    sub: [
-      { label: 'Was ist der Preis?',          path: '/der-bmp#was-ist' },
-      { label: 'Geschichte & Werte',          path: '/der-bmp#geschichte' },
-      { label: 'Vorteile der Auszeichnung',   path: '/der-bmp#vorteile' },
-    ],
-  },
-  {
-    key: 'netzwerk', label: 'Netzwerk', path: '/netzwerk',
-    subLabel: 'NETZWERK',
-    sub: [
-      { label: 'Jury-Mitglieder',             path: '/netzwerk#jury' },
-      { label: 'Partner & Sponsoren',         path: '/netzwerk#partner' },
-      { label: 'Schirmherrschaft',            path: '/netzwerk#schirmherrschaft' },
-      { label: 'Mitglied werden',             path: '/mitglied-werden' },
-    ],
-  },
-  {
-    key: 'presse', label: 'Presse', path: '/presse',
-    subLabel: 'PRESSE',
-    sub: [
-      { label: 'Events & Gala',               path: '/presse#events' },
-      { label: 'Downloads & Impressionen',    path: '/presse#downloads' },
-    ],
-  },
-];
-
-const SECONDARY = [
-  { label:'Startseite',  path:'/' },
-  { label:'Kontakt',     path:'/kontakt' },
-  { label:'Impressum',   path:'/impressum' },
-  { label:'Datenschutz', path:'/datenschutz' },
-];
 
 /* ── Tokens ────────────────────────────────────────────── */
 const NAVY   = '#111D55';
@@ -90,22 +37,32 @@ const FF_DISPLAY = '"IBM Plex Sans", sans-serif';
 const FF_BODY    = '"Inter", sans-serif';
 
 /* ── SocialLink helper ─────────────────────────────────── */
-const SocialLink: React.FC<{ href:string; Icon:()=>React.ReactElement; label:string }> = ({ href, Icon, label }) => (
-  <a href={href} target="_blank" rel="noopener noreferrer" aria-label={label}
-    style={{ color:MUTED, display:'flex', textDecoration:'none', transition:'color .2s' }}
-    onMouseEnter={e=>(e.currentTarget.style.color=GOLD)}
-    onMouseLeave={e=>(e.currentTarget.style.color=MUTED)}
-  ><Icon /></a>
-);
+const SocialLink: React.FC<{ href:string; icon:SpaIconName; label:string }> = ({ href, icon, label }) => {
+  const Icon = ICONS[icon] || LiIcon;
+  return (
+    <a href={href} target="_blank" rel="noopener noreferrer" aria-label={label}
+      style={{ color:MUTED, display:'flex', textDecoration:'none', transition:'color .2s' }}
+      onMouseEnter={e=>(e.currentTarget.style.color=GOLD)}
+      onMouseLeave={e=>(e.currentTarget.style.color=MUTED)}
+    ><Icon /></a>
+  );
+};
 
 
 /* ── Component ──────────────────────────────────────────── */
-const Layout: React.FC<LayoutProps> = ({ children }) => {
+const Layout: React.FC<LayoutProps> = ({ children, header = defaultHeaderData, footer = defaultFooterData }) => {
+  const NAV = header.navItems;
+  const SECONDARY = header.secondaryLinks;
+  const SOCIAL = header.socialLinks;
+  const logo = header.logo?.url || '/bmp-logo.png';
+  const footerLogo = footer.logo?.url || '/bmp-logo.png';
+  const headerCtas = header.ctas;
+  const footerCtas = footer.ctas;
   const [open, setOpen]        = useState(false);            // desktop overlay
   const [activeKey, setActive] = useState<string | null>(null); // desktop hover subnav
   const [mobileOpen, setMobileOpen] = useState(false);      // mobile sidebar overlay
   const [expandKey, setExpand] = useState<string | null>(null); // mobile accordion
-  const [lang, setLang]        = useState<'DE'|'EN'>('DE');
+  const [lang, setLang]        = useState(header.languages[0] || 'DE');
   const [mounted, setMounted]  = useState(false);
   const [showLoader, setShowLoader] = useState(() => {
     if (typeof window === 'undefined') return false;
@@ -226,8 +183,8 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
             <div style={{ flex:1, display:'flex', alignItems:'center', padding:'0 24px', height:'100%', borderRight:`1px solid ${LINE}` }}>
               <Link to="/" style={{ display:'flex', alignItems:'center', textDecoration:'none' }}>
                 <img
-                  src="/bmp-logo.png"
-                  alt="Der Bayerische Mittelstandspreis 2026"
+                  src={logo}
+                  alt={header.logo?.alt || header.overlayLogoAlt}
                   style={{ height:38, width:'auto', display:'block', objectFit:'contain' }}
                 />
               </Link>
@@ -239,7 +196,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
               <button
                 onClick={() => setOpen(v => !v)}
                 aria-expanded={open}
-                aria-label="Navigation öffnen"
+                aria-label={header.openLabel}
                 style={{ display:'flex', alignItems:'center', gap:14, background:'none', border:'none', cursor:'pointer', padding:'8px 16px' }}
               >
                 <div style={{ width:20, height:15, position:'relative' }}>
@@ -247,7 +204,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                   <span style={{ position:'absolute', top:'50%', left:0, width:'100%', height:1.5, background:MUTED, marginTop:'-0.75px', transition:'opacity .3s', opacity: open ? 0 : 1 }} />
                   <span style={{ position:'absolute', bottom:0, left:0, width:'100%', height:1.5, background:MUTED, transformOrigin:'center', transition:'transform .3s ease', transform: open ? 'translateY(-6.5px) rotate(-45deg)' : 'none' }} />
                 </div>
-                <span style={{ fontSize:9, fontWeight:600, textTransform:'uppercase', letterSpacing:'.22em', color:MUTED, lineHeight:1, fontFamily:FF_DISPLAY }}>Menü</span>
+                <span style={{ fontSize:9, fontWeight:600, textTransform:'uppercase', letterSpacing:'.22em', color:MUTED, lineHeight:1, fontFamily:FF_DISPLAY }}>{header.menuLabel}</span>
               </button>
               <span style={{ fontSize:8, color:'rgba(5,26,135,0.5)', letterSpacing:2, userSelect:'none' }}>◆</span>
             </div>
@@ -259,7 +216,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
               </div>
               <div style={{ width:1, height:20, background:'rgba(239,191,4,0.3)' }} />
               <div style={{ display:'flex', alignItems:'center', gap:8 }}>
-                {(['DE','EN'] as const).map((l, i) => (
+                {header.languages.map((l, i) => (
                   <React.Fragment key={l}>
                     {i===1 && <span style={{ color:'rgba(239,191,4,.35)', fontSize: 14 }}>|</span>}
                     <button
@@ -292,14 +249,14 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
               <div style={{ flex:'1 1 50%', display:'flex', alignItems:'flex-end', padding:'0 80px 48px', position:'relative', minHeight:0, zIndex:1 }}>
                 <div>
                   <div style={{ fontSize:12, color:'rgba(255,255,255,.4)', letterSpacing:'.12em', textTransform:'uppercase', marginBottom:12, fontFamily:FF_DISPLAY }}>
-                    Bayerischer Mittelstandspreis
+                    {header.overlayKicker}
                   </div>
                   <div style={{ fontSize:'clamp(42px,6.5vw,88px)', fontWeight:900, color:'#fff', textTransform:'uppercase', lineHeight:.95, letterSpacing:'-.01em', fontFamily:FF_DISPLAY }}>
-                    EXZELLENZ HAT<br/>EINEN NAMEN.
+                    {header.overlayHeadline.split('\n').map((line, index) => <React.Fragment key={line + index}>{index > 0 && <br />}{line}</React.Fragment>)}
                   </div>
                 </div>
                 <div style={{ position:'absolute', top:48, right:80 }}>
-                  <img src="/bmp-logo.png" alt="BMP Logo" style={{ height:40, width:'auto', display:'block', opacity:0.9 }} />
+                  <img src={logo} alt={header.overlayLogoAlt} style={{ height:40, width:'auto', display:'block', opacity:0.9 }} />
                 </div>
               </div>
 
@@ -359,7 +316,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                       pointerEvents: activeKey===item.key ? 'all' : 'none',
                     }}>
                       <div style={{ fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'.22em', color:'#009EE0', marginBottom:16, fontFamily:FF_DISPLAY }}>
-                        Überblick
+                        {header.overviewLabel}
                       </div>
                       <div style={{ fontSize: 16, fontWeight:700, textTransform:'uppercase', letterSpacing:'.1em', color:'#fff', marginBottom:20, fontFamily:FF_DISPLAY }}>
                         {item.subLabel}
@@ -385,7 +342,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
 
                   <div style={{ display:'flex', alignItems:'center', gap:20, flexWrap:'wrap' }}>
                     <div style={{ display:'flex', alignItems:'center', gap:8 }}>
-                      {(['DE','EN'] as const).map((l,i) => (
+                      {header.languages.map((l,i) => (
                         <React.Fragment key={l}>
                           {i===1 && <span style={{ color:'rgba(239,191,4,.35)', fontSize: 14 }}>|</span>}
                           <button onClick={() => setLang(l)}
@@ -412,20 +369,20 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                   </div>
 
                   <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
-                    <Link to="/teilnahme#bewerben" onClick={() => setOpen(false)}
+                    <Link to={headerCtas[0]?.path || '/teilnahme#bewerben'} onClick={() => setOpen(false)}
                       style={{ display:'inline-block', background:'#EFBF04', color:'#101828', fontSize: 15, fontWeight:700, textTransform:'uppercase', letterSpacing:'.12em', padding:'11px 24px', textDecoration:'none', transition:'background .2s, box-shadow .2s', borderRadius:0, fontFamily:FF_DISPLAY }}
                       onMouseEnter={e=>{ e.currentTarget.style.background='#FFD130'; e.currentTarget.style.boxShadow='0 0 18px rgba(239,191,4,0.65), 0 0 40px rgba(239,191,4,0.3)'; }}
                       onMouseLeave={e=>{ e.currentTarget.style.background='#EFBF04'; e.currentTarget.style.boxShadow='none'; }}
-                    >Jetzt bewerben</Link>
-                    <Link to="/mitglied-werden" onClick={() => setOpen(false)}
+                    >{headerCtas[0]?.label || 'Jetzt bewerben'}</Link>
+                    <Link to={headerCtas[1]?.path || '/mitglied-werden'} onClick={() => setOpen(false)}
                       style={{ display:'inline-block', background:'transparent', color:MUTED, fontSize: 15, fontWeight:700, textTransform:'uppercase', letterSpacing:'.12em', padding:'10px 24px', textDecoration:'none', transition:'border-color .2s, color .2s', borderRadius:0, fontFamily:FF_DISPLAY, border:'1.5px solid rgba(239,191,4,0.35)' }}
                       onMouseEnter={e=>{ e.currentTarget.style.borderColor='#EFBF04'; e.currentTarget.style.color='#EFBF04'; }}
                       onMouseLeave={e=>{ e.currentTarget.style.borderColor='rgba(239,191,4,0.35)'; e.currentTarget.style.color=MUTED; }}
-                    >Mitglied werden</Link>
+                    >{headerCtas[1]?.label || 'Mitglied werden'}</Link>
 
                     <div style={{ height:'1px', background:'rgba(239,191,4,0.12)', margin:'4px 0' }} />
 
-                    <Link to="/formular-hochladen" onClick={() => setOpen(false)}
+                    <Link to={headerCtas[2]?.path || '/formular-hochladen'} onClick={() => setOpen(false)}
                       style={{
                         display:'flex', alignItems:'center', gap:10,
                         background:'rgba(255,255,255,0.04)',
@@ -449,7 +406,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                         e.currentTarget.style.background='rgba(255,255,255,0.04)';
                       }}
                     >
-                      <Upload size={12} strokeWidth={2} /> Formular hochladen
+                      <Upload size={12} strokeWidth={2} /> {headerCtas[2]?.label || 'Formular hochladen'}
                     </Link>
                   </div>
 
@@ -478,14 +435,14 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
           }}>
             {/* Logo */}
             <Link to="/" style={{ display:'flex', alignItems:'center', textDecoration:'none' }}>
-              <img src="/bmp-logo.png" alt="Bayerischer Mittelstandspreis 2026" style={{ height:32, width:'auto', display:'block', objectFit:'contain' }} />
+              <img src={logo} alt={header.logo?.alt || header.overlayLogoAlt} style={{ height:32, width:'auto', display:'block', objectFit:'contain' }} />
             </Link>
 
             {/* Hamburger */}
             <button
               onClick={() => setMobileOpen(true)}
               aria-expanded={mobileOpen}
-              aria-label="Navigation öffnen"
+              aria-label={header.openLabel}
               style={{ display:'flex', alignItems:'center', justifyContent:'center', width:48, height:48, background:'none', border:'none', cursor:'pointer', padding:0, flexShrink:0 }}
             >
               <div style={{ width:24, position:'relative', display:'flex', flexDirection:'column', gap:5 }}>
@@ -517,14 +474,14 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
               textTransform:'uppercase', letterSpacing:'-.02em',
               color:'rgba(255,255,255,.04)',
               pointerEvents:'none', userSelect:'none', zIndex:0,
-            }}>Exzellenz<br/>seit 2005</div>
+            }}>{header.mobileWatermark.split('\n').map((line, index) => <React.Fragment key={line + index}>{index > 0 && <br />}{line}</React.Fragment>)}</div>
 
             {/* Header row: logo + close */}
             <div style={{ position:'relative', zIndex:1, display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 8px 0 20px', height:60, borderBottom:`1px solid ${SEP}`, flexShrink:0 }}>
               <Link to="/" onClick={() => setMobileOpen(false)} style={{ display:'flex', alignItems:'center', textDecoration:'none' }}>
-                <img src="/bmp-logo.png" alt="BMP Logo" style={{ height:32, width:'auto', display:'block', objectFit:'contain' }} />
+                <img src={logo} alt={header.overlayLogoAlt} style={{ height:32, width:'auto', display:'block', objectFit:'contain' }} />
               </Link>
-              <button onClick={() => setMobileOpen(false)} aria-label="Menü schließen"
+              <button onClick={() => setMobileOpen(false)} aria-label={header.closeLabel}
                 style={{ display:'flex', alignItems:'center', justifyContent:'center', width:48, height:48, background:'none', border:'none', cursor:'pointer', padding:0, flexShrink:0 }}>
                 <div style={{ width:26, height:26, position:'relative', display:'flex', alignItems:'center', justifyContent:'center' }}>
                   <span style={{ position:'absolute', width:22, height:2, background:MUTED, borderRadius:2, transform:'rotate(45deg)' }} />
@@ -589,15 +546,15 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
 
               {/* CTAs */}
               <div style={{ padding:'24px 24px 8px', display:'flex', flexDirection:'column', gap:12 }}>
-                <Link to="/teilnahme#bewerben" onClick={() => setMobileOpen(false)}
+                <Link to={headerCtas[0]?.path || '/teilnahme#bewerben'} onClick={() => setMobileOpen(false)}
                   style={{ display:'flex', alignItems:'center', justifyContent:'center', minHeight:52, background:GOLD, color:'#101828', fontSize:14, fontWeight:700, textTransform:'uppercase', letterSpacing:'.12em', textDecoration:'none', fontFamily:FF_DISPLAY }}
-                >Jetzt bewerben</Link>
-                <Link to="/mitglied-werden" onClick={() => setMobileOpen(false)}
+                >{headerCtas[0]?.label || 'Jetzt bewerben'}</Link>
+                <Link to={headerCtas[1]?.path || '/mitglied-werden'} onClick={() => setMobileOpen(false)}
                   style={{ display:'flex', alignItems:'center', justifyContent:'center', minHeight:50, background:'transparent', color:'#fff', fontSize:14, fontWeight:700, textTransform:'uppercase', letterSpacing:'.12em', textDecoration:'none', fontFamily:FF_DISPLAY, border:`1.5px solid ${LINE}` }}
-                >Mitglied werden</Link>
-                <Link to="/formular-hochladen" onClick={() => setMobileOpen(false)}
+                >{headerCtas[1]?.label || 'Mitglied werden'}</Link>
+                <Link to={headerCtas[2]?.path || '/formular-hochladen'} onClick={() => setMobileOpen(false)}
                   style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:8, minHeight:46, background:'none', color:'rgba(255,255,255,0.5)', fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'.14em', textDecoration:'none', fontFamily:FF_DISPLAY, border:'1px dashed rgba(255,255,255,0.2)' }}
-                ><Upload size={13} strokeWidth={2} /> Formular hochladen</Link>
+                ><Upload size={13} strokeWidth={2} /> {headerCtas[2]?.label || 'Formular hochladen'}</Link>
               </div>
 
               {/* Footer zone: lang + social + secondary */}
@@ -605,7 +562,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                 {/* Lang + social row */}
                 <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
                   <div style={{ display:'flex', alignItems:'center', gap:10 }}>
-                    {(['DE','EN'] as const).map((l, i) => (
+                    {header.languages.map((l, i) => (
                       <React.Fragment key={l}>
                         {i === 1 && <span style={{ color:LINE, fontSize:13 }}>|</span>}
                         <button onClick={() => setLang(l)}
@@ -652,7 +609,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
           onMouseEnter={e => { (e.currentTarget as HTMLElement).style.background = '#EFBF04'; (e.currentTarget as HTMLElement).style.color = '#101828'; }}
           onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = '#111D55'; (e.currentTarget as HTMLElement).style.color = '#fff'; }}
         >
-          Jetzt bewerben <ArrowRight size={13} />
+          {headerCtas[0]?.label || 'Jetzt bewerben'} <ArrowRight size={13} />
         </Link>
       )}
 
@@ -693,7 +650,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
             lineHeight: 1,
             whiteSpace: isMobile ? 'normal' : 'nowrap',
           }}>
-            Der Preis des <span style={{ color: GOLD }}>Bayerischen</span> Mittelstands
+            {footer.headlinePrefix} <span style={{ color: GOLD }}>{footer.headlineAccent}</span> {footer.headlineSuffix}
           </h2>
 
           {/* Gold rule beneath headline */}
@@ -711,7 +668,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
               textTransform: 'uppercase',
               letterSpacing: '0.35em',
               color: 'rgba(239,191,4,0.55)',
-            }}>Exzellenz seit 2005</span>
+            }}>{footer.sinceLabel}</span>
             <div style={{ flex: 1, height: 1, background: 'rgba(239,191,4,0.18)' }} />
           </div>
         </div>
@@ -741,7 +698,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
               userSelect: 'none',
               pointerEvents: 'none',
               zIndex: 0,
-            }}>2026</div>
+            }}>{footer.year}</div>
           )}
 
           {/* ── LEFT COLUMN: copy + CTAs ── */}
@@ -753,8 +710,8 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
           }}>
             {/* Logo */}
             <img
-              src="/bmp-logo.png"
-              alt="Bayerischer Mittelstandspreis"
+              src={footerLogo}
+              alt={footer.logo?.alt || footer.logoAlt}
               style={{ width: 140, height: 'auto', marginBottom: 10, opacity: 0.9 }}
             />
 
@@ -766,7 +723,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
               margin: '0 0 16px 0',
               maxWidth: 300,
             }}>
-              Die renommierteste Auszeichnung für herausragende Unternehmen des bayerischen Mittelstands.
+              {footer.description}
             </p>
 
             {/* CTA stack */}
@@ -777,7 +734,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
               gap: 8,
             }}>
               <Link
-                to="/teilnahme#bewerben"
+                to={footerCtas[0]?.path || '/teilnahme#bewerben'}
                 style={{
                   fontFamily: FF_DISPLAY,
                   fontSize: 16,
@@ -800,10 +757,10 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                   e.currentTarget.style.background = GOLD;
                   e.currentTarget.style.boxShadow = 'none';
                 }}
-              >Kostenlos bewerben</Link>
+              >{footerCtas[0]?.label || 'Kostenlos bewerben'}</Link>
 
               <Link
-                to="/mitglied-werden"
+                to={footerCtas[1]?.path || '/mitglied-werden'}
                 style={{
                   fontFamily: FF_DISPLAY,
                   fontSize: 16,
@@ -826,10 +783,10 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                   e.currentTarget.style.borderColor = 'rgba(239,191,4,0.35)';
                   e.currentTarget.style.color = MUTED;
                 }}
-              >Mitglied werden</Link>
+              >{footerCtas[1]?.label || 'Mitglied werden'}</Link>
 
               <Link
-                to="/netzwerk#sponsoring"
+                to={footerCtas[2]?.path || '/netzwerk#sponsoring'}
                 style={{
                   fontFamily: FF_DISPLAY,
                   fontSize: 16,
@@ -843,7 +800,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                 }}
                 onMouseEnter={e => { e.currentTarget.style.color = '#fff'; }}
                 onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,0.4)'; }}
-              >Sponsoring-Anfrage →</Link>
+              >{footerCtas[2]?.label || 'Sponsoring-Anfrage →'}</Link>
             </div>
           </div>
 
@@ -868,135 +825,50 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
               alignItems: 'flex-start',
             }}>
 
-              {/* BMP 2026 column */}
-              <div style={{ minWidth: isMobile ? 'auto' : 160 }}>
-                <p style={{
-                  fontFamily: FF_DISPLAY,
-                  fontSize: 9,
-                  fontWeight: 700,
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.28em',
-                  color: 'rgba(255,255,255,0.3)',
-                  margin: '0 0 10px 0',
-                }}>BMP 2026</p>
-                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
-                  {[
-                    { l: 'Startseite', p: '/' },
-                    { l: 'Preisträger', p: '/preistraeger' },
-                    { l: 'Teilnahme', p: '/teilnahme' },
-                  ].map(item => (
-                    <li key={item.p}>
-                      <Link
-                        to={item.p}
-                        style={{
-                          fontFamily: FF_BODY,
-                          fontSize: 16,
-                          color: 'rgba(255,255,255,0.55)',
-                          textDecoration: 'none',
-                          transition: 'color 0.2s',
-                          display: 'inline-block',
-                        }}
-                        onMouseEnter={e => { e.currentTarget.style.color = '#fff'; }}
-                        onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,0.55)'; }}
-                      >{item.l}</Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-
-              {/* Gold vertical separator – desktop only */}
-              {!isMobile && (
-                <div style={{
-                  width: 1,
-                  alignSelf: 'stretch',
-                  background: 'rgba(239,191,4,0.22)',
-                  margin: '0 40px',
-                  flexShrink: 0,
-                }} />
-              )}
-
-              {/* Engagement column */}
-              <div style={{ minWidth: isMobile ? 'auto' : 160 }}>
-                <p style={{
-                  fontFamily: FF_DISPLAY,
-                  fontSize: 9,
-                  fontWeight: 700,
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.28em',
-                  color: 'rgba(255,255,255,0.3)',
-                  margin: '0 0 10px 0',
-                }}>Engagement</p>
-                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
-                  {[
-                    { l: 'Netzwerk & Jury', p: '/netzwerk' },
-                    { l: 'Presse', p: '/presse' },
-                    { l: 'Kontakt', p: '/kontakt' },
-                  ].map(item => (
-                    <li key={item.p}>
-                      <Link
-                        to={item.p}
-                        style={{
-                          fontFamily: FF_BODY,
-                          fontSize: 16,
-                          color: 'rgba(255,255,255,0.55)',
-                          textDecoration: 'none',
-                          transition: 'color 0.2s',
-                          display: 'inline-block',
-                        }}
-                        onMouseEnter={e => { e.currentTarget.style.color = '#fff'; }}
-                        onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,0.55)'; }}
-                      >{item.l}</Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-
-              {/* Gold vertical separator – desktop only */}
-              {!isMobile && (
-                <div style={{
-                  width: 1,
-                  alignSelf: 'stretch',
-                  background: 'rgba(239,191,4,0.22)',
-                  margin: '0 40px',
-                  flexShrink: 0,
-                }} />
-              )}
-
-              {/* Legal column */}
-              <div style={{ minWidth: isMobile ? 'auto' : 120 }}>
-                <p style={{
-                  fontFamily: FF_DISPLAY,
-                  fontSize: 9,
-                  fontWeight: 700,
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.28em',
-                  color: 'rgba(255,255,255,0.3)',
-                  margin: '0 0 10px 0',
-                }}>Legal</p>
-                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
-                  {[
-                    { l: 'Datenschutz', p: '/datenschutz' },
-                    { l: 'Impressum', p: '/impressum' },
-                  ].map(item => (
-                    <li key={item.p}>
-                      <Link
-                        to={item.p}
-                        style={{
-                          fontFamily: FF_BODY,
-                          fontSize: 16,
-                          color: 'rgba(255,255,255,0.55)',
-                          textDecoration: 'none',
-                          transition: 'color 0.2s',
-                          display: 'inline-block',
-                        }}
-                        onMouseEnter={e => { e.currentTarget.style.color = '#fff'; }}
-                        onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,0.55)'; }}
-                      >{item.l}</Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
+              {footer.linkColumns.map((column, index) => (
+                <React.Fragment key={column.label + index}>
+                  <div style={{ minWidth: isMobile ? 'auto' : index === footer.linkColumns.length - 1 ? 120 : 160 }}>
+                    <p style={{
+                      fontFamily: FF_DISPLAY,
+                      fontSize: 9,
+                      fontWeight: 700,
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.28em',
+                      color: 'rgba(255,255,255,0.3)',
+                      margin: '0 0 10px 0',
+                    }}>{column.label}</p>
+                    <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
+                      {column.links.map(item => (
+                        <li key={item.path + item.label}>
+                          <Link
+                            to={item.path}
+                            style={{
+                              fontFamily: FF_BODY,
+                              fontSize: 16,
+                              color: 'rgba(255,255,255,0.55)',
+                              textDecoration: 'none',
+                              transition: 'color 0.2s',
+                              display: 'inline-block',
+                            }}
+                            onMouseEnter={e => { e.currentTarget.style.color = '#fff'; }}
+                            onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,0.55)'; }}
+                          >{item.label}</Link>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
 
+                  {!isMobile && index < footer.linkColumns.length - 1 && (
+                    <div style={{
+                      width: 1,
+                      alignSelf: 'stretch',
+                      background: 'rgba(239,191,4,0.22)',
+                      margin: '0 40px',
+                      flexShrink: 0,
+                    }} />
+                  )}
+                </React.Fragment>
+              ))}
             </div>
           </div>
         </div>
@@ -1019,18 +891,18 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
             letterSpacing: '0.32em',
             color: 'rgba(255,255,255,0.22)',
             flexShrink: 0,
-          }}>Partner</span>
+          }}>{footer.partnerLabel}</span>
           <div style={{ width: 1, height: 20, background: 'rgba(239,191,4,0.2)', flexShrink: 0 }} />
-          <img
-            src="/images/ewif-logo.png"
-            alt="EWIF – Europäisches Wirtschaftsforum"
-            style={{ height: 32, width: 'auto', opacity: 0.5, filter: 'brightness(2)', display: 'block' }}
-          />
-          <img
-            src="/images/partner-logos.png"
-            alt="Hochschule für angewandtes Management · Gipfeldialog Altaussee"
-            style={{ height: 32, width: 'auto', opacity: 0.5, filter: 'brightness(2)', display: 'block' }}
-          />
+          {footer.partnerLogos.map((partner, index) => (
+            partner.image?.url ? (
+              <img
+                key={`${partner.alt}-${index}`}
+                src={partner.image.url}
+                alt={partner.image.alt || partner.alt}
+                style={{ height: 32, width: 'auto', opacity: 0.5, filter: 'brightness(2)', display: 'block' }}
+              />
+            ) : null
+          ))}
         </div>
 
         {/* ── BOTTOM BAR ── */}
@@ -1051,7 +923,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
             color: 'rgba(255,255,255,0.3)',
             margin: 0,
           }}>
-            © 2026 Bayerischer Mittelstandspreis · Alle Rechte vorbehalten
+            {footer.copyright}
           </p>
           <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
             {SOCIAL.map(s => <SocialLink key={s.label} {...s} />)}