From 2b42e301f05f3be2d4198f42e181b321f0ac6a8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 24 Jun 2026 19:45:32 +0200
Subject: [PATCH] Add public page fullwidth text-picture pattern

---
 patterns/public-page-patterns.html          | 25 +++++++++++++++++++++
 styles/45-patterns-public-page-patterns.css | 24 ++++++++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/patterns/public-page-patterns.html b/patterns/public-page-patterns.html
index ecc4135..7a2ed2e 100644
--- a/patterns/public-page-patterns.html
+++ b/patterns/public-page-patterns.html
@@ -61,6 +61,31 @@
         </div>
       </div>
 
+      <p class="sg-preview-label">Pattern: text and picture fullwidth</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <div class="sg-public-page-pattern-text-and-picture-fullwidth" data-pattern="text-and-picture-fullwidth">
+            <h2 class="sg-heading-h2">H2 Überschrift</h2>
+
+            <img
+              class="sg-picture-full-width"
+              data-component="picture-full-width"
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXJ5PSIyNCAxNiIgb3BhY2l0eT0iMC41NSIvPjx0ZXh0IHg9IjgwMCIgeT0iNDUwIiBmaWxsPSIjZjNmNGY2IiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI1MiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UGljdHVyZSBmdWxsIHdpZHRoPC90ZXh0Pjwvc3ZnPg=="
+              alt="Platzhalterbild für die Picture Full Width Component"
+              width="1600"
+              height="900"
+            >
+
+            <div class="sg-public-page-pattern-text-and-picture-fullwidth__text">
+              <p class="sg-body">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <p class="sg-preview-label">Pattern: text and picture left</p>
 
       <div class="sg-preview-area">
diff --git a/styles/45-patterns-public-page-patterns.css b/styles/45-patterns-public-page-patterns.css
index 002af0a..08191ac 100644
--- a/styles/45-patterns-public-page-patterns.css
+++ b/styles/45-patterns-public-page-patterns.css
@@ -24,6 +24,16 @@
   color: var(--text-public-page-pattern-text-picture);
 }
 
+.sg-public-page-pattern-text-and-picture-fullwidth {
+  --text-public-page-pattern-text-picture: var(--color-font-light);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  gap: var(--spacing-large);
+  color: var(--text-public-page-pattern-text-picture);
+}
+
 .sg-public-page-pattern-text-and-picture-left {
   --layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr));
   --layout-public-page-pattern-text-picture-gap: var(--spacing-large);
@@ -46,6 +56,11 @@
   color: var(--text-public-page-pattern-text-picture);
 }
 
+.sg-public-page-pattern-text-and-picture-fullwidth > .sg-heading-h2 {
+  margin: 0;
+  color: var(--text-public-page-pattern-text-picture);
+}
+
 .sg-public-page-pattern-text-and-picture-left > .sg-heading-h2 {
   grid-area: heading;
   margin: 0;
@@ -57,6 +72,10 @@
   min-width: 0;
 }
 
+.sg-public-page-pattern-text-and-picture-fullwidth__text {
+  min-width: 0;
+}
+
 .sg-public-page-pattern-text-and-picture-left__text {
   grid-area: text;
   min-width: 0;
@@ -77,6 +96,11 @@
   color: var(--text-public-page-pattern-text-picture);
 }
 
+.sg-public-page-pattern-text-and-picture-fullwidth__text .sg-body {
+  margin: 0;
+  color: var(--text-public-page-pattern-text-picture);
+}
+
 .sg-public-page-pattern-text-and-picture-left__text .sg-body {
   margin: 0;
   color: var(--text-public-page-pattern-text-picture);