/* DFZ Fußball – gemeinsames Theme (lädt nach den Inline-Styles der Seiten).
   Chrome-Regeln gelten nur außerhalb des OBS-Modus; Spielzeilen in beiden Modi. */
:root {
  --f-bg: #101216;
  --f-card: #171a20;
  --f-card2: #1d2128;
  --f-line: #262b34;
  --f-txt: #eceef3;
  --f-mut: #8f97a6;
  --f-dim: #5e6674;
  --f-red: #e0313b;
  --f-redsoft: rgba(224, 49, 59, 0.14);
  --f-ok: #4fc79d;
  --f-font: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Grundlagen ---------- */
html:not(.obs-mode) body { background: radial-gradient(800px 380px at 50% -5%, rgba(224, 49, 59, 0.10), transparent 70%), var(--f-bg); color: var(--f-txt); font-family: var(--f-font); }
html:not(.obs-mode), html:not(.obs-mode) body { background-color: var(--f-bg); }
html:not(.obs-mode) :focus-visible { outline: 2px solid var(--f-red); outline-offset: 2px; }

/* ---------- Kopfzeile ---------- */
html:not(.obs-mode) body > header { width: min(1184px, 96%); max-width: none; margin: 18px auto 0; padding: 10px 14px; gap: 18px; background: var(--f-card); border: 1px solid var(--f-line); border-radius: 14px; }
html:not(.obs-mode) .logo { color: var(--f-txt); font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; }
html:not(.obs-mode) .logo:hover { color: var(--f-txt); }
html:not(.obs-mode) .back-link { flex-shrink: 0; font-size: 0.78rem; color: var(--f-mut); text-decoration: none; border: 1px solid var(--f-line); border-radius: 99px; padding: 4px 12px; transition: color 0.2s, border-color 0.2s; }
html:not(.obs-mode) .back-link:hover { color: var(--f-txt); border-color: var(--f-red); }
html:not(.obs-mode) .nav-glass nav { gap: 4px; padding: 4px; background: #12151a; border: 1px solid var(--f-line); border-radius: 11px; box-shadow: none; backdrop-filter: none; }
html:not(.obs-mode) .nav-glass nav a { color: var(--f-mut); padding: 7px 18px; border-radius: 8px; font-weight: 500; }
html:not(.obs-mode) .nav-glass nav a:hover { color: var(--f-txt); background: var(--f-card2); }
html:not(.obs-mode) .nav-glass nav a.active { color: #ff8d94; background: var(--f-redsoft); }
html:not(.obs-mode) .btn-login, html:not(.obs-mode) .btn { background: var(--f-red); border-radius: 9px; font-weight: 600; }
html:not(.obs-mode) .btn-login:hover, html:not(.obs-mode) .btn:hover { background: #c4252f; }
html:not(.obs-mode) .btn-admin, html:not(.obs-mode) .btn-logout { background: var(--f-card2); border: 1px solid var(--f-line); border-radius: 9px; }
html:not(.obs-mode) .btn-admin:hover, html:not(.obs-mode) .btn-logout:hover { background: #262b34; }
html:not(.obs-mode) .btn-admin { color: #ff8d94; border-color: rgba(224, 49, 59, 0.4); }
html:not(.obs-mode) .btn-secondary { background: var(--f-card2); border: 1px solid var(--f-line); }

/* ---------- Login-Dialog ---------- */
html:not(.obs-mode) .modal-overlay { background: rgba(8, 9, 12, 0.7); backdrop-filter: blur(6px); }
html:not(.obs-mode) .modal { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
html:not(.obs-mode) .modal-header { border-bottom: 1px solid var(--f-line); }
html:not(.obs-mode) .modal-header h2 { color: var(--f-txt); }
html:not(.obs-mode) .field label { color: var(--f-dim); font-size: 0.72rem; letter-spacing: 0.12em; }
html:not(.obs-mode) .field input, html:not(.obs-mode) select, html:not(.obs-mode) input[type="number"], html:not(.obs-mode) input[type="text"] { background: #12151a; border: 1px solid var(--f-line); border-radius: 10px; color: var(--f-txt); }
html:not(.obs-mode) .field input:focus, html:not(.obs-mode) select:focus, html:not(.obs-mode) input:focus { border-color: var(--f-red); }

/* ---------- Überschrift + Liga-Umschalter (Ergebnisse, Tabelle) ---------- */
html:not(.obs-mode) body > .header { width: min(880px, 96%); margin: 30px auto 0; flex-direction: row-reverse; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
html:not(.obs-mode) .league-tabs { gap: 0; padding: 4px; background: var(--f-card); border: 1px solid var(--f-line); border-radius: 12px; }
html:not(.obs-mode) .league-tab { background: transparent; border: none; color: var(--f-mut); padding: 7px 16px; border-radius: 9px; font-size: 0.8rem; letter-spacing: 0; text-transform: none; }
html:not(.obs-mode) .league-tab:hover { background: var(--f-card2); color: var(--f-txt); }
html:not(.obs-mode) .league-tab.active { background: var(--f-red); color: #fff; }
html:not(.obs-mode) .group-info { text-align: left; }
html:not(.obs-mode) .competition { color: var(--f-txt); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; text-transform: none; text-shadow: none; }
html:not(.obs-mode) .group, html:not(.obs-mode) .season { color: var(--f-mut); font-size: 0.95rem; font-weight: 400; text-shadow: none; margin-top: 2px; }

/* ---------- Ergebnisliste (overlay) ---------- */
html:not(.obs-mode) .main-content { grid-template-columns: minmax(0, 880px) 0; }
html:not(.obs-mode) .main-content { flex: 0 1 auto; grid-template-rows: minmax(0, auto); align-content: start; }
html:not(.obs-mode) .main-content.expanded { grid-template-columns: minmax(0, 560px) minmax(0, 440px); }
html:not(.obs-mode) .matches-panel, html:not(.obs-mode) .detail-panel { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 18px; }
html:not(.obs-mode) .main-content.expanded .matches-panel { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html:not(.obs-mode) .main-content.expanded .detail-panel { border-left: none; border-radius: 0 18px 18px 0; }
html:not(.obs-mode) .matches-panel h3 { display: none; }
html:not(.obs-mode) .date-label { display: flex; align-items: center; gap: 12px; padding: 0; margin: 12px 0 6px; background: transparent; border: none; border-radius: 0; color: var(--f-dim); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; }
html:not(.obs-mode) .date-label::after { content: ""; flex: 1; height: 1px; background: var(--f-line); }
html:not(.obs-mode) .detail-header, html:not(.obs-mode) .goal-item { border-color: var(--f-line); }
html:not(.obs-mode) .goals-section h4 { color: var(--f-dim); letter-spacing: 0.14em; }

/* ---------- Spielzeilen (alle Seiten, auch OBS) ---------- */
html body .match-item, html body .match { background: transparent; border: 1px solid transparent; border-radius: 12px; box-shadow: none; backdrop-filter: none; padding: 9px 12px; gap: 12px; }
html body .match-item:hover, html body .match:hover { background: var(--f-card2); border-color: transparent; box-shadow: none; }
html body .match-item.selected { background: var(--f-card2); border-color: var(--f-line); box-shadow: none; }
html body .match-item.live, html body .match.live { background: var(--f-redsoft); border-color: rgba(224, 49, 59, 0.4); box-shadow: none; }
html body .match-item.finished, html body .match.finished { border-color: transparent; }
html body .team-name { text-shadow: none; font-weight: 600; }
html body .match-item.finished .team-name, html body .match.finished .team-name { color: #b5bac6; }
html body .match-logo { border-radius: 0; }
html body .match-logo.placeholder { border-radius: 50%; background: #262b34; }
html body .score { color: var(--f-txt); text-shadow: none; font-weight: 800; letter-spacing: 0.02em; }
html body .score-separator { color: var(--f-dim); font-weight: 500; }
html body .score-suffix { color: var(--f-mut); }
html body .match-status { background: transparent; border: none; padding: 0; text-transform: none; color: var(--f-dim); font-weight: 600; letter-spacing: 0; }
html body .match-status.status-live { color: #ff6b73; animation: none; display: inline-flex; align-items: center; gap: 5px; }
html body .match-status.status-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff4b55; animation: pulse 1.5s infinite; }
html body .match-status.status-finished { color: var(--f-mut); }
html body .no-matches, html body .loading { color: var(--f-dim); }

/* ---------- OBS-Overlay: ruhige Karte statt hartem Grau ---------- */
html.obs-mode .main-content { grid-template-columns: 560px 0 !important; }
html.obs-mode .main-content.expanded { grid-template-columns: 560px 440px !important; }
html.obs-mode body .matches-panel { background: rgba(14, 16, 20, 0.82) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 16px !important; backdrop-filter: blur(8px); }
html.obs-mode body .matches-panel h3 { display: none; }
html.obs-mode body .date-label { color: var(--f-dim) !important; font-size: 0.7rem; letter-spacing: 0.16em; padding: 0; margin: 10px 0 4px; }

/* ---------- Tabelle ---------- */
html:not(.obs-mode) .table-panel { width: min(880px, 96%); margin: 18px auto 0; background: var(--f-card); border: 1px solid var(--f-line); border-radius: 18px; padding: 12px 18px 18px; }
html:not(.obs-mode) .table-panel h3 { display: none; }
html:not(.obs-mode) .table-wrapper { background: transparent; border: none; }
html body thead th { color: var(--f-dim); background: transparent; font-size: 0.7rem; letter-spacing: 0.12em; border-bottom: none; }
html body tbody tr { border-bottom: none; border-top: 1px solid var(--f-line); }
html body tbody tr:first-child { border-top: none; }
html body tbody tr:hover { background: var(--f-card2); }
html body tbody tr[class*="sep-"] { border-bottom: none; }
html body td { padding: 7px 8px; }
html body td.pos { position: relative; color: var(--f-mut); font-weight: 700; padding-left: 18px; }
html body td.pos::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: transparent; }
html body tr.zone-champions-league td.pos::before { background: #3b82f6; }
html body tr.zone-europa-league td.pos::before { background: #f97316; }
html body tr.zone-conference-league td.pos::before { background: #22c55e; }
html body tr.zone-direct-promotion td.pos::before, html body tr.zone-promotion-green td.pos::before { background: #22c55e; }
html body tr.zone-promotion-relegation td.pos::before, html body tr.zone-relegation td.pos::before, html body tr.zone-relegation-relegation td.pos::before { background: #eab308; }
html body tr.zone-direct-relegation td.pos::before { background: #ef4444; }
html body td.pts { color: #fff; font-weight: 800; }
html body td.team { font-weight: 600; }
html body .team-icon { border-radius: 0; }
html body .team-icon.placeholder { border-radius: 50%; background: #262b34; }
html body .legend { background: transparent; border-top: 1px solid var(--f-line); border-radius: 0; margin-top: 14px; padding: 14px 0 0; color: var(--f-mut); font-size: 0.75rem; gap: 20px; }
html body .legend-color { border-radius: 4px; width: 12px; height: 12px; }
html body .live-badge { background: var(--f-red); border-radius: 99px; }

/* ---------- Kommende Spiele ---------- */
html:not(.obs-mode) .container { width: min(1184px, 96%); max-width: none; margin: 0 auto; }
html:not(.obs-mode) .title { color: var(--f-txt); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; text-transform: none; }
html:not(.obs-mode) .nav-btn { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 10px; color: var(--f-mut); }
html:not(.obs-mode) .nav-btn:hover:not(:disabled) { border-color: var(--f-red); color: var(--f-txt); background: var(--f-card); }
html:not(.obs-mode) .period-display { color: var(--f-txt); font-weight: 600; }
html:not(.obs-mode) .competition-card { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 18px; }
html:not(.obs-mode) .competition-header { background: transparent; border: none; color: #ff8d94; font-size: 0.75rem; letter-spacing: 0.14em; }
html:not(.obs-mode) .matches-list .date-label { background: transparent; border: none; }

/* ---------- Startseite ---------- */
html:not(.obs-mode) main { width: min(1184px, 96%); }
html:not(.obs-mode) .cards { gap: 16px; }
html:not(.obs-mode) .card { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 18px; padding: 22px; transition: border-color 0.2s, transform 0.2s; }
html:not(.obs-mode) .card:hover { border-color: rgba(224, 49, 59, 0.5); transform: translateY(-2px); }
html:not(.obs-mode) .card h2 { color: var(--f-txt); font-size: 1.1rem; font-weight: 700; }
html:not(.obs-mode) .card p { color: var(--f-mut); }
html:not(.obs-mode) .btn-card { background: var(--f-red); border-radius: 10px; font-weight: 600; }
html:not(.obs-mode) .btn-card:hover { background: #c4252f; }
html:not(.obs-mode) .btn-placeholder { background: #14171c; border: 1px solid var(--f-line); color: var(--f-dim); border-radius: 10px; }
.home-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.home-panel { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 18px; padding: 18px 20px; }
.home-panel h3 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--f-mut); margin-bottom: 10px; }
.home-panel .match { grid-template-columns: 1fr auto auto auto 1fr; }
.home-panel table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.home-panel td { padding: 7px 8px; border-top: 1px solid var(--f-line); font-size: 0.9rem; }
.home-panel tr:first-child td { border-top: none; }
.home-panel td.num { text-align: right; color: var(--f-mut); }
.home-panel td.pts { text-align: right; font-weight: 800; color: #fff; }
.home-panel td.team { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.home-empty { color: var(--f-dim); font-size: 0.9rem; padding: 10px 0; }

/* ---------- Admin ---------- */
html:not(.obs-mode) body .container h1 { color: var(--f-txt); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; }
html:not(.obs-mode) body .container h2 { color: var(--f-txt); border: none; font-size: 1rem; margin: 0 0 12px; padding: 0; }
html:not(.obs-mode) .card, html:not(.obs-mode) .debug-section { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 18px; }
html:not(.obs-mode) .status-item, html:not(.obs-mode) .debug-item { background: #12151a; border: 1px solid var(--f-line); border-radius: 12px; }
html:not(.obs-mode) .status-label, html:not(.obs-mode) .debug-label { color: var(--f-dim); letter-spacing: 0.1em; }
html:not(.obs-mode) .checkbox-label input { accent-color: var(--f-red); }
html:not(.obs-mode) .match-preview .match { border-bottom: none; }

/* ---------- Schmal ---------- */
@media (max-width: 760px) {
  html:not(.obs-mode) body > header { flex-wrap: wrap; }
  html:not(.obs-mode) .back-link { order: 3; }
  html:not(.obs-mode) .header { flex-direction: column; align-items: flex-start; }
  html:not(.obs-mode) .main-content, html:not(.obs-mode) .main-content.expanded { grid-template-columns: minmax(0, 1fr) 0; }
  .home-panels { grid-template-columns: 1fr; }
}

/* ---------- Namen in schmalen Spalten ---------- */
html:not(.obs-mode) .competition-card .team-name, .home-panel .team-name { font-size: 14px; }
html:not(.obs-mode) .competition-card .score-column, .home-panel .score-column { min-width: 76px; }
html:not(.obs-mode) .competition-card .match, .home-panel .match { gap: 8px; padding: 8px 8px; }
html.obs-mode body .team-name { font-size: 14px; }
html.obs-mode body .match-item { gap: 8px; padding: 8px 10px; }
.home-panel tr { border-top: 1px solid var(--f-line); }
.home-panel tr:first-child { border-top: none; }
.home-panel td { border-top: none; }
.hero-home { width: min(1184px, 96%); margin: 38px auto 6px; }
.hero-home h1 { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--f-txt); }
.hero-home p { margin-top: 10px; color: var(--f-mut); font-size: 1.05rem; max-width: 560px; }