/* ==========================================================================
   Radball-WM 2026 — Ergebnisseite
   Baut auf styles.css auf (Farben, Schrift, Kopf, Fuss). Jeder Wettbewerb
   hat eine Farbe, die ueberall wiederkehrt: Maenner orange, Frauen violett,
   Challenger tuerkis.
   ========================================================================== */

.wm { --wm-M: #ff5a2a; --wm-F: #b58cff; --wm-C: #2fd4c0; --wm-gold: #ffc300;
  --wm-karte: rgba(255, 255, 255, .045); --wm-karte-rand: rgba(255, 255, 255, .09);
  /* Inhalt bündig mit der Kopfzeile, Hintergründe dürfen über die ganze Breite */
  --wm-rand: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad))); }
/* Was klebt, sitzt unter der Kopfzeile; wm.js misst ihre Höhe (--wm-kopf) */
html { scroll-padding-top: calc(var(--wm-kopf, 64px) + .75rem); }
.wm { overflow-anchor: none; }
.wm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wm-nw { white-space: nowrap; }
.wm [data-liga="M"], .wm-liga[data-liga="M"] { --farbe: var(--wm-M); }
.wm [data-liga="F"], .wm-liga[data-liga="F"] { --farbe: var(--wm-F); }
.wm [data-liga="C"], .wm-liga[data-liga="C"] { --farbe: var(--wm-C); }

/* ── Einstieg und Bühne ───────────────────────────────────────── */
.wm-kopf {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2.2rem, 6vw, 4.5rem) var(--wm-rand) clamp(2rem, 5vw, 3.5rem);
  padding-left: max(var(--wm-rand), env(safe-area-inset-left)); padding-right: max(var(--wm-rand), env(safe-area-inset-right));
}
/* Während gespielt wird, zählt die Tafel — der große Titel tritt zurück */
.wm[data-phase="laeuft"] .wm-kopf { padding-top: clamp(1.4rem, 3.5vw, 2.4rem); }
.wm[data-phase="laeuft"] .wm-h1 { font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.4rem); }
.wm[data-phase="laeuft"] .wm-unterzeile, .wm[data-phase="vorbei"] .wm-unterzeile { display: none; }
.wm[data-phase="laeuft"] .wm-buehne { margin-top: clamp(1.2rem, 3vw, 1.8rem); }
/* Das Spielfeld als Bild hinter der Bühne: 14 × 11 m, Mittelkreis,
   Strafräume — leise, aber unverwechselbar Radball */
.wm-kopf::before {
  content: ""; position: absolute; z-index: -1; inset: -10% -20% auto;
  height: 120%;
  background:
    radial-gradient(60% 55% at 50% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(40% 40% at 85% 70%, color-mix(in srgb, var(--wm-C) 12%, transparent), transparent 70%),
    radial-gradient(40% 40% at 12% 75%, color-mix(in srgb, var(--wm-F) 12%, transparent), transparent 70%);
  pointer-events: none;
}
.wm-feldbild {
  position: absolute; z-index: -1; left: 50%; top: 50%;
  width: min(1180px, 140%); transform: translate(-50%, -46%);
  opacity: .06; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 35%, transparent 80%); mask-image: linear-gradient(#000 35%, transparent 80%);
}
.wm-feldbild * { fill: none; stroke: #fff; stroke-width: .06; }
@media (max-width: 560px) { .wm-feldbild { opacity: .045; } }
.wm-eyebrow {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
  font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.wm-eyebrow b { color: var(--accent); font-weight: 800; }
.wm-eyebrow > * + *::before { content: "·"; margin-right: .9rem; opacity: .6; color: var(--muted); }
/* Am Handy untereinander — Trennpunkte am Zeilenanfang sähen verloren aus */
@media (max-width: 560px) {
  .wm-eyebrow { flex-direction: column; align-items: flex-start; gap: .3rem; font-size: .72rem; letter-spacing: .12em; }
  .wm-eyebrow > * + *::before { display: none; }
}
.wm-h1 {
  margin-top: .9rem;
  font-size: clamp(2.6rem, 1.4rem + 6vw, 6rem); font-weight: 900;
  letter-spacing: -.055em; line-height: .92;
}
/* Der Verlauf füllt nur die Fläche der Zeile — bei line-height .92 fiel die
   Unterlänge (das g in „Ergebnisse“) heraus. Polster nach unten, gleich
   viel negativer Rand: mehr Fläche, gleicher Abstand. */
.wm-h1 span { display: block; color: transparent; padding-bottom: .16em; margin-bottom: -.16em;
  background: linear-gradient(92deg, var(--fg) 10%, color-mix(in srgb, var(--accent) 70%, var(--fg)) 60%, var(--wm-gold));
  -webkit-background-clip: text; background-clip: text; }
.wm-unterzeile { margin-top: 1rem; max-width: 52ch; color: var(--muted); font-size: clamp(1.02rem, .98rem + .35vw, 1.22rem); }

.wm-buehne { margin-top: clamp(1.8rem, 4vw, 2.8rem); display: grid; gap: 1rem; }
.wm-buehne-titel { font-size: .75rem; font-weight: 800; letter-spacing: .18em; line-height: 1.3; text-transform: uppercase; color: var(--muted); }

.wm-stream { justify-self: start; display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .55rem 1.1rem;
  border-radius: 999px; background: #d61f1f; color: #fff; font-weight: 800; text-decoration: none; letter-spacing: -.01em; }
.wm-stream:hover { filter: brightness(1.1); }

/* Countdown */
.wm-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.4rem, 1.5vw, .9rem); max-width: 640px; }
.wm-cd-feld {
  display: grid; justify-items: center; gap: .1rem;
  padding: clamp(.8rem, 2.5vw, 1.3rem) .3rem;
  border: 1px solid var(--wm-karte-rand); border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
}
.wm-cd-zahl { font-size: clamp(2rem, 1rem + 5vw, 4.2rem); font-weight: 850; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.wm-cd-wort { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wm-cd-text { color: var(--muted); font-size: .9rem; }

/* Die große Anzeigetafel */
.wm-anzeige {
  position: relative; overflow: hidden;
  padding: clamp(1rem, 3vw, 1.6rem) clamp(1rem, 3.5vw, 2rem) clamp(.9rem, 2.5vw, 1.2rem);
  border: 1px solid color-mix(in srgb, var(--farbe) 35%, var(--wm-karte-rand));
  border-radius: 28px;
  background:
    radial-gradient(90% 120% at 50% -20%, color-mix(in srgb, var(--farbe) 20%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--farbe) 60%, transparent);
}
.wm-anzeige-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
@media (max-width: 560px) { .wm-anzeige-kopf { justify-content: center; } }
.wm-anzeige-paar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start;
  gap: clamp(.5rem, 2.5vw, 2rem); margin: clamp(1rem, 3vw, 1.6rem) 0 clamp(.7rem, 2vw, 1rem);
}
.wm-anzeige-seite { display: flex; justify-content: center; min-width: 0; container-type: inline-size; }
.wm-anzeige-seite .wm-team { flex-direction: column; align-items: center; text-align: center; gap: .55rem; max-width: 100%; }
/* --b: Breite des längsten Wortes in Zeichenbreiten (wm.js) — so passt
   „Großbritannien“ in die Spalte, ohne mitten im Wort zu brechen */
.wm-anzeige-seite .wm-name {
  font-size: clamp(.95rem, calc(98cqi / var(--b, 8)), 1.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12;
  white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; overflow-wrap: normal; word-break: normal; max-width: 100%;
  -webkit-hyphens: auto; hyphens: auto;
}
.wm-anzeige-seite .wm-offen .wm-name { font-size: clamp(.86rem, .8rem + .6vw, 1.15rem); }
.wm-anzeige-seite:not(.wm-vorne) .wm-team:not(.wm-offen) { opacity: .9; }
.wm-anzeige-stand { display: grid; justify-items: center; gap: .35rem; align-self: center; text-align: center; }
/* Vor dem Anpfiff: die Uhrzeit statt eines falschen 0:0 */
.wm-anstoss-wort { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.wm-anstoss { font-size: clamp(2.3rem, 1.1rem + 5.5vw, 4.6rem); font-weight: 850; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; }
.wm-bis { color: var(--accent-2); font-weight: 750; font-size: .8rem; white-space: nowrap; }
.wm-regulaer { color: var(--muted); font-size: .74rem; font-weight: 600; }
.wm-einsatz { text-align: center; color: var(--muted); font-size: .8rem; font-weight: 650; margin: -.2rem 0 .55rem; text-wrap: balance; }
/* 4-m-Schießen als eigene Zeile unter der Tafel — die Mittelspalte bleibt schmal */
.wm-anzeige-4m { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .15rem .7rem; margin: -.3rem 0 .6rem; text-align: center; }
/* Laden, solange noch kein Stand da ist */
.wm-anzeige-laden { display: grid; justify-items: center; gap: .9rem; min-height: 14rem; align-content: center; --farbe: var(--muted); }
.wm-skelett { width: 40%; height: .9rem; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size: 200% 100%; animation: wm-schimmer 1.4s linear infinite; }
.wm-skelett-gross { width: 55%; height: 3.6rem; border-radius: 18px; }
.wm-skelett-block { width: 100%; height: 14rem; border-radius: 22px; margin-top: 1.6rem; }
@keyframes wm-schimmer { to { background-position: -200% 0; } }
.wm-ablage-hinweis { font-size: .8rem; font-weight: 650; color: var(--accent-2); }
/* Tor: die ganze Tafel atmet einmal in der Farbe des Wettbewerbs */
.wm-tor-ring { animation: wm-ring 1.6s ease-out; }
@keyframes wm-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wm-gold) 70%, transparent), 0 30px 80px -40px color-mix(in srgb, var(--farbe) 60%, transparent); }
  100% { box-shadow: 0 0 0 26px color-mix(in srgb, var(--wm-gold) 0%, transparent), 0 30px 80px -40px color-mix(in srgb, var(--farbe) 60%, transparent); }
}
.wm-ziffern { display: grid; grid-auto-flow: column; align-items: baseline; justify-content: center; }
.wm-ziffer {
  font-size: clamp(3.4rem, 1.5rem + 9vw, 7.5rem); font-weight: 900; letter-spacing: -.06em;
  line-height: .9; font-variant-numeric: tabular-nums; min-width: .62em; text-align: center;
}
.wm-doppelpunkt { font-size: clamp(2rem, 1rem + 5vw, 4.5rem); font-weight: 700; color: var(--muted); padding: 0 .08em; transform: translateY(-.1em); }
.wm-4m { white-space: nowrap; font-size: .8rem; font-weight: 750; color: var(--wm-gold); }
.wm-anzeige-fuss { text-align: center; color: var(--muted); font-size: .8rem; }
.wm-anzeige-fuss time { font-weight: 600; color: var(--fg); }
.wm-anzeige-fuss .wm-eigen { display: inline; margin-left: .3rem; }

.wm-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--farbe, var(--muted)) 45%, transparent);
  background: color-mix(in srgb, var(--farbe, var(--muted)) 14%, transparent);
  font-size: .74rem; font-weight: 750; letter-spacing: .01em; white-space: nowrap;
}
.wm-live {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .76rem; font-weight: 700; color: #ff6b6b; white-space: nowrap;
}
.wm-live b { font-weight: 850; letter-spacing: .12em; margin-right: -.12em; text-transform: uppercase; color: #ff4d4d; }
.wm-live b + .wm-live-phase::before { content: "·"; margin: 0 .4em 0 0; color: var(--muted); }
.wm-live i, .wm-punkt {
  width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; flex: none;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, .6); animation: wm-puls 1.6s ease-out infinite;
}
.wm-punkt { display: inline-block; margin-left: .45rem; vertical-align: middle; }
@keyframes wm-puls { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, .55); } 70% { box-shadow: 0 0 0 9px rgba(255, 59, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); } }
.wm-ende { font-size: .74rem; font-weight: 750; color: var(--muted); }

/* Tor! */
.wm-tor { animation: wm-tor 1.4s cubic-bezier(.2, .9, .3, 1); }
@keyframes wm-tor {
  0% { transform: scale(1); color: inherit; }
  18% { transform: scale(1.28); color: var(--wm-gold); text-shadow: 0 0 28px color-mix(in srgb, var(--wm-gold) 70%, transparent); }
  100% { transform: scale(1); color: inherit; }
}

/* Kleine Liste unter der Tafel */
.wm-kleinliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.wm-kleinblock { display: grid; gap: .45rem; }
.wm-klein-titel { margin-top: .5rem; font-size: .72rem; font-weight: 800; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; color: var(--muted); }
.wm-klein {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: center; gap: .8rem;
  padding: .7rem .95rem; border-radius: 16px;
  background: rgba(16, 16, 22, .72); border: 1px solid var(--wm-karte-rand);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wm-klein-liga { display: grid; font-size: .74rem; font-weight: 800; color: var(--farbe); line-height: 1.25; }
.wm-klein-liga small { color: var(--muted); font-weight: 600; font-size: .72rem; }
.wm-klein-paar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; min-width: 0; font-weight: 650; }
.wm-klein-zeit { display: grid; justify-items: end; font-variant-numeric: tabular-nums; font-weight: 700; }
.wm-klein-zeit small { color: var(--accent-2); font-weight: 700; font-size: .74rem; }
.wm-klein-zeit .wm-folgt { color: var(--muted); }
.wm-klein-stand { font-size: 1.15rem; font-weight: 850; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .wm-klein { grid-template-columns: minmax(0, 1fr) auto; }
  .wm-klein-liga { grid-column: 1 / -1; display: flex; gap: .45rem; }
  .wm-klein-paar { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .wm-klein-paar .wm-gegen { display: none; }
}

/* Weltmeister */
.wm-meister-reihe { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.wm-meister {
  padding: 1.4rem 1.3rem 1.2rem; border-radius: 26px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--farbe) 40%, var(--wm-karte-rand));
  background: radial-gradient(100% 80% at 50% 0%, color-mix(in srgb, var(--wm-gold) 16%, transparent), transparent 70%), var(--wm-karte);
}
.wm-meister-liga { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--farbe); }
.wm-meister h3 { margin-top: .6rem; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); font-weight: 900; }
.wm-meister-titel { color: var(--wm-gold); font-weight: 700; margin-top: .3rem; }
.wm-meister .wm-flagge-meister { display: block; width: 84px; height: 56px; margin: 1rem auto 0; border-radius: 10px; }
.wm-meister.wm-gefolgt { box-shadow: 0 0 0 2px color-mix(in srgb, var(--wm-gold) 60%, transparent); }
.wm-podest li.wm-gefolgt span:last-child { color: var(--wm-gold); font-weight: 800; }
.wm-podest { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; }
.wm-podest li { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--muted); font-weight: 600; }

