From b6b305d084976b59f628f30370b54efdaf539731 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 10 Jun 2026 14:09:47 +0200
Subject: [PATCH] Restore register step header

---
 patterns/vsf-register-step-1.html         | 68 ++++++++++++++++++++++-
 styles/35-layouts-vsf-register-step-1.css |  8 ++-
 2 files changed, 74 insertions(+), 2 deletions(-)
diff --git a/patterns/vsf-register-step-1.html b/patterns/vsf-register-step-1.html
index 5467df9..8eeb135 100644
--- a/patterns/vsf-register-step-1.html
+++ b/patterns/vsf-register-step-1.html
@@ -6,7 +6,40 @@
   <title>Styleguide – Registriere dich bei ValueStockFinder</title>
   <link rel="stylesheet" href="../styleguide.css">
 </head>
-<body>
+<body class="sg-vsf-register-step-1-page">
+
+  <section id="pattern-portal-header">
+    <article class="sg-portal-header-pattern-variant" aria-label="Portal Header ohne Options Row">
+      <header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">
+        <div class="sg-portal-header__main" data-pattern-part="portal-header-main">
+          <p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
+
+          <div class="sg-portal-header__menu-wrap" data-pattern-part="portal-header-action">
+            <div class="sg-component-row">
+              <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+                Login
+              </button>
+
+              <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+                Registrieren
+              </button>
+            </div>
+          </div>
+
+          <nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
+            <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Übersicht</button>
+            <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Features</button>
+            <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Preise</button>
+            <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Firma der Woche</button>
+          </nav>
+        </div>
+      </header>
+
+      <div class="sg-transparent-card sg-portal-header-pattern-variant__next-element" aria-label="Registriere dich bei ValueStockFinder" data-component="transparent-card">
+        <h1 class="sg-heading-h1 sg-text-on-dark">Registriere dich bei ValueStockFinder</h1>
+      </div>
+    </article>
+  </section>
 
   <main class="sg-vsf-register-step-1">
     <article class="sg-card sg-object-card sg-vsf-register-step-1__card" data-pattern="object-card" aria-label="Registriere dich">
@@ -33,5 +66,38 @@
     </article>
   </main>
 
+  <script src="../scripts/help-icon-overlays.js"></script>
+  <script>
+    document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
+      group.querySelectorAll('.sg-tab-button').forEach((button) => {
+        button.addEventListener('click', () => {
+          group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
+            const isActive = otherButton === button;
+            otherButton.setAttribute('aria-selected', String(isActive));
+            otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
+          });
+        });
+      });
+    });
+
+    document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
+      const button = wrap.querySelector('.sg-sandwich-button');
+
+      button.addEventListener('click', (event) => {
+        event.stopPropagation();
+        const nextState = wrap.dataset.open !== 'true';
+        document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
+          const otherButton = otherWrap.querySelector('.sg-sandwich-button');
+          otherWrap.dataset.open = 'false';
+          if (otherButton) {
+            otherButton.setAttribute('aria-expanded', 'false');
+          }
+        });
+        wrap.dataset.open = String(nextState);
+        button.setAttribute('aria-expanded', String(nextState));
+      });
+    });
+  </script>
+
 </body>
 </html>
diff --git a/styles/35-layouts-vsf-register-step-1.css b/styles/35-layouts-vsf-register-step-1.css
index 9091462..f463b81 100644
--- a/styles/35-layouts-vsf-register-step-1.css
+++ b/styles/35-layouts-vsf-register-step-1.css
@@ -3,13 +3,19 @@
 /* ========================================================= */
 
 .sg-vsf-register-step-1 {
+  flex: 1;
   display: grid;
   place-items: center;
-  min-height: 100vh;
   padding: 1vh var(--layout-page-content-inset-inline) 0;
   box-sizing: border-box;
 }
 
+.sg-vsf-register-step-1-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
 .sg-vsf-register-step-1__card {
   width: 100%;
   max-width: var(--layout-object-card-max-width);
