/* =====================================================================
   Fußball WM 2026 – Stylesheet
   Konzept: Rasen unter Flutlicht, Kreidelinien, Anzeigetafel-Ziffern
   ===================================================================== */

:root{
  --pitch-deep:#0a3527;
  --pitch:#0f4a35;
  --card:#0d4030;
  --card-edge:rgba(242,239,227,.14);
  --chalk:#f2efe3;
  --chalk-dim:rgba(242,239,227,.62);
  --chalk-faint:rgba(242,239,227,.32);
  --amber:#ffb938;          /* Anzeigetafel */
  --live:#ff5d45;
  --font-display:'Oswald','Arial Narrow',system-ui,sans-serif;
  --font-body:'Montserrat',system-ui,'Segoe UI',Roboto,sans-serif;
  --font-score:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }

body{
  font-family:var(--font-body);
  color:var(--chalk);
  background:
    radial-gradient(1200px 500px at 50% -120px, rgba(255,255,255,.07), transparent 60%),
    repeating-linear-gradient(90deg, var(--pitch-deep) 0 140px, var(--pitch) 140px 280px);
  min-height:100vh;
  line-height:1.5;
}

a{color:inherit}
button{font:inherit;cursor:pointer}

/* ---------- Header ---------- */
.site-header{padding-top:18px}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 16px;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.wordmark{text-decoration:none;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wordmark-wm{font-family:var(--font-display);font-weight:700;font-size:2.4rem;letter-spacing:.02em}
.wordmark-year{font-family:var(--font-score);font-weight:700;font-size:2rem;color:var(--amber)}
.wordmark-sub{font-size:.8rem;color:var(--chalk-dim);letter-spacing:.18em;text-transform:uppercase}

.lang-switch{display:flex;gap:6px}
.lang-switch button{
  background:transparent;border:1px solid var(--chalk-faint);color:var(--chalk-dim);
  padding:5px 12px;border-radius:3px;font-weight:600;letter-spacing:.06em;
}
.lang-switch button:hover{border-color:var(--chalk)}
.lang-switch button.active{background:var(--chalk);color:var(--pitch-deep);border-color:var(--chalk)}
.lang-switch button:focus-visible,.tabs a:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

.pitch-line{display:block;width:100%;height:60px;margin-top:6px}
.pitch-line line,.pitch-line circle{stroke:var(--chalk-faint);stroke-width:2;fill:none}
.pitch-line .dot{fill:var(--chalk-faint);stroke:none}

/* ---------- Tabs ---------- */
.tabs{
  max-width:var(--maxw);margin:0 auto;padding:0 16px;
  display:flex;gap:4px;
  overflow-x:auto;scrollbar-width:none;          /* schmale Screens: scrollen statt umbrechen */
}
.tabs::-webkit-scrollbar{display:none}
.tabs a{white-space:nowrap;flex:0 0 auto}
.tabs a{
  text-decoration:none;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.86rem;
  padding:10px 18px;border:1px solid var(--chalk-faint);border-bottom:none;
  border-radius:6px 6px 0 0;color:var(--chalk-dim);background:rgba(0,0,0,.12);
}
.tabs a.active{background:var(--chalk);color:var(--pitch-deep)}

/* ---------- Layout ---------- */
.layout{
  max-width:var(--maxw);margin:0 auto;padding:20px 16px 40px;
  display:grid;grid-template-columns:1fr 300px;gap:24px;
  border-top:2px solid var(--chalk-faint);
}
.sidebar{min-width:0}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{order:2}
}

.loading{color:var(--chalk-dim);padding:30px 0}

