style: Match-Cards — names below flags, less glossy, cleaner header

- Team names centered below flags (vertical layout)
- Reduced flag box glossy effect (20% shine vs 55%)
- Removed "Terminiert" status from header (only show Live/Beendet)
- Dash separator instead of colon for upcoming matches
- Flex layout instead of grid for better centering

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

frontend/src/components/MatchCard.module.css

@@ -99,37 +99,30 @@
 
 /* Match row — Teams + Score */
 .matchRow {
-  display: grid;
+  display: flex;
-  grid-template-columns: 1fr 40px 1fr;
   align-items: center;
-  gap: 8px;
+  justify-content: center;
+  gap: 16px;
   margin-bottom: 18px;
 }
 
-/* Teams */
+/* Teams — flag on top, name below */
-.teamHome {
+.teamHome, .teamAway {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 12px;
+  gap: 6px;
-  justify-content: flex-end;
+  flex: 1;
+  min-width: 0;
 }
 
-.teamAway {
+/* Flag box — subtle, clean */
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-/* Flag box — glossy square */
 .flagBox {
-  width: 56px;
+  width: 52px;
-  height: 56px;
+  height: 52px;
-  border-radius: 13px;
+  border-radius: 12px;
   background: var(--surface-high);
-  box-shadow:
+  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
-    var(--shadow-card),
-    inset 0 1px 0 rgba(255,255,255,0.55),
-    inset 0 -1px 0 rgba(0,0,0,0.06);
   border: 1px solid var(--border-subtle);
   display: flex;
   align-items: center;
@@ -143,15 +136,15 @@
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0;
-  height: 55%;
+  height: 40%;
-  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 100%);
+  background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%);
   pointer-events: none;
   z-index: 1;
 }
 
 .crest {
-  width: 38px;
+  width: 36px;
-  height: 38px;
+  height: 36px;
   object-fit: contain;
   position: relative;
   z-index: 0;
@@ -159,10 +152,15 @@
 
 .teamName {
   font-family: 'Plus Jakarta Sans', sans-serif;
-  font-weight: 700;
+  font-weight: 600;
-  font-size: 15px;
+  font-size: 13px;
   color: var(--text-primary);
   line-height: 1.2;
+  text-align: center;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* Score / VS center */

frontend/src/components/MatchCard.tsx

@@ -94,18 +94,19 @@ export default function MatchCard({ match, onTip }: Props) {
   return (
     <div className={`card ${styles.card} ${styles[`card_${state}`]} ${isLive ? styles.live : ''} ${glowClass}`}>
 
-      {/* Top row: Status / Kickoff / Badges */}
+      {/* Top row: Status (only Live/Finished) + Group + Countdown */}
       <div className={styles.topRow}>
+        {(isLive || isFinished) && (
           <span className={`${styles.status} ${isLive ? styles.statusLive : ''}`}>
             {isLive && <span className={styles.liveDot} />}
             {STATUS_LABELS[match.status] ?? match.status}
           </span>
+        )}
         {match.group && (
           <span className={styles.group}>
             {match.group.replace('GROUP_', 'Gruppe ')}
           </span>
         )}
-        {/* Countdown only shown for open/tipped states */}
         {(state === 'open' || state === 'tipped') && match.tippable && (
           match.minutesUntilKickoff < 60 ? (
             <span className={`${styles.countdown} ${remainingMins < 5 ? styles.countdownUrgent : ''}`}>
@@ -128,8 +129,8 @@ export default function MatchCard({ match, onTip }: Props) {
       <div className={styles.matchRow}>
         {/* Home */}
         <div className={styles.teamHome}>
-          <span className={styles.teamName}>{match.homeTeam.shortName}</span>
           <FlagBox crest={match.homeTeam.crest} name={match.homeTeam.name} />
+          <span className={styles.teamName}>{match.homeTeam.shortName}</span>
         </div>
 
         {/* Center: Score or VS separator */}
@@ -146,7 +147,7 @@ export default function MatchCard({ match, onTip }: Props) {
               )}
             </div>
           ) : (
-            <span className={styles.vsSeparator}>:</span>
+            <span className={styles.vsSeparator}>–</span>
           )}
         </div>