a11y: Touch-Target System mit Token-basierter Sizing (Redesign Phase E)

- Neue Tokens: --target-sm (32px), --target-md (40px), --target-lg (48px)
- Globale min-height:44px Regel aus reset.css entfernt
- Alle 28 min-height:unset Overrides eliminiert
- Strategy A: Buttons, Nav-Items, Inputs → 48px mobile, 40px desktop
- Strategy B: Kleine Elemente (Checkboxen, Swatches, Delete-Buttons)
  → ::before Pseudo-Element expandiert Touch-Area auf 48×48px

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/styles/budget.css

@@ -259,7 +259,13 @@
   justify-content: center;
   opacity: 0;
   transition: opacity var(--transition-fast), color var(--transition-fast);
-  min-height: unset;
+  position: relative;
+}
+
+.budget-entry__delete::before {
+  content: '';
+  position: absolute;
+  inset: -10px;
 }
 
 .budget-entry:hover .budget-entry__delete {
@@ -308,7 +314,7 @@
   background: none;
   color: var(--color-text-secondary);
   transition: all var(--transition-fast);
-  min-height: unset;
+  min-height: var(--target-lg);
 }
 
 .amount-type-btn--income.amount-type-btn--active {

public/styles/calendar.css

@@ -79,7 +79,7 @@
   color: var(--color-text-secondary);
   cursor: pointer;
   transition: all var(--transition-fast);
-  min-height: unset;
+  min-height: var(--target-lg);
   white-space: nowrap;
 }
 
@@ -530,6 +530,14 @@
   border: 2px solid transparent;
   cursor: pointer;
   transition: transform var(--transition-fast), border-color var(--transition-fast);
+  position: relative;
+}
+
+.color-swatch::before {
+  content: '';
+  position: absolute;
+  inset: -10px;
+  border-radius: var(--radius-full);
 }
 
 .color-swatch:hover {

public/styles/contacts.css

@@ -203,7 +203,7 @@
   justify-content: center;
   color: var(--color-text-secondary);
   transition: background-color var(--transition-fast), color var(--transition-fast);
-  min-height: unset;
+  min-height: var(--target-lg);
   text-decoration: none;
 }
 

public/styles/layout.css

@@ -152,7 +152,8 @@
   color: var(--color-text-tertiary);
   transition: color var(--transition-fast);
   -webkit-tap-highlight-color: transparent;
-  min-height: unset;
+  min-height: var(--target-lg);
+  min-width: var(--target-lg);
   text-decoration: none;
 }
 
@@ -322,7 +323,7 @@
     border-radius: var(--radius-sm);
     padding: 8px var(--space-2);
     gap: 0;
-    min-height: unset;
+    min-height: var(--target-lg);
     font-size: var(--text-sm);
     color: var(--color-text-secondary);
     background: transparent;
@@ -629,6 +630,13 @@
   border-radius: var(--radius-full);
   color: var(--color-text-secondary);
   transition: background-color var(--transition-fast);
+  position: relative;
+}
+
+.modal-panel__close::before {
+  content: '';
+  position: absolute;
+  inset: -8px;
 }
 
 .modal-panel__close:hover {
@@ -678,7 +686,7 @@
   border-radius: var(--radius-sm);
   font-size: var(--text-sm);
   font-weight: var(--font-weight-medium);
-  min-height: 36px;
+  min-height: var(--target-lg);
   transition:
     background-color var(--transition-fast),
     box-shadow var(--transition-fast),
@@ -687,10 +695,9 @@
   white-space: nowrap;
 }
 
-/* Touch-Targets: 44px auf Mobile */
+@media (min-width: 1024px) {
-@media (max-width: 1023px) {
   .btn {
-    min-height: 44px;
+    min-height: var(--target-md);
   }
 }
 
@@ -747,15 +754,15 @@
 
 .btn--icon {
   padding: var(--space-2);
-  min-height: 36px;
+  min-height: var(--target-lg);
-  min-width: 36px;
+  min-width: var(--target-lg);
   border-radius: var(--radius-sm);
 }
 
-@media (max-width: 1023px) {
+@media (min-width: 1024px) {
   .btn--icon {
-    min-height: 44px;
+    min-height: var(--target-md);
-    min-width: 44px;
+    min-width: var(--target-md);
   }
 }
 
@@ -807,12 +814,12 @@
   color: var(--color-text-primary);
   font-size: var(--text-md);
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
-  min-height: 44px;
+  min-height: var(--target-lg);
 }
 
 @media (min-width: 1024px) {
   .input {
-    min-height: 36px;
+    min-height: var(--target-md);
     font-size: var(--text-base);
   }
 }
@@ -1172,7 +1179,13 @@
   align-items: center;
   justify-content: center;
   transition: all var(--transition-fast);
-  min-height: unset;
+  position: relative;
+}
+
+.rrule-day::before {
+  content: '';
+  position: absolute;
+  inset: -4px;
 }
 
 .rrule-day:hover {

public/styles/meals.css

@@ -161,7 +161,7 @@
   font-size: var(--text-sm);
   padding: var(--space-2);
   transition: color var(--transition-fast);
-  min-height: unset;
+  min-height: var(--target-lg);
 }
 
 .meal-slot__add-btn:hover {
@@ -230,10 +230,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: unset;
+  position: relative;
   transition: color var(--transition-fast), background-color var(--transition-fast);
 }
 
+.meal-card__action-btn::before {
+  content: '';
+  position: absolute;
+  inset: -12px;
+}
+
 .meal-card__action-btn:hover {
   color: var(--color-danger);
   background-color: var(--color-surface-2);
@@ -310,10 +316,16 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  min-height: unset;
+  position: relative;
   transition: color var(--transition-fast);
 }
 
