/* ============================================================
   BOLV Cup — design system
   ============================================================ */

/* Minimal reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

:root {
  --bg: #f6f2e8; --surface: #ede7d6; --surface2: #f3d7d2;
  --ink: #1a1612; --ink-soft: #5a534a; --ink-mute: #6e655a;
  --rule: #dcd4c2; --white: #fff;
  --red: #a8281e; --red-hover: #771910; --red-tint: #f3d7d2;
  --header-bg: #1a1612; --header-fg: #f6f2e8;
  --footer-bg: var(--header-bg);
  --th-bg: #1a1612; --th-fg: #f6f2e8;
  --row-alt: #efe9d8;
  --sans: 'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --page-max: 1100px;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg: #0e0c08; --surface: #181410; --surface2: #1c1814;
    --ink: #ece5d2; --ink-soft: #ada494; --ink-mute: #6e665a;
    --rule: #2a241c; --white: #060503;
    --red: #dc4a3c; --red-hover: #e8635a; --red-tint: #2a1612;
    --header-bg: #181410; --header-fg: #ece5d2;
    --th-bg: #181410; --th-fg: #ece5d2;
    --row-alt: #131008;
  }
}

body {
  container-type: inline-size;
  container-name: cup;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Header */
.cup-header {
  background: var(--header-bg);
  color: var(--header-fg);
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--rule);
}
.cup-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--header-fg);
  text-decoration: none;
  cursor: pointer;
}
.cup-brand:hover .cup-brand-title { color: var(--red); }
.cup-logo {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.cup-brand-title {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--header-fg);
  line-height: 1;
}
.cup-brand-ctx {
  font-weight: 500;
  color: var(--header-fg);
  opacity: 0.75;
}
.cup-title,
.cup-home {
  font-size: 14px;
  font-weight: 500;
  color: var(--header-fg);
  text-align: right;
  text-decoration: none;
}
.cup-title { opacity: 0.85; }
.cup-home {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 120ms;
  text-wrap: nowrap;
}
.cup-home:hover { opacity: 1; color: var(--red); }
@container cup (max-width: 540px) {
  .cup-header { padding: 14px 20px; gap: 14px; }
  .cup-logo { height: 28px; }
  .cup-brand-title { font-size: 16px; }
  .cup-title { font-size: 12px; }
}

