Sync styleguide 2026.05.18.1

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

@@ -152,6 +152,26 @@
         </div>
       </div>
 
+      <p class="sg-preview-label">pattern: CTA box left full width</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-card--call-to-action-card--full-width" data-component="call-to-action-card" data-component-variant="full-width" aria-label="Call to action Card full width">
+            <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>
+
+              <div class="sg-call-to-action-card__action">
+                <button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
+                  Call-to-action-Button
+                </button>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+
       <p class="sg-preview-label">pattern: CTA box right</p>
 
     <div class="sg-preview-area">
@@ -192,6 +212,26 @@
         </div>
       </div>
 
+      <p class="sg-preview-label">pattern: CTA small button box right full width</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-card--call-to-action-card--full-width sg-call-to-action-card--align-right" data-component="call-to-action-card" data-component-variant="full-width" aria-label="CTA small button box right full width">
+            <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>
+
+              <div class="sg-call-to-action-card__action">
+                <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+                  Link-Button aktiv
+                </button>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+
       <p class="sg-preview-label">Pattern: Newsletter Form</p>
 
       <div class="sg-preview-area">

docs/styleguide/semantic-tokens-components.html

@@ -122,7 +122,7 @@
       <tbody>
         <tr><td>surface-call-to-action-card</td><td>surface-card-group</td><td>Fläche der Call-to-action-Card als dunkle Content-Card-Variante.</td></tr>
         <tr><td>text-call-to-action-card</td><td>color-font-light</td><td>Textfarbe in der Call-to-action-Card.</td></tr>
-        <tr><td>layout-call-to-action-card-width</td><td>calc(var(--dimension-public-content-width) * 0.5); dimension-public-content-width in der Drei-Spalten-Variante</td><td>Breite der Card im Page-Layout; die Drei-Spalten-Variante nutzt die volle Content-Breite.</td></tr>
+        <tr><td>layout-call-to-action-card-width</td><td>calc(var(--dimension-public-content-width) * 0.5); dimension-public-content-width in der Fullwidth- und Drei-Spalten-Variante</td><td>Breite der Card im Page-Layout; die Fullwidth- und Drei-Spalten-Varianten nutzen die volle Content-Breite.</td></tr>
         <tr><td>layout-call-to-action-card-content-columns</td><td>minmax(0, 1fr) max-content; minmax(0, 1fr) 30% max-content in der Drei-Spalten-Variante</td><td>Zweispaltiges Standardlayout oder dreispaltiges Layout mit flexibler Textspalte, 30% Formularfeldspalte und Inhaltsbreite der Aktion; auf kleinen Viewports einspaltig.</td></tr>
         <tr><td>layout-call-to-action-card-content-gap</td><td>spacing-large</td><td>Abstand zwischen Text und Button.</td></tr>
       </tbody>

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

@@ -53,6 +53,10 @@
   --layout-call-to-action-card-content-columns: minmax(0, 1fr) 30% max-content;
 }
 
+.sg-card--call-to-action-card--full-width {
+  --layout-call-to-action-card-width: var(--dimension-public-content-width);
+}
+
 .sg-card--call-to-action-card .sg-card-segment--body {
   display: grid;
   grid-template-columns: var(--layout-call-to-action-card-content-columns);

public/assets/styleguide.upstream.css

@@ -4687,6 +4687,10 @@ main {
   --layout-call-to-action-card-content-columns: minmax(0, 1fr) 30% max-content;
 }
 
+.sg-card--call-to-action-card--full-width {
+  --layout-call-to-action-card-width: var(--dimension-public-content-width);
+}
+
 .sg-card--call-to-action-card .sg-card-segment--body {
   display: grid;
   grid-template-columns: var(--layout-call-to-action-card-content-columns);

public/assets/styleguide.upstream.meta.json

@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "7c3b8b7",
+  "styleguideCommit": "6a9b3b1",
-  "syncedAtUtc": "2026-08-05T14:24:01Z",
+  "syncedAtUtc": "2026-08-07T10:56:44Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }

public/assets/styles.css

@@ -4687,6 +4687,10 @@ main {
   --layout-call-to-action-card-content-columns: minmax(0, 1fr) 30% max-content;
 }
 
+.sg-card--call-to-action-card--full-width {
+  --layout-call-to-action-card-width: var(--dimension-public-content-width);
+}
+
 .sg-card--call-to-action-card .sg-card-segment--body {
   display: grid;
   grid-template-columns: var(--layout-call-to-action-card-content-columns);