From 18f3a73a28a5c501700c01d537bfe82fda974dac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 18 Jun 2026 11:17:10 +0200
Subject: [PATCH] Use public portal header pattern

---
 patterns/page-layout-public.html | 36 ++++++++++++++++----------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/patterns/page-layout-public.html b/patterns/page-layout-public.html
index 25b7e35..81cbd82 100644
--- a/patterns/page-layout-public.html
+++ b/patterns/page-layout-public.html
@@ -11,27 +11,27 @@
   <h1 class="sg-main-heading">Layout – Page Layout Public</h1>
 
   <main aria-label="Page Layout Public">
-    <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>
+    <header class="sg-portal-header sg-portal-header--auth-segment" aria-label="Public Portal Header" data-pattern="portal-header">
+      <div class="sg-portal-header__auth-row" data-pattern-part="portal-header-action">
+        <div class="sg-tab-button-group" role="tablist" aria-label="Anmeldung" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header">
+          <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
+            Login
+          </button>
 
-        <div class="sg-portal-header__menu-wrap" data-pattern-part="portal-header-action">
-          <div class="sg-tab-button-group" role="tablist" aria-label="Anmeldung" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header">
-            <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
-              Login
-            </button>
-
-            <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
-              Registrieren
-            </button>
-          </div>
+          <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
+            Registrieren
+          </button>
         </div>
+      </div>
+
+      <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">Portalname</p>
 
         <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>
+          <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Inhalt 1</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">Inhalt 2</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">Inhalt 3</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">Inhalt 4</button>
         </nav>
       </div>
     </header>
@@ -137,7 +137,7 @@
 
   <script src="../scripts/help-icon-overlays.js"></script>
   <script>
-    document.querySelectorAll('.sg-portal-header__tabs, .sg-portal-header__menu-wrap .sg-tab-button-group').forEach((group) => {
+    document.querySelectorAll('.sg-portal-header__tabs, .sg-portal-header__auth-row .sg-tab-button-group, .sg-portal-header__menu-wrap .sg-tab-button-group').forEach((group) => {
       group.querySelectorAll('.sg-tab-button').forEach((button) => {
         button.addEventListener('click', () => {
           group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {