Scope pattern body styles to direct children

components/cards.html

@@ -118,6 +118,23 @@
     </article>
   </div>
 
+  <p class="sg-preview-label">Variante: Green Content Card</p>
+
+  <div class="sg-preview-area">
+    <article class="sg-card sg-card--content-card sg-card--content-card-green" data-component="content-card" aria-label="Green Content Card">
+      <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+        <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
+          <p class="sg-body sg-text-layout-pattern__column">
+            Footer links: Platzhaltertext fuer allgemeine Hinweise, Navigation oder Kontaktinformationen im zweispaltigen Layout.
+          </p>
+          <p class="sg-body sg-text-layout-pattern__column">
+            Footer rechts: Platzhaltertext fuer ergaenzende Angaben, rechtliche Hinweise oder sekundaere Footer-Inhalte im gleichen Raster.
+          </p>
+        </div>
+      </div>
+    </article>
+  </div>
+
   <p class="sg-preview-label">Variante: Footer Card</p>
 
   <div class="sg-preview-area">

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>
 

email-styleguide.css

@@ -0,0 +1,74 @@
+@import "./styles/01-foundations.css";
+
+/* E-Mail-Komponenten: separater Einstiegspunkt, nicht Teil des Portal-CSS */
+.sg-email-template-page {
+  background: var(--surface-object-card-lower-segment);
+}
+
+.sg-email-template-page .sg-main-heading,
+.sg-email-template-page .sg-preview-label {
+  color: var(--text-card-body);
+}
+
+.sg-email-preview-viewport {
+  width: var(--dimension-email-body-max-width);
+  background: var(--surface-object-card-lower-segment);
+}
+
+.sg-email-preview-body {
+  width: 100%;
+}
+
+.sg-email-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding:
+    var(--card-segment-padding-vertical)
+    var(--layout-page-content-inset-inline);
+  border: var(--border-none);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-none);
+  background: var(--surface-portal-header);
+}
+
+.sg-email-header__main {
+  width: 100%;
+}
+
+.sg-email-header__brand {
+  margin: 0;
+  color: var(--text-portal-header-brand);
+  font-size: var(--font-size-portal-header-brand);
+}
+
+.sg-email-card,
+.sg-email-footer-card {
+  width: calc(100% + (2 * var(--card-segment-padding-horizontal)));
+  margin-inline: calc(-1 * var(--card-segment-padding-horizontal));
+}
+
+.sg-email-footer-card {
+  margin-top: calc(var(--spacing-large) * 2);
+}
+
+.sg-email-footer-card .sg-body {
+  font-size: var(--font-size-small);
+}
+
+.sg-email-card .sg-card-segment--body > .sg-body {
+  color: var(--text-card-body);
+}
+
+.sg-email-card-action-segment {
+  align-items: flex-end;
+}
+
+.sg-email-template > .sg-heading-h1 {
+  color: var(--text-card-body);
+}
+
+.sg-email-template > .sg-email-template__intro {
+  color: var(--text-card-body);
+}

index.html

@@ -83,6 +83,27 @@
       </ul>
     </section>
 
+    <section class="sg-index-section">
+      <h2 class="sg-sub-heading">E-Mail-Templates</h2>
+
+      <h3 class="sg-sub-heading sg-section-h3">Foundations</h3>
+      <ul class="sg-index-list"></ul>
+
+      <h3 class="sg-sub-heading sg-section-h3">Komponenten</h3>
+      <ul class="sg-index-list">
+        <li><a href="./components/email-header.html">E-Mail Header</a></li>
+        <li><a href="./components/email-footer.html">E-Mail Footer</a></li>
+      </ul>
+
+      <h3 class="sg-sub-heading sg-section-h3">Patterns</h3>
+      <ul class="sg-index-list">
+        <li><a href="./patterns/general-email-template.html">General E-Mail-Template</a></li>
+      </ul>
+
+      <h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Templates</h3>
+      <ul class="sg-index-list"></ul>
+    </section>
+
   </main>
 
 </body>

patterns/general-email-template.html

@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – General E-Mail-Template</title>
+  <link rel="stylesheet" href="../styleguide.css">
+  <link rel="stylesheet" href="../email-styleguide.css">
+</head>
+<body class="sg-email-template-page">
+
+  <h1 class="sg-main-heading">General E-Mail-Template</h1>
+
+  <section id="pattern-general-email-template">
+    <p class="sg-preview-label">General E-Mail-Template</p>
+
+    <div class="sg-preview-area">
+      <div class="sg-email-preview-viewport">
+        <div class="sg-email-preview-body">
+          <header
+            class="sg-email-header"
+            aria-label="E-Mail Header"
+            data-component="email-header"
+            data-component-variant="logo-only"
+            data-derived-from="portal-header-without-options-row"
+          >
+            <div class="sg-email-header__main" data-component-part="main">
+              <p class="sg-email-header__brand" data-component-part="brand">ValueStockFinder</p>
+            </div>
+          </header>
+
+          <article
+            class="sg-transparent-card sg-page-layout-app__heading-block sg-email-template"
+            aria-label="E-Mail Inhalt"
+            data-pattern="general-email-template"
+            data-email-subject="Bitte bestätige deine Anmeldung"
+            data-email-preheader="Bestätige deine E-Mail-Adresse, um Updates von ValueStockFinder zu erhalten."
+          >
+            <h1 class="sg-heading-h1">Fast geschafft</h1>
+            <p class="sg-body sg-email-template__intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Integer nec odio. Praesent libero.<br>Sed cursus ante dapibus diam.</p>
+            <article class="sg-card sg-email-card" data-component="card" data-pattern-part="confirmation-card">
+              <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+                <div class="sg-strong">Bitte bestätige deine Anmeldung</div>
+              </div>
+
+              <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
+                <p class="sg-body">Bitte bestätige jetzt deine E-Mail-Adresse. Erst danach dürfen wir dir die gewünschten Informationen per E-Mail senden.</p>
+                <p class="sg-body">Falls du dich nicht selbst angemeldet hast, musst du nichts weiter tun.</p>
+              </div>
+
+              <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray sg-email-card-action-segment" data-component-part="card-action">
+                <button class="sg-interaction-element sg-button sg-button--process" type="button" data-component="button" data-component-variant="process" data-component-state="active">
+                  Anmeldung bestätigen
+                </button>
+              </div>
+            </article>
+
+            <article
+              class="sg-card sg-card--content-card sg-card--footer-card sg-email-footer-card"
+              data-component="content-card"
+              data-component-context="email-footer"
+              data-component-variant="not-subscribed"
+              data-pattern-part="email-footer"
+              aria-label="E-Mail Footer not subscribed"
+            >
+              <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+                <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
+                  <p class="sg-body sg-text-layout-pattern__column">
+                    © 2026 Valuestockfinder<br>
+                    Im Hochrain 2<br>
+                    8102 Oberengstringen<br>
+                    Switzerland
+                  </p>
+                  <div class="sg-text-layout-pattern__column">
+                    <p class="sg-body"><a class="sg-hyperlink" href="https://valuestockfinder.com/terms/" data-component="hyperlink">Allgemeine Geschäftsbedingungen</a></p>
+                    <p class="sg-body"><a class="sg-hyperlink" href="https://valuestockfinder.com/privacypolicy/" data-component="hyperlink">Datenschutz</a></p>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </article>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</body>
+</html>

