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;
+}

frontend/src/components/AchievementBadge.module.css

@@ -0,0 +1,167 @@
+/* ═══ Achievement Badge — Premium Gaming Style ═══ */
+
+.badge {
+  position: relative;
+  background: var(--surface-mid);
+  border-radius: var(--radius-md);
+  padding: 20px 12px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+  transition: transform 0.2s;
+}
+
+.badge:active {
+  transform: scale(0.97);
+}
+
+/* ── Unlocked ── */
+.unlocked {
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.glow {
+  position: absolute;
+  inset: -4px;
+  border-radius: inherit;
+  filter: blur(20px);
+  opacity: 0.5;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ── Locked ── */
+.locked {
+  opacity: 0.45;
+  filter: grayscale(0.7);
+}
+
+.lockOverlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.lockCircle {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* ── Icon ── */
+.iconWrap {
+  position: relative;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+  z-index: 1;
+}
+
+.iconGlow {
+  position: absolute;
+  inset: -8px;
+  border-radius: 50%;
+  filter: blur(16px);
+  pointer-events: none;
+}
+
+.icon {
+  font-size: 42px;
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Text ── */
+.name {
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 2px;
+  position: relative;
+  z-index: 1;
+}
+
+.desc {
+  font-size: 0.6rem;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Rank Badge (unlocked) ── */
+.rankBadge {
+  font-size: 0.55rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 3px 10px;
+  border-radius: 20px;
+  border: 1px solid;
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Progress (locked) ── */
+.progress {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+.progressBar {
+  flex: 1;
+  height: 4px;
+  background: var(--surface-high);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progressFill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.5s ease;
+}
+
+.progressText {
+  font-size: 0.55rem;
+  color: var(--text-muted);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* ── Light Mode ── */
+:global([data-theme="light"]) .badge {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+:global([data-theme="light"]) .locked {
+  opacity: 0.35;
+}
+
+:global([data-theme="light"]) .lockCircle {
+  background: rgba(255, 255, 255, 0.8);
+  color: rgba(0, 0, 0, 0.4);
+}

frontend/src/components/AchievementBadge.tsx

@@ -0,0 +1,70 @@
+import { Achievement } from '../api/client';
+import styles from './AchievementBadge.module.css';
+
+interface Props {
+  achievement: Achievement;
+}
+
+export default function AchievementBadge({ achievement }: Props) {
+  const { name, description, icon, color, rankLabel, unlocked, current, target } = achievement;
+
+  return (
+    <div className={`${styles.badge} ${unlocked ? styles.unlocked : styles.locked}`}>
+      {/* Glow background for unlocked */}
+      {unlocked && (
+        <div className={styles.glow} style={{ background: `${color}20` }} />
+      )}
+
+      {/* Lock overlay for locked */}
+      {!unlocked && (
+        <div className={styles.lockOverlay}>
+          <div className={styles.lockCircle}>
+            <span className="material-symbols-outlined" style={{ fontSize: 18 }}>lock</span>
+          </div>
+        </div>
+      )}
+
+      {/* Icon */}
+      <div className={styles.iconWrap}>
+        {unlocked && (
+          <div className={styles.iconGlow} style={{ background: `${color}30` }} />
+        )}
+        <span
+          className={`material-symbols-outlined ${styles.icon}`}
+          style={{
+            color: unlocked ? color : 'var(--text-muted)',
+            fontVariationSettings: "'FILL' 1",
+            filter: unlocked ? `drop-shadow(0 0 10px ${color}cc)` : 'none',
+          }}
+        >
+          {icon}
+        </span>
+      </div>
+
+      {/* Name + Description */}
+      <h3 className={styles.name}>{name}</h3>
+      <p className={styles.desc}>{description}</p>
+
+      {/* Progress or Rank label */}
+      {unlocked ? (
+        <div className={styles.rankBadge} style={{
+          background: `${color}15`,
+          borderColor: `${color}40`,
+          color: color,
+        }}>
+          {rankLabel}
+        </div>
+      ) : (
+        <div className={styles.progress}>
+          <div className={styles.progressBar}>
+            <div
+              className={styles.progressFill}
+              style={{ width: `${achievement.progress}%`, background: color }}
+            />
+          </div>
+          <span className={styles.progressText}>{current}/{target}</span>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/index.css

@@ -2,6 +2,9 @@
    WM 2026 Tippspiel — Stadium Elite Design System
    ============================================================ */
 
+/* Material Symbols — filled icons for badges */
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@400,1&display=swap');
+
 /* Stadium LED Segment Display Font */
 @font-face {
   font-family: 'DSEG7';

frontend/src/pages/ProfilePage.module.css

@@ -246,10 +246,47 @@
   margin-top: 8px;
 }
 
+.achievementsHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.achievementsCount {
+  font-size: 1.1rem;
+  font-weight: 800;
+  color: var(--text-primary);
+}
+
+.achievementsProgress {
+  margin-bottom: 14px;
+}
+
+.achievementsBar {
+  height: 6px;
+  background: var(--surface-high);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.achievementsFill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--primary), var(--gold));
+  border-radius: 3px;
+  transition: width 0.5s ease;
+}
+
 .badgeGrid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+@media (min-width: 500px) {
+  .badgeGrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 @media (min-width: 768px) {
@@ -258,9 +295,9 @@
   }
 }
 
-.badge {
-  display: flex;
-  flex-direction: column;
+/* Remove old placeholder styles — now in AchievementBadge component */
+.badge_placeholder_removed {
+  display: none;
   align-items: center;
   gap: 4px;
   padding: 14px 8px;

frontend/src/pages/ProfilePage.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
-import { api, UserStats, MyTip } from '../api/client';
+import { api, UserStats, MyTip, Achievement } from '../api/client';
 import StatsRing from '../components/StatsRing';
+import AchievementBadge from '../components/AchievementBadge';
 import styles from './ProfilePage.module.css';
 
 function initials(name: string) {
@@ -30,6 +31,8 @@ function homeWinPct(tips: MyTip[]): number {
 export default function ProfilePage() {
   const [stats, setStats]           = useState<UserStats | null>(null);
   const [tips, setTips]             = useState<MyTip[]>([]);
+  const [achievements, setAchievements] = useState<Achievement[]>([]);
+  const [unlockedCount, setUnlockedCount] = useState(0);
   const [loading, setLoading]       = useState(true);
   const [teamEdit, setTeamEdit]     = useState(false);
   const [teamValue, setTeamValue]   = useState('');
@@ -40,10 +43,13 @@ export default function ProfilePage() {
     Promise.all([
       api.getMyStats(),
       api.getMyTips(),
-    ]).then(([s, t]) => {
+      api.getAchievements(),
+    ]).then(([s, t, a]) => {
       setStats(s);
       setTeamValue(s.team ?? '');
       setTips(t.tips);
+      setAchievements(a.achievements);
+      setUnlockedCount(a.unlockedCount);
     }).finally(() => setLoading(false));
   }, []);
 
@@ -203,23 +209,25 @@ export default function ProfilePage() {
         </div>
       )}
 
-      {/* Achievements (Phase 2 placeholder) */}
+      {/* Achievements */}
       <div className={styles.achievementsSection}>
-        <h3 className={styles.sectionTitle}>Erfolge</h3>
-        <div className={styles.badgeGrid}>
-          {[
-            { icon: '🎯', label: 'Scharfschütze', desc: '5 exakte Treffer' },
-            { icon: '🔥', label: 'Serien-Tipper', desc: '10er Streak' },
-            { icon: '🏆', label: 'Tabellenführer', desc: 'Platz 1 erreichen' },
-            { icon: '⚡', label: 'Frühtipper', desc: 'Alle Tipps 24h vorher' },
-            { icon: '🌍', label: 'Globetrotter', desc: 'Alle Gruppen getippt' },
-            { icon: '💎', label: 'Diamant', desc: '20 exakte Treffer' },
-          ].map((badge, i) => (
-            <div key={i} className={styles.badge}>
-              <span className={styles.badgeIcon}>{badge.icon}</span>
-              <span className={styles.badgeName}>{badge.label}</span>
-              <span className={styles.badgeDesc}>{badge.desc}</span>
+        <div className={styles.achievementsHeader}>
+          <h3 className={styles.sectionTitle}>Erfolge</h3>
+          <span className={styles.achievementsCount}>{unlockedCount}/{achievements.length}</span>
+        </div>
+        {achievements.length > 0 && (
+          <div className={styles.achievementsProgress}>
+            <div className={styles.achievementsBar}>
+              <div
+                className={styles.achievementsFill}
+                style={{ width: `${(unlockedCount / achievements.length) * 100}%` }}
+              />
             </div>
+          </div>
+        )}
+        <div className={styles.badgeGrid}>
+          {achievements.map(a => (
+            <AchievementBadge key={a.id} achievement={a} />
           ))}
         </div>
       </div>