/* ============================================================
   Sommerliga – Design im Stil der DSB-Bundesliga (Mobile First)
   Basis: kleine Viewports. Enhancements per min-width-Breakpoints.
   ============================================================ */
:root {
    /* Hauptfarben (DSB-Rot/Schwarz/Weiß) */
    --c-primary:    #c8102e;
    --c-primary-d:  #9d0c24;
    --c-primary-l:  #e63946;
    --c-primary-xl: #fde2e6;

    /* Akzente */
    --c-accent:     #c8102e;
    --c-accent-2:   #6e0a18;
    --c-pink:       #c8102e;
    --c-blue:       #1f4e79;
    --c-violet:     #4b5563;

    /* Status */
    --c-danger:     #c8102e;
    --c-warn:       #b45309;
    --c-ok:         #15803d;

    /* Neutrale */
    --c-bg:         #f4f4f4;
    --c-bg-2:       #ebebeb;
    --c-card:       #ffffff;
    --c-border:     #e1e1e1;
    --c-border-h:   #c8c8c8;
    --c-text:       #1a1a1a;
    --c-muted:      #6b6b6b;
    --c-header:     #111111;
    --c-header-2:   #1f1f1f;

    /* Effekte */
    --radius:       4px;
    --radius-lg:    6px;
    --shadow:       0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-hi:    0 4px 12px rgba(0, 0, 0, 0.10);

    /* Touch-Targets */
    --tap:          44px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
    color: var(--c-text);
    background: var(--c-bg);
    min-height: 100vh;
    line-height: 1.5;
    font-size: 15px;
    -webkit-tap-highlight-color: rgba(200, 16, 46, 0.15);
}

a { color: var(--c-primary); text-decoration: none; transition: color .12s ease; }
a:hover, a:focus-visible { color: var(--c-primary-d); text-decoration: underline; }

img, svg { max-width: 100%; height: auto; }

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 0.75rem;
}

/* ---------------- Topbar ----------------------------------- */
.topbar {
    background: var(--c-header);
    color: #fff;
    border-bottom: 3px solid var(--c-primary);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar a { color: #fff; }
.topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.75rem;
}

.brand {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    color: #fff;
    padding-right: 0.5rem;
}

.topbar nav {
    order: 3;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0.5rem;
    padding-top: 0.25rem;
}
.topbar nav a {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.6rem 0.5rem;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid transparent;
}
.topbar nav a:hover,
.topbar nav a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-bottom-color: var(--c-primary);
    text-decoration: none;
}

.topbar .user {
    margin-left: auto;
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.8rem;
    flex-wrap: wrap;
}
.topbar .user span {
    color: #d4d4d4;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar .user a {
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}
.topbar .user a:hover,
.topbar .user a:focus-visible {
    background: var(--c-primary);
    border-color: var(--c-primary);
    text-decoration: none;
}

@media (min-width: 720px) {
    .topbar { position: static; border-bottom-width: 4px; }
    .topbar-inner { gap: 1.25rem; padding: 0.75rem 1rem; }
    .brand {
        font-size: 1.15rem;
        border-right: 1px solid rgba(255, 255, 255, 0.25);
    }
    .topbar nav {
        order: initial;
        width: auto;
        flex: 1;
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
        gap: 0;
    }
    .topbar nav a {
        flex: 0 0 auto;
        padding: 0.5rem 0.85rem;
        font-size: 0.9rem;
        margin-bottom: -2px;
    }
    .topbar .user a { font-size: 0.8rem; }
}

/* ---------------- Layout / Footer ------------------------ */
main.container {
    padding-top: 1rem;
    padding-bottom: 2rem;
}
@media (min-width: 720px) {
    main.container { padding-top: 1.5rem; padding-bottom: 2.5rem; padding-left: 1rem; padding-right: 1rem; }
}

