From 4f8e60e0ea8e1cdd2c82680de0b0742836bd396a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 24 Jun 2026 12:01:28 +0200
Subject: [PATCH] Add stacked mobile text layout pattern

---
 patterns/text-layouts.html          | 14 ++++++++++++++
 styles/31-patterns-text-layouts.css | 11 +++++++++++
 2 files changed, 25 insertions(+)

diff --git a/patterns/text-layouts.html b/patterns/text-layouts.html
index 93b45d4..6b53cdf 100644
--- a/patterns/text-layouts.html
+++ b/patterns/text-layouts.html
@@ -42,6 +42,20 @@
       </div>
     </div>
 
+    <p class="sg-preview-label">Pattern: Text zweispaltig (mobil gestacked)</p>
+    <div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig-gestacked" aria-label="Text Layout zweispaltig mobil gestacked">
+      <div class="sg-text-layout-pattern__preview-surface">
+        <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column sg-text-layout-pattern__two-column--stacked-mobile" data-pattern-part="text-block-two-column-stacked-mobile">
+          <p class="sg-body sg-text-layout-pattern__column">
+            Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
+          </p>
+          <p class="sg-body sg-text-layout-pattern__column">
+            Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
+          </p>
+        </div>
+      </div>
+    </div>
+
     <p class="sg-preview-label">Pattern: Dreispaltig verteilt (mobil dreispaltig)</p>
     <div class="sg-text-layout-pattern" data-pattern="text-layout-dreispaltig-verteilt" aria-label="Text Layout dreispaltig verteilt mobil dreispaltig">
       <div class="sg-text-layout-pattern__preview-surface">
diff --git a/styles/31-patterns-text-layouts.css b/styles/31-patterns-text-layouts.css
index 5a6f365..b0191ea 100644
--- a/styles/31-patterns-text-layouts.css
+++ b/styles/31-patterns-text-layouts.css
@@ -40,6 +40,11 @@
   column-gap: var(--layout-text-layout-column-gap);
 }
 
+.sg-text-layout-pattern__two-column--stacked-mobile {
+  width: 100%;
+  min-width: 0;
+}
+
 .sg-text-layout-pattern__three-column-distributed {
   width: 100%;
   min-width: 0;
@@ -73,7 +78,13 @@
   .sg-text-layout-pattern__sample--sixty-width,
   .sg-text-layout-pattern__sample--two-column,
   .sg-text-layout-pattern__two-column,
+  .sg-text-layout-pattern__two-column--stacked-mobile,
   .sg-text-layout-pattern__three-column-distributed {
     width: 100%;
   }
+
+  .sg-text-layout-pattern__two-column--stacked-mobile {
+    grid-template-columns: 1fr;
+    row-gap: var(--layout-text-layout-column-gap);
+  }
 }