Sync styleguide 2026.05.18.1

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">

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>
 

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;
 }

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";
+  }
+}

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";
+  }
+}
+

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"
 }

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";
+  }
+}
+