From 38e1e0369ff8d3492c14a6ed2025f5db8a67ca5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Sat, 23 May 2026 07:46:59 +0200
Subject: [PATCH] Add distributed three-column text layout pattern

---
 patterns/text-layouts.html    | 17 ++++++++++++++++
 semantic-tokens-patterns.html | 11 ++++++++++
 styleguide.css                | 38 ++++++++++++++++++++++++++++++-----
 3 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/patterns/text-layouts.html b/patterns/text-layouts.html
index 508df06..74de2dc 100644
--- a/patterns/text-layouts.html
+++ b/patterns/text-layouts.html
@@ -41,6 +41,23 @@
         </div>
       </div>
     </div>
+
+    <p class="sg-preview-label">Pattern: Dreispaltig verteilt</p>
+    <div class="sg-text-layout-pattern" data-pattern="text-layout-dreispaltig-verteilt" aria-label="Text Layout dreispaltig verteilt">
+      <div class="sg-text-layout-pattern__preview-surface">
+        <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" data-pattern-part="text-block-three-column-distributed">
+          <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
+            Linke Spalte linksbündig: Diese Spalte führt den Inhalt mit einer klaren Startkante und eignet sich für einleitende Aussagen oder Kontext, die direkt in den Lesefluss einsteigen sollen.
+          </p>
+          <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
+            Mittlere Spalte mittelachsig: Diese Spalte zentriert den Text auf der Mittelachse und eignet sich für vergleichende Kernaussagen, die visuell als Schwerpunkt zwischen den Randspalten stehen sollen.
+          </p>
+          <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
+            Rechte Spalte rechtsbündig: Diese Spalte schließt den Abschnitt mit einer klaren Endkante ab und eignet sich für ergänzende Hinweise oder abschließende Perspektiven im gleichen Inhaltsblock.
+          </p>
+        </div>
+      </div>
+    </div>
   </section>
 
 </body>
diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html
index 0e86ce4..9530030 100644
--- a/semantic-tokens-patterns.html
+++ b/semantic-tokens-patterns.html
@@ -75,6 +75,17 @@
       <tr><td>surface-card-list-drawer</td><td>color-background-purple</td><td>Fläche des ausziehbaren Card-Listenbereichs.</td></tr>
       <tr><td>text-card-list-drawer</td><td>color-font-dark</td><td>Textfarbe im ausziehbaren Card-Listenbereich.</td></tr>
     </tbody></table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Text Layouts</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
+      <tr><td>surface-text-layout-preview</td><td>color-light-grey</td><td>Hintergrundfläche der Vorschau-Segmente im Pattern Text Layouts.</td></tr>
+      <tr><td>layout-text-layout-column-gap</td><td>spacing-large</td><td>Horizontaler Abstand zwischen Textspalten in zwei- und dreispaltigen Varianten.</td></tr>
+      <tr><td>layout-text-layout-two-column-columns</td><td>repeat(2, minmax(0, 1fr))</td><td>Spaltenraster für die zweispaltige Text-Variante.</td></tr>
+      <tr><td>layout-text-layout-three-column-columns</td><td>repeat(3, minmax(0, 1fr))</td><td>Spaltenraster für das Pattern Dreispaltig verteilt.</td></tr>
+      <tr><td>text-align-text-layout-column-left</td><td>left</td><td>Textausrichtung der linken Spalte im Pattern Dreispaltig verteilt.</td></tr>
+      <tr><td>text-align-text-layout-column-center</td><td>center</td><td>Textausrichtung der mittleren Spalte im Pattern Dreispaltig verteilt.</td></tr>
+      <tr><td>text-align-text-layout-column-right</td><td>right</td><td>Textausrichtung der rechten Spalte im Pattern Dreispaltig verteilt.</td></tr>
+    </tbody></table>
   </section>
 
 </body>
diff --git a/styleguide.css b/styleguide.css
index 074f624..43b97ef 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -187,6 +187,13 @@
   --text-vsf-drawer-object-card-heading: var(--color-font-light);
   --text-vsf-drawer-object-card-body: var(--color-font-light);
   --layout-vsf-drawer-object-card-column-gap: var(--spacing-large);
+  --surface-text-layout-preview: var(--color-light-grey);
+  --layout-text-layout-column-gap: var(--spacing-large);
+  --layout-text-layout-two-column-columns: repeat(2, minmax(0, 1fr));
+  --layout-text-layout-three-column-columns: repeat(3, minmax(0, 1fr));
+  --text-align-text-layout-column-left: left;
+  --text-align-text-layout-column-center: center;
+  --text-align-text-layout-column-right: right;
 
   /* Typography */
   --font-family-base: "Open Sans", sans-serif;
@@ -2203,7 +2210,7 @@ section + section {
   width: 100%;
   padding: var(--spacing-large);
   border-radius: var(--radius-card);
-  background: var(--color-light-grey);
+  background: var(--surface-text-layout-preview);
 }
 
 .sg-text-layout-pattern__sample {
@@ -2225,22 +2232,43 @@ section + section {
 .sg-text-layout-pattern__two-column {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  column-gap: var(--spacing-large);
+  grid-template-columns: var(--layout-text-layout-two-column-columns);
+  column-gap: var(--layout-text-layout-column-gap);
+}
+
+.sg-text-layout-pattern__three-column-distributed {
+  width: 100%;
+  display: grid;
+  grid-template-columns: var(--layout-text-layout-three-column-columns);
+  column-gap: var(--layout-text-layout-column-gap);
 }
 
 .sg-text-layout-pattern__column {
   margin: 0;
 }
 
+.sg-text-layout-pattern__column--align-left {
+  text-align: var(--text-align-text-layout-column-left);
+}
+
+.sg-text-layout-pattern__column--align-center {
+  text-align: var(--text-align-text-layout-column-center);
+}
+
+.sg-text-layout-pattern__column--align-right {
+  text-align: var(--text-align-text-layout-column-right);
+}
+
 @media (max-width: 767px) {
   .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,
+  .sg-text-layout-pattern__three-column-distributed {
     width: 100%;
   }
 
-  .sg-text-layout-pattern__two-column {
+  .sg-text-layout-pattern__two-column,
+  .sg-text-layout-pattern__three-column-distributed {
     grid-template-columns: 1fr;
   }
 }