Sync styleguide 2026.05.18.1

docs/styleguide/components/public-page-components.html

@@ -50,6 +50,21 @@
         </article>
       </div>
     </section>
+
+    <section id="component-picture-full-width">
+      <p class="sg-preview-label">Component: Picture Full Width</p>
+
+      <div class="sg-preview-area">
+        <img
+          class="sg-picture-full-width"
+          data-component="picture-full-width"
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXk9IjI0IDE2IiBvcGFjaXR5PSIwLjU1Ii8+PHRleHQgeD0iODAwIiB5PSI0NTAiIGZpbGw9IiNmM2Y0ZjYiIGZvbnQtZmFtaWx5PSJBcmlhbCwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjUyIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5QaWN0dXJlIGZ1bGwgd2lkdGg8L3RleHQ+PC9zdmc+"
+          alt="Platzhalterbild für die Picture Full Width Component"
+          width="1600"
+          height="900"
+        >
+      </div>
+    </section>
   </div>
 
 </body>

docs/styleguide/patterns/public-page-patterns.html

@@ -58,11 +58,11 @@
 
       <p class="sg-preview-label">pattern: CTA box right</p>
 
-      <div class="sg-preview-area">
-        <div class="sg-content-group-box" data-component="content-group-box">
-          <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-call-to-action-card--align-right" data-component="call-to-action-card" aria-label="Call to action Card">
-            <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
-              <p class="sg-body sg-call-to-action-card__text">
+    <div class="sg-preview-area">
+      <div class="sg-content-group-box" data-component="content-group-box">
+        <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-call-to-action-card--align-right" data-component="call-to-action-card" aria-label="Call to action Card">
+          <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
+            <p class="sg-body sg-call-to-action-card__text">
                 Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
               </p>
 
@@ -72,10 +72,25 @@
                 </button>
               </div>
             </div>
-          </article>
-        </div>
+        </article>
       </div>
-    </section>
+    </div>
+
+    <p class="sg-preview-label">pattern: picture full width</p>
+
+    <div class="sg-preview-area">
+      <div class="sg-content-group-box" data-component="content-group-box">
+        <img
+          class="sg-picture-full-width"
+          data-component="picture-full-width"
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXk9IjI0IDE2IiBvcGFjaXR5PSIwLjU1Ii8+PHRleHQgeD0iODAwIiB5PSI0NTAiIGZpbGw9IiNmM2Y0ZjYiIGZvbnQtZmFtaWx5PSJBcmlhbCwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjUyIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5QaWN0dXJlIGZ1bGwgd2lkdGg8L3RleHQ+PC9zdmc+"
+          alt="Platzhalterbild für die Picture Full Width Component"
+          width="1600"
+          height="900"
+        >
+      </div>
+    </div>
+  </section>
   </div>
 
 </body>

docs/styleguide/semantic-tokens-components.html

@@ -119,6 +119,9 @@
         <tr><td>layout-call-to-action-card-content-gap</td><td>spacing-large</td><td>Abstand zwischen Text und Button.</td></tr>
       </tbody>
     </table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Picture Full Width</h3>
+    <p class="sg-table-label">Keine zusätzlichen semantischen Tokens erforderlich. Die Komponente ist strukturell und bezieht sich mit <code>width: 100%</code> auf den umgebenden Container, mit <code>height: auto</code> und <code>display: block</code> für das Bild-Element.</p>
   </section>
 
   <section id="semantic-interactive">

docs/styleguide/styles/44-components-public-page-components.css

@@ -67,6 +67,17 @@
   justify-content: flex-end;
 }
 
+.sg-call-to-action-card--align-right {
+  margin-left: auto;
+}
+
+.sg-picture-full-width {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+}
+
 .sg-page-public-page-components .sg-preview-area {
   display: flex;
   flex-direction: column;

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

@@ -11,7 +11,3 @@
 .sg-page-public-page-patterns .sg-text-block--align-right {
   margin-left: auto;
 }
-
-.sg-call-to-action-card--align-right {
-  margin-left: auto;
-}