:root {
    --md-red: #C8322C;
    --md-blue: #1D2E8C;
    --md-black: #2C2C2A;
    --md-pitch: #6FA85A;
    --md-pitch-light: #7DB468;
    --md-ink: #1E2230;
    --md-muted: #667085;
    --md-line: #E1E3DD;
    --md-bg: #F4F5F2;
    --md-card: #FFFFFF;
    --md-hot: #FBE4E2;
    --md-hot-ink: #8E1F1A;
    --bs-primary: #1D2E8C;
    --bs-primary-rgb: 29, 46, 140;
    --bs-body-font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-bg: var(--md-bg);
    --bs-body-color: var(--md-ink);
}

[data-bs-theme="dark"] {
    --md-ink: #ECEEF2;
    --md-muted: #9AA1AE;
    --md-line: #2C303B;
    --md-bg: #12141A;
    --md-card: #1C1F28;
    --md-hot: #3A1F21;
    --md-hot-ink: #F2A7A2;
    --md-black: #5B5E66;
    --bs-body-bg: var(--md-bg);
    --bs-body-color: var(--md-ink);
}

body { background: var(--md-bg); }

h1, h2, h3, .display-font, .navbar-brand {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: .01em;
    text-wrap: balance;
}

.navbar-club { background: var(--md-blue); }
.navbar-club .navbar-brand .dot { display: inline-block; width: 22px; height: 22px; border-radius: 50%; margin-right: .5rem; vertical-align: -4px;
    background: linear-gradient(135deg, var(--md-red) 50%, var(--md-blue) 50%); box-shadow: 0 0 0 2px #fff; }
.navbar-club .nav-link { color: rgba(255,255,255,.8); font-weight: 500; }
.navbar-club .nav-link.active, .navbar-club .nav-link:hover { color: #fff; }

.card { border-color: var(--md-line); background: var(--md-card); }
.eyebrow { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--md-muted); font-weight: 600; }
.tabular { font-variant-numeric: tabular-nums; }

/* Spieler-Chip in Gruppenfarbe */
.chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 7px;
    border-radius: 13px; color: #fff; font: 700 .95rem/1 "Barlow Condensed", sans-serif; font-variant-numeric: tabular-nums; }
.chip-rot { background: var(--md-red); }
.chip-blau { background: var(--md-blue); }
.chip-schwarz { background: var(--md-black); }
.pos-badge { display: inline-block; min-width: 30px; text-align: center; font: 700 .85rem "Barlow Condensed", sans-serif;
    border: 1px solid var(--md-line); border-radius: 6px; padding: 1px 5px; color: var(--md-muted); }
.pos-badge.main { border-color: var(--md-ink); color: var(--md-ink); }

/* Planer */
.round-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 6px; }
.round-tab { border: 1.5px solid var(--md-line); background: var(--md-card); border-radius: 10px; padding: 6px 0 4px; position: relative;
    font: 700 1.2rem "Barlow Condensed", sans-serif; color: var(--md-ink); }
.round-tab small { display: block; font: 500 .65rem "Barlow", sans-serif; color: var(--md-muted); }
.round-tab.hot small { color: var(--md-hot-ink); }
.round-tab.active { background: var(--md-ink); color: var(--md-bg); border-color: var(--md-ink); }
.round-tab.active small { color: var(--md-bg); opacity: .8; }
.round-tab .res-dot { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 4px; }
.field-card .field-head { color: #fff; padding: .6rem 1rem; font: 700 1.1rem "Barlow Condensed", sans-serif; display: flex; justify-content: space-between; align-items: center; }
.field-card.field-A .field-head { background: var(--md-red); }
.field-card.field-B .field-head { background: var(--md-blue); }
.slot-row { display: grid; grid-template-columns: 44px 1fr 34px; gap: .5rem; align-items: center; padding: .35rem 1rem; border-top: 1px solid var(--md-line); }
.slot-row .pos { font: 700 1rem "Barlow Condensed", sans-serif; color: var(--md-muted); }
.slot-row.warn select { border-color: #D98C1F; }
.slot-row .hint { grid-column: 2 / 4; font-size: .75rem; color: #9A5B00; }
.score-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 1rem; border-top: 1px solid var(--md-line); }
.score-row input { width: 52px; text-align: center; font: 700 1.3rem "Barlow Condensed", sans-serif; }
.outcome { font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.outcome-w { background: #DDF2E3; color: #1C6B38; }
.outcome-d { background: var(--md-line); color: var(--md-muted); }
.outcome-l { background: var(--md-hot); color: var(--md-hot-ink); }
.bench-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--md-bg); border-radius: 999px; padding: 2px 10px 2px 2px; font-size: .85rem; font-weight: 600; margin: 0 .3rem .3rem 0; }

/* Einsatzmatrix */
.matrix { font-size: .85rem; }
.matrix th, .matrix td { text-align: center; vertical-align: middle; white-space: nowrap; }
.matrix td.name { text-align: left; }
.matrix .cell-A { background: rgba(200, 50, 44, .14); font-weight: 700; }
.matrix .cell-B { background: rgba(29, 46, 140, .14); font-weight: 700; }
.matrix th.hot { background: var(--md-hot); color: var(--md-hot-ink); }
.minutes-low { color: var(--md-hot-ink); font-weight: 700; }

/* Taktik-Board */
.board-wrap { background: var(--md-card); border: 1px solid var(--md-line); border-radius: 12px; padding: .5rem; }
.board-svg { width: 100%; height: auto; touch-action: none; user-select: none; display: block; }
.board-toolbar .btn.active { background: var(--md-ink); color: var(--md-bg); }
.sketch-thumb svg { width: 100%; height: auto; display: block; border-radius: 8px; }