diff --git a/docs/styleguide/patterns/public-page-patterns.html b/docs/styleguide/patterns/public-page-patterns.html
index 8981443..ecc4135 100644
--- a/docs/styleguide/patterns/public-page-patterns.html
+++ b/docs/styleguide/patterns/public-page-patterns.html
@@ -36,6 +36,56 @@
         </div>
       </div>
 
+      <p class="sg-preview-label">Pattern: text and picture right</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-right" data-pattern="text-and-picture-right">
+            <h2 class="sg-heading-h2">H2 Überschrift</h2>
+
+            <div class="sg-public-page-pattern-text-and-picture-right__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>
+
+            <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>
+        </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/docs/styleguide/semantic-tokens-patterns.html b/docs/styleguide/semantic-tokens-patterns.html
index 0c32620..d6def3c 100644
--- a/docs/styleguide/semantic-tokens-patterns.html
+++ b/docs/styleguide/semantic-tokens-patterns.html
@@ -18,6 +18,9 @@
       <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead>
       <tbody>
         <tr><td>layout-public-page-pattern-content-width</td><td>dimension-public-content-width</td><td>Gemeinsame Breite für Inhalte im Public-Page-Pattern-Kontext.</td></tr>
+        <tr><td>layout-public-page-pattern-text-picture-columns</td><td>repeat(2, minmax(0, 1fr))</td><td>Spaltenraster des Patterns <code>Pattern: text and picture right</code> mit zwei gleich breiten Spalten.</td></tr>
+        <tr><td>layout-public-page-pattern-text-picture-gap</td><td>spacing-large</td><td>Spaltenabstand zwischen Text und Bild im Pattern <code>Pattern: text and picture right</code>.</td></tr>
+        <tr><td>text-public-page-pattern-text-picture</td><td>color-font-light</td><td>Textfarbe des Patterns <code>Pattern: text and picture right</code>.</td></tr>
       </tbody>
     </table>
 
diff --git a/docs/styleguide/styles/37-layouts-page-layout-public.css b/docs/styleguide/styles/37-layouts-page-layout-public.css
index a1e5c91..9ed6bff 100644
--- a/docs/styleguide/styles/37-layouts-page-layout-public.css
+++ b/docs/styleguide/styles/37-layouts-page-layout-public.css
@@ -28,6 +28,12 @@ main {
   flex: 1;
 }
 
+@media (max-width: 48rem) {
+  .sg-page-layout-public__content-mirror {
+    width: min(calc(100% - (var(--spacing-small) * 2)), 1100px);
+  }
+}
+
 .sg-page-layout-public__footer-card {
   margin-top: auto;
 }
diff --git a/docs/styleguide/styles/45-patterns-public-page-patterns.css b/docs/styleguide/styles/45-patterns-public-page-patterns.css
index 4c5a8de..002af0a 100644
--- a/docs/styleguide/styles/45-patterns-public-page-patterns.css
+++ b/docs/styleguide/styles/45-patterns-public-page-patterns.css
@@ -7,3 +7,95 @@
   flex-direction: column;
   width: 100%;
 }
+
+.sg-public-page-pattern-text-and-picture-right {
+  --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"
+    "text picture";
+  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-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;
+    grid-template-areas:
+      "heading"
+      "picture"
+      "text";
+  }
+
+  .sg-public-page-pattern-text-and-picture-left {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "heading"
+      "picture"
+      "text";
+  }
+}
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index 6d1b83f..5dba6f2 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -3453,6 +3453,12 @@ main {
   flex: 1;
 }
 
+@media (max-width: 48rem) {
+  .sg-page-layout-public__content-mirror {
+    width: min(calc(100% - (var(--spacing-small) * 2)), 1100px);
+  }
+}
+
 .sg-page-layout-public__footer-card {
   margin-top: auto;
 }
@@ -4646,3 +4652,95 @@ main {
   width: 100%;
 }
 
+.sg-public-page-pattern-text-and-picture-right {
+  --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"
+    "text picture";
+  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-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;
+    grid-template-areas:
+      "heading"
+      "picture"
+      "text";
+  }
+
+  .sg-public-page-pattern-text-and-picture-left {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "heading"
+      "picture"
+      "text";
+  }
+}
+
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index 6c96a1c..272e564 100644
--- a/public/assets/styleguide.upstream.meta.json
+++ b/public/assets/styleguide.upstream.meta.json
@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "4f6456f",
-  "syncedAtUtc": "2026-06-24T12:45:52Z",
+  "styleguideCommit": "3e0b2d3",
+  "syncedAtUtc": "2026-06-24T14:44:00Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }
diff --git a/public/assets/styles.css b/public/assets/styles.css
index 6d1b83f..5dba6f2 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -3453,6 +3453,12 @@ main {
   flex: 1;
 }
 
+@media (max-width: 48rem) {
+  .sg-page-layout-public__content-mirror {
+    width: min(calc(100% - (var(--spacing-small) * 2)), 1100px);
+  }
+}
+
 .sg-page-layout-public__footer-card {
   margin-top: auto;
 }
@@ -4646,3 +4652,95 @@ main {
   width: 100%;
 }
 
+.sg-public-page-pattern-text-and-picture-right {
+  --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"
+    "text picture";
+  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-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;
+    grid-template-areas:
+      "heading"
+      "picture"
+      "text";
+  }
+
+  .sg-public-page-pattern-text-and-picture-left {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "heading"
+      "picture"
+      "text";
+  }
+}
+