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.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}>
-        <span className={`${styles.status} ${isLive ? styles.statusLive : ''}`}>
-          {isLive && <span className={styles.liveDot} />}
-          {STATUS_LABELS[match.status] ?? match.status}
-        </span>
+        {(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>