/* SK DEL2 – SK Light Branding. Alles auf .sk-del2 begrenzt. */
.sk-del2 {
    --sk-accent: #B1976B;
    --sk-accent-2: #d8c3a1;
    --sk-bg: #ffffff;
    --sk-text: #2b2b2b;
    --sk-muted: #7a7a7a;
    --sk-line: #eee7da;
    --sk-row: #faf7f1;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--sk-text);
    box-sizing: border-box;
}
.sk-del2 *, .sk-del2 *::before, .sk-del2 *::after { box-sizing: inherit; }

.sk-del2--dark,
html[data-sk-theme="dark"] .sk-del2--auto {
        --sk-bg: #1f1f22;
        --sk-text: #ececec;
        --sk-muted: #9a9a9a;
        --sk-line: #34343a;
        --sk-row: #27272b;
    }

.sk-del2__card {
    background: var(--sk-bg);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 24px rgba(177, 151, 107, .18);
    border: 1px solid var(--sk-line);
}
.sk-del2__head {
    display: flex; flex-wrap: wrap; gap: 12px 20px;
    align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.sk-del2__title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--sk-accent); }
.sk-del2__tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.sk-del2__field { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--sk-muted); }
.sk-del2__field select {
    font: inherit; color: var(--sk-text); background: var(--sk-bg);
    border: 1px solid var(--sk-accent-2); border-radius: 10px; padding: 6px 10px;
}
.sk-del2__field select:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 1px; }
.sk-del2__check { display: flex; align-items: center; gap: 6px; font-size: .85rem; cursor: pointer; }
.sk-del2__check input { accent-color: var(--sk-accent); }

.sk-del2__scroll { overflow-x: auto; border-radius: 10px; }
.sk-del2__table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 0; }
.sk-del2__table th {
    background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-2));
    color: #fff; text-align: left; padding: 10px 12px; font-weight: 600; white-space: nowrap;
}
.sk-del2__table td { padding: 9px 12px; border-bottom: 1px solid var(--sk-line); white-space: nowrap; }
.sk-del2__table tbody tr:nth-child(even) td { background: var(--sk-row); }
.sk-del2__table tbody tr:hover td { background: rgba(177, 151, 107, .12); }
.sk-del2 .sk-del2__c { text-align: center; }
.sk-del2__res { font-weight: 700; }
.sk-del2__table tr[data-past="1"] .sk-del2__team { color: var(--sk-muted); }
.sk-del2__table tr.is-fav td { font-weight: 600; }
.sk-del2__table tr.is-fav .sk-del2__team { color: var(--sk-accent); }
.sk-del2__table tr.is-next td { box-shadow: inset 0 -2px 0 var(--sk-accent); }
.sk-del2__table tr[hidden] { display: none; }

.sk-del2__msg { margin: 0; color: var(--sk-muted); }
.sk-del2__foot { margin: 12px 0 0; font-size: .75rem; color: var(--sk-muted); }

@media (max-width: 600px) {
    .sk-del2__card { padding: 14px; border-radius: 12px; }
    .sk-del2__table { font-size: .8rem; }
    .sk-del2__table th, .sk-del2__table td { padding: 8px 8px; }
}

/* Monats-Akkordeon */
.sk-del2__btns { display: flex; gap: 8px; }
.sk-del2__btn {
    font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
    color: #fff; border: 0; border-radius: 999px; padding: 7px 14px;
    background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-2));
    box-shadow: 0 4px 14px rgba(177, 151, 107, .45);
    transition: transform .15s ease, box-shadow .15s ease;
}
.sk-del2__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(177, 151, 107, .6); }
.sk-del2__btn:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }

.sk-del2__acc { display: grid; gap: 10px; }
.sk-del2__month {
    border: 1px solid var(--sk-line); border-radius: 12px; background: var(--sk-bg); overflow: hidden;
}
.sk-del2__month[open] { border-color: var(--sk-accent-2); box-shadow: 0 4px 16px rgba(177, 151, 107, .15); }
.sk-del2__month[hidden] { display: none; }
.sk-del2__month > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px; font-weight: 700; user-select: none;
}
.sk-del2__month > summary::-webkit-details-marker { display: none; }
.sk-del2__month > summary::before {
    content: ""; width: 8px; height: 8px; flex: none; margin-right: 4px;
    border-right: 2px solid var(--sk-accent); border-bottom: 2px solid var(--sk-accent);
    transform: rotate(-45deg); transition: transform .2s ease;
}
.sk-del2__month[open] > summary::before { transform: rotate(45deg); }
.sk-del2__month > summary:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: -2px; }
.sk-del2__mname { flex: 1; }
.sk-del2__count {
    font-size: .75rem; font-weight: 600; color: #fff; min-width: 26px; text-align: center;
    padding: 2px 9px; border-radius: 999px;
    background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-2));
}
.sk-del2__month .sk-del2__scroll { border-radius: 0; border-top: 1px solid var(--sk-line); }

/* Farben absichern: Das Haupt-Template (v. a. Nova dunkel) setzt eigene Textfarben auf
   td, label, span, summary usw. Hier gewinnt die im Modul gewählte Hell/Dunkel-Variante. */
.sk-del2--light,
.sk-del2--auto { color-scheme: light; }
.sk-del2--dark,
html[data-sk-theme="dark"] .sk-del2--auto { color-scheme: dark; }

.sk-del2 .sk-del2__card,
.sk-del2 summary,
.sk-del2 .sk-del2__mname,
.sk-del2 td,
.sk-del2 select,
.sk-del2 option { color: var(--sk-text) !important; }

