feat: Refine Header UI, inline Firestore rules, and fix mobile layout bugs

src/App.vue

@@ -100,9 +100,6 @@ const t = (key: string) => {
   <main @click="triggerBSOD">
     
     <!-- Member Banner -->
-    <div v-if="isAllowed" class="member-banner">
-      Do bist a haumdaucher 🫵 🍻
-    </div>
 
     <Hero :theme="theme" :t="t" />
     <About :t="t" />
@@ -174,20 +171,4 @@ const t = (key: string) => {
   opacity: 0;
 }
 
-.member-banner {
-  background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
-  color: #555;
-  text-align: center;
-  padding: 10px;
-  font-weight: bold;
-  font-size: 1.2rem;
-  animation: slide-down 0.5s ease-out;
-  margin-top: 60px; /* Offset for fixed header */
-  border-bottom: 2px solid rgba(255,255,255,0.5);
-}
-
-@keyframes slide-down {
-  from { transform: translateY(-20px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
 </style>

src/components/layout/Header.vue

@@ -11,8 +11,9 @@ const emit = defineEmits(['update:theme', 'update:lang', 'open:game'])
 const themes = ['classic', 'unicorn', 'luxury', 'win95', 'nat']
 
 import { useAuth } from '../../composables/useAuth'
-import { watch } from 'vue'
+import { watch, ref } from 'vue'
 const { user, login, logout, error } = useAuth()
+const showSettings = ref(false)
 
 watch(user, (u) => {
   console.log("👤 Header: User changed:", u ? u.email : "null")
@@ -23,22 +24,37 @@ watch(user, (u) => {
 <template>
   <header class="fancy-glass header-top">
     <div class="container top-content">
-      <div class="logo-text">HAUMDAUCHER</div>
+      
+      <!-- Logo & Status Area -->
+      <div class="branding-area">
+        <div class="logo-text">HAUMDAUCHER</div>
+        <div v-if="user" class="status-message">
+          <span class="desktop-msg">{{ isNatUnlocked || isAllowed ? 'Du bist a Haumdaucher 🫵 🍻' : 'Vielleicht... bist du a Haumdaucher' }}</span>
+          <span class="mobile-msg">{{ isNatUnlocked || isAllowed ? 'Haumdaucher! 🫵' : 'Vielleicht... 🤔' }}</span>
+        </div>
+      </div>
+
       <div class="controls">
-        <!-- Auth Control -->
+        
+        <!-- Mobile Settings Toggle -->
+        <button class="settings-toggle" @click="showSettings = !showSettings">
+          ⚙️
+        </button>
+
+        <!-- Auth Control (Always Visible) -->
         <div class="auth-control">
           <div v-if="error" class="auth-error" :title="error">⚠️</div>
           <button v-if="!user" @click="login" class="login-btn">
             Login
           </button>
           <div v-else class="user-menu">
-            <img :src="user.photoURL || ''" class="avatar" :title="user.displayName || ''" />
             <button @click="logout" class="logout-btn">Exit</button>
+            <img :src="user.photoURL || ''" class="avatar" :title="user.displayName || ''" />
           </div>
         </div>
 
         <!-- Combined switch for better mobile spacing -->
-        <div class="control-wrapper">
+        <div class="control-wrapper" :class="{ 'show-mobile': showSettings }">
 
           <div class="switch-group">
             <button 
@@ -117,6 +133,12 @@ watch(user, (u) => {
   white-space: nowrap;
 }
 
+/* Base Layout */
+.branding-area {
+  display: flex;
+  align-items: center;
+}
+
 .controls {
   display: flex;
   align-items: center;
@@ -132,6 +154,58 @@ watch(user, (u) => {
   justify-content: flex-end;
 }
 
+.status-message {
+  font-size: 0.8rem;
+  font-weight: bold;
+  margin-left: 15px;
+  color: #555;
+  white-space: nowrap;
+}
+
+.mobile-msg { display: none; }
+.settings-toggle { display: none; } /* Hidden on desktop */
+
+/* Mobile adjustments */
+@media (max-width: 480px) {
+  .branding-area {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .status-message {
+    margin-left: 0;
+    margin-top: 2px;
+  }
+  
+  .desktop-msg { display: none; }
+  .mobile-msg { display: inline; }
+
+  /* Settings Toggle Logic */
+  .control-wrapper {
+    display: none; /* Hidden by default on mobile */
+    position: absolute;
+    top: 60px;
+    right: 10px;
+    background: rgba(255, 255, 255, 0.95);
+    padding: 10px;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  .control-wrapper.show-mobile {
+    display: flex;
+  }
+
+  .settings-toggle {
+    display: block;
+    font-size: 1.2rem;
+    padding: 5px;
+    margin-left: 5px;
+  }
+}
+
 .switch-group {
   display: flex;
   background: rgba(0,0,0,0.05);