feat: smart sections in Spielplan (Heute/Morgen/Woche/Vergangen)

Matches grouped by time relevance with collapsible accordion.
Heute and Morgen open by default. Stage filter simplified to dropdown.

frontend/src/pages/MatchesPage.module.css

@@ -28,83 +28,66 @@
   letter-spacing: 0.05em;
 }
 
-.filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+.stageFilter {
+  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;
 }
 
-.filter, .filterActive {
-  padding: 7px 16px;
-  border-radius: 20px;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  border: 1px solid var(--border-subtle);
-  background: transparent;
-  color: var(--text-secondary);
-  transition: all 0.15s;
-}
-.filter:hover { border-color: var(--primary); color: var(--primary); }
-.filterActive {
-  background: var(--primary-dim);
-  border-color: rgba(75,183,248,0.3);
-  color: var(--primary);
+.section {
+  margin-bottom: 8px;
+  border-radius: var(--radius-md);
+  overflow: hidden;
 }
 
-/* Gruppen-Filter (zweite Ebene) */
-.groupFilters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 4px 0;
-  border-top: 1px solid var(--border-subtle);
-  margin-top: -8px;
+.sectionHighlight {
+  border-left: 3px solid var(--gold);
 }
 
-.groupFilter, .groupFilterActive {
-  padding: 5px 13px;
-  border-radius: 16px;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  border: 1px solid var(--border-subtle);
-  background: transparent;
-  color: var(--text-muted);
-  transition: all 0.15s;
-}
-.groupFilter:hover { border-color: rgba(75,183,248,0.3); color: var(--text-secondary); }
-.groupFilterActive {
-  background: rgba(75,183,248,0.12);
-  border-color: rgba(75,183,248,0.25);
-  color: var(--primary);
-}
-
-.dayGroup { display: flex; flex-direction: column; gap: 12px; }
-
-.dayHeader {
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  padding: 0 4px;
+.sectionHeader {
   display: flex;
   align-items: center;
+  width: 100%;
+  padding: 12px 16px;
+  background: var(--surface-mid);
+  border: none;
+  color: var(--text-primary);
+  cursor: pointer;
+  font-size: 0.95rem;
   gap: 8px;
 }
-
-.todayDot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--primary);
-  box-shadow: 0 0 6px rgba(75,183,248,0.6);
-  flex-shrink: 0;
+.sectionHeader:hover {
+  background: var(--surface-high);
 }
 
-.matchList { display: flex; flex-direction: column; gap: 10px; }
+.sectionLabel {
+  font-weight: 600;
+  flex: 1;
+  text-align: left;
+}
+
+.sectionCount {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.sectionChevron {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.sectionContent {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 0;
+}
 
 /* States */
 .loadingState, .errorState, .emptyState {