patterns/notifications.html

@@ -199,11 +199,6 @@
           </p>
         </div>
 
-        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
-          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
-            zum Unternehmen
-          </button>
-        </div>
       </article>
 
       <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
@@ -213,11 +208,6 @@
           </p>
         </div>
 
-        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
-          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
-            zum Unternehmen
-          </button>
-        </div>
       </article>
 
       <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
@@ -227,11 +217,6 @@
           </p>
         </div>
 
-        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
-          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
-            zum Unternehmen
-          </button>
-        </div>
       </article>
 
       <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
@@ -241,11 +226,6 @@
           </p>
         </div>
 
-        <div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
-          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
-            zum Unternehmen
-          </button>
-        </div>
       </article>
 
     </div>

patterns/public-page-patterns.html

@@ -152,6 +152,26 @@
         </div>
       </div>
 
+      <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--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.
+              </p>
+
+              <div class="sg-call-to-action-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>
+            </div>
+          </article>
+        </div>
+      </div>
+
       <p class="sg-preview-label">pattern: CTA box right</p>
 
     <div class="sg-preview-area">
@@ -192,11 +212,11 @@
         </div>
       </div>
 
-      <p class="sg-preview-label">Pattern: Newsletter Form</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-call-to-action-card sg-call-to-action-card--align-right" data-component="call-to-action-card" aria-label="Call to action Card">
+          <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.
@@ -212,6 +232,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">

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); 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>
     </table>

styles/32-patterns-card-group-keyboard-nav.css

@@ -34,7 +34,7 @@
   background: var(--surface-content-block-card-content);
 }
 
-.sg-content-block-card-group__content .sg-body {
+.sg-content-block-card-group__content > .sg-body {
   margin: 0;
 }
 

styles/40-components-cards.css

@@ -38,6 +38,20 @@
   color: var(--color-font-light);
 }
 
+.sg-card.sg-card--content-card-green {
+  --surface-content-card-green: var(--color-signal-green);
+  --surface-card: var(--surface-content-card-green);
+  --surface-card-body: var(--surface-content-card-green);
+  --text-card-header: var(--color-font-light);
+  --text-card-body: var(--color-font-light);
+}
+
+.sg-card.sg-card--content-card-green .sg-card-segment--body,
+.sg-card.sg-card--content-card-green .sg-text-layout-pattern__column,
+.sg-card.sg-card--content-card-green .sg-body {
+  color: var(--text-card-body);
+}
+
 .sg-card.sg-card--footer-card {
   --surface-card: var(--color-black);
   --surface-card-body: var(--color-black);

styles/44-components-public-page-components.css

@@ -48,6 +48,16 @@
   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--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 {
   display: grid;
   grid-template-columns: var(--layout-call-to-action-card-content-columns);
@@ -69,6 +79,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 +112,16 @@
   .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--wide {
+    width: 100%;
+  }
+
+  .sg-card--call-to-action-card--three-column .sg-call-to-action-card__action {
+    justify-content: flex-end;
+  }
 }

styles/45-patterns-public-page-patterns.css

@@ -19,7 +19,8 @@
   color: var(--color-font-dark);
 }
 
-.sg-public-page-pattern-call-to-action-box--light .sg-card-segment--body {
+.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);
 }
@@ -125,17 +126,17 @@
   min-width: 0;
 }
 
-.sg-public-page-pattern-text-and-picture-right__text .sg-body {
+.sg-public-page-pattern-text-and-picture-right__text > .sg-body {
   margin: 0;
   color: var(--text-public-page-pattern-text-picture);
 }
 
-.sg-public-page-pattern-text-and-picture-fullwidth__text .sg-body {
+.sg-public-page-pattern-text-and-picture-fullwidth__text > .sg-body {
   margin: 0;
   color: var(--text-public-page-pattern-text-picture);
 }
 
-.sg-public-page-pattern-text-and-picture-left__text .sg-body {
+.sg-public-page-pattern-text-and-picture-left__text > .sg-body {
   margin: 0;
   color: var(--text-public-page-pattern-text-picture);
 }