From a058cc89207fa558290267579517b5d97feae004 Mon Sep 17 00:00:00 2001
From: Alex Mueller <alex@alex-mueller.biz>
Date: Sat, 12 Sep 2026 22:02:54 +0200
Subject: [PATCH] fix(navbar): responsive navbar scaling, 1240px drawer
 collapse, flex-shrink fix and mobile spacing v2.2.1

---
 admin.html         |   4 +-
 assets/app_auth.js |  27 ++++++--
 assets/style.css   | 163 +++++++++++++++++++++++++++++++++------------
 dashboard.html     |  10 ++-
 datenschutz.html   |   6 +-
 impressum.html     |   6 +-
 index.html         |  56 ++++++----------
 teacher.html       |   4 +-
 workspace.html     |   4 +-
 9 files changed, 182 insertions(+), 98 deletions(-)

diff --git a/admin.html b/admin.html
index f5a762a..e812cac 100644
--- a/admin.html
+++ b/admin.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Admin Panel | IT-Praxisportal</title>
   <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
-  <link rel="stylesheet" href="assets/style.css">
+  <link rel="stylesheet" href="assets/style.css?v=2.2.1">
   <style>
     body {
       background: #090d16;
@@ -438,7 +438,7 @@
     </div>
   </div>
 
-  <script src="assets/app_auth.js?v=2.1.0"></script>
+  <script src="assets/app_auth.js?v=2.2.1"></script>
   <script>
     let ALL_USERS = [];
 
diff --git a/assets/app_auth.js b/assets/app_auth.js
index b509952..0749463 100644
--- a/assets/app_auth.js
+++ b/assets/app_auth.js
@@ -350,9 +350,13 @@
       if (guestBtn) guestBtn.style.display = 'none'; // Gast-Button permanent ausblenden
 
       if (loggedIn && user) {
+        document.body.classList.add('logged-in');
         if (userSpan) {
           userSpan.style.display = 'inline-flex';
           userSpan.innerHTML = `👤 ${escapeHtml(user.name || user.email)}`;
+          userSpan.style.cursor = 'pointer';
+          userSpan.title = 'Zum Kurs-Dashboard wechseln';
+          userSpan.onclick = () => { window.location.href = 'dashboard.html'; };
         }
         if (loginBtn) {
           loginBtn.style.display = 'inline-flex';
@@ -369,7 +373,7 @@
         }
         if (registerBtn) {
           registerBtn.style.display = 'inline-flex';
-          registerBtn.innerHTML = '<span class="btn-text-desktop">💻 Zum Kurs-Dashboard</span><span class="btn-text-mobile">💻 Dashboard</span>';
+          registerBtn.innerHTML = '<span class="btn-text-desktop">💻 Zum Kurs-Dashboard</span><span class="btn-text-mobile">Dashboard</span>';
           registerBtn.style.background = '#10b981';
           registerBtn.removeAttribute('onclick');
           registerBtn.onclick = (e) => {
@@ -407,10 +411,18 @@
             landingUserName.innerText = user.name || user.email.split('@')[0];
           }
         }
-        if (navDashLink) navDashLink.style.display = 'inline-flex';
+        if (navDashLink) navDashLink.style.display = 'none'; // Keine doppelte Schaltfläche in Desktop-Leiste
         if (mobDashLink) mobDashLink.style.display = 'flex';
+        const mobLogoutBtn = document.getElementById('mobile-drawer-logout-btn');
+        if (mobLogoutBtn) mobLogoutBtn.style.display = 'flex';
+        const mobDrawerAuthActions = document.getElementById('mobile-drawer-auth-actions');
+        if (mobDrawerAuthActions) mobDrawerAuthActions.style.display = 'none';
       } else {
-        if (userSpan) userSpan.style.display = 'none';
+        document.body.classList.remove('logged-in');
+        if (userSpan) {
+          userSpan.style.display = 'none';
+          userSpan.onclick = null;
+        }
         if (loginBtn) {
           loginBtn.style.display = 'inline-flex';
           loginBtn.innerText = '🔑 Anmelden';
@@ -421,10 +433,15 @@
         }
         if (registerBtn) {
           registerBtn.style.display = 'inline-flex';
-          registerBtn.innerHTML = '<span class="btn-text-desktop">✨ Kostenlos registrieren</span><span class="btn-text-mobile">✨ Registrieren</span>';
+          registerBtn.innerHTML = '<span class="btn-text-desktop">✨ Kostenlos registrieren</span><span class="btn-text-mobile">Starten</span>';
           registerBtn.style.background = '#0284c7';
           registerBtn.onclick = () => window.openAuthModal('register', { allowClose: true });
         }
+        const mobDrawerAuthActions = document.getElementById('mobile-drawer-auth-actions');
+        if (mobDrawerAuthActions) mobDrawerAuthActions.style.display = 'flex';
+        if (mobDashLink) mobDashLink.style.display = 'none';
+        const mobLogoutBtn = document.getElementById('mobile-drawer-logout-btn');
+        if (mobLogoutBtn) mobLogoutBtn.style.display = 'none';
         if (heroPrimaryCta) {
           heroPrimaryCta.innerHTML = '<span>🚀 Jetzt kostenlos registrieren</span>';
           heroPrimaryCta.onclick = (e) => {
@@ -449,6 +466,8 @@
         if (landingBanner) landingBanner.style.display = 'none';
         if (navDashLink) navDashLink.style.display = 'none';
         if (mobDashLink) mobDashLink.style.display = 'none';
+        const mobLogoutBtn = document.getElementById('mobile-drawer-logout-btn');
+        if (mobLogoutBtn) mobLogoutBtn.style.display = 'none';
       }
 
       // 🔒 Strikter Rollen-Filter für Dozenten- und Admin-Funktionen
diff --git a/assets/style.css b/assets/style.css
index 27f0c44..b78d56a 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1054,41 +1054,50 @@ textarea:focus {
 .portal-header-bar {
   position: sticky;
   top: 0;
-  z-index: 50;
-  background: rgba(15, 23, 42, 0.85);
+  z-index: 100;
+  background: rgba(15, 23, 42, 0.94);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  padding: 12px 24px;
+  padding: 10px 20px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .portal-nav-container {
-  max-width: 1280px;
+  max-width: 1320px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
+  flex-wrap: nowrap;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .portal-brand {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
   text-decoration: none;
   color: white;
+  flex-shrink: 0;
+  min-width: 0;
+  white-space: nowrap;
 }
 
 .portal-brand-logo {
-  width: 38px;
-  height: 38px;
-  border-radius: 10px;
+  width: 34px;
+  height: 34px;
+  border-radius: 9px;
   background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(37, 99, 235, 0.2));
   border: 1px solid rgba(56, 189, 248, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 15px rgba(56, 189, 248, 0.15);
+  flex-shrink: 0;
 }
 
 .portal-brand-title {
@@ -1096,38 +1105,51 @@ textarea:focus {
   font-weight: 800;
   letter-spacing: -0.4px;
   color: #f8fafc;
-  line-height: 1.2;
+  line-height: 1;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .portal-brand-badge {
-  font-size: 0.68rem;
+  font-size: 0.65rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.8px;
   background: linear-gradient(90deg, #0284c7, #2563eb);
   color: white;
-  padding: 2px 6px;
+  padding: 2px 7px;
   border-radius: 4px;
   margin-left: 6px;
   vertical-align: middle;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .portal-nav-links {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 10px;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .portal-nav-link {
   color: #94a3b8;
   text-decoration: none;
-  font-size: 0.88rem;
+  font-size: 0.83rem;
   font-weight: 600;
-  transition: color 0.15s ease;
+  white-space: nowrap;
+  padding: 4px 7px;
+  border-radius: 6px;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
 }
 
 .portal-nav-link:hover, .portal-nav-link.active {
   color: #38bdf8;
+  background: rgba(56, 189, 248, 0.08);
 }
 
 .portal-hero {
@@ -1481,26 +1503,35 @@ html, body {
   max-width: 100vw;
 }
 
+/* Tablet & Smaller Desktop Navigation Collapse */
+@media (max-width: 1240px) {
+  .portal-nav-links {
+    display: none !important;
+  }
+  .mobile-menu-toggle {
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
 @media (max-width: 768px) {
   .portal-container {
     padding: 0 16px !important;
   }
 
   .portal-header-bar {
-    padding: 10px 14px;
+    padding: 9px 14px;
   }
 
   .portal-brand-logo {
-    width: 30px;
-    height: 30px;
+    width: 32px;
+    height: 32px;
   }
 
   .portal-brand-title {
-    font-size: 1rem;
-  }
-
-  .portal-nav-links {
-    display: none !important;
+    font-size: 1.05rem;
+    white-space: nowrap !important;
   }
 
   .portal-hero {
@@ -1744,34 +1775,50 @@ html, body {
     display: none !important; /* Hide alpha badge on small mobile screens */
   }
 
-  #nav-btn-login {
-    display: none !important; /* Im mobilen Drawer Menü verfügbar */
+  /* Logged-in State on Mobile: Clean single-line header with user badge + hamburger */
+  body.logged-in #nav-btn-login,
+  body.logged-in #nav-btn-register,
+  #nav-btn-logout {
+    display: none !important; /* All actions available via mobile drawer */
+  }
+
+  /* Logged-out State on Mobile: Hide Anmelden button from top header, keep Starten + hamburger */
+  body:not(.logged-in) #nav-btn-login {
+    display: none !important;
   }
 
   #nav-btn-register {
-    padding: 6px 10px !important;
+    padding: 5px 9px !important;
     font-size: 0.78rem !important;
     white-space: nowrap !important;
   }
 
   #nav-profile-pill {
-    display: none !important; /* Im mobilen Drawer Menü verfügbar */
+    display: inline-flex !important;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px !important;
+    max-width: 110px;
+    flex-shrink: 1;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.08) !important;
+    border-radius: 99px;
   }
 
   #nav-auth-user {
-    display: none !important;
+    display: inline-block !important;
+    font-size: 0.76rem !important;
+    max-width: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap !important;
+    color: #38bdf8 !important;
   }
 
   #nav-auth-role {
     display: none !important;
   }
 
-  #nav-btn-logout {
-    padding: 6px 10px !important;
-    font-size: 0.78rem !important;
-    white-space: nowrap !important;
-  }
-
   .portal-stats-bar {
     grid-template-columns: repeat(2, 1fr) !important;
     gap: 8px !important;
@@ -1782,6 +1829,43 @@ html, body {
   }
 }
 
+/* Ultra-compact Mobile Screen adjustments (<= 400px e.g. iPhone SE, 375px, 360px, 320px) */
+@media (max-width: 400px) {
+  .portal-header-bar {
+    padding: 7px 8px !important;
+  }
+  .portal-nav-container {
+    gap: 6px !important;
+  }
+  .portal-brand {
+    gap: 6px !important;
+  }
+  .portal-brand-logo {
+    width: 28px !important;
+    height: 28px !important;
+  }
+  .portal-brand-title {
+    font-size: 0.90rem !important;
+  }
+  #nav-auth-user {
+    max-width: 70px !important;
+    font-size: 0.72rem !important;
+  }
+  #nav-profile-pill {
+    max-width: 95px !important;
+    padding: 3px 6px !important;
+  }
+  #nav-btn-register {
+    padding: 4px 7px !important;
+    font-size: 0.72rem !important;
+  }
+  .mobile-menu-toggle {
+    width: 32px !important;
+    height: 32px !important;
+    font-size: 1.05rem !important;
+  }
+}
+
 /* Mobile Drawer & Hamburger Menu */
 .mobile-menu-toggle {
   display: none;
@@ -1789,10 +1873,13 @@ html, body {
   border: 1px solid rgba(255, 255, 255, 0.15);
   color: #f8fafc;
   font-size: 1.2rem;
-  padding: 6px 10px;
+  width: 36px;
+  height: 36px;
+  padding: 0;
   border-radius: 8px;
   cursor: pointer;
   line-height: 1;
+  flex-shrink: 0;
   transition: background 0.15s ease;
 }
 
@@ -1800,14 +1887,6 @@ html, body {
   background: rgba(255, 255, 255, 0.15);
 }
 
-@media (max-width: 768px) {
-  .mobile-menu-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
 .mobile-drawer {
   background: #090d16;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
diff --git a/dashboard.html b/dashboard.html
index 70ad935..88dbfe4 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -6,7 +6,7 @@
   <title>IT-Praxisportal | Lernbereich &amp; Kurs-Dashboard</title>
   <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
   <meta name="description" content="Dein persönlicher IT-Lernbereich: 16 Fachdisziplinen, 264 Module, Monaco Web-IDE, KMK-Lernfelder und IHK-Prüfungsvorbereitung.">
-  <link rel="stylesheet" href="assets/style.css">
+  <link rel="stylesheet" href="assets/style.css?v=2.2.1">
   <style>
     .portal-container {
       max-width: 1240px;
@@ -274,11 +274,15 @@
     <a href="#overview" class="mobile-drawer-link" onclick="toggleMobileMenu()">🚀 Übersicht</a>
     <a href="#katalog" class="mobile-drawer-link" onclick="toggleMobileMenu()">📚 Meine Kurse</a>
     <a href="#ihk-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">🎓 IHK AP1 &amp; AP2 Prüfung</a>
-    <a href="workspace.html?course=python" class="mobile-drawer-link" onclick="toggleMobileMenu()">💻 Web-IDE starten</a>
+    <a href="#zertifikate-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">🏆 Meine Zertifikate</a>
+    <a href="index.html?view=landing" class="mobile-drawer-link" onclick="toggleMobileMenu()">🌐 Zur Startseite</a>
     <a href="impressum.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">⚖️ Impressum</a>
     <a href="datenschutz.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">🔒 Datenschutzerklärung</a>
     <a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;">👨‍🏫 Dozenten-Portal</a>
     <a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171; font-weight: 800;">🛡️ Admin-Panel</a>
+    <button type="button" class="mobile-drawer-link" style="color: #f87171; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.25); text-align: left; cursor: pointer; border-radius: 6px; padding: 10px 14px; margin-top: 8px; font-weight: 700; width: 100%; display: flex; align-items: center; gap: 8px; font-size: 0.9rem;" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
+      🚪 Abmelden
+    </button>
   </div>
 
   <!-- 2. DASHBOARD WELCOME & LIVE METRICS -->
@@ -1185,7 +1189,7 @@
   </footer>
 
   <!-- Scripts -->
-  <script src="assets/app_auth.js?v=2.1.0"></script>
+  <script src="assets/app_auth.js?v=2.2.1"></script>
   <script src="assets/it_ausbildungen_manifest.js?v=2.1.0"></script>
   <script src="assets/courses_manifest.js?v=2.1.0"></script>
   <script src="assets/certificate.js?v=2.1.0"></script>
diff --git a/datenschutz.html b/datenschutz.html
index 7108c5f..fcd0fda 100644
--- a/datenschutz.html
+++ b/datenschutz.html
@@ -6,7 +6,7 @@
   <title>Datenschutzerklärung | IT-Praxisportal</title>
   <meta name="description" content="Datenschutzerklärung des IT-Praxisportals: Transparente Informationen zur DSGVO-konformen Datenverarbeitung, Zero-Tracking-Prinzip und Betroffenenrechte.">
   <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
-  <link rel="stylesheet" href="assets/style.css">
+  <link rel="stylesheet" href="assets/style.css?v=2.2.1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
@@ -22,7 +22,7 @@
         </div>
         <div>
           <span class="portal-brand-title">IT-Praxisportal</span>
-          <span class="portal-brand-badge">Praxis &bull; IHK &bull; Web-IDE</span>
+          <span class="portal-brand-badge">Datenschutz</span>
         </div>
       </a>
 
@@ -276,7 +276,7 @@
   </footer>
 
   <!-- Scripts -->
-  <script src="assets/app_auth.js?v=2.1.0"></script>
+  <script src="assets/app_auth.js?v=2.2.1"></script>
   <script>
     function toggleMobileMenu() {
       const drawer = document.getElementById('portal-mobile-drawer');
diff --git a/impressum.html b/impressum.html
index dccf297..a656c81 100644
--- a/impressum.html
+++ b/impressum.html
@@ -6,7 +6,7 @@
   <title>Impressum | IT-Praxisportal</title>
   <meta name="description" content="Gesetzliche Anbieterkennzeichnung und rechtliche Hinweise des IT-Praxisportals gemäß § 5 DDG und § 18 MStV.">
   <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
-  <link rel="stylesheet" href="assets/style.css">
+  <link rel="stylesheet" href="assets/style.css?v=2.2.1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
@@ -22,7 +22,7 @@
         </div>
         <div>
           <span class="portal-brand-title">IT-Praxisportal</span>
-          <span class="portal-brand-badge">Praxis &bull; IHK &bull; Web-IDE</span>
+          <span class="portal-brand-badge">Impressum</span>
         </div>
       </a>
 
@@ -230,7 +230,7 @@
   </footer>
 
   <!-- Scripts -->
-  <script src="assets/app_auth.js?v=2.1.0"></script>
+  <script src="assets/app_auth.js?v=2.2.1"></script>
   <script>
     function toggleMobileMenu() {
       const drawer = document.getElementById('portal-mobile-drawer');
diff --git a/index.html b/index.html
index e655554..98f3009 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,8 @@
   <meta property="og:description" content="Interaktives IT-Praxisportal mit Monaco Web-IDE, 216+ Modulen und 90-Minuten IHK-Prüfungssimulation. Kostenlos registrieren und Kurse im Dashboard wählen.">
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://alpha.it-praxisportal.de/">
-  <link rel="stylesheet" href="assets/style.css">
-  <script src="assets/app_auth.js?v=2.1.0"></script>
+  <link rel="stylesheet" href="assets/style.css?v=2.2.1">
+  <script src="assets/app_auth.js?v=2.2.1"></script>
   <script>
     // Sofortige automatische Weiterleitung für angemeldete Nutzer direkt ins Dashboard
     (function autoRedirectLoggedInUser() {
@@ -270,15 +270,14 @@
         <a href="#features-ide" class="portal-nav-link">💻 Web-IDE</a>
         <a href="#ihk-section" class="portal-nav-link">🎓 IHK Prüfung</a>
         <a href="#zielgruppen" class="portal-nav-link">👥 Für wen?</a>
-        <a href="dashboard.html" class="portal-nav-link" id="nav-dashboard-link" style="display: none; color: #34d399; font-weight: 800; background: rgba(52, 211, 153, 0.12); padding: 5px 12px; border-radius: 6px; border: 1px solid rgba(52, 211, 153, 0.3);">💻 Zum Kurs-Dashboard &rarr;</a>
         <a href="teacher.html" class="portal-nav-link" id="nav-teacher-link" style="display: none;">👨‍🏫 Dozenten</a>
         <a href="admin.html" class="portal-nav-link" id="nav-admin-link" style="display: none; color: #f87171; font-weight: 800;">🛡️ Admin</a>
       </nav>
 
-      <div style="display: flex; align-items: center; gap: 8px;">
-        <span id="nav-auth-user" style="display: none; font-size: 0.82rem; font-weight: 700; color: #38bdf8; background: rgba(56, 189, 248, 0.1); padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(56, 189, 248, 0.2);"></span>
-        <button type="button" class="btn" id="nav-btn-login" style="padding: 6px 12px; font-size: 0.82rem; background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.2);" onclick="window.openAuthModal('login', { allowClose: true })">🔑 Anmelden</button>
-        <button type="button" class="btn" id="nav-btn-register" style="padding: 6px 12px; font-size: 0.82rem; background: #0284c7; color: white;" onclick="window.openAuthModal('register', { allowClose: true })"><span class="btn-text-desktop">✨ Kostenlos registrieren</span><span class="btn-text-mobile">Starten</span></button>
+      <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0;">
+        <span id="nav-auth-user" style="display: none; font-size: 0.82rem; font-weight: 700; color: #38bdf8; background: rgba(56, 189, 248, 0.1); padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(56, 189, 248, 0.2); white-space: nowrap;"></span>
+        <button type="button" class="btn" id="nav-btn-login" style="padding: 6px 12px; font-size: 0.82rem; background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.2); white-space: nowrap;" onclick="window.openAuthModal('login', { allowClose: true })">🔑 Anmelden</button>
+        <button type="button" class="btn" id="nav-btn-register" style="padding: 6px 12px; font-size: 0.82rem; background: #0284c7; color: white; white-space: nowrap;" onclick="window.openAuthModal('register', { allowClose: true })"><span class="btn-text-desktop">✨ Kostenlos registrieren</span><span class="btn-text-mobile">Starten</span></button>
         <button type="button" id="portal-mobile-menu-btn" class="mobile-menu-toggle" aria-label="Menü umschalten" onclick="toggleMobileMenu()">
           <span>☰</span>
         </button>
@@ -288,6 +287,16 @@
 
   <!-- Mobile Navigation Drawer -->
   <div id="portal-mobile-drawer" class="mobile-drawer" style="display: none;">
+    <!-- Auth-Aktionen für mobile/tablet Besucher -->
+    <div id="mobile-drawer-auth-actions" style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);">
+      <button type="button" class="mobile-drawer-link" id="mobile-drawer-login-btn" style="color: #38bdf8; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.25); text-align: left; cursor: pointer; border-radius: 6px; padding: 10px 14px; font-weight: 700; width: 100%; display: flex; align-items: center; gap: 8px; font-size: 0.9rem;" onclick="toggleMobileMenu(); window.openAuthModal('login', { allowClose: true });">
+        🔑 Anmelden
+      </button>
+      <button type="button" class="mobile-drawer-link" id="mobile-drawer-register-btn" style="color: #ffffff; background: #0284c7; border: 1px solid #0284c7; text-align: left; cursor: pointer; border-radius: 6px; padding: 10px 14px; font-weight: 700; width: 100%; display: flex; align-items: center; gap: 8px; font-size: 0.9rem;" onclick="toggleMobileMenu(); window.openAuthModal('register', { allowClose: true });">
+        ✨ Kostenlos registrieren
+      </button>
+    </div>
+
     <a href="#hero" class="mobile-drawer-link" onclick="toggleMobileMenu()">🚀 Start &amp; Übersicht</a>
     <a href="#was-du-bekommst" class="mobile-drawer-link" onclick="toggleMobileMenu()">💎 Was du bekommst</a>
     <a href="#dashboard-spotlight" class="mobile-drawer-link" onclick="toggleMobileMenu()">📊 Features &amp; Vorschau</a>
@@ -298,6 +307,9 @@
     <a href="dashboard.html" class="mobile-drawer-link" id="mobile-drawer-dash-link" style="display: none; color: #34d399; font-weight: 800; background: rgba(52, 211, 153, 0.1); padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(52, 211, 153, 0.3);">💻 Zum Kurs-Dashboard &rarr;</a>
     <a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;">👨‍🏫 Dozenten-Portal</a>
     <a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171; font-weight: 800;">🛡️ Admin-Panel</a>
+    <button type="button" class="mobile-drawer-link" id="mobile-drawer-logout-btn" style="display: none; color: #f87171; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.25); text-align: left; cursor: pointer; border-radius: 6px; padding: 10px 14px; margin-top: 8px; font-weight: 700; width: 100%; align-items: center; gap: 8px; font-size: 0.9rem;" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
+      🚪 Abmelden
+    </button>
   </div>
 
   <!-- 2. HIGH-CONVERTING HERO SECTION -->
@@ -855,36 +867,6 @@
         }, 100);
       });
     }
-
-    document.addEventListener('DOMContentLoaded', () => {
-      // Prüfe Benutzer-Status
-      if (window.AUTH && window.AUTH.isLoggedIn()) {
-        const user = window.AUTH.getUser();
-        const banner = document.getElementById('landing-logged-in-banner');
-        const userNameEl = document.getElementById('landing-user-name');
-        const dashLink = document.getElementById('nav-dashboard-link');
-        const mobDashLink = document.getElementById('mobile-drawer-dash-link');
-        const mobTeacherLink = document.getElementById('mobile-drawer-teacher-link');
-        const mobAdminLink = document.getElementById('mobile-drawer-admin-link');
-
-        if (dashLink) dashLink.style.display = 'inline-flex';
-        if (mobDashLink) mobDashLink.style.display = 'flex';
-
-        if (user) {
-          if (user.role === 'admin') {
-            if (mobAdminLink) mobAdminLink.style.display = 'flex';
-            if (mobTeacherLink) mobTeacherLink.style.display = 'flex';
-          } else if (user.role === 'teacher') {
-            if (mobTeacherLink) mobTeacherLink.style.display = 'flex';
-          }
-        }
-
-        if (banner && user) {
-          banner.style.display = 'flex';
-          if (userNameEl) userNameEl.innerText = user.name || user.email.split('@')[0];
-        }
-      }
-    });
   </script>
 </body>
 </html>
diff --git a/teacher.html b/teacher.html
index 744e103..8293b38 100644
--- a/teacher.html
+++ b/teacher.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dozenten-Dashboard | IT-Praxisportal</title>
   <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
-  <link rel="stylesheet" href="assets/style.css">
+  <link rel="stylesheet" href="assets/style.css?v=2.2.1">
   <style>
     .class-card {
       background: #ffffff;
@@ -279,7 +279,7 @@
     </div>
   </div>
 
-  <script src="assets/app_auth.js?v=2.1.0"></script>
+  <script src="assets/app_auth.js?v=2.2.1"></script>
   <script src="assets/courses_manifest.js?v=2.1.0"></script>
   <script src="assets/it_ausbildungen_manifest.js?v=2.1.0"></script>
 
diff --git a/workspace.html b/workspace.html
index 1014ef2..eb2bfae 100644
--- a/workspace.html
+++ b/workspace.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>IT-Praxisportal Web-IDE | Interaktiver Arbeitsbereich</title>
   <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
-  <link rel="stylesheet" href="assets/style.css">
+  <link rel="stylesheet" href="assets/style.css?v=2.2.1">
   <style>
     body {
       margin: 0;
@@ -354,7 +354,7 @@
   <script src="assets/gamification.js"></script>
   <script src="assets/interpreter.js"></script>
   <script src="assets/certificate.js?v=2.1.0"></script>
-  <script src="assets/app_auth.js?v=2.1.0"></script>
+  <script src="assets/app_auth.js?v=2.2.1"></script>
   <script src="assets/parsons.js"></script>
   <script src="assets/code_guard.js"></script>
   <script src="assets/runners/runner_registry.js"></script>