/* Category bar */
.cup-cat-bar {
  position: relative;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 0 16px;
}
.cup-cat-row {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cup-cat-row::-webkit-scrollbar { display: none; }
/* Edge fades — appear when the row can scroll in that direction */
.cup-cat-fade {
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 36px;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 150ms ease;
  font-family: var(--mono);
  color: var(--ink-mute);
  font-size: 16px;
  font-weight: 700;
}
.cup-cat-fade.left {
  left: 0;
  background: linear-gradient(to right, var(--bg) 40%, transparent);
  justify-content: flex-start;
  padding-left: 4px;
}
.cup-cat-fade.right {
  right: 0;
  background: linear-gradient(to left, var(--bg) 40%, transparent);
  justify-content: flex-end;
  padding-right: 4px;
}
.cup-cat-fade .chev {
  line-height: 1;
  transform: translateY(-2px);
}
.cup-cat-bar.scroll-left .cup-cat-fade.left { opacity: 1; }
.cup-cat-bar.scroll-right .cup-cat-fade.right { opacity: 1; }
.cup-cat {
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  text-decoration: none;
  display: inline-block;
  flex-shrink: 0;
}
.cup-cat:hover { color: var(--ink); }
.cup-cat.active { color: var(--red); border-bottom-color: var(--red); }
.cup-cat.divider {
  border-left: 1px solid var(--rule);
  margin-left: 4px;
  padding-left: 18px;
  color: var(--ink);
}
.cup-cat.divider.active { color: var(--red); }

/* Meta bar */
.cup-meta {
  position: relative;
  z-index: 6;
  padding: 22px 16px 12px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
.cup-meta strong { color: var(--ink); font-weight: 600; }
.cup-meta .cup-meta-line { display: inline; }
.cup-meta .accent { color: var(--red); font-weight: 600; }
.cup-meta .stand { margin-left: auto; }

/* Inline help popover — explains "Beste 6 zählen". Pure-CSS open/close:
 * a hidden checkbox tracks state; a full-viewport backdrop label catches
 * clicks anywhere outside the popup and toggles the checkbox off. */
.meta-help { display: inline; position: relative; }
.meta-help-toggle {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  pointer-events: none;
}
.meta-help-trigger {
  cursor: pointer; white-space: nowrap;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  anchor-name: --meta-help-best6;
}
.meta-help-trigger .info-i {
  background: var(--red); color: var(--bg);
  vertical-align: middle; padding-left: 1px;
  margin-bottom: 2px;
}
.meta-help-trigger:hover .info-i,
.meta-help-toggle:checked + .meta-help-trigger .info-i { background: var(--red-hover); }
.meta-help-toggle:focus + .meta-help-trigger {
  outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px;
}

.meta-help-body {
  position: absolute;
  top: 100%;
  left: 0;
  width: min(380px, calc(100vw - 32px));
  margin-top: 8px;
  z-index: 50;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 120ms, visibility 0s 120ms, transform 120ms;
}
.meta-help-toggle:checked ~ .meta-help-body {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity 120ms, transform 120ms ease-out;
}
.meta-help-backdrop { display: none; }
.meta-help-toggle:checked ~ .meta-help-backdrop {
  display: block;
  position: fixed; inset: 0;
  z-index: 40;
  cursor: default;
}
.meta-help-body .meta-help-text { display: block; margin-bottom: 8px; }
.meta-help-body .meta-help-link {
  color: var(--red); font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  text-decoration: none;
}
.meta-help-body .meta-help-link:hover { color: var(--red-hover); }

/* Anchor positioning: align the popover's right edge to the trigger when
 * there's room; otherwise let it extend past the trigger so it stays at
 * least ~240px wide. Width auto-fills between a 16px left gutter and the
 * computed right inset, capped at 380px. The meta bar is the containing
 * block so there's room on either side to grow. */
@supports (anchor-name: --x) {
  .meta-help { position: static; }
  .meta-help-body {
    position-anchor: --meta-help-best6;
    inset: auto;
    top: anchor(bottom);
    left: 16px;
    right: min(anchor(right), calc(100% - 16px - 240px));
    width: auto;
    max-width: 380px;
    justify-self: end;
    margin-top: 8px;
  }
}

/* Empty state */
.cup-empty {
  padding: 40px 24px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.adm-empty-row td {
  padding: 24px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 13px;
}
.ges-tile-empty {
  padding: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

@container cup (min-width: 720px) {
  .cup-meta,
  .cup-cat-bar { padding-left: 24px; padding-right: 24px; }
}

/* Mobile/desktop view toggle */
.view-mobile {
  display: block;
  margin: 16px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.view-mobile .cup-row-wrap:last-child { border-bottom: none; }
/* Wrapper sizes to fit the table, but clamped: at least page-max wide so it
 * matches the rhythm of the overall ranking and other pages, and at most
 * the viewport (minus 24px gutters) so it never overflows. If the table
 * needs more, .table-scroll inside provides horizontal scrolling. */
.view-desktop {
  display: none;
  width: fit-content;
  min-width: min(var(--page-max), calc(100% - 48px));
  max-width: calc(100% - 48px);
  margin: 16px auto;
}
.view-desktop .table-scroll {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0;
}
.view-desktop table.cup-table tbody tr:last-child { border-bottom: none; }
@container cup (min-width: 720px) {
  .view-mobile { display: none; }
  .view-desktop { display: block; }
}

/* Mobile cards */
.cup-head-mobile {
  display: grid;
  grid-template-columns: 18px 28px 38px 1fr;
  gap: 10px;
  padding: 10px 16px;
  background: var(--th-bg);
  color: var(--th-fg);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 5;
}
.cup-row-wrap {
  background: var(--bg);
  transition: background 100ms;
}
.cup-row-wrap.alt { background: var(--surface); }
.cup-row-wrap:hover,
.cup-row-wrap:has(.cup-row-m:focus-visible),
.cup-row-wrap.open { background: var(--red-tint); }
.cup-row-wrap.open { border-bottom: 1px solid var(--rule); }
.view-mobile .cup-row-wrap.open:last-child { border-bottom: none; }
.cup-row-m,
.cup-row-m:hover,
.cup-row-m:focus,
.cup-row-m:active {
  display: grid;
  grid-template-columns: 18px 28px 38px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  color: inherit;
  font: inherit;
  line-height: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  -webkit-appearance: none;
  appearance: none;
  transition: none;
}
.cup-row-m.podium .rank { color: var(--red); }
.cup-row-m .chev {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-mute);
  transition: transform 150ms;
}
.cup-row-wrap.open .cup-row-m .chev { transform: rotate(180deg); color: var(--red); }
.cup-row-m .rank,
.cup-row-m .pts {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cup-row-m .pts { font-weight: 600; }
.cup-row-m .nm { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cup-row-m .nm .name {
  font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cup-row-m .nm .club {
  font-size: 11px; color: var(--ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0.75;
}
.cup-row-m .yk {
  font-family: var(--mono); font-size: 10px; color: var(--ink-mute);
  text-align: right; line-height: 1.3; flex-shrink: 0;
  border-left: 1px solid var(--rule);
  padding: 2px 0 2px 10px;
}
.cup-row-m .yk .y { color: var(--ink-soft); font-weight: 500; }
.cup-row-m .yk .k { font-size: 9px; letter-spacing: 0.08em; }

/* Mobile detail panel */
.cup-detail {
  background: var(--surface);
  padding: 12px 16px 16px 60px;
  display: none;
  border-top: 1px solid var(--rule);
}
.cup-row-wrap.open .cup-detail { display: block; }
.cup-detail .hdr {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px;
}
.race-list { display: grid; gap: 1px; }
.race {
  display: grid; grid-template-columns: 18px 1fr 50px;
  gap: 10px; align-items: center; padding: 6px 8px; border-radius: 3px;
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.race .idx { color: var(--ink-mute); font-size: 10px; text-align: right; }
.race .name {
  font-family: var(--sans); font-size: 13px; color: var(--ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.race .pts { text-align: right; font-weight: 600; }
.race.counted { background: var(--bg); }
.race.dropped { color: var(--ink-mute); }
.race.dropped .pts { text-decoration: line-through; }
.race.zero { color: var(--ink-mute); }
.race.zero .pts { color: var(--ink-mute); font-weight: 400; }
.race.best .pts { color: var(--red); }
.race.upcoming .name { font-style: italic; color: var(--ink-mute); font-weight: 400; }
.race.upcoming .pts { color: var(--ink-mute); font-weight: 400; }
.race-list .race-divider {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 14px 8px 4px;
  margin-top: 6px;
  border-top: 1px dashed var(--rule);
}

.cup-detail .summary {
  margin-top: 12px; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; padding-top: 12px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px;
}
.cup-detail .summary .lbl {
  color: var(--ink-mute); font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase; margin-bottom: 3px;
}
.cup-detail .summary .v {
  color: var(--ink); font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.cup-detail .summary .v.red { color: var(--red); }

/* Desktop wide table */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0 24px; background: var(--bg);
}
table.cup-table {
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 100%;
  color: var(--ink);
}
table.cup-table thead th {
  background: var(--th-bg);
  color: var(--th-fg);
  font-weight: 600; font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 0; vertical-align: bottom;
  position: sticky; top: 0; z-index: 4;
  border-bottom: 1px solid var(--rule);
}
table.cup-table thead th .lbl { padding: 10px 8px; display: block; }
table.cup-table thead th.race-h { width: 32px; min-width: 32px; max-width: 32px; }
table.cup-table thead th.race-h .lbl {
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 16px 8px 12px;
  font-weight: 500; color: var(--th-fg);
  white-space: nowrap; text-align: left;
  letter-spacing: 0.04em; text-transform: none;
  font-size: 11px; line-height: 1;
}
table.cup-table thead th.race-h a { color: inherit; text-decoration: none; transition: color 120ms, opacity 120ms; }
table.cup-table thead th.race-h a:hover { color: var(--red); }
table.cup-table thead th.race-h.upcoming .lbl { font-style: italic; letter-spacing: 0.06em; }
table.cup-table thead th.race-h.upcoming a { opacity: 0.55; }
table.cup-table thead th.race-h.upcoming a:hover { opacity: 1; }
.info-i {
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: 4px;
  border-radius: 50%;
  font-family: var(--sans); font-style: normal; font-weight: 700;
  font-size: 9px; line-height: 12px; text-align: center;
  text-transform: none;
  transition: background 120ms, color 120ms;
}
table.cup-table thead th.race-h.upcoming .info-i { background: var(--th-fg); color: var(--th-bg); }
table.cup-table thead th.race-h.upcoming a:hover .info-i { background: var(--red); }
table.cup-table thead th.fixed-l { position: sticky; left: 0; z-index: 5; background: var(--th-bg); }
table.cup-table thead th.rank-h { width: 44px; padding-left: 16px; }
table.cup-table thead th.pts-h  { width: 56px; }
table.cup-table thead th.name-h { min-width: 200px; max-width: 240px; text-align: left; padding-left: 12px; }
table.cup-table thead th.club-h { min-width: 150px; max-width: 200px; text-align: left; }
table.cup-table thead th.yr-h   { width: 36px; }
table.cup-table thead th.kt-h   { width: 36px; padding-right: 10px; }

table.cup-table tbody tr { background: var(--bg); border-bottom: 1px solid var(--rule); }
table.cup-table tbody tr.alt { background: var(--surface); }
table.cup-table tbody tr.alt td.fixed-l { background: var(--surface); }
table.cup-table tbody tr:hover,
table.cup-table tbody tr:hover td.fixed-l,
table.cup-table tbody tr:hover td.r.counted { background: var(--red-tint); }
table.cup-table tbody tr.podium td.rank { color: var(--red); font-weight: 700; }
table.cup-table tbody td { padding: 8px; vertical-align: middle; height: 36px; }
table.cup-table td.fixed-l {
  position: sticky; left: 0; z-index: 2;
  background: var(--bg);
  border-right: 1px solid var(--rule);
}
table.cup-table td.rank { font-weight: 700; padding-left: 16px; width: 44px; color: var(--ink); }
table.cup-table td.pts  { font-weight: 600; width: 56px; color: var(--ink); }
table.cup-table td.name {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 200px; max-width: 240px;
  padding-left: 12px;
  color: var(--ink);
}
table.cup-table td.club {
  font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
table.cup-table td.yr,
table.cup-table td.kt {
  color: var(--ink-mute); width: 36px; text-align: center;
}
table.cup-table td.kt { padding-right: 10px; }
table.cup-table td.r {
  width: 32px; min-width: 32px; max-width: 32px;
  text-align: center; padding: 8px 2px; font-size: 12px;
}
table.cup-table td.r.counted { background: var(--surface2); }
table.cup-table td.r.dropped { color: var(--ink-mute); text-decoration: line-through; }
table.cup-table td.r.zero    { color: var(--ink-mute); }
table.cup-table td.r.best    { color: var(--red); font-weight: 700; }
table.cup-table td.r-upcoming { width: 32px; min-width: 32px; max-width: 32px; background: var(--surface); opacity: 0.45; }

/* Gesamt */
.ges-wrap { padding: 0 16px 24px; background: var(--bg); }
@container cup (min-width: 720px) { .ges-wrap { padding: 0 24px 32px; } }
.ges-list-section { max-width: var(--page-max); margin: 0 auto; }
.ges-section-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
}
.ges-section-title .muted { color: var(--ink-mute); font-weight: 500; }

.ges-podiums { display: grid; grid-template-columns: 1fr; gap: 10px; }
@container cup (min-width: 540px) { .ges-podiums { grid-template-columns: repeat(2, 1fr); } }
@container cup (min-width: 860px) { .ges-podiums { grid-template-columns: repeat(3, 1fr); } }
@container cup (min-width: 1100px) { .ges-podiums { grid-template-columns: repeat(5, 1fr); } }

.ges-tile {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}
.ges-tile-head {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--th-bg);
  margin: -14px -14px 0;
  padding: 10px 14px;
}
.ges-tile-cat {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--th-fg);
}
.ges-tile-cat .lbl {
  font-weight: 500; color: color-mix(in oklab, var(--th-fg) 55%, var(--th-bg)); margin-left: 6px;
  font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
}
.ges-tile-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  text-align: right;
}
.ges-tile-link {
  display: inline-block;
  padding: 4px 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--red); font-weight: 600; text-decoration: none;
}
.ges-tile-link:hover { color: var(--red-hover); }
.ges-podium-list { display: grid; gap: 4px; }
.ges-podium-row {
  display: grid; grid-template-columns: 18px 1fr 36px; gap: 8px;
  align-items: baseline; padding: 4px 0;
  border-bottom: 1px dotted var(--rule);
}
.ges-podium-row:last-child { border-bottom: none; }
.ges-podium-row .pl {
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink);
}
.ges-podium-row.r1 .pl { color: var(--red); }
.ges-podium-row .nm { display: flex; flex-direction: column; min-width: 0; }
.ges-podium-row .nm .name {
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25;
}
.ges-podium-row .nm .club {
  font-family: var(--sans); font-size: 11px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
  opacity: 0.75;
}
.ges-podium-row .pt {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* Combined Gesamt list */
.ges-list {
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.ges-list-head {
  display: grid; grid-template-columns: 36px 56px 1fr 36px 36px 56px;
  gap: 10px; padding: 8px 12px;
  background: var(--th-bg); color: var(--th-fg);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase; font-weight: 600;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}
.ges-list-body .ges-row:last-child { border-bottom: none; }
.ges-list-head .cat-h,
.ges-list-head .yr-h,
.ges-list-head .kt-h,
.ges-list-head .pts-h { text-align: center; }
.ges-list-head .pts-h { text-align: right; padding-right: 4px; }
.ges-row {
  display: grid; grid-template-columns: 36px 56px 1fr 36px 36px 56px;
  gap: 10px; padding: 8px 12px; align-items: center;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg);
  transition: background 100ms;
}
.ges-list-body .ges-row:nth-child(even) { background: var(--surface); }
.ges-list-body .ges-row:hover { background: var(--red-tint); }
.ges-row .rk { font-weight: 700; }
.ges-row .cat {
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--ink-soft); letter-spacing: 0.04em;
}
.ges-row .nm { display: flex; flex-direction: column; min-width: 0; }
.ges-row .nm .name {
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25;
}
.ges-row .nm .club {
  font-family: var(--sans); font-size: 11px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
  opacity: 0.75;
}
.ges-row .yr,
.ges-row .kt { color: var(--ink-mute); text-align: center; font-size: 11px; }
.ges-row .pt { font-weight: 700; text-align: right; }

@container cup (max-width: 540px) {
  .ges-list-head { grid-template-columns: 30px 44px 1fr 56px; }
  .ges-list-head .yr-h,
  .ges-list-head .kt-h { display: none; }
  .ges-row { grid-template-columns: 30px 44px 1fr 56px; }
  .ges-row .yr,
  .ges-row .kt { display: none; }
}

/* Shared hero typography (used by landing + reglement) */
.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red); font-weight: 500;
  margin-bottom: 14px;
}
.lead {
  font-size: 16px; line-height: 1.55; color: var(--ink-soft);
  max-width: 540px; margin: 0 0 28px;
}
.land-hero,
.reg-hero { padding: 56px 24px 40px; background: var(--bg); }
.reg-hero h1 { max-width: 540px; }
.hero-accent { color: var(--red); }
@container cup (min-width: 720px) {
  .land-hero,
  .reg-hero { padding: 80px 40px 56px; }
}
.land-hero h1,
.reg-hero h1 {
  font-weight: 700; font-size: 44px; line-height: 1.0;
  letter-spacing: -0.025em; margin: 0 0 18px; color: var(--ink);
  overflow-wrap: break-word;
}
@container cup (min-width: 720px) {
  .land-hero h1,
  .reg-hero h1 { font-size: 64px; }
}

/* Landing-specific */
.land-current {
  display: block; padding: 22px 24px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 4px;
  max-width: 540px; position: relative;
}
.land-current.finished .top,
.land-current.upcoming .top { color: var(--ink-mute); }
.land-hero .kicker.finished,
.land-hero .kicker.upcoming { color: var(--ink-mute); }
.land-current .top {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--red); font-weight: 600;
  margin-bottom: 8px; display: flex; justify-content: space-between;
}
.land-current .top .dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
  margin-right: 7px;
}
.land-current .top .dot.hollow {
  background: transparent;
  box-shadow: inset 0 0 0 1.25px currentColor;
}
.land-current .name {
  font-weight: 700; font-size: 28px; letter-spacing: -0.02em;
  color: var(--ink); margin-bottom: 8px;
}
.land-current .meta {
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  display: flex; gap: 14px; flex-wrap: wrap;
}
.land-current .land-cats-label {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 14px;
}
.land-current .land-cats {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.land-current .land-cat-break { flex-basis: 100%; height: 0; }
.land-current .land-cat {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink); background: var(--bg);
  text-decoration: none;
  transition: background 120ms, color 120ms, border-color 120ms;
  position: relative; z-index: 2;
}
.land-current .land-cat:hover {
  background: var(--red-tint);
  color: var(--red);
  border-color: var(--red);
}
.land-current.finished .land-cat:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink-soft);
}
.land-current .land-overall {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--red); text-decoration: none;
  transition: color 120ms;
}
.land-current .land-overall::after {
  content: ''; position: absolute; inset: 0;
}
.land-current .land-overall:hover { color: var(--red-hover); }
.land-current.finished .land-overall { color: var(--ink-soft); }
.land-current.finished .land-overall:hover { color: var(--ink); }
.land-current .sponsor-line {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--rule);
}
.land-current .sponsor-line .lbl {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 600;
}
.land-current .sponsor-line .logo-tile {
  background: #fff; border: 1px solid var(--rule);
  border-radius: 3px; padding: 3px 6px;
  display: inline-flex; align-items: center;
}
.land-current .sponsor-line .logo-tile img { height: 28px; width: auto; display: block; }
.land-past { padding: 0 24px 56px; }
@container cup (min-width: 720px) { .land-past { padding: 0 40px 80px; } }
.land-past h2 {
  font-weight: 600; font-size: 18px; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 14px;
  padding-top: 28px; border-top: 1px solid var(--rule);
}
.land-row {
  display: grid; grid-template-columns: 60px 1fr auto;
  gap: 14px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px;
}
.land-row .yr { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.land-row .nm { color: var(--ink); }
.land-row .lk { color: var(--red); font-weight: 600; text-decoration: none; }
.land-row .lk:hover { color: var(--red-hover); }

/* ============================================================
   Reglement page (static rules)
   ============================================================ */
.reg-wrap,
.page-wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 20px; }
@container cup (min-width: 720px) { .reg-wrap { padding: 0 40px; } }
/* Hero inside reg-wrap: parent already pads horizontally, hero only pads vertically */
.reg-wrap .reg-hero { padding-left: 0; padding-right: 0; }

.reg-hero .meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink-mute);
  padding-top: 24px; border-top: 1px solid var(--rule);
}
.reg-hero .meta strong { color: var(--ink); font-weight: 600; }

/* TOC */
.reg-toc { padding: 0 0 56px; }
.reg-toc-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
@container cup (min-width: 720px) {
  .reg-toc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.reg-toc-item {
  background: var(--bg);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  transition: background 120ms;
  cursor: pointer;
}
.reg-toc-item:hover { background: var(--surface); }
.reg-toc-item .num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em;
  color: var(--red); font-weight: 600;
}
.reg-toc-item .lbl { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25; }

/* Section layout */
.reg-sec {
  padding: 56px 0; border-top: 1px solid var(--rule);
  display: grid; gap: 28px;
}
@container cup (min-width: 720px) {
  .reg-sec { grid-template-columns: 220px 1fr; gap: 56px; padding: 80px 0; }
}
/* Sticky section heads.
   Mobile: full-bleed bar across the viewport with bg + bottom rule, so it
   doesn't overlap content below and the absolute-positioned §4 fill bars
   sit under it (z-index). Desktop: lives inside the 220px sidebar column. */
.reg-sec-head {
  position: sticky;
  top: 0;
  align-self: start;
  z-index: 10;
  background: var(--bg);
  padding: 22px 20px 14px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  border-bottom: 1px solid var(--rule);
}
.reg-sec-head .num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red); font-weight: 600;
  margin-bottom: 4px; display: block;
}
.reg-sec-head h2 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.05; margin: 0; color: var(--ink); overflow-wrap: break-word;
}
@container cup (min-width: 720px) {
  .reg-sec-head {
    margin-left: 0;
    margin-right: 0;
    width: auto;
    padding: 4px 0 0;
    background: transparent;
    border-bottom: none;
  }
  .reg-sec-head .num { font-size: 12px; margin-bottom: 8px; }
  .reg-sec-head h2 { font-size: 28px; }
}
.reg-sec-body { display: grid; gap: 24px; min-width: 0; }
.reg-sec-body p {
  font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 640px;
}
.reg-sec-body p strong { color: var(--ink); font-weight: 600; }
.reg-sec-body p .red,
.reg-sec-body span.red { color: var(--red); font-weight: 600; }
.reg-inline-link { color: var(--red); text-decoration: none; font-weight: 600; }
.reg-inline-link:hover { color: var(--red-hover); }
.reg-strike { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.reg-fineprint { font-size: 13px; color: var(--ink-mute); margin-top: 4px; }

/* §1 stats */
.reg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px 0 0; }
.reg-stat { padding: 18px 16px; background: var(--surface); border-radius: 4px; }
.reg-stat .v {
  font-family: var(--mono); font-size: 28px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.02em; line-height: 1;
  margin-bottom: 6px; font-variant-numeric: tabular-nums;
}
.reg-stat .v .red { color: var(--red); }
.reg-stat .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink-mute); line-height: 1.3;
}

/* §2 bullets */
.reg-bullets { display: grid; gap: 14px; padding: 4px 0 0; }
.reg-bullet { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: baseline; }
.reg-bullet .marker { font-family: var(--mono); color: var(--red); font-weight: 600; font-size: 13px; line-height: 1.4; }
.reg-bullet .body { font-size: 16px; line-height: 1.55; color: var(--ink); }
.reg-bullet .body em { color: var(--ink-mute); font-style: normal; font-size: 14px; display: block; margin-top: 4px; }

/* §3 categories */
.reg-cats { display: grid; grid-template-columns: 1fr; gap: 16px; }
@container cup (min-width: 720px) {
  .reg-cats {
    grid-template-columns: 1fr 1fr; gap: 0;
    border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
  }
}
.reg-cats-col { display: grid; gap: 1px; background: var(--rule); }
.reg-cats-col-hdr {
  background: var(--surface); padding: 12px 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); font-weight: 600;
}
.reg-cat-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px;
  align-items: center; background: var(--bg); padding: 14px 16px;
}
.reg-cat-row .badge {
  font-family: var(--mono); font-size: 16px; font-weight: 700;
  color: var(--ink); letter-spacing: 0.02em;
}
.reg-cat-row .desc { font-size: 14px; color: var(--ink-soft); }
.reg-cat-row .stufe {
  font-family: var(--mono); font-size: 11px; color: var(--red);
  font-weight: 600; letter-spacing: 0.06em;
}
.reg-warning {
  margin-top: 16px; padding: 16px 18px;
  background: var(--red-tint); border-left: 3px solid var(--red);
  border-radius: 0 4px 4px 0;
  display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start;
}
@container cup (min-width: 720px) {
  .reg-warning { grid-template-columns: 92px 1fr; gap: 14px; }
}
.reg-warning .badge {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--red); letter-spacing: 0.10em; text-transform: uppercase; padding-top: 3px;
}
.reg-warning .desc { font-size: 14px; color: var(--ink); line-height: 1.55; display: grid; gap: 8px; min-width: 0; }
.reg-warning .desc strong { color: var(--ink); }
.reg-warning .desc p { margin: 0; }

/* §4 stufen */
.reg-stufen { display: grid; gap: 6px; padding: 4px 0 0; }
.reg-stufe { display: grid; grid-template-columns: 80px 1fr 100px; gap: 16px; align-items: center; }
.reg-stufe .lbl {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--ink); letter-spacing: 0.06em;
}
.reg-stufe .bar { height: 28px; background: var(--surface); border-radius: 3px; position: relative; overflow: hidden; }
.reg-stufe .bar .fill { position: absolute; inset: 0; background: var(--red); opacity: 0.85; }
.reg-stufe .cat {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--ink); text-align: right; letter-spacing: 0.04em;
}
.reg-stufen-axis {
  display: grid; grid-template-columns: 80px 1fr 100px; gap: 16px;
  padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--rule);
}
.reg-stufen-axis .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink-mute);
}
.reg-stufen-axis .l.r { text-align: right; }
@container cup (max-width: 720px) { .reg-stufen-axis { display: none; } }

