.match-head {
    --status-col: 5.5rem;
    --aktionen-col: 5.5rem;
    --ergebnis-col: 6rem;
    --ergebnis-versatz: 0rem;
    display: grid;
    grid-template-columns:
        calc(var(--status-col) + var(--ergebnis-versatz))
        max(0rem, calc(var(--aktionen-col) - var(--status-col)))
        minmax(0, 1fr)
        var(--ergebnis-col)
        minmax(0, 1fr)
        max(0rem, calc(var(--status-col) - var(--aktionen-col)))
        var(--aktionen-col);
    align-items: center;
    column-gap: 0.4rem;
}

.match-head .status-cell {
    grid-column: 1;
}

.match-head .team-name:first-of-type {
    grid-column: 3;
}

.match-head .result-box,
.match-head .result-box-empty {
    grid-column: 4;
}

.match-head .team-name:last-of-type {
    grid-column: 5;
}

.match-head .aktionen-cell {
    grid-column: 7;
    justify-content: flex-end;
}

.match-head.has-brettergebnisse {
    --ergebnis-versatz: 2rem;
}

.match-head > * {
    min-width: 0;
}

.verlegt-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.2rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: color-mix(in oklab, var(--bs-danger), black 18%);
    background-color: color-mix(in oklab, var(--bs-danger), white 92%);
}

.verlegt-row .verlegt-regulaer {
    font-weight: 400;
}

.match-row.match-arrived {
    background-color: color-mix(in oklab, var(--accent-color), white 90%);
    transition: background-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .match-row.match-arrived {
        transition: none;
    }
}


.table-chess th {
    vertical-align: middle;
    font-size: 0.8rem;
    border: none;
    letter-spacing: 0.03rem;
}

.table-chess td {
    vertical-align: middle;
    font-size: 0.85rem;
    border-color: #f2f2f2;
}

.table-chess {
    table-layout: fixed;
}

.table-chess col.col-brett {
    width: 2rem;
}

.table-chess col.col-nr {
    width: 2.6rem;
}

.table-chess col.col-rating {
    width: 3.6rem;
}

.table-chess col.col-ergebnis {
    width: 4.25rem;
}

.table-chess th.ergebnis-zelle,
.table-chess td.ergebnis-zelle {
    padding-left: 0;
    padding-right: 0;
}

.table-chess .spieler-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.melde-nr {
    color: var(--meta-ink, var(--bs-secondary-color));
    font-size: 0.8rem;
    font-family: inherit;
}

.team-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (pointer: coarse) {
    .aktionen-edit .btn,
    .match-details-toggle,
    .spielplan-icon-button {
        min-width: 3.15rem;
        min-height: 3.15rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .match-head:has(.status-cell button) {
        --status-col: 3.15rem;
    }

}

@media (pointer: coarse) and (max-width: 639.98px) {
    .match-head {
        --aktionen-col: 3.15rem;
    }
}

.status-cell {
    gap: 0.3rem;
}


.paarung-ergebnis {
    display: inline-block;
    width: 3.75rem;
    padding: 0.15rem 0;
    text-align: center;
    white-space: nowrap;
}

.result-box,
.result-box-empty {
    font-weight: 700;
    border-radius: 4px;
    text-align: center;
    display: inline-block;
    padding: 0.3rem 0;
}

tr.row-aufsteiger > td,
tr.row-aufsteiger > th {
    background-color: var(--promo-bg);
}

tr.row-absteiger > td,
tr.row-absteiger > th {
    background-color: var(--releg-bg);
}

.kreuz-punkte-inhalt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 0.25rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kreuz-punkte-inhalt > :first-child {
    text-align: right;
}

.kreuz-punkte-inhalt > :last-child {
    text-align: left;
}

@media (max-width: 767.98px) {
    .match-head {
        --status-col: 2.5rem;
        --aktionen-col: 4rem;
        --ergebnis-col: 5rem;
    }
}

@media (max-width: 767.98px) {
    .table-chess col.col-elo {
        width: 0;
    }

    .table-chess .elo-cell {
        overflow: hidden;
    }
}

@media (max-width: 639.98px) {
    .match-head {
        --status-col: 2rem;
        --aktionen-col: 2rem;
        --ergebnis-col: 4.5rem;
        column-gap: 0.2rem;
    }

    .match-head .team-name:first-of-type {
        padding-right: 0.3rem;
    }

    .match-head .team-name:last-of-type {
        padding-left: 0.3rem;
    }

    .match-head.has-brettergebnisse {
        --ergebnis-versatz: 2rem;
    }

    .table-chess col.col-nr {
        width: 2rem;
    }

    .table-chess .brett-nr,
    .table-chess .nummer-spalte {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        text-align: right !important;
        font-variant-numeric: tabular-nums;
    }

    .match-head:has(.aktionen-icons, .aktionen-edit a) {
        grid-template-rows: auto auto;
        row-gap: 0.25rem;
    }

    .match-head:has(.aktionen-icons, .aktionen-edit a) .team-name:first-of-type {
        grid-column: 1 / 4;
        grid-row: 1;
    }

    .match-head:has(.aktionen-icons, .aktionen-edit a) .result-box,
    .match-head:has(.aktionen-icons, .aktionen-edit a) .result-box-empty {
        grid-row: 1;
    }

    .match-head:has(.aktionen-icons, .aktionen-edit a) .team-name:last-of-type {
        grid-column: 5 / 8;
        grid-row: 1;
    }

    .match-head:has(.aktionen-icons, .aktionen-edit a) .status-cell {
        grid-column: 1 / 4;
        grid-row: 2;
    }

    .match-head:has(.aktionen-icons, .aktionen-edit a) .aktionen-cell {
        grid-column: 5 / 8;
        grid-row: 2;
    }

    .match-head:not(:has(.aktionen-icons, .aktionen-edit a)) .team-name:first-of-type {
        grid-column: 1 / 4;
        grid-row: 1;
    }

    .match-head:not(:has(.aktionen-icons, .aktionen-edit a)):has(.status-cell button) .team-name:first-of-type {
        padding-left: var(--status-col);
    }

    .match-head:not(:has(.aktionen-icons, .aktionen-edit a)) .team-name:last-of-type {
        grid-column: 5 / 8;
        grid-row: 1;
        padding-right: var(--aktionen-col);
    }

    .match-head:not(:has(.aktionen-icons, .aktionen-edit a)) .result-box,
    .match-head:not(:has(.aktionen-icons, .aktionen-edit a)) .result-box-empty {
        grid-row: 1;
    }

    .match-head:not(:has(.aktionen-icons, .aktionen-edit a)) .status-cell,
    .match-head:not(:has(.aktionen-icons, .aktionen-edit a)) .aktionen-cell {
        grid-row: 1;
        position: relative;
        z-index: 1;
    }

    .aktionen-edit:not(:has(a)) {
        display: none;
    }

}

@media (max-width: 575.98px) {
    .match-head.has-brettergebnisse {
        --ergebnis-versatz: 1.5rem;
    }

    .table-chess col.col-brett {
        width: 1.5rem;
    }

    .table-chess .brett-nr {
        padding-left: 0.1rem;
        padding-right: 0.1rem;
    }

    .table-chess col.col-rating {
        width: 0;
    }

    .table-chess .rating-cell {
        overflow: hidden;
    }
}