fix(styles): resolve design system audit violations and touch scrolling

- Replace hardcoded px values with design tokens (--space-0h, --space-px,
  --space-1, --target-sm/md/lg) across layout, calendar, dashboard CSS
- Fix rgba(255,255,255,0.35) spinner border to use var(--color-glass-hover)
- Fix modal close icon from off-grid 18px to 16px
- Fix touch scrolling on mobile: add min-height: 0 and
  -webkit-overflow-scrolling: touch to .app-content

public/components/modal.js

@@ -195,7 +195,7 @@ export function openModal({ title, content, onSave, onDelete, size = 'md' } = {}
         <div class="modal-panel__header">
           <h2 class="modal-panel__title" id="shared-modal-title">${title}</h2>
           <button class="modal-panel__close" data-action="close-modal" aria-label="${t('modal.closeLabel')}">
-            <i data-lucide="x" style="width:18px;height:18px" aria-hidden="true"></i>
+            <i data-lucide="x" style="width:16px;height:16px" aria-hidden="true"></i>
           </button>
         </div>
         <div class="modal-panel__body">
@@ -465,6 +465,22 @@ export function btnSuccess(btn, originalLabel) {
   }, 700);
 }
 
+/**
+ * Versetzt einen Button in den Lade-Zustand (Spinner, nicht klickbar).
+ * Gibt eine Cleanup-Funktion zurück, die den Originalzustand wiederherstellt.
+ *
+ * @param {HTMLButtonElement} btn
+ * @returns {() => void} cleanup
+ */
+export function btnLoading(btn) {
+  btn.classList.add('btn--loading');
+  btn.disabled = true;
+  return () => {
+    btn.classList.remove('btn--loading');
+    btn.disabled = false;
+  };
+}
+
 /**
  * Zeigt Fehler-Feedback auf einem Button (Shake-Animation).
  * @param {HTMLButtonElement} btn

public/styles/calendar.css

@@ -69,10 +69,10 @@
 
 .cal-toolbar__views {
   display: flex;
-  gap: 2px;
+  gap: var(--space-0h);
   background-color: var(--color-surface-2);
   border-radius: var(--radius-sm);
-  padding: 2px;
+  padding: var(--space-0h);
 }
 
 .cal-toolbar__view-btn {
@@ -197,7 +197,7 @@
 .month-day__more {
   font-size: var(--text-xs);
   color: var(--color-text-secondary);
-  padding: 1px 4px;
+  padding: var(--space-px) var(--space-1);
   cursor: pointer;
 }
 

public/styles/dashboard.css

@@ -135,7 +135,7 @@
   color: var(--color-text-on-accent);
   font-size: var(--text-xs);
   font-weight: var(--font-weight-medium);
-  padding: 2px var(--space-2);
+  padding: var(--space-0h) var(--space-2);
   border-radius: var(--radius-full);
 }
 
@@ -186,7 +186,7 @@
   font-weight: var(--font-weight-medium);
   display: inline-flex;
   align-items: center;
-  gap: 2px;
+  gap: var(--space-0h);
   transition: opacity var(--transition-fast);
 }
 
@@ -395,7 +395,7 @@
 .meal-slots {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 1px;
+  gap: var(--space-px);
   background-color: var(--color-border);
 }
 

public/styles/layout.css

@@ -95,9 +95,11 @@
  * -------------------------------------------------------- */
 .app-content {
   flex: 1;
+  min-height: 0;
   padding-bottom: calc(var(--nav-bottom-height) + var(--safe-area-inset-bottom));
   overflow-y: auto;
   overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* Sidebar auf Mobile verstecken */
@@ -177,7 +179,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 2px;
+  gap: var(--space-0h);
   padding: var(--space-1) var(--space-1);
   color: var(--color-text-tertiary);
   transition: color var(--transition-fast), transform 0.12s ease;
@@ -260,8 +262,8 @@
   .page-fab {
     bottom: var(--space-8);
     right: var(--space-8);
-    width: 48px;
+    width: var(--target-lg);
-    height: 48px;
+    height: var(--target-lg);
   }
 }
 
@@ -288,6 +290,7 @@
 
   .app-content {
     flex: 1;
+    min-height: 0;
     padding-bottom: 0;
     margin-left: var(--sidebar-width);
     transition: margin-left var(--transition-slow);
@@ -327,8 +330,8 @@
   /* App-Icon als kompaktes Logo */
   .nav-sidebar__logo::before {
     content: 'O';
-    width: 32px;
+    width: var(--target-sm);
-    height: 32px;
+    height: var(--target-sm);
     border-radius: var(--radius-sm);
     background: linear-gradient(135deg, var(--color-accent) 0%, #7C5CFC 100%);
     color: var(--color-text-on-accent);
@@ -363,7 +366,7 @@
     justify-content: center;
     align-items: center;
     border-radius: var(--radius-sm);
-    padding: 8px var(--space-2);
+    padding: var(--space-2) var(--space-2);
     gap: 0;
     min-height: var(--target-lg);
     font-size: var(--text-sm);
@@ -462,7 +465,7 @@
   /* Nav-Items: horizontal mit Label */
   .nav-sidebar .nav-item {
     justify-content: flex-start;
-    padding: 8px var(--space-3);
+    padding: var(--space-2) var(--space-3);
     gap: var(--space-3);
   }
 
@@ -669,8 +672,8 @@
 }
 
 .modal-panel__close {
-  width: 32px;
+  width: var(--target-sm);
-  height: 32px;
+  height: var(--target-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -748,7 +751,7 @@
     left: 50%;
     transform: translateX(-50%);
     width: 36px;
-    height: 4px;
+    height: var(--space-1);
     background: var(--color-border);
     border-radius: var(--radius-full);
   }
@@ -908,8 +911,8 @@
 @media (min-width: 1024px) {
   .fab {
     bottom: var(--space-8);
-    width: 48px;
+    width: var(--target-lg);
-    height: 48px;
+    height: var(--target-lg);
   }
 }
 
@@ -1427,8 +1430,8 @@
 }
 
 .rrule-day {
-  width: 40px;
+  width: var(--target-md);
-  height: 40px;
+  height: var(--target-md);
   border-radius: var(--radius-sm);
   border: 1.5px solid var(--color-border);
   background: transparent;
@@ -1514,7 +1517,7 @@
   height: 14px;
   margin-top: -7px;
   margin-left: -7px;
-  border: 2px solid rgba(255, 255, 255, 0.35);
+  border: 2px solid var(--color-glass-hover);
   border-top-color: var(--color-text-on-accent);
   border-radius: var(--radius-full);
   animation: btn-spin 0.55s linear infinite;