/* §5 points + best-6 callout */
.reg-points { display: grid; gap: 28px; }
.reg-point-block { padding: 22px 22px 24px; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); }
.reg-point-block.special { background: var(--surface); border-color: var(--ink); }
.reg-point-block .ttl {
  display: flex; gap: 12px; align-items: baseline;
  flex-wrap: wrap; margin-bottom: 18px;
}
.reg-point-block .ttl h3 { font-size: 18px; font-weight: 700; margin: 0; color: var(--ink); letter-spacing: -0.01em; }
.reg-point-block .ttl .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--red); font-weight: 600;
}
.reg-point-scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.reg-point-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; background: var(--surface); border-radius: 3px;
}
.reg-point-block.special .reg-point-cell { background: var(--bg); }
.reg-point-cell .r {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--ink-mute); text-transform: uppercase;
}
.reg-point-cell .p {
  font-family: var(--mono); font-size: 16px; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.reg-point-cell.podium { background: var(--red-tint); }
.reg-point-cell.podium .p { color: var(--red); }
.reg-point-cell.dots { background: transparent; color: var(--ink-mute); justify-content: center; }
.reg-point-cell.dots .p { font-size: 14px; color: var(--ink-mute); font-weight: 500; }
.reg-point-tail {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
  margin-top: 12px; letter-spacing: 0.04em;
}

.reg-best {
  display: grid; grid-template-columns: auto 1fr; gap: 24px;
  align-items: center; padding: 28px 28px;
  background: var(--ink); color: var(--bg); border-radius: 4px;
}
.reg-best .big {
  font-family: var(--mono); font-size: 88px; font-weight: 700;
  line-height: 0.85; color: var(--bg);
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.reg-best .big sup { font-size: 28px; font-weight: 500; vertical-align: top; margin-left: 4px; opacity: 0.7; }
.reg-best .txt { display: grid; gap: 6px; }
.reg-best .txt .t { font-size: 18px; font-weight: 600; color: var(--bg); line-height: 1.3; }
.reg-best .txt .s { font-size: 13px; color: var(--bg); opacity: 0.65; line-height: 1.5; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .reg-best { background: var(--surface); color: var(--ink); }
  :root:not(.light) .reg-best .big { color: var(--ink); }
  :root:not(.light) .reg-best .txt .t { color: var(--ink); }
  :root:not(.light) .reg-best .txt .s { color: var(--ink-soft); opacity: 1; }
}

/* §7 Schlusslauf ladder */
.reg-ladder { display: grid; gap: 4px; }
.reg-ladder-row {
  display: grid; grid-template-columns: 36px 1fr 56px 60px;
  gap: 14px; align-items: center; padding: 10px 14px;
  background: var(--surface); border-radius: 3px;
  font-family: var(--mono); font-size: 12px;
}
.reg-ladder-row .pos { color: var(--red); font-weight: 700; font-variant-numeric: tabular-nums; }
.reg-ladder-row .nm { color: var(--ink); font-weight: 500; font-family: var(--sans); font-size: 14px; }
.reg-ladder-row .nm .sub { color: var(--ink-mute); font-size: 12px; margin-left: 8px; }
.reg-ladder-row .pts { color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.reg-ladder-row .start { color: var(--ink-mute); text-align: right; font-variant-numeric: tabular-nums; }
.reg-ladder-row.dots { background: transparent; padding: 6px 14px; opacity: 0.5; }
.reg-ladder-row.dots .pos,
.reg-ladder-row.dots .pts,
.reg-ladder-row.dots .start { color: var(--ink-mute); font-weight: 400; }
.reg-ladder-row.dots .nm { font-style: italic; color: var(--ink-mute); font-size: 13px; font-weight: 400; }
.reg-ladder-row.first { background: var(--red-tint); }
.reg-ladder-row.first .pts { color: var(--red); font-weight: 600; }
.reg-ladder-row.first .pos { color: var(--red); }
.reg-ladder-row.first .start { color: var(--red); font-weight: 600; }
.reg-ladder-arrow {
  display: grid; grid-template-columns: 36px 1fr 56px 60px;
  gap: 14px; align-items: center; padding: 6px 14px 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink-mute);
}

/* §9 Preise */
.reg-prizes { display: grid; gap: 12px; }
.reg-prize {
  padding: 22px 24px; border: 1px solid var(--rule); border-radius: 4px;
  display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; background: var(--bg);
}
.reg-prize .pn {
  font-family: var(--mono); font-size: 24px; font-weight: 700;
  color: var(--red); line-height: 1; padding-top: 2px; font-variant-numeric: tabular-nums;
}
.reg-prize .pb h4 { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.reg-prize .pb p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 540px; }
.reg-prize.gold { background: var(--surface); }
.reg-prize.maske { border-color: var(--ink); background: var(--bg); }
.reg-prize.maske .pn { color: var(--ink); }
.reg-prize.maske .pb h4 { color: var(--ink); }

/* §10 Einsprachen */
.reg-steps { display: grid; gap: 0; }
.reg-step { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.reg-step:last-child { border-bottom: none; }
.reg-step .num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--red); font-weight: 600; padding-top: 4px;
}
.reg-step .b h4 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.reg-step .b p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 540px; }
.reg-step .b .when {
  display: inline-block; margin-top: 8px; padding: 3px 10px;
  background: var(--red-tint); color: var(--red);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  font-weight: 600; border-radius: 3px;
}

/* §11 Kontakte */
.reg-contacts { display: grid; grid-template-columns: 1fr; gap: 12px; }
@container cup (min-width: 720px) { .reg-contacts { grid-template-columns: 1fr 1fr; gap: 16px; } }
.reg-contact { padding: 22px 24px; background: var(--surface); border-radius: 4px; }
.reg-contact .org {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 12px;
}
.reg-contact .nm { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 4px; }
.reg-contact .role { font-size: 13px; color: var(--ink-mute); margin-bottom: 14px; }
.reg-contact .em { font-family: var(--mono); font-size: 12px; color: var(--red); text-decoration: none; word-break: break-all; }
.reg-contact .em:hover { color: var(--red-hover); }

