diff --git a/docs/styleguide/patterns/public-page-patterns.html b/docs/styleguide/patterns/public-page-patterns.html
index ef39cc0..737cb67 100644
--- a/docs/styleguide/patterns/public-page-patterns.html
+++ b/docs/styleguide/patterns/public-page-patterns.html
@@ -335,6 +335,36 @@
+
pattern: call to action full witdh
+
+
+
+
+
+
+
+
+
+ - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+ - Lorem ipsum dolor sit amet, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
+ - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod ut labore et dolore.
+ - Lorem ipsum dolor sit amet, reprehenderit in voluptate velit esse cillum dolore eu fugiat.
+ - Lorem ipsum dolor sit amet, cupidatat non proident, sunt in culpa qui officia deserunt mollit.
+
+
+
+
+
+
+
+
+
pattern: picture full width
diff --git a/docs/styleguide/semantic-tokens-patterns.html b/docs/styleguide/semantic-tokens-patterns.html
index 7685d54..1055d13 100644
--- a/docs/styleguide/semantic-tokens-patterns.html
+++ b/docs/styleguide/semantic-tokens-patterns.html
@@ -23,6 +23,8 @@
| text-public-page-pattern-text-picture | color-font-light | Textfarbe des Patterns Pattern: text and picture right. |
| layout-public-page-pattern-call-to-action-box-width | calc(var(--dimension-public-content-width) * 0.5) | Breite der dunklen Public Call to Action Box im Public-Page-Pattern-Kontext. |
| surface-public-page-pattern-call-to-action-box-light | color-light-grey | Hintergrundfläche der Variante Pattern: Public Call to Action Box light. |
+ | surface-public-page-pattern-call-to-action-full-width-title | surface-portal-header | Hintergrundfläche des blauen Titelsegments im Pattern call to action full witdh. |
+ | text-public-page-pattern-call-to-action-full-width-title | text-portal-header-brand | Weiße Textfarbe der Titel- und Meldungssegmente im Pattern call to action full witdh. |
diff --git a/docs/styleguide/styles/45-patterns-public-page-patterns.css b/docs/styleguide/styles/45-patterns-public-page-patterns.css
index 6e5e6c3..7d11c26 100644
--- a/docs/styleguide/styles/45-patterns-public-page-patterns.css
+++ b/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);
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index 92b3985..f942bad 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -4862,17 +4862,25 @@ main {
.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 {
@@ -4883,6 +4891,10 @@ main {
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);
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index 16fcdd5..42031c7 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": "0ff7125",
- "syncedAtUtc": "2026-08-24T09:52:17Z",
+ "styleguideCommit": "ed1c450",
+ "syncedAtUtc": "2026-08-31T10:57:00Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide"
}
diff --git a/public/assets/styles.css b/public/assets/styles.css
index 92b3985..f942bad 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -4862,17 +4862,25 @@ main {
.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 {
@@ -4883,6 +4891,10 @@ main {
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);