.footer {
    background: var(--c-header);
    color: #b5b5b5;
    padding: 1rem 0;
    margin-top: 2rem;
    font-size: 0.78rem;
    border-top: 3px solid var(--c-primary);
}
.footer a { color: #fff; }
@media (min-width: 720px) {
    .footer { padding: 1.25rem 0; margin-top: 2.5rem; font-size: 0.82rem; border-top-width: 4px; }
}

/* ---------------- Headings -------------------------------- */
h1, h2, h3 { line-height: 1.25; color: var(--c-text); }
h1 {
    margin: 0 0 0.85rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--c-text);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--c-primary);
    overflow-wrap: anywhere;
}
h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.25rem 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--c-border);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0.9rem 0 0.5rem;
}
@media (min-width: 720px) {
    h1 { font-size: 1.7rem; margin-bottom: 1rem; padding-bottom: 0.6rem; }
    h2 { font-size: 1.25rem; margin-top: 1.5rem; }
    h3 { font-size: 1.05rem; }
}

.muted { color: var(--c-muted); }
.warn  { color: var(--c-warn); margin-left: 0.4rem; font-size: 0.85em; }
.ok    { color: var(--c-ok); }
.bad   { color: var(--c-danger); }

/* ---------------- Flash ----------------------------------- */
.flash {
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius);
    margin: 0.65rem 0;
    background: #f3f3f3;
    color: var(--c-text);
    border-left: 4px solid var(--c-muted);
    font-size: 0.88rem;
}
.flash.success { background: #eaf5ec; color: #14532d; border-color: var(--c-ok); }
.flash.error   { background: #fde2e6; color: #7a0d1d; border-color: var(--c-primary); }
.flash.info    { background: #e7eef5; color: #1f3a5c; border-color: var(--c-blue); }

/* ---------------- Cards ----------------------------------- */
.card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 0.85rem;
    margin: 0.75rem 0;
    box-shadow: var(--shadow);
}
.card.inline { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; }

a.card.link {
    display: block;
    color: inherit;
    border-top: 3px solid var(--c-primary);
    transition: box-shadow .15s ease, transform .15s ease;
    min-height: var(--tap);
}
a.card.link:hover,
a.card.link:focus-visible {
    box-shadow: var(--shadow-hi);
    transform: translateY(-1px);
    text-decoration: none;
}
a.card.link h3 {
    color: var(--c-primary);
    margin: 0 0 0.25rem;
}

.grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}
@media (min-width: 540px) {
    .grid { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .card { padding: 1rem 1.1rem; margin: 0.9rem 0; }
}

/* ---------------- Forms ----------------------------------- */
label {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    color: var(--c-muted);
    gap: 0.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input:not([type]),
select, textarea {
    font: inherit;
    color: var(--c-text);
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--c-border-h);
    border-radius: var(--radius);
    background: #fff;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    min-height: var(--tap);
    transition: border-color .12s ease, box-shadow .12s ease;
}
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.18);
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: stretch;
}
.row > label, .row > .btn, .row > input, .row > select, .row > button {
    flex: 1 1 100%;
}
@media (min-width: 540px) {
    .row { gap: 0.75rem; align-items: end; }
    .row > label, .row > .btn, .row > input, .row > select, .row > button {
        flex: 0 1 auto;
    }
}

/* ---------------- Buttons --------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    min-height: var(--tap);
    border: 1px solid var(--c-border-h);
    background: #fff;
    color: var(--c-text);
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover, .btn:focus-visible {
    background: #f3f3f3;
    border-color: var(--c-text);
    color: var(--c-text);
    text-decoration: none;
}
.btn.primary {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.btn.primary:hover,
.btn.primary:focus-visible {
    background: var(--c-primary-d);
    border-color: var(--c-primary-d);
    color: #fff;
}
.btn.danger {
    background: var(--c-header);
    border-color: var(--c-header);
    color: #fff;
}
.btn.danger:hover,
.btn.danger:focus-visible {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.btn.small {
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
    min-height: 32px;
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------------- Tables ---------------------------------- */
/* Mobile: Tabellen ohne horizontales Scrollen.
   Zellen brechen um, Schrift kleiner, Zahlen-Spalten kompakt. */
