Sync styleguide 2026.05.18.1

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

@@ -335,6 +335,36 @@
         </div>
       </div>
 
+      <p class="sg-preview-label">pattern: call to action full witdh</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-public-page-pattern-call-to-action-box sg-public-page-pattern-call-to-action-box--light sg-public-page-pattern-call-to-action-box--full-width" data-pattern="call-to-action-full-width" aria-label="Call to action full width">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+              <div class="sg-strong">Titel</div>
+            </div>
+            <!-- Optionales Meldungssegment: bei Bedarf ein-/ausblenden. -->
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow" data-component-part="card-header">
+              <div class="sg-strong">Hinweistext als Platzhalter</div>
+            </div>
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+              <ul class="sg-bullet-list">
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</li>
+                <li>Lorem ipsum dolor sit amet, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</li>
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod ut labore et dolore.</li>
+                <li>Lorem ipsum dolor sit amet, reprehenderit in voluptate velit esse cillum dolore eu fugiat.</li>
+                <li>Lorem ipsum dolor sit amet, cupidatat non proident, sunt in culpa qui officia deserunt mollit.</li>
+              </ul>
+            </div>
+            <div class="sg-card-segment sg-card-segment--body sg-public-page-pattern-call-to-action-box__action" data-component-part="card-action">
+              <button class="sg-interaction-element sg-button sg-button--process" type="button" data-component="button" data-component-variant="process" data-component-state="active">
+                Prozess Button
+              </button>
+            </div>
+          </article>
+        </div>
+      </div>
+
       <p class="sg-preview-label">pattern: picture full width</p>
 
     <div class="sg-preview-area">

docs/styleguide/semantic-tokens-patterns.html

@@ -23,6 +23,8 @@
         <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>
         <tr><td>layout-public-page-pattern-call-to-action-box-width</td><td>calc(var(--dimension-public-content-width) * 0.5)</td><td>Breite der dunklen Public Call to Action Box im Public-Page-Pattern-Kontext.</td></tr>
         <tr><td>surface-public-page-pattern-call-to-action-box-light</td><td>color-light-grey</td><td>Hintergrundfläche der Variante <code>Pattern: Public Call to Action Box light</code>.</td></tr>
+        <tr><td>surface-public-page-pattern-call-to-action-full-width-title</td><td>surface-portal-header</td><td>Hintergrundfläche des blauen Titelsegments im Pattern <code>call to action full witdh</code>.</td></tr>
+        <tr><td>text-public-page-pattern-call-to-action-full-width-title</td><td>text-portal-header-brand</td><td>Weiße Textfarbe der Titel- und Meldungssegmente im Pattern <code>call to action full witdh</code>.</td></tr>
       </tbody>
     </table>
 

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

@@ -16,17 +16,25 @@
 
 .sg-public-page-pattern-call-to-action-box--light {
   background: var(--surface-public-page-pattern-call-to-action-box-light);
-  color: var(--color-font-dark);
+  color: var(--text-content-block-card-content);
 }
 
 .sg-public-page-pattern-call-to-action-box--light
 > .sg-card-segment--body {
   background: var(--surface-public-page-pattern-call-to-action-box-light);
-  color: var(--color-font-dark);
+  color: var(--text-content-block-card-content);
 }
 
 .sg-public-page-pattern-call-to-action-box--light .sg-bullet-list {
-  color: var(--color-font-dark);
+  color: var(--text-content-block-card-content);
+}
+
+.sg-public-page-pattern-call-to-action-box--full-width {
+  --surface-public-page-pattern-call-to-action-full-width-title: var(--surface-portal-header);
+  --text-public-page-pattern-call-to-action-full-width-title: var(--text-portal-header-brand);
+  --surface-card-header-primary: var(--surface-public-page-pattern-call-to-action-full-width-title);
+  --text-card-header: var(--text-public-page-pattern-call-to-action-full-width-title);
+  width: 100%;
 }
 
 .sg-public-page-pattern-call-to-action-box__action {
@@ -37,6 +45,10 @@
   width: 100%;
 }
 
+.sg-public-page-pattern-call-to-action-box__action .sg-button--process {
+  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);