From 5d973118ac623d168de65a26271d8aca24a2b0d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Fri, 26 Jun 2026 15:07:25 +0200
Subject: [PATCH] Sync styleguide 2026.05.18.1

---
 .../patterns/public-page-patterns.html        | 25 ++++++++++++++++++-
 docs/styleguide/semantic-tokens-patterns.html |  1 +
 docs/styleguide/styles/01-foundations.css     |  1 +
 .../45-patterns-public-page-patterns.css      | 18 +++++++++++++
 public/assets/styleguide.upstream.css         | 19 ++++++++++++++
 public/assets/styleguide.upstream.meta.json   |  4 +--
 public/assets/styles.css                      | 19 ++++++++++++++
 7 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/docs/styleguide/patterns/public-page-patterns.html b/docs/styleguide/patterns/public-page-patterns.html
index 7a2ed2e..95a910a 100644
--- a/docs/styleguide/patterns/public-page-patterns.html
+++ b/docs/styleguide/patterns/public-page-patterns.html
@@ -192,7 +192,30 @@
         </div>
       </div>
 
-    <p class="sg-preview-label">pattern: picture full width</p>
+      <p class="sg-preview-label">pattern: Public Call to Action Box</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-public-page-pattern-call-to-action-box" data-pattern="public-call-to-action-box" aria-label="Public Call to Action Box">
+            <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--cta" type="button" data-component="button" data-component-variant="cta">
+                Call-to-action-Button
+              </button>
+            </div>
+          </article>
+        </div>
+      </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">
diff --git a/docs/styleguide/semantic-tokens-patterns.html b/docs/styleguide/semantic-tokens-patterns.html
index d6def3c..4e4c0be 100644
--- a/docs/styleguide/semantic-tokens-patterns.html
+++ b/docs/styleguide/semantic-tokens-patterns.html
@@ -21,6 +21,7 @@
         <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>
+        <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>
       </tbody>
     </table>
 
diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css
index 99f1f59..6decf84 100644
--- a/docs/styleguide/styles/01-foundations.css
+++ b/docs/styleguide/styles/01-foundations.css
@@ -195,6 +195,7 @@
   --surface-content-block-card-content: var(--color-white);
   --radius-picture-full-width: var(--radius-card);
   --layout-content-cards-group-gap: var(--spacing-small);
+  --layout-public-page-pattern-call-to-action-box-width: calc(var(--dimension-public-content-width) * 0.5);
   --layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr));
   --layout-page-layout-public-2-column-gap: var(--spacing-large);
   --surface-card-list-drawer: var(--color-background-purple);
diff --git a/docs/styleguide/styles/45-patterns-public-page-patterns.css b/docs/styleguide/styles/45-patterns-public-page-patterns.css
index 5c28f91..c14b45e 100644
--- a/docs/styleguide/styles/45-patterns-public-page-patterns.css
+++ b/docs/styleguide/styles/45-patterns-public-page-patterns.css
@@ -8,6 +8,20 @@
   width: 100%;
 }
 
+.sg-public-page-pattern-call-to-action-box {
+  width: var(--layout-public-page-pattern-call-to-action-box-width);
+  max-width: 100%;
+  margin-inline: auto;
+}
+
+.sg-public-page-pattern-call-to-action-box__action {
+  display: flex;
+}
+
+.sg-public-page-pattern-call-to-action-box__action .sg-button--cta {
+  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);
@@ -132,4 +146,8 @@
   .sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width {
     width: 100%;
   }
+
+  .sg-public-page-pattern-call-to-action-box {
+    width: 100%;
+  }
 }
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index c4b6da1..418e99d 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -195,6 +195,7 @@
   --surface-content-block-card-content: var(--color-white);
   --radius-picture-full-width: var(--radius-card);
   --layout-content-cards-group-gap: var(--spacing-small);
+  --layout-public-page-pattern-call-to-action-box-width: calc(var(--dimension-public-content-width) * 0.5);
   --layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr));
   --layout-page-layout-public-2-column-gap: var(--spacing-large);
   --surface-card-list-drawer: var(--color-background-purple);
@@ -4682,6 +4683,20 @@ main {
   width: 100%;
 }
 
+.sg-public-page-pattern-call-to-action-box {
+  width: var(--layout-public-page-pattern-call-to-action-box-width);
+  max-width: 100%;
+  margin-inline: auto;
+}
+
+.sg-public-page-pattern-call-to-action-box__action {
+  display: flex;
+}
+
+.sg-public-page-pattern-call-to-action-box__action .sg-button--cta {
+  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);
@@ -4806,5 +4821,9 @@ main {
   .sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width {
     width: 100%;
   }
+
+  .sg-public-page-pattern-call-to-action-box {
+    width: 100%;
+  }
 }
 
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index 19f65c9..5806439 100644
--- a/public/assets/styleguide.upstream.meta.json
+++ b/public/assets/styleguide.upstream.meta.json
@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "2cb6214",
-  "syncedAtUtc": "2026-06-25T07:33:41Z",
+  "styleguideCommit": "ef47af4",
+  "syncedAtUtc": "2026-06-26T13:07:25Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }
diff --git a/public/assets/styles.css b/public/assets/styles.css
index c4b6da1..418e99d 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -195,6 +195,7 @@
   --surface-content-block-card-content: var(--color-white);
   --radius-picture-full-width: var(--radius-card);
   --layout-content-cards-group-gap: var(--spacing-small);
+  --layout-public-page-pattern-call-to-action-box-width: calc(var(--dimension-public-content-width) * 0.5);
   --layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr));
   --layout-page-layout-public-2-column-gap: var(--spacing-large);
   --surface-card-list-drawer: var(--color-background-purple);
@@ -4682,6 +4683,20 @@ main {
   width: 100%;
 }
 
+.sg-public-page-pattern-call-to-action-box {
+  width: var(--layout-public-page-pattern-call-to-action-box-width);
+  max-width: 100%;
+  margin-inline: auto;
+}
+
+.sg-public-page-pattern-call-to-action-box__action {
+  display: flex;
+}
+
+.sg-public-page-pattern-call-to-action-box__action .sg-button--cta {
+  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);
@@ -4806,5 +4821,9 @@ main {
   .sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width {
     width: 100%;
   }
+
+  .sg-public-page-pattern-call-to-action-box {
+    width: 100%;
+  }
 }