From 82276bb4727f94fe4aade00e92e49419b1d7d01f 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:32:12 +0200
Subject: [PATCH] Add light public CTA box variant

---
 patterns/public-page-patterns.html          | 23 +++++++++++++++++++++
 semantic-tokens-patterns.html               |  1 +
 styles/01-foundations.css                   |  1 +
 styles/45-patterns-public-page-patterns.css |  4 ++++
 4 files changed, 29 insertions(+)

diff --git a/patterns/public-page-patterns.html b/patterns/public-page-patterns.html
index 95a910a..4062ad3 100644
--- a/patterns/public-page-patterns.html
+++ b/patterns/public-page-patterns.html
@@ -215,6 +215,29 @@
         </div>
       </div>
 
+      <p class="sg-preview-label">pattern: Public Call to Action Box light</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box sg-public-page-pattern-call-to-action-box--light" 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-light" aria-label="Public Call to Action Box light">
+            <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">
diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html
index 4e4c0be..fc74073 100644
--- a/semantic-tokens-patterns.html
+++ b/semantic-tokens-patterns.html
@@ -22,6 +22,7 @@
         <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>
+        <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>
       </tbody>
     </table>
 
diff --git a/styles/01-foundations.css b/styles/01-foundations.css
index 6decf84..0ce5967 100644
--- a/styles/01-foundations.css
+++ b/styles/01-foundations.css
@@ -193,6 +193,7 @@
   --surface-navigation-card-body: var(--color-white);
   --surface-content-block-card-title: var(--color-light-grey);
   --surface-content-block-card-content: var(--color-white);
+  --surface-public-page-pattern-call-to-action-box-light: var(--color-light-grey);
   --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);
diff --git a/styles/45-patterns-public-page-patterns.css b/styles/45-patterns-public-page-patterns.css
index c14b45e..af537a2 100644
--- a/styles/45-patterns-public-page-patterns.css
+++ b/styles/45-patterns-public-page-patterns.css
@@ -14,6 +14,10 @@
   margin-inline: auto;
 }
 
+.sg-public-page-pattern-call-to-action-box--light {
+  background: var(--surface-public-page-pattern-call-to-action-box-light);
+}
+
 .sg-public-page-pattern-call-to-action-box__action {
   display: flex;
 }