feat(ui): one CountBadge for all counters; counters on tab corners

- CountBadge component (accent / muted, inline / corner, 99+, showZero);
  used in the nav bar, task list and list tabs, admin organizations and
  numeric badges of the mobile menu; old badge-count removed
- Counters sit on the top right corner of tabs; "Alle Aufgaben" gets one
  (desktop tab and mobile menu)
- Open/done task counters include tasks in shared lists, matching what
  "Alle Aufgaben" shows (nav counter was too low)
- Theme template derives --accent-dim/--accent-border from the accent
- Docs: ui-patterns counters section

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

frontend/src/components/__tests__/CountBadge.test.tsx

@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { CountBadge } from '../CountBadge';
+
+describe('CountBadge', () => {
+  it('hides itself at zero unless asked', () => {
+    expect(render(<CountBadge count={0} />).container.firstChild).toBeNull();
+    expect(render(<CountBadge count={undefined} />).container.firstChild).toBeNull();
+    expect(render(<CountBadge count={0} showZero />).container.textContent).toBe('0');
+  });
+
+  it('caps large numbers and keeps the real value for screen readers', () => {
+    const el = render(<CountBadge count={150} />).container.firstChild as HTMLElement;
+    expect(el.textContent).toBe('99+');
+    expect(el.getAttribute('aria-label')).toBe('150');
+  });
+
+  it('maps variant and position to the shared classes', () => {
+    const el = render(<CountBadge count={3} variant="accent" position="corner" />).container.firstChild as HTMLElement;
+    expect(el.className).toContain('count-badge-accent');
+    expect(el.className).toContain('count-badge-corner');
+  });
+});