.sk-del2 .sk-del2__field,
.sk-del2 .sk-del2__field > span,
.sk-del2 .sk-del2__check,
.sk-del2 .sk-del2__check > span { color: var(--sk-muted) !important; }

.sk-del2 .sk-del2__check > span { color: var(--sk-text) !important; }

.sk-del2 .sk-del2__title { color: var(--sk-accent) !important; }
.sk-del2 .sk-del2__table th,
.sk-del2 .sk-del2__count,
.sk-del2 .sk-del2__btn { color: #fff !important; }

.sk-del2 .sk-del2__msg,
.sk-del2 .sk-del2__foot { color: var(--sk-muted) !important; }

.sk-del2 .sk-del2__table tr[data-past="1"] td { color: var(--sk-muted) !important; }
.sk-del2 .sk-del2__table tr.is-fav td.sk-del2__team { color: var(--sk-accent) !important; }
.sk-del2 .sk-del2__table td.sk-del2__res { color: var(--sk-text) !important; }

.sk-del2 .sk-del2__table td { background-color: transparent; }
.sk-del2 .sk-del2__table tbody tr:nth-child(even) td { background-color: var(--sk-row); }
.sk-del2 .sk-del2__table tbody tr:hover td { background-color: rgba(177, 151, 107, .14); }

/* Dropdown (Team): eigene Farben mit hoher Spezifität, damit weder Template noch
   Dunkelmodus-Plugin die Auswahl oder die Liste unleserlich machen */
html body .sk-del2.sk-del2--light select,
html body .sk-del2.sk-del2--auto select { color-scheme: light !important; }
html body .sk-del2.sk-del2--dark select,
html[data-sk-theme="dark"] body .sk-del2.sk-del2--auto select { color-scheme: dark !important; }
html body .sk-del2.sk-del2 select,
html body .sk-del2.sk-del2 select option,
html body .sk-del2.sk-del2 select optgroup {
    background-color: var(--sk-bg) !important;
    color: var(--sk-text) !important;
}
html body .sk-del2.sk-del2 select option:checked,
html body .sk-del2.sk-del2 select option:hover {
    background-color: var(--sk-accent) !important;
    color: #fff !important;
}

/* Tabs: Spielplan / Tabelle */
.sk-del2__tabs { display: flex; gap: 6px; margin: 0 0 16px; padding: 4px; border-radius: 999px;
    background: var(--sk-row); border: 1px solid var(--sk-line); width: max-content; max-width: 100%; }
.sk-del2__tab { font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; border: 0; border-radius: 999px;
    padding: 7px 18px; background: transparent; transition: background .15s ease, box-shadow .15s ease; }
.sk-del2 .sk-del2__tab { color: var(--sk-muted) !important; }
.sk-del2__tab:hover { background: rgba(177, 151, 107, .14); }
.sk-del2__tab.is-active { background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-2));
    box-shadow: 0 4px 14px rgba(177, 151, 107, .45); }
.sk-del2 .sk-del2__tab.is-active { color: #fff !important; }
.sk-del2__tab:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }
.sk-del2__panel[hidden] { display: none; }
.sk-del2__panel > .sk-del2__tools { margin-bottom: 14px; }

/* Tabelle */
.sk-del2__scroll--st { border: 1px solid var(--sk-line); border-radius: 12px; }
.sk-del2__st th, .sk-del2__st td { padding: 9px 8px; }
.sk-del2__st .sk-del2__pos { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
    border-radius: 8px; font-weight: 700; font-size: .8rem; border-left: 4px solid transparent; background: var(--sk-row); }
.sk-del2 .sk-del2__st .sk-del2__pos { color: var(--sk-text) !important; }
.sk-del2__zone-po-home { border-left-color: var(--sk-accent) !important; }
.sk-del2__zone-po      { border-left-color: var(--sk-accent-2) !important; }
.sk-del2__zone-prepo   { border-left-color: #8fa3b3 !important; }
.sk-del2__zone-pd      { border-left-color: #c98d8d !important; }
.sk-del2__st .sk-del2__team { font-weight: 600; }
.sk-del2 .sk-del2__st td.sk-del2__pts { color: var(--sk-accent) !important; font-weight: 800; }
.sk-del2__abbr { display: none; }
.sk-del2__form { display: inline-flex; gap: 3px; }
.sk-del2__f { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    border-radius: 6px; font-size: .7rem; font-weight: 700; cursor: help; border: 1px solid transparent; }
.sk-del2 .sk-del2__f--w  { background: var(--sk-accent); color: #fff !important; }
.sk-del2 .sk-del2__f--ow { background: var(--sk-accent-2); color: #3b2f1a !important; }
.sk-del2 .sk-del2__f--ol { background: transparent; border-color: var(--sk-accent-2); color: var(--sk-muted) !important; }
.sk-del2 .sk-del2__f--l  { background: var(--sk-row); border-color: var(--sk-line); color: var(--sk-muted) !important; }
.sk-del2__legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .78rem; }
.sk-del2 .sk-del2__legend li { color: var(--sk-muted) !important; display: flex; align-items: center; gap: 6px; margin: 0; }
.sk-del2__dot { width: 4px; height: 14px; border-radius: 2px; border-left: 4px solid transparent; display: inline-block; }

@media (max-width: 760px) {
    .sk-del2__opt { display: none; }
}
@media (max-width: 600px) {
    .sk-del2__long { display: none; }
    .sk-del2__abbr { display: inline; }
    .sk-del2__tab { padding: 7px 14px; }
    .sk-del2__f { width: 19px; height: 19px; font-size: .65rem; }
}