fix(ux): improve microinteractions across the app

1. Nav-item tap: smooth scale transition instead of abrupt snap
2. Custom toggle switch: iOS-style toggle replaces native checkboxes
3. Focus-visible: outline on cards, buttons, FABs for keyboard users
4. Empty-state: gentle fade-in animation
5. Toast icons: SVG icons for success/danger/warning types
6. Swipe haptic: vibrate(15) fires at threshold during touchmove

public/styles/layout.css

@@ -179,7 +179,7 @@
   gap: 2px;
   padding: var(--space-1) var(--space-1);
   color: var(--color-text-tertiary);
-  transition: color var(--transition-fast);
+  transition: color var(--transition-fast), transform 0.12s ease;
   -webkit-tap-highlight-color: transparent;
   min-height: var(--target-lg);
   min-width: var(--target-lg);
@@ -188,6 +188,7 @@
 
 .nav-item:active {
   transform: scale(0.92);
+  transition-duration: 0.06s;
 }
 
 /* ── Nav-Item: Aktiv ── */
@@ -242,6 +243,11 @@
   transform: scale(0.92);
 }
 
+.page-fab:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
 /* Desktop: FAB Position anpassen (keine Bottom-Nav) und etwas kleiner */
 @media (min-width: 1024px) {
   .page-fab {
@@ -557,6 +563,11 @@
   transform: scale(0.99);
 }
 
+.card--interactive:focus-visible {
+  outline: 2px solid var(--active-module-accent, var(--color-accent));
+  outline-offset: 2px;
+}
+
 @media (min-width: 1024px) {
   .card--padded {
     padding: var(--space-5);
@@ -773,6 +784,11 @@
   transform: scale(0.98);
 }
 
+.btn:focus-visible {
+  outline: 2px solid var(--active-module-accent, var(--color-accent));
+  outline-offset: 2px;
+}
+
 .btn--primary {
   background-color: var(--color-btn-primary);
   color: #ffffff;
@@ -864,6 +880,11 @@
   transform: scale(0.95);
 }
 
+.fab:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
 @media (min-width: 1024px) {
   .fab {
     bottom: var(--space-8);
@@ -961,6 +982,74 @@
   display: flex;
 }
 
+/* --------------------------------------------------------
+ * Toggle-Switch
+ * Custom iOS-style toggle, ersetzt native Checkboxen.
+ * Usage: <label class="toggle"><input type="checkbox"><span class="toggle__track"></span></label>
+ * -------------------------------------------------------- */
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  gap: var(--space-3);
+}
+
+.toggle input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+}
+
+.toggle__track {
+  position: relative;
+  width: 44px;
+  height: 26px;
+  background-color: var(--neutral-300);
+  border-radius: var(--radius-full);
+  transition: background-color 0.2s ease;
+  flex-shrink: 0;
+}
+
+.toggle__track::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 20px;
+  height: 20px;
+  background: #fff;
+  border-radius: var(--radius-full);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  transition: transform 0.2s var(--ease-out);
+}
+
+.toggle input:checked + .toggle__track {
+  background-color: var(--active-module-accent, var(--color-accent));
+}
+
+.toggle input:checked + .toggle__track::after {
+  transform: translateX(18px);
+}
+
+.toggle input:focus-visible + .toggle__track {
+  outline: 2px solid var(--active-module-accent, var(--color-accent));
+  outline-offset: 2px;
+}
+
+.toggle input:disabled + .toggle__track {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toggle__track,
+  .toggle__track::after {
+    transition: none;
+  }
+}
+
 /* --------------------------------------------------------
  * Skeleton-Loading
  * -------------------------------------------------------- */
@@ -992,6 +1081,16 @@
   gap: var(--space-3);
   padding: var(--space-12) var(--space-6);
   text-align: center;
+  animation: empty-state-in 0.4s var(--ease-out) both;
+}
+
+@keyframes empty-state-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .empty-state { animation: none; }
 }
 
 .empty-state__icon {
@@ -1212,6 +1311,9 @@
 }
 
 .toast {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
   background-color: var(--neutral-800);
   color: var(--neutral-50);
   padding: var(--space-3) var(--space-4);
@@ -1222,6 +1324,12 @@
   animation: toast-in 0.25s var(--ease-out) forwards;
 }
 
+.toast__icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
 .toast--success { background-color: var(--color-success); color: #fff; }
 .toast--danger  { background-color: var(--color-danger);  color: #fff; }
 .toast--warning { background-color: var(--color-warning); color: #fff; }