From d8a6508cde77af10b4b3ebf8cf435801aae72e1a Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Thu, 25 Jun 2026 13:19:59 +0200
Subject: [PATCH] feat(footer): use the grid layout system instead of fixed
 flex columns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop the footer's flex override so it renders through the standard 12-col
grid + per-block layout (mobile/tablet/desktop) like pages do. Add optional
column-start (desktopStart/tabletStart) to the layout system so blocks can be
offset in the grid — used to place the inline newsletter form directly under
the "Kontakt & Community" column.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/lib/block-layout.ts          | 26 ++++++++++++++++++++++++++
 src/lib/components/Footer.svelte | 19 +++++--------------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/lib/block-layout.ts b/src/lib/block-layout.ts
index e497afc..7b15ec3 100644
--- a/src/lib/block-layout.ts
+++ b/src/lib/block-layout.ts
@@ -46,12 +46,34 @@ export type BlockLayout = {
     | "10"
     | "11"
     | "12";
+  /** Start-Spalte auf Desktop (1–12) = Grid-Versatz (col-start). Optional. */
+  desktopStart?:
+    | "1" | "2" | "3" | "4" | "5" | "6"
+    | "7" | "8" | "9" | "10" | "11" | "12";
+  /** Start-Spalte auf Tablet (1–12). Optional. */
+  tabletStart?:
+    | "1" | "2" | "3" | "4" | "5" | "6"
+    | "7" | "8" | "9" | "10" | "11" | "12";
   /** Abstand nach unten (rem): 0, 0.5, 1, 1.5, 2. */
   spaceBottom?: 0 | 0.5 | 1 | 1.5 | 2;
   /** true = Block fullwidth aus dem Grid ausbrechen (viewport-breit). */
   breakout?: boolean;
 };
 
+const MD_COL_START: Record<string, string> = {
+  "1": "md:col-start-1", "2": "md:col-start-2", "3": "md:col-start-3",
+  "4": "md:col-start-4", "5": "md:col-start-5", "6": "md:col-start-6",
+  "7": "md:col-start-7", "8": "md:col-start-8", "9": "md:col-start-9",
+  "10": "md:col-start-10", "11": "md:col-start-11", "12": "md:col-start-12",
+};
+
+const LG_COL_START: Record<string, string> = {
+  "1": "lg:col-start-1", "2": "lg:col-start-2", "3": "lg:col-start-3",
+  "4": "lg:col-start-4", "5": "lg:col-start-5", "6": "lg:col-start-6",
+  "7": "lg:col-start-7", "8": "lg:col-start-8", "9": "lg:col-start-9",
+  "10": "lg:col-start-10", "11": "lg:col-start-11", "12": "lg:col-start-12",
+};
+
 const COL_SPAN: Record<string, string> = {
   "1": "col-span-1",
   "2": "col-span-2",
@@ -133,11 +155,15 @@ export function getBlockLayoutClasses(
   const mobile = String(layout.mobile ?? "12");
   const tablet = layout.tablet != null ? String(layout.tablet) : undefined;
   const desktop = layout.desktop != null ? String(layout.desktop) : undefined;
+  const tabletStart = layout.tabletStart != null ? String(layout.tabletStart) : undefined;
+  const desktopStart = layout.desktopStart != null ? String(layout.desktopStart) : undefined;
 
   const parts: string[] = [
     COL_SPAN[mobile] ?? "col-span-12",
     tablet ? (MD_COL_SPAN[tablet] ?? "") : "",
     desktop ? (LG_COL_SPAN[desktop] ?? "") : "",
+    tabletStart ? (MD_COL_START[tabletStart] ?? "") : "",
+    desktopStart ? (LG_COL_START[desktopStart] ?? "") : "",
     spaceClass,
   ];
   return parts.filter(Boolean).join(" ");
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 0aaa605..774a892 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -47,25 +47,16 @@
   .content-footer :global(.content) {
     margin: 0;
   }
-  .content-footer :global(.content-row) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2rem;
-    align-items: flex-start;
-  }
-  .content-footer :global(.content-row > *) {
-    flex: 1 1 200px;
-    grid-column: auto !important;
-    min-width: 0;
-  }
+  /* Footer nutzt jetzt das normale 12-Spalten-Grid (grid grid-cols-12 aus
+     ContentRows) + per-Block layout (mobile/tablet/desktop + desktopStart).
+     Kein Flex-Override mehr — Spaltigkeit kommt aus dem CMS-layout. */
   .content-footer :global(.content-row + .content-row) {
     margin-top: 2rem;
     padding-top: 1.5rem;
     border-top: 1px solid var(--color-stein-700);
   }
-  /* Globaler Row-Trenner (::before aus app.css) ist für Grid-Kontext gedacht.
-     Im Flex-Footer wird er zum Phantom-Flex-Item und schiebt den Inhalt nach
-     rechts. Footer hat eigenen border-top-Trenner → globalen hier abschalten. */
+  /* Globaler Row-Trenner (::before aus app.css) doppelt den eigenen
+     border-top-Trenner → hier abschalten. */
   .content-footer :global(.content-row + .content-row::before) {
     display: none;
   }