From f4632f654306a6aced3e4c43eceeaa27ff2de692 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:20:27 +0200
Subject: [PATCH] Add public portal header pattern

---
 patterns/portal-header.html | 51 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/patterns/portal-header.html b/patterns/portal-header.html
index 420d879..6392056 100644
--- a/patterns/portal-header.html
+++ b/patterns/portal-header.html
@@ -59,6 +59,55 @@
       </p>
     </article>
 
+    <section id="pattern-public-portal-header">
+      <h1 class="sg-main-heading">Pattern – Public Portal Header</h1>
+
+      <p class="sg-preview-label">Pattern: Public Portal Header</p>
+
+      <p class="sg-table-label sg-text-on-dark">
+        Desktop/Tablet: Header skaliert über die verfügbare Breite.
+      </p>
+
+      <p class="sg-table-label sg-text-on-dark">
+        Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Navigationstasten in einer eigenen Zeile darunter.
+      </p>
+
+      <article class="sg-portal-header-pattern-variant" aria-label="Public Portal Header ohne Options Row">
+        <p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
+          Variante: Public Portal Header ohne Options Row
+        </p>
+
+        <header class="sg-portal-header" aria-label="Public 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">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>
+              <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>
+
+        <p class="sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark">
+          Nächstes Element (Abstand nach unten: spacing-large)
+        </p>
+      </article>
+    </section>
+
     <article class="sg-portal-header-pattern-variant" aria-label="Portal Header mit Options Row">
       <p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
         Variante: Portal Header mit Options Row
@@ -197,7 +246,7 @@
 
   <script src="../scripts/help-icon-overlays.js"></script>
   <script>
-    document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
+    document.querySelectorAll('.sg-portal-header__tabs, .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) => {