From 580ded61446225f78a7b44ea80ead4fa23b1aca1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Fri, 7 Aug 2026 13:05:05 +0200
Subject: [PATCH] Adjust CTA wide variants to 70 percent

---
 patterns/public-page-patterns.html              | 8 ++++----
 semantic-tokens-components.html                 | 2 +-
 styles/44-components-public-page-components.css | 9 +++++++--
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/patterns/public-page-patterns.html b/patterns/public-page-patterns.html
index e694aa6..ef39cc0 100644
--- a/patterns/public-page-patterns.html
+++ b/patterns/public-page-patterns.html
@@ -152,11 +152,11 @@
         </div>
       </div>
 
-      <p class="sg-preview-label">pattern: CTA box left full width</p>
+      <p class="sg-preview-label">pattern: CTA box left wide 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-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">
+          <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--wide" data-component="call-to-action-card" data-component-variant="wide" aria-label="Call to action Card wide right">
             <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.
@@ -212,11 +212,11 @@
         </div>
       </div>
 
-      <p class="sg-preview-label">pattern: CTA small button box right full width</p>
+      <p class="sg-preview-label">pattern: CTA small button box right wide</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">
+          <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--wide sg-call-to-action-card--align-right" data-component="call-to-action-card" data-component-variant="wide" aria-label="CTA small button box right wide">
             <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.
diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index ac17736..1f4629d 100644
--- a/semantic-tokens-components.html
+++ b/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 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-width</td><td>calc(var(--dimension-public-content-width) * 0.5); calc(var(--dimension-public-content-width) * 0.7) in der Wide-Variante; dimension-public-content-width in der Drei-Spalten-Variante</td><td>Breite der Card im Page-Layout; die Wide-Variante nutzt 70&nbsp;% der Content-Breite und ist rechtsbündig ausgerichtet, die Drei-Spalten-Variante nutzt 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>
diff --git a/styles/44-components-public-page-components.css b/styles/44-components-public-page-components.css
index 01feb1d..e3a5420 100644
--- a/styles/44-components-public-page-components.css
+++ b/styles/44-components-public-page-components.css
@@ -53,8 +53,9 @@
   --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--wide {
+  --layout-call-to-action-card-width: calc(var(--dimension-public-content-width) * 0.7);
+  margin-left: auto;
 }
 
 .sg-card--call-to-action-card .sg-card-segment--body {
@@ -116,6 +117,10 @@
     --layout-call-to-action-card-content-columns: minmax(0, 1fr);
   }
 
+  .sg-card--call-to-action-card--wide {
+    width: 100%;
+  }
+
   .sg-card--call-to-action-card--three-column .sg-call-to-action-card__action {
     justify-content: flex-end;
   }