table.data {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    background: #fff;
    border: 1px solid var(--c-border);
    font-size: 0.78rem;
    table-layout: auto;
}
table.data th, table.data td {
    padding: 0.4rem 0.35rem;
    border-bottom: 1px solid var(--c-border);
    text-align: left;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
table.data thead th {
    background: var(--c-header);
    color: #fff;
    font-size: 0.64rem;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    border-bottom: 2px solid var(--c-primary);
    padding: 0.4rem 0.3rem;
}
table.data tbody tr:nth-child(even) td { background: #fafafa; }
table.data tbody tr:hover td { background: #f0f0f0; }
table.data tbody tr:last-child td { border-bottom: 0; }

/* Sehr enge Phones: noch kompakter */
@media (max-width: 380px) {
    table.data { font-size: 0.72rem; }
    table.data th, table.data td { padding: 0.32rem 0.25rem; }
    table.data thead th { font-size: 0.58rem; }
}

@media (min-width: 540px) {
    table.data { font-size: 0.85rem; }
    table.data th, table.data td { padding: 0.5rem 0.55rem; }
    table.data thead th { font-size: 0.7rem; padding: 0.5rem 0.55rem; }
}

@media (min-width: 720px) {
    table.data { font-size: 0.9rem; }
    table.data th, table.data td { padding: 0.55rem 0.7rem; }
    table.data thead th { font-size: 0.75rem; padding: 0.55rem 0.7rem; }
}

/* Tabellenstand: Platz-Hervorhebung + Mobile-Komprimierung
   Spalten:  # | Mannschaft | Sp | S | N | MP | EP | Ringe */
table.table-rank td:first-child,
table.table-rank th:first-child {
    width: 1.8rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
table.table-rank td:first-child { font-weight: 700; }
table.table-rank td:nth-child(2) {
    /* Mannschaftsname: darf umbrechen */
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 4.5rem;
}
/* Alle Zahlen-Spalten: zentriert, kompakt, nicht umbrechen */
table.table-rank td:nth-child(n+3),
table.table-rank th:nth-child(n+3) {
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
table.table-rank tbody tr:nth-child(1) td {
    background: #fde2e6 !important;
    font-weight: 700;
}
table.table-rank tbody tr:nth-child(1) td:first-child {
    color: var(--c-primary);
    border-left: 3px solid var(--c-primary);
}
table.table-rank tbody tr:nth-child(2) td,
table.table-rank tbody tr:nth-child(3) td {
    background: #fafafa !important;
}
@media (min-width: 540px) {
    table.table-rank td:first-child,
    table.table-rank th:first-child { width: 2.4rem; }
    table.table-rank td:nth-child(n+3),
    table.table-rank th:nth-child(n+3) {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
}

/* Spielplan-Tabelle: Mannschaftsnamen umbrechen, Status & Datum kompakt
   Spalten:  Datum | Heim | Score | Gast | Status | Aktion */
table.data:not(.table-rank):not(.duel-input):not(.shootoff-table) td:first-child {
    /* Datum */
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--c-muted);
    font-size: 0.92em;
}
@media (max-width: 539px) {
    /* Lange Mannschaftsnamen sauber umbrechen */
    table.data td { line-height: 1.3; }
    /* Score-Zelle kompakt halten */
    table.data td.score { white-space: nowrap; }
    /* Aktions-Buttons in Tabellen: kompakt */
    table.data .btn.small {
        padding: 0.25rem 0.45rem;
        font-size: 0.65rem;
        min-height: 28px;
        letter-spacing: 0.02em;
    }
    /* Pills in Tabellenzellen kleiner */
    table.data .pill { font-size: 0.6rem; padding: 0.1rem 0.4rem; }
}

.actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.inline { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin: 0; }

/* ---------------- Pills / Chips --------------------------- */
.pill {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 2px;
    background: #e5e5e5;
    color: #444;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pill.ok {
    background: var(--c-primary);
    color: #fff;
}

.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li {
    background: #f3f3f3;
    color: var(--c-text);
    padding: 0.3rem 0.7rem;
    border-radius: 2px;
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    border: 1px solid var(--c-border);
    font-weight: 600;
    font-size: 0.85rem;
}

/* ---------------- KPIs ------------------------------------ */
.kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin: 0.85rem 0;
}
.kpi {
    background: #fff;
    border: 1px solid var(--c-border);
    border-top: 3px solid var(--c-primary);
    border-radius: var(--radius);
    padding: 0.65rem 0.75rem;
    box-shadow: var(--shadow);
}
.kpi-value {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}
.kpi-label {
    color: var(--c-muted);
    font-size: 0.68rem;
    margin-top: 0.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
@media (min-width: 540px) {
    .kpis {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.75rem;
        margin: 1rem 0;
    }
    .kpi { padding: 0.75rem 0.9rem; }
    .kpi-value { font-size: 1.55rem; }
    .kpi-label { font-size: 0.72rem; }
}

/* ---------------- Score / Match --------------------------- */
.vs { color: var(--c-muted); margin: 0 0.3rem; font-weight: 400; }
.bigscore {
    margin: 0.85rem 0;
    padding: 0.85rem 0.9rem;
    background: #fff;
    border: 1px solid var(--c-border);
    border-top: 3px solid var(--c-primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.bigscore[data-decided="1"] {
    border-top-color: var(--c-ok);
}
.bigscore .score-line {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    text-align: center;
    font-weight: 600;
}
.bigscore .score-team {
    min-width: 0;
    text-align: center !important;
    overflow-wrap: anywhere;
}
.bigscore .score-numbers {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 1.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--c-text);
}
.bigscore .score-numbers strong {
    color: var(--c-primary);
    font-weight: 800;
}
.bigscore .score-numbers strong.pulse { animation: score-pulse .45s ease; }
@keyframes score-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.bigscore .score-label {
    text-align: center;
    margin-top: 0.4rem;
    color: var(--c-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.74rem;
}
.bigscore .vs { font-size: 1.1rem; color: var(--c-muted); }

@media (min-width: 540px) {
    .bigscore { padding: 1rem 1.25rem; }
    .bigscore .score-line {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .bigscore .score-team { flex: 1; min-width: 8rem; }
    .bigscore .score-team:first-child  { text-align: right !important; }
    .bigscore .score-team:last-child   { text-align: left !important; }
    .bigscore .score-numbers { font-size: 2rem; }
    .bigscore .vs { font-size: 1.3rem; }
}

/* Input-States */
input.input-saving {
    border-color: var(--c-warn);
    background: #fff8e6;
}
input.input-saved {
    border-color: var(--c-ok);
    background: #eaf5ec;
}
input.input-error {
    border-color: var(--c-danger);
    background: #fde2e6;
}
.score { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* Eingabe-Tabelle für Einzelduelle
   Spalten:  # | Schuss | Heim (Pos.) | Ringe Heim | Ringe Gast | Gast (Pos.) | Status
   Mobile: Mannschaftsnamen umbrechen, Ring-Inputs schmal, Status klein. */
table.duel-input td:nth-child(1),
table.duel-input th:nth-child(1) {
    width: 1.6rem;
    text-align: center;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
table.duel-input td:nth-child(2),
table.duel-input th:nth-child(2) {
    width: 2.4rem;
    text-align: center;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
table.duel-input td:nth-child(3),
table.duel-input td:nth-child(6) {
    /* Heim/Gast Name + Position: darf umbrechen */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 4rem;
    line-height: 1.25;
}
table.duel-input td:nth-child(4),
table.duel-input td:nth-child(5) {
    width: 4.2rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
table.duel-input td:nth-child(4) input,
table.duel-input td:nth-child(5) input {
    width: 100%;
    min-width: 0;
    max-width: 4rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding: 0.4rem 0.35rem;
    min-height: 36px;
}
table.duel-input td:nth-child(7) {
    text-align: center;
    font-weight: 700;
    width: 2.5rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
table.duel-input td:nth-child(7) .badge { font-size: 0.62rem; padding: 0.05rem 0.35rem; }

@media (max-width: 380px) {
    /* Auf sehr kleinen Phones: noch enger; Pills in Namensspalten klein */
    table.duel-input { font-size: 0.7rem; }
    table.duel-input td, table.duel-input th { padding-top: 0.3rem; padding-bottom: 0.3rem; }
    table.duel-input td:nth-child(3) .pill,
    table.duel-input td:nth-child(6) .pill {
        font-size: 0.55rem;
        padding: 0.05rem 0.3rem;
        display: inline-block;
        margin-top: 0.15rem;
    }
}

@media (min-width: 540px) {
    table.duel-input td:nth-child(4),
    table.duel-input td:nth-child(5) { width: 5.5rem; }
    table.duel-input td:nth-child(4) input,
    table.duel-input td:nth-child(5) input { max-width: 5rem; padding: 0.45rem 0.5rem; }
}
@media (min-width: 720px) {
    table.duel-input td:nth-child(4),
    table.duel-input td:nth-child(5) { width: auto; }
    table.duel-input td:nth-child(4) input,
    table.duel-input td:nth-child(5) input { max-width: 6rem; width: 6rem; }
}

/* Querformat-Hinweis für die Duell-Eingabe auf sehr engen Phones */
.landscape-hint {
    display: none;
    margin: 0.5rem 0;
    padding: 0.5rem 0.7rem;
    background: #fff8e6;
    border: 1px solid #f0d480;
    border-left: 3px solid var(--c-warn);
    border-radius: var(--radius);
    font-size: 0.78rem;
    color: #7a4a0a;
}
@media (max-width: 420px) and (orientation: portrait) {
    .landscape-hint { display: block; }
}

/* Ergebnis-Marker pro Zelle */
.duel-h { background: #eaf5ec !important; color: #14532d; }
.duel-a { background: #fde2e6 !important; color: #7a0d1d; }
.duel-t { background: #fff4e0 !important; color: #7a4a0a; }

/* Badge für Status-Spalte */
.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 2px;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.status-cell { text-align: center; }

/* Duell-Zeilen nach 5-Punkte-Cutoff */
tr.duel-skip { opacity: 0.5; background: #f3f3f3; }
tr.duel-skip input[disabled] { background: #ebebeb; color: var(--c-muted); }

/* Stechen */
.shootoff-block {
    margin: 0.85rem 0;
    padding: 0.65rem 0.85rem;
    background: #fff8e6;
    border: 1px solid #f0d480;
    border-left: 3px solid var(--c-warn);
    border-radius: var(--radius);
}
.shootoff-block h3 { margin: 0 0 0.5rem; color: #7a4a0a; }
.shootoff-table { background: #fff; }
.shootoff-table td:nth-child(2) input,
.shootoff-table td:nth-child(3) input {
    width: 5rem;
    min-width: 4.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.shootoff-table .shootoff-status { text-align: center; }

/* Stechen-Schüsse in Head-to-Head */
tr.shootoff-detail td {
    background: #fff8e6;
    font-size: 0.82rem;
    padding: 0.35rem 0.7rem;
    color: var(--c-text);
}

/* Spielplan: Rundenkopf */
.round-title {
    margin-top: 1rem;
    padding: 0.5rem 0.7rem;
    background: var(--c-header);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-left: 4px solid var(--c-primary);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
}
.round-title .muted {
    font-weight: 500;
    font-size: 0.78rem;
    color: #bdbdbd;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0;
}
@media (min-width: 720px) {
    .round-title { font-size: 0.95rem; padding: 0.4rem 0.7rem; }
    .round-title .muted { font-size: 0.82rem; }
}

/* ---------------- Details --------------------------------- */
details.card summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--c-text);
    list-style: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.88rem;
    min-height: var(--tap);
    display: flex;
    align-items: center;
}
details.card summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 0.4rem;
    transition: transform .15s ease;
    color: var(--c-primary);
}
details.card[open] summary::before { transform: rotate(90deg); }
details.card summary::-webkit-details-marker { display: none; }

/* Selection */
::selection { background: var(--c-primary); color: #fff; }

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--c-primary); }
::-webkit-scrollbar-track { background: #ebebeb; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------- Install-Seite --------------------------- */
body.install main.container { max-width: 640px; }
body.install { background: var(--c-header); }
body.install main.container {
    background: #fff;
    margin-top: 1.5rem;
    border-radius: var(--radius);
    border-top: 4px solid var(--c-primary);
    padding: 1.1rem 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
@media (min-width: 540px) {
    body.install main.container { margin-top: 3rem; padding: 1.5rem 1.75rem; }
}

/* ---------------- Aufstellung (Lineup) --------------------- */
.lineup-section { margin-top: 1rem; }
.lineup-block {
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-primary);
    border-radius: var(--radius);
    padding: 0.7rem 0.85rem;
    margin-top: 0.75rem;
    background: #fff;
}
.lineup-block h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.lineup-form label { font-size: 0.82rem; }
@media (min-width: 540px) {
    .lineup-block { padding: 0.75rem 1rem; }
    .lineup-block h3 { font-size: 1rem; }
    .lineup-form label { font-size: 0.85rem; }
}