From e20ebbfcf343e81e31798ffb5633aa91d9b5d747 Mon Sep 17 00:00:00 2001
From: Johannes Baumeister <jba@enwelo.de>
Date: Wed, 15 Apr 2026 20:44:39 +0200
Subject: [PATCH] Compacted sidebar, fixed search/toggle at top, narrower width

---
 index.html | 44 ++++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 0a5ef5f..1e9acd9 100644
--- a/index.html
+++ b/index.html
@@ -27,8 +27,8 @@
             --bg-glass: rgba(255, 253, 235, 0.85);
             /* Warm base */
             --border-glass: rgba(204, 163, 0, 0.2);
-            --sidebar-width: 380px;
-            --panel-width: 320px;
+            --sidebar-width: 300px;
+            --panel-width: 310px;
             --success: #299500;
             /* CMYK 75 10 100 35 */
             --danger: #ef4444;
@@ -96,14 +96,14 @@
 
         /* Sidebar CRM Elements */
         .sidebar-header {
-            padding: 24px;
+            padding: 16px;
             border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
 
         .sidebar-content {
             flex: 1;
             overflow-y: auto;
-            padding: 20px;
+            padding: 12px 16px;
         }
 
         .search-box {
@@ -141,9 +141,9 @@
 
         .owner-card {
             background: white;
-            border-radius: 12px;
-            padding: 16px;
-            margin-bottom: 12px;
+            border-radius: 10px;
+            padding: 10px 12px;
+            margin-bottom: 8px;
             border: 1px solid rgba(204, 163, 0, 0.1);
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             cursor: pointer;
@@ -583,30 +583,30 @@
     <aside id="sidebar">
         <div class="sidebar-header">
             <img src="Logos/20201202-ENWELO-Logo-4c_ohne_Claim.png" alt="ENWELO"
-                style="width: 100%; max-width: 220px; margin-bottom: 20px;">
-            <div style="display: flex; flex-direction: column;">
+                style="width: 100%; max-width: 180px; margin-bottom: 12px;">
+            <div style="display: flex; flex-direction: column; margin-bottom: 12px;">
                 <h1
-                    style="font-size: 20px; display: flex; align-items: center; gap: 10px; color: white; margin: 0; font-weight: 800; letter-spacing: -0.5px;">
-                    <i data-lucide="map-pin"></i> TrassenPlaner Basic
+                    style="font-size: 18px; display: flex; align-items: center; gap: 8px; color: white; margin: 0; font-weight: 800; letter-spacing: -0.5px;">
+                    <i data-lucide="map-pin"></i> TrassenPlaner
                 </h1>
                 <span
-                    style="font-size: 11px; color: var(--info); opacity: 0.9; margin-left: 34px; margin-top: -2px; font-weight: 600;">v1.0.4</span>
+                    style="font-size: 10px; color: var(--info); opacity: 0.9; margin-left: 30px; margin-top: -2px; font-weight: 600;">v1.0.5</span>
             </div>
-        </div>
-        <div class="sidebar-content">
-            <div id="quick-toggles" style="padding: 0 0 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 15px;">
-                <label style="display: flex; align-items: center; gap: 10px; cursor: pointer; color: white; font-size: 13px; font-weight: 600; padding: 4px 0;">
-                    <input type="checkbox" id="sidebar-toggle-owner-status" checked onchange="document.getElementById('toggle-owner-status').checked = this.checked; toggleLayer('ownerStatus', this.checked); document.getElementById('status-legend').style.display = this.checked ? 'block' : 'none';" style="width: 16px; height: 16px; cursor: pointer;"> 
-                    <span style="display: flex; align-items: center; gap: 8px;">
-                        <i data-lucide="shield-check" style="width: 18px; color: var(--info);"></i> Sicherungsstand anzeigen
+
+            <div id="quick-toggles" style="padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 12px; margin-top: 8px;">
+                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; color: white; font-size: 12px; font-weight: 600; padding: 4px 0;">
+                    <input type="checkbox" id="sidebar-toggle-owner-status" checked onchange="document.getElementById('toggle-owner-status').checked = this.checked; toggleLayer('ownerStatus', this.checked); document.getElementById('status-legend').style.display = this.checked ? 'block' : 'none';" style="width: 14px; height: 14px; cursor: pointer;"> 
+                    <span style="display: flex; align-items: center; gap: 6px;">
+                        <i data-lucide="shield-check" style="width: 16px; color: var(--info);"></i> Sicherungsstand aktiv
                     </span>
                 </label>
             </div>
-            <div id="owner-search-container" style="margin-top: 0px; margin-bottom: 15px;">
-
+            <div id="owner-search-container" style="margin-top: 8px;">
                 <input type="text" class="search-box" id="owner-search" placeholder="Eigentümer suchen..."
-                    style="margin-bottom: 0px; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: white;">
+                    style="margin-bottom: 0; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: white; font-size: 13px;">
             </div>
+        </div>
+        <div class="sidebar-content">
 
             <div id="owner-list">
                 <div style="text-align: center; color: #888; margin-top: 40px;">