diff --git a/email-styleguide.css b/email-styleguide.css
new file mode 100644
index 0000000..b9f816c
--- /dev/null
+++ b/email-styleguide.css
@@ -0,0 +1,53 @@
+@import "./styles/01-foundations.css";
+
+/* E-Mail-Komponenten: separater Einstiegspunkt, nicht Teil des Portal-CSS */
+.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-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);
+}
diff --git a/index.html b/index.html
index 8813f9e..52395f7 100644
--- a/index.html
+++ b/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>
diff --git a/patterns/general-email-template.html b/patterns/general-email-template.html
new file mode 100644
index 0000000..72c20e4
--- /dev/null
+++ b/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>
+
+  <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>
+
+            <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>
