diff --git a/app/components/Simulation.tsx b/app/components/Simulation.tsx
index 61a9ccb..eaa820e 100644
--- a/app/components/Simulation.tsx
+++ b/app/components/Simulation.tsx
@@ -285,14 +285,14 @@ function SimRow({
});
return (
-
-
+
{phaseLabel(match)}
@@ -342,7 +342,7 @@ function SimRow({
-
+
{fmtDate(match.utcDate)}
diff --git a/app/globals.css b/app/globals.css
index e378628..b8dae72 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -195,7 +195,7 @@ table.standings { width: 100%; border-collapse: collapse; }
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
- overflow-x: hidden;
+ overflow-x: auto;
overflow-y: visible;
padding-bottom: 10px;
scrollbar-gutter: stable;
@@ -274,9 +274,90 @@ table.standings { width: 100%; border-collapse: collapse; }
}
.foot a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 2px; }
+/* =====================================================================
+ MOBIL — Breakpoint 640px (iPhone ~375, Galaxy ~412, alle ≤640)
+ ===================================================================== */
@media (max-width: 640px) {
- .tab { padding: 14px 12px; font-size: 12px; }
- .group-grid { grid-template-columns: 1fr; }
+ body { font-size: 14px; }
+ .wrap { padding: 0 12px; }
+
+ /* ---------- mobil: Header ---------- */
+ .masthead-inner { padding: 10px 0; gap: 8px; }
+ .brand { gap: 6px; }
+ .brand-mark { font-size: 18px; }
+ .brand-sub { font-size: 9px; letter-spacing: 0.04em; }
+ .status-pill { font-size: 10px; padding: 4px 10px; gap: 5px; }
+ .dot { width: 6px; height: 6px; }
+
+ /* ---------- mobil: Tabs (horizontal scroll, kein Umbruch) ---------- */
+ .masthead-tabs {
+ overflow-x: auto;
+ flex-wrap: nowrap;
+ -webkit-overflow-scrolling: touch;
+ scrollbar-width: none;
+ }
+ .masthead-tabs::-webkit-scrollbar { display: none; }
+ .tab { padding: 10px 14px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
+
+ .section { padding: 18px 0 48px; }
+
+ /* ---------- mobil: Gruppen ---------- */
+ .group-grid { grid-template-columns: 1fr; gap: 12px; }
+ .group-head { padding: 10px 12px; }
+ .group-name { font-size: 14px; }
+ .standings th { font-size: 9px; padding: 6px 3px; }
+ .standings th.team { padding-left: 10px; }
+ .standings td { font-size: 11px; padding: 7px 3px; }
+ .standings td.team { padding-left: 10px; gap: 6px; }
+ .rankdot { width: 16px; height: 16px; font-size: 8px; }
+ .team-name { font-size: 12px; }
+
+ /* ---------- mobil: Spiele (Fixtures) ---------- */
+ .fx { grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; }
+ .fx-meta { flex-direction: row; gap: 14px; align-items: center; }
+ .fx-status { order: -1; }
+ .fx-teams { column-gap: 16px; }
+ .fx-score { font-size: 16px; min-width: 44px; }
+ .fx-vs { font-size: 14px; min-width: 44px; }
+ .fx-name { font-size: 13px; max-width: 110px; }
+ .grp-chip { width: 34px; height: 34px; font-size: 12px; }
+
+ /* ---------- mobil: Drittplatzierte ---------- */
+ .third-table th { font-size: 9px; padding: 8px 6px; }
+ .third-table td { font-size: 11px; padding: 7px 6px; }
+
+ /* ---------- mobil: K.o.-Baum ---------- */
+ .bracket-scroll {
+ margin-left: -12px;
+ margin-right: -12px;
+ padding-left: 12px;
+ padding-right: 12px;
+ -webkit-overflow-scrolling: touch;
+ }
+ .bracket { gap: 18px; }
+ .round { min-width: 170px; }
+ .round-label { font-size: 10px; }
+ .round-matches { gap: 8px; }
+ .tie-head { font-size: 8px; padding: 3px 8px 0; }
+ .side { padding: 6px 8px; font-size: 11px; }
+ .side .nm { gap: 5px; }
+ .prov-mark { font-size: 10px; }
+ .side .prob { font-size: 9px; }
+ .bracket-banner { padding: 10px 12px; font-size: 13px; }
+ .legend { font-size: 10px; gap: 12px; }
+
+ /* ---------- mobil: Simulation ---------- */
+ .sim-row { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
+ .sim-row-phase { min-width: 100%; font-size: 9px; }
+ .sim-row-date { min-width: auto; font-size: 9px; }
+ .sim-row input[type="number"] { width: 32px; height: 32px; font-size: 15px; }
+
+ /* ---------- mobil: Footer ---------- */
+ .foot { font-size: 11px; padding: 16px 0 32px; }
+
+ /* Kein horizontaler Überlauf außer im Bracket */
+ body { overflow-x: hidden; }
+ .bracket-scroll { overflow-x: auto; }
}
/* ============ Erweiterungen v2 ============ */
diff --git a/app/layout.tsx b/app/layout.tsx
index 5427279..b0c2071 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,6 +7,11 @@ export const metadata: Metadata = {
"Live-Gruppentabellen, Drittplatzierten-Wertung und der vollständige K.o.-Baum der FIFA WM 2026 mit Annex-C-Zuordnung und Polymarket-Wahrscheinlichkeiten.",
};
+export const viewport = {
+ width: "device-width",
+ initialScale: 1,
+};
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (