From 4cb27e7b97b5e7b01b7e81fcd4b457ad35e5d8a3 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Wed, 24 Jun 2026 22:36:17 -0500
Subject: [PATCH] mobile optimization

---
 app/components/Simulation.tsx |  6 +--
 app/globals.css               | 87 +++++++++++++++++++++++++++++++++--
 app/layout.tsx                |  5 ++
 3 files changed, 92 insertions(+), 6 deletions(-)

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 (
-    <div style={{
+    <div className="sim-row" style={{
       display: "flex", alignItems: "center", gap: 10,
       padding: "6px 12px",
       background: "var(--bg-card)", border: "1px solid var(--line-soft)",
       borderRadius: "var(--radius-sm)",
       fontSize: 13,
     }}>
-      <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-faint)", minWidth: 75 }}>
+      <span className="sim-row-phase" style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-faint)", minWidth: 75 }}>
         {phaseLabel(match)}
       </span>
       <span style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0, flex: 1, justifyContent: "flex-end" }}>
@@ -342,7 +342,7 @@ function SimRow({
         </span>
         <Flag team={away} size={18} />
       </span>
-      <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-faint)", minWidth: 100, textAlign: "right" }}>
+      <span className="sim-row-date" style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-faint)", minWidth: 100, textAlign: "right" }}>
         {fmtDate(match.utcDate)}
       </span>
     </div>
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 (
     <html lang="de">