feat(ui): streamline top navigation, implement user avatar dropdown, and enforce strict non-azubi course filtering

assets/app_auth.js

@@ -333,7 +333,7 @@
       const loggedIn = this.isLoggedIn();
       const user = this.getUser();
 
-      // Topbar Elemente in index.html
+      // Topbar Elemente in index.html & dashboard.html
       const userSpan = document.getElementById('nav-auth-user');
       const loginBtn = document.getElementById('nav-btn-login');
       const registerBtn = document.getElementById('nav-btn-register');
@@ -341,6 +341,24 @@
       const teacherLink = document.getElementById('nav-teacher-link');
       const heroPrimaryCta = document.getElementById('hero-primary-cta');
 
+      // Modern User Avatar Dropdown Elemente
+      const userDropdown = document.getElementById('portal-user-dropdown');
+      const userAvatar = document.getElementById('portal-user-avatar');
+      const userNameEl = document.getElementById('portal-user-name');
+      const ddFullName = document.getElementById('portal-dropdown-user-fullname');
+      const ddEmail = document.getElementById('portal-dropdown-user-email');
+      const ddBadge = document.getElementById('portal-dropdown-user-badge');
+      const ddTeacher = document.getElementById('dropdown-link-teacher');
+      const ddAdmin = document.getElementById('dropdown-link-admin');
+      const ddMgmtTitle = document.getElementById('dropdown-mgmt-title');
+      const ddMgmtDivider = document.getElementById('dropdown-teacher-divider');
+
+      // Mobile Drawer User Header
+      const mobUserBox = document.getElementById('mobile-drawer-user-info');
+      const mobAvatar = document.getElementById('mobile-drawer-avatar');
+      const mobUsername = document.getElementById('mobile-drawer-username');
+      const mobRole = document.getElementById('mobile-drawer-role');
+
       // Dashboard Links auf index.html / impressum / datenschutz
       const navDashLink = document.getElementById('nav-dashboard-link');
       const mobDashLink = document.getElementById('mobile-drawer-dash-link');
@@ -349,37 +367,72 @@
 
       if (guestBtn) guestBtn.style.display = 'none'; // Gast-Button permanent ausblenden
 
+      function computeInitials(str) {
+        if (!str) return 'IT';
+        const parts = str.trim().split(/\s+/);
+        if (parts.length >= 2) {
+          return (parts[0][0] + parts[1][0]).toUpperCase();
+        }
+        return str.substring(0, 2).toUpperCase();
+      }
+
+      const roleLabels = {
+        'admin': 'Administrator',
+        'teacher': 'Dozent / Ausbilder',
+        'student': 'Auszubildender',
+        'solo': 'Professional'
+      };
+
       if (loggedIn && user) {
         document.body.classList.add('logged-in');
+        const displayName = user.name || user.email.split('@')[0];
+        const initials = computeInitials(displayName);
+        const roleLabel = roleLabels[user.role] || 'Teilnehmer';
+        const profStr = user.profession ? ` • ${user.profession}` : '';
+
+        // 1. User Dropdown befüllen
+        if (userDropdown) {
+          userDropdown.style.display = 'inline-block';
+        }
+        if (userAvatar) userAvatar.innerText = initials;
+        if (userNameEl) userNameEl.innerText = displayName;
+        if (ddFullName) ddFullName.innerText = displayName;
+        if (ddEmail) ddEmail.innerText = user.email || '';
+        if (ddBadge) {
+          ddBadge.innerText = `${roleLabel}${profStr}`;
+        }
+
+        // Mobile Drawer User Header
+        if (mobUserBox) mobUserBox.style.display = 'flex';
+        if (mobAvatar) mobAvatar.innerText = initials;
+        if (mobUsername) mobUsername.innerText = displayName;
+        if (mobRole) mobRole.innerText = `${roleLabel}${profStr}`;
+
+        // Dozent / Admin im Dropdown
+        const hasTeacher = (user.role === 'teacher' || user.role === 'admin');
+        const hasAdmin = (user.role === 'admin');
+        if (ddTeacher) ddTeacher.style.display = hasTeacher ? 'flex' : 'none';
+        if (ddAdmin) ddAdmin.style.display = hasAdmin ? 'flex' : 'none';
+        if (ddMgmtTitle) ddMgmtTitle.style.display = hasTeacher ? 'block' : 'none';
+        if (ddMgmtDivider) ddMgmtDivider.style.display = hasTeacher ? 'block' : 'none';
+
+        const mobMgmtTitle = document.getElementById('mobile-drawer-mgmt-title');
+        const mobMgmtDivider = document.getElementById('mobile-drawer-mgmt-divider');
+        if (mobMgmtTitle) mobMgmtTitle.style.display = hasTeacher ? 'block' : 'none';
+        if (mobMgmtDivider) mobMgmtDivider.style.display = hasTeacher ? 'block' : 'none';
+
         if (userSpan) {
           userSpan.style.display = 'inline-flex';
-          userSpan.innerHTML = `${escapeHtml(user.name || user.email)}`;
+          userSpan.innerHTML = `${escapeHtml(displayName)}`;
           userSpan.style.cursor = 'pointer';
           userSpan.title = 'Zum Kurs-Dashboard wechseln';
           userSpan.onclick = () => { window.location.href = 'dashboard.html'; };
         }
         if (loginBtn) {
-          loginBtn.style.display = 'inline-flex';
+          loginBtn.style.display = 'none'; // Bei aktivem User-Dropdown wird der separate Login-Btn ausgeblendet
-          loginBtn.innerText = 'Abmelden';
-          loginBtn.style.background = 'rgba(239, 68, 68, 0.15)';
-          loginBtn.style.color = '#f87171';
-          loginBtn.style.borderColor = 'rgba(239, 68, 68, 0.3)';
-          loginBtn.removeAttribute('onclick');
-          loginBtn.onclick = () => {
-            if (confirm('Möchtest du dich wirklich abmelden?')) {
-              this.logout();
-            }
-          };
         }
         if (registerBtn) {
-          registerBtn.style.display = 'inline-flex';
+          registerBtn.style.display = 'none'; // Ebenso
-          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) => {
-            e.preventDefault();
-            window.location.href = 'dashboard.html';
-          };
         }
         if (heroPrimaryCta) {
           heroPrimaryCta.innerHTML = '<span>Zum Dashboard &amp; Kurse wählen &rarr;</span>';
@@ -408,10 +461,10 @@
         if (landingBanner) {
           landingBanner.style.display = 'flex';
           if (landingUserName) {
-            landingUserName.innerText = user.name || user.email.split('@')[0];
+            landingUserName.innerText = displayName;
           }
         }
-        if (navDashLink) navDashLink.style.display = 'none'; // Keine doppelte Schaltfläche in Desktop-Leiste
+        if (navDashLink) navDashLink.style.display = 'none';
         if (mobDashLink) mobDashLink.style.display = 'flex';
         const mobLogoutBtn = document.getElementById('mobile-drawer-logout-btn');
         if (mobLogoutBtn) mobLogoutBtn.style.display = 'flex';
@@ -419,6 +472,9 @@
         if (mobDrawerAuthActions) mobDrawerAuthActions.style.display = 'none';
       } else {
         document.body.classList.remove('logged-in');
+        if (userDropdown) userDropdown.style.display = 'none';
+        if (mobUserBox) mobUserBox.style.display = 'none';
+
         if (userSpan) {
           userSpan.style.display = 'none';
           userSpan.onclick = null;
@@ -744,6 +800,50 @@
     }
   }
 
+  // Globales User Avatar Dropdown Handling
+  window.toggleUserDropdown = function (event) {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    const menu = document.getElementById('portal-dropdown-menu');
+    const btn = document.getElementById('portal-user-btn');
+    if (!menu) return;
+    const isShown = menu.classList.contains('show');
+    if (isShown) {
+      menu.classList.remove('show');
+      if (btn) btn.setAttribute('aria-expanded', 'false');
+    } else {
+      menu.classList.add('show');
+      if (btn) btn.setAttribute('aria-expanded', 'true');
+    }
+  };
+
+  // Klick außerhalb schließt das Dropdown
+  document.addEventListener('click', (e) => {
+    const dd = document.getElementById('portal-user-dropdown');
+    const menu = document.getElementById('portal-dropdown-menu');
+    const btn = document.getElementById('portal-user-btn');
+    if (menu && menu.classList.contains('show')) {
+      if (!dd || !dd.contains(e.target)) {
+        menu.classList.remove('show');
+        if (btn) btn.setAttribute('aria-expanded', 'false');
+      }
+    }
+  });
+
+  // Escape-Taste schließt das Dropdown
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      const menu = document.getElementById('portal-dropdown-menu');
+      const btn = document.getElementById('portal-user-btn');
+      if (menu && menu.classList.contains('show')) {
+        menu.classList.remove('show');
+        if (btn) btn.setAttribute('aria-expanded', 'false');
+      }
+    }
+  });
+
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', initAuth);
   } else {

assets/style.css

@@ -2901,3 +2901,214 @@ tbody tr:hover {
   }
 }
 
+/* ==========================================================================
+   👤 MODERN USER AVATAR & DROPDOWN MENU (EDTECH & DEV STANDARD)
+   ========================================================================== */
+
+.portal-user-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.portal-user-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #1e293b;
+  border: 1px solid #334155;
+  color: #f8fafc;
+  padding: 5px 12px 5px 6px;
+  border-radius: 99px;
+  font-size: 0.84rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+  outline: none;
+}
+
+.portal-user-btn:hover,
+.portal-user-btn:focus-visible,
+.portal-user-btn[aria-expanded="true"] {
+  background: #334155;
+  border-color: #475569;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.portal-user-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #0284c7, #1d4ed8);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.74rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+
+.portal-user-name {
+  max-width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.84rem;
+  color: #f8fafc;
+}
+
+.portal-user-caret {
+  font-size: 0.65rem;
+  color: #94a3b8;
+  transition: transform 0.2s ease;
+}
+
+.portal-user-btn[aria-expanded="true"] .portal-user-caret {
+  transform: rotate(180deg);
+}
+
+.portal-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 270px;
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 12px;
+  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  padding: 8px;
+  z-index: 1050;
+  display: none;
+  animation: portalFadeSlide 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.portal-dropdown-menu.show {
+  display: block;
+}
+
+@keyframes portalFadeSlide {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.portal-dropdown-header {
+  padding: 10px 12px 12px 12px;
+  border-bottom: 1px solid #1e293b;
+  margin-bottom: 6px;
+}
+
+.portal-dropdown-name {
+  font-size: 0.92rem;
+  font-weight: 700;
+  color: #ffffff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.portal-dropdown-meta {
+  font-size: 0.76rem;
+  color: #94a3b8;
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.portal-dropdown-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 2px 7px;
+  border-radius: 4px;
+  background: rgba(56, 189, 248, 0.15);
+  color: #38bdf8;
+  border: 1px solid rgba(56, 189, 248, 0.3);
+  margin-top: 6px;
+}
+
+.portal-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  color: #cbd5e1;
+  text-decoration: none;
+  font-size: 0.84rem;
+  font-weight: 500;
+  border-radius: 8px;
+  transition: all 0.12s ease;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.portal-dropdown-item:hover,
+.portal-dropdown-item:focus-visible {
+  background: #1e293b;
+  color: #ffffff;
+  outline: none;
+}
+
+.portal-dropdown-item.danger {
+  color: #f87171;
+}
+
+.portal-dropdown-item.danger:hover,
+.portal-dropdown-item.danger:focus-visible {
+  background: rgba(239, 68, 68, 0.12);
+  color: #ef4444;
+}
+
+.portal-dropdown-divider {
+  height: 1px;
+  background: #1e293b;
+  margin: 6px 0;
+}
+
+.portal-dropdown-section-title {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: #64748b;
+  padding: 6px 12px 4px 12px;
+}
+
+/* Mobile Drawer Grouping Styles */
+.mobile-drawer-section-title {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: #94a3b8;
+  padding: 6px 12px 2px 12px;
+}
+
+.mobile-drawer-divider {
+  height: 1px;
+  background: rgba(255, 255, 255, 0.08);
+  margin: 4px 0;
+}
+
+.mobile-drawer-link.danger-link:hover {
+  background: rgba(239, 68, 68, 0.15) !important;
+  color: #fca5a5 !important;
+}
+
+

dashboard.html

@@ -229,10 +229,10 @@
 </head>
 <body style="background: #f8fafc; color: #0f172a; font-family: var(--font-sans); margin: 0; padding: 0;">
 
-  <!-- 1. STICKY DASHBOARD TOPBAR -->
+  <!-- 1. STICKY DASHBOARD TOPBAR (MODERN & SLIM) -->
   <header class="portal-header-bar">
     <div class="portal-nav-container">
-      <a href="dashboard.html" class="portal-brand">
+      <a href="dashboard.html" class="portal-brand" title="IT-Praxisportal Dashboard">
         <div class="portal-brand-logo">
           <img src="assets/favicon.svg" alt="IT-Praxisportal Logo" style="width: 22px; height: 22px;">
         </div>
@@ -242,28 +242,66 @@
         </div>
       </a>
 
+      <!-- Slim 3-to-4-item Primary Navigation -->
       <nav class="portal-nav-links">
-        <a href="#overview" class="portal-nav-link active">Übersicht</a>
+        <a href="#katalog" class="portal-nav-link" id="nav-katalog-link">📚 Kurse</a>
-        <a href="#katalog" class="portal-nav-link">Kurse</a>
+        <a href="workspace.html?course=python" class="portal-nav-link">💻 Web-IDE</a>
-        <a href="#ihk-section" class="portal-nav-link">IHK-Prüfung</a>
+        <a href="diagram_editor.html" class="portal-nav-link" title="Interaktives Diagramm-Studio (ER-Modell, Struktogramm nach DIN 66261, UML 2.5)">📐 Studio</a>
-        <a href="diagram_editor.html" class="portal-nav-link" title="Interaktives Diagramm-Studio (ER, Struktogramm, UML)">📐 Diagramme</a>
+        <a href="#ihk-section" class="portal-nav-link" id="nav-ihk-link" style="display: none;" title="IHK Prüfungsvorbereitung (AP1 &amp; AP2)">🎓 IHK-Prüfung</a>
-        <a href="workspace.html?course=python" class="portal-nav-link">Web-IDE</a>
-        <a href="#zertifikate-section" class="portal-nav-link">Zertifikate</a>
-        <a href="teacher.html" class="portal-nav-link" id="nav-teacher-link" style="display: none;">Dozentenbereich</a>
-        <a href="admin.html" class="portal-nav-link" id="nav-admin-link" style="display: none; color: #f87171;">Administration</a>
       </nav>
 
-      <!-- User Profile & Logout -->
+      <!-- Right: User Avatar Dropdown & Mobile Menu Button -->
       <div style="display: flex; align-items: center; gap: 10px;">
-        <div id="nav-profile-pill" style="display: flex; align-items: center; gap: 8px; background: #1e293b; padding: 4px 12px; border-radius: 6px; border: 1px solid #334155;">
+        <!-- Modern User Avatar Dropdown -->
-          <span id="nav-auth-user" style="font-size: 0.82rem; font-weight: 600; color: #f8fafc;">Lädt...</span>
+        <div class="portal-user-dropdown" id="portal-user-dropdown">
-          <span id="nav-auth-role" style="font-size: 0.68rem; font-weight: 600; background: #334155; color: #cbd5e1; padding: 2px 6px; border-radius: 4px; text-transform: uppercase;"></span>
+          <button type="button" class="portal-user-btn" id="portal-user-btn" aria-haspopup="true" aria-expanded="false" onclick="toggleUserDropdown(event)" title="Benutzerprofil und Einstellungen">
-          <span id="nav-auth-profession" style="display: none; font-size: 0.68rem; font-weight: 600; background: rgba(29, 78, 216, 0.2); color: #93c5fd; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; border: 1px solid rgba(29, 78, 216, 0.4);" title="Aktiver IT-Ausbildungsberuf"></span>
+            <span class="portal-user-avatar" id="portal-user-avatar">IT</span>
+            <span class="portal-user-name" id="portal-user-name">Benutzer</span>
+            <span class="portal-user-caret">▼</span>
+          </button>
+          <div class="portal-dropdown-menu" id="portal-dropdown-menu">
+            <div class="portal-dropdown-header">
+              <div class="portal-dropdown-name" id="portal-dropdown-user-fullname">Lädt...</div>
+              <div class="portal-dropdown-meta" id="portal-dropdown-user-email">user@portal.local</div>
+              <div class="portal-dropdown-badge" id="portal-dropdown-user-badge">Teilnehmer</div>
+            </div>
+            <a href="#katalog" class="portal-dropdown-item" onclick="toggleUserDropdown(event)">
+              <span>📚</span> <span>Kurskatalog &amp; Module</span>
+            </a>
+            <a href="#zertifikate-section" class="portal-dropdown-item" onclick="toggleUserDropdown(event)">
+              <span>🏆</span> <span>Meine Zertifikate &amp; Nachweise</span>
+            </a>
+            <button type="button" class="portal-dropdown-item" onclick="toggleUserDropdown(event); openProfessionSettings();">
+              <span>⚙️</span> <span>Ausbildungsberuf &amp; Modus</span>
+            </button>
+            <div class="portal-dropdown-divider" id="dropdown-teacher-divider" style="display: none;"></div>
+            <div class="portal-dropdown-section-title" id="dropdown-mgmt-title" style="display: none;">Verwaltung</div>
+            <a href="teacher.html" class="portal-dropdown-item" id="dropdown-link-teacher" style="display: none;">
+              <span>👨‍🏫</span> <span>Dozenten-Portal</span>
+            </a>
+            <a href="admin.html" class="portal-dropdown-item" id="dropdown-link-admin" style="display: none; color: #f87171;">
+              <span>🛡️</span> <span>Administration</span>
+            </a>
+            <div class="portal-dropdown-divider"></div>
+            <a href="index.html?view=landing" class="portal-dropdown-item">
+              <span>🌐</span> <span>Startseite (Landing Page)</span>
+            </a>
+            <a href="impressum.html" class="portal-dropdown-item">
+              <span>📄</span> <span>Impressum &amp; Datenschutz</span>
+            </a>
+            <div class="portal-dropdown-divider"></div>
+            <button type="button" class="portal-dropdown-item danger" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
+              <span>🚪</span> <span>Abmelden</span>
+            </button>
+          </div>
         </div>
-        <button type="button" class="btn" id="nav-btn-logout" style="padding: 6px 12px; font-size: 0.82rem; background: transparent; color: #94a3b8; border: 1px solid #334155; border-radius: 6px; font-weight: 500; cursor: pointer;">
+
-          <span class="btn-text-desktop">Abmelden</span>
+        <!-- Legacy elements kept for backward compatibility if scripts query them -->
-          <span class="btn-text-mobile">Abmelden</span>
+        <span id="nav-auth-user" style="display: none;"></span>
-        </button>
+        <span id="nav-auth-role" style="display: none;"></span>
+        <span id="nav-auth-profession" style="display: none;"></span>
+        <button type="button" id="nav-btn-logout" style="display: none;"></button>
+
         <button type="button" id="portal-mobile-menu-btn" class="mobile-menu-toggle" aria-label="Menü umschalten" onclick="toggleMobileMenu()">
           <span>☰</span>
         </button>
@@ -271,20 +309,40 @@
     </div>
   </header>
 
-  <!-- Mobile Navigation Drawer -->
+  <!-- Mobile Navigation Drawer (Structured & Grouped) -->
   <div id="portal-mobile-drawer" class="mobile-drawer" style="display: none;">
-    <a href="#overview" class="mobile-drawer-link" onclick="toggleMobileMenu()">Übersicht</a>
+    <!-- Mobile User Header -->
-    <a href="#katalog" class="mobile-drawer-link" onclick="toggleMobileMenu()">Kurse</a>
+    <div class="mobile-drawer-user" id="mobile-drawer-user-info" style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #1e293b; border-radius: 8px; margin-bottom: 8px;">
-    <a href="#ihk-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">IHK-Prüfungsvorbereitung</a>
+      <span class="portal-user-avatar" id="mobile-drawer-avatar">IT</span>
+      <div style="overflow: hidden;">
+        <div style="font-weight: 700; color: #ffffff; font-size: 0.9rem;" id="mobile-drawer-username">Benutzer</div>
+        <div style="font-size: 0.74rem; color: #94a3b8;" id="mobile-drawer-role">Teilnehmer</div>
+      </div>
+    </div>
+
+    <div class="mobile-drawer-section-title">Lernbereiche</div>
+    <a href="#katalog" class="mobile-drawer-link" onclick="toggleMobileMenu()">📚 Kurse &amp; Katalog</a>
+    <a href="workspace.html?course=python" class="mobile-drawer-link" onclick="toggleMobileMenu()">💻 Web-IDE (Monaco)</a>
     <a href="diagram_editor.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">📐 Diagramm-Studio (ER, SG, UML)</a>
-    <a href="#zertifikate-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">Zertifikate</a>
+    <a href="#ihk-section" class="mobile-drawer-link" id="mobile-drawer-ihk-link" style="display: none;" onclick="toggleMobileMenu()">🎓 IHK-Prüfungsvorbereitung</a>
-    <a href="index.html?view=landing" class="mobile-drawer-link" onclick="toggleMobileMenu()">Startseite</a>
+
-    <a href="impressum.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">Impressum</a>
+    <div class="mobile-drawer-divider"></div>
-    <a href="datenschutz.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">Datenschutzerklärung</a>
+    <div class="mobile-drawer-section-title">Mein Fortschritt</div>
-    <a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;">Dozenten-Portal</a>
+    <a href="#zertifikate-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">🏆 Zertifikate &amp; Nachweise</a>
-    <a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171;">Administration</a>
+    <button type="button" class="mobile-drawer-link" style="width: 100%; border: none; background: transparent; cursor: pointer; text-align: left;" onclick="toggleMobileMenu(); openProfessionSettings();">⚙️ Ausbildungsberuf / Modus</button>
-    <button type="button" class="mobile-drawer-link" style="color: #f87171; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); text-align: left; cursor: pointer; border-radius: 6px; padding: 10px 14px; margin-top: 6px; font-weight: 600; width: 100%; display: flex; align-items: center; font-size: 0.88rem;" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
+
-      Abmelden
+    <div class="mobile-drawer-divider" id="mobile-drawer-mgmt-divider" style="display: none;"></div>
+    <div class="mobile-drawer-section-title" id="mobile-drawer-mgmt-title" style="display: none;">Verwaltung</div>
+    <a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;" onclick="toggleMobileMenu()">👨‍🏫 Dozenten-Portal</a>
+    <a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171;" onclick="toggleMobileMenu()">🛡️ Administration</a>
+
+    <div class="mobile-drawer-divider"></div>
+    <a href="index.html?view=landing" class="mobile-drawer-link" onclick="toggleMobileMenu()">🌐 Startseite (Landing Page)</a>
+    <a href="impressum.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">📄 Impressum &amp; Datenschutz</a>
+
+    <div class="mobile-drawer-divider"></div>
+    <button type="button" class="mobile-drawer-link danger-link" style="color: #f87171; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); text-align: left; cursor: pointer; border-radius: 6px; padding: 10px 14px; margin-top: 4px; font-weight: 600; width: 100%; display: flex; align-items: center; gap: 8px; font-size: 0.88rem;" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
+      <span>🚪</span> <span>Abmelden</span>
     </button>
   </div>
 
@@ -385,73 +443,104 @@
       <button type="button" class="portal-tab-pill" id="tab-pill-data" onclick="filterCourses('data', this)">Datenbanken &amp; Web</button>
     </div>
 
-    <!-- AUSBILDUNGSPLAN & KMK-LERNFELDER BEREICH -->
+    <!-- AUSBILDUNGSPLAN & KMK-LERNFELDER BEREICH (DUAL-MODE: AZUBI VS PROFESSIONAL) -->
     <div class="apprenticeship-panel" id="azubi-panel">
-      <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 12px;">
+      <!-- 1. Nicht-Azubi / Professional Modus (Standard wenn kein IHK-Beruf) -->
-        <div style="display: flex; align-items: center; gap: 12px;">
+      <div id="non-azubi-mode-banner" style="display: none; padding: 6px 4px;">
-          <div style="width: 38px; height: 38px; border-radius: 8px; background: #0f172a; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: white;">
+        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
-            📋
+          <div style="display: flex; align-items: center; gap: 14px;">
+            <div style="width: 44px; height: 44px; border-radius: 10px; background: #eff6ff; color: #0284c7; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; border: 1px solid #bfdbfe; flex-shrink: 0;">
+              💼
+            </div>
+            <div>
+              <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
+                <h3 style="margin: 0; font-size: 1.08rem; font-weight: 800; color: #0f172a;">Professional- &amp; Weiterbildungs-Modus aktiv</h3>
+                <span style="font-size: 0.72rem; font-weight: 700; background: #e0f2fe; color: #0369a1; padding: 2px 8px; border-radius: 99px;">14 Praxis-Kurse</span>
+              </div>
+              <p style="margin: 3px 0 0 0; font-size: 0.86rem; color: #475569; max-width: 780px;">
+                Du lernst im praxisorientierten Entwickler-Modus (Python, Linux, Go, Rust, C#, SQL, Git, AD, DNS uvm.) ohne schulische IHK-Prüfungsmodule.
+              </p>
+            </div>
           </div>
-          <div>
+          <div style="display: flex; align-items: center; gap: 10px;">
-            <h3 style="margin: 0; font-size: 1.12rem; font-weight: 700; color: #0f172a;">Ausbildungsrahmenplan &amp; KMK-Lernfelder (2020)</h3>
+            <button type="button" class="btn" onclick="openProfessionSettings()" style="background: #0f172a; color: #ffffff; border: 1px solid #334155; padding: 8px 16px; font-size: 0.84rem; font-weight: 600; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;" title="IHK Ausbildungsberuf auswählen und Prüfungsmodule freischalten">
-            <p style="margin: 2px 0 0 0; font-size: 0.85rem; color: #64748b;">Lehrplan-Zuordnung nach IT-Ausbildungsberuf und Ausbildungsjahr (1.–3. Lehrjahr mit AP1/AP2 Relevanz).</p>
+              <span>🎓</span> <span>IHK-Ausbildungsmodus aktivieren</span>
-          </div>
-        </div>
-
-        <!-- Profession Dropdown & Save Button -->
-        <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 6px;">
-          <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
-            <label for="azubi-prof-select" style="font-size: 0.85rem; font-weight: 600; color: #475569;">Ausbildungsberuf:</label>
-            <select id="azubi-prof-select" onchange="onProfessionChanged()" style="padding: 7px 12px; font-size: 0.86rem; font-weight: 500; border-radius: 6px; border: 1px solid #cbd5e1; background: #ffffff; color: #0f172a; cursor: pointer;">
-              <option value="">-- Kein Ausbildungsberuf festgelegt --</option>
-              <option value="FISI">Fachinformatiker/in für Systemintegration (FISI)</option>
-              <option value="FIAE">Fachinformatiker/in für Anwendungsentwicklung (FIAE)</option>
-              <option value="FIDP">Fachinformatiker/in für Daten- und Prozessanalyse (FIDP)</option>
-              <option value="FIDV">Fachinformatiker/in für Digitale Vernetzung (FIDV)</option>
-              <option value="ITSE">IT-System-Elektroniker/in (ITSE)</option>
-              <option value="ITSM">Kaufleute für IT-System-Management (ITSM)</option>
-              <option value="KDM">Kaufleute für Digitalisierungsmanagement (KDM)</option>
-              <option value="ALL">Alle 7 IT-Berufe (Dozenten- &amp; Admin-Vollansicht)</option>
-            </select>
-            <button type="button" class="btn" id="btn-save-apprenticeship" onclick="saveApprenticeshipChoice()" style="background: #1d4ed8; color: white; padding: 7px 14px; font-size: 0.82rem; font-weight: 600; border-radius: 6px; border: none; cursor: pointer;" title="Beruf in deinem Account speichern">
-              Im Account speichern
             </button>
           </div>
-          <!-- Account Status Info Badge -->
+        </div>
-          <div id="azubi-prof-account-badge" style="font-size: 0.78rem; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569;">
+      </div>
-            <span id="azubi-prof-account-msg">Lade Berufsstatus...</span>
+
+      <!-- 2. IHK-Azubi Modus (Aktiv wenn ein IHK-Beruf gewählt ist) -->
+      <div id="azubi-mode-active" style="display: none;">
+        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 12px;">
+          <div style="display: flex; align-items: center; gap: 12px;">
+            <div style="width: 38px; height: 38px; border-radius: 8px; background: #0f172a; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: white;">
+              📋
+            </div>
+            <div>
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <h3 style="margin: 0; font-size: 1.12rem; font-weight: 700; color: #0f172a;">Ausbildungsrahmenplan &amp; KMK-Lernfelder (2020)</h3>
+                <span style="font-size: 0.72rem; font-weight: 700; background: #dbeafe; color: #1e40af; padding: 2px 8px; border-radius: 99px;">IHK-Modus</span>
+              </div>
+              <p style="margin: 2px 0 0 0; font-size: 0.85rem; color: #64748b;">Lehrplan-Zuordnung nach IT-Ausbildungsberuf und Ausbildungsjahr (1.–3. Lehrjahr mit AP1/AP2 Relevanz).</p>
+            </div>
+          </div>
+
+          <!-- Profession Dropdown & Save Button -->
+          <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 6px;">
+            <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
+              <label for="azubi-prof-select" style="font-size: 0.85rem; font-weight: 600; color: #475569;">Ausbildungsberuf:</label>
+              <select id="azubi-prof-select" onchange="onProfessionChanged()" style="padding: 7px 12px; font-size: 0.86rem; font-weight: 500; border-radius: 6px; border: 1px solid #cbd5e1; background: #ffffff; color: #0f172a; cursor: pointer;">
+                <option value="">-- Kein Ausbildungsberuf / Professional-Modus --</option>
+                <option value="FISI">Fachinformatiker/in für Systemintegration (FISI)</option>
+                <option value="FIAE">Fachinformatiker/in für Anwendungsentwicklung (FIAE)</option>
+                <option value="FIDP">Fachinformatiker/in für Daten- und Prozessanalyse (FIDP)</option>
+                <option value="FIDV">Fachinformatiker/in für Digitale Vernetzung (FIDV)</option>
+                <option value="ITSE">IT-System-Elektroniker/in (ITSE)</option>
+                <option value="ITSM">Kaufleute für IT-System-Management (ITSM)</option>
+                <option value="KDM">Kaufleute für Digitalisierungsmanagement (KDM)</option>
+                <option value="ALL">Alle 7 IT-Berufe (Dozenten- &amp; Admin-Vollansicht)</option>
+              </select>
+              <button type="button" class="btn" id="btn-save-apprenticeship" onclick="saveApprenticeshipChoice()" style="background: #1d4ed8; color: white; padding: 7px 14px; font-size: 0.82rem; font-weight: 600; border-radius: 6px; border: none; cursor: pointer;" title="Beruf in deinem Account speichern">
+                Im Account speichern
+              </button>
+            </div>
+            <!-- Account Status Info Badge -->
+            <div id="azubi-prof-account-badge" style="font-size: 0.78rem; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569;">
+              <span id="azubi-prof-account-msg">Lade Berufsstatus...</span>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- Year Filter Tabs & Assigned Filter -->
+        <!-- Year Filter Tabs & Assigned Filter -->
-      <div style="display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid #f1f5f9; padding-top: 14px;" id="azubi-year-tabs">
+        <div style="display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid #f1f5f9; padding-top: 14px;" id="azubi-year-tabs">
-        <button type="button" class="year-pill active" id="pill-year-all" onclick="filterByYear('all', this)">Alle Lehrjahre</button>
+          <button type="button" class="year-pill active" id="pill-year-all" onclick="filterByYear('all', this)">Alle Lehrjahre</button>
-        <button type="button" class="year-pill" id="pill-year-1" onclick="filterByYear(1, this)">1. Lehrjahr (LF 1–5)</button>
+          <button type="button" class="year-pill" id="pill-year-1" onclick="filterByYear(1, this)">1. Lehrjahr (LF 1–5)</button>
-        <button type="button" class="year-pill" id="pill-year-2" onclick="filterByYear(2, this)">2. Lehrjahr (LF 6–9 · AP1)</button>
+          <button type="button" class="year-pill" id="pill-year-2" onclick="filterByYear(2, this)">2. Lehrjahr (LF 6–9 · AP1)</button>
-        <button type="button" class="year-pill" id="pill-year-3" onclick="filterByYear(3, this)">3. Lehrjahr (LF 10–12 · AP2)</button>
+          <button type="button" class="year-pill" id="pill-year-3" onclick="filterByYear(3, this)">3. Lehrjahr (LF 10–12 · AP2)</button>
-        <button type="button" class="year-pill assigned-only-btn" id="btn-filter-assigned" onclick="filterByAssigned(this)">Zugewiesene Module</button>
+          <button type="button" class="year-pill assigned-only-btn" id="btn-filter-assigned" onclick="filterByAssigned(this)">Zugewiesene Module</button>
-      </div>
+        </div>
 
-      <!-- Dynamic Lernfeld Drawer / Infobox -->
+        <!-- Dynamic Lernfeld Drawer / Infobox -->
-      <div id="lernfeld-info-container" style="margin-top: 16px; padding: 14px 18px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; display: none;">
+        <div id="lernfeld-info-container" style="margin-top: 16px; padding: 14px 18px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; display: none;">
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px;">
-          <h4 style="margin: 0; font-size: 0.95rem; font-weight: 800; color: #1e293b;" id="lf-info-title">Lernfelder für dieses Lehrjahr</h4>
+            <h4 style="margin: 0; font-size: 0.95rem; font-weight: 800; color: #1e293b;" id="lf-info-title">Lernfelder für dieses Lehrjahr</h4>
-          <span style="font-size: 0.76rem; font-weight: 700; color: #0284c7; background: #e0f2fe; padding: 2px 8px; border-radius: 99px;" id="lf-info-badge">KMK Rahmenlehrplan</span>
+            <span style="font-size: 0.76rem; font-weight: 700; color: #0284c7; background: #e0f2fe; padding: 2px 8px; border-radius: 99px;" id="lf-info-badge">KMK Rahmenlehrplan</span>
+          </div>
+          <div id="lf-badges-list" style="display: flex; flex-wrap: wrap; gap: 10px;">
+            <!-- Dynamically populated LF chips -->
+          </div>
         </div>
-        <div id="lf-badges-list" style="display: flex; flex-wrap: wrap; gap: 10px;">
-          <!-- Dynamically populated LF chips -->
-        </div>
-      </div>
 
-      <!-- Assigned Courses Banner for Azubi -->
+        <!-- Assigned Courses Banner for Azubi -->
-      <div id="assigned-courses-alert" style="margin-top: 14px; padding: 10px 14px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; font-size: 0.84rem; color: #065f46; display: none; align-items: center; justify-content: space-between;">
+        <div id="assigned-courses-alert" style="margin-top: 14px; padding: 10px 14px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; font-size: 0.84rem; color: #065f46; display: none; align-items: center; justify-content: space-between;">
-        <div>
+          <div>
-          <span style="font-weight: 800;">👨‍🏫 Dozenten-Zuweisung aktiv:</span> <span id="assigned-courses-count-text">Dir wurden gezielt Kurse zugeteilt.</span>
+            <span style="font-weight: 800;">👨‍🏫 Dozenten-Zuweisung aktiv:</span> <span id="assigned-courses-count-text">Dir wurden gezielt Kurse zugeteilt.</span>
+          </div>
+          <button type="button" onclick="filterByAssigned(document.getElementById('btn-filter-assigned'))" style="background: #10b981; color: white; border: none; padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; cursor: pointer;">
+            Anzeigen &rarr;
+          </button>
         </div>
-        <button type="button" onclick="filterByAssigned(document.getElementById('btn-filter-assigned'))" style="background: #10b981; color: white; border: none; padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; cursor: pointer;">
-          Anzeigen &rarr;
-        </button>
       </div>
     </div>
 
@@ -1552,52 +1641,93 @@
     function updateProfessionStatusBadge() {
       const msgEl = document.getElementById('azubi-prof-account-msg');
       const badgeEl = document.getElementById('azubi-prof-account-badge');
-      const navProf = document.getElementById('nav-auth-profession');
       const statProf = document.getElementById('stat-user-prof-name');
-      if (!msgEl || !badgeEl) return;
+      const statProfLabel = document.querySelector('.portal-stat-card:nth-child(2) .portal-stat-label');
+      const statProfDesc = document.getElementById('stat-user-prof-desc');
+      const statYearName = document.getElementById('stat-user-year-name');
+      const statYearLabel = document.querySelector('.portal-stat-card:nth-child(3) .portal-stat-label');
+      const statYearDesc = document.getElementById('stat-user-level-desc');
 
-      if (navProf) {
+      const nonAzubiBanner = document.getElementById('non-azubi-mode-banner');
-        if (currentProfession && currentProfession !== 'ALL') {
+      const azubiActive = document.getElementById('azubi-mode-active');
-          navProf.innerText = currentProfession;
+      const ihkSection = document.getElementById('ihk-section');
-          navProf.style.display = 'inline-block';
+      const navIhk = document.getElementById('nav-ihk-link');
-        } else if (currentProfession === 'ALL') {
+      const mobIhk = document.getElementById('mobile-drawer-ihk-link');
-          navProf.innerText = 'ALLE BERUFE';
+      const pillIhk = document.getElementById('tab-pill-ihk');
-          navProf.style.display = 'inline-block';
-        } else {
-          navProf.style.display = 'none';
-        }
-      }
 
-      if (statProf) {
+      const isAzubiOrAdmin = (currentProfession && currentProfession !== '');
-        if (!currentProfession) {
-          statProf.innerText = 'Nicht festgelegt';
-        } else if (currentProfession === 'ALL') {
-          statProf.innerText = 'Alle IT-Berufe (Admin)';
-        } else {
-          statProf.innerText = PROFESSION_NAMES[currentProfession] || currentProfession;
-        }
-      }
 
-      if (!currentProfession) {
+      if (!isAzubiOrAdmin) {
-        badgeEl.style.background = '#fef2f2';
+        // --- NICHT-AZUBI / PROFESSIONAL MODUS ---
-        badgeEl.style.borderColor = '#fecaca';
+        if (nonAzubiBanner) nonAzubiBanner.style.display = 'block';
-        badgeEl.style.color = '#991b1b';
+        if (azubiActive) azubiActive.style.display = 'none';
-        msgEl.innerHTML = '<strong>Kein Ausbildungsberuf hinterlegt:</strong> Berufsbezogene AP2-Kurse sind ausgeblendet. Wähle oben deinen Beruf und klicke auf Speichern.';
+        if (ihkSection) ihkSection.style.display = 'none';
-      } else if (currentProfession === 'ALL') {
+        if (navIhk) navIhk.style.display = 'none';
-        badgeEl.style.background = '#f8fafc';
+        if (mobIhk) mobIhk.style.display = 'none';
-        badgeEl.style.borderColor = '#cbd5e1';
+        if (pillIhk) pillIhk.style.display = 'none';
-        badgeEl.style.color = '#1e293b';
+
-        msgEl.innerHTML = '<strong>Dozenten- &amp; Admin-Vollansicht:</strong> Alle IT-Ausbildungsberufe sind auf dem Dashboard freigeschaltet.';
+        if (statProf) statProf.innerText = 'Software & DevOps';
-      } else if (currentProfession === accountProfession) {
+        if (statProfLabel) statProfLabel.innerText = 'Lernschwerpunkt';
-        badgeEl.style.background = '#f0fdf4';
+        if (statProfDesc) statProfDesc.innerText = '14 Fachkurse aktiv';
-        badgeEl.style.borderColor = '#bbf7d0';
+        if (statYearName) statYearName.innerText = 'Praxisnah';
-        badgeEl.style.color = '#166534';
+        if (statYearLabel) statYearLabel.innerText = 'Lehrmethode';
-        msgEl.innerHTML = `<strong>Im Account hinterlegt:</strong> ${PROFESSION_NAMES[currentProfession] || currentProfession}. Es wird exklusiv dein passender AP2-Prüfungskurs angezeigt.`;
+        if (statYearDesc) statYearDesc.innerText = 'Monaco IDE & Unittests';
       } else {
-        badgeEl.style.background = '#fffbeb';
+        // --- AZUBI / ADMIN MODUS ---
-        badgeEl.style.borderColor = '#fde68a';
+        if (nonAzubiBanner) nonAzubiBanner.style.display = 'none';
-        badgeEl.style.color = '#92400e';
+        if (azubiActive) azubiActive.style.display = 'block';
-        msgEl.innerHTML = `<strong>Vorschau:</strong> ${PROFESSION_NAMES[currentProfession] || currentProfession} (noch nicht im Account gespeichert). Klicke auf <strong>Im Account speichern</strong>.`;
+        if (ihkSection) ihkSection.style.display = 'block';
+        if (navIhk) navIhk.style.display = 'inline-flex';
+        if (mobIhk) mobIhk.style.display = 'flex';
+        if (pillIhk) pillIhk.style.display = 'inline-flex';
+
+        if (statProf) {
+          statProf.innerText = (currentProfession === 'ALL') ? 'Alle IT-Berufe (Admin)' : (PROFESSION_NAMES[currentProfession] || currentProfession);
+        }
+        if (statProfLabel) statProfLabel.innerText = 'Ausbildungsberuf';
+        if (statProfDesc) statProfDesc.innerText = 'Gemäß IHK Rahmenlehrplan';
+        if (statYearLabel) statYearLabel.innerText = 'Ausbildungsstand';
+        if (statYearDesc) statYearDesc.innerText = 'IHK AP1 & AP2 Fokus';
+      }
+
+      if (badgeEl && msgEl) {
+        if (!currentProfession) {
+          badgeEl.style.background = '#eff6ff';
+          badgeEl.style.borderColor = '#bfdbfe';
+          badgeEl.style.color = '#1d4ed8';
+          msgEl.innerHTML = '<strong>Professional-Modus aktiv:</strong> 14 moderne Fachkurse sichtbar. Keine IHK-Schulmodule.';
+        } else if (currentProfession === 'ALL') {
+          badgeEl.style.background = '#f8fafc';
+          badgeEl.style.borderColor = '#cbd5e1';
+          badgeEl.style.color = '#1e293b';
+          msgEl.innerHTML = '<strong>Dozenten- &amp; Admin-Vollansicht:</strong> Alle IT-Ausbildungsberufe sind auf dem Dashboard freigeschaltet.';
+        } else if (currentProfession === accountProfession) {
+          badgeEl.style.background = '#f0fdf4';
+          badgeEl.style.borderColor = '#bbf7d0';
+          badgeEl.style.color = '#166534';
+          msgEl.innerHTML = `<strong>Im Account hinterlegt:</strong> ${PROFESSION_NAMES[currentProfession] || currentProfession}. Es wird exklusiv dein passender AP2-Prüfungskurs angezeigt.`;
+        } else {
+          badgeEl.style.background = '#fffbeb';
+          badgeEl.style.borderColor = '#fde68a';
+          badgeEl.style.color = '#92400e';
+          msgEl.innerHTML = `<strong>Vorschau:</strong> ${PROFESSION_NAMES[currentProfession] || currentProfession} (noch nicht im Account gespeichert). Klicke auf <strong>Im Account speichern</strong>.`;
+        }
+      }
+    }
+
+    // Helper: Öffnet die Berufs-Einstellungen
+    function openProfessionSettings() {
+      const nonAzubiBanner = document.getElementById('non-azubi-mode-banner');
+      const azubiActive = document.getElementById('azubi-mode-active');
+      if (nonAzubiBanner) nonAzubiBanner.style.display = 'none';
+      if (azubiActive) azubiActive.style.display = 'block';
+
+      const select = document.getElementById('azubi-prof-select');
+      if (select) {
+        select.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        select.focus();
+        select.style.boxShadow = '0 0 0 4px rgba(56, 189, 248, 0.4)';
+        setTimeout(() => { select.style.boxShadow = ''; }, 2500);
       }
     }
 
@@ -1623,18 +1753,31 @@
         const cardId = card.getAttribute('data-course-id');
         const cardTitle = (card.getAttribute('data-title') || '').toLowerCase();
 
-        // 1. Ausbildungsberuf-Prüfung:
+        // 1. Ausbildungsberuf- & Azubi-Prüfung:
-        // AP2 Kurse für Ausbildungsberufe sieht man NUR, wenn dieser Beruf im Account / Filter gewählt ist!
+        // STRIKTE TRENNUNG: Für Nicht-Azubis (kein Ausbildungsberuf gewählt / Quereinsteiger)
+        // werden KEINE IHK-Kurse (weder AP1 noch AP2) angezeigt!
         const requiredProf = AP2_PROFESSION_MAP[cardId];
+        const isIhkCourse = cardId.startsWith('ihk_') || cardCat === 'ihk';
+
         let matchesProfession = true;
-        if (requiredProf) {
+        if (!currentProfession || currentProfession === '') {
-          if (currentProfession === 'ALL') {
+          // Nicht-Azubi: Alle 8 IHK-Kurse strikt ausblenden!
-            matchesProfession = true;
+          if (isIhkCourse) {
-          } else if (currentProfession && currentProfession === requiredProf) {
-            matchesProfession = true;
-          } else {
             matchesProfession = false;
           }
+        } else if (currentProfession === 'ALL') {
+          // Dozenten / Admin Vollansicht: Alle Kurse sichtbar
+          matchesProfession = true;
+        } else {
+          // Azubi mit spezifischem Beruf (z.B. FISI, FIAE):
+          // Sieht das gemeinsame AP1 (ihk_ap1) und seinen spezifischen AP2-Kurs
+          if (cardId === 'ihk_ap1') {
+            matchesProfession = true;
+          } else if (cardId.startsWith('ihk_ap2_')) {
+            matchesProfession = (requiredProf === currentProfession);
+          } else {
+            matchesProfession = true; // Alle 14 Fachkurse
+          }
         }
 
         // 2. Category check
@@ -1647,7 +1790,7 @@
         let matchesYearOrAssigned = true;
         if (currentYear === 'assigned') {
           matchesYearOrAssigned = userAssignedCourses.includes(cardId);
-        } else if (yearAllowedCourses !== null) {
+        } else if (yearAllowedCourses !== null && isIhkCourse) {
           matchesYearOrAssigned = yearAllowedCourses.includes(cardId);
         }
 
@@ -1671,7 +1814,9 @@
       const ihkCards = document.querySelectorAll('.ihk-quick-card');
       ihkCards.forEach(card => {
         const prof = card.getAttribute('data-ihk-profession');
-        if (!prof || prof === 'common') {
+        if (!currentProfession || currentProfession === '') {
+          card.style.display = 'none';
+        } else if (!prof || prof === 'common') {
           card.style.display = 'block';
         } else if (currentProfession === 'ALL') {
           card.style.display = 'block';
@@ -1694,8 +1839,21 @@
       const pillCoding = document.getElementById('tab-pill-coding');
       const pillData = document.getElementById('tab-pill-data');
 
+      if (!currentProfession || currentProfession === '') {
+        if (pillIhk) pillIhk.style.display = 'none';
+        if (currentCategory === 'ihk') {
+          currentCategory = 'all';
+          document.querySelectorAll('.portal-tab-pill').forEach(btn => btn.classList.remove('active'));
+          if (pillAll) pillAll.classList.add('active');
+        }
+      } else {
+        if (pillIhk) {
+          pillIhk.style.display = 'inline-flex';
+          pillIhk.innerText = `IHK Prüfungsvorbereitung (${counts.ihk})`;
+        }
+      }
+
       if (pillAll) pillAll.innerText = `Alle Fachbereiche (${counts.all})`;
-      if (pillIhk) pillIhk.innerText = `IHK Prüfungsvorbereitung (${counts.ihk})`;
       if (pillDevops) pillDevops.innerText = `DevOps & Infrastruktur (${counts.devops})`;
       if (pillCoding) pillCoding.innerText = `Softwaretechnik & Systems (${counts.coding})`;
       if (pillData) pillData.innerText = `Datenbanken & Web (${counts.data})`;
@@ -1715,7 +1873,7 @@
       if (element) element.classList.add('active');
       currentYear = year;
       const statYear = document.getElementById('stat-user-year-name');
-      if (statYear) {
+      if (statYear && currentProfession) {
         statYear.innerText = (year === 'all') ? 'Alle Lehrjahre' : `${year}. Ausbildungsjahr`;
       }
       renderLernfelder(currentProfession, year);
@@ -1728,22 +1886,22 @@
       if (element) element.classList.add('active');
       currentYear = 'assigned';
       const statYear = document.getElementById('stat-user-year-name');
-      if (statYear) {
+      if (statYear && currentProfession) {
-        statYear.innerText = 'Dozenten-Zuweisung';
+        statYear.innerText = 'Zugewiesen';
       }
       renderLernfelder(currentProfession, 'assigned');
       applyAllFilters();
     }
 
-    // 3d. On Profession Changed
+    // 3d. Profession Changed Event
     function onProfessionChanged() {
       const select = document.getElementById('azubi-prof-select');
-      if (select) {
+      currentProfession = select ? select.value : '';
-        currentProfession = select.value;
+      updateProfessionStatusBadge();
-        updateProfessionStatusBadge();
+      if (currentProfession) {
         renderLernfelder(currentProfession, currentYear);
-        applyAllFilters();
       }
+      applyAllFilters();
     }
 
     // 3e. Save Apprenticeship Choice to Backend
@@ -1947,22 +2105,27 @@
           userAssignedCourses = user.assigned_courses;
         }
 
-        // Dozenten / Admin Nav Links
+        // Dozenten / Admin Nav Links in Dropdown & Drawer
-        if (user.role === 'admin') {
+        const hasAdmin = (user.role === 'admin');
-          const al = document.getElementById('nav-admin-link');
+        const hasTeacher = (user.role === 'teacher' || user.role === 'admin');
-          if (al) al.style.display = 'inline-flex';
+
-          const tl = document.getElementById('nav-teacher-link');
+        const ddAdmin = document.getElementById('dropdown-link-admin');
-          if (tl) tl.style.display = 'inline-flex';
+        if (ddAdmin) ddAdmin.style.display = hasAdmin ? 'flex' : 'none';
-          const mAl = document.getElementById('mobile-drawer-admin-link');
+        const ddTeacher = document.getElementById('dropdown-link-teacher');
-          if (mAl) mAl.style.display = 'flex';
+        if (ddTeacher) ddTeacher.style.display = hasTeacher ? 'flex' : 'none';
-          const mTl = document.getElementById('mobile-drawer-teacher-link');
+        const ddMgmt = document.getElementById('dropdown-mgmt-title');
-          if (mTl) mTl.style.display = 'flex';
+        if (ddMgmt) ddMgmt.style.display = hasTeacher ? 'block' : 'none';
-        } else if (user.role === 'teacher') {
+        const ddDiv = document.getElementById('dropdown-teacher-divider');
-          const tl = document.getElementById('nav-teacher-link');
+        if (ddDiv) ddDiv.style.display = hasTeacher ? 'block' : 'none';
-          if (tl) tl.style.display = 'inline-flex';
+
-          const mTl = document.getElementById('mobile-drawer-teacher-link');
+        const mAl = document.getElementById('mobile-drawer-admin-link');
-          if (mTl) mTl.style.display = 'flex';
+        if (mAl) mAl.style.display = hasAdmin ? 'flex' : 'none';
-        }
+        const mTl = document.getElementById('mobile-drawer-teacher-link');
+        if (mTl) mTl.style.display = hasTeacher ? 'flex' : 'none';
+        const mMgmt = document.getElementById('mobile-drawer-mgmt-title');
+        if (mMgmt) mMgmt.style.display = hasTeacher ? 'block' : 'none';
+        const mDiv = document.getElementById('mobile-drawer-mgmt-divider');
+        if (mDiv) mDiv.style.display = hasTeacher ? 'block' : 'none';
       } else {
         accountProfession = '';
         currentProfession = '';
@@ -2052,8 +2215,8 @@
 
       // Gesamt-Stats aktualisieren falls nicht vom Server überschrieben
       const totalSolved = solvedSet.size;
-      const totalModules = 264;
+      const totalModules = (!currentProfession || currentProfession === '') ? 224 : (currentProfession === 'ALL' ? 264 : 248);
-      const totalPercent = Math.round((totalSolved / totalModules) * 100);
+      const totalPercent = Math.min(100, Math.round((totalSolved / totalModules) * 100));
       document.getElementById('stat-user-solved').innerText = `${totalSolved} / ${totalModules}`;
       document.getElementById('stat-user-percent').innerText = `${totalPercent}% Gesamtfortschritt`;
       if (document.getElementById('stat-user-xp').innerText === '0') {

datenschutz.html

@@ -27,17 +27,55 @@
       </a>
 
       <nav class="portal-nav-links">
-        <a href="index.html#hero" class="portal-nav-link">Start</a>
+        <a href="index.html" class="portal-nav-link">Start</a>
-        <a href="index.html#was-du-bekommst" class="portal-nav-link">Lehrkonzept</a>
+        <a href="dashboard.html" class="portal-nav-link" id="nav-dashboard-link">📚 Kurse</a>
-        <a href="dashboard.html" class="portal-nav-link" id="nav-dashboard-link" style="color: #38bdf8; font-weight: 600;">Kurs-Dashboard</a>
+        <a href="workspace.html?course=python" class="portal-nav-link">💻 Web-IDE</a>
-        <a href="index.html#ihk-section" class="portal-nav-link">IHK-Prüfung</a>
+        <a href="diagram_editor.html" class="portal-nav-link">📐 Studio</a>
-        <a href="workspace.html?course=python" class="portal-nav-link">Web-IDE</a>
+        <a href="index.html#ihk-section" class="portal-nav-link" id="nav-ihk-link">🎓 IHK-Prüfung</a>
-        <a href="teacher.html" class="portal-nav-link" id="nav-teacher-link" style="display: none;">Dozentenbereich</a>
-        <a href="admin.html" class="portal-nav-link" id="nav-admin-link" style="display: none; color: #f87171; font-weight: 700;">Administration</a>
       </nav>
 
-      <div style="display: flex; align-items: center; gap: 8px;">
+      <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);"></span>
+        <!-- Modern User Avatar Dropdown (wird bei Login eingeblendet) -->
+        <div class="portal-user-dropdown" id="portal-user-dropdown" style="display: none;">
+          <button type="button" class="portal-user-btn" id="portal-user-btn" aria-haspopup="true" aria-expanded="false" onclick="toggleUserDropdown(event)" title="Benutzerprofil und Navigation">
+            <span class="portal-user-avatar" id="portal-user-avatar">IT</span>
+            <span class="portal-user-name" id="portal-user-name">Benutzer</span>
+            <span class="portal-user-caret">▼</span>
+          </button>
+          <div class="portal-dropdown-menu" id="portal-dropdown-menu">
+            <div class="portal-dropdown-header">
+              <div class="portal-dropdown-name" id="portal-dropdown-user-fullname">Lädt...</div>
+              <div class="portal-dropdown-meta" id="portal-dropdown-user-email">user@portal.local</div>
+              <div class="portal-dropdown-badge" id="portal-dropdown-user-badge">Teilnehmer</div>
+            </div>
+            <a href="dashboard.html" class="portal-dropdown-item" onclick="toggleUserDropdown(event)">
+              <span>📚</span> <span>Kurs-Dashboard &rarr;</span>
+            </a>
+            <a href="dashboard.html#zertifikate-section" class="portal-dropdown-item" onclick="toggleUserDropdown(event)">
+              <span>🏆</span> <span>Meine Zertifikate &amp; Nachweise</span>
+            </a>
+            <div class="portal-dropdown-divider" id="dropdown-teacher-divider" style="display: none;"></div>
+            <div class="portal-dropdown-section-title" id="dropdown-mgmt-title" style="display: none;">Verwaltung</div>
+            <a href="teacher.html" class="portal-dropdown-item" id="dropdown-link-teacher" style="display: none;">
+              <span>👨‍🏫</span> <span>Dozenten-Portal</span>
+            </a>
+            <a href="admin.html" class="portal-dropdown-item" id="dropdown-link-admin" style="display: none; color: #f87171;">
+              <span>🛡️</span> <span>Administration</span>
+            </a>
+            <div class="portal-dropdown-divider"></div>
+            <a href="impressum.html" class="portal-dropdown-item">
+              <span>⚖️</span> <span>Impressum &amp; Rechtliches</span>
+            </a>
+            <a href="datenschutz.html" class="portal-dropdown-item">
+              <span>🔒</span> <span>Datenschutzerklärung</span>
+            </a>
+            <div class="portal-dropdown-divider"></div>
+            <button type="button" class="portal-dropdown-item danger" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
+              <span>🚪</span> <span>Abmelden</span>
+            </button>
+          </div>
+        </div>
+
         <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: #1d4ed8; color: white;" 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()">
@@ -49,15 +87,34 @@
 
   <!-- Mobile Navigation Drawer -->
   <div id="portal-mobile-drawer" class="mobile-drawer" style="display: none;">
-    <a href="index.html#hero" class="mobile-drawer-link" onclick="toggleMobileMenu()">Start &amp; Übersicht</a>
+    <!-- Mobile User Header -->
-    <a href="index.html#was-du-bekommst" class="mobile-drawer-link" onclick="toggleMobileMenu()">Lehrkonzept</a>
+    <div class="mobile-drawer-user" id="mobile-drawer-user-info" style="display: none; align-items: center; gap: 10px; padding: 10px 12px; background: #1e293b; border-radius: 8px; margin-bottom: 8px;">
-    <a href="dashboard.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">Kurs-Dashboard</a>
+      <span class="portal-user-avatar" id="mobile-drawer-avatar">IT</span>
-    <a href="workspace.html?course=python" class="mobile-drawer-link" onclick="toggleMobileMenu()">Web-IDE starten</a>
+      <div style="overflow: hidden;">
-    <a href="index.html#ihk-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">IHK Prüfungstrainer</a>
+        <div style="font-weight: 700; color: #ffffff; font-size: 0.9rem;" id="mobile-drawer-username">Benutzer</div>
-    <a href="impressum.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">Impressum</a>
+        <div style="font-size: 0.74rem; color: #94a3b8;" id="mobile-drawer-role">Teilnehmer</div>
-    <a href="datenschutz.html" class="mobile-drawer-link" onclick="toggleMobileMenu()" style="color: #38bdf8;">Datenschutzerklärung</a>
+      </div>
-    <a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;">Dozentenbereich</a>
+    </div>
-    <a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171; font-weight: 700;">Administration</a>
+
+    <!-- Lernbereiche -->
+    <div class="mobile-drawer-section-title">Lernbereiche</div>
+    <a href="index.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">🏠 Start &amp; Übersicht</a>
+    <a href="dashboard.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">📚 Kurs-Dashboard</a>
+    <a href="workspace.html?course=python" class="mobile-drawer-link" onclick="toggleMobileMenu()">💻 Web-IDE starten</a>
+    <a href="diagram_editor.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">📐 Diagramm-Studio</a>
+    <a href="index.html#ihk-section" class="mobile-drawer-link" id="mobile-drawer-ihk-link" onclick="toggleMobileMenu()">🎓 IHK Prüfungstrainer</a>
+
+    <!-- Verwaltung -->
+    <div class="mobile-drawer-divider" id="mobile-drawer-mgmt-divider" style="display: none;"></div>
+    <div class="mobile-drawer-section-title" id="mobile-drawer-mgmt-title" style="display: none;">Verwaltung</div>
+    <a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;" onclick="toggleMobileMenu()">👨‍🏫 Dozentenbereich</a>
+    <a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171; font-weight: 700;" onclick="toggleMobileMenu()">🛡️ Administration</a>
+
+    <!-- Rechtliches -->
+    <div class="mobile-drawer-divider"></div>
+    <div class="mobile-drawer-section-title">Rechtliches</div>
+    <a href="impressum.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">⚖️ Impressum</a>
+    <a href="datenschutz.html" class="mobile-drawer-link" onclick="toggleMobileMenu()" style="color: #38bdf8;">🔒 Datenschutzerklärung</a>
   </div>
 
   <!-- 2. PAGE HEADER BANNER -->

diagram_editor.html

@@ -26,10 +26,45 @@
       </a>
 
       <nav class="portal-nav-links">
-        <a href="dashboard.html" class="portal-nav-link">🏠 Dashboard</a>
+        <a href="dashboard.html" class="portal-nav-link">📚 Kurse &amp; Dashboard</a>
         <a href="workspace.html?course=python" class="portal-nav-link">💻 Web-IDE</a>
-        <a href="dashboard.html#ihk-section" class="portal-nav-link">🎓 IHK-Prüfung</a>
+        <a href="dashboard.html#ihk-section" class="portal-nav-link" id="nav-ihk-link" style="display: none;">🎓 IHK-Prüfung</a>
       </nav>
+
+      <div style="display: flex; align-items: center; gap: 8px;">
+        <!-- Modern User Avatar Dropdown -->
+        <div class="portal-user-dropdown" id="portal-user-dropdown" style="display: none;">
+          <button type="button" class="portal-user-btn" id="portal-user-btn" aria-haspopup="true" aria-expanded="false" onclick="toggleUserDropdown(event)" title="Benutzerprofil">
+            <span class="portal-user-avatar" id="portal-user-avatar">IT</span>
+            <span class="portal-user-name" id="portal-user-name">Benutzer</span>
+            <span class="portal-user-caret">▼</span>
+          </button>
+          <div class="portal-dropdown-menu" id="portal-dropdown-menu">
+            <div class="portal-dropdown-header">
+              <div class="portal-dropdown-name" id="portal-dropdown-user-fullname">Lädt...</div>
+              <div class="portal-dropdown-meta" id="portal-dropdown-user-email">user@portal.local</div>
+              <div class="portal-dropdown-badge" id="portal-dropdown-user-badge">Teilnehmer</div>
+            </div>
+            <a href="dashboard.html" class="portal-dropdown-item">
+              <span>🏠</span> <span>Zum Kurs-Dashboard</span>
+            </a>
+            <a href="dashboard.html#zertifikate-section" class="portal-dropdown-item">
+              <span>🏆</span> <span>Meine Zertifikate</span>
+            </a>
+            <div class="portal-dropdown-divider" id="dropdown-teacher-divider" style="display: none;"></div>
+            <a href="teacher.html" class="portal-dropdown-item" id="dropdown-link-teacher" style="display: none;">
+              <span>👨‍🏫</span> <span>Dozenten-Portal</span>
+            </a>
+            <a href="admin.html" class="portal-dropdown-item" id="dropdown-link-admin" style="display: none; color: #f87171;">
+              <span>🛡️</span> <span>Administration</span>
+            </a>
+            <div class="portal-dropdown-divider"></div>
+            <button type="button" class="portal-dropdown-item danger" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
+              <span>🚪</span> <span>Abmelden</span>
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   </header>
 
@@ -79,9 +114,20 @@
   </footer>
 
   <!-- Scripts -->
+  <script src="assets/app_auth.js"></script>
   <script src="assets/ihk_tools/er_editor.js"></script>
   <script src="assets/ihk_tools/struktogramm_editor.js"></script>
   <script src="assets/ihk_tools/uml_editor.js"></script>
   <script src="assets/ihk_tools/diagram_studio.js"></script>
+  <script>
+    // Conditional nav-ihk-link visibility in Diagram Studio
+    document.addEventListener('DOMContentLoaded', () => {
+      const u = window.AUTH ? window.AUTH.getUser() : null;
+      const navIhk = document.getElementById('nav-ihk-link');
+      if (navIhk && u && (u.profession || u.role === 'admin' || u.role === 'teacher')) {
+        navIhk.style.display = 'inline-flex';
+      }
+    });
+  </script>
 </body>
 </html>

impressum.html

@@ -27,17 +27,55 @@
       </a>
 
       <nav class="portal-nav-links">
-        <a href="index.html#hero" class="portal-nav-link">Start</a>
+        <a href="index.html" class="portal-nav-link">Start</a>
-        <a href="index.html#was-du-bekommst" class="portal-nav-link">Lehrkonzept</a>
+        <a href="dashboard.html" class="portal-nav-link" id="nav-dashboard-link">📚 Kurse</a>
-        <a href="dashboard.html" class="portal-nav-link" id="nav-dashboard-link" style="color: #38bdf8; font-weight: 600;">Kurs-Dashboard</a>
+        <a href="workspace.html?course=python" class="portal-nav-link">💻 Web-IDE</a>
-        <a href="index.html#ihk-section" class="portal-nav-link">IHK-Prüfung</a>
+        <a href="diagram_editor.html" class="portal-nav-link">📐 Studio</a>
-        <a href="workspace.html?course=python" class="portal-nav-link">Web-IDE</a>
+        <a href="index.html#ihk-section" class="portal-nav-link" id="nav-ihk-link">🎓 IHK-Prüfung</a>
-        <a href="teacher.html" class="portal-nav-link" id="nav-teacher-link" style="display: none;">Dozentenbereich</a>
-        <a href="admin.html" class="portal-nav-link" id="nav-admin-link" style="display: none; color: #f87171; font-weight: 700;">Administration</a>
       </nav>
 
-      <div style="display: flex; align-items: center; gap: 8px;">
+      <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);"></span>
+        <!-- Modern User Avatar Dropdown (wird bei Login eingeblendet) -->
+        <div class="portal-user-dropdown" id="portal-user-dropdown" style="display: none;">
+          <button type="button" class="portal-user-btn" id="portal-user-btn" aria-haspopup="true" aria-expanded="false" onclick="toggleUserDropdown(event)" title="Benutzerprofil und Navigation">
+            <span class="portal-user-avatar" id="portal-user-avatar">IT</span>
+            <span class="portal-user-name" id="portal-user-name">Benutzer</span>
+            <span class="portal-user-caret">▼</span>
+          </button>
+          <div class="portal-dropdown-menu" id="portal-dropdown-menu">
+            <div class="portal-dropdown-header">
+              <div class="portal-dropdown-name" id="portal-dropdown-user-fullname">Lädt...</div>
+              <div class="portal-dropdown-meta" id="portal-dropdown-user-email">user@portal.local</div>
+              <div class="portal-dropdown-badge" id="portal-dropdown-user-badge">Teilnehmer</div>
+            </div>
+            <a href="dashboard.html" class="portal-dropdown-item" onclick="toggleUserDropdown(event)">
+              <span>📚</span> <span>Kurs-Dashboard &rarr;</span>
+            </a>
+            <a href="dashboard.html#zertifikate-section" class="portal-dropdown-item" onclick="toggleUserDropdown(event)">
+              <span>🏆</span> <span>Meine Zertifikate &amp; Nachweise</span>
+            </a>
+            <div class="portal-dropdown-divider" id="dropdown-teacher-divider" style="display: none;"></div>
+            <div class="portal-dropdown-section-title" id="dropdown-mgmt-title" style="display: none;">Verwaltung</div>
+            <a href="teacher.html" class="portal-dropdown-item" id="dropdown-link-teacher" style="display: none;">
+              <span>👨‍🏫</span> <span>Dozenten-Portal</span>
+            </a>
+            <a href="admin.html" class="portal-dropdown-item" id="dropdown-link-admin" style="display: none; color: #f87171;">
+              <span>🛡️</span> <span>Administration</span>
+            </a>
+            <div class="portal-dropdown-divider"></div>
+            <a href="impressum.html" class="portal-dropdown-item">
+              <span>⚖️</span> <span>Impressum &amp; Rechtliches</span>
+            </a>
+            <a href="datenschutz.html" class="portal-dropdown-item">
+              <span>🔒</span> <span>Datenschutzerklärung</span>
+            </a>
+            <div class="portal-dropdown-divider"></div>
+            <button type="button" class="portal-dropdown-item danger" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
+              <span>🚪</span> <span>Abmelden</span>
+            </button>
+          </div>
+        </div>
+
         <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: #1d4ed8; color: white;" 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()">
@@ -49,15 +87,34 @@
 
   <!-- Mobile Navigation Drawer -->
   <div id="portal-mobile-drawer" class="mobile-drawer" style="display: none;">
-    <a href="index.html#hero" class="mobile-drawer-link" onclick="toggleMobileMenu()">Start &amp; Übersicht</a>
+    <!-- Mobile User Header -->
-    <a href="index.html#was-du-bekommst" class="mobile-drawer-link" onclick="toggleMobileMenu()">Lehrkonzept</a>
+    <div class="mobile-drawer-user" id="mobile-drawer-user-info" style="display: none; align-items: center; gap: 10px; padding: 10px 12px; background: #1e293b; border-radius: 8px; margin-bottom: 8px;">
-    <a href="dashboard.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">Kurs-Dashboard</a>
+      <span class="portal-user-avatar" id="mobile-drawer-avatar">IT</span>
-    <a href="workspace.html?course=python" class="mobile-drawer-link" onclick="toggleMobileMenu()">Web-IDE starten</a>
+      <div style="overflow: hidden;">
-    <a href="index.html#ihk-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">IHK Prüfungstrainer</a>
+        <div style="font-weight: 700; color: #ffffff; font-size: 0.9rem;" id="mobile-drawer-username">Benutzer</div>
-    <a href="impressum.html" class="mobile-drawer-link" onclick="toggleMobileMenu()" style="color: #38bdf8;">Impressum</a>
+        <div style="font-size: 0.74rem; color: #94a3b8;" id="mobile-drawer-role">Teilnehmer</div>
-    <a href="datenschutz.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">Datenschutzerklärung</a>
+      </div>
-    <a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;">Dozentenbereich</a>
+    </div>
-    <a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171; font-weight: 700;">Administration</a>
+
+    <!-- Lernbereiche -->
+    <div class="mobile-drawer-section-title">Lernbereiche</div>
+    <a href="index.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">🏠 Start &amp; Übersicht</a>
+    <a href="dashboard.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">📚 Kurs-Dashboard</a>
+    <a href="workspace.html?course=python" class="mobile-drawer-link" onclick="toggleMobileMenu()">💻 Web-IDE starten</a>
+    <a href="diagram_editor.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">📐 Diagramm-Studio</a>
+    <a href="index.html#ihk-section" class="mobile-drawer-link" id="mobile-drawer-ihk-link" onclick="toggleMobileMenu()">🎓 IHK Prüfungstrainer</a>
+
+    <!-- Verwaltung -->
+    <div class="mobile-drawer-divider" id="mobile-drawer-mgmt-divider" style="display: none;"></div>
+    <div class="mobile-drawer-section-title" id="mobile-drawer-mgmt-title" style="display: none;">Verwaltung</div>
+    <a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;" onclick="toggleMobileMenu()">👨‍🏫 Dozentenbereich</a>
+    <a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171; font-weight: 700;" onclick="toggleMobileMenu()">🛡️ Administration</a>
+
+    <!-- Rechtliches -->
+    <div class="mobile-drawer-divider"></div>
+    <div class="mobile-drawer-section-title">Rechtliches</div>
+    <a href="impressum.html" class="mobile-drawer-link" onclick="toggleMobileMenu()" style="color: #38bdf8;">⚖️ Impressum</a>
+    <a href="datenschutz.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">🔒 Datenschutzerklärung</a>
   </div>
 
   <!-- 2. PAGE HEADER BANNER -->

index.html

@@ -263,19 +263,51 @@
       </a>
 
       <nav class="portal-nav-links">
-        <a href="#hero" class="portal-nav-link">Start</a>
         <a href="#was-du-bekommst" class="portal-nav-link">Lehrkonzept</a>
-        <a href="#dashboard-spotlight" class="portal-nav-link">Funktionen</a>
+        <a href="#features-ide" class="portal-nav-link">Web-IDE</a>
-        <a href="#features-ide" class="portal-nav-link">Monaco Web-IDE</a>
+        <a href="diagram_editor.html" class="portal-nav-link" title="Interaktives Diagramm-Studio (ER-Modell, Struktogramm, UML)">Diagramm-Studio</a>
         <a href="#ihk-section" class="portal-nav-link">IHK-Prüfung</a>
-        <a href="diagram_editor.html" class="portal-nav-link" title="Interaktives Diagramm-Studio (ER, Struktogramm, UML)">Diagramm-Studio</a>
-        <a href="#zielgruppen" class="portal-nav-link">Zielgruppen</a>
-        <a href="teacher.html" class="portal-nav-link" id="nav-teacher-link" style="display: none;">Dozentenbereich</a>
-        <a href="admin.html" class="portal-nav-link" id="nav-admin-link" style="display: none; color: #f87171; font-weight: 700;">Administration</a>
       </nav>
 
       <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>
+        <!-- Modern User Avatar Dropdown (wird bei Login eingeblendet) -->
+        <div class="portal-user-dropdown" id="portal-user-dropdown" style="display: none;">
+          <button type="button" class="portal-user-btn" id="portal-user-btn" aria-haspopup="true" aria-expanded="false" onclick="toggleUserDropdown(event)" title="Benutzerprofil und Navigation">
+            <span class="portal-user-avatar" id="portal-user-avatar">IT</span>
+            <span class="portal-user-name" id="portal-user-name">Benutzer</span>
+            <span class="portal-user-caret">▼</span>
+          </button>
+          <div class="portal-dropdown-menu" id="portal-dropdown-menu">
+            <div class="portal-dropdown-header">
+              <div class="portal-dropdown-name" id="portal-dropdown-user-fullname">Lädt...</div>
+              <div class="portal-dropdown-meta" id="portal-dropdown-user-email">user@portal.local</div>
+              <div class="portal-dropdown-badge" id="portal-dropdown-user-badge">Teilnehmer</div>
+            </div>
+            <a href="dashboard.html" class="portal-dropdown-item" onclick="toggleUserDropdown(event)">
+              <span>🏠</span> <span>Zum Kurs-Dashboard &rarr;</span>
+            </a>
+            <a href="dashboard.html#zertifikate-section" class="portal-dropdown-item" onclick="toggleUserDropdown(event)">
+              <span>🏆</span> <span>Meine Zertifikate &amp; Nachweise</span>
+            </a>
+            <div class="portal-dropdown-divider" id="dropdown-teacher-divider" style="display: none;"></div>
+            <div class="portal-dropdown-section-title" id="dropdown-mgmt-title" style="display: none;">Verwaltung</div>
+            <a href="teacher.html" class="portal-dropdown-item" id="dropdown-link-teacher" style="display: none;">
+              <span>👨‍🏫</span> <span>Dozenten-Portal</span>
+            </a>
+            <a href="admin.html" class="portal-dropdown-item" id="dropdown-link-admin" style="display: none; color: #f87171;">
+              <span>🛡️</span> <span>Administration</span>
+            </a>
+            <div class="portal-dropdown-divider"></div>
+            <a href="impressum.html" class="portal-dropdown-item">
+              <span>📄</span> <span>Impressum &amp; Datenschutz</span>
+            </a>
+            <div class="portal-dropdown-divider"></div>
+            <button type="button" class="portal-dropdown-item danger" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
+              <span>🚪</span> <span>Abmelden</span>
+            </button>
+          </div>
+        </div>
+
         <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: #1d4ed8; 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()">
@@ -285,9 +317,18 @@
     </div>
   </header>
 
-  <!-- Mobile Navigation Drawer -->
+  <!-- Mobile Navigation Drawer (Structured & Grouped) -->
   <div id="portal-mobile-drawer" class="mobile-drawer" style="display: none;">
-    <!-- Auth-Aktionen für mobile/tablet Besucher -->
+    <!-- Mobile User Header (wenn eingeloggt) -->
+    <div class="mobile-drawer-user" id="mobile-drawer-user-info" style="display: none; align-items: center; gap: 10px; padding: 10px 12px; background: #1e293b; border-radius: 8px; margin-bottom: 8px;">
+      <span class="portal-user-avatar" id="mobile-drawer-avatar">IT</span>
+      <div style="overflow: hidden;">
+        <div style="font-weight: 700; color: #ffffff; font-size: 0.9rem;" id="mobile-drawer-username">Benutzer</div>
+        <div style="font-size: 0.74rem; color: #94a3b8;" id="mobile-drawer-role">Teilnehmer</div>
+      </div>
+    </div>
+
+    <!-- Auth-Aktionen für mobile/tablet Besucher (wenn ausgeloggt) -->
     <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: #f1f5f9; background: rgba(255, 255, 255, 0.05); border: 1px solid #334155; text-align: left; cursor: pointer; border-radius: 6px; padding: 10px 14px; font-weight: 600; width: 100%; display: flex; align-items: center; gap: 8px; font-size: 0.9rem;" onclick="toggleMobileMenu(); window.openAuthModal('login', { allowClose: true });">
         Anmelden
@@ -297,18 +338,23 @@
       </button>
     </div>
 
-    <a href="#hero" class="mobile-drawer-link" onclick="toggleMobileMenu()">Start &amp; Übersicht</a>
+    <div class="mobile-drawer-section-title">Plattform</div>
-    <a href="#was-du-bekommst" class="mobile-drawer-link" onclick="toggleMobileMenu()">Lehrkonzept</a>
+    <a href="dashboard.html" class="mobile-drawer-link" id="mobile-drawer-dash-link" style="display: none; color: #38bdf8; font-weight: 700; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.2);" onclick="toggleMobileMenu()">🚀 Zum Kurs-Dashboard</a>
-    <a href="#dashboard-spotlight" class="mobile-drawer-link" onclick="toggleMobileMenu()">Funktionen</a>
+    <a href="#was-du-bekommst" class="mobile-drawer-link" onclick="toggleMobileMenu()">Lehrkonzept &amp; Curriculum</a>
     <a href="#features-ide" class="mobile-drawer-link" onclick="toggleMobileMenu()">Monaco Web-IDE</a>
-    <a href="#ihk-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">IHK Prüfungstrainer</a>
     <a href="diagram_editor.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">📐 Diagramm-Studio (ER, SG, UML)</a>
+    <a href="#ihk-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">🎓 IHK Prüfungstrainer</a>
+
+    <div class="mobile-drawer-divider" id="mobile-drawer-mgmt-divider" style="display: none;"></div>
+    <div class="mobile-drawer-section-title" id="mobile-drawer-mgmt-title" style="display: none;">Verwaltung</div>
+    <a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;" onclick="toggleMobileMenu()">👨‍🏫 Dozenten-Portal</a>
+    <a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171; font-weight: 700;" onclick="toggleMobileMenu()">🛡️ Administration</a>
+
+    <div class="mobile-drawer-divider"></div>
     <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="dashboard.html" class="mobile-drawer-link" id="mobile-drawer-dash-link" style="display: none; color: #38bdf8; font-weight: 700; background: rgba(56, 189, 248, 0.1); padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(56, 189, 248, 0.2);">Zum Kurs-Dashboard &rarr;</a>
+
-    <a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;">Dozentenbereich</a>
+    <button type="button" class="mobile-drawer-link danger-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: 600; width: 100%; align-items: center; gap: 8px; font-size: 0.9rem;" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
-    <a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171; font-weight: 700;">Administration</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: 600; 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>