From e9ee02eecf38490daaaaf9d5d45c13f8c261545c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 10 Jun 2026 17:16:58 +0200
Subject: [PATCH] Align register form to template structure

---
 patterns/vsf-register-step-1.html         | 68 ++++++++++++-----------
 styles/35-layouts-vsf-register-step-1.css |  4 +-
 2 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/patterns/vsf-register-step-1.html b/patterns/vsf-register-step-1.html
index 61df385..7739c56 100644
--- a/patterns/vsf-register-step-1.html
+++ b/patterns/vsf-register-step-1.html
@@ -49,43 +49,45 @@
       <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
         <p class="sg-body">Teste ValueStockFinder 7 Tage kostenlos und unverbindlich. Erhalte direkten Zugriff auf fundierte Aktienanalysen, klare Bewertungen und übersichtliche Entscheidungshilfen – ohne Verpflichtung.</p>
       </div>
-      <footer class="sg-card-segment sg-card-segment--gray sg-form-sections-card__actions-segment" aria-label="Registrierungsformular">
-        <form class="sg-form-sections-card" action="#" method="post">
-          <div class="sg-form-sections-card__body" data-pattern-part="form-body">
-            <h2 class="sg-strong sg-form-sections-card__title">Formular</h2>
+      <footer class="sg-card-segment sg-card-segment--gray sg-vsf-register-step-1__form-segment" aria-label="Registrierungsformular">
+        <div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Formular mit Abschnitten">
+          <form class="sg-form-sections-card" action="#" method="post">
+            <div class="sg-form-sections-card__body" data-pattern-part="form-body">
+              <h2 class="sg-strong sg-form-sections-card__title">Formular</h2>
 
-            <div class="sg-form-sections-card__field-group">
-              <label class="sg-labeled-input-row">
-                <span class="sg-label">E-Mail</span>
-                <input
-                  class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
-                  type="email"
-                  placeholder="E-Mail eingeben"
-                  aria-label="E-Mail"
-                  autocomplete="email"
-                >
-              </label>
+              <div class="sg-form-sections-card__field-group">
+                <label class="sg-labeled-input-row">
+                  <span class="sg-label">E-Mail</span>
+                  <input
+                    class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                    type="email"
+                    placeholder="E-Mail eingeben"
+                    aria-label="E-Mail"
+                    autocomplete="email"
+                  >
+                </label>
 
-              <label class="sg-labeled-input-row">
-                <span class="sg-label">Passwort</span>
-                <input
-                  class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
-                  type="password"
-                  placeholder="Passwort eingeben"
-                  aria-label="Passwort"
-                  autocomplete="new-password"
-                >
-              </label>
+                <label class="sg-labeled-input-row">
+                  <span class="sg-label">Passwort</span>
+                  <input
+                    class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                    type="password"
+                    placeholder="Passwort eingeben"
+                    aria-label="Passwort"
+                    autocomplete="new-password"
+                  >
+                </label>
+              </div>
             </div>
-          </div>
 
-          <footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
-            <div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
-              <button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Abbrechen</button>
-              <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Registrieren</button>
-            </div>
-          </footer>
-        </form>
+            <footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
+              <div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
+                <button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Abbrechen</button>
+                <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Registrieren</button>
+              </div>
+            </footer>
+          </form>
+        </div>
       </footer>
     </article>
   </main>
diff --git a/styles/35-layouts-vsf-register-step-1.css b/styles/35-layouts-vsf-register-step-1.css
index 5828c6b..e211212 100644
--- a/styles/35-layouts-vsf-register-step-1.css
+++ b/styles/35-layouts-vsf-register-step-1.css
@@ -21,6 +21,6 @@
   margin: 0 auto;
 }
 
-.sg-vsf-register-step-1 .sg-form-sections-card__actions-segment {
-  margin-top: var(--spacing-large);
+.sg-vsf-register-step-1__form-segment {
+  padding: 0;
 }