diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css
index 7e19a73..25761fa 100644
--- a/frontend/src/components/MatchCard.module.css
+++ b/frontend/src/components/MatchCard.module.css
@@ -77,17 +77,16 @@
border: 1px solid rgba(75,183,248,0.15);
}
-/* Kickoff row — above teams */
-.kickoffRow {
- text-align: center;
- margin-bottom: 8px;
+/* Kickoff badge in header row */
+.kickoffBadge {
+ font-size: 12px;
+ font-weight: 700;
+ color: var(--text-secondary);
+ letter-spacing: 0.02em;
}
-.kickoffTime {
- font-size: 12px;
- font-weight: 600;
- color: var(--text-secondary);
- letter-spacing: 0.03em;
+.topRowSpacer {
+ flex: 1;
}
/* VS separator */
diff --git a/frontend/src/components/MatchCard.tsx b/frontend/src/components/MatchCard.tsx
index 5fa0e8b..2652dae 100644
--- a/frontend/src/components/MatchCard.tsx
+++ b/frontend/src/components/MatchCard.tsx
@@ -94,7 +94,7 @@ export default function MatchCard({ match, onTip }: Props) {
return (
- {/* Top row: Status (only Live/Finished) + Group + Countdown */}
+ {/* Top row: Group + Kickoff + Countdown */}
{(isLive || isFinished) && (
@@ -107,6 +107,10 @@ export default function MatchCard({ match, onTip }: Props) {
{match.group.replace('GROUP_', 'Gruppe ')}
)}
+ {!isFinished && !isLive && (
+ {formatKickoff(match.utcDate)}
+ )}
+
{(state === 'open' || state === 'tipped') && match.tippable && (
match.minutesUntilKickoff < 60 ? (
@@ -118,13 +122,6 @@ export default function MatchCard({ match, onTip }: Props) {
)}
- {/* Kickoff time — above the teams row */}
- {!isFinished && !isLive && (
-
- {formatKickoff(match.utcDate)}
-
- )}
-
{/* Teams + Score */}
{/* Home */}
diff --git a/frontend/src/pages/MatchesPage.module.css b/frontend/src/pages/MatchesPage.module.css
index 5de745a..1f24ac7 100644
--- a/frontend/src/pages/MatchesPage.module.css
+++ b/frontend/src/pages/MatchesPage.module.css
@@ -89,7 +89,7 @@
display: flex;
align-items: center;
gap: 12px;
- padding: 4px 0;
+ padding: 12px 0 6px;
}
.dateLine {