/* USK NSV-Ergebnisse
 * Farben kommen aus den Core-Framework-Variablen der Seite (--primary, --border, --text-body …).
 * Die Werte hinter dem Komma sind Rückfallfarben, falls eine Variable fehlt.
 */

.usk-nsv {
    --usk-nsv-accent: var(--primary, #7d8d1a);
    --usk-nsv-line: var(--border, #e5e5e5);
    --usk-nsv-text: var(--text-body, #4f4f4f);
    --usk-nsv-head: var(--text-heading, #333333);
    --usk-nsv-muted: var(--text-muted, #727272);
    --usk-nsv-link: var(--link, #754c00);
    --usk-nsv-bg: var(--white, #ffffff);
    --usk-nsv-head-bg: #f6f6f6;
    --usk-nsv-zebra: #fafafa;
    --usk-nsv-own: rgba(125, 141, 26, .1);
    --usk-nsv-loss: #a33a2f;

    display: flex;
    flex-direction: column;
    gap: 1.5em;
    width: 100%;
    color: var(--usk-nsv-text);
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .usk-nsv {
        --usk-nsv-own: color-mix(in srgb, var(--usk-nsv-accent) 11%, var(--usk-nsv-bg));
    }
}

.usk-nsv__title,
.usk-nsv__heading {
    margin: 0;
}

.usk-nsv__part {
    display: flex;
    flex-direction: column;
    gap: .75em;
}

/* Scroll-Container: breite Tabellen scrollen seitlich statt das Layout zu sprengen */
.usk-nsv__scroll {
    position: relative; /* Bezugsrahmen fuer .usk-nsv__sr, sonst ragen die Screenreader-Texte aus dem Scrollbereich und verbreitern die Seite */
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--usk-nsv-bg);
    border: 1px solid var(--usk-nsv-line);
}

.usk-nsv__scroll:focus-visible {
    outline: 2px solid var(--usk-nsv-accent);
    outline-offset: 2px;
}

.usk-nsv__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: .95em;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.usk-nsv__table th,
.usk-nsv__table td {
    padding: .6em .75em;
    border: 0;
    border-bottom: 1px solid var(--usk-nsv-line);
    text-align: left;
    vertical-align: middle;
}

.usk-nsv__table thead th {
    background: var(--usk-nsv-head-bg);
    color: var(--usk-nsv-head);
    font-weight: 700;
    white-space: nowrap;
    border-bottom-width: 2px;
}

.usk-nsv__table tbody th {
    font-weight: 400;
}

.usk-nsv__table tbody tr:nth-child(even) > * {
    background: var(--usk-nsv-zebra);
}

.usk-nsv__table tbody tr:last-child > * {
    border-bottom: 0;
}

.usk-nsv__table tfoot > tr > * {
    font-weight: 700;
    color: var(--usk-nsv-head);
    border-top: 2px solid var(--usk-nsv-line);
    border-bottom: 0;
    background: var(--usk-nsv-head-bg);
}

.usk-nsv__table .is-num {
    text-align: center;
    white-space: nowrap;
}

.usk-nsv__table .is-nowrap {
    white-space: nowrap;
}

.usk-nsv__table abbr {
    text-decoration: none;
    cursor: help;
}

.usk-nsv__table a {
    color: var(--usk-nsv-link);
    text-decoration: none;
}

.usk-nsv__table a:hover,
.usk-nsv__table a:focus-visible {
    color: var(--usk-nsv-accent);
    text-decoration: underline;
}

.usk-nsv__table strong {
    color: var(--usk-nsv-head);
}

/* Eigene Mannschaft in der Tabelle */
.usk-nsv__table tbody tr.is-own > * {
    background: var(--usk-nsv-own);
}

/* Nächstes Spiel: grüner Rand links wie der aktive Menüpunkt */
.usk-nsv__table tr.is-next > :first-child {
    box-shadow: inset 3px 0 0 var(--usk-nsv-accent);
}

.usk-nsv__time {
    margin-left: .35em;
    color: var(--usk-nsv-muted);
}

.usk-nsv__result {
    font-weight: 700;
    white-space: nowrap;
}

.usk-nsv__result.is-win {
    color: var(--usk-nsv-accent);
}

.usk-nsv__result.is-loss {
    color: var(--usk-nsv-loss);
}

.usk-nsv__badge {
    display: inline-block;
    padding: .2em .6em;
    border-radius: 2px;
    background: var(--usk-nsv-accent);
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

/* Ligatabelle */
.usk-nsv__dwz {
    display: block;
    font-size: .85em;
    color: var(--usk-nsv-muted);
}

/* Pfeil steht links neben der Ziffer, ohne sie aus der Mitte zu schieben */
.usk-nsv__trend {
    display: inline-block;
    width: 1.4em;
    margin-left: -1.4em;
    font-size: .75em;
    text-align: center;
}

.usk-nsv__trend.is-up {
    color: var(--usk-nsv-accent);
}

.usk-nsv__trend.is-down {
    color: var(--usk-nsv-loss);
}

/* Aufstellung: Namensspalte bleibt beim seitlichen Scrollen stehen */
.usk-nsv__table--aufstellung .is-name {
    position: sticky;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    background: var(--usk-nsv-bg);
}

.usk-nsv__table--aufstellung thead .is-name {
    background: var(--usk-nsv-head-bg);
}

.usk-nsv__table--aufstellung tr.is-reserve .is-name a,
.usk-nsv__table--aufstellung tr.is-reserve .is-name {
    color: var(--usk-nsv-muted);
}

/* Stand / Hinweise */
.usk-nsv__meta {
    margin: 0;
    font-size: .85em;
    color: var(--usk-nsv-muted);
}

.usk-nsv__meta a {
    color: inherit;
}

.usk-nsv__notice {
    margin: 0;
    padding: 1em 1.25em;
    border-left: 3px solid var(--usk-nsv-accent);
    background: var(--usk-nsv-head-bg);
}

/* Nur für Screenreader */
.usk-nsv__sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 600px) {
    .usk-nsv__table th,
    .usk-nsv__table td {
        padding: .5em .45em;
    }

    .usk-nsv__time {
        display: block;
        margin-left: 0;
    }

    /* Spielplan: Rundenspalte ausblenden, damit das Ergebnis sichtbar bleibt */
    .usk-nsv__table--spielplan .is-rd {
        display: none;
    }

    .usk-nsv__table--spielplan tr.is-next > .is-date {
        box-shadow: inset 3px 0 0 var(--usk-nsv-accent);
    }

    .usk-nsv__table--spielplan {
        font-size: .9em;
    }

    .usk-nsv__badge {
        white-space: normal;
        text-align: center;
    }
}