style: premium Dashboard redesign inspired by Stitch mockups

Hero Card:
- Dramatic gradient background (navy → deep blue)
- Radial glow effect behind team flags (stadium atmosphere)
- LED kickoff time with golden glow
- Larger flag icons (72px) as app-icon style boxes
- Countdown as golden badge with pulsing dot
- Bigger CTA button with gradient and shadow

Bottom Nav:
- Filled/solid SVG icons (home, soccer ball, trophy, person)
  instead of Lucide outline icons — more premium feel

Nudges:
- Icon + text layout with hover animation
- Better spacing and visual hierarchy

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

frontend/src/components/BottomNav.tsx

@@ -1,5 +1,4 @@
 import { NavLink } from 'react-router-dom';
-import { Home, Trophy, User, Swords } from 'lucide-react';
 import styles from './BottomNav.module.css';
 
 export default function BottomNav() {
@@ -9,19 +8,19 @@ export default function BottomNav() {
   return (
     <nav className={styles.bottomNav}>
       <NavLink to="/" end className={linkClass}>
-        <Home size={20} />
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l9 8-1.4 1.3L18 10.8V20h-5v-6H11v6H6v-9.2l-1.6 1.5L3 11l9-8z"/></svg>
         <span>Home</span>
       </NavLink>
       <NavLink to="/spiele" className={linkClass}>
-        <Swords size={20} />
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 3.3l1.35-.95c1.82.56 3.37 1.76 4.38 3.34l-.39 1.34-1.35.46L13 6.7V5.3zm-3.35-.95L11 5.3v1.4L7.01 9.49l-1.35-.46-.39-1.34a9.972 9.972 0 014.38-3.34zM7.08 17.11l-1.14.1C4.73 15.81 4 13.99 4 12c0-.12.01-.23.02-.35l1-.73 1.38.48 1.46 4.34-.78 1.37zm7.42 2.48c-.79.26-1.63.41-2.5.41s-1.71-.15-2.5-.41l-.69-1.49.64-1.1h5.11l.64 1.11-.7 1.48zM14.27 15H9.73l-1.35-4.02L12 8.44l3.63 2.54L14.27 15zm3.79 2.21l-1.14-.1-.78-1.37 1.46-4.34 1.38-.48 1 .73c.01.12.02.23.02.35 0 1.99-.73 3.81-1.94 5.21z"/></svg>
         <span>Spiele</span>
       </NavLink>
       <NavLink to="/rangliste" className={linkClass}>
-        <Trophy size={20} />
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>
         <span>Rangliste</span>
       </NavLink>
       <NavLink to="/profil" className={linkClass}>
-        <User size={20} />
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
         <span>Profil</span>
       </NavLink>
     </nav>

frontend/src/pages/DashboardPage.module.css

@@ -2,14 +2,26 @@
   padding: 16px;
   max-width: 600px;
   margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
 
+/* ═══════════════════════════════════════
+   HERO CARD — Stadium atmosphere
+   ═══════════════════════════════════════ */
 .hero {
-  background: var(--surface-mid);
+  position: relative;
   border-radius: var(--radius-lg);
-  padding: 20px;
+  padding: 24px 20px 20px;
   cursor: pointer;
-  border: 1px solid rgba(75, 183, 248, 0.1);
+  overflow: hidden;
+  background: linear-gradient(165deg, #141e38 0%, #0d1526 40%, #091020 100%);
+  border: 1px solid rgba(75, 183, 248, 0.12);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    0 2px 8px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
   transition: transform 0.2s;
 }
 
@@ -17,122 +29,264 @@
   transform: scale(1.01);
 }
 
-.heroLabel {
+/* Radial glow behind the teams */
-  font-size: 0.75rem;
+.heroGlow {
-  text-transform: uppercase;
+  position: absolute;
-  letter-spacing: 1px;
+  top: 40%;
-  color: var(--text-secondary);
+  left: 50%;
+  width: 280px;
+  height: 200px;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(ellipse, rgba(75, 183, 248, 0.12) 0%, rgba(254, 174, 50, 0.06) 40%, transparent 70%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.heroHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  position: relative;
+  z-index: 1;
+  margin-bottom: 12px;
+}
+
+.heroLabel {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  color: var(--text-muted);
+  font-weight: 600;
 }
 
 .heroCountdown {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   color: var(--gold);
   font-weight: 700;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.5px;
+  background: rgba(254, 174, 50, 0.1);
+  padding: 4px 10px;
+  border-radius: 20px;
+  border: 1px solid rgba(254, 174, 50, 0.2);
 }
 
+.countdownDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--gold);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* LED Kickoff Time */
+.heroKickoff {
+  text-align: center;
+  position: relative;
+  z-index: 1;
+  margin-bottom: 8px;
+}
+
+.heroLED {
+  font-family: 'DSEG7', 'Courier New', monospace;
+  font-size: 22px;
+  color: #FECC4C;
+  letter-spacing: 0.04em;
+  text-shadow:
+    0 0 4px rgba(254, 174, 50, 0.9),
+    0 0 12px rgba(254, 174, 50, 0.5),
+    0 0 24px rgba(254, 174, 50, 0.25);
+}
+
+/* Teams */
 .heroTeams {
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
-  gap: 20px;
+  gap: 24px;
-  margin: 16px 0;
+  margin: 12px 0 20px;
+  position: relative;
+  z-index: 1;
 }
 
 .heroTeam {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
+  flex: 1;
+}
+
+.heroCrestBox {
+  width: 72px;
+  height: 72px;
+  border-radius: 18px;
+  background: var(--surface-high);
+  box-shadow:
+    0 4px 16px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
 }
 
 .heroCrest {
-  width: 48px;
+  width: 52px;
-  height: 48px;
+  height: 52px;
   object-fit: contain;
 }
 
-.heroVs {
+.heroCrestFallback {
-  font-size: 1.2rem;
+  font-size: 32px;
+}
+
+.heroTeamName {
+  font-size: 0.85rem;
   font-weight: 700;
-  color: var(--gold);
+  color: var(--text-primary);
-}
+  text-transform: uppercase;
-
+  letter-spacing: 0.5px;
-.heroTip {
-  background: var(--surface-high);
-  border-radius: var(--radius-sm);
-  padding: 8px 16px;
   text-align: center;
-  color: var(--gold);
-  font-weight: 600;
 }
 
+.heroVs {
+  font-size: 1.1rem;
+  font-weight: 800;
+  color: var(--gold);
+  margin-top: 24px;
+  text-shadow: 0 0 10px rgba(254, 174, 50, 0.3);
+}
+
+/* CTA / Tip */
 .heroTipBtn {
   display: block;
   width: 100%;
-  padding: 10px;
+  padding: 14px;
   border: none;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
-  background: var(--primary);
+  background: linear-gradient(135deg, var(--primary) 0%, #2196f3 100%);
   color: white;
-  font-weight: 600;
+  font-weight: 700;
+  font-size: 1rem;
   cursor: pointer;
-  font-size: 0.95rem;
+  position: relative;
+  z-index: 1;
+  box-shadow: 0 4px 20px rgba(75, 183, 248, 0.3);
+  transition: transform 0.15s, box-shadow 0.15s;
+  letter-spacing: 0.3px;
 }
 
+.heroTipBtn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 24px rgba(75, 183, 248, 0.4);
+}
+
+.heroTipBtn:active {
+  transform: scale(0.98);
+}
+
+.heroTip {
+  border-radius: var(--radius-sm);
+  padding: 10px 16px;
+  text-align: center;
+  color: var(--gold);
+  font-weight: 600;
+  font-size: 0.9rem;
+  background: rgba(254, 174, 50, 0.08);
+  border: 1px solid rgba(254, 174, 50, 0.15);
+  position: relative;
+  z-index: 1;
+}
+
+.heroEmpty {
+  text-align: center;
+  color: var(--text-muted);
+  margin: 24px 0;
+  position: relative;
+  z-index: 1;
+}
+
+/* ═══════════════════════════════════════
+   STATS ROW
+   ═══════════════════════════════════════ */
 .statsRow {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 8px;
-  margin: 16px 0;
 }
 
 .statTile {
-  background: var(--surface-mid);
+  padding: 16px 8px;
-  border-radius: var(--radius-md);
-  padding: 14px 8px;
   text-align: center;
-  border: 1px solid rgba(75, 183, 248, 0.08);
 }
 
 .statValue {
   display: block;
-  font-size: 1.5rem;
+  font-size: 1.6rem;
-  font-weight: 700;
+  font-weight: 800;
+  color: var(--text-primary);
+  line-height: 1;
+}
+
+.statGold {
   color: var(--gold);
 }
 
 .statLabel {
   display: block;
-  font-size: 0.7rem;
+  font-size: 0.65rem;
   color: var(--text-muted);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.8px;
-  margin-top: 4px;
+  margin-top: 6px;
+  font-weight: 600;
 }
 
+/* ═══════════════════════════════════════
+   NUDGES
+   ═══════════════════════════════════════ */
 .nudges {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 }
 
 .nudge {
-  background: var(--surface-low);
+  display: flex;
-  border-radius: var(--radius-sm);
+  align-items: center;
-  padding: 12px 16px;
+  gap: 12px;
-  color: var(--text-secondary);
+  padding: 14px 16px;
-  font-size: 0.9rem;
   cursor: pointer;
-  transition: background 0.2s;
+  transition: background 0.2s, transform 0.15s;
 }
 
 .nudge:hover {
-  background: var(--surface-mid);
+  transform: translateX(2px);
 }
 
+.nudgeIcon {
+  font-size: 1.2rem;
+  flex-shrink: 0;
+}
+
+.nudgeText {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+
+/* ═══════════════════════════════════════
+   STATES
+   ═══════════════════════════════════════ */
 .loading,
 .error {
   text-align: center;

frontend/src/pages/DashboardPage.tsx

@@ -16,10 +16,17 @@ function formatStreak(streak: number): string {
   return '0';
 }
 
+function formatKickoff(utcDate: string): string {
+  return new Date(utcDate).toLocaleString('de-DE', {
+    hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Berlin',
+  });
+}
+
 function formatCountdown(minutes: number): string {
-  if (minutes < 60) return `in ${minutes} Min`;
+  if (minutes < 60) return `in ${Math.round(minutes)} Min`;
   if (minutes < 60 * 24) return `in ${Math.floor(minutes / 60)}h`;
-  return `in ${Math.floor(minutes / (60 * 24))} Tagen`;
+  const days = Math.floor(minutes / (60 * 24));
+  return `in ${days} ${days === 1 ? 'Tag' : 'Tagen'}`;
 }
 
 export default function DashboardPage(_props: Props) {
@@ -45,46 +52,55 @@ export default function DashboardPage(_props: Props) {
   return (
     <div className={styles.dashboard}>
       {/* Hero Card */}
-      <div className={`card ${styles.hero}`} onClick={() => navigate('/spiele')}>
+      <div className={styles.hero} onClick={() => navigate('/spiele')}>
-        <div className={styles.heroLabel}>
+        {/* Radial glow background effect */}
-          <span>Nächstes Spiel</span>
+        <div className={styles.heroGlow} />
+
+        <div className={styles.heroHeader}>
+          <span className={styles.heroLabel}>Nächstes Spiel</span>
           {hero && (
             <span className={styles.heroCountdown}>
-              {formatCountdown(hero.match.minutesUntilKickoff)}
+              <span className={styles.countdownDot} />
+              {formatCountdown(hero.match.minutesUntilKickoff).toUpperCase()}
             </span>
           )}
         </div>
 
         {hero ? (
           <>
+            {/* LED Kickoff Time */}
+            <div className={styles.heroKickoff}>
+              <span className={styles.heroLED}>{formatKickoff(hero.match.utcDate)}</span>
+            </div>
+
+            {/* Teams */}
             <div className={styles.heroTeams}>
               <div className={styles.heroTeam}>
-                {hero.match.homeTeam.crest ? (
+                <div className={styles.heroCrestBox}>
-                  <img
+                  {hero.match.homeTeam.crest ? (
-                    src={hero.match.homeTeam.crest}
+                    <img src={hero.match.homeTeam.crest} alt={hero.match.homeTeam.name} className={styles.heroCrest} />
-                    alt={hero.match.homeTeam.name}
+                  ) : (
-                    className={styles.heroCrest}
+                    <span className={styles.heroCrestFallback}>🏳️</span>
-                  />
+                  )}
-                ) : (
+                </div>
-                  <div className={styles.heroCrest} />
+                <span className={styles.heroTeamName}>{hero.match.homeTeam.shortName}</span>
-                )}
-                <span>{hero.match.homeTeam.shortName}</span>
               </div>
-              <span className={styles.heroVs}>vs</span>
+
+              <span className={styles.heroVs}>VS</span>
+
               <div className={styles.heroTeam}>
-                {hero.match.awayTeam.crest ? (
+                <div className={styles.heroCrestBox}>
-                  <img
+                  {hero.match.awayTeam.crest ? (
-                    src={hero.match.awayTeam.crest}
+                    <img src={hero.match.awayTeam.crest} alt={hero.match.awayTeam.name} className={styles.heroCrest} />
-                    alt={hero.match.awayTeam.name}
+                  ) : (
-                    className={styles.heroCrest}
+                    <span className={styles.heroCrestFallback}>🏳️</span>
-                  />
+                  )}
-                ) : (
+                </div>
-                  <div className={styles.heroCrest} />
+                <span className={styles.heroTeamName}>{hero.match.awayTeam.shortName}</span>
-                )}
-                <span>{hero.match.awayTeam.shortName}</span>
               </div>
             </div>
 
+            {/* CTA or Tip Display */}
             {hero.userTip ? (
               <div className={styles.heroTip}>
                 Dein Tipp: {hero.userTip.home}:{hero.userTip.away} ✓
@@ -110,27 +126,23 @@ export default function DashboardPage(_props: Props) {
                   });
                 }}
               >
-                Jetzt tippen
+                Jetzt tippen ⚽
               </button>
             ) : null}
           </>
         ) : (
-          <p style={{ textAlign: 'center', color: 'var(--text-muted)', margin: '16px 0' }}>
+          <p className={styles.heroEmpty}>Keine anstehenden Spiele</p>
-            Keine anstehenden Spiele
-          </p>
         )}
       </div>
 
       {/* Stats Row */}
       <div className={styles.statsRow}>
         <div className={`card ${styles.statTile}`}>
-          <span className={styles.statValue}>
+          <span className={styles.statValue}>{stats.rank !== null ? stats.rank : '—'}</span>
-            {stats.rank !== null ? stats.rank : '—'}
-          </span>
           <span className={styles.statLabel}>Dein Rang</span>
         </div>
         <div className={`card ${styles.statTile}`}>
-          <span className={styles.statValue}>{stats.totalPoints}</span>
+          <span className={`${styles.statValue} ${styles.statGold}`}>{stats.totalPoints}</span>
           <span className={styles.statLabel}>Punkte</span>
         </div>
         <div className={`card ${styles.statTile}`}>
@@ -151,7 +163,10 @@ export default function DashboardPage(_props: Props) {
                 else if (nudge.type === 'leader') navigate('/rangliste');
               }}
             >
-              {nudge.text}
+              <span className={styles.nudgeIcon}>
+                {nudge.type === 'untipped' ? '📅' : nudge.type === 'leader' ? '🏆' : '🎯'}
+              </span>
+              <span className={styles.nudgeText}>{nudge.text}</span>
             </div>
           ))}
         </div>
@@ -163,7 +178,6 @@ export default function DashboardPage(_props: Props) {
           onClose={() => setTipMatch(null)}
           onSaved={(_matchId, tipHome, tipAway) => {
             setTipMatch(null);
-            // Update dashboard data to reflect the new tip
             if (data && data.hero) {
               setData({
                 ...data,