From 1552cbf04254402c7aae1602aca8126d5d1ea6c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 18 Jun 2026 10:25:31 +0200
Subject: [PATCH] Add auth segment to public portal header

---
 patterns/portal-header.html          | 28 ++++++++++++++--------------
 styles/20-patterns-portal-header.css | 16 ++++++++++++++++
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/patterns/portal-header.html b/patterns/portal-header.html
index 6392056..6ca3eca 100644
--- a/patterns/portal-header.html
+++ b/patterns/portal-header.html
@@ -77,22 +77,22 @@
           Variante: Public Portal Header ohne Options Row
         </p>
 
-        <header class="sg-portal-header" aria-label="Public Portal Header" data-pattern="portal-header">
+        <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>
+
+              <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>
 
-            <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>
-            </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">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>
@@ -246,7 +246,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) => {
diff --git a/styles/20-patterns-portal-header.css b/styles/20-patterns-portal-header.css
index 9382804..4902eae 100644
--- a/styles/20-patterns-portal-header.css
+++ b/styles/20-patterns-portal-header.css
@@ -20,6 +20,18 @@
   background: var(--surface-portal-header);
 }
 
+.sg-portal-header--auth-segment {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-small);
+}
+
+.sg-portal-header--auth-segment .sg-portal-header__auth-row {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
 .sg-portal-header__main {
   display: grid;
   flex: 1 1 auto;
@@ -49,6 +61,10 @@
   justify-self: end;
 }
 
+.sg-portal-header--auth-segment .sg-portal-header__main {
+  width: 100%;
+}
+
 .sg-portal-header-pattern-variant {
   margin-bottom: var(--spacing-large);
 }