From 1042c8449f84b9dd143c132b20f5b648ac7d1ac7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 7 Jul 2026 14:37:03 +0200
Subject: [PATCH] Use text links in public portal header

---
 patterns/portal-header.html          | 12 ++++++------
 styles/20-patterns-portal-header.css |  4 ++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/patterns/portal-header.html b/patterns/portal-header.html
index 6ca3eca..6be983b 100644
--- a/patterns/portal-header.html
+++ b/patterns/portal-header.html
@@ -69,7 +69,7 @@
       </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.
+        Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Hauptmenüpunkte in einer eigenen Zeile darunter.
       </p>
 
       <article class="sg-portal-header-pattern-variant" aria-label="Public Portal Header ohne Options Row">
@@ -93,11 +93,11 @@
           <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">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 class="sg-portal-header__tabs" aria-label="Hauptnavigation" data-pattern-part="portal-header-navigation">
+              <a class="sg-hyperlink" href="#" aria-current="page" data-component="hyperlink">Inhalt 1</a>
+              <a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 2</a>
+              <a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 3</a>
+              <a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 4</a>
             </nav>
           </div>
         </header>
diff --git a/styles/20-patterns-portal-header.css b/styles/20-patterns-portal-header.css
index 4902eae..07f9cba 100644
--- a/styles/20-patterns-portal-header.css
+++ b/styles/20-patterns-portal-header.css
@@ -53,6 +53,10 @@
 
 .sg-portal-header__tabs {
   grid-area: tabs;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-small);
   width: 100%;
 }