style(ui): solid counters without the dark ring

The accent counter was a 10-16 % tint, so on the phone nav bar the icon
showed through; it now lies on an opaque panel. The ring in the page
colour looked like a black shadow in dark themes and is gone; text
counters overlap the word by 2 px instead.

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

Doku/ui-patterns.md

@@ -59,14 +59,14 @@ Komponente: [FormSheet.tsx](../frontend/src/components/FormSheet.tsx), Tastatur-
 
 Komponente: [CountBadge.tsx](../frontend/src/components/CountBadge.tsx), CSS-Klassen `count-badge*` in [index.css](../frontend/src/index.css). Es gibt keine anderen Zähler-Stile mehr.
 
-- **Form:** runder Kreis, mindestens 16 px, ab 100 als „99+“ (der Screenreader liest die echte Zahl). Bei 0 ausgeblendet, außer mit `showZero` (z. B. Mitgliederzahl, mobiles Menü).
+- **Form:** runder, gefüllter Kreis mit dünnem Rand, ohne Schatten oder Ring, mindestens 16 px, ab 100 als „99+“ (der Screenreader liest die echte Zahl). Bei 0 ausgeblendet, außer mit `showZero` (z. B. Mitgliederzahl, mobiles Menü).
 - **Farbe (`variant`):**
   - `accent`: Hier wartet etwas auf dich. Navigationsleiste: Triage (Inbox), Aufgaben (offene Aufgaben), Listen (offene Einträge aller eigenen und geteilten Listen). Workspace hat keinen Zähler.
   - `muted` (Standard): reine Anzahl. Tabs der Aufgabenlisten und Listen, Organisationen, mobiles Menü.
-  - Beide kommen aus den Theme-Variablen (`--accent-primary`/`--text-on-accent` bzw. `--text-muted`/`--bg-panel`) und passen sich damit jedem Theme an.
+  - Beide kommen aus den Theme-Variablen (`--accent-primary`/`--text-on-accent` bzw. `--text-muted`/`--bg-panel`) und passen sich damit jedem Theme an. Der Akzent liegt auf einer deckenden Panel-Fläche, damit am Handy das Icon darunter nicht durchscheint.
 - **Position (`position`):**
-  - `text`: an Beschriftungen (Navigation, Reiter der Aufgabenlisten und Listen, Workspace-Kopf). Der Zähler steht im Textfluss direkt hinter dem Wort, leicht angehoben, und schließt direkt an; nur sein Ring in Seitenfarbe hängt 2 px über den letzten Buchstaben, egal wie viele Stellen die Zahl hat; breitere Zahlen machen den Reiter breiter. Der Text steht dafür in einem `inline-flex items-center`-Span.
+  - `text`: an Beschriftungen (Navigation, Reiter der Aufgabenlisten und Listen, Workspace-Kopf). Der Zähler steht im Textfluss direkt hinter dem Wort, leicht angehoben, und hängt immer 2 px über den letzten Buchstaben, egal wie viele Stellen die Zahl hat; breitere Zahlen machen den Reiter breiter. Der Text steht dafür in einem `inline-flex items-center`-Span.
-  - `corner`: Benachrichtigungs-Badge oben rechts am nächsten `relative` Elternelement, mit Ring in der Seitenfarbe; für Icons, z. B. in der mobilen Leiste (`-top-1.5 -right-2.5`).
+  - `corner`: Benachrichtigungs-Badge oben rechts am nächsten `relative` Elternelement; für Icons, z. B. in der mobilen Leiste (`-top-1.5 -right-2.5`).
   - `inline`: im Textfluss.
 - Zahlen im mobilen Menü (`MobileActionContext`, `badge: number`) werden automatisch als `CountBadge` gezeigt; Text-Badges wie „2 aktiv“ bleiben Textmarken.
 - **Wichtig für neue Klassen:** Tailwind entfernt Klassen aus `@layer components`, die nicht wörtlich im Code stehen. Klassennamen deshalb nie zusammensetzen (`count-badge-${variant}`), sondern ausschreiben.

frontend/src/index.css

@@ -322,7 +322,8 @@ body {
     pointer-events: none;
   }
   .count-badge-accent {
-    background: var(--accent-dim);
+    /* The tint on an opaque panel: the badge stays solid on top of icons (phone nav bar) */
+    background: linear-gradient(var(--accent-dim), var(--accent-dim)), var(--bg-panel);
     color: var(--accent-primary);
     border: 1px solid var(--accent-border);
   }
@@ -336,16 +337,14 @@ body {
     top: -0.5rem;
     right: -0.5rem;
     z-index: 1;
-    /* ring in the page colour keeps the badge readable on top of borders */
-    box-shadow: 0 0 0 2px var(--bg-app);
   }
-  /* In the text flow right after a label: only the ring hangs over the last letter (2 px), however many
+  /* In the text flow right after a label: hangs 2 px over the last letter, however many digits; wider
-     digits; wider numbers make the tab wider instead of covering more of the word */
+     numbers make the tab wider instead of covering more of the word */
   .count-badge-text {
     position: relative;
     top: -0.375rem;
+    margin-left: -2px;
     z-index: 1;
-    box-shadow: 0 0 0 2px var(--bg-app);
   }
 
   .badge-ok {