com

public/assets/js/lang.js

@@ -517,6 +517,34 @@
     }
   };
 
+  const langMeta = {
+    de: { label: 'DE', flag: '🇩🇪' },
+    en: { label: 'EN', flag: '🇬🇧' }, // oder 🇺🇸 – Geschmackssache
+    it: { label: 'IT', flag: '🇮🇹' },
+    fr: { label: 'FR', flag: '🇫🇷' }
+  };
+
+  function updateLangCurrentLabel(lang) {
+    const meta = langMeta[lang] || { label: lang.toUpperCase(), flag: '' };
+    const labelNode =
+      document.getElementById('langCurrentLabel') ||
+      document.getElementById('langCurrent');
+
+    if (!labelNode) return;
+
+    if (meta.flag) {
+      labelNode.innerHTML =
+        '<span class="mr-1.5">' +
+        meta.flag +
+        '</span><span>' +
+        meta.label +
+        '</span>';
+    } else {
+      labelNode.textContent = meta.label;
+    }
+  }
+
+
   function getInitialLang() {
     const urlParams = new URLSearchParams(window.location.search);
     const paramLang = urlParams.get('lang');
@@ -563,11 +591,8 @@
     localStorage.setItem('usbcheck_lang', lang);
     applyTranslations(lang);
 
-    // Button-Label im Header aktualisieren
+    // Button-Label im Header (Flagge + Kürzel) aktualisieren
-    const currentLabel = document.getElementById('langCurrentLabel') || document.getElementById('langCurrent');
+    updateLangCurrentLabel(lang);
-    if (currentLabel) {
-      currentLabel.textContent = lang.toUpperCase();
-    }
 
     // Optional: URL-Parameter aktualisieren (ohne Reload)
     const url = new URL(window.location.href);
@@ -575,6 +600,7 @@
     window.history.replaceState({}, '', url.toString());
   }
 
+
   document.addEventListener('DOMContentLoaded', function () {
     const initialLang = getInitialLang();
     applyTranslations(initialLang);
@@ -584,12 +610,9 @@
     const langCurrentLabel = document.getElementById('langCurrentLabel');
     const langMenu = document.getElementById('langMenu');
 
-    // aktuelles Label für den Header-Button setzen
+    // aktuelles Label (Flagge + Kürzel) für den Header-Button setzen
-    if (langCurrentLabel) {
+    updateLangCurrentLabel(initialLang);
-      langCurrentLabel.textContent = initialLang.toUpperCase();
+
-    } else if (langCurrent) {
-      langCurrent.textContent = initialLang.toUpperCase();
-    }
 
     // Dropdown-Logik für Sprachauswahl
     if (langCurrent && langMenu) {

public/partials/header.php

@@ -42,26 +42,31 @@
 
     <div id="langMenu"
          class="hidden absolute right-0 mt-2 w-20 rounded-xl bg-brand-surface border border-brand-border shadow-lg py-1 text-xs">
-        <button type="button"
+                <button type="button"
-                class="lang-pill block w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
+                class="lang-pill flex items-center gap-2 w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
                 data-lang="de">
-            DE
+            <span class="text-base">🇩🇪</span>
+            <span>DE</span>
         </button>
         <button type="button"
-                class="lang-pill block w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
+                class="lang-pill flex items-center gap-2 w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
                 data-lang="en">
-            EN
+            <span class="text-base">🇬🇧</span>
+            <span>EN</span>
         </button>
         <button type="button"
-                class="lang-pill block w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
+                class="lang-pill flex items-center gap-2 w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
                 data-lang="it">
-            IT
+            <span class="text-base">🇮🇹</span>
+            <span>IT</span>
         </button>
         <button type="button"
-                class="lang-pill block w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
+                class="lang-pill flex items-center gap-2 w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
                 data-lang="fr">
-            FR
+            <span class="text-base">🇫🇷</span>
+            <span>FR</span>
         </button>
+
     </div>
 </div>