/* Footer — dark, multi-column */
.cup-foot {
  background: var(--footer-bg);
  color: #b8af9a;
  padding: 36px 20px 28px;
  border-top: 1px solid #2a241c;
  display: grid;
  gap: 28px;
}
@container cup (min-width: 720px) {
  .cup-foot { padding: 44px 40px 32px; gap: 36px; }
}
.cup-foot-top { display: grid; gap: 24px; align-items: start; }
@container cup (min-width: 720px) {
  .cup-foot-top { grid-template-columns: auto 1fr; gap: 56px; }
}
.cup-foot-brand { display: flex; flex-direction: column; gap: 12px; }
.cup-foot-logo { width: 110px; height: auto; display: block; }
.cup-foot-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #968d7d;
  line-height: 1.6;
  max-width: 260px;
}
.cup-foot-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
}
@container cup (min-width: 720px) {
  .cup-foot-nav { gap: 28px 48px; }
  .cup-foot-nav.with-sponsor { grid-template-columns: 1fr 1fr 1.2fr; }
}
.cup-foot-col .cup-foot-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #968d7d;
  margin: 0 0 12px;
  font-weight: 600;
}
.cup-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cup-foot-col a,
.cup-foot-col li {
  font-family: var(--sans);
  font-size: 14px;
  color: #ece5d2;
  text-decoration: none;
  line-height: 1.4;
  font-weight: 500;
}
.cup-foot-col a:hover { color: #dc4a3c; }
.cup-foot-col li.muted { color: #8a8170; font-weight: 400; font-size: 13px; }
.cup-foot-col .sp-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  transition: opacity 120ms;
}
.cup-foot-col .sp-logo:hover { opacity: 0.85; }
.cup-foot-col .sp-logo img { height: 56px; width: auto; display: block; }
.cup-foot-col .sp-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #968d7d;
  line-height: 1.5;
}
.cup-foot-col .sp-meta a { color: #b8af9a; text-decoration: none; }
.cup-foot-col .sp-meta a:hover { color: #dc4a3c; }
.cup-foot-bot {
  display: grid;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid #2a241c;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #968d7d;
}
@container cup (min-width: 720px) {
  .cup-foot-bot { grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
}
.cup-foot-bot a { color: #b8af9a; text-decoration: none; }
.cup-foot-bot a:hover { color: #dc4a3c; }
.cup-foot-bot .right { display: flex; gap: 18px; flex-wrap: wrap; }

/* Sponsor band — between results and footer on ranking pages */
.cup-sponsor-band {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
@container cup (min-width: 720px) {
  .cup-sponsor-band { padding: 26px 40px; gap: 28px; }
}
.cup-sponsor-band .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.cup-sponsor-band .sep-dot { color: var(--ink-mute); opacity: 0.5; }
@container cup (max-width: 540px) {
  .cup-sponsor-band .sep-dot { display: none; }
  .cup-sponsor-band .role { text-align: center; }
  .cup-sponsor-band .role strong,
  .cup-sponsor-band .role-sub { display: block; }
}
.cup-sponsor-band .logo-tile {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  transition: border-color 120ms;
  text-decoration: none;
}
.cup-sponsor-band .logo-tile:hover { border-color: var(--red); }
.cup-sponsor-band .logo-tile img { height: 36px; width: auto; display: block; }
.cup-sponsor-band .role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cup-sponsor-band .role strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   Wertungsläufe page
   ============================================================ */
.wert-wrap { padding-bottom: 80px; }

/* Eligibility key */
.wert-key { display: grid; gap: 14px; margin: 16px 0 32px; }
@container cup (min-width: 720px) { .wert-key { grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0 40px; } }
.wert-key-card {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto;
  gap: 8px 16px; padding: 22px 24px; border: 1px solid var(--rule);
  border-radius: 6px; background: var(--bg); align-items: start;
}
.wert-key-card.night {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
.wert-key-card.night .wert-key-ttl,
.wert-key-card.night .wert-key-sub strong { color: var(--bg); }
.wert-key-card.night .wert-key-sub { color: color-mix(in oklab, var(--bg) 75%, transparent); }
.wert-key-glyph {
  width: 40px; height: 40px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 50%;
  background: color-mix(in oklab, var(--red) 14%, transparent); color: var(--red);
  grid-row: span 2;
}
.wert-key-glyph svg { width: 20px; height: 20px; }
.wert-key-card.night .wert-key-glyph { background: rgba(246,242,232,0.10); color: var(--bg); }
.wert-key-ttl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.wert-key-sub { font-size: 14px; line-height: 1.5; color: var(--ink-soft); max-width: 480px; }
.wert-key-cats { grid-column: 2; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }

/* Category pill */
.wert-cat-pill {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.10em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; font-weight: 600; white-space: nowrap;
}
.wert-cat-pill.all { background: color-mix(in oklab, var(--red) 12%, transparent); color: var(--red); }
.wert-cat-pill.night { background: var(--ink); color: var(--bg); }
.wert-key-card.night .wert-cat-pill.night {
  background: color-mix(in oklab, var(--bg) 12%, transparent);
  color: var(--bg);
}

/* Summary bar */
.wert-summary { display: grid; gap: 14px; padding: 28px 24px; background: var(--surface); border-radius: 6px; margin-bottom: 64px; }
.wert-summary-row { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center; }
@container cup (max-width: 540px) { .wert-summary-row { grid-template-columns: 1fr; gap: 6px; } }
.wert-summary .cat-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.wert-summary .cat-bar { display: flex; height: 28px; border-radius: 4px; overflow: hidden; background: var(--surface2); }
.wert-summary .cat-fill { display: flex; align-items: center; padding: 0 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #f6f2e8; gap: 6px; min-width: 0; overflow: hidden; }
.wert-summary .cat-fill .num { font-weight: 700; font-size: 13px; letter-spacing: 0; }
.wert-summary .cat-fill.day { background: var(--red); }
.wert-summary .cat-fill.night { background: var(--ink); color: var(--bg); }

/* Calendar timeline */
.wert-cal { display: grid; gap: 40px; }
.wert-month-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.wert-month-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-mute); font-weight: 500; }
.wert-month-name { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.wert-month-count { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.wert-month-list { display: grid; gap: 0; }

.wert-race { display: grid; grid-template-columns: 64px 24px 1fr auto; gap: 16px; padding: 14px 0; align-items: center; border-top: 1px solid var(--rule); }
@container cup (max-width: 540px) {
  .wert-race { grid-template-columns: 56px 18px 1fr; grid-template-rows: auto auto; gap: 4px 12px; }
  .wert-race .wert-cats { grid-column: 3; grid-row: 2; justify-self: start; }
  .wert-race .wert-body { grid-column: 3; }
}
.wert-date { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.wert-date .dom { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.wert-date .dow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; }
.wert-rail { display: flex; align-items: center; justify-content: center; align-self: stretch; position: relative; }
.wert-rail::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--rule); transform: translateX(-50%); }
.wert-dot { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 1px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.wert-dot svg { width: 14px; height: 14px; }
.wert-race.night .wert-dot { background: #1a1612; border-color: #1a1612; color: var(--bg); }
.wert-race.day .wert-dot { color: var(--red); }
.wert-body { min-width: 0; }
.wert-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wert-title { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; text-decoration: none; }
a.wert-title:hover { color: var(--red); }
.wert-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--red); padding: 3px 8px; border: 1px solid color-mix(in oklab, var(--red) 35%, transparent); border-radius: 999px; font-weight: 600; }
.wert-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 0; row-gap: 4px;
  margin-top: 4px;
  font-size: 13px; color: var(--ink-soft);
}
.wert-meta > * + *::before {
  content: '·';
  padding: 0 10px;
  color: var(--ink-mute);
  opacity: 0.55;
}
.wert-meta .wert-org { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-mute); }
.wert-meta .wert-link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); text-decoration: none; opacity: 0.7; transition: opacity 120ms; }
.wert-meta .wert-link:hover { opacity: 1; }
.wert-cats { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 280px; }

/* Footer note */
.wert-foot-note { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--rule); }
.wert-foot-note p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); max-width: 720px; margin: 0 0 12px; }
.wert-foot-note .small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-mute); margin-top: 16px; }
.wert-inline-link { color: var(--red); text-decoration: none; border-bottom: 1px solid currentColor; }
.wert-inline-link:hover { color: var(--red-hover); }

/* ============================================================
   Admin component styles
   ============================================================ */

