diff --git a/Doku/ui-patterns.md b/Doku/ui-patterns.md
index fe6a27b..0c2e1f5 100644
--- a/Doku/ui-patterns.md
+++ b/Doku/ui-patterns.md
@@ -41,8 +41,15 @@ Komponente: [ToggleSwitch.tsx](../frontend/src/components/ToggleSwitch.tsx)
## Zähler
-CSS-Klasse `badge-count` in [index.css](../frontend/src/index.css): runder Zähler in der Form der Zähler der Navigationsleiste, aber **monochrom** (grau gefüllt) statt in der Akzentfarbe.
+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.
-- Verwendet für die Anzahl offener Einträge in den Tabs der Aufgabenlisten und der Listen.
-- Die Zähler der Navigationsleiste bleiben blau (Akzent), weil sie auf neue Inhalte aufmerksam machen.
-- Kein eckiges `badge-neutral` mehr für Zähler in Tabs.
+- **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ü).
+- **Farbe (`variant`):**
+ - `accent`: Hier wartet etwas auf dich. Navigationsleiste (Triage, Workspace, Aufgaben).
+ - `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.
+- **Position (`position`):**
+ - `corner`: Benachrichtigungs-Badge oben rechts am nächsten `relative` Elternelement, mit Ring in der Seitenfarbe. So in der Navigation und an den Tabs. Zeilen mit solchen Tabs brauchen etwas Abstand (`gap-x-3`, `pt-2`), damit der Kreis nicht in den Nachbar-Tab ragt.
+ - `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.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index dc7b0b2..fc2a4f3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -43,6 +43,7 @@ import {
ThemeId,
} from './lib/theme';
import { InstantCaptureBar } from './features/capture/InstantCaptureBar';
+import { CountBadge } from './components/CountBadge';
import { TriageDeck } from './features/triage/TriageDeck';
import { TasksView } from './features/triage/TasksView';
import { WorkspaceView } from './features/workspace/WorkspaceView';
@@ -905,11 +906,7 @@ export const App: React.FC = () => {
0 ? 'pr-2' : ''}`}>
Triage
- {stats.inboxCount > 0 && (
-
- {stats.inboxCount}
-
- )}
+
@@ -923,11 +920,7 @@ export const App: React.FC = () => {
0 ? 'pr-2' : ''}`}>
Workspace
- {(stats.docsTodosOpenCount ?? 0) > 0 && (
-
- {stats.docsTodosOpenCount}
-
- )}
+
@@ -941,11 +934,7 @@ export const App: React.FC = () => {
0 ? 'pr-2' : ''}`}>
Aufgaben
- {stats.tasksOpenCount > 0 && (
-
- {stats.tasksOpenCount}
-
- )}
+
@@ -1002,6 +991,7 @@ export const App: React.FC = () => {
onOpenDocument={handleOpenDocument}
refreshTrigger={refreshRevision}
initialSelectedTaskId={selectedTaskId}
+ openTasksCount={stats.tasksOpenCount}
/>
)}
@@ -1072,11 +1062,7 @@ export const App: React.FC = () => {
>