feat: premium achievement badges with Material Symbols icons

Backend:
- New /api/achievements endpoint calculating 6 badges:
  Scharfschütze, Serien-Tipper, Tabellenführer, Frühtipper,
  Globetrotter, Diamant
- Each with progress tracking (current/target)

Frontend:
- AchievementBadge component with Stitch-inspired design
- Material Symbols Outlined font (filled icons)
- Unlocked: colored icon with glow + drop-shadow, rank label
- Locked: grayscale, lock overlay, progress bar
- ProfilePage: real badges replacing emoji placeholders
- Progress bar showing X/6 collected
- Mobile: 2-col grid, Desktop: 6-col grid

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/api/client.ts

@@ -56,6 +56,9 @@ export const api = {
   // Dashboard
   getDashboard: () => request<DashboardData>('/dashboard'),
 
+  // Achievements
+  getAchievements: () => request<AchievementsData>('/achievements'),
+
   // Admin
   syncMatches: () =>
     request<{ success: boolean; total: number; created: number; updated: number }>(
@@ -151,3 +154,22 @@ export interface UserStats {
   wrongCount: number;
   accuracy: number;
 }
+
+export interface Achievement {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  color: string;
+  rankLabel: string;
+  unlocked: boolean;
+  progress: number;
+  current: number;
+  target: number;
+}
+
+export interface AchievementsData {
+  achievements: Achievement[];
+  unlockedCount: number;
+  total: number;
+}