:root {
  --match-color: #5cb85c;
  --difference-color: #d9534f;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --match-color: #66bb6a;
    --difference-color: #ef5350;
  }
}

a { color: var(--red); }
a:hover,
a:active,
a:focus { color: var(--red-hover); text-decoration: none; }

/* Page container shared with reglement/wertungsläufe */
@container cup (min-width: 720px) { .page-wrap { padding: 0 40px; } }

/* Admin header badge and nav */
.adm-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in oklab, var(--header-fg) 15%, transparent);
  color: color-mix(in oklab, var(--header-fg) 65%, transparent);
  margin-left: 7px;
  vertical-align: middle;
}
.adm-nav { display: flex; gap: 18px; }
.adm-nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--header-fg);
  opacity: 0.65; text-decoration: none; transition: opacity 120ms;
}
.adm-nav a:hover { opacity: 1; color: var(--red); }
@container cup (max-width: 540px) { .adm-nav { display: none; } }

/* Admin page-level layout */
.adm-page { padding-top: 32px; padding-bottom: 64px; }

/* Card / panel */
.adm-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.adm-card h2,
.adm-card h3 { margin-top: 0; color: var(--ink); }
details.adm-card > summary {
  cursor: pointer; font-weight: 600; color: var(--ink-soft);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; list-style: none; padding: 0;
}
details.adm-card > summary::before { content: '+ '; color: var(--red); }
details.adm-card[open] > summary::before { content: '− '; }
details.adm-card[open] > summary { margin-bottom: 16px; }

/* Responsive 2-column grid */
.adm-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

/* Button system */
.btn,
button {
  display: inline-block; padding: 9px 18px;
  background: var(--red); color: #fff;
  border: 1px solid transparent; border-radius: 5px;
  font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; text-decoration: none; line-height: 1;
  transition: background 0.12s;
}
.btn:hover,
button:hover { background: var(--red-hover); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-secondary {
  background: transparent; color: var(--ink); border-color: var(--rule);
}
.btn-secondary:hover { background: var(--surface); color: var(--ink); }
.btn-danger {
  background: transparent; color: var(--red); border-color: var(--red);
}
.btn-danger:hover { background: var(--red-tint); color: var(--red); }

/* Form elements inside cards */
.adm-card label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--ink-soft); margin-bottom: 4px;
  font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.adm-card input[type="text"],
.adm-card select {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: 5px;
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: 14px; margin-bottom: 12px;
}
.adm-card input[type="text"]:focus,
.adm-card select:focus { outline: 2px solid var(--red); outline-offset: 0; }
.adm-card input[type="number"] {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: 5px;
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: 14px; margin-bottom: 12px;
}
.adm-card input[type="number"]:focus { outline: 2px solid var(--red); outline-offset: 0; }
#adm-season::-webkit-outer-spin-button,
#adm-season::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#adm-season { -moz-appearance: textfield; }

/* Admin data table */
.adm-table-wrap {
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
  margin-bottom: 24px; overflow-x: auto;
}
.adm-table-wrap .adm-table { margin-bottom: 0; }
.adm-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 13px; }
.adm-table thead th {
  background: var(--th-bg); color: var(--th-fg);
  padding: 8px 12px; text-align: left;
  font-family: var(--mono); font-size: 10px;
  font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  white-space: nowrap;
}
.adm-table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--rule); color: var(--ink); vertical-align: middle; }
.adm-table tbody tr:last-child td { border-bottom: none; }
.adm-table tbody tr:nth-child(even) td { background: var(--surface); }
.adm-table tbody tr:hover td { background: var(--red-tint) !important; cursor: pointer; }
.adm-table td form { margin: 0; }
.adm-table .adm-table-actions { display: flex; gap: 6px; align-items: center; }
.adm-table thead th.adm-sticky { position: sticky; left: 0; z-index: 3; border-right: 1px solid rgba(255,255,255,0.12); }
.adm-table tbody td.adm-sticky { position: sticky; left: 0; z-index: 2; background: var(--bg); border-right: 1px solid var(--rule); }
.adm-table tbody tr:nth-child(even) td.adm-sticky { background: var(--surface); }

.adm-link { color: var(--red); text-decoration: none; font-weight: 600; }
.adm-link:hover { color: var(--red-hover); text-decoration: underline; }

/* Semantic utilities for admin tables / page chrome */
.adm-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
.adm-meta a { color: inherit; }
.adm-meta a:hover { color: var(--red); }
.adm-name { font-weight: 600; }
.adm-num  { text-align: center; }
.adm-help { font-size: 14px; color: var(--ink-soft); }

/* Hint / info box */
.adm-hint {
  padding: 12px 16px; border-radius: 5px; margin-bottom: 16px;
  font-size: 14px; border-left: 3px solid var(--red);
  background: var(--red-tint); color: var(--ink); line-height: 1.5;
}

/* Checkbox multi-select groups (used in cup creation form) */
.adm-check-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.adm-check-col { display: flex; flex-direction: column; gap: 2px; }
.adm-check-col-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-soft);
  padding: 4px 0 6px; border-bottom: 1px solid var(--rule); margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.adm-check-col-head input[type="checkbox"] { margin: 0; }
.adm-check-col label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink); text-transform: none; letter-spacing: 0;
  cursor: pointer; padding: 3px 0;
}
.adm-check-col label:hover { color: var(--red); }
.adm-check-col input[type="checkbox"] { accent-color: var(--red); width: 14px; height: 14px; flex-shrink: 0; }
@container cup (max-width: 540px) {
  .adm-check-cols { grid-template-columns: 1fr; }
}

/* Alert / feedback */
.adm-toast {
  position: fixed; bottom: 24px; right: 24px;
  padding: 12px 16px; border-radius: 6px; border-left: 4px solid;
  font-size: 14px; font-family: var(--mono); max-width: 320px;
  z-index: 1000; pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.adm-toast.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.adm-toast--success { background: color-mix(in oklab, #5cb85c 12%, var(--bg)); border-color: #5cb85c; color: var(--ink); }
.adm-toast--error   { background: var(--red-tint); border-color: var(--red); color: var(--ink); }

/* Danger zone */
.adm-danger { border: 2px solid var(--red); border-radius: 6px; padding: 20px 24px; margin-top: 24px; }
.adm-danger h2 { color: var(--red); margin-top: 0; font-size: 16px; }

/* Runner key-value grid (resolve_duplicates compact cards) */
.runner-kv {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 4px 12px; font-size: 13px; margin: 12px 0; padding: 0;
}
.runner-kv dt {
  color: var(--ink-mute); font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; align-self: center; margin: 0;
}
.runner-kv dd { margin: 0; color: var(--ink); font-weight: 500; }
.runner-kv dd.match { color: var(--match-color); }
.runner-kv dd.difference { color: var(--difference-color); font-weight: 600; }
.runner-stats {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-mute); margin: 8px 0 0;
}
.runner-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.adm-sim-score {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  font-weight: 600; border: 1px solid color-mix(in oklab, var(--difference-color) 40%, transparent);
  background: color-mix(in oklab, var(--difference-color) 10%, transparent);
  color: var(--difference-color);
}

/* A large tile for a prominent link that stands out with outlined button styling. */

a.large-tile {
    position: relative;
    display: block;
    width: 80%;
    max-width: 600px;
    margin: 30px auto;
    padding: 1.5rem 2rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--primary);
    background-color: transparent;
    border: 2px solid var(--primary);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

a.large-tile:hover {
    background-color: var(--primary);
    color: var(--primary-inverse);
    transform: translateY(-2px);
}

a.large-tile:active {
    transform: translateY(0);
}

.ribbon {
  --f: 15px; /* control the folded part */
  
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
  color: #fff;
  padding: .1em 1.8em;
  background: --primary;
  border-bottom :var(--f) solid #0007;
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px))
}

