From f8874a3e95486553252ce25fe45ea95f74816a33 Mon Sep 17 00:00:00 2001
From: Johannes Baumeister <jba@enwelo.de>
Date: Sat, 2 May 2026 11:34:28 +0200
Subject: [PATCH] Compact legend and expanded owner management table (Nachname,
 Vorname, Adresse)

---
 app.js     | 23 ++++++++++++++++++++---
 index.html |  4 +++-
 style.css  | 30 +++++++++++++++---------------
 3 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/app.js b/app.js
index bb476f4..faf216f 100644
--- a/app.js
+++ b/app.js
@@ -1511,8 +1511,20 @@ document.addEventListener('DOMContentLoaded', async () => {
             const last = p[state.ownerMapping.lastName] || '';
             const fullName = `${first} ${last}`.trim() || "Unbekannt";
 
+            // Adress-Felder extrahieren (STR, HSN, PLZ, ORP)
+            const str = p.STR || '';
+            const hsn = p.HSN || '';
+            const plz = p.PLZ || '';
+            const ort = p.ORP || '';
+            const address = `${str} ${hsn}, ${plz} ${ort}`.trim().replace(/^,/, '').trim();
+
             if (!owners[fullName]) {
-                owners[fullName] = { count: 0, first, last };
+                owners[fullName] = { 
+                    count: 0, 
+                    first, 
+                    last,
+                    address: address || 'Keine Adresse'
+                };
             }
             owners[fullName].count++;
         });
@@ -1523,7 +1535,10 @@ document.addEventListener('DOMContentLoaded', async () => {
             const query = ownerSearch.value.toLowerCase();
             const filtered = {};
             for (let name in owners) {
-                if (name.toLowerCase().includes(query)) filtered[name] = owners[name];
+                const o = owners[name];
+                if (name.toLowerCase().includes(query) || (o.address && o.address.toLowerCase().includes(query))) {
+                    filtered[name] = o;
+                }
             }
             renderOwnerRows(filtered);
         };
@@ -1539,7 +1554,9 @@ document.addEventListener('DOMContentLoaded', async () => {
             
             const row = document.createElement('tr');
             row.innerHTML = `
-                <td><b>${name}</b></td>
+                <td><b>${data.last}</b></td>
+                <td>${data.first}</td>
+                <td style="font-size: 0.75rem; opacity: 0.8;">${data.address}</td>
                 <td>${data.count} Flurstücke</td>
                 <td>
                     <select class="status-select" data-owner="${name}">
diff --git a/index.html b/index.html
index 2b8112b..e67fce0 100644
--- a/index.html
+++ b/index.html
@@ -232,7 +232,9 @@
                     <table id="ownerTable">
                         <thead>
                             <tr>
-                                 <th>Name</th>
+                                 <th>Nachname</th>
+                                 <th>Vorname</th>
+                                 <th>Adresse</th>
                                  <th>Flächen</th>
                                  <th>Status</th>
                                  <th>Notiz</th>
diff --git a/style.css b/style.css
index 8e4707d..b0e3519 100644
--- a/style.css
+++ b/style.css
@@ -253,7 +253,7 @@ body {
 }
 
 .panel-content {
-    padding: 18px;
+    padding: 12px 15px;
     max-height: 500px;
     overflow-y: auto;
 }
@@ -266,10 +266,10 @@ body {
 }
 
 .legend-section-title {
-    font-size: 0.7rem;
+    font-size: 0.65rem;
     font-weight: 800;
     color: var(--primary-color);
-    margin-bottom: 12px;
+    margin-bottom: 8px;
     text-transform: uppercase;
     letter-spacing: 1.2px;
     opacity: 0.8;
@@ -278,25 +278,25 @@ body {
 .legend-item {
     display: flex;
     align-items: center;
-    gap: 12px;
-    font-size: 0.85rem;
-    margin-bottom: 10px;
+    gap: 10px;
+    font-size: 0.8rem;
+    margin-bottom: 6px;
     color: rgba(255, 255, 255, 0.9);
 }
 
 .legend-item-status {
     display: flex;
     align-items: flex-start;
-    gap: 15px;
-    margin-bottom: 18px;
+    gap: 10px;
+    margin-bottom: 10px;
 }
 
 .status-dot {
-    width: 20px;
-    height: 20px;
+    width: 14px;
+    height: 14px;
     border-radius: 50%;
     flex-shrink: 0;
-    margin-top: 2px;
+    margin-top: 3px;
     box-shadow: 0 0 10px rgba(0,0,0,0.3);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
@@ -309,14 +309,14 @@ body {
 
 .status-label {
     font-weight: 800;
-    font-size: 0.95rem;
+    font-size: 0.85rem;
     color: white;
 }
 
 .status-desc {
-    font-size: 0.75rem;
+    font-size: 0.7rem;
     color: rgba(255, 255, 255, 0.6);
-    line-height: 1.4;
+    line-height: 1.3;
 }
 
 #floatingLegend.collapsed .panel-content {
@@ -546,7 +546,7 @@ body {
     background: var(--panel-bg);
     border: 1px solid var(--border-color);
     border-radius: 16px;
-    width: 800px;
+    width: 1100px;
     max-width: 90%;
     max-height: 85vh;
     display: flex;