UX: Modal-Rand, Icon-Farben, Adresse aufgeteilt

- Tierarzt-Adresse: strasse / plz / ort statt einzeiligem Freitext
- Modal: Rand in Primärfarbe + kein versehentliches Schließen beim Klick auf Hintergrund
- Nav/Sidebar-Icons: inaktiv gedämpft, aktiv amber-getönt (CSS filter)
- Datums-Kalender-Icon: ebenfalls amber statt Schwarz
- SW-Cache → by-v8

backend/static/css/components.css

@@ -239,6 +239,14 @@
 
 .form-control::placeholder { color: var(--c-text-muted); }
 
+/* Kalender-Icon in Datumseingaben: Amber statt Schwarz */
+input[type="date"]::-webkit-calendar-picker-indicator,
+input[type="time"]::-webkit-calendar-picker-indicator {
+  cursor:  pointer;
+  opacity: 0.85;
+  filter:  sepia(0.7) saturate(1.8) hue-rotate(-8deg) brightness(0.9);
+}
+
 .form-control:focus {
   outline:      none;
   border-color: var(--c-primary);
@@ -450,6 +458,7 @@ textarea.form-control {
 .modal {
   background:    var(--c-surface);
   border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  border:        2px solid var(--c-primary);
   width:         100%;
   max-width:     480px;
   max-height:    90vh;

backend/static/css/layout.css

@@ -142,6 +142,11 @@
   font-size:  22px;
   line-height: 1;
   position:   relative;
+  filter:     saturate(0.35) brightness(0.75);
+  transition: filter var(--transition-fast);
+}
+.nav-item.active .nav-item-icon {
+  filter: sepia(0.7) saturate(1.8) hue-rotate(-8deg) brightness(0.9);
 }
 
 /* Ungelesen-Badge auf Nav-Icon */
@@ -308,6 +313,11 @@
   width:       24px;
   text-align:  center;
   flex-shrink: 0;
+  filter:      saturate(0.35) brightness(0.75);
+  transition:  filter var(--transition-fast);
+}
+.sidebar-item.active .sidebar-item-icon {
+  filter: sepia(0.7) saturate(1.8) hue-rotate(-8deg) brightness(0.9);
 }
 .sidebar-item-badge {
   margin-left:   auto;

backend/static/js/pages/health.js

@@ -812,7 +812,10 @@ window.Page_health = (() => {
             ${_esc(p.name)}
             ${!p.aktiv ? '<span style="font-size:var(--text-xs);color:var(--c-text-secondary);font-weight:400"> · Ehemalig</span>' : ''}
           </div>
-          ${p.adresse ? `<div class="health-card-meta">${_esc(p.adresse)}</div>` : ''}
+          ${(p.strasse || p.plz || p.ort) ? `
+            <div class="health-card-meta">
+              ${[p.strasse, [p.plz, p.ort].filter(Boolean).join(' ')].filter(Boolean).map(_esc).join(', ')}
+            </div>` : ''}
           <div style="display:flex;gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap">
             ${p.telefon ? `
               <a href="tel:${_esc(p.telefon)}" class="btn btn-secondary btn-sm"
@@ -861,9 +864,21 @@ window.Page_health = (() => {
                    value="${_esc(praxis?.name || '')}" placeholder="Dr. Muster Tierarztpraxis" required>
           </div>
           <div class="form-group">
-            <label class="form-label">Adresse</label>
-            <input class="form-control" type="text" name="adresse"
-                   value="${_esc(praxis?.adresse || '')}" placeholder="Musterstraße 1, 12345 Stadt">
+            <label class="form-label">Straße &amp; Hausnummer</label>
+            <input class="form-control" type="text" name="strasse"
+                   value="${_esc(praxis?.strasse || '')}" placeholder="Musterstraße 1">
+          </div>
+          <div style="display:grid;grid-template-columns:120px 1fr;gap:var(--space-3)">
+            <div class="form-group">
+              <label class="form-label">PLZ</label>
+              <input class="form-control" type="text" name="plz" inputmode="numeric"
+                     value="${_esc(praxis?.plz || '')}" placeholder="12345">
+            </div>
+            <div class="form-group">
+              <label class="form-label">Ort</label>
+              <input class="form-control" type="text" name="ort"
+                     value="${_esc(praxis?.ort || '')}" placeholder="Musterstadt">
+            </div>
           </div>
           <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div class="form-group">
@@ -918,7 +933,9 @@ window.Page_health = (() => {
       await UI.asyncButton(btn, async () => {
         const payload = {
           name:             fd.name?.trim(),
-          adresse:          fd.adresse || null,
+          strasse:          fd.strasse || null,
+          plz:              fd.plz    || null,
+          ort:              fd.ort    || null,
           telefon:          fd.telefon || null,
           notfall_telefon:  fd.notfall_telefon || null,
           email:            fd.email || null,

backend/static/js/ui.js

@@ -68,7 +68,6 @@ const UI = (() => {
       `;
 
       overlay.querySelector('.modal-close-btn')?.addEventListener('click', close);
-      overlay.addEventListener('click', e => { if (e.target === overlay) close(); });
 
       document.getElementById('modal-container').appendChild(overlay);
       document.body.style.overflow = 'hidden';

backend/static/sw.js

@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications
    ============================================================ */
 
-const CACHE_VERSION = 'by-v7';
+const CACHE_VERSION = 'by-v8';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 
 // Diese Dateien werden beim Install gecacht (App Shell)