/* SAMS-API-Anbindung (VmvSamsApi): Pokalseiten. Alle Klassen beginnen mit "sapi-", das Layout der Seite bleibt unberührt. */
.sapi {
  --sapi-accent: #0b5cab;
  --sapi-border: #d9dee5;
  --sapi-muted: #5d6875;
  --sapi-bg: #f6f8fa;
  --sapi-win: #14532d;
  --sapi-live: #b45309;
  line-height: 1.4;
}
.sapi * { box-sizing: border-box; }
.sapi-empty, .sapi-note, .sapi-stand { color: var(--sapi-muted); }
.sapi-stand { margin-top: 2rem; font-size: .85em; }
.sapi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Navigation zwischen den Pokalen */
.sapi-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.sapi-nav__item { padding: .35rem .8rem; border: 1px solid var(--sapi-border); border-radius: 999px; text-decoration: none; background: #fff; color: inherit; }
.sapi-nav__item:hover, .sapi-nav__item:focus { border-color: var(--sapi-accent); color: var(--sapi-accent); }

/* Pokal */
.sapi-cup { margin: 0 0 2.5rem; scroll-margin-top: 1rem; }
.sapi-cup__head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; border-bottom: 2px solid var(--sapi-accent); margin-bottom: 1rem; }
.sapi-cup__title { margin: 0 0 .25rem; }
.sapi-winner { background: #fff8e1; border: 1px solid #f1d98a; border-radius: .5rem; padding: .6rem 1rem; margin: 0 0 1rem; }

/* Runde */
.sapi-round { border: 1px solid var(--sapi-border); border-radius: .6rem; background: #fff; margin: 0 0 1.25rem; padding: 1rem; scroll-margin-top: 1rem; }
.sapi-round__head { margin-bottom: .75rem; }
.sapi-round__title { margin: 0 0 .25rem; font-size: 1.15em; }
.sapi-round__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0; color: var(--sapi-muted); }
.sapi-ticker { margin-left: auto; font-size: .9em; }

/* Status */
.sapi-badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78em; font-weight: 600; background: var(--sapi-bg); border: 1px solid var(--sapi-border); color: var(--sapi-muted); }
.sapi-badge--live { background: #fff4e5; border-color: #f4c27a; color: var(--sapi-live); }
.sapi-badge--finished { background: #e8f5ec; border-color: #a6d4b3; color: var(--sapi-win); }
.sapi-badge--pending { background: #eef2ff; border-color: #c3cdf5; color: #3730a3; }

/* Tabellen */
.sapi-scroll { overflow-x: auto; margin: 0 0 1rem; }
.sapi-table { border-collapse: collapse; width: 100%; font-size: .95em; }
.sapi-table th, .sapi-table td { padding: .35rem .5rem; text-align: center; border-bottom: 1px solid var(--sapi-border); white-space: nowrap; }
.sapi-table thead th { background: var(--sapi-bg); font-weight: 600; }
.sapi-table .sapi-left { text-align: left; }
.sapi-table tbody tr:first-child td { font-weight: 600; }
.sapi-logo { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; vertical-align: middle; }
.sapi-logo--empty { display: inline-block; }

/* Spiele */
.sapi-matches { list-style: none; margin: 0; padding: 0; }
.sapi-match { border-bottom: 1px solid var(--sapi-border); container-type: inline-size; }
.sapi-match:last-child { border-bottom: 0; }
.sapi-match summary { display: grid; grid-template-columns: 7rem 1fr 3.5rem 1fr; align-items: center; gap: .5rem; padding: .5rem 0; cursor: pointer; list-style: none; }
.sapi-match summary::-webkit-details-marker { display: none; }
.sapi-match__when { color: var(--sapi-muted); font-size: .85em; }
.sapi-match__place { display: block; color: var(--sapi-accent); font-size: .95em; }
.sapi-match__team { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.sapi-match__team--1 { justify-content: flex-end; text-align: right; }
.sapi-match__name { min-width: 0; overflow-wrap: anywhere; }
.sapi-match__score { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--sapi-bg); border-radius: .35rem; padding: .15rem 0; }
.sapi-match:not(.sapi-match--done) .sapi-match__score { color: var(--sapi-muted); font-weight: 400; }
.sapi-win { font-weight: 700; color: var(--sapi-win); }
.sapi-match__details { margin: 0 0 .75rem 7rem; display: grid; grid-template-columns: max-content 1fr; gap: .15rem 1rem; color: var(--sapi-muted); font-size: .9em; }
.sapi-match__details dt { font-weight: 600; }
.sapi-match__details dd { margin: 0; }

/* Spiele einer beendeten Runde ein- und ausklappen (ohne JavaScript) */
.sapi-more { margin: 0 0 1rem; }
.sapi-more__btn { display: inline-block; list-style: none; cursor: pointer; font-size: .9em; color: var(--sapi-muted); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .2em; }
.sapi-more__btn::-webkit-details-marker { display: none; }
.sapi-more__btn:hover, .sapi-more__btn:focus { color: var(--sapi-accent); }
.sapi-more[open] > .sapi-more__btn { margin-bottom: .5rem; }
.sapi-more[open] .sapi-more__show, .sapi-more:not([open]) .sapi-more__hide { display: none; }

/* Endplatzierung nach Platzierungsspielen */
.sapi-standings { margin-top: .5rem; }
.sapi-table--narrow { width: auto; min-width: 18rem; }

/* Gruppen, K.-o.-Runden als Spalten nebeneinander (Halbfinale > Finale) */
.sapi-group__title { margin: 1rem 0 .5rem; font-size: 1em; color: var(--sapi-muted); text-transform: uppercase; letter-spacing: .03em; }
.sapi-groups--ko { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; align-items: start; }
.sapi-group--ko { background: var(--sapi-bg); border-radius: .5rem; padding: .25rem 1rem .75rem; }
.sapi-group--ko .sapi-group__title { margin-top: .75rem; }

@media (max-width: 36rem) {
  .sapi-round { padding: .75rem; }
  .sapi-hide-sm { display: none; }
  .sapi-table th, .sapi-table td { padding: .35rem .3rem; }
  .sapi-logo { width: 28px; height: 28px; flex-basis: 28px; }
  .sapi-ticker { margin-left: 0; }
  .sapi-t__sum { padding: .65rem .6rem; gap: .5rem; align-items: flex-start; }
  .sapi-t__sum::before { margin-top: .5rem; }
  .sapi-t__main { flex-direction: column; gap: .1rem; }
  .sapi-t__body { padding: .5rem .6rem .25rem; }
}

/* Jugendseiten: Bereich > Block (U12) > Runde > Turnier */
.sapi-block__title { margin: 1.75rem 0 1rem; padding: .45rem .9rem; font-size: 1.1em; background: var(--sapi-bg); border-left: 4px solid var(--sapi-accent); border-radius: 0 .4rem .4rem 0; }
.sapi-stage { margin: 0 0 .75rem; scroll-margin-top: 1rem; }
.sapi-stage__head { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin: 1.25rem 0 .5rem; }
.sapi-stage__title { margin: 0; font-size: 1.15em; color: var(--sapi-accent); }

/* Aufklappbares Turnier: Zeile mit Titel, Ort/Datum, Sieger und Status; darunter der Inhalt */
.sapi-t { border: 1px solid var(--sapi-border); border-radius: .6rem; background: #fff; }
.sapi-t + .sapi-t { margin-top: .5rem; }
.sapi-t__sum { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; cursor: pointer; list-style: none; }
.sapi-t__sum::-webkit-details-marker { display: none; }
.sapi-t__sum::before { content: ""; flex: 0 0 .5rem; height: .5rem; border-right: 2px solid var(--sapi-muted); border-bottom: 2px solid var(--sapi-muted); transform: rotate(-45deg); transition: transform .15s; margin: 0 .25rem 0 .1rem; }
.sapi-t[open] > .sapi-t__sum::before { transform: rotate(45deg); }
.sapi-t__sum:hover, .sapi-t__sum:focus-visible { background: var(--sapi-bg); border-radius: .6rem; }
.sapi-t__main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .9rem; }
.sapi-t__title { font-size: 1.05em; }
.sapi-t__meta { display: flex; flex-wrap: wrap; gap: 0 .9rem; color: var(--sapi-muted); font-size: .92em; }
.sapi-t__winner { flex-basis: 100%; display: flex; align-items: center; gap: .4rem; color: var(--sapi-win); font-size: .9em; }
.sapi-t__winner .sapi-logo--empty { display: none; }
.sapi-t__winner .sapi-logo { width: 18px; height: 18px; flex-basis: 18px; }
.sapi-t[open] > .sapi-t__sum { border-bottom: 1px solid var(--sapi-border); border-radius: .6rem .6rem 0 0; }
.sapi-t__sum .sapi-badge { flex: 0 0 auto; }
.sapi-t__body { padding: .5rem .9rem .25rem; }
.sapi-t--live { border-color: #f4c27a; }
.sapi-round--bare { border: 0; padding: 0; margin: 0; background: none; }
.sapi-round--bare .sapi-round__meta { margin: 0 0 .5rem; }

/* Spiel schmal (Handy oder halbe Spaltenbreite): beide Teams untereinander (Logo links, Name daneben), das Ergebnis rechts über beide Zeilen.
   Maßgeblich ist die Breite des Spiels selbst, nicht die des Bildschirms. */
@container (max-width: 34rem) {
  .sapi-match summary { grid-template-columns: 1fr auto; grid-template-areas: "when when" "t1 score" "t2 score"; gap: .3rem .75rem; }
  .sapi-match__when { grid-area: when; }
  .sapi-match__team--1 { grid-area: t1; flex-direction: row-reverse; justify-content: flex-end; text-align: left; }
  .sapi-match__team--2 { grid-area: t2; }
  .sapi-match__score { grid-area: score; align-self: center; padding: .4rem .8rem; font-size: 1.1em; }
  .sapi-match__details { margin-left: 0; }
}

/* Turnier mit Spielrunden: Staffeln nebeneinander, darunter Halbfinale (Feld 1 und 2 nebeneinander), Platzierungsspiele, Finale */
.sapi-t__body { container: sapit / inline-size; }
.sapi-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-items: start; margin: 0 0 .75rem; }
.sapi-group--box { container: sapig / inline-size; background: var(--sapi-bg); border-radius: .5rem; padding: .25rem .9rem .5rem; min-width: 0; }
.sapi-group--box .sapi-group__title { margin-top: .6rem; }
.sapi-group--box .sapi-match { border-color: #e3e7ec; }
.sapi-group--box .sapi-scroll { margin-bottom: .5rem; }
.sapi-group--box .sapi-table th, .sapi-group--box .sapi-table td { padding: .35rem .3rem; }
.sapi-group--box .sapi-table td.sapi-left { white-space: normal; }
@container sapit (min-width: 64rem) {
  .sapi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sapi-group--span { grid-column: 1 / -1; }
}
@container sapig (min-width: 40rem) {
  .sapi-matches--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .sapi-matches--cols .sapi-match:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
/* Schmale Gruppe: Ball-Spalten der Tabelle ausblenden */
@container sapig (max-width: 40rem) {
  .sapi-hide-sm { display: none; }
}

/* Ligaseiten: Tabelle, Spieltage, Mannschaften, Spielplan einer Mannschaft */
.sapi-liga__head { margin: 0 0 .75rem; }
.sapi-liga__title { margin: 0; }
.sapi-sec { margin: 0 0 2.25rem; scroll-margin-top: 1rem; }
.sapi-sec__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; padding-bottom: .25rem; font-size: 1.3em; border-bottom: 2px solid var(--sapi-accent); }
.sapi-sec__title .sapi-logo { width: 32px; height: 32px; flex-basis: 32px; }
.sapi-sub { margin: 1.25rem 0 .5rem; font-size: 1.1em; }
.sapi-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0 0 .75rem; font-size: .95em; }
.sapi-ltable { container: sapil / inline-size; }
.sapi-table--liga td.sapi-left { white-space: normal; min-width: 9rem; }
.sapi-table--liga tbody tr:first-child td { font-weight: 400; }
.sapi-table--liga tbody tr:first-child td strong { font-weight: 700; }
.sapi-teamlink { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.sapi-teamlink__name { color: var(--sapi-accent); text-decoration: underline; text-decoration-color: rgba(11, 92, 171, .35); text-underline-offset: .15em; }
.sapi-teamlink:hover .sapi-teamlink__name, .sapi-teamlink:focus .sapi-teamlink__name { text-decoration-color: currentColor; }
.sapi-icon { flex: 0 0 auto; width: 15px; height: 15px; color: var(--sapi-muted); }
.sapi-sel-row td { background: #eef5fc; }
.sapi-sel { font-weight: 700; }
/* Schmale Tabelle: erst Quotienten und Bälle, dann Siege und Niederlagen ausblenden */
@container sapil (max-width: 42rem) {
  .sapi-c3 { display: none; }
}
@container sapil (max-width: 26rem) {
  .sapi-c2 { display: none; }
  .sapi-table--liga th, .sapi-table--liga td { padding-left: .25rem; padding-right: .25rem; }
}

.sapi-photo { margin: 0 0 1rem; }
.sapi-photo img { display: block; width: 100%; max-width: 56rem; height: auto; border: 1px solid var(--sapi-border); border-radius: .5rem; }
.sapi-photo figcaption { margin-top: .4rem; color: var(--sapi-muted); }
.sapi-team__html { margin: 0 0 1rem; }
.sapi-match__city { display: block; color: var(--sapi-muted); }

.sapi-teams { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; }
.sapi-teamcard { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: .5rem; border: 1px solid var(--sapi-border); border-radius: .6rem; background: #fff; color: inherit; text-decoration: none; }
.sapi-teamcard:hover, .sapi-teamcard:focus { border-color: var(--sapi-accent); }
.sapi-teamcard__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: .4rem; background: var(--sapi-bg); }
.sapi-teamcard__img img { width: 100%; height: 100%; object-fit: cover; }
.sapi-teamcard__img .sapi-teamcard__logo { width: 60%; height: 60%; object-fit: contain; }
.sapi-teamcard__name { font-weight: 600; line-height: 1.2; }
.sapi-teamcard__meta { color: var(--sapi-muted); font-size: .85em; }
@media (max-width: 36rem) {
  .sapi-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
}

/* Spieltag einer Liga: Turniere (Tag, Ort, Ausrichter) */
.sapi-venue { display: flex; flex-wrap: wrap; gap: .1rem .9rem; margin: 1rem 0 .25rem; padding: .35rem .6rem; font-size: 1em; background: var(--sapi-bg); border-left: 3px solid var(--sapi-accent); border-radius: 0 .35rem .35rem 0; }
.sapi-venue:first-child { margin-top: .25rem; }
.sapi-venue__host { color: var(--sapi-muted); font-weight: 400; }
.sapi-group-teams { margin: .85rem 0 .1rem; color: var(--sapi-muted); font-size: .85em; font-weight: 600; }
/* Mannschaftskarten und Navigation: keine Unterstreichung. Das Theme setzt "#vmvmain a" (Unterstreichung, Linkfarbe, Hintergrund beim Hover); gegen diese
   ID-Selektoren hilft nur !important. Klickbarkeit zeigt der Hover. */
.sapi .sapi-teamcard, .sapi .sapi-teamcard:hover, .sapi .sapi-teamcard:focus { text-decoration: none !important; color: var(--vmv-primary, #1a2433) !important; background: #fff !important; }
.sapi .sapi-teamcard span { text-decoration: none !important; }
.sapi .sapi-teamcard__meta { color: var(--sapi-muted) !important; }
.sapi .sapi-teamcard { transition: border-color .15s, box-shadow .15s; }
.sapi .sapi-teamcard:hover, .sapi .sapi-teamcard:focus-visible { border-color: var(--sapi-accent); box-shadow: 0 1px 6px rgba(11, 92, 171, .18); }
.sapi .sapi-teamcard:hover .sapi-teamcard__name, .sapi .sapi-teamcard:focus-visible .sapi-teamcard__name { color: var(--sapi-accent); }
.sapi .sapi-nav__item, .sapi .sapi-nav__item:hover, .sapi .sapi-nav__item:focus { text-decoration: none !important; color: var(--vmv-primary, #1a2433) !important; background: #fff !important; }
.sapi .sapi-nav__item:hover, .sapi .sapi-nav__item:focus { border-color: var(--sapi-accent); color: var(--sapi-accent) !important; }

/* MVP-Wertung der Ligen: Filter, Tabelle, Seitenwahl */
.sapi-mvp__hint { margin: 0 0 .75rem; font-size: .9em; }
.sapi-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .9rem; }
.sapi-filter label { font-weight: 600; }
.sapi-filter select { min-width: 12rem; max-width: 100%; padding: .35rem .5rem; border: 1px solid var(--sapi-border); border-radius: .4rem; background: #fff; font: inherit; }
.sapi-filter button { padding: .35rem .9rem; border: 1px solid var(--sapi-accent); border-radius: .4rem; background: var(--sapi-accent); color: #fff; font: inherit; cursor: pointer; }
.sapi-filter button:hover { filter: brightness(1.1); }
.sapi-table--mvp td.sapi-left { white-space: normal; }
.sapi-player { display: flex; flex-direction: column; gap: .1rem; }
.sapi-player__team { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; color: var(--sapi-muted); font-size: .88em; }
.sapi-player__team .sapi-logo { width: 18px; height: 18px; flex-basis: 18px; }
.sapi-table--mvp tbody tr:first-child td { font-weight: 400; }
.sapi-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .5rem 0 0; }
.sapi-pager a, .sapi-pager__cur, .sapi-pager__off { min-width: 2.2rem; padding: .3rem .6rem; border: 1px solid var(--sapi-border); border-radius: .4rem; text-align: center; background: #fff; }
.sapi .sapi-pager a { text-decoration: none !important; color: var(--vmv-primary, #1a2433) !important; }
.sapi .sapi-pager a:hover, .sapi .sapi-pager a:focus { border-color: var(--sapi-accent); color: var(--sapi-accent) !important; background: #fff !important; }
.sapi-pager__cur { background: var(--sapi-accent); border-color: var(--sapi-accent); color: #fff; font-weight: 700; }
.sapi-pager__off { color: var(--sapi-muted); opacity: .55; }
.sapi-pager__info { margin-left: auto; color: var(--sapi-muted); font-size: .9em; }
@media (max-width: 36rem) { .sapi-filter select { flex: 1 1 100%; } .sapi-pager__info { flex-basis: 100%; margin-left: 0; } }
.sapi-mvp--loading { opacity: .55; transition: opacity .15s; pointer-events: none; }
.sapi-mvp--js .sapi-filter__submit { display: none; }