:where(.rp-component) {
  --rp-accent: #b4232c;
  --rp-surface: #fff;
  --rp-row-odd: #fff;
  --rp-row-even: #f6f7f7;
  --rp-positive: #137333;
  --rp-negative: #b3261e;
  --rp-width: 100%;
  --rp-border: color-mix(in srgb, currentColor 14%, transparent);
  --rp-muted: color-mix(in srgb, currentColor 67%, transparent);
  --rp-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 12px 30px rgb(0 0 0 / 7%);
  color: inherit;
  container-type: inline-size;
  display: block;
  font-size: var(--rp-font-size, 16px);
  line-height: 1.5;
  margin: clamp(1rem, 3vw, 2rem) auto;
  max-width: var(--rp-width);
}

.rp-component *,
.rp-component *::before,
.rp-component *::after { box-sizing: border-box; }

.rp-brand-strip {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 4vw, 2.5rem);
  justify-content: center;
  margin-block-end: 1.25rem;
}

.rp-brand-strip img {
  height: var(--rp-header-logo-h, auto);
  max-height: 96px;
  max-width: min(var(--rp-header-logo-w, 100px), 28vw);
  object-fit: contain;
  width: var(--rp-header-logo-w, 100px);
}

.rp-league-title {
  font-size: clamp(1.1rem, 3cqi, 1.6rem);
  margin: 0 0 1rem;
  text-align: center;
}

.rp-day-nav {
  align-items: center;
  background: color-mix(in srgb, var(--rp-surface) 92%, currentColor);
  border: 1px solid var(--rp-border);
  border-radius: 14px;
  display: grid;
  gap: .75rem;
  grid-template-columns: auto minmax(8rem, 1fr) auto;
  margin-block-end: 1rem;
  padding: .65rem;
}

.rp-day-label { text-align: center; }

.rp-button,
.rp-details > summary {
  align-items: center;
  background: var(--rp-accent);
  border: 1px solid transparent;
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--rp-button-size, 15px);
  font-weight: 650;
  gap: .45rem;
  justify-content: center;
  min-height: 42px;
  padding: .55rem .85rem;
  text-decoration: none;
}