/* ---------- Day / section headers ---------- */
.day-header{
  display:flex;align-items:center;gap:14px;margin:28px 0 12px;
}
.day-header:first-child{margin-top:4px}
.day-header h2{
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.day-header .rule{flex:1;height:2px;background:var(--chalk-faint)}
.day-header .count{font-family:var(--font-score);font-size:.85rem;color:var(--chalk-dim)}

/* ---------- Match card (Anzeigetafel) ---------- */
.match{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--card-edge);border-radius:8px;
  padding:14px 16px;margin-bottom:10px;
}
.match .team{display:flex;align-items:center;gap:10px;min-width:0}
.match .team.home{justify-content:flex-end;text-align:right}
.match .team .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;hyphens:auto}
.match .team .flag{font-size:1.35rem;line-height:1}
.match .placeholder .name{color:var(--chalk-dim);font-weight:400;font-style:italic}

.match .mid{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:96px}
.match .score{
  font-family:var(--font-score);font-weight:700;font-size:1.5rem;color:var(--amber);
  letter-spacing:.06em;white-space:nowrap;
}
.match .score.upcoming{color:var(--chalk);font-size:1.1rem;font-weight:500}
.match .status{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-dim)}
.match .status.live{color:var(--live);font-weight:700}
.match .status.live::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--live);margin-right:6px;vertical-align:1px;
  animation:pulse 1.4s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.match .meta{
  grid-column:1 / -1;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  font-size:.76rem;color:var(--chalk-dim);margin-top:4px;
}
@media (max-width:560px){
  .match{grid-template-columns:1fr auto 1fr;padding:12px 10px;gap:8px}
  .match .team{gap:6px}
  .match .team .flag{font-size:1.1rem}
  .match .team .name{font-size:.88rem;line-height:1.25}
  .match .mid{min-width:80px}
  .match .score{font-size:1.2rem}
  .match .meta{font-size:.7rem;gap:8px}
}
@media (max-width:480px){
  .wordmark-wm{font-size:1.8rem}
  .wordmark-year{font-size:1.55rem}
  .wordmark-sub{display:none}                    /* Untertitel auf Phones ausblenden */
  .tabs a{padding:9px 11px;font-size:.78rem}
  .lang-switch button{padding:8px 12px}          /* größere Touch-Ziele */
  .date-nav button{padding:9px 12px}
}

/* ---------- Group tables ---------- */
.group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:16px}
.group-card{background:var(--card);border:1px solid var(--card-edge);border-radius:8px;padding:14px 16px}
.group-card h3{
  font-family:var(--font-display);font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.05em;
  border-bottom:2px solid var(--chalk-faint);padding-bottom:8px;margin-bottom:8px;
}
table.standings{width:100%;border-collapse:collapse;font-size:.86rem}
table.standings th{
  text-align:right;font-family:var(--font-score);font-weight:500;font-size:.7rem;
  color:var(--chalk-dim);padding:4px 5px;letter-spacing:.05em;
}
table.standings th:first-child,table.standings td:first-child{text-align:left}
table.standings td{padding:6px 5px;text-align:right;border-top:1px solid rgba(242,239,227,.08)}
table.standings td.t{display:flex;align-items:center;gap:8px;text-align:left;font-weight:600}
table.standings td.pts{font-family:var(--font-score);font-weight:700;color:var(--amber)}
table.standings tr.q td{box-shadow:inset 3px 0 0 var(--amber)}

/* ---------- Date picker (Today view) ---------- */
.date-nav{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.date-nav button{
  background:transparent;border:1px solid var(--chalk-faint);color:var(--chalk);
  border-radius:4px;padding:6px 12px;font-weight:700;
}
.date-nav button:hover{border-color:var(--chalk)}
.date-nav .current{font-family:var(--font-score);font-weight:700;color:var(--amber)}
.empty-day{color:var(--chalk-dim);padding:24px 0}

/* ---------- Ads ---------- */
.ad-slot{margin:14px 0}
.ad-slot .ad-label{
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--chalk-faint);
  text-align:center;margin-bottom:4px;
}
.house-ad{
  display:block;text-decoration:none;background:var(--chalk);color:var(--pitch-deep);
  border-radius:8px;padding:16px 18px;text-align:center;
}
.house-ad strong{display:block;font-family:var(--font-display);font-weight:700;font-size:1rem;margin-bottom:4px}
.house-ad span{font-size:.85rem}
.ad-slot.infeed .house-ad{background:rgba(242,239,227,.1);color:var(--chalk);border:1px dashed var(--chalk-faint)}

/* ---------- Footer ---------- */
.site-footer{
  max-width:var(--maxw);margin:0 auto;padding:10px 16px 50px;
  border-top:2px solid var(--chalk-faint);
}
.data-note,.disclaimer{font-size:.76rem;color:var(--chalk-dim);margin-top:10px}
.legal-links{margin-top:10px;font-size:.85rem}
.legal-links a{color:var(--chalk-dim)}

/* ---------- Legal pages ---------- */
.legal-page{max-width:760px;margin:0 auto;padding:20px 16px 60px}
.legal-page h1{font-family:var(--font-display);font-weight:700;margin:20px 0}
.legal-page h2{margin:22px 0 8px;font-size:1.05rem}
.legal-page p{margin:8px 0;color:var(--chalk-dim)}
.legal-page a.back{display:inline-block;margin-top:24px}

/* ---------- Live-Ticker (aufklappbar in der Spielkarte) ---------- */
.match.expandable{cursor:pointer}
.match.expandable:hover{box-shadow:0 2px 12px rgba(0,0,0,.18)}
.match .score.live{color:var(--live);font-weight:700}
.ticker{
  grid-column:1 / -1;margin-top:10px;padding:10px 12px;
  background:rgba(255,255,255,.04);border-top:1px dashed var(--line, rgba(255,255,255,.15));
  border-radius:0 0 8px 8px;text-align:left;cursor:default
}
.ticker h4{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent, #E8B33C);margin:0 0 8px
}
.ticker-items{font-size:.92rem}
.tk{display:flex;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.tk:last-child{border-bottom:0}
.tk-min{min-width:38px;font-weight:600;opacity:.65;font-variant-numeric:tabular-nums}
.tk.goal .tk-tx{font-weight:700}
.tk.card .tk-tx{color:var(--live)}
.tk.status .tk-tx{font-weight:600}

/* ---------- SEO-H1 ---------- */
.seo-h1{
  max-width:var(--maxw);margin:2px auto 10px;padding:0 16px;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  color:var(--chalk-dim);letter-spacing:.02em;
}
@media (max-width:480px){ .seo-h1{font-size:.82rem} }

/* ---------- SEO-FAQ ---------- */
.seo-faq{max-width:var(--maxw);margin:0 auto;padding:10px 16px 30px;border-top:2px solid var(--chalk-faint)}
.seo-faq h2{font-family:var(--font-display);font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.04em;margin:22px 0 10px}
.seo-faq details{border:1px solid var(--card-edge);border-radius:8px;background:var(--card);margin-bottom:8px;padding:10px 14px}
.seo-faq summary{cursor:pointer;font-weight:600}
.seo-faq summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.seo-faq p{margin-top:8px;font-size:.92rem;color:var(--chalk-dim)}

/* ---------- Legal: Zurück-Link oben ---------- */
.legal-page .legal-back{display:inline-block;margin-bottom:8px;font-size:.9rem}
.legal-page a{color:var(--amber)}

/* ---------- SVG-Flaggen (statt Emojis – Windows-kompatibel) ---------- */
.flag-svg{width:20px;height:15px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.25);vertical-align:-2px;flex:0 0 auto}
.match .team{display:flex;align-items:center;gap:8px;min-width:0}
.match .team.home{justify-content:flex-end}
.match .team .name{overflow:hidden;text-overflow:ellipsis}
.team-link{cursor:pointer;border-bottom:1px dotted transparent}
.team-link:hover{border-bottom-color:var(--amber);color:var(--amber)}
.team-cell{cursor:pointer}
.team-cell .flag-svg{margin-right:7px}