/* ── Flaggen und Teams ────────────────────────────────────────── */
.wm-flagge {
  width: 24px; height: 16px; flex: none; border-radius: 4px; display: inline-block; vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 1px 2px rgba(0, 0, 0, .35);
  overflow: hidden;
}
svg.wm-flagge { box-shadow: none; outline: 1px solid rgba(255, 255, 255, .12); outline-offset: -1px; }
.wm-flagge-gross { width: clamp(56px, 10vw, 84px); height: clamp(37px, 6.7vw, 56px); border-radius: 10px; }
.wm-flagge-nation { width: 42px; height: 28px; border-radius: 6px; }
.wm-flagge-leer { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 4px, transparent 4px 8px); outline: 1px dashed rgba(255, 255, 255, .18); }
.wm-team { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.wm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-offen .wm-name { color: var(--muted); font-weight: 550; font-style: italic; }
.wm-vorl { opacity: .62; }
.wm-vorl .wm-name { font-style: italic; }
:lang(ja) .wm-offen .wm-name, :lang(ja) .wm-vorl .wm-name { font-style: normal; }
.wm-vorl-text { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); }
.wm-gegen { color: var(--muted); }
.wm-eigen { display: block; font-size: .72rem; color: var(--muted); font-weight: 600; }

/* Gefolgte Nation leuchtet überall auf */
.wm-gefolgt { --glanz: color-mix(in srgb, var(--wm-gold) 55%, transparent); }
.wm-team.wm-gefolgt .wm-name { color: var(--wm-gold); font-weight: 800; }

/* ── Wettbewerb wählen ────────────────────────────────────────── */
.wm-wettbewerb { scroll-margin-top: -.75rem; }
.wm-wahl-leiste {
  position: sticky; top: var(--wm-kopf, 64px); z-index: 30;
  padding: .6rem var(--wm-rand);
  padding-left: max(var(--wm-rand), env(safe-area-inset-left)); padding-right: max(var(--wm-rand), env(safe-area-inset-right));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-block: 1px solid var(--line-soft);
}
.wm-wahl {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  padding: 4px; border-radius: 16px; max-width: 620px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line-soft);
}
.wm-wahl button {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 44px; padding: .5rem .6rem; border-radius: 12px; white-space: nowrap; min-width: 0;
  background: transparent; color: var(--muted);
  font: inherit; font-size: .9rem; font-weight: 750; letter-spacing: -.01em;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.wm-wahl button:hover { color: var(--fg); }
.wm-wahl button[aria-pressed="true"] {
  color: #0b0b0f; background: var(--farbe);
  box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--farbe) 80%, transparent);
}
.wm-wahl button[aria-pressed="true"] .wm-punkt { background: #0b0b0f; animation: none; }
:lang(ja) .wm-wahl button { font-size: .82rem; padding-inline: .3rem; letter-spacing: 0; }
@media (max-width: 360px) { .wm-wahl button { font-size: .8rem; padding-inline: .25rem; } :lang(ja) .wm-wahl button { font-size: .72rem; } }

/* ── Abschnitte ───────────────────────────────────────────────── */
.wm-teil { max-width: var(--wrap); margin-inline: auto; padding: clamp(2.2rem, 6vw, 4rem) var(--pad);
  padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }
.wm-teil + .wm-teil { border-top: 1px solid var(--line-soft); }
.wm-teil-titel { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem); font-weight: 900; letter-spacing: -.045em; }
.wm-teil-titel + .wm-format { margin-top: .9rem; }
.wm-format { max-width: 62ch; color: var(--muted); font-size: clamp(1rem, .96rem + .25vw, 1.12rem); }
.wm-block { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.wm-h3 { font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--farbe, var(--muted)); margin-bottom: 1rem; }
.wm-hinweis-klein { color: var(--muted); font-size: .86rem; margin-top: .6rem; }
.wm-leise { color: var(--muted); }

