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

frontend/src/pages/MatchesPage.tsx

@@ -14,50 +14,84 @@ type Section = {
   highlight: boolean;
 };
 
-function groupIntoSections(matches: Match[]): Section[] {
+function formatDateLabel(dateStr: string): string {
+  const d = new Date(dateStr);
   const now = new Date();
-  const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-  const tomorrowStart = new Date(todayStart);
-  tomorrowStart.setDate(todayStart.getDate() + 1);
-  const dayAfterTomorrow = new Date(todayStart);
-  dayAfterTomorrow.setDate(todayStart.getDate() + 2);
-  const weekEnd = new Date(todayStart);
-  weekEnd.setDate(todayStart.getDate() + 7);
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const tomorrow = new Date(today);
+  tomorrow.setDate(today.getDate() + 1);
+  const matchDay = new Date(d.getFullYear(), d.getMonth(), d.getDate());
 
-  const sections: Section[] = [
-    { key: 'today', label: 'Heute', matches: [], defaultOpen: true, highlight: true },
-    { key: 'tomorrow', label: 'Morgen', matches: [], defaultOpen: true, highlight: false },
-    { key: 'week', label: 'Diese Woche', matches: [], defaultOpen: false, highlight: false },
-    { key: 'later', label: 'Demnächst', matches: [], defaultOpen: false, highlight: false },
-    { key: 'past', label: 'Vergangene Spiele', matches: [], defaultOpen: false, highlight: false },
-  ];
+  if (matchDay.getTime() === today.getTime()) return 'Heute';
+  if (matchDay.getTime() === tomorrow.getTime()) return 'Morgen';
 
-  for (const match of matches) {
-    const d = new Date(match.utcDate);
-    if (d < todayStart) {
-      sections[4].matches.push(match); // past
-    } else if (d < tomorrowStart) {
-      sections[0].matches.push(match); // today
-    } else if (d < dayAfterTomorrow) {
-      sections[1].matches.push(match); // tomorrow
-    } else if (d < weekEnd) {
-      sections[2].matches.push(match); // this week
+  return d.toLocaleDateString('de-DE', {
+    weekday: 'short',
+    day: 'numeric',
+    month: 'long',
+  });
+}
+
+function groupByDate(matches: Match[]): Section[] {
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+
+  // Separate past and upcoming
+  const past: Match[] = [];
+  const upcoming: Match[] = [];
+
+  for (const m of matches) {
+    const d = new Date(m.utcDate);
+    if (d < today && m.status === 'FINISHED') {
+      past.push(m);
     } else {
-      sections[3].matches.push(match); // later
+      upcoming.push(m);
     }
   }
 
-  // Past matches: most recent first
-  sections[4].matches.reverse();
+  // Group upcoming by date
+  const dateGroups = new Map<string, Match[]>();
+  for (const m of upcoming) {
+    const dateKey = new Date(m.utcDate).toISOString().split('T')[0];
+    if (!dateGroups.has(dateKey)) dateGroups.set(dateKey, []);
+    dateGroups.get(dateKey)!.push(m);
+  }
 
-  return sections.filter(s => s.matches.length > 0);
+  const sections: Section[] = [];
+
+  // Add upcoming date sections (first 3 open, rest collapsed)
+  let idx = 0;
+  for (const [dateKey, dateMatches] of dateGroups) {
+    const label = formatDateLabel(dateMatches[0].utcDate);
+    sections.push({
+      key: dateKey,
+      label,
+      matches: dateMatches,
+      defaultOpen: idx < 3,
+      highlight: label === 'Heute',
+    });
+    idx++;
+  }
+
+  // Add past section if any
+  if (past.length > 0) {
+    past.reverse(); // newest first
+    sections.push({
+      key: 'past',
+      label: 'Vergangene Spiele',
+      matches: past,
+      defaultOpen: false,
+      highlight: false,
+    });
+  }
+
+  return sections;
 }
 
 export default function MatchesPage() {
   const [allMatches, setAllMatches] = useState<Match[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [stageFilter, setStageFilter] = useState('');
   const [selectedMatch, setSelectedMatch] = useState<Match | null>(null);
   const [openSections, setOpenSections] = useState<Set<string>>(new Set());
 
@@ -76,19 +110,17 @@ export default function MatchesPage() {
 
   useEffect(() => { loadMatches(); }, [loadMatches]);
 
-  // Initialize open sections after initial load
+  // Initialize open sections
   useEffect(() => {
     if (allMatches.length > 0) {
-      const filteredMatches = allMatches.filter(m => !stageFilter || m.stage === stageFilter);
-      const sections = groupIntoSections(filteredMatches);
-      // If only 1-2 sections exist, open all of them
-      if (sections.length <= 2) {
+      const sections = groupByDate(allMatches);
+      if (sections.length <= 3) {
         setOpenSections(new Set(sections.map(s => s.key)));
       } else {
         setOpenSections(new Set(sections.filter(s => s.defaultOpen).map(s => s.key)));
       }
     }
-  }, [allMatches]); // only on initial load
+  }, [allMatches]);
 
   const handleTipSaved = (matchId: number, tipHome: number, tipAway: number) => {
     setAllMatches(prev => prev.map(m =>
@@ -109,13 +141,8 @@ export default function MatchesPage() {
   }
 
   const { current: revealMatch, dismissCurrent } = useRevealQueue(allMatches);
-
-  const filteredMatches = allMatches.filter(m => !stageFilter || m.stage === stageFilter);
-  const sections = groupIntoSections(filteredMatches);
-
-  // Stats always over all matches (unfiltered)
-  const tipped   = allMatches.filter(m => m.userTip).length;
-  const tippable = allMatches.filter(m => m.tippable && !m.userTip).length;
+  const sections = groupByDate(allMatches);
+  const tipped = allMatches.filter(m => m.userTip).length;
 
   return (
     <div className={styles.page}>
@@ -123,37 +150,19 @@ export default function MatchesPage() {
         <ConfettiReveal match={revealMatch} onDismiss={dismissCurrent} />
       )}
 
-      {/* Header Stats */}
-      <div className={styles.statsRow}>
-        <div className={`card ${styles.statCard}`}>
-          <span className={styles.statValue}>{allMatches.length}</span>
-          <span className={styles.statLabel}>Spiele gesamt</span>
+      {/* Compact stats line */}
+      {allMatches.length > 0 && (
+        <div className={styles.statsLine}>
+          <span className={styles.statsText}>
+            <strong>{tipped}</strong> von <strong>{allMatches.length}</strong> Spielen getippt
+          </span>
+          {tipped < allMatches.length && (
+            <span className={styles.statsReminder}>
+              Noch {allMatches.length - tipped} offen
+            </span>
+          )}
         </div>
-        <div className={`card ${styles.statCard}`}>
-          <span className={`${styles.statValue} text-primary`}>{tipped}</span>
-          <span className={styles.statLabel}>Tipps abgegeben</span>
-        </div>
-        <div className={`card ${styles.statCard}`}>
-          <span className={`${styles.statValue} text-gold`}>{tippable}</span>
-          <span className={styles.statLabel}>Noch tippbar</span>
-        </div>
-      </div>
-
-      {/* Stage Filter Dropdown */}
-      <select
-        className={styles.stageFilter}
-        value={stageFilter}
-        onChange={e => setStageFilter(e.target.value)}
-      >
-        <option value="">Alle Phasen</option>
-        <option value="GROUP_STAGE">Gruppenphase</option>
-        <option value="ROUND_OF_32">Runde der 32</option>
-        <option value="LAST_16">Achtelfinale</option>
-        <option value="QUARTER_FINALS">Viertelfinale</option>
-        <option value="SEMI_FINALS">Halbfinale</option>
-        <option value="THIRD_PLACE">Platz 3</option>
-        <option value="FINAL">Finale</option>
-      </select>
+      )}
 
       {/* Content */}
       {loading && (
@@ -170,13 +179,10 @@ export default function MatchesPage() {
         </div>
       )}
 
-      {!loading && !error && filteredMatches.length === 0 && (
+      {!loading && !error && allMatches.length === 0 && (
         <div className={styles.emptyState}>
           <span className={styles.emptyIcon}>⚽</span>
           <p>Noch keine Spiele vorhanden.</p>
-          <p className={styles.emptyHint}>
-            Geh auf die Admin-Seite und klicke "Spiele synchronisieren".
-          </p>
         </div>
       )}
 
@@ -184,7 +190,9 @@ export default function MatchesPage() {
         <div key={section.key} className={`${styles.section} ${section.highlight ? styles.sectionHighlight : ''}`}>
           <button className={styles.sectionHeader} onClick={() => toggleSection(section.key)}>
             <span className={styles.sectionLabel}>{section.label}</span>
-            <span className={styles.sectionCount}>{section.matches.length} Spiele</span>
+            <span className={styles.sectionCount}>
+              {section.matches.length} {section.matches.length === 1 ? 'Spiel' : 'Spiele'}
+            </span>
             <span className={styles.sectionChevron}>{openSections.has(section.key) ? '▾' : '▸'}</span>
           </button>
           {openSections.has(section.key) && (