/* Section "groups" – Vier Gruppen, 24 Matches. Prefix: .gr- */

.gr-head { max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.gr-lead { margin: 0; }

/* ---------- Segmented control (mobile / tablet) ---------- */
.gr-tabs {
  display: flex; gap: .25rem; padding: .3rem; margin-bottom: 1.2rem;
  border: 1px solid var(--line2); border-radius: 999px; background: var(--panel);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.gr-tabs[hidden] { display: none; }
.gr-tab {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .7rem .4rem; border: 1px solid transparent; border-radius: 999px; background: none; cursor: pointer;
  font: 700 .85rem/1 var(--font); color: var(--muted); white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
.gr-tab-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--c); flex: none; }
.gr-tab:hover { color: var(--ink); }
.gr-tab[aria-selected="true"] {
  color: var(--ink);
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
}
@media (max-width: 400px) { .gr-tab { font-size: .78rem; gap: .35rem; } }

/* ---------- Group cards ---------- */
.gr-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 1000px) { .gr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gr-card {
  position: relative; min-width: 0;
  padding: clamp(1rem, 2.6vw, 1.6rem);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--c) 75%, transparent);
  transition: opacity .35s var(--ease), transform .9s var(--ease);
}
.gr-tabbed .gr-card:not(.is-active) { display: none; }
.gr-tabbed .gr-card.is-active.is-in { animation: gr-in .45s var(--ease); }
@keyframes gr-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.gr-card-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.gr-card-title { display: flex; align-items: center; gap: .7rem; margin: 0; font: 900 1.6rem/1 var(--font-display); letter-spacing: -.01em; }
.gr-letter {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .7rem;
  background: var(--c); color: var(--on-group); font: 900 1.15rem/1 var(--font);
  box-shadow: 0 0 24px color-mix(in srgb, var(--c) 35%, transparent);
}
.gr-meta { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gr-story { margin: .9rem 0 1.1rem; font-size: .95rem; line-height: 1.55; color: var(--text); }
.gr-story strong { color: var(--ink); }

/* Standings table */
.gr-table-wrap { margin: 0 -.25rem; }
.gr-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gr-table thead th {
  padding: 0 .4rem .5rem; text-align: left;
  font: 700 .66rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--line2);
}
.gr-table abbr { text-decoration: none; cursor: help; }
.gr-table td, .gr-table tbody th { padding: .6rem .4rem; border-bottom: 1px solid var(--line); vertical-align: middle; transition: opacity .3s, background .3s; }
.gr-table tbody tr:last-child > * { border-bottom: 0; }
.gr-c-rank { width: 2.3rem; }
.gr-c-team { text-align: left; font-weight: 600; }
.gr-table .gr-c-num { text-align: right; white-space: nowrap; font-size: .85rem; color: var(--text); }
.gr-table thead .gr-c-num { text-align: right; }
.gr-winner > * { background: color-mix(in srgb, var(--c) 9%, transparent); }
.gr-winner > :first-child { border-radius: .6rem 0 0 .6rem; }
.gr-winner > :last-child { border-radius: 0 .6rem .6rem 0; }

.gr-rank {
  display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; flex: none;
  border: 1px solid var(--line2); font: 700 .75rem/1 var(--font-mono); color: var(--muted);
}
.gr-winner .gr-rank, .gr-matrix thead th:nth-child(2) .gr-rank, .gr-matrix tbody tr:first-child .gr-rank {
  background: var(--c); border-color: var(--c); color: var(--on-group);
}

.gr-team {
  display: inline; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink); text-decoration: underline 1px transparent; text-underline-offset: .22em;
  transition: text-decoration-color .2s, color .2s;
}
.gr-team:hover, .gr-team[aria-pressed="true"] { text-decoration-color: var(--c); }
.gr-badge {
  display: inline-flex; align-items: center; margin: .3rem 0 0 .45rem; padding: .22rem .5rem; border-radius: 999px; vertical-align: middle;
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); color: var(--ink);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  font: 700 .62rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 520px) {
  .gr-badge { display: flex; width: max-content; margin-left: 0; }
  .gr-table { font-size: .88rem; }
  .gr-table td, .gr-table tbody th { padding: .55rem .3rem; }
}

