feat(a11y): WCAG 2.2 accessibility fixes across four areas

- modal/_validateField: set aria-invalid on invalid inputs so screen readers
  announce field errors; login.js mirrors this for username/password fields
- color pickers (notes, calendar): wrap swatches in role="radiogroup" with
  aria-labelledby, add aria-checked per swatch, localized aria-labels instead
  of hex values, roving tabindex with Arrow/Enter/Space keyboard navigation
- nav badges: badge spans get aria-hidden="true"; nav link aria-label updated
  to include overdue count (tasks) or pending reminder count (reminders)
- router: remove aria-live from <main> (caused full page re-reads on nav);
  add dedicated #route-announcer sr-only region with aria-live=polite +
  aria-atomic, announces page label 50ms after render completes

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

public/locales/de.json

@@ -170,7 +170,8 @@
     "filterGroupStatus": "Status",
     "filterGroupPriority": "Priorität",
     "filterGroupPerson": "Person",
-    "filterClearAll": "Alle Filter zurücksetzen"
+    "filterClearAll": "Alle Filter zurücksetzen",
+    "navLabelOverdue": "Aufgaben, {{count}} überfällig"
   },
   "shopping": {
     "title": "Einkauf",
@@ -299,7 +300,17 @@
     "locationPlaceholder": "Optional",
     "assignedLabel": "Zugewiesen an",
     "assignedNobody": "- Niemand -",
-    "colorLabel": "Farbe {{color}}",
+    "colorLabel": "Farbe",
+    "colorBlue": "Blau",
+    "colorGreen": "Grün",
+    "colorOrange": "Orange",
+    "colorRed": "Rot",
+    "colorPurple": "Lila",
+    "colorCoral": "Korall",
+    "colorSkyBlue": "Hellblau",
+    "colorYellow": "Gelb",
+    "colorGray": "Grau",
+    "colorCyan": "Cyan",
     "descriptionLabel": "Beschreibung",
     "descriptionPlaceholder": "Optional…",
     "popupEdit": "Bearbeiten",
@@ -379,7 +390,15 @@
     "formatLink": "Link",
     "formatCode": "Code",
     "formatQuote": "Zitat",
-    "formatDivider": "Trennlinie"
+    "formatDivider": "Trennlinie",
+    "colorYellow": "Gelb",
+    "colorAmber": "Hellgelb",
+    "colorGreen": "Grün",
+    "colorTeal": "Türkis",
+    "colorBlue": "Blau",
+    "colorPurple": "Lila",
+    "colorOrange": "Orange",
+    "colorWhite": "Weiß"
   },
   "contacts": {
     "title": "Kontakte",