Add distributed three-column text layout pattern

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>

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>

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));
+  grid-template-columns: var(--layout-text-layout-two-column-columns);
-  column-gap: var(--spacing-large);
+  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;
   }
 }