/* ---------- Banner v2 (größer, mit Bild, Rotation) ---------- */
.house-ad.v2{
  display:flex;align-items:stretch;gap:0;text-decoration:none;
  background:var(--card);border:1px solid var(--card-edge);border-radius:10px;
  overflow:hidden;min-height:96px;transition:box-shadow .15s, transform .15s;
}
.house-ad.v2:hover{box-shadow:0 4px 16px rgba(0,0,0,.3);transform:translateY(-1px)}
.ha-img{
  flex:0 0 110px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1c5dab,#3b8fd9) center/cover no-repeat;
}
.ha-icon{font-size:2.2rem;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.ha-body{flex:1;padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.ha-body strong{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.02em}
.ha-text{font-size:.85rem;color:var(--chalk-dim);line-height:1.35}
.ha-body em{font-style:normal;font-size:.78rem;color:var(--amber);margin-top:auto;font-weight:600}
aside .house-ad.v2{flex-direction:column;min-height:0}
aside .ha-img{flex:0 0 120px}
@media (max-width:560px){ .ha-img{flex-basis:84px} .ha-icon{font-size:1.7rem} }

/* ---------- Team-Picker ("Mein Team") ---------- */
.team-pick-title{font-family:var(--font-display);font-weight:700;font-size:1.2rem;margin:18px 0 14px;text-transform:uppercase;letter-spacing:.04em}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr));gap:8px;margin-bottom:24px}
.team-pick{
  display:flex;align-items:center;gap:9px;padding:10px 12px;
  background:var(--card);border:1px solid var(--card-edge);border-radius:8px;
  color:inherit;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;text-align:left;
}
.team-pick:hover{border-color:var(--amber);color:var(--amber)}
.team-pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 12px}
.team-head h2{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.3rem;margin:0}
.team-head h2 .flag-svg{width:30px;height:22px}
.team-sub{color:var(--chalk-dim);font-size:.85rem;margin:0;flex:1 1 100%;order:3}
.team-change{
  margin-left:auto;padding:7px 14px;border-radius:7px;cursor:pointer;
  background:none;border:1px solid var(--card-edge);color:var(--chalk-dim);font:inherit;font-size:.82rem;
}
.team-change:hover{border-color:var(--amber);color:var(--amber)}

/* ---------- Team-Popup (Gruppen-Hover) ---------- */
#team-pop{
  position:absolute;z-index:60;display:none;min-width:260px;max-width:92vw;
  background:#0d2417;border:1px solid var(--card-edge);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);padding:10px 12px;
}
.tp-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.85rem}
.tp-row:last-child{border-bottom:0}
.tp-team{display:flex;align-items:center;gap:6px;min-width:0}
.tp-team i{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-a{justify-content:flex-end;text-align:right}
.tp-score{font-family:var(--font-score);font-weight:700;min-width:44px;text-align:center}
.tp-score.plan{color:var(--chalk-dim);font-weight:500;font-size:.75rem}

/* Popup faengt den Cursor NICHT (Punkt 4) + Stadt-Flagge kompakt */
#team-pop{pointer-events:none}
.meta .city{display:inline-flex;align-items:center;gap:5px}
.meta .flag-svg{width:15px;height:11px;vertical-align:-1px}
.match .mid{padding:0 6px}

/* ---------- Refresh-Button ---------- */
#refreshBtn{
  background:none;border:1px solid var(--card-edge);border-radius:7px;
  color:var(--chalk-dim);font-size:1.05rem;line-height:1;cursor:pointer;
  padding:7px 11px;margin-right:8px;
}
#refreshBtn:hover{border-color:var(--amber);color:var(--amber)}
#refreshBtn:disabled{opacity:.35;cursor:default}
#refreshBtn.spin{animation:rspin .8s linear infinite}
@keyframes rspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#refreshBtn.spin{animation:none}}