/* Head-to-head matrix */
.gr-matrix-block { margin-top: 1.4rem; }
.gr-sub { margin: 0 0 .6rem; font: 700 .7rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gr-matrix { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; margin: 0 -3px; }
.gr-matrix thead th, .gr-mx-corner { padding: 0 0 .25rem; text-align: center; font-weight: 400; }
.gr-mx-corner { width: 44%; text-align: left !important; font: 600 .6rem/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); vertical-align: bottom; }
.gr-matrix tbody th { padding: .2rem .3rem .2rem 0; text-align: left; font-weight: 600; }
.gr-team--mx { display: flex; align-items: center; gap: .5rem; width: 100%; font-size: .82rem; line-height: 1.2; }
.gr-mx-name { min-width: 0; overflow-wrap: anywhere; }
.gr-mx-cell, .gr-mx-self {
  height: 2.5rem; text-align: center; border-radius: .5rem;
  font: 700 .85rem/1 var(--font-mono); transition: opacity .3s, box-shadow .3s, background .3s;
}
.gr-mx-cell[data-res="w"] { background: color-mix(in srgb, var(--c) 26%, transparent); color: var(--ink); }
.gr-mx-cell[data-res="l"] { background: rgba(255, 255, 255, .04); color: var(--muted); font-weight: 500; }
.gr-mx-self { background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255, 255, 255, .06) 5px 6px); }

.gr-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem; margin: .7rem 0 0; font-size: .75rem; color: var(--muted); }
.gr-key { width: .9rem; height: .9rem; border-radius: .25rem; display: inline-block; }
.gr-key--w { background: color-mix(in srgb, var(--c) 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.gr-key--l { background: rgba(255, 255, 255, .06); margin-left: .5rem; }
.gr-legend-note { color: var(--dim); }

/* All matches (collapsible) */
.gr-games { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.gr-games summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .5rem;
  font: 600 .85rem/1.4 var(--font); color: var(--muted);
}
.gr-games summary::-webkit-details-marker { display: none; }
.gr-games summary::before { content: '+'; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1px solid var(--line2); font: 700 .8rem/1 var(--font-mono); }
.gr-games[open] summary::before { content: '–'; }
.gr-games summary:hover { color: var(--ink); }
.gr-games-list { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .1rem; }
.gr-games-list li { display: grid; grid-template-columns: 5.6rem 1fr; gap: .6rem; padding: .4rem .5rem; border-radius: .5rem; font-size: .85rem; color: var(--muted); transition: opacity .3s, background .3s; }
.gr-g-when { font-size: .72rem; color: var(--dim); padding-top: .15rem; }
.gr-g-w { color: var(--ink); font-weight: 600; }
.gr-g-score { color: var(--ink); padding: 0 .2rem; font-size: .8rem; }

/* ---------- Team path highlighting (sp:team) ---------- */
.gr-has-sel .gr-card:not(.has-sel) { opacity: .5; }
.gr-card.has-sel .gr-table tbody tr:not(.is-sel) > * { opacity: .45; }
.gr-card .gr-table tbody tr.is-sel > * { background: color-mix(in srgb, var(--c) 18%, transparent); }
.gr-card .gr-table tbody tr.is-sel > :first-child { box-shadow: inset 3px 0 0 var(--c); }
.gr-card.has-sel .gr-mx-cell:not(.is-row):not(.is-col), .gr-card.has-sel .gr-mx-self { opacity: .3; }
.gr-card.has-sel .gr-matrix tbody tr:not(.is-sel) th { opacity: .55; }
.gr-mx-cell.is-row { box-shadow: 0 0 0 2px var(--c); }
.gr-mx-cell.is-col { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.gr-card.has-sel .gr-games-list li:not(.is-sel) { opacity: .4; }
.gr-games-list li.is-sel { background: color-mix(in srgb, var(--c) 10%, transparent); }
.gr-team:focus-visible { outline-offset: 2px; }