/* custom styles */


.note {
  margin-bottom: 20px;
  background-color: var(--primary-hover-background);
  padding: 20px;
  font-size: 80%;
}

.info {
  margin-bottom: 20px;
  padding: 20px;
  font-size: 80%;
}

.contact-note {
  font-size: 60%;
  color: var(--muted-color);
  margin-top: 20px;
}

.horizontal-grid {
  display: grid !important;
  grid-template-columns: 20% 80%;
}

.p-2 {
  padding: 20px;
}

.p-1 {
  padding: 10px;
}

.race-points {
  padding: 10px;
}

.vertical {
  writing-mode: vertical-rl;
  height: 400px;
  text-align: end;
}

.races_table > td {
  margin: 0;
}


.center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.margin-0 {
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.padding-horizontal {
  padding: 0 10px;
}

.padding-sm {
  padding: 10px;
}

.bottom {
  vertical-align: bottom;
}

.border-right {
  border-right: 1px solid #edf0f3;
}

.flex-horizontal {
  display: flex;
  flex-direction: row;
}

.bold {
  font-weight: bold;
}

.text-small {
  font-size: 16px;
}

.danger {
  border-radius: 10px;
  padding: 20px;
  border: 2px solid #f73129;
}

.editable-col {
  padding: 0 10px;
}
.adm-table td.editable-col:focus {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.info-box {
  position: relative;
  display: inline-block;
}

.question-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ccc;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
}

.help-text {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f9f9f9;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1.4;
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s,
    opacity 0.5s ease;
}

.info-box:hover .help-text {
  visibility: visible;
  opacity: 1;
}

.categories {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--muted-border-color);
}

.category-selector {
  flex-grow: 1;
  padding: 0.4em 0.2em;
  border-bottom: 1px solid var(--form-element-border-color);
  text-align: center;
}

.category-selector:hover {
  background-color: var(--primary-hover-background);
  border-color: var(--primary-hover);
}

.category-selector:active {
  background-color: var(--primary-focus-background);
}

.category-active {
  font-weight: bold;
  background-color: var(--primary-focus-background);
  color: var(--primary-hover);
  border-color: var(--primary-hover);
}


.striked-result {
  text-decoration: line-through;
}

.results th.narrow-screen-only,
.results td.narrow-screen-only {
  display: none;
}

@media only screen and (max-width: 900px) {
  .categories {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .category-selector {
    flex-grow: 0;
    padding: 0.4em 0.6em;
  }

  td,
  th {
    border-bottom: 0;
  }

  .results th.wide-screen-only,
  .results td.wide-screen-only {
    display: none;
  }

  .results th.narrow-screen-only,
  .results td.narrow-screen-only {
    display: block;
  }

  /* Accordion indicator arrow */
  .results tr td:first-child::before {
    content: "\276F";
    display: inline-block;
    transform: rotate(90deg);
    transition: all 0.35s;
    margin: 0;
    margin-right: 5px;
    padding: 0 5px;
  }

  .results tr.expanded td:first-child::before {
    transform: rotate(270deg);
  }

  .results .padding-sm,
  .results .padding-horizontal {
    padding: 0 2px;
  }

  .results tr {
    cursor: pointer;
    border-bottom: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    padding: 0.2em 0 0.3em;
  }

  .results tbody tr:nth-child(odd) {
    background-color: var(--surface);
  }

  .results td:not(.secondary-column) {
    width: auto;
    border: 0;
  }

  /* Category specific result columns */
  /* Rang */
  .results.category td:nth-child(1),
  .results.category th:nth-child(1) {
    flex-basis: 60px;
    flex-grow: 0;
    flex-shrink: 0;
  }

  /* Punkte */
  .results.category td:nth-child(2),
  .results.category th:nth-child(2) {
    flex-basis: 60px;
    flex-grow: 0;
    flex-shrink: 0;
  }

  /* Name */
  .results.category td:nth-child(3),
  .results.category th:nth-child(3) {
    flex-grow: 1;
    max-width: calc(70% - 120px);
  }

  /* Club */
  .results.category td:nth-child(4),
  .results.category th:nth-child(4) {
    flex-basis: 30%;
  }

  /* Overall result columns */
  /* Rang */
  .results.overall td:nth-child(1),
  .results.overall th:nth-child(1) {
    flex-basis: 60px;
    flex-grow: 0;
    flex-shrink: 0;
  }

  /* Name */
  .results.overall td:nth-child(2),
  .results.overall th:nth-child(2) {
    flex-grow: 1;
    max-width: calc(70% - 120px);
  }

  /* Club */
  .results.overall td:nth-child(3),
  .results.overall th:nth-child(3) {
    flex-basis: 30%;
  }

  /* Punkte */
  .results.overall td:nth-child(4),
  .results.overall th:nth-child(4) {
    flex-basis: 60px;
    flex-grow: 0;
    flex-shrink: 0;
  }

  .results tr .secondary-column {
    /* Defaults to collapsed secondary rows. */
    display: none;
  }

  .results tr.expanded .secondary-column {
    display: block;
  }

  .results td.secondary-column {
    border: 0;
    text-align: right;
    flex-basis: 100%;
    margin: 0 20px;
    padding: 0;
  }

  .results td.secondary-column::before {
    content: attr(data-label);
    float: left;
    text-decoration: none;
  }

  .results td.secondary-column:last-child {
    border-bottom: 0;
    margin-bottom: 0.2em;
  }
}

/* Duplicate resolution styles (remapped to design tokens) */
.duplicate-pair {
  border: 1px solid var(--rule);
  margin-bottom: 16px;
  padding: 16px;
  background-color: var(--surface);
  border-radius: 6px;
}

.runner-card {
  padding: 16px;
  background-color: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 5px;
}

.difference {
  color: var(--difference-color);
  font-weight: 600;
}

.match {
  color: var(--match-color);
}

/* Health check panel styles */
.health-checks {
  list-style: none;
  padding: 0;
  margin: 0;
}

.health-check-item {
  padding: 0.5rem 0;
  margin: 0.25rem 0;
}

.health-check-item.expandable {
  cursor: pointer;
  border-radius: 4px;
  padding: 0.5rem 6px;
}

.health-check-item.expandable:hover {
  background-color: color-mix(in oklab, var(--red) 8%, transparent);
}

.check-icon {
  font-weight: bold;
  margin-right: 0.5rem;
}

.check-passed .check-icon {
  color: var(--match-color);
}

.check-failed .check-icon {
  color: var(--difference-color);
}

.check-name {
  font-weight: 600;
}

.check-description {
  color: var(--ink-mute);
  font-size: 0.9em;
}

.check-details {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: var(--surface);
  border-radius: 4px;
}

.details-table {
  width: 100%;
  font-size: 0.9em;
}

.details-table th {
  text-align: left;
  padding: 0.25rem;
  color: var(--ink-soft);
}

.details-table td {
  padding: 0.25rem;
  color: var(--ink);
}