Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
diff --git a/docs/styleguide/semantic-tokens-components.html b/docs/styleguide/semantic-tokens-components.html
index ac17736..1f4629d 100644
--- a/docs/styleguide/semantic-tokens-components.html
+++ b/docs/styleguide/semantic-tokens-components.html
@@ -122,7 +122,7 @@
| surface-call-to-action-card | surface-card-group | Fläche der Call-to-action-Card als dunkle Content-Card-Variante. |
| text-call-to-action-card | color-font-light | Textfarbe in der Call-to-action-Card. |
- | layout-call-to-action-card-width | calc(var(--dimension-public-content-width) * 0.5); dimension-public-content-width in der Fullwidth- und Drei-Spalten-Variante | Breite der Card im Page-Layout; die Fullwidth- und Drei-Spalten-Varianten nutzen die volle Content-Breite. |
+ | layout-call-to-action-card-width | 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 | Breite der Card im Page-Layout; die Wide-Variante nutzt 70 % der Content-Breite und ist rechtsbündig ausgerichtet, die Drei-Spalten-Variante nutzt die volle Content-Breite. |
| layout-call-to-action-card-content-columns | minmax(0, 1fr) max-content; minmax(0, 1fr) 30% max-content in der Drei-Spalten-Variante | Zweispaltiges Standardlayout oder dreispaltiges Layout mit flexibler Textspalte, 30% Formularfeldspalte und Inhaltsbreite der Aktion; auf kleinen Viewports einspaltig. |
| layout-call-to-action-card-content-gap | spacing-large | Abstand zwischen Text und Button. |
diff --git a/docs/styleguide/styles/44-components-public-page-components.css b/docs/styleguide/styles/44-components-public-page-components.css
index 01feb1d..e3a5420 100644
--- a/docs/styleguide/styles/44-components-public-page-components.css
+++ b/docs/styleguide/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;
}
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index fbb6767..94f3c7e 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -4687,8 +4687,9 @@ 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--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 {
@@ -4750,6 +4751,10 @@ main {
--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;
}
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index f5b3f3c..7a4e250 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": "6a9b3b1",
- "syncedAtUtc": "2026-08-07T10:56:44Z",
+ "styleguideCommit": "580ded6",
+ "syncedAtUtc": "2026-08-07T11:05:35Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide"
}
diff --git a/public/assets/styles.css b/public/assets/styles.css
index fbb6767..94f3c7e 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -4687,8 +4687,9 @@ 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--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 {
@@ -4750,6 +4751,10 @@ main {
--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;
}