style: redesign Spielplan — date grouping, compact stats, less glossy

- Replace 3 large stat tiles with compact "2 von 104 getippt" line
- Remove phase dropdown (not useful for daily tipping)
- Group matches by actual date (Mi, 11. Juni / Do, 12. Juni)
  instead of generic "Demnächst"
- First 3 date sections open by default
- Reduce TipModal flag glossy to match MatchCard flags
- Past matches in own collapsed section

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

frontend/src/pages/MatchesPage.module.css

@@ -1,47 +1,33 @@
-.page { display: flex; flex-direction: column; gap: 24px; }
+.page { display: flex; flex-direction: column; gap: 16px; }
 
-.statsRow {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-}
-
-.statCard {
-  padding: 20px;
+/* Compact stats line */
+.statsLine {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 4px;
-}
-
-.statValue {
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 32px;
-  font-weight: 800;
-  line-height: 1;
-}
-
-.statLabel {
-  font-size: 12px;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.stageFilter {
+  justify-content: space-between;
+  padding: 10px 16px;
   background: var(--surface-mid);
-  color: var(--text-primary);
-  border: 1px solid rgba(75, 183, 248, 0.15);
   border-radius: var(--radius-sm);
-  padding: 8px 12px;
-  font-size: 0.85rem;
-  width: 100%;
-  max-width: 200px;
-  margin-bottom: 12px;
+  border: 1px solid var(--border-subtle);
 }
 
+.statsText {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.statsText strong {
+  color: var(--text-primary);
+}
+
+.statsReminder {
+  font-size: 12px;
+  color: var(--gold);
+  font-weight: 600;
+}
+
+/* Sections */
 .section {
-  margin-bottom: 8px;
   border-radius: var(--radius-md);
   overflow: hidden;
 }
@@ -54,20 +40,22 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 12px 16px;
+  padding: 14px 16px;
   background: var(--surface-mid);
   border: none;
+  border-bottom: 1px solid var(--border-subtle);
   color: var(--text-primary);
   cursor: pointer;
   font-size: 0.95rem;
   gap: 8px;
+  transition: background 0.15s;
 }
 .sectionHeader:hover {
   background: var(--surface-high);
 }
 
 .sectionLabel {
-  font-weight: 600;
+  font-weight: 700;
   flex: 1;
   text-align: left;
 }
@@ -75,6 +63,7 @@
 .sectionCount {
   font-size: 0.8rem;
   color: var(--text-muted);
+  font-weight: 500;
 }
 
 .sectionChevron {
@@ -85,8 +74,8 @@
 .sectionContent {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 8px 0;
+  gap: 10px;
+  padding: 10px 0;
 }
 
 /* States */
@@ -110,6 +99,4 @@
 @keyframes spin { to { transform: rotate(360deg); } }
 
 .emptyIcon { font-size: 48px; }
-.emptyHint { font-size: 13px; color: var(--text-muted); }
-
 .errorState { color: var(--error); }