Add public page text and picture right pattern

patterns/public-page-patterns.html

@@ -36,6 +36,31 @@
         </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">
+            <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>
+
+            <div class="sg-public-page-pattern-text-and-picture-right__picture">
+              <img
+                class="sg-picture-full-width"
+                data-component="picture-full-width"
+                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXk9IjI0IDE2IiBvcGFjaXR5PSIwLjU1Ii8+PHRleHQgeD0iODAwIiB5PSI0NTAiIGZpbGw9IiNmM2Y0ZjYiIGZvbnQtZmFtaWx5PSJBcmlhbCwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmIiBmb250LXNpemUiPSI1MiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UGljdHVyZSBmdWxsIHdpZHRoPC90ZXh0Pjwvc3ZnPg=="
+                alt="Platzhalterbild für das Pattern text and picture right"
+                width="1600"
+                height="900"
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+
       <p class="sg-preview-label">pattern: Content Focus Box</p>
 
       <div class="sg-preview-area">

semantic-tokens-patterns.html

@@ -18,6 +18,8 @@
       <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>
       </tbody>
     </table>
 

styles/45-patterns-public-page-patterns.css

@@ -7,3 +7,38 @@
   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);
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  grid-template-columns: var(--layout-public-page-pattern-text-picture-columns);
+  grid-template-areas: "text picture";
+  gap: var(--layout-public-page-pattern-text-picture-gap);
+  align-items: start;
+}
+
+.sg-public-page-pattern-text-and-picture-right__text {
+  grid-area: text;
+  min-width: 0;
+}
+
+.sg-public-page-pattern-text-and-picture-right__picture {
+  grid-area: picture;
+  min-width: 0;
+}
+
+.sg-public-page-pattern-text-and-picture-right__text .sg-body {
+  margin: 0;
+}
+
+@media (max-width: 48rem) {
+  .sg-public-page-pattern-text-and-picture-right {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "picture"
+      "text";
+  }
+}