feat: achievement badge placeholders on profile page (Phase 2 prep)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/DashboardPage.tsx

@@ -173,8 +173,22 @@ export default function DashboardPage(_props: Props) {
       </div>
 
       {/* Nudges */}
-      {nudges.length > 0 && (
+      {(streakBroken || nudges.length > 0) && (
         <div className={styles.nudges}>
+          {streakBroken && (
+            <div
+              className={`card ${styles.nudge} ${styles.nudgeStreak}`}
+              onClick={() => {
+                localStorage.removeItem(STREAK_KEY);
+                navigate('/spiele');
+              }}
+            >
+              <span className={styles.nudgeIcon}>💔</span>
+              <span className={styles.nudgeText}>
+                Deine {lastStreak}er-Serie ist gerissen! Starte eine neue.
+              </span>
+            </div>
+          )}
           {nudges.map((nudge, i) => (
             <div
               key={i}

frontend/src/pages/ProfilePage.module.css

@@ -240,3 +240,45 @@
   color: var(--text-primary);
   word-break: break-all;
 }
+
+/* ── Achievements ── */
+.achievementsSection {
+  margin-top: 8px;
+}
+
+.badgeGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px 8px;
+  background: var(--surface-mid);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-subtle);
+  opacity: 0.4;
+  filter: grayscale(0.8);
+  position: relative;
+}
+
+.badgeIcon {
+  font-size: 1.5rem;
+}
+
+.badgeName {
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  text-align: center;
+}
+
+.badgeDesc {
+  font-size: 0.6rem;
+  color: var(--text-muted);
+  text-align: center;
+}

frontend/src/pages/ProfilePage.tsx

@@ -202,6 +202,27 @@ export default function ProfilePage() {
           </div>
         </div>
       )}
+
+      {/* Achievements (Phase 2 placeholder) */}
+      <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>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }