From 55a03715058ef0d7525e23c93b509aacfb3d406d Mon Sep 17 00:00:00 2001
From: ulsklyc <108589275+ulsklyc@users.noreply.github.com>
Date: Wed, 25 Mar 2026 13:12:29 +0100
Subject: [PATCH] design: Desktop-UI modernisieren (Sidebar, Typografie,
 Shadows, Buttons)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Sidebar: Logo mit Gradient, kompaktere Nav-Items (40px statt 44px),
  kleinere Icons (18px), 2px Gap, bessere Hover/Active-Zustände
- tokens.css: feinere Schatten, Inter im Font-Stack, Sidebar-Breite 256px
- layout.css: Desktop-Content mehr Luft (40px padding), Headings mit
  letter-spacing, Primary-Buttons mit subtiler Elevation
- router.js: Logo-Span für CSS-Gradient-Clip

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/router.js         |  2 +-
 public/styles/layout.css | 49 +++++++++++++++++++++++++++++++---------
 public/styles/tokens.css | 10 ++++----
 3 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/public/router.js b/public/router.js
index 8eb09c8..af17a65 100644
--- a/public/router.js
+++ b/public/router.js
@@ -138,7 +138,7 @@ async function renderPage(route) {
 function renderAppShell(container) {
   container.innerHTML = `
     <nav class="nav-sidebar" aria-label="Hauptnavigation">
-      <div class="nav-sidebar__logo">Oikos</div>
+      <div class="nav-sidebar__logo"><span>Oikos</span></div>
       <div class="nav-sidebar__items" role="list">
         ${navItems().map(navItemHtml).join('')}
       </div>
diff --git a/public/styles/layout.css b/public/styles/layout.css
index 43b43fc..845b036 100644
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -127,22 +127,30 @@
     display: flex;
     flex-direction: column;
     z-index: var(--z-nav);
-    padding: var(--space-6) 0;
+    padding: var(--space-5) 0 var(--space-6);
   }
 
   .nav-sidebar__logo {
-    font-size: var(--text-xl);
+    font-size: var(--text-lg);
     font-weight: var(--font-weight-bold);
-    color: var(--color-accent);
-    padding: 0 var(--space-6) var(--space-6);
-    border-bottom: 1px solid var(--color-border);
-    margin-bottom: var(--space-4);
+    letter-spacing: -0.3px;
+    color: var(--color-text-primary);
+    padding: var(--space-2) var(--space-5) var(--space-5);
+    margin-bottom: var(--space-2);
+  }
+
+  .nav-sidebar__logo span {
+    display: inline-block;
+    background: linear-gradient(135deg, var(--color-accent) 0%, #5856D6 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
   }
 
   .nav-sidebar__items {
     display: flex;
     flex-direction: column;
-    gap: var(--space-1);
+    gap: 2px;
     padding: 0 var(--space-3);
     flex: 1;
   }
@@ -151,22 +159,34 @@
     flex-direction: row;
     justify-content: flex-start;
     border-radius: var(--radius-sm);
-    padding: var(--space-3) var(--space-3);
+    padding: var(--space-2) var(--space-3);
     gap: var(--space-3);
-    min-height: 44px;
+    min-height: 40px;
+    font-size: var(--text-sm);
+    color: var(--color-text-secondary);
+    transition: background-color var(--transition-fast), color var(--transition-fast);
+  }
+
+  .nav-sidebar .nav-item__icon {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
   }
 
   .nav-sidebar .nav-item[aria-current="page"] {
     background-color: var(--color-accent-light);
     color: var(--color-accent);
+    font-weight: var(--font-weight-semibold);
   }
 
   .nav-sidebar .nav-item:hover:not([aria-current="page"]) {
     background-color: var(--color-surface-2);
+    color: var(--color-text-primary);
   }
 
   .nav-sidebar .nav-item__label {
-    font-size: var(--text-base);
+    font-size: var(--text-sm);
+    font-weight: inherit;
   }
 }
 
@@ -194,7 +214,12 @@
 
 @media (min-width: 1024px) {
   .page {
-    padding: var(--space-8);
+    padding: var(--space-10) var(--space-10);
+  }
+
+  .page__title {
+    font-size: var(--text-3xl);
+    letter-spacing: -0.5px;
   }
 }
 
@@ -233,10 +258,12 @@
 .btn--primary {
   background-color: var(--color-btn-primary);
   color: #ffffff;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
 }
 
 .btn--primary:hover {
   background-color: var(--color-btn-primary-hover);
+  box-shadow: 0 2px 6px rgba(0,102,219,0.28);
 }
 
 .btn--secondary {
diff --git a/public/styles/tokens.css b/public/styles/tokens.css
index 00701a7..ba5f0da 100644
--- a/public/styles/tokens.css
+++ b/public/styles/tokens.css
@@ -48,9 +48,9 @@
   /* --------------------------------------------------------
    * Schatten
    * -------------------------------------------------------- */
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
-  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 6px rgba(0,0,0,0.04);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
+  --shadow-lg: 0 12px 32px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.05);
 
   /* --------------------------------------------------------
    * Border-Radien
@@ -65,7 +65,7 @@
   /* --------------------------------------------------------
    * Typografie
    * -------------------------------------------------------- */
-  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
   --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
 
   --text-xs: 0.75rem;    /* 12px */
@@ -104,7 +104,7 @@
    * Layout
    * -------------------------------------------------------- */
   --nav-height-mobile: 64px;
-  --sidebar-width: 240px;
+  --sidebar-width: 256px;
   --content-max-width: 1200px;
   --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);