From 6d91fccff103e7a9b6e1911d9d9d8bcba3df5a1c 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:33:10 +0200
Subject: [PATCH] Show text layout patterns on grey preview surface

---
 patterns/text-layouts.html | 24 +++++++++++++++---------
 styleguide.css             |  7 +++++++
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/patterns/text-layouts.html b/patterns/text-layouts.html
index 4b3bb6c..6045f9b 100644
--- a/patterns/text-layouts.html
+++ b/patterns/text-layouts.html
@@ -12,23 +12,29 @@
   <section id="pattern-text-layouts">
     <p class="sg-preview-label">Pattern: Text Layout ganze Breite</p>
     <div class="sg-text-layout-pattern" data-pattern="text-layout-ganze-breite" aria-label="Text Layout ganze Breite">
-      <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width">
-        Text 100% Breite: Dieser Textblock nimmt die komplette verfügbare Breite des Containers ein und eignet sich für lineare Erklärungen, einleitende Kontexte und Fliesstext ohne Nebenspalte.
-      </p>
+      <div class="sg-text-layout-pattern__preview-surface">
+        <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width">
+          Text 100% Breite: Dieser Textblock nimmt die komplette verfügbare Breite des Containers ein und eignet sich für lineare Erklärungen, einleitende Kontexte und Fliesstext ohne Nebenspalte.
+        </p>
+      </div>
     </div>
 
     <p class="sg-preview-label">Pattern: Text 60% Breite</p>
     <div class="sg-text-layout-pattern" data-pattern="text-layout-sechzig-prozent" aria-label="Text Layout 60 Prozent Breite">
-      <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width" data-pattern-part="text-block-sixty-width">
-        Text 60% Breite: Dieser Textblock nutzt sechzig Prozent der Containerbreite und schafft dadurch bewusst mehr Luft für begleitende Inhalte wie Metriken, Visuals oder Kontextinformationen.
-      </p>
+      <div class="sg-text-layout-pattern__preview-surface">
+        <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width" data-pattern-part="text-block-sixty-width">
+          Text 60% Breite: Dieser Textblock nutzt sechzig Prozent der Containerbreite und schafft dadurch bewusst mehr Luft für begleitende Inhalte wie Metriken, Visuals oder Kontextinformationen.
+        </p>
+      </div>
     </div>
 
     <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">
-      <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__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>
     </div>
   </section>
 
diff --git a/styleguide.css b/styleguide.css
index a30b5c6..725e565 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -2090,6 +2090,13 @@ section + section {
   gap: var(--spacing-small);
 }
 
+.sg-text-layout-pattern__preview-surface {
+  width: 100%;
+  padding: var(--spacing-large);
+  border-radius: var(--radius-card);
+  background: var(--color-light-grey);
+}
+
 .sg-text-layout-pattern__sample {
   margin: 0;
 }