From c06725b595fbf67d5bf85945d14ccb8fbf097185 Mon Sep 17 00:00:00 2001
From: Lars Gebhardt-Kusche <lars@kusche.berlin>
Date: Wed, 19 Nov 2025 01:30:49 +0100
Subject: [PATCH] so

---
 public/partials/header.php | 40 +++++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/public/partials/header.php b/public/partials/header.php
index c91ecd6..230534e 100644
--- a/public/partials/header.php
+++ b/public/partials/header.php
@@ -30,21 +30,33 @@
                 <a href="#faq"      class="hover:text-brand-primary transition-colors" data-i18n="nav_faq"></a>
             </nav>
 
-            <!-- Language Switch -->
-            <div class="relative">
-                <button id="langCurrent"
-                        class="text-xs uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary transition">
-                    <?= strtoupper($lang) ?>
-                </button>
+<!-- Language Switch: inline pills -->
+<div class="flex items-center gap-1 sm:gap-1.5 text-[11px] sm:text-xs font-medium uppercase tracking-[0.18em]">
+    <button type="button"
+            class="lang-pill px-1.5 py-0.5 rounded-full border border-transparent text-brand-muted hover:text-brand-primary hover:border-brand-border transition"
+            data-lang="de">
+        DE
+    </button>
+    <span class="text-brand-border/60">·</span>
+    <button type="button"
+            class="lang-pill px-1.5 py-0.5 rounded-full border border-transparent text-brand-muted hover:text-brand-primary hover:border-brand-border transition"
+            data-lang="en">
+        EN
+    </button>
+    <span class="text-brand-border/60">·</span>
+    <button type="button"
+            class="lang-pill px-1.5 py-0.5 rounded-full border border-transparent text-brand-muted hover:text-brand-primary hover:border-brand-border transition"
+            data-lang="it">
+        IT
+    </button>
+    <span class="text-brand-border/60">·</span>
+    <button type="button"
+            class="lang-pill px-1.5 py-0.5 rounded-full border border-transparent text-brand-muted hover:text-brand-primary hover:border-brand-border transition"
+            data-lang="fr">
+        FR
+    </button>
+</div>
 
-                <div id="langMenu"
-                     class="hidden absolute right-0 mt-2 w-28 rounded-md bg-brand-surface border border-brand-border shadow-lg p-2 text-xs">
-                    <a href="?lang=de" class="block py-1 hover:text-brand-primary">Deutsch</a>
-                    <a href="?lang=en" class="block py-1 hover:text-brand-primary">English</a>
-                    <a href="?lang=it" class="block py-1 hover:text-brand-primary">Italiano</a>
-                    <a href="?lang=fr" class="block py-1 hover:text-brand-primary">Français</a>
-                </div>
-            </div>
 
             <!-- Login Button / Avatar -->
             <button id="loginButton"