From 71a293202835447dd828c3f20331cb50cd9cee90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 21 May 2026 11:39:03 +0200
Subject: [PATCH] Replace two-column text pattern with deterministic 50-50 grid
 and update VSF drawer

---
 patterns/text-layouts.html          | 11 ++++++---
 patterns/vsf-card-listen-seite.html |  6 ++---
 styleguide.css                      | 37 +++++++++++++++--------------
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/patterns/text-layouts.html b/patterns/text-layouts.html
index 6045f9b..508df06 100644
--- a/patterns/text-layouts.html
+++ b/patterns/text-layouts.html
@@ -31,9 +31,14 @@
     <p class="sg-preview-label">Pattern: Text zweispaltig</p>
     <div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig">
       <div class="sg-text-layout-pattern__preview-surface">
-        <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--two-column" data-pattern-part="text-block-two-column">
-          Text zweispaltig: 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. Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen, die in Analyse- und Detailseiten stabil funktionieren und sich gut mit angrenzenden Karten, Tabellen oder Kennzahlenmodulen kombinieren lassen.
-        </p>
+        <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
+          <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>
   </section>
diff --git a/patterns/vsf-card-listen-seite.html b/patterns/vsf-card-listen-seite.html
index 936bc15..75e5935 100644
--- a/patterns/vsf-card-listen-seite.html
+++ b/patterns/vsf-card-listen-seite.html
@@ -688,14 +688,14 @@
           <h2 class="sg-heading-h2 sg-vsf-drawer-object-card__heading">Western Digital Corporation</h2>
         </header>
         <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
-          <div class="sg-vsf-drawer-object-card__text-columns" data-pattern-part="text-block-two-column">
-            <p class="sg-body sg-vsf-drawer-object-card__text-column">
+          <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
+            <p class="sg-body sg-text-layout-pattern__column">
               Ticker: WDC<br>
               Region: Amerika<br>
               Sub-Region: Nordamerika<br>
               Land: Vereinigte Staaten von Amerika
             </p>
-            <p class="sg-body sg-vsf-drawer-object-card__text-column">
+            <p class="sg-body sg-text-layout-pattern__column">
               ISIN: US9581021055<br>
               Industrie: Computer Hardware
             </p>
diff --git a/styleguide.css b/styleguide.css
index 8f1eceb..7c60d6a 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -2096,21 +2096,13 @@ section + section {
   color: var(--text-vsf-drawer-object-card-body);
 }
 
-.sg-vsf-drawer-object-card__text.sg-text-layout-pattern__sample--two-column {
+.sg-vsf-drawer-object-card .sg-text-layout-pattern__two-column,
+.sg-vsf-drawer-object-card .sg-text-layout-pattern__column {
   color: var(--text-vsf-drawer-object-card-body);
-  column-gap: var(--layout-vsf-drawer-object-card-column-gap);
 }
 
-.sg-vsf-drawer-object-card__text-columns {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+.sg-vsf-drawer-object-card .sg-text-layout-pattern__two-column {
   gap: var(--layout-vsf-drawer-object-card-column-gap);
-  color: var(--text-vsf-drawer-object-card-body);
-}
-
-.sg-vsf-drawer-object-card__text-column {
-  margin: 0;
-  color: var(--text-vsf-drawer-object-card-body);
 }
 
 .sg-vsf-drawer-object-card__heading {
@@ -2148,20 +2140,29 @@ section + section {
 }
 
 .sg-text-layout-pattern__sample--two-column {
+  margin: 0;
+}
+
+.sg-text-layout-pattern__two-column {
   width: 100%;
-  column-count: 2;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   column-gap: var(--spacing-large);
 }
 
+.sg-text-layout-pattern__column {
+  margin: 0;
+}
+
 @media (max-width: 767px) {
-  .sg-vsf-drawer-object-card__text-columns {
-    grid-template-columns: 1fr;
+  .sg-text-layout-pattern__sample--sixty-width,
+  .sg-text-layout-pattern__sample--two-column,
+  .sg-text-layout-pattern__two-column {
+    width: 100%;
   }
 
-  .sg-text-layout-pattern__sample--sixty-width,
-  .sg-text-layout-pattern__sample--two-column {
-    width: 100%;
-    column-count: 1;
+  .sg-text-layout-pattern__two-column {
+    grid-template-columns: 1fr;
   }
 }