.rp-button:hover,
.rp-details > summary:hover { filter: brightness(.92); color: #fff; }
.rp-button:disabled { cursor: not-allowed; opacity: .42; }
.rp-button:focus-visible,
.rp-details > summary:focus-visible,
.rp-table-scroll:focus-visible { outline: 3px solid color-mix(in srgb, var(--rp-accent) 55%, transparent); outline-offset: 3px; }

.rp-content {
  background: var(--rp-surface);
  border: 1px solid var(--rp-border);
  border-radius: 16px;
  box-shadow: var(--rp-shadow);
  overflow: clip;
  transition: opacity .16s ease;
}

.rp-component.is-loading .rp-content { opacity: .48; pointer-events: none; }
.rp-component.is-loading .rp-day-label::after { animation: rp-spin .8s linear infinite; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; display: inline-block; height: 1em; margin-inline-start: .55rem; vertical-align: -.15em; width: 1em; }
@keyframes rp-spin { to { transform: rotate(1turn); } }

.rp-table-scroll { max-width: 100%; overflow-x: auto; }
.rp-table { border-collapse: collapse; font-size: inherit; margin: 0; min-width: 680px; width: 100%; }
.rp-table th,
.rp-table td { border: 0; border-block-end: 1px solid var(--rp-border); padding: .8rem clamp(.65rem, 2cqi, 1rem); text-align: center; vertical-align: middle; }
.rp-table thead th { background: color-mix(in srgb, var(--rp-surface) 88%, currentColor); color: var(--rp-muted); font-size: var(--rp-head-size, 14px); font-weight: var(--rp-head-weight, 650); letter-spacing: .025em; text-transform: uppercase; }
.rp-table th:nth-child(2),
.rp-table td:nth-child(2) { text-align: start; }
.rp-table tbody tr:nth-child(odd) { background: var(--rp-row-odd); }
.rp-table tbody tr:nth-child(even) { background: var(--rp-row-even); }
.rp-table tbody tr:last-child > * { border-block-end: 0; }
.rp-table tbody tr:hover { background: color-mix(in srgb, var(--rp-accent) 6%, var(--rp-surface)); }

.rp-team { align-items: center; display: inline-flex; gap: .7rem; min-width: 0; }
.rp-team img,
.rp-team-grid img { flex: 0 0 auto; height: var(--rp-logo-h, 48px); object-fit: contain; width: var(--rp-logo-w, 48px); }
.rp-team-mark { align-items: center; aspect-ratio: 1; background: color-mix(in srgb, var(--rp-accent) 12%, var(--rp-surface)); border: 1px solid color-mix(in srgb, var(--rp-accent) 28%, transparent); border-radius: 12px; color: var(--rp-accent); display: inline-flex; flex: 0 0 auto; font-weight: 750; justify-content: center; height: var(--rp-logo-h, 48px); width: var(--rp-logo-w, 48px); }
.rp-number--positive { color: var(--rp-positive); font-weight: 700; }
.rp-number--negative { color: var(--rp-negative); font-weight: 700; }
.rp-number--neutral { color: var(--rp-muted); font-weight: 650; }

.rp-notice { background: color-mix(in srgb, #dba617 14%, var(--rp-surface)); border-block-end: 1px solid color-mix(in srgb, #dba617 30%, transparent); margin: 0; padding: .7rem 1rem; text-align: center; }
.rp-state { padding: clamp(1.25rem, 5cqi, 2.5rem); text-align: center; }
.rp-state p { color: var(--rp-muted); margin: .35rem 0 0; }
.rp-state--error { border-inline-start: 4px solid var(--rp-negative); }

.rp-match-card,
.rp-widget-card { padding: clamp(1rem, 4cqi, 2rem); }
.rp-match-meta,
.rp-widget-card > .rp-kicker,
.rp-widget-card > time { display: block; text-align: center; }
.rp-match-meta { margin-block-end: 1.4rem; }
.rp-kicker { color: var(--rp-accent); font-size: var(--rp-match-day-size, 20px); font-weight: 750; margin: 0; }
.rp-match-meta time { color: var(--rp-muted); font-size: var(--rp-match-date-size, 15px); }
.rp-widget-card > .rp-kicker { font-size: var(--rp-widget-day-size, 20px); }
.rp-widget-card > time { color: var(--rp-muted); font-size: var(--rp-widget-date-size, 15px); margin-block: .15rem 1.3rem; }

.rp-versus { align-items: center; display: grid; gap: clamp(.8rem, 4cqi, 2.5rem); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.rp-team-block { align-items: center; display: flex; font-size: var(--rp-match-team-size, 16px); gap: .75rem; min-width: 0; }
.rp-team-block strong { overflow-wrap: anywhere; }
.rp-team-block img { flex: 0 0 auto; height: var(--rp-match-logo-h, 56px); object-fit: contain; width: var(--rp-match-logo-w, 56px); }
.rp-team-block .rp-team-mark { height: var(--rp-match-logo-h, 56px); width: var(--rp-match-logo-w, 56px); }
.rp-team-block--home { justify-content: flex-end; text-align: end; }
.rp-team-block--guest { justify-content: flex-start; text-align: start; }
.rp-score { display: grid; justify-items: center; min-width: 5.5ch; }
.rp-score span { font-size: var(--rp-match-result-size, 21px); font-weight: 800; white-space: nowrap; }
.rp-widget-card .rp-team-block img,
.rp-widget-card .rp-team-mark { height: var(--rp-widget-logo-h, 72px); width: var(--rp-widget-logo-w, 72px); }
.rp-widget-card .rp-score span { font-size: var(--rp-widget-vs-size, 18px); }
.rp-score small { color: var(--rp-muted); }
.rp-bye { align-items: center; display: flex; gap: .6rem; justify-content: center; margin: 1rem 0; text-align: center; }

.rp-details { border-block-start: 1px solid var(--rp-border); margin-block-start: 1.5rem; padding-block-start: 1rem; }
.rp-details > summary { list-style: none; margin-inline: auto; width: fit-content; }
.rp-details > summary::-webkit-details-marker { display: none; }
.rp-details > summary::after { content: "+"; font-size: 1.2em; }
.rp-details[open] > summary::after { content: "−"; }
.rp-details-content { margin-block-start: 1rem; }
.rp-details-content:empty::after { color: var(--rp-muted); content: "Daten werden geladen …"; display: block; padding: 1rem; text-align: center; }

.rp-table--singles { min-width: 760px; }
.rp-table--singles td:first-child strong,
.rp-table--singles td small { display: block; }
.rp-classification { color: var(--rp-single-detail-color); font-size: var(--rp-single-detail-size); font-weight: 650; }
.rp-empty-inline { color: var(--rp-muted); padding: 1rem; text-align: center; }

.rp-fixtures { display: grid; }
.rp-fixture { align-items: center; border-block-end: 1px solid var(--rp-border); display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; padding: .9rem 1rem; }
.rp-fixture:last-child { border-block-end: 0; }
.rp-fixture > div { display: grid; }
.rp-fixture > div span { color: var(--rp-muted); }
.rp-fixture > p { display: grid; justify-items: end; margin: 0; }
.rp-fixture small { color: var(--rp-muted); }

.rp-team-grid { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); list-style: none; margin: 0; padding: 0; }
.rp-team-grid li { align-items: center; background: var(--rp-surface); display: flex; gap: .8rem; min-width: 0; padding: 1rem; }
.rp-team-grid li > span:last-child { display: grid; min-width: 0; }
.rp-team-grid small { color: var(--rp-muted); }
.rp-organization { align-items: center; display: flex; gap: 1rem; padding: clamp(1rem, 4cqi, 2rem); }
.rp-organization h3,
.rp-organization p { margin: 0; }
.rp-organization a { display: inline-block; margin-block-start: .35rem; }

@container (max-width: 620px) {
  .rp-day-nav { grid-template-columns: 1fr 1fr; }
  .rp-day-label { grid-column: 1 / -1; grid-row: 1; }
  .rp-versus { grid-template-columns: 1fr; }
  .rp-score { grid-row: 2; }
  .rp-team-block { flex-direction: column; justify-content: center; text-align: center; }
  .rp-team-block--home { grid-row: 1; }
  .rp-team-block--guest { grid-row: 3; }
}

@container (max-width: 440px) {
  .rp-button span:not([aria-hidden="true"]) { font-size: .88em; }
  .rp-fixture { grid-template-columns: 1fr; }
  .rp-fixture > p { justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-content { transition: none; }
}

@media (forced-colors: active) {
  .rp-button,
  .rp-details > summary { border-color: ButtonText; }
}