+.ingredient-row__remove::before {
+  content: '';
+  position: absolute;
+  inset: -8px;
+}
+
 .ingredient-row__remove:hover {
   color: var(--color-danger);
 }
@@ -328,7 +340,7 @@
   border: none;
   cursor: pointer;
   padding: var(--space-1) 0;
-  min-height: unset;
+  min-height: var(--target-lg);
 }
 
 /* Einkaufsliste-Auswahl im Modal */

public/styles/notes.css

@@ -98,12 +98,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: unset;
+  position: relative;
   opacity: 0;
   transition: opacity var(--transition-fast), background-color var(--transition-fast);
   color: var(--color-text-primary);
 }
 
+.note-card__pin::before {
+  content: '';
+  position: absolute;
+  inset: -12px;
+}
+
 .note-card--pinned .note-card__pin {
   opacity: 1;
   background: var(--color-overlay-light);
@@ -177,12 +183,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: unset;
+  position: relative;
   color: var(--color-text-tertiary);
   opacity: 0;
   transition: opacity var(--transition-fast), background-color var(--transition-fast);
 }
 
+.note-card__delete::before {
+  content: '';
+  position: absolute;
+  inset: -12px;
+}
+
 .note-card:hover .note-card__delete {
   opacity: 1;
 }
@@ -229,10 +241,18 @@
   height: 28px;
   border-radius: var(--radius-full);
   border: 2px solid transparent;
+  position: relative;
   cursor: pointer;
   transition: transform var(--transition-fast), border-color var(--transition-fast);
 }
 
+.note-color-swatch::before {
+  content: '';
+  position: absolute;
+  inset: -10px;
+  border-radius: var(--radius-full);
+}
+
 .note-color-swatch:hover       { transform: scale(1.15); }
 .note-color-swatch--active     { border-color: var(--color-text-primary); transform: scale(1.1); }
 

public/styles/reset.css

@@ -59,11 +59,6 @@ h1, h2, h3, h4, h5, h6 {
   line-height: var(--line-height-tight);
 }
 
-/* Touch-Targets: Mindestgröße 44px */
-button, [role="button"], input[type="checkbox"], input[type="radio"] {
-  min-height: 44px;
-}
-
 /* Fokus-Styles (Accessibility) */
 :focus-visible {
   outline: 2px solid var(--color-accent);

public/styles/shopping.css

@@ -90,7 +90,7 @@
   cursor: pointer;
   flex-shrink: 0;
   transition: all var(--transition-fast);
-  min-height: unset;
+  min-height: var(--target-lg);
 }
 
 .list-tab__new:hover {
@@ -182,8 +182,8 @@
   color: var(--color-text-secondary);
   font-size: var(--text-sm);
   text-align: center;
-  min-height: unset;
+  min-height: var(--target-lg);
-  height: 30px;
+  height: auto;
 }
 
 .quick-add__qty:focus {
@@ -223,7 +223,7 @@
   cursor: pointer;
   flex-shrink: 0;
   transition: background-color var(--transition-fast);
-  min-height: unset;
+  min-height: var(--target-lg);
 }
 
 .quick-add__btn:hover { background-color: var(--color-accent-hover); }
@@ -325,7 +325,13 @@
   align-items: center;
   justify-content: center;
   transition: all var(--transition-fast);
-  min-height: unset;
+  position: relative;
+}
+
+.item-check::before {
+  content: '';
+  position: absolute;
+  inset: -12px;
 }
 
 .item-check--checked {
@@ -387,11 +393,17 @@
   cursor: pointer;
   opacity: 0;
   transition: opacity var(--transition-fast), color var(--transition-fast);
-  min-height: unset;
+  position: relative;
   border: none;
   flex-shrink: 0;
 }
 
+.item-delete::before {
+  content: '';
+  position: absolute;
+  inset: -8px;
+}
+
 .shopping-item:hover .item-delete,
 .shopping-item:focus-within .item-delete {
   opacity: 1;

public/styles/tasks.css

@@ -61,7 +61,7 @@
   font-weight: var(--font-weight-medium);
   color: var(--color-text-secondary);
   transition: background-color var(--transition-fast), color var(--transition-fast);
-  min-height: unset;
+  min-height: var(--target-lg);
   cursor: pointer;
 }
 
@@ -265,7 +265,13 @@
   align-items: center;
   justify-content: center;
   transition: border-color var(--transition-fast), background-color var(--transition-fast);
-  min-height: unset;
+  position: relative;
+}
+
+.task-status-btn::before {
+  content: '';
+  position: absolute;
+  inset: -13px;
 }
 
 .task-status-btn--done {
@@ -433,7 +439,13 @@
   align-items: center;
   justify-content: center;
   transition: all var(--transition-fast);
-  min-height: unset;
+  position: relative;
+}
+
+.subtask-item__checkbox::before {
+  content: '';
+  position: absolute;
+  inset: -15px;
 }
 
 .subtask-item__checkbox--done {
@@ -463,7 +475,7 @@
   cursor: pointer;
   text-align: left;
   margin-top: var(--space-2);
-  min-height: unset;
+  min-height: var(--target-lg);
   transition: border-color var(--transition-fast), color var(--transition-fast);
 }
 

public/styles/tokens.css

@@ -199,6 +199,13 @@
   --space-12: 48px;
   --space-16: 64px;
 
+  /* --------------------------------------------------------
+   * 11b. Touch-Target Sizes
+   * -------------------------------------------------------- */
+  --target-sm: 32px;
+  --target-md: 40px;
+  --target-lg: 48px;
+
   /* --------------------------------------------------------
    * 12. Layout
    * -------------------------------------------------------- */