/* Tabellen */
.wm-gruppen { display: grid; gap: 1rem; }
.wm-gruppen-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 490px), 1fr)); }
.wm-gruppen-1 { max-width: 720px; }
.wm-tabelle-box { border: 1px solid var(--wm-karte-rand); border-radius: 22px; background: var(--wm-karte); overflow: hidden; }
.wm-tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; table-layout: fixed; }
.wm-tabelle thead th { width: 2.5rem; }
.wm-tabelle thead th:nth-child(1) { width: 2.7rem; }
.wm-tabelle thead th:nth-child(2) { width: auto; }
.wm-tabelle thead th.wm-z3, .wm-tabelle thead th.wm-z4, .wm-tabelle thead th.wm-z5 { width: 2.1rem; }
.wm-tabelle thead th.wm-z6 { width: 3.5rem; }
.wm-tabelle thead th.wm-z7 { width: 2.9rem; }
.wm-tabelle thead th.wm-z8 { width: 3.2rem; }
.wm-tabelle caption { text-align: left; padding: 1rem 1.1rem .5rem; font-weight: 850; font-size: 1.05rem; letter-spacing: -.02em; }
.wm-tabelle caption small { margin-left: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
.wm-tabelle th, .wm-tabelle td { padding: .62rem .45rem; text-align: center; border-top: 1px solid var(--line-soft); }
.wm-tabelle thead th { border-top: 0; font-size: .72rem; font-weight: 750; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; padding-block: .35rem .5rem; }
.wm-tabelle abbr { text-decoration: none; cursor: help; }
.wm-tabelle .wm-platz { color: var(--muted); font-weight: 700; padding-left: 1rem; }
.wm-tab-team { text-align: left !important; font-weight: 700; }
.wm-tab-team-innen { display: flex; align-items: center; gap: .55rem; min-width: 0; position: relative; }
.wm-tab-team-innen .wm-punkt { position: absolute; left: 19px; top: calc(50% - 11px); margin: 0; width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--bg); }
.wm-tab-team-innen > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-tabelle thead th:nth-child(2) { text-align: left; }
.wm-tabelle .wm-z8 { padding-right: 1rem; }
.wm-tabelle .wm-z8 b { font-size: 1.02rem; }
.wm-tabelle tr.wm-gefolgt { background: color-mix(in srgb, var(--wm-gold) 9%, transparent); }
.wm-tabelle tr.wm-gefolgt .wm-tab-team span { color: var(--wm-gold); }
.wm-tabelle tr.wm-live-zeile { background: color-mix(in srgb, #ff3b3b 7%, transparent); }
@media (max-width: 560px) {
  .wm-z3, .wm-z4, .wm-z5, .wm-z7 { display: none; } .wm-tabelle th, .wm-tabelle td { padding-inline: .3rem; }
  .wm-tabelle thead th:nth-child(1) { width: 2.2rem; } .wm-tabelle .wm-platz { padding-left: .8rem; }
  .wm-tabelle thead th.wm-z6 { width: 3.2rem; } .wm-tabelle thead th.wm-z8 { width: 2.8rem; }
}

.wm-gruppenspiele { list-style: none; margin: 0; padding: .3rem 0 .4rem; border-top: 1px solid var(--line-soft); }
.wm-gruppenspiele li {
  display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) auto 10px; align-items: center; gap: .6rem;
  padding: .42rem 1.1rem; font-size: .86rem;
}
.wm-gs-zeit { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .78rem; white-space: nowrap; }
.wm-gs-live { display: flex; justify-content: center; }
.wm-gs-live .wm-punkt { margin: 0; }
.wm-gs-paar { display: flex; align-items: center; gap: .3rem .5rem; min-width: 0; flex-wrap: wrap; }
.wm-gs-team { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.wm-gs-paar .wm-flagge { width: 18px; height: 12px; border-radius: 3px; }
.wm-gs-stand { font-variant-numeric: tabular-nums; font-weight: 800; min-width: 2.6rem; text-align: right; display: inline-block; }
.wm-leer { color: var(--muted); font-weight: 500; }
.wm-gruppenspiele li.wm-gefolgt { background: color-mix(in srgb, var(--wm-gold) 7%, transparent); }
@media (max-width: 400px) {
  .wm-tab-team-innen > span { white-space: normal; overflow: visible; text-overflow: clip; -webkit-hyphens: auto; hyphens: auto; line-height: 1.15; }
}
/* nach den Grundregeln, sonst gewinnen diese */
@media (max-width: 560px) {
  .wm-gruppenspiele li { grid-template-columns: 4.2rem minmax(0, 1fr) auto 10px; padding-inline: .9rem; gap: .5rem; }
  .wm-gs-paar { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .wm-gs-paar .wm-gegen { display: none; }
}

/* Der Weg zum Titel */
.wm-baum {
  --spalt: clamp(.8rem, 2vw, 1.3rem);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(205px, 1fr); gap: var(--spalt);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: .6rem;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.wm-baum[data-stufen="1"] { grid-auto-columns: minmax(220px, 360px); }
.wm-baum:focus-visible { outline-offset: 6px; }
/* Titel oben in einer Linie, die Karten jeder Stufe mittig darunter */
.wm-stufe { display: grid; grid-template-rows: auto 1fr; gap: .8rem; scroll-snap-align: start; position: relative; min-width: 0; }
.wm-stufe-karten { display: grid; align-content: center; gap: .8rem; }
.wm-stufe-titel { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.wm-stufe + .wm-stufe::before {
  content: ""; position: absolute; left: calc(var(--spalt) / -2); top: 2rem; bottom: 0; width: 1px;
  background: linear-gradient(transparent, var(--line), transparent);
}
/* kurze Verbindungen von der Linie zu jeder Karte */
.wm-stufe + .wm-stufe .wm-karte::before {
  content: ""; position: absolute; left: calc(var(--spalt) / -2 - 1px); top: 50%; width: calc(var(--spalt) / 2); height: 1px;
  background: var(--line);
}
@media (max-width: 560px) { .wm-baum { grid-auto-columns: calc(100% - 3rem); } .wm-baum[data-stufen="1"] { grid-auto-columns: 100%; } .wm-stufe-karten { align-content: start; } }
.wm-karte {
  position: relative;
  border: 1px solid var(--wm-karte-rand); border-radius: 18px; background: var(--wm-karte);
  padding: .65rem .8rem .6rem; display: grid; gap: .25rem; min-width: 0;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.wm-karte header { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .72rem; font-weight: 700; color: var(--muted); }
.wm-karte header > span { color: var(--farbe); font-weight: 800; letter-spacing: .02em; }
.wm-karte header time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wm-karte header .wm-eigen { display: none; }
.wm-karte-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; min-height: 1.9rem; font-weight: 650; }
.wm-karte-tore { font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 850; min-width: 1.4ch; text-align: right; display: inline-block; }
.wm-karte-zeile.wm-sieger { font-weight: 800; }
.wm-karte-zeile.wm-verlierer { color: var(--muted); }
.wm-karte-zeile.wm-verlierer .wm-flagge { opacity: .6; }
.wm-karte-zeile.wm-verlierer .wm-team.wm-gefolgt .wm-name { color: color-mix(in srgb, var(--wm-gold) 70%, var(--muted)); }
.wm-karte footer { font-size: .72rem; color: var(--muted); }
.wm-karte-live { border-color: color-mix(in srgb, #ff3b3b 50%, var(--wm-karte-rand)); box-shadow: 0 0 0 1px color-mix(in srgb, #ff3b3b 30%, transparent), 0 14px 40px -24px #ff3b3b; }
.wm-karte-finale { border-color: color-mix(in srgb, var(--wm-gold) 45%, var(--wm-karte-rand));
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--wm-gold) 11%, transparent), transparent 70%), var(--wm-karte); }
.wm-karte.wm-gefolgt { border-color: color-mix(in srgb, var(--wm-gold) 65%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--wm-gold) 35%, transparent); }

/* Relegation: die Brücke zwischen Challenger und Elite */
.wm-relegation {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.3fr) minmax(250px, 1fr); align-items: center;
  padding: clamp(1rem, 3vw, 1.5rem); border-radius: 24px;
  border: 1px dashed color-mix(in srgb, var(--wm-C) 45%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--wm-C) 9%, transparent), color-mix(in srgb, var(--wm-M) 9%, transparent));
}
.wm-relegation p { color: var(--muted); max-width: 52ch; }
.wm-relegation .wm-h3 { color: var(--fg); letter-spacing: .12em; }
.wm-rel-ergebnis { margin-top: .7rem; color: var(--fg) !important; display: flex; align-items: center; gap: .45rem; }
@media (max-width: 720px) { .wm-relegation { grid-template-columns: 1fr; } }

/* Endstand */
.wm-endstand { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.wm-endstand li > span:not(.wm-end-platz):not(.wm-medaille) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-liga[data-liga="F"] .wm-endstand-folgt { max-width: 720px; }
.wm-endstand li { display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border-radius: 14px; background: var(--wm-karte); border: 1px solid var(--wm-karte-rand); font-weight: 700; }
.wm-end-platz { min-width: 2.6rem; flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.wm-endstand .wm-end-platz { min-width: 3.6rem; }
:lang(en) .wm-endstand .wm-end-platz { min-width: 4.4rem; }
.wm-endstand li[data-platz="1"] { border-color: color-mix(in srgb, var(--wm-gold) 50%, transparent); }
.wm-endstand li.wm-gefolgt { border-color: color-mix(in srgb, var(--wm-gold) 65%, transparent); background: color-mix(in srgb, var(--wm-gold) 8%, var(--wm-karte)); }
.wm-endstand li.wm-gefolgt > span:not(.wm-end-platz):not(.wm-medaille) { color: var(--wm-gold); }
.wm-endstand-folgt { padding: .9rem 1rem; border-radius: 14px; border: 1px dashed var(--line); color: var(--muted); font-size: .9rem; }
.wm-medaille { flex: none; margin-left: auto; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .18rem .5rem; border-radius: 999px; }
.wm-medaille[data-m="0"] { background: color-mix(in srgb, #ffc300 22%, transparent); color: #ffd84d; }
.wm-medaille[data-m="1"] { background: rgba(214, 220, 230, .16); color: #dfe4ec; }
.wm-medaille[data-m="2"] { background: color-mix(in srgb, #cd7f32 24%, transparent); color: #e7a467; }
.wm-podest .wm-medaille { margin-left: 0; }

/* ── Spielplan ────────────────────────────────────────────────── */
.wm-plan-werkzeug { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: space-between; margin-top: 1.4rem; }
.wm-filter { display: flex; flex-wrap: wrap; gap: .4rem; }
.wm-filter button {
  appearance: none; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 700;
  min-height: 44px; padding: .45rem .85rem; border-radius: 999px;
  color: var(--muted); background: transparent; border: 1px solid var(--line);
}
.wm-filter button:hover { color: var(--fg); border-color: rgba(255, 255, 255, .25); }
.wm-filter button[aria-pressed="true"] { color: #0b0b0f; background: var(--farbe, var(--fg)); border-color: transparent; }
.wm-filter button[data-filter="folge"][aria-pressed="true"] { background: var(--wm-gold); }
.wm-knopf-leise {
  appearance: none; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .45rem .95rem; border-radius: 999px;
  color: var(--fg); background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
}
.wm-knopf-leise:hover { background: rgba(255, 255, 255, .1); }
.wm-knopf-leise svg { width: 17px; height: 17px; }
.wm-plan-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.wm-jetzt-punkt { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; animation: wm-puls 1.6s ease-out infinite; }
.wm-blink { animation: wm-blink 1.8s ease-out; }
@keyframes wm-blink { 0%, 30% { box-shadow: 0 0 0 2px var(--wm-gold); } 100% { box-shadow: 0 0 0 2px transparent; } }

.wm-plan-tag { margin-top: 1.8rem; }
.wm-plan-tagname {
  position: sticky; top: var(--wm-kopf, 64px); z-index: 5;
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 0; font-size: 1.05rem; font-weight: 850; letter-spacing: -.02em;
  background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg), 0 1px 0 100vmax var(--line-soft);
  clip-path: inset(0 -100vmax -1px -100vmax);
}
.wm-plan-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.wm-plan-zeile, .wm-plan-feier {
  display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) auto; align-items: center; gap: .8rem;
  padding: .75rem .4rem; border-bottom: 1px solid var(--line-soft);
}
.wm-plan-zeit { font-variant-numeric: tabular-nums; font-weight: 750; min-width: 0; }
.wm-plan-zeit time { white-space: nowrap; }
.wm-plan-zeit .wm-eigen { white-space: normal; line-height: 1.25; margin-top: .1rem; }
.wm-plan-mitte { display: grid; gap: .25rem; min-width: 0; }
.wm-plan-paar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-weight: 650; min-width: 0; }
.wm-plan-paar .wm-sieger { font-weight: 850; }
.wm-plan-runde { color: var(--muted); font-size: .76rem; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .35rem; }
.wm-plan-runde span { white-space: nowrap; }
.wm-plan-runde i { width: 8px; height: 8px; border-radius: 3px; background: var(--farbe); flex: none; }
.wm-plan-stand { display: grid; justify-items: end; gap: .2rem; font-variant-numeric: tabular-nums; }
.wm-plan-stand > b { font-size: 1.12rem; font-weight: 850; display: inline-block; }
.wm-plan-feier { color: var(--muted); font-size: .88rem; }
.wm-plan-feier .wm-plan-mitte { grid-column: 2 / -1; display: flex; align-items: center; gap: .5rem; }
.wm-plan-feier .wm-plan-mitte::before { content: "★"; color: var(--wm-gold); }
.wm-plan-zeile.wm-gefolgt { background: linear-gradient(90deg, color-mix(in srgb, var(--wm-gold) 10%, transparent), transparent 70%); border-radius: 12px; }
.wm-plan-zeile.wm-live-zeile { background: linear-gradient(90deg, color-mix(in srgb, #ff3b3b 12%, transparent), transparent 70%); border-radius: 12px; }
.wm-plan-zeile.wm-fertig .wm-plan-paar > span:not(.wm-sieger):not(.wm-gegen) { opacity: .7; }
.wm-leerhinweis { margin-top: 1.5rem; color: var(--muted); }
@media (max-width: 560px) {
  .wm-plan-zeile, .wm-plan-feier { grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .6rem; }
  .wm-eigenzone .wm-plan-zeile, .wm-eigenzone .wm-plan-feier { grid-template-columns: 4.4rem minmax(0, 1fr) auto; }
  .wm-plan-paar { flex-direction: column; align-items: flex-start; gap: .25rem; }
  /* am Handy unter dem Stand nur Punkt und Spielphase */
  .wm-plan-stand .wm-live b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .wm-plan-stand .wm-live-phase::before { content: none !important; }
  .wm-plan-paar .wm-gegen { display: none; }
}

/* ── Nationen ─────────────────────────────────────────────────── */
.wm-nationen { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: 1.4rem; }
.wm-nation { border: 1px solid var(--wm-karte-rand); border-radius: 22px; background: var(--wm-karte); padding: 1rem 1.05rem 1.05rem; display: grid; gap: .8rem; align-content: start; }
.wm-nation header { display: flex; align-items: center; gap: .7rem; }
.wm-nation h3 { font-size: 1.15rem; font-weight: 850; letter-spacing: -.02em; flex: 1; min-width: 0; }
.wm-nation.wm-gefolgt { border-color: color-mix(in srgb, var(--wm-gold) 60%, transparent); background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--wm-gold) 10%, transparent), transparent 60%), var(--wm-karte); }
.wm-folgen {
  appearance: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; padding: .35rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 750;
  color: var(--muted); background: transparent; border: 1px solid var(--line);
}
.wm-folgen:hover { color: var(--fg); }
.wm-folgen[aria-pressed="true"] { color: #0b0b0f; background: var(--wm-gold); border-color: transparent; }
.wm-nation-liga { display: grid; gap: .35rem; padding-top: .7rem; border-top: 1px solid var(--line-soft); }
.wm-nation-liga p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wm-nation-liga small { color: var(--muted); font-size: .76rem; }
.wm-kader { font-weight: 650; font-size: .95rem; }
.wm-kader small { display: block; color: var(--muted); font-weight: 500; font-size: .78rem; margin-top: .15rem; }
.wm-kader.wm-leer { color: var(--muted); font-weight: 500; font-style: italic; font-size: .88rem; }

/* ── Infos und FAQ ────────────────────────────────────────────── */
.wm-fakten { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 20px; overflow: hidden; }
.wm-fakten li { background: var(--bg); padding: 1.1rem 1.2rem; display: grid; gap: .2rem; }
.wm-fakten strong { font-size: 1.25rem; font-weight: 850; letter-spacing: -.02em; }
.wm-fakten span { color: var(--muted); font-size: .86rem; }
.wm-fakten a { color: var(--accent-2); }
.wm-status { margin-top: 1.4rem; font-size: .8rem; color: var(--muted); }
.wm-status.wm-warnung { color: var(--accent-2); }

:lang(ja) .wm-name, :lang(ja) .wm-chip, :lang(ja) .wm-h3, :lang(ja) .wm-stufe-titel { word-break: keep-all; line-break: strict; }
@supports (word-break: auto-phrase) { :lang(ja) .wm-name, :lang(ja) .wm-unterzeile, :lang(ja) .wm-format { word-break: auto-phrase; } }

@media (prefers-reduced-motion: reduce) {
  .wm-tor, .wm-tor-ring, .wm-blink, .wm-live i, .wm-punkt, .wm-jetzt-punkt, .wm-skelett { animation: none !important; }
  .wm-wahl button, .wm-karte { transition: none; }
}

/* Probelauf (?probe) — unübersehbar, damit niemand Übungsstände für echt hält */
.wm-probe { position: relative; z-index: 40; margin: 0; padding: .55rem var(--pad); text-align: center;
  background: repeating-linear-gradient(135deg, #ffc300 0 14px, #ffd84d 14px 28px); color: #0b0b0f; font-weight: 800; font-size: .86rem; }
.wm-ansage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wm-medaille, .wm-end-platz { white-space: nowrap; }