Überarbeitete Version der 1. Version. Es bestehen noch grosse Feher in einzelnen Skripten.

www/intern/css/sidebar.css

@@ -1,10 +1,13 @@
 /* ─── Sidebar Navigation ─── */
 :root {
     --sidebar-width: 280px;
-    --sidebar-bg: #fafafa;
-    --sidebar-text: #363636;
-    --sidebar-hover: rgb(var(--bg-top-raw) / 0.2);
-    --sidebar-active: rgb(var(--bg-top-raw) / 0.35);
+    --sidebar-bg: #111218;
+    /* Dark navy / charcoal */
+    --sidebar-text: #A0A0A0;
+    /* Soft grey text */
+    --sidebar-hover: rgba(255, 255, 255, 0.05);
+    /* Subtile hover effect */
+    --sidebar-active: rgba(255, 255, 255, 0.1);
     --sidebar-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -18,15 +21,16 @@
     background: var(--sidebar-bg);
     z-index: 10000;
     transform: translateX(-100%);
-    transition: transform var(--sidebar-transition);
+    transition: transform var(--sidebar-transition), box-shadow var(--sidebar-transition);
     display: flex;
     flex-direction: column;
     overflow-y: auto;
-    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
+    box-shadow: none;
 }
 
 .sidebar-nav.open {
     transform: translateX(0);
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
 }
 
 /* Sidebar Header */
@@ -42,7 +46,7 @@
     margin: 0;
     font-size: 16px;
     font-weight: 600;
-    color: #111;
+    color: #FFFFFF;
     letter-spacing: 0.5px;
 }
 
@@ -69,7 +73,7 @@
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1.2px;
-    color: rgba(45, 45, 45, 0.35);
+    color: rgba(255, 255, 255, 0.35);
 }
 
 /* Links */
@@ -95,13 +99,13 @@
 
 .sidebar-links a:hover {
     background: var(--sidebar-hover);
-    color: #222;
+    color: #FFFFFF;
 }
 
 .sidebar-links a.active {
     background: var(--sidebar-active);
-    color: #111;
-    border-left-color: var(--bg-top);
+    color: #FFFFFF;
+    border-left-color: var(--accent);
 }
 
 .sidebar-links a svg {
@@ -134,18 +138,18 @@
 
 /* Hamburger Toggle */
 .sidebar-toggle {
-    background: var(--sidebar-bg);
+    background: #FFFFFF;
     border: none;
-    border-radius: 10px;
-    width: 44px;
-    height: 44px;
+    border-radius: 50%;
+    width: 48px;
+    height: 48px;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 5px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
     transition: all var(--sidebar-transition);
     padding: 0;
 }
@@ -174,9 +178,9 @@
 /* Footer */
 .sidebar-footer {
     padding: 16px 24px;
-    border-top: 1px solid rgba(42, 42, 42, 0.222);
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
     font-size: 11px;
-    color: rgba(42, 42, 42, 0.485);
+    color: rgba(255, 255, 255, 0.4);
 }
 
 .menuWrapper {