feat: desktop layout optimization

Dashboard: 2-column layout (hero left 60%, stats+nudges right 40%)
Spielplan: 2-column grid for match cards on desktop
Profile: wider max-width (900px), 6-column achievement grid
Header: Admin link back in desktop nav, max-width 1200px
All via CSS media queries (min-width: 768px), no HTML restructuring.

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

frontend/src/App.module.css

@@ -109,7 +109,7 @@
 
 .main {
   flex: 1;
-  max-width: 1100px;
+  max-width: 1200px;
   margin: 0 auto;
   padding: 32px 24px;
   padding-bottom: 70px;

frontend/src/App.tsx

@@ -117,6 +117,9 @@ export default function App() {
             <NavLink to="/profil" className={({ isActive }) => isActive ? styles.navLinkActive : styles.navLink}>
               Mein Profil
             </NavLink>
+            <NavLink to="/admin" className={({ isActive }) => isActive ? styles.navLinkActive : styles.navLink}>
+              Admin
+            </NavLink>
           </nav>
           <div className={styles.headerActions}>
             <button

frontend/src/pages/DashboardPage.module.css

@@ -1,11 +1,44 @@
 .dashboard {
-  max-width: 800px;
+  max-width: 1100px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 14px;
 }
 
+/* Mobile: single column */
+.dashboardGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+/* Desktop: 2-column layout */
+@media (min-width: 768px) {
+  .dashboardGrid {
+    flex-direction: row;
+    gap: 20px;
+    align-items: flex-start;
+  }
+
+  .hero {
+    flex: 3;
+    min-width: 0;
+  }
+
+  .sidebar {
+    flex: 2;
+    position: sticky;
+    top: 80px;
+  }
+}
+
 /* ═══════════════════════════════════════
    HERO CARD — Stadium atmosphere
    ═══════════════════════════════════════ */

frontend/src/pages/DashboardPage.tsx

@@ -68,6 +68,7 @@ export default function DashboardPage(_props: Props) {
 
   return (
     <div className={styles.dashboard}>
+      <div className={styles.dashboardGrid}>
       {/* Hero Card */}
       <div className={styles.hero} onClick={() => navigate('/spiele')}>
         {/* Radial glow background effect */}
@@ -154,7 +155,8 @@ export default function DashboardPage(_props: Props) {
         )}
       </div>
 
-      {/* Stats Row */}
+      {/* Sidebar: Stats + Nudges */}
+      <div className={styles.sidebar}>
       <div className={styles.statsRow}>
         <div className={`card ${styles.statTile}`}>
           <span className={styles.statValue}>
@@ -208,6 +210,8 @@ export default function DashboardPage(_props: Props) {
           ))}
         </div>
       )}
+      </div>{/* /sidebar */}
+      </div>{/* /dashboardGrid */}
 
       {tipMatch && (
         <TipModal

frontend/src/pages/MatchesPage.module.css

@@ -1,4 +1,10 @@
-.page { display: flex; flex-direction: column; gap: 16px; }
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 1100px;
+  margin: 0 auto;
+}
 
 /* ── Stats Card (glassmorphism) ── */
 .statsCard {
@@ -122,6 +128,15 @@
   margin-bottom: 8px;
 }
 
+/* Desktop: 2-column grid for match cards */
+@media (min-width: 768px) {
+  .matchList {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+  }
+}
+
 /* ── Past matches toggle ── */
 .pastToggle {
   display: flex;

frontend/src/pages/ProfilePage.module.css

@@ -1,5 +1,5 @@
 /* ── Layout ── */
-.page { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
+.page { display: flex; flex-direction: column; gap: 20px; max-width: 900px; }
 
 .loading { display: flex; justify-content: center; padding: 60px; }
 .spinner { width: 32px; height: 32px; border: 3px solid var(--surface-high); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@@ -252,6 +252,12 @@
   gap: 8px;
 }
 
+@media (min-width: 768px) {
+  .badgeGrid {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
 .badge {
   display: flex;
   flex-direction: column;