diff --git a/docs/styleguide/components/public-page-components.html b/docs/styleguide/components/public-page-components.html
index f83d81e..9a924b2 100644
--- a/docs/styleguide/components/public-page-components.html
+++ b/docs/styleguide/components/public-page-components.html
@@ -51,6 +51,24 @@
       </div>
     </section>
 
+    <section id="component-call-to-action-card-three-column">
+      <p class="sg-preview-label">Component: Call to action Card – Drei-Spalten-Variante</p>
+
+      <div class="sg-preview-area">
+        <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--three-column" data-component="call-to-action-card" data-component-variant="three-column" aria-label="Call to action Card Drei-Spalten-Variante">
+          <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">Mit dem Newsletter immer über neue Inhalte informiert bleiben.</p>
+            <div class="sg-labeled-input-row" data-component="single-line-input" data-component-state="inactive-selectable">
+              <input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="email" placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse" pattern="[^\s@]+@[^\s@]+\.[^\s@]{2,}" required>
+            </div>
+            <div class="sg-call-to-action-card__action">
+              <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" data-component="button" data-component-variant="process" data-component-state="inactive" disabled aria-disabled="true">Prozess Button</button>
+            </div>
+          </div>
+        </article>
+      </div>
+    </section>
+
     <section id="component-picture-full-width">
       <p class="sg-preview-label">Component: Picture Full Width</p>
 
diff --git a/docs/styleguide/patterns/public-page-patterns.html b/docs/styleguide/patterns/public-page-patterns.html
index b92bc28..69ff1d2 100644
--- a/docs/styleguide/patterns/public-page-patterns.html
+++ b/docs/styleguide/patterns/public-page-patterns.html
@@ -192,6 +192,63 @@
         </div>
       </div>
 
+      <p class="sg-preview-label">Pattern: Newsletter Form</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--three-column" data-component="call-to-action-card" data-component-variant="three-column" aria-label="Newsletter Form">
+            <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">
+                Mit dem Newsletter immer über neue Inhalte informiert bleiben.
+              </p>
+
+              <div class="sg-labeled-input-row" data-component="single-line-input" data-component-state="inactive-selectable">
+                <input
+                  class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                  type="email"
+                  placeholder="E-Mail-Adresse"
+                  aria-label="E-Mail-Adresse"
+                  pattern="[^\s@]+@[^\s@]+\.[^\s@]{2,}"
+                  required
+                >
+              </div>
+
+              <div class="sg-call-to-action-card__action">
+                <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="submit" data-component="button" data-component-variant="process" data-component-state="inactive" disabled aria-disabled="true">
+                  Prozess Button
+                </button>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+
+      <script>
+        (() => {
+          const newsletterForm = document.querySelector('.sg-card--call-to-action-card--three-column');
+          if (!newsletterForm) {
+            return;
+          }
+
+          const input = newsletterForm.querySelector('input[type="email"]');
+          const processButton = newsletterForm.querySelector('.sg-button--process');
+          if (!input || !processButton) {
+            return;
+          }
+
+          const updateProcessButtonState = () => {
+            const isActive = input.checkValidity();
+            processButton.disabled = !isActive;
+            processButton.setAttribute('aria-disabled', String(!isActive));
+            processButton.setAttribute('data-component-state', isActive ? 'active' : 'inactive');
+            processButton.classList.toggle('sg-button--process-inactive', !isActive);
+          };
+
+          input.addEventListener('input', updateProcessButtonState);
+          updateProcessButtonState();
+        })();
+      </script>
+
       <p class="sg-preview-label">pattern: Public Call to Action Box</p>
 
       <div class="sg-preview-area">
diff --git a/docs/styleguide/semantic-tokens-components.html b/docs/styleguide/semantic-tokens-components.html
index d2feeef..9ebe0e4 100644
--- a/docs/styleguide/semantic-tokens-components.html
+++ b/docs/styleguide/semantic-tokens-components.html
@@ -122,8 +122,8 @@
       <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)</td><td>Breite der Card im Page-Layout.</td></tr>
-        <tr><td>layout-call-to-action-card-content-columns</td><td>minmax(0, 1fr) max-content</td><td>Zweispaltiges Layout mit flexibler Textspalte und Buttonspalte in Buttonbreite.</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 Drei-Spalten-Variante</td><td>Breite der Card im Page-Layout; 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>
     </table>
diff --git a/docs/styleguide/styles/44-components-public-page-components.css b/docs/styleguide/styles/44-components-public-page-components.css
index 4a608a5..6b180df 100644
--- a/docs/styleguide/styles/44-components-public-page-components.css
+++ b/docs/styleguide/styles/44-components-public-page-components.css
@@ -48,6 +48,11 @@
   max-width: 100%;
 }
 
+.sg-card--call-to-action-card--three-column {
+  --layout-call-to-action-card-width: var(--dimension-public-content-width);
+  --layout-call-to-action-card-content-columns: minmax(0, 1fr) 30% max-content;
+}
+
 .sg-card--call-to-action-card .sg-card-segment--body {
   display: grid;
   grid-template-columns: var(--layout-call-to-action-card-content-columns);
@@ -69,6 +74,16 @@
   justify-content: flex-end;
 }
 
+.sg-card--call-to-action-card--three-column .sg-labeled-input-row {
+  min-width: 0;
+}
+
+.sg-card--call-to-action-card--three-column .sg-input-single-line {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
 .sg-call-to-action-card--align-right {
   margin-left: auto;
 }
@@ -92,4 +107,12 @@
   .sg-card--call-to-action-card {
     width: 100%;
   }
+
+  .sg-card--call-to-action-card--three-column {
+    --layout-call-to-action-card-content-columns: minmax(0, 1fr);
+  }
+
+  .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 33e67be..70f5139 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -4680,6 +4680,11 @@ main {
   max-width: 100%;
 }
 
+.sg-card--call-to-action-card--three-column {
+  --layout-call-to-action-card-width: var(--dimension-public-content-width);
+  --layout-call-to-action-card-content-columns: minmax(0, 1fr) 30% max-content;
+}
+
 .sg-card--call-to-action-card .sg-card-segment--body {
   display: grid;
   grid-template-columns: var(--layout-call-to-action-card-content-columns);
@@ -4701,6 +4706,16 @@ main {
   justify-content: flex-end;
 }
 
+.sg-card--call-to-action-card--three-column .sg-labeled-input-row {
+  min-width: 0;
+}
+
+.sg-card--call-to-action-card--three-column .sg-input-single-line {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
 .sg-call-to-action-card--align-right {
   margin-left: auto;
 }
@@ -4724,6 +4739,14 @@ main {
   .sg-card--call-to-action-card {
     width: 100%;
   }
+
+  .sg-card--call-to-action-card--three-column {
+    --layout-call-to-action-card-content-columns: minmax(0, 1fr);
+  }
+
+  .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 ef56e2d..9976202 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": "2b175ea",
-  "syncedAtUtc": "2026-07-07T12:48:48Z",
+  "styleguideCommit": "64272f5",
+  "syncedAtUtc": "2026-08-03T14:58:44Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }
diff --git a/public/assets/styles.css b/public/assets/styles.css
index 33e67be..70f5139 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -4680,6 +4680,11 @@ main {
   max-width: 100%;
 }
 
+.sg-card--call-to-action-card--three-column {
+  --layout-call-to-action-card-width: var(--dimension-public-content-width);
+  --layout-call-to-action-card-content-columns: minmax(0, 1fr) 30% max-content;
+}
+
 .sg-card--call-to-action-card .sg-card-segment--body {
   display: grid;
   grid-template-columns: var(--layout-call-to-action-card-content-columns);
@@ -4701,6 +4706,16 @@ main {
   justify-content: flex-end;
 }
 
+.sg-card--call-to-action-card--three-column .sg-labeled-input-row {
+  min-width: 0;
+}
+
+.sg-card--call-to-action-card--three-column .sg-input-single-line {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
 .sg-call-to-action-card--align-right {
   margin-left: auto;
 }
@@ -4724,6 +4739,14 @@ main {
   .sg-card--call-to-action-card {
     width: 100%;
   }
+
+  .sg-card--call-to-action-card--three-column {
+    --layout-call-to-action-card-content-columns: minmax(0, 1fr);
+  }
+
+  .sg-card--call-to-action-card--three-column .sg-call-to-action-card__action {
+    justify-content: flex-end;
+  }
 }
 
 /* ========================================================= */