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

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

diff --git a/patterns/public-page-patterns.html b/patterns/public-page-patterns.html
index 2c4d26e..ecc4135 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 left</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-left" data-pattern="text-and-picture-left">
+            <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-left__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: Content Focus Box</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 28e7492..002af0a 100644
--- a/styles/45-patterns-public-page-patterns.css
+++ b/styles/45-patterns-public-page-patterns.css
@@ -24,27 +24,64 @@
   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);
+  --text-public-page-pattern-text-picture: var(--color-font-light);
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  grid-template-columns: var(--layout-public-page-pattern-text-picture-columns);
+  grid-template-areas:
+    "heading heading"
+    "picture text";
+  gap: var(--layout-public-page-pattern-text-picture-gap);
+  align-items: start;
+  color: var(--text-public-page-pattern-text-picture);
+}
+
 .sg-public-page-pattern-text-and-picture-right > .sg-heading-h2 {
   grid-area: heading;
   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;
+  color: var(--text-public-page-pattern-text-picture);
+}
+
 .sg-public-page-pattern-text-and-picture-right__text {
   grid-area: text;
   min-width: 0;
 }
 
+.sg-public-page-pattern-text-and-picture-left__text {
+  grid-area: text;
+  min-width: 0;
+}
+
 .sg-public-page-pattern-text-and-picture-right > .sg-picture-full-width {
   grid-area: picture;
   min-width: 0;
 }
 
+.sg-public-page-pattern-text-and-picture-left > .sg-picture-full-width {
+  grid-area: picture;
+  min-width: 0;
+}
+
 .sg-public-page-pattern-text-and-picture-right__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);
+}
+
 @media (max-width: 48rem) {
   .sg-public-page-pattern-text-and-picture-right {
     grid-template-columns: 1fr;
@@ -53,4 +90,12 @@
       "picture"
       "text";
   }
+
+  .sg-public-page-pattern-text-and-picture-left {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "heading"
+      "picture"
+      "text";
+  }
 }