/* ============================================================
   TORLYTICS — Main Stylesheet v3
   Premium dark theme: Deep Navy · Slate · Green accent
   Mobile-first · Inter (selbst gehostet, SIL OFL — siehe
   assets/fonts/LICENSE-Inter-OFL.txt). Kein Google-Fonts-Request:
   kein externer Aufruf pro Seitenaufruf, kein DSGVO-Risiko
   (LG München I, 3 O 17493/20), kein Layout-Flackern.
   ============================================================ */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/inter-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/inter-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* -- Custom Properties ---------------------------------------- */
:root {
  /* Backgrounds */
  --color-bg:           #07090f;
  --color-bg-secondary: #0c1220;
  --color-bg-card:      #0e1422;
  --color-bg-hover:     #131d2e;
  --color-bg-elevated:  #111928;

  /* Borders */
  --color-border:       #182336;
  --color-border-muted: #101c2c;

  /* Text */
  --color-text:         #dfe8f3;
  --color-text-muted:   #7d92a6;  /* 6.2:1 auf dem Hintergrund (WCAG AA) */
  --color-text-subtle:  #374a60;

  /* ── Farbrollen (Design-System v3) ────────────────────────────
     Farbe hat Bedeutung. Drei Rollen, sonst nichts:
       --accent  nur Interaktion: aktiver Tab, Primär-Button, Fokusring
       --pos/--neg nur Semantik: Sieg/Niederlage, +/- Tordifferenz,
                 Auf-/Abstiegszonen, Formbadges, Karten
       --gold    nur Meister, Trophäen, Rang 1
     Vereins-/Spielernamen, Torzahlen, Punkte sind Textfarbe. */
  --accent:       #2ea043;
  --accent-hover: #3fb950;
  --accent-glow:  rgba(46,160,67,.18);
  --pos:          #2ea043;
  --neg:          #e05252;
  --gold:         #d9a01d;
  --info:         #3b82f6;

  /* Alte Namen bleiben als Aliase gültig — jede Stelle, die sie nutzt,
     ist damit einer Rolle zugeordnet. */
  --color-accent:       var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-glow:  var(--accent-glow);
  --color-green:        var(--pos);
  --color-red:          var(--neg);
  --color-yellow:       var(--gold);
  --color-blue:         var(--info);
  --color-accent-red:    var(--neg);
  --color-accent-yellow: var(--gold);
  --color-accent-blue:   var(--info);

  /* Typografie-Skala: fünf Größen für alles außer Display-Zahlen */
  --fs-xs: 0.6875rem;  /* 11px  Labels, Kicker, Tabellenköpfe */
  --fs-sm: 0.8125rem;  /* 13px  Tabellen, Meta */
  --fs-md: 0.9375rem;  /* 15px  Fließtext */
  --fs-lg: 1.25rem;    /* 20px  H2, Kartentitel */
  --fs-xl: 1.75rem;    /* 28px  H1 */

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  22px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.6);
  --shadow-md: 0 4px 20px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.5);

  --transition: 0.14s ease;

  --container-max: 1280px;
  --container-pad: 1rem;
}

/* -- Icon System -----------------------------------------------
   Inline SVGs from IconHelper, replacing emoji icons everywhere.
   All icons share one line-icon style (stroke-based, currentColor)
   so they read as one deliberate set instead of scattered symbols. */
.icon { width: 18px; height: 18px; flex-shrink: 0; }
.icon--gold   { color: var(--color-yellow); }
.icon--silver { color: #b8c4d1; }
.icon--bronze { color: #c8792f; }

/* -- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* -- Body + Background ---------------------------------------- */
body {
  background-color: var(--color-bg);
  /* Subtle green radial glow at top + blue accent bottom-left */
  background-image:
    radial-gradient(ellipse 120% 45% at 50% -2%, rgba(46,160,67,.07) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(59,130,246,.04) 0%, transparent 60%);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.6;
  min-height: 100vh;
}

/* Ultra-subtle dot grid overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 0;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* -- Layout --------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  position: relative;
  z-index: 1;
}

/* -- Typography ----------------------------------------------- */
h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h3 { font-size: var(--fs-lg); }

.stats-subheading {
  margin: 1.5rem 0 0.75rem;
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.stats-subheading__link {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--color-accent-glow);
  white-space: nowrap;
}
.stats-subheading__link:hover { border-color: var(--color-accent); }
.text-muted  { color: var(--color-text-muted); }
.text-green  { color: var(--color-accent); }
.text-red    { color: var(--color-red); }
.font-bold   { font-weight: 700; }
.text-center { text-align: center; }

/* -- Site Header ---------------------------------------------- */
.site-header {
  background: rgba(7,9,15,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 58px;
}

/* Logo */
.site-header__logo {
  color: var(--color-text);
  font-size: var(--fs-lg);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-decoration: none;
  flex-shrink: 0;
}
.site-header__logo:hover { text-decoration: none; color: var(--color-text); }
.site-header__logo strong {
  color: var(--color-accent);
  font-weight: 900;
}

/* Desktop nav */
.site-nav { display: flex; gap: 0.125rem; }
.site-nav__link {
  color: var(--color-text-muted);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: 500;
  transition: color var(--transition), background var(--transition);
  text-decoration: none;
}
.site-nav__link:hover {
  color: var(--color-text);
  background: rgba(255,255,255,.06);
  text-decoration: none;
}
.site-nav__link.is-active {
  color: var(--color-accent);
  background: rgba(46,160,67,.12);
  text-decoration: none;
}

.site-header__search { margin-left: auto; position: relative; }

/* -- League Quick Nav ----------------------------------------- */
.league-nav {
  background: rgba(7,9,15,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-muted);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: 58px;
  z-index: 99;
}
.league-nav::-webkit-scrollbar { display: none; }

.league-nav__inner {
  display: flex;
  gap: 0.125rem;
  white-space: nowrap;
  padding: 0.375rem 0;
}

.league-nav__link {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0.35rem 0.875rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  text-decoration: none;
}
.league-nav__link:hover {
  color: var(--color-text);
  background: rgba(255,255,255,.06);
  text-decoration: none;
}
.league-nav__link.is-active {
  color: var(--color-accent);
  background: rgba(46,160,67,.12);
  font-weight: 600;
  text-decoration: none;
}
.league-nav__logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 0.4rem;
  /* Ruhig im Grundzustand: fünf bunte Mini-Logos nebeneinander wirken wie
     Emojis und ziehen den Blick von den Inhalten. Farbe erst bei Hover/aktiv. */
  filter: grayscale(1) brightness(1.35);
  opacity: .7;
  transition: filter var(--transition), opacity var(--transition);
}
.league-nav__link:hover .league-nav__logo,
.league-nav__link.is-active .league-nav__logo {
  filter: none;
  opacity: 1;
}

/* -- Main Content --------------------------------------------- */
.site-main {
  padding-block: 2rem;
  position: relative;
  z-index: 1;
}

/* -- Section -------------------------------------------------- */
.section { margin-bottom: 2.5rem; }
.section__title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.section__subtitle {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  margin: -0.5rem 0 1rem;
}

/* -- Data Tables ---------------------------------------------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

.data-table thead th {
  background: rgba(12,18,32,.9);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.625rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--color-border-muted);
  transition: background var(--transition);
}
.data-table tbody tr:hover { background: var(--color-bg-hover); }
.data-table td { padding: 0.625rem 0.75rem; vertical-align: middle; }

/* -- Tabs — Pill Style ---------------------------------------- */
.tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.45rem 0.875rem;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-sans);
}
.tab:hover { color: var(--color-text); background: rgba(255,255,255,.06); }
.tab--active {
  background: var(--color-accent);
  color: #fff;
}
.tab--active:hover { background: var(--color-accent-hover); color: #fff; }

.tab-panel    { display: none; }
.tab-panel--active { display: block; }

/* -- Fixture Cards -------------------------------------------- */
.fixture-list { display: flex; flex-direction: column; gap: 0.5rem; }

.fixture-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.fixture-card:hover {
  background: var(--color-bg-hover);
  border-color: rgba(46,160,67,.35);
  text-decoration: none;
  color: var(--color-text);
  transform: translateY(-1px);
}

.fixture-card__league {
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fixture-card__team--home { text-align: right; font-weight: 600; }
.fixture-card__team--away { text-align: left; font-weight: 600; }

.fixture-card__score {
  text-align: center;
  font-weight: 800;
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  white-space: nowrap;
}

/* -- League Grid (index) -------------------------------------- */
.league-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
}

.league-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--color-text);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.league-card:hover {
  background: var(--color-bg-hover);
  border-color: rgba(46,160,67,.35);
  text-decoration: none;
  transform: translateY(-2px);
}
.league-card__logo { width: 48px; height: 48px; margin: 0 auto 0.5rem; }
.league-card__name { font-size: var(--fs-sm); font-weight: 600; text-transform: capitalize; }

/* -- Page Header ---------------------------------------------- */
.page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-header__logo  { width: 56px; height: 56px; }
.page-header__title { font-size: clamp(1.5rem, 3vw, 2rem); }
.page-header__season { color: var(--color-text-muted); font-size: var(--fs-md); }

/* -- Club/Player Headers -------------------------------------- */
.club-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.5rem 0 1.5rem;
}

.club-header__snapshot {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-left: auto;
  padding: 0.875rem 1.25rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.snap-stat { text-align: center; }
.snap-stat span { display: block; font-size: var(--fs-lg); font-weight: 700; }
.snap-stat small { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.snap-form { display: flex; align-items: center; }
.club-header__meta { font-size: var(--fs-md); color: var(--color-text-muted); margin: 0.2rem 0; }

.club-header__logo { width: 80px; height: 80px; object-fit: contain; flex-shrink: 0; }
.club-header__name { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; }
.club-header__league { font-size: var(--fs-md); color: var(--color-accent); display: block; margin-top: 0.25rem; }
.club-header__coach  { font-size: var(--fs-md); color: var(--color-text-muted); margin-top: 0.25rem; }
.club-header__compare-btn { display: inline-block; margin-top: 0.6rem; }

/* -- Player Header -------------------------------------------- */
.player-header-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.player-header-row .player-header { flex: 1 1 380px; padding: 1.5rem 0; }
.player-header-row .radar-chart {
  flex: 0 0 320px;
  max-width: 320px;
  margin: 1.5rem 0 0;
}
@media (max-width: 860px) {
  .player-header-row .radar-chart { flex-basis: 100%; max-width: 420px; margin: 0 auto; }
}
.player-header {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  flex-wrap: wrap;
}
.player-header__photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}
.player-header__photo--placeholder {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}
.player-header__info { flex: 1; min-width: 200px; }
.player-header__top { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.player-header__name { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.player-header__real-name {
  flex-basis: 100%;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: -0.35rem;
}
.player-header__club {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-md); color: var(--color-text-muted);
  text-decoration: none; margin-bottom: 0.75rem;
}
.player-header__club:hover { color: var(--color-accent); }
.player-header__league { color: var(--color-text-muted); font-size: var(--fs-sm); }
.player-header__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin-top: 0.5rem;
  font-size: var(--fs-md);
}
.player-header__meta dt { color: var(--color-text-muted); }
.player-header__club-name { font-weight: 500; }

.player-bio-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  font-size: var(--fs-sm);
  margin: 0.75rem 0 1rem;
}
.player-bio-grid dt { color: var(--color-text-muted); }
.player-bio-grid dd { font-weight: 500; }
.bio-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--color-text-muted);
  transition: color 0.15s, border-color 0.15s;
}
.bio-link:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* -- Stat Highlights (player page) --------------------------- */
.stat-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.stat-highlight {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
  transition: border-color var(--transition), transform var(--transition);
}
.stat-highlight:hover {
  border-color: var(--color-accent-glow);
  transform: translateY(-1px);
}
.stat-highlight__value {
  display: block;
  font-size: clamp(1.15rem, 4.5vw, 1.75rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.stat-highlight__value--zero {
  color: var(--color-text-muted);
  opacity: 0.6;
}
.stat-highlight__label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.25rem;
}

/* -- Percentile Bars (player page) ------------------------------
   NOTE: this component existed in the PHP markup with zero CSS behind
   it for a long time — it rendered as an unstyled, stacked text list.
   This is the fix. */
.percentile-section {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem 1.5rem;
  margin-bottom: 2rem;
}
.percentile-section__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1.1rem;
}
.percentile-section__season { color: var(--color-text-muted); font-weight: 400; }
.percentile-bars {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.percentile-bar {
  display: grid;
  grid-template-columns: 150px 1fr 90px;
  align-items: center;
  gap: 0.875rem;
}
.percentile-bar__label {
  font-size: var(--fs-sm);
  color: var(--color-text);
  font-weight: 500;
}
.percentile-bar__track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--color-bg-elevated);
  overflow: hidden;
}
.percentile-bar__fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(.4,0,.2,1);
}
.percentile-bar__fill--high { background: var(--color-accent); }
.percentile-bar__fill--mid  { background: var(--color-yellow); }
.percentile-bar__fill--low  { background: var(--color-red); }
.percentile-bar__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.percentile-bar__pct { font-weight: 700; color: var(--color-text); }

@media (max-width: 640px) {
  .percentile-bar { grid-template-columns: 96px 1fr 66px; gap: 0.5rem; }
  .percentile-bar__label { font-size: var(--fs-xs); }
  .percentile-bar__meta { font-size: var(--fs-xs); }
}

/* -- Stat Hero (rating badge + highlight tiles) ---------------- */
.stat-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.stat-hero .stat-highlights { flex: 1; margin-bottom: 0; min-width: 260px; }

.rating-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 3px solid;
  flex-shrink: 0;
  background: var(--color-bg-card);
}
.rating-badge__value { font-size: var(--fs-xl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rating-badge__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; margin-top: 1px; }
.rating-badge--elite   { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 0 4px rgba(46,160,67,.08); }
.rating-badge--good    { border-color: var(--color-yellow); color: var(--color-yellow); box-shadow: 0 0 0 4px rgba(217,160,29,.08); }
.rating-badge--average { border-color: var(--color-text-muted); color: var(--color-text); box-shadow: 0 0 0 4px rgba(94,115,136,.08); }

@media (max-width: 640px) {
  .stat-hero { gap: 1rem; }
  .rating-badge { width: 68px; height: 68px; }
  .rating-badge__value { font-size: var(--fs-lg); }
}

/* -- Similar Players --------------------------------------------
   Statistisches Ähnlichkeitsprofil (z-normalisierte Distanz über
   mehrere Per-90-/Quoten-Kennzahlen) statt einer simplen "gleiche
   Liga"-Liste. */
.similar-players {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.similar-player-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition);
}
.similar-player-card:hover { border-color: var(--color-accent); }
.similar-player-card__photo-link { flex-shrink: 0; display: flex; }
.similar-player-card__photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.similar-player-card__photo--placeholder { background: var(--color-bg-elevated); }
.similar-player-card__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.similar-player-card__name {
  font-weight: 600; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none; color: var(--color-text);
}
.similar-player-card__name:hover { text-decoration: underline; }
.similar-player-card__team {
  display: flex; align-items: center; gap: 0.35rem; font-size: var(--fs-sm); color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; width: fit-content;
}
.similar-player-card__team:hover { color: var(--color-text); text-decoration: underline; }
.similar-player-card__icon { color: var(--color-text-subtle); flex-shrink: 0; }
.similar-player-card__icon .icon { width: 16px; height: 16px; }

/* -- Stat Dashboard (extended stats, categorized) --------------- */
.stat-dash {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 0.25rem;
}
.stat-dash-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  transition: border-color var(--transition), transform var(--transition);
}
.stat-dash-card:hover { border-color: rgba(255,255,255,.12); transform: translateY(-1px); }
.stat-dash-card__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border-muted);
}
.stat-dash-card__icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-md);
  flex-shrink: 0;
}
.stat-dash-card__icon--accent { background: rgba(46,160,67,.12); color: var(--color-accent); }
.stat-dash-card__icon--blue   { background: rgba(59,130,246,.12); color: var(--color-blue); }
.stat-dash-card__icon--yellow { background: rgba(217,160,29,.12); color: var(--color-yellow); }
.stat-dash-card__icon--red    { background: rgba(224,82,82,.12); color: var(--color-red); }
.stat-dash-card__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.stat-dash-row { margin-bottom: 0.85rem; }
.stat-dash-row:last-child { margin-bottom: 0; }
.stat-dash-row__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  margin-bottom: 0.3rem;
}
.stat-dash-row__label { color: var(--color-text-muted); }
.stat-dash-row__value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); white-space: nowrap; }
.stat-dash-bar {
  position: relative;
  height: 6px;
  border-radius: 4px;
  background: var(--color-bg-elevated);
}
.stat-dash-bar__fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.stat-dash-bar__avg {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 10px;
  background: var(--color-text-muted);
  transform: translateX(-1px);
}

/* Trend-Pfeil + Vorsaison-Wert neben Werten in "Erweiterte Statistiken" */
.stat-trend {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 0.35rem;
}
.stat-trend__prev { font-variant-numeric: tabular-nums; }
.stat-dash-bar__fill--accent { background: var(--color-accent); }

/* Karriere-Sparkline (Tabellen-Fußzeile) */
.sparkline { display: block; vertical-align: middle; }
.stat-dash-bar__fill--blue   { background: var(--color-blue); }
.stat-dash-bar__fill--yellow { background: var(--color-yellow); }
.stat-dash-bar__fill--red    { background: var(--color-red); }

/* -- Radar Chart Container ------------------------------------ */
.radar-chart, .radar-compare {
  max-width: 420px;
  margin: 0 auto 2rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.radar-chart__label {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

/* -- Compare Grid --------------------------------------------- */
.compare-form {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.compare-form__vs { font-weight: 700; color: var(--color-text-muted); }

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 140px 1fr;
  gap: 0.375rem 0;
  align-items: center;
  margin-bottom: 2rem;
}

.compare-player {
  text-align: center;
  padding: 1rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.compare-player h2 { font-size: var(--fs-lg); }
.compare-player p  { color: var(--color-text-muted); font-size: var(--fs-md); }

.compare-label {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.375rem 0.5rem;
}

.compare-stat {
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.compare-stat--a { text-align: right; }
.compare-stat--b { text-align: left; }
.compare-stat--winner { color: var(--color-accent); background: rgba(46,160,67,.1); }

/* -- Form Badges ---------------------------------------------- */
.form-badges { display: inline-flex; gap: 3px; }
.form-badge {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: #fff;
}
.form-badge--win   { background: var(--color-accent); }
.form-badge--draw  { background: var(--color-yellow); color: #000; }
.form-badge--loss  { background: var(--color-red); }

/* -- Position Badge ------------------------------------------- */
.position-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.position-badge--gk  { background: rgba(110,64,201,.2); color: #a78bfa; }
.position-badge--def { background: rgba(59,130,246,.15); color: #60a5fa; }
.position-badge--mid { background: rgba(217,160,29,.15); color: #d9a01d; }
.position-badge--fwd { background: rgba(224,82,82,.15); color: #f87171; }

/* -- Transfer Badge ------------------------------------------- */
.transfer-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  text-transform: uppercase;
}
.transfer-badge--permanent { background: rgba(46,160,67,.15); color: var(--color-accent); border: 1px solid rgba(46,160,67,.3); }
.transfer-badge--loan      { background: rgba(59,130,246,.12); color: var(--color-blue); border: 1px solid rgba(59,130,246,.3); }
.transfer-badge--free      { background: rgba(255,255,255,.05); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* -- Filter Bar ----------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}

.filter-btn {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0.35rem 0.875rem;
  border-radius: 99px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.filter-btn:hover {
  color: var(--color-text);
  border-color: rgba(46,160,67,.4);
  background: rgba(46,160,67,.07);
  text-decoration: none;
}
.filter-btn--active {
  color: var(--color-accent);
  border-color: rgba(46,160,67,.5);
  background: rgba(46,160,67,.1);
}

/* -- Search Input --------------------------------------------- */
.search-input {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--fs-md);
  font-family: var(--font-sans);
  padding: 0.5rem 0.875rem;
  width: 240px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}
.search-input::placeholder { color: var(--color-text-subtle); }
.search-input--full { width: 100%; }

.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 320px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 200;
}

.search-result {
  display: flex;
  flex-direction: column;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-border-muted);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition);
}
.search-result:last-child { border-bottom: none; }
.search-result:hover, .search-result--active { background: var(--color-bg-hover); }
.search-result__name { font-weight: 600; font-size: var(--fs-md); }
.search-result__sub  { font-size: var(--fs-sm); color: var(--color-text-muted); }

.search-result__type {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}
.search-result__type--player { background: rgba(46,160,67,.12); color: var(--color-accent); }
.search-result__type--team   { background: rgba(59,130,246,.12); color: #60a5fa; }
.search-result__type--league { background: rgba(167,139,250,.1); color: #a78bfa; }

/* -- Buttons -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--fs-md);
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  font-family: var(--font-sans);
}
.btn--primary   { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--color-accent-hover); text-decoration: none; color: #fff; }
.btn--secondary { background: var(--color-bg-card); border: 1px solid var(--color-border); color: var(--color-text); }
.btn--secondary:hover { background: var(--color-bg-hover); border-color: rgba(46,160,67,.35); text-decoration: none; color: var(--color-text); }
.btn--sm { padding: 0.35rem 0.875rem; font-size: var(--fs-sm); }

/* -- Date Nav (Geburtstage-Seite) ------------------------------ */
.date-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.date-nav__input {
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text);
}

/* -- Pagination ------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0;
}
.pagination__info { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* -- Search Hero (homepage top section) ----------------------- */
.search-hero {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
  text-align: center;
}
/* Dropdown shares search-result styles from the header search */
.search-hero__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0; right: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  z-index: 200;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

/* -- Tabellen Widget (homepage standings) --------------------- */
.section--tabellen { padding-bottom: 0; }
.tabellen-tabs { margin: 0; }
.tab-league-logo { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
span.logo--fallback.tab-league-logo { width: 14px; height: 14px; }

.tabellen-panel--hidden { display: none; }

/* Standings table */
.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.standings-table thead th {
  padding: 0.375rem 0.5rem;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.standings-table thead .standings-table__team { text-align: left; }

.standings-table__row td {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid rgba(24,35,54,.6);
  vertical-align: middle;
}
.standings-table__row:last-child td { border-bottom: none; }
.standings-table__row:hover td     { background: var(--color-bg-hover); }

.standings-table__pos {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  width: 2rem;
}
.standings-table__team { min-width: 140px; }
.standings-table__club-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
}
.standings-table__club-link:hover { color: var(--color-accent); }
.standings-table__logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
span.logo--fallback.standings-table__logo { width: 18px; height: 18px; }

.standings-table__num {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  width: 2.5rem;
}
.standings-table__diff { color: var(--color-text); }
.standings-table__pts  { font-weight: 700; color: var(--color-text); }

/* Separator row between top 5 and relegation zone */
.standings-table__separator td {
  padding: 0.25rem 0.5rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.standings-table__separator span {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
/* Relegation rows — subtle red left border */
.standings-table__row--rel td:first-child {
  border-left: 2px solid rgba(248,81,73,.6);
  color: rgba(248,81,73,.9);
}
/* Mittlere Reihen (weder Top5 noch Abstiegszone) — per Default ausgeblendet,
   werden per JS ueber den "Alle Teams anzeigen"-Button eingeblendet. */
.standings-table__row--mid { display: none; }

.tabellen-expand-btn {
  display: block;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color var(--transition);
  font-family: var(--font-sans);
}
.tabellen-expand-btn:hover,
.tabellen-expand-btn--active { color: var(--color-accent); }

@media (max-width: 600px) {
  .standings-table__num { width: 2rem; }
  .standings-table thead .standings-table__diff,
  .standings-table .standings-table__diff { display: none; } /* hide diff on mobile */
}

/* -- Season fallback note (per-panel, below table) ----------- */
.standings-season-note {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: right;
  padding: 0.4rem 0.5rem 0;
  margin: 0;
}

/* -- Season fallback badge ------------------------------------ */
.season-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-left: 0.5rem;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* -- Torschützenkönig Widget ---------------------------------- */
.section--scorers { padding-bottom: 0; }
.scorers-panel--hidden { display: none; }

.scorers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.scorers-table thead th {
  padding: 0.375rem 0.5rem;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.scorers-table thead .scorers-table__player { text-align: left; }

.scorers-table__row td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid rgba(24,35,54,.6);
  vertical-align: middle;
}
.scorers-table__row:last-child td { border-bottom: none; }
.scorers-table__row:hover td      { background: var(--color-bg-hover); }

.scorers-table__rank {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  width: 2rem;
}
.scorers-table__player { min-width: 160px; }

.scorers-table__player-link {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
}
.scorers-table__player-link:hover .scorers-table__name { color: var(--color-accent); }

.scorers-table__club {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  margin-top: 0.1rem;
}
.scorers-table__club:hover { color: var(--color-accent); }
.scorers-table__club-logo  { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
span.logo--fallback.scorers-table__club-logo { width: 14px; height: 14px; }

.scorers-table__num {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  width: 3rem;
}
/* Goals column — highlighted green */
.scorers-table__goals {
  font-weight: 800;
  font-size: var(--fs-md);
  color: var(--color-accent);
}

/* -- Hero Section (legacy, not used on index) ----------------- */
.hero {
  text-align: center;
  padding: 3rem 1rem;
  margin-bottom: 2rem;
}

/* -- Heute Dashboard (homepage hero) -------------------------- */
.hero-heute {
  padding: 1.75rem 0 2rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
}

/* Header: "Heute" title + date on the same line */
.heute-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

/* Responsive grid of league cards */
.heute-leagues {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0.875rem;
}

/* Individual league card */
.heute-league {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Match row within a league card */
.heute-match {
  display: grid;
  grid-template-columns: 1fr 5rem 1fr 3rem;
  align-items: center;
  gap: 0.375rem;
  padding: 0.55rem 0.875rem;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}

/* Live accent */
.heute-match--live            { background: rgba(46,160,67,.05); }

/* Finished — slightly dimmed */
.heute-match--done .heute-match__goals { color: var(--color-text-muted); }

/* Team name + logo — jetzt eigenständige Links zum Club (statt Teil der
   Zeilen-Fläche), damit Vereinsname/Logo überall anklickbar sind. */
.heute-match__team {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

/* Score / kick-off time — eigener Link zum Spiel */
.heute-match__score {
  display: flex;
  justify-content: center;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

/* State badge: ET / HZ / 67' / Abg. */
.heute-match__state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-decoration: none;
}

/* Empty state (no games today) */
.heute-empty {
  padding: 2.5rem 0;
  text-align: center;
}

/* Mobile: collapse to full-width single column */
@media (max-width: 600px) {
  .heute-leagues { grid-template-columns: 1fr; }
  .heute-match   { grid-template-columns: 1fr 4rem 1fr 2.5rem; font-size: var(--fs-sm); }
  .heute-match__logo { width: 14px; height: 14px; }
  .heute-header__title { font-size: var(--fs-xl); }
}

/* -- Match Header --------------------------------------------- */
.match-header {
  text-align: center;
  padding: 1.5rem 0 2rem;
}
.match-header__league {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.match-header__league:hover { color: var(--color-accent); }
.match-header__date {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  margin: 0.25rem 0 1.5rem;
}
.match-header__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.match-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-text);
}
.match-team:hover .match-team__name { color: var(--color-accent); }
.match-team__logo { width: 72px; height: 72px; object-fit: contain; }
.match-team__name { font-size: var(--fs-lg); font-weight: 700; text-align: center; }
.match-team__pos  { font-size: var(--fs-sm); color: var(--color-text-muted); }

.match-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.match-score__value {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.match-score__vs  { font-size: var(--fs-xl); font-weight: 700; color: var(--color-text-muted); }
.match-score__time { font-size: var(--fs-md); color: var(--color-text-muted); }
.match-score__state {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

/* Form strips on match header */
.match-header__forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.match-form { display: flex; align-items: center; gap: 0.5rem; }
.match-form--home { justify-content: flex-end; }
.match-form--away { justify-content: flex-start; }
.form-label { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* Torschützen-Kurzliste unter dem Teamnamen im Match-Header */
.match-team__scorers {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  max-width: 220px;
  line-height: 1.35;
}

/* Halbzeitstand + xG unter dem Endstand */
.match-score__ht, .match-score__xg {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* Trainer-Zeile */
.match-coaches {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  font-size: var(--fs-md);
  color: var(--color-text-muted);
}
.match-coaches__side { color: var(--color-text); font-weight: 600; }
.match-coaches__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* Stadion-Zeile */
.match-venue {
  text-align: center;
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}

/* Team-Vergleich: hebt beide Zeilen (Heim/Auswärts) leicht hervor */
.match-compare .standings-table tbody tr { background: var(--color-bg-card); }

/* Spielstatistik-Balken (Gelbe Karten / Rote Karten / Wechsel) */
.match-stat-row {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.match-stat-row__value { font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.match-stat-row__label {
  display: block;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.match-stat-row__track {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--color-border);
}
.match-stat-row__fill--home { background: var(--color-accent); }
.match-stat-row__fill--away { background: var(--color-blue); }

/* Formations-Label neben dem Team-Namen im Aufstellungs-Tab */
.lineup-col__formation {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  padding: 0.1rem 0.4rem;
  vertical-align: middle;
}

/* Aufstellungs-Listen (Startelf/Bank) — vorher komplett unstyled (Standard-
   Browser-<ol>/<li>, keinerlei Abstand oder Layout). */
.lineup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}
.lineup-grid--bench-only { margin-top: 0.75rem; }
.lineup-col__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.lineup-section__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0.75rem 0 0.4rem;
}
.lineup-grid--bench-only .lineup-section__label:first-child { margin-top: 0; }
.lineup-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.lineup-entry {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border-muted);
  font-size: var(--fs-md);
}
.lineup-entry:last-child { border-bottom: none; }
.lineup-entry__number {
  flex-shrink: 0;
  width: 1.6rem;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}
.lineup-entry__name { color: var(--color-text); text-decoration: none; }
.lineup-entry__name:hover { color: var(--color-accent); }
.lineup-entry--captain .lineup-entry__name { font-weight: 700; }
.lineup-entry__captain { color: var(--color-accent); font-size: var(--fs-xs); font-weight: 700; margin-left: 0.2rem; }
.lineup-list--bench .lineup-entry__name { color: var(--color-text-muted); }
@media (max-width: 640px) {
  .lineup-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* H2H-Bilanz-Zusammenfassung — Team-Crest links/rechts, Siege/Unentschieden
   mittig, als eigene Karte statt unstyled Rohtext (vorher: keinerlei CSS fuer
   .h2h-team/.h2h-stats/.h2h-goals-bar vorhanden). */
.h2h-summary {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.h2h-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.h2h-team--right { align-items: center; }
.h2h-team__logo { width: 56px; height: 56px; object-fit: contain; }
.h2h-team__name {
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-md);
}
.h2h-team__name:hover { color: var(--color-accent); text-decoration: underline; }

.h2h-stats { display: flex; align-items: center; gap: 1.5rem; }
.h2h-stat { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 4.5rem; }
.h2h-stat__num { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--color-text); }
.h2h-stat__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Tore-/Bilanz-Balken */
.h2h-goals-bar {
  display: flex;
  height: 1.75rem;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.h2h-goals-bar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #fff;
  min-width: 0;
}
.h2h-goals-bar__seg--a { background: var(--color-green); }
.h2h-goals-bar__seg--d { background: var(--color-text-muted); }
.h2h-goals-bar__seg--b { background: var(--color-red); }
.h2h-goals-bar__seg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 0.25rem; }
.h2h-meta { text-align: center; font-size: var(--fs-sm); margin-bottom: 1.75rem; }

@media (max-width: 560px) {
  .h2h-summary { grid-template-columns: 1fr; gap: 1.25rem; }
  .h2h-stats { justify-content: center; }
}

/* Ausfälle: zweispaltige Verletzungsliste */
.injury-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 720px) {
  .injury-columns { grid-template-columns: 1fr; }
}

/* -- Match Section Blocks ------------------------------------- */
.match-section {
  margin-bottom: 1.5rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.match-section__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}
.match-section > .text-muted { padding: 1rem; }

/* -- Events Timeline ------------------------------------------ */
.event-list { list-style: none; display: flex; flex-direction: column; }
.event {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border-muted);
  font-size: var(--fs-md);
  transition: background var(--transition);
}
.event:last-child { border-bottom: none; }
.event:hover { background: var(--color-bg-hover); }

.event__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.event__minute {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.event__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.35rem 0;
}
.event__side--home { text-align: right; align-items: flex-end; }
.event__side--away { text-align: left;  align-items: flex-start; }
.event__name { font-size: var(--fs-md); }
.event__name a { color: var(--color-text); text-decoration: none; }
.event__name a:hover { color: var(--color-accent); }
.event__tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  vertical-align: middle;
  margin-left: 3px;
}
.event__assist, .event__sub-detail { font-size: var(--fs-sm); color: var(--color-text-muted); }
.event__sub-detail { display: flex; flex-direction: column; gap: 1px; }
.event__sub-in  { color: var(--color-accent); }
.event__sub-out { color: var(--color-text-muted); }
.event__spacer  { display: block; }

/* Event icon bubbles */
.event__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.event__icon .icon { width: 15px; height: 15px; }
.event__icon--goal    { background: rgba(46,160,67,.15); border-color: rgba(46,160,67,.35); color: var(--color-accent); }
.event__icon--penalty { background: rgba(46,160,67,.15); border-color: rgba(46,160,67,.35); color: var(--color-accent); }
.event__icon--og      { background: rgba(224,82,82,.12); border-color: rgba(224,82,82,.3); color: var(--color-red); }
.event__icon--yellow  { background: rgba(217,160,29,.15); border-color: rgba(217,160,29,.35); color: var(--color-yellow); }
.event__icon--red, .event__icon--second-yellow { background: rgba(224,82,82,.15); border-color: rgba(224,82,82,.35); color: var(--color-red); }
.event__icon--sub     { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); color: var(--color-blue); }
.event__icon--missed-pen { background: rgba(224,82,82,.1); border-color: rgba(224,82,82,.3); color: var(--color-red); }
.event__icon--missed-pen .icon { width: 12px; height: 12px; }

/* -- Live Indicator ------------------------------------------- */
.live-indicator {
  color: var(--color-red);
  font-weight: 700;
  font-size: var(--fs-md);
  animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* -- Error Page ----------------------------------------------- */
.error-page {
  text-align: center;
  padding: 5rem 1rem;
}
.error-page__code { font-size: 6rem; font-weight: 900; color: var(--color-text-muted); line-height: 1; }
.error-page__msg  { margin: 1rem 0 2rem; color: var(--color-text-muted); font-size: var(--fs-lg); }

/* -- Legal pages (Impressum, Datenschutz) --------------------- */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  line-height: 1.7;
}
.legal-page h1 { margin-bottom: 1.5rem; }
.legal-page h2 { margin: 2rem 0 0.5rem; font-size: var(--fs-lg); }
.legal-page p  { color: var(--color-text-muted); }
.legal-page a  { color: var(--color-accent, inherit); }

/* -- Heute (homepage, Spiele des Tages) ----------------------- */
.today { padding: 1.25rem 0 0.25rem; }
.today__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .6rem; }
.today__title { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0; }
.today__live { color: var(--color-accent); margin-left: .5rem; letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.today__more { font-size: var(--fs-sm); color: var(--color-accent); text-decoration: none; }
.today__more:hover { text-decoration: underline; }
.today__strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
  gap: .6rem; overflow-x: auto; padding-bottom: .4rem; scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.today-card {
  display: flex; flex-direction: column; gap: .3rem; padding: .7rem .85rem;
  background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 10px;
  color: var(--color-text); text-decoration: none; scroll-snap-align: start; min-width: 0;
  transition: border-color .15s, background .15s;
}
.today-card:hover { border-color: var(--color-accent); background: var(--color-bg-hover); }
.today-card--live { border-color: rgba(46,160,67,.55); box-shadow: inset 0 0 0 1px rgba(46,160,67,.25); }
.today-card--done { opacity: .75; }
.today-card__league { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.today-card__row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.today-card__logo { width: 18px; height: 18px; object-fit: contain; flex: none; }
.today-card__team { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-md); font-weight: 500; }
.today-card__num { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.1rem; text-align: right; }
.today-card__status { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: .15rem; }
.today-card--live .today-card__status { color: var(--color-accent); font-weight: 600; }
.today-card__dot { font-size: var(--fs-xs); vertical-align: middle; }

/* -- Tabellenspitzen (homepage) ------------------------------- */
.tops-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 1100px) { .tops-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .tops-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px)  { .tops-grid { grid-template-columns: 1fr; } }
.tops-card {
  display: flex; flex-direction: column; gap: .35rem; padding: .8rem .9rem;
  background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 10px;
  color: var(--color-text); text-decoration: none; min-width: 0; transition: border-color .15s, background .15s;
}
.tops-card:hover { border-color: var(--color-accent); background: var(--color-bg-hover); }
.tops-card__head { display: flex; align-items: center; gap: .45rem; padding-bottom: .45rem; margin-bottom: .2rem; border-bottom: 1px solid var(--color-border-muted); }
.tops-card__league-logo { width: 16px; height: 16px; object-fit: contain; opacity: .9; }
.tops-card__league { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tops-card__season { font-size: var(--fs-xs); color: var(--color-text-subtle); }
.tops-card__row { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.tops-card__pos { width: 1.1rem; font-size: var(--fs-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.tops-card__row:first-of-type .tops-card__pos { color: var(--gold); font-weight: 700; }
.tops-card__logo { width: 18px; height: 18px; object-fit: contain; flex: none; }
.tops-card__team { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-md); }
.tops-card__pts { font-weight: 700; font-variant-numeric: tabular-nums; }

/* -- Tabellen-Lesbarkeit (UI 4/9) ------------------------------ */
/* Ruhigere, besser scannbare Datentabellen: 44px-Zeilen, sehr leichte
   Zebra-Streifen, Zahlen rechtsbündig mit Tabellenziffern, Kopf klebt
   unter Header + Liga-Nav (58px + 42px). */
.data-table td { padding: 0.8rem 0.75rem; }
.data-table tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
.data-table tbody tr:hover { background: var(--color-bg-hover); }
.data-table thead th {
  position: sticky;
  top: 100px;
  z-index: 2;
  background: var(--color-bg);
  box-shadow: 0 1px 0 var(--color-border);
}
.data-table td, .data-table th { font-variant-numeric: tabular-nums; }
/* Zahlenspalten der Liga-Tabelle (ab Spalte 3) rechtsbündig, Form links */
.standings-table td:nth-child(n+3):not(:last-child),
.standings-table th:nth-child(n+3):not(:last-child) { text-align: right; }
.standings-table td:first-child, .standings-table th:first-child { text-align: left; white-space: nowrap; }
/* Zonen-Markierung als 3px-Linie am Zeilenanfang (tr-Borders sind in
   border-collapse-Tabellen nicht überall zuverlässig) */
.standings-table tr[class*="zone--"] { border-left: 0; }
.standings-table tr[class*="zone--"] > td:first-child { box-shadow: inset 3px 0 0 var(--zone-color, transparent); }
.standings-table tr.zone--cl         { --zone-color: #3b82f6; }
.standings-table tr.zone--el         { --zone-color: #f59e0b; }
.standings-table tr.zone--uecl       { --zone-color: #22c55e; }
.standings-table tr.zone--playoff    { --zone-color: #e67e22; }
.standings-table tr.zone--relegation { --zone-color: var(--color-red); }
.standings-table .zone-indicator { display: none; }
/* Form-Badges: 18px, 2px Abstand */
.form-badges { gap: 2px; }
.form-badge { width: 18px; height: 18px; border-radius: 4px; font-size: var(--fs-xs); }

/* -- Spielerseite Hero (UI 5/9) ------------------------------- */
/* Hierarchie: Rating und Tore dominieren, alles andere eine Stufe kleiner
   und in Textfarbe statt Grün — Grün bleibt den beiden Hauptwerten. */
.rating-badge { width: 96px; height: 96px; border-width: 4px; }
.rating-badge__value { font-size: 1.7rem; }
.rating-badge--good { border-color: var(--color-text-muted); color: var(--color-text); box-shadow: 0 0 0 4px rgba(94,115,136,.08); }
.rating-badge--average { border-color: var(--color-border); color: var(--color-text-muted); box-shadow: none; }
.stat-hero .stat-highlights { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .6rem; }
.stat-highlight__value { color: var(--color-text); font-size: var(--fs-lg); }
.stat-highlight__label { font-size: var(--fs-xs); }
.stat-highlight--primary { grid-column: span 2; border-color: rgba(46,160,67,.35); background: linear-gradient(180deg, rgba(46,160,67,.08), transparent); }
.stat-highlight--primary .stat-highlight__value { color: var(--color-accent); font-size: 2.2rem; }
.stat-highlight--primary .stat-highlight__label { color: var(--color-accent); opacity: .85; }
@media (max-width: 640px) {
  .stat-hero .stat-highlights { grid-template-columns: repeat(2, 1fr); }
  .stat-highlight--primary { grid-column: span 2; }
}
/* Saison-Chips: eine Zeile, horizontal scrollbar; aktive Saison deutlicher */
/* Desktop: Chips dürfen umbrechen, kein Scroll-Container — der hat das
   "Weitere Saisons"-Dropdown abgeschnitten. Mobil eine Zeile mit Scroll,
   aber sobald das Dropdown offen ist, darf es über den Rand hinaus. */
.season-filter { flex-wrap: wrap; overflow: visible; padding-bottom: .35rem; }
@media (max-width: 768px) {
  .season-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .season-filter:has(.season-dropdown__panel:not([hidden])) { overflow: visible; }
}
.season-filter .filter-btn { flex: none; white-space: nowrap; }
.season-filter .filter-btn--active { background: var(--color-accent); color: #07090f; border-color: var(--color-accent); font-weight: 700; }

/* -- Vereinsseite (UI 6/9) ------------------------------------ */
/* Spieler ohne Einsatz treten zurück, damit der Blick auf den Stammkader fällt. */
.squad-table__row--unused td { opacity: .55; }
.squad-table__row--unused:hover td { opacity: .9; }
/* Vereinsfarben-Hook (Vorschlag, nicht aktiviert): sobald teams eine Spalte
   primary_color (#rrggbb, z.B. per Skript aus dem Logo bestimmt) hat, setzt
   club.php  style="--club-color: #…"  auf .club-header — der Verlauf unten
   greift dann automatisch. Ohne Variable bleibt alles wie bisher. */
.club-header { --club-color: transparent; background: linear-gradient(135deg, color-mix(in srgb, var(--club-color) 14%, transparent), transparent 60%); border-radius: var(--radius-md); }

/* -- Mobil (UI 7/9) ------------------------------------------- */
/* Scroll-Container für Tabellen: rechter Schatten zeigt "da ist mehr". */
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.table-scroll::after, .table-scroll::before {
  content: ""; position: sticky; top: 0; display: block; width: 0; height: 0; pointer-events: none;
}
.table-scroll--more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.table-scroll--start.table-scroll--more { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 40px), transparent); }
.table-scroll--start:not(.table-scroll--more) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); }
.table-scroll > table { min-width: 100%; }
/* Such-Icon im Header: nur mobil */
.nav-search-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--color-text-muted); border-radius: var(--radius-sm); cursor: pointer; }
.nav-search-btn:hover { color: var(--color-text); background: rgba(255,255,255,.06); }
@media (max-width: 768px) {
  .nav-search-btn { display: inline-flex; }
  /* Erste Spalte (Name/Spieler) bleibt beim Scrollen stehen */
  .table-scroll td:first-child, .table-scroll th:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--color-bg);
    box-shadow: 1px 0 0 var(--color-border-muted);
  }
  .table-scroll tbody tr:nth-child(even) td:first-child { background: #090c14; }
  .table-scroll thead th:first-child { z-index: 3; }
  .table-scroll thead th { position: static; }
  .table-scroll thead th:first-child { position: sticky; top: auto; }
  /* Liga-Tabs auf der Startseite liefen über die Viewport-Breite hinaus und
     erzeugten horizontales Scrollen der ganzen Seite */
  .tabellen-tabs, .scorers-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .tabellen-tabs .tab, .scorers-tabs .tab { flex: none; }
  /* Generell: kein Element darf die Seite breiter machen als den Viewport */
  .site-main .container { overflow-x: clip; }
  .data-table td { padding: 0.7rem 0.6rem; }
}

/* -- Leere Zustände (UI 8/9) ---------------------------------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 2.25rem 1rem; text-align: center;
  border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.empty-state__icon { color: var(--color-text-subtle); }
.empty-state__text { margin: 0; font-size: var(--fs-md); max-width: 34rem; }
.empty-state__link { color: var(--color-accent); font-size: var(--fs-md); font-weight: 600; text-decoration: none; margin-top: .25rem; }
.empty-state__link:hover { text-decoration: underline; }

/* -- Details (UI 9/9): Fokus, Layout-Stabilität ---------------- */
/* Sichtbarer Fokusring für Tastaturnutzer — nur bei Tastaturfokus, nicht beim Klick. */
:where(a, button, [role="button"], input, select, textarea, summary, .filter-btn, .tab):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
/* Bilder reservieren ihren Platz, damit beim Laden nichts springt */
.team-logo, .player-thumb, .league-nav__logo, .today-card__logo, .tops-card__logo, .ticker-pill__logo { flex-shrink: 0; }
img.team-logo, img.player-thumb { display: inline-block; }
.form-badges { min-height: 18px; }

/* -- Spielseite (fixture.php) --------------------------------- */
.event__name--goal { font-weight: 700; }
.event__name--goal a { color: var(--color-text); }
.event__sub-in-mark { color: var(--color-accent); font-size: var(--fs-sm); font-weight: 600; }
.event-list__note {
  margin: 0 0 .5rem; padding: .5rem .75rem; font-size: var(--fs-sm); color: var(--color-text-muted);
  background: rgba(217,160,29,.08); border: 1px solid rgba(217,160,29,.25); border-radius: var(--radius-sm);
}
.match-stat-row--empty .match-stat-row__track { opacity: .5; }
.match-stat-row--empty .match-stat-row__value { color: var(--color-text-muted); font-weight: 500; }
.match-team__scorers .icon { width: 11px; height: 11px; vertical-align: -1px; color: var(--color-accent); }
/* Logo-Fallback mit Initialen, wo ein Wappen groß genug wäre, um zu fehlen */
span.logo--fallback[data-initials] {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--color-bg-elevated); border: 1px solid var(--color-border);
  color: var(--color-text-muted); font-weight: 700; letter-spacing: .02em;
}
span.logo--fallback[data-initials]::before { content: attr(data-initials); }
span.logo--fallback.match-team__logo[data-initials]  { font-size: var(--fs-lg); }
span.logo--fallback.club-header__logo[data-initials] { font-size: var(--fs-xl); width: 80px; height: 80px; }
span.logo--fallback.team-logo--xs[data-initials], span.logo--fallback.team-logo--sm[data-initials],
span.logo--fallback.standings-table__logo[data-initials], span.logo--fallback.tab-league-logo[data-initials],
span.logo--fallback.scorers-table__club-logo[data-initials] { font-size: var(--fs-xs); }
/* Desktop mit Spielfeld-Grafik: Startelf-Liste und Team-Titel sind doppelt → aus.
   Mobil (unten) verschwindet die Grafik, die Listen übernehmen. */
@media (min-width: 641px) {
  .lineup-grid--bench-only .lineup-col__title,
  .lineup-grid--bench-only .lineup-section--xi { display: none; }
}
/* Mobil: Zeitleiste einspaltig, Spielfeld durch Listen ersetzt */
@media (max-width: 640px) {
  .event { grid-template-columns: 1fr 64px 1fr; gap: .35rem; padding: .5rem .4rem; font-size: var(--fs-sm); }
  .event__name { font-size: var(--fs-sm); }
  .match-pitch { display: none; }
  .match-header__teams { gap: .5rem; }
  .match-team__scorers { max-width: 140px; font-size: var(--fs-xs); }
}

/* -- Fehlende Werte ------------------------------------------- */
/* Ein fehlender Wert ist keine Information und soll nicht mit den echten
   Zahlen konkurrieren: dezenter Punkt statt "k.A."/"—". Gesetzt von
   FormatHelper::na() und von initMissingMetrics() in main.js. */
.na {
  color: var(--color-text-subtle);
  font-weight: 400;
  letter-spacing: 0;
}
td.is-na, dd.is-na, .stat-highlight__value.is-na { color: var(--color-text-subtle); }
.stat-highlight__value.is-na { font-size: var(--fs-lg); }

/* -- Footer --------------------------------------------------- */
.site-footer {
  background: rgba(7,9,15,.92);
  border-top: 1px solid var(--color-border);
  margin-top: 5rem;
  padding: 3rem 0 1.5rem;
  position: relative;
  z-index: 1;
}

/* 3-column grid above, bottom bar below */
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border-muted);
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.site-footer__brand { }
.site-footer__logo {
  display: inline-block;
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.site-footer__logo strong { color: var(--color-accent); font-weight: 900; }
.site-footer__tagline {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 260px;
}

.site-footer__col-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.site-footer__links a {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.site-footer__links a:hover { color: var(--color-accent); }

/* Bottom bar */
.site-footer__bottom {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
}
.site-footer__legal { display: flex; gap: 1rem; }
.site-footer__data { margin-left: auto; }
.site-footer a { color: var(--color-text-muted); transition: color var(--transition); }
.site-footer a:hover { color: var(--color-accent); text-decoration: none; }

/* Legacy compat */
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* -- Team Logo ------------------------------------------------ */
.team-logo { object-fit: contain; }
.team-logo--xs { width: 18px;  height: 18px;  display: inline-block; vertical-align: middle; }
.team-logo--sm { width: 24px;  height: 24px;  display: inline-block; vertical-align: middle; }
.team-logo--md { width: 32px;  height: 32px;  display: inline-block; vertical-align: middle; }
.team-logo--lg { width: 48px;  height: 48px;  display: inline-block; vertical-align: middle; }

/* -- Search Form (search page) -------------------------------- */
.search-form {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.search-form--page { max-width: 560px; }
.search-form--page .search-input { flex: 1; }

.search-hint {
  padding: 1.5rem 0;
  text-align: center;
}

/* -- Search results (search page) ------------------------------ */
.search-section { margin-bottom: 2rem; }
.search-section__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.search-section__count {
  background: var(--color-bg-elevated);
  color: var(--color-text-subtle);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
}
.search-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.625rem;
}
.search-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition), border-color var(--transition);
}
.search-card:hover {
  background: var(--color-bg-hover);
  border-color: rgba(46,160,67,.35);
}
.search-card__logo { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.search-card__body { display: flex; flex-direction: column; gap: 0.15rem; overflow: hidden; }
.search-card__name {
  font-weight: 600;
  font-size: var(--fs-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-card__sub { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* -- Livescores ----------------------------------------------- */
.livescores { display: flex; flex-direction: column; gap: 0.5rem; }

/* -- Trophy List ---------------------------------------------- */
.trophy-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }

/* -- Responsive ----------------------------------------------- */
@media (max-width: 640px) {
  :root { --container-pad: 0.75rem; }
  .site-header__inner { gap: 0.75rem; }
  .site-nav { display: none; }
  .search-input { width: 160px; }
  .club-header, .player-header { flex-direction: column; gap: 1rem; }
  .match-header__teams { flex-direction: column; }
  .compare-grid { grid-template-columns: 1fr 90px 1fr; }
}

@media (min-width: 768px) {
  :root { --container-pad: 1.5rem; }
  .fixture-list { display: grid; grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .fixture-list { grid-template-columns: repeat(3, 1fr); }
}

/* -- Standings Zone Colors ------------------------------------ */
.zone--cl         { border-left: 3px solid #3b82f6; }
.zone--el         { border-left: 3px solid #f59e0b; }
.zone--uecl       { border-left: 3px solid #22c55e; }
.zone--playoff    { border-left: 3px solid #e67e22; }
.zone--relegation { border-left: 3px solid var(--color-red); }

.zone-indicator {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.zone-indicator--cl         { background: #3b82f6; }
.zone-indicator--el         { background: #f59e0b; }
.zone-indicator--uecl       { background: #22c55e; }
.zone-indicator--playoff    { background: #e67e22; }
.zone-indicator--relegation { background: var(--color-red); }

.zone-legend {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding: 0.5rem 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.zone-legend__item { display: flex; align-items: center; gap: 0.375rem; }
.zone-legend__dot {
  width: 10px; height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.zone-legend__dot--cl         { background: #3b82f6; }
.zone-legend__dot--el         { background: #f59e0b; }
.zone-legend__dot--uecl       { background: #22c55e; }
.zone-legend__dot--playoff    { background: #e67e22; }
.zone-legend__dot--relegation { background: var(--color-red); }
.zone-legend__note { font-size: var(--fs-xs); margin-top: 0.4rem; max-width: 46rem; }

/* Generischer "Teilen"-Button (auf mehreren Seiten wiederverwendet) */
.generic-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Teilen-Modal: Bildvorschau + Social/WhatsApp/native Teilen-Optionen */
.share-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-modal[hidden] { display: none; }
.share-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,6,12,.75);
}
.share-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  max-width: min(90vw, 640px);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.share-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  cursor: pointer;
  line-height: 1;
  padding: 0.4rem;
}
.share-modal__close:hover { color: var(--color-text); }
.share-modal__preview {
  width: 100%;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--color-border);
  margin-bottom: 1rem;
}
.share-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.share-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.share-icon-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.share-icon-btn--native   { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.share-icon-btn--native:hover { background: var(--color-accent-hover); color: #fff; }
.share-icon-btn--whatsapp { border-color: #25D366; color: #25D366; }
.share-icon-btn--whatsapp:hover { background: rgba(37,211,102,.1); }
.share-icon-btn--x { border-color: #6b7280; }
.share-icon-btn--facebook { border-color: #1877F2; color: #1877F2; }
.share-icon-btn--facebook:hover { background: rgba(24,119,242,.1); }

.standings-table td:nth-child(8) { color: var(--color-text-muted); }

/* -- Spielplan grouped by date -------------------------------- */
.fixture-list--grouped { display: flex; flex-direction: column; gap: 0; }
.fixture-day { margin-bottom: 1.5rem; }
.fixture-day__header {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.375rem;
}
.fixture-card__score--played {
  font-weight: 700;
  color: var(--color-text);
}

/* -- Club Header Snapshot ------------------------------------- */
/* (already defined above in club-header section) */

/* -- Kader grouped by position -------------------------------- */
.kader-group {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--color-border);
}
.kader-group:first-child { margin-top: 0; }
.player-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--color-accent); }
.player-link:hover { text-decoration: underline; }
.player-thumb { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--color-bg); }

/* -- Club fixture list ---------------------------------------- */
.club-fixture-list { display: flex; flex-direction: column; gap: 2px; }
.club-fixture {
  display: grid;
  grid-template-columns: 28px 24px 1fr 50px 60px 28px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition);
}
.club-fixture:hover { background: var(--color-bg-hover); }
.club-fixture--played { opacity: 0.85; }
.club-fixture__ha {
  font-size: var(--fs-xs);
  font-weight: 700;
  width: 20px; height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.club-fixture__ha--h { background: rgba(46,160,67,.12); color: var(--color-accent); }
.club-fixture__ha--a { background: rgba(59,130,246,.1); color: var(--color-blue); }
.club-fixture__opp   { font-size: var(--fs-md); }
.club-fixture__date  { font-size: var(--fs-sm); color: var(--color-text-muted); text-align: right; }
.club-fixture__score { font-weight: 700; text-align: center; }
.club-fixture__time  { font-size: var(--fs-sm); color: var(--color-text-muted); text-align: center; }

/* -- Spieler-Matchlog (player.php "Spiele"-Tab) --------------- */
.club-fixture.match-log-row {
  grid-template-columns: 28px 24px 1fr minmax(90px, auto) 55px 50px 28px;
}
.match-log-row__league {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.match-log-row__badges {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.match-log-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--color-bg-card);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.match-log-badge--captain { background: rgba(240,165,0,.15); color: #f0a500; }
.match-log-badge--sub     { background: rgba(59,130,246,.1); color: var(--color-blue); }
.match-log-badge--goal    { background: rgba(46,160,67,.12); color: var(--color-accent); }
.match-log-badge--assist  { background: rgba(46,160,67,.08); color: var(--color-accent); }
.match-log-badge--yellow  { width: 10px; height: 14px; padding: 0; border-radius: 2px; background: #f0c000; }
.match-log-badge--red     { width: 10px; height: 14px; padding: 0; border-radius: 2px; background: #e25555; }

/* -- Nächstes-Spiel-Vorschau (player.php Header) --------------- */
.player-header__next-match {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
}
.player-header__next-match:hover { color: var(--color-accent); }
.player-header__next-match-comp {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  opacity: 0.75;
}

/* -- Team Stats Grid ------------------------------------------ */
.team-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}
.stats-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
}
.stats-card__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}
.stats-list { display: flex; flex-direction: column; gap: 0.375rem; }
.stats-list__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-md);
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--color-border-muted);
}
.stats-list__row:last-child { border-bottom: none; }
.stats-list__row dt { color: var(--color-text-muted); }
.stats-list__row dd { font-weight: 500; }

/* -- Stats hub ------------------------------------------------ */
.stats-empty { padding: 2rem 0; }

/* -- Homepage match rows --------------------------------------- */
.match-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.match-row {
  display: grid;
  grid-template-columns: 180px 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--fs-md);
  transition: background var(--transition);
}
.match-row:hover { background: var(--color-bg-hover); }
.match-row[hidden] { display: none; }

.match-row__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.match-row__league-logo { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
.match-row__league {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.match-row__date {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.match-row__home {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  text-align: right;
  color: inherit;
  text-decoration: none;
}
.match-row__away {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  color: inherit;
  text-decoration: none;
}
.match-row__home:hover,
.match-row__away:hover { color: var(--color-accent); text-decoration: underline; }
.match-row__logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.match-row__score {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
  min-width: 52px;
  padding: 0 0.375rem;
  flex-shrink: 0;
  text-decoration: none;
  display: block;
}
.match-row__score--result {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
  .match-row { grid-template-columns: 1fr auto 1fr; gap: 0.375rem; font-size: var(--fs-sm); }
  .match-row__meta { display: none; }
}

/* -- Karriere-Chart ------------------------------------------- */
.karriere-chart {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

/* -- Saisonverlauf-Chart -------------------------------------- */
.saisonverlauf-chart {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1.5rem;
  position: relative;
  height: 380px;
}

/* -- Historical chart (Club-Seite) --------------------------- */
.history-chart-wrap {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
}
.history-chart { width: 100%; min-width: 480px; display: block; }
.history-table-wrap { overflow-x: auto; }
.history-table td.text-center, .history-table th.text-center { text-align: center; }

/* -- Compare Stats -------------------------------------------- */
.compare-stats { display: flex; flex-direction: column; gap: 2px; }
.compare-row {
  display: grid;
  grid-template-columns: 1fr 148px 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--color-border-muted);
}
.compare-row:last-child { border-bottom: none; }
.compare-label { line-height: 1.25; }

@media (max-width: 640px) {
  .compare-row { grid-template-columns: 1fr 96px 1fr; }
  .compare-label { font-size: var(--fs-xs); }
}
.compare-label { text-align: center; font-size: var(--fs-xs); color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.compare-cell { display: flex; align-items: center; gap: 0.5rem; overflow: hidden; }
.compare-cell--a { flex-direction: row-reverse; }
.compare-cell--b { flex-direction: row; }
.compare-cell__val { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.compare-cell--win .compare-cell__val { color: var(--color-accent); }
.compare-bar {
  height: 5px;
  border-radius: 3px;
  min-width: 2px;
  /* Bar width comes from an inline style="width:N%" set by PHP. Cap it with an
     absolute max-width (mixing % and rem is valid) so a bar near 100% never
     pushes the value text past the cell's overflow:hidden edge and clips it. */
  max-width: calc(100% - 2.75rem);
  transition: width 0.3s ease;
  flex-shrink: 0;
}
.compare-bar--a { background: rgba(46,160,67,.4); }
.compare-bar--b { background: rgba(59,130,246,.4); }
.compare-cell--win .compare-bar--a { background: var(--color-accent); }
.compare-cell--win .compare-bar--b { background: var(--color-blue); }

/* Compare header */
.compare-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.compare-vs-badge {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--color-text-muted);
  text-align: center;
}
.compare-player-card {
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none; color: var(--color-text);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  transition: border-color var(--transition);
}
.compare-player-card:hover { border-color: var(--color-accent); }
.compare-player-card--right { flex-direction: row-reverse; text-align: right; }
.compare-player-card__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.compare-player-card__name { font-weight: 700; }
.compare-player-card__meta { font-size: var(--fs-sm); color: var(--color-text-muted); }
.radar-compare { max-width: 420px; margin: 0 auto 1.5rem; }

/* -- Tale of the Tape -------------------------------------------
   Ersetzt das generische Radar-Chart auf den Vergleichsseiten durch
   einen handgebauten Kategorien-Score im Boxkampf-Ankündigungsstil:
   wer gewinnt die meisten Einzelkategorien, statt eines Spinnennetz-
   Diagramms, das jede zweite KI-gebaute Vergleichsseite hat. */
.tape {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.tape__side { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 4.5rem; }
.tape__side--b { align-items: center; }
.tape__score {
  font-size: 2.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-family: var(--font-mono);
}
.tape__score--a { color: var(--color-accent); }
.tape__score--b { color: var(--color-blue); }
.tape__label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  max-width: 7rem;
}
.tape__mid { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.tape__bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg-elevated);
}
.tape__bar-fill { height: 100%; transition: width 0.4s ease; max-width: 100%; }
.tape__bar-fill--a { background: var(--color-accent); justify-self: end;   border-radius: 6px 0 0 6px; }
.tape__bar-fill--b { background: var(--color-blue);   justify-self: start; border-radius: 0 6px 6px 0; }
.tape__mid-label { font-size: var(--fs-xs); color: var(--color-text-subtle); white-space: nowrap; }

@media (max-width: 640px) {
  .tape { padding: 1rem; gap: 0.75rem; }
  .tape__score { font-size: 1.75rem; }
  .tape__label { max-width: 5rem; font-size: var(--fs-xs); }
}

/* -- Compare Actions (Share Card) --------------------------------- */
.compare-actions { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.compare-actions .btn .icon { width: 15px; height: 15px; margin-right: 0.3rem; vertical-align: -2px; }

/* Season picker per side of a compare page — lets each side pick its own
   season (or "Gesamt/Karriere") independently, e.g. Player A 2025 vs
   Player B 2012. Wraps the existing compare-player-card so the grid layout
   (1fr auto 1fr) still sees exactly 3 top-level children. */
.compare-player-col { display: flex; flex-direction: column; gap: 0.4rem; }
/* War "align-items: flex-end" auf der ganzen Spalte — das sollte nur das kleine
   Saison-Dropdown darunter rechtsbuendig ausrichten, hat aber als Nebeneffekt
   auch die grosse .compare-player-card (Team B / Spieler B) auf ihre reine
   Inhaltsbreite zusammenschrumpfen lassen, statt die Spalte auszufuellen —
   dadurch reichte die rechte Karte auf Team- UND Spieler-Vergleich nie bis
   zur Mitte. Card bleibt jetzt gestreckt, nur das Dropdown wird rechtsbuendig. */
.compare-player-col--right .season-select { align-self: flex-end; }
.season-select {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  max-width: 100%;
}
.season-select:hover, .season-select:focus { border-color: var(--color-accent); color: var(--color-text); }

/* Compare picker */
.compare-picker-wrap { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.compare-picker { flex: 1; min-width: 200px; position: relative; }
.compare-picker .search-dropdown { left: 0; right: 0; width: auto; }
.compare-vs { font-weight: 700; color: var(--color-text-muted); flex-shrink: 0; }

/* -- Compare: categorized stat groups -------------------------- */
.compare-group { margin-bottom: 1.75rem; }
.compare-group:last-child { margin-bottom: 0; }
.compare-group__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.compare-group__icon {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.compare-group__icon--accent { background: rgba(46,160,67,.12); color: var(--color-accent); }
.compare-group__icon--blue   { background: rgba(59,130,246,.12); color: var(--color-blue); }
.compare-group__icon--yellow { background: rgba(217,160,29,.12); color: var(--color-yellow); }
.compare-group__icon--red    { background: rgba(224,82,82,.12); color: var(--color-red); }
.compare-group__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

/* Compact rating badge inside compare player cards — absolutely positioned
   in the outer corner so it's immune to the row-reverse flex direction
   used for the mirrored right-hand card. */
.compare-player-card { position: relative; }
.compare-player-card--has-rating { padding-right: 3.25rem; }
.compare-player-card--has-rating.compare-player-card--right { padding-right: 1rem; padding-left: 3.25rem; }
.rating-badge--sm {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-width: 2px;
  flex-shrink: 0;
}
.compare-player-card--right .rating-badge--sm { right: auto; left: 0.75rem; }
.rating-badge--sm .rating-badge__value { font-size: var(--fs-md); }

/* -- Champion Banner ------------------------------------------ */
.champion-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, var(--color-bg-card) 0%, rgba(217,160,29,.07) 100%);
  border: 1px solid rgba(217,160,29,.3);
  border-radius: var(--radius-md);
  padding: 0.875rem 1.25rem;
  margin-bottom: 1.25rem;
}
.champion-banner__logo { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.champion-banner__info { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }
.champion-banner__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-yellow);
}
.champion-banner__team {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}
.champion-banner__team:hover { text-decoration: underline; }
.champion-banner__pts { font-size: var(--fs-sm); color: var(--color-text-muted); display: block; }
.champion-banner__record { display: block; margin-top: 0.15rem; font-size: var(--fs-xs); }
.champion-banner__trophy { flex-shrink: 0; line-height: 1; }
.champion-banner__trophy .icon { width: 32px; height: 32px; }

/* -- Transfer Direction Badges -------------------------------- */
.transfer-dir {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.transfer-dir .icon { width: 12px; height: 12px; }
.transfer-dir--in {
  background: rgba(46,160,67,.12);
  color: var(--color-accent);
  border: 1px solid rgba(46,160,67,.25);
}
.transfer-dir--out {
  background: rgba(224,82,82,.1);
  color: var(--color-red);
  border: 1px solid rgba(224,82,82,.22);
}

/* -- Responsive Tables ---------------------------------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  /* Spalten mobil ausblenden: über Klassen, nicht über Spaltenindex —
     sonst verschiebt eine bedingt gerenderte Spalte (Form, xG) alles. */
  .standings-table .col-goals,
  .standings-table .col-form,
  .col-hide-mobile { display: none; }
  .tab-panel .data-table,
  .standings-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .tabs { padding-bottom: 0; }
  .tab { white-space: nowrap; flex-shrink: 0; }
  .league-nav__inner { min-width: max-content; }
  .champion-banner { padding: 0.625rem 0.75rem; gap: 0.625rem; }
  .champion-banner__logo { width: 32px; height: 32px; }
  .champion-banner__trophy .icon { width: 24px; height: 24px; }
}

/* -- Trophy Grid ---------------------------------------------- */
.trophy-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.trophy-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition);
}
.trophy-card:hover { border-color: rgba(217,160,29,.35); }
.trophy-card__icon {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: rgba(217,160,29,.1);
}
.trophy-card__icon .icon { width: 20px; height: 20px; }
.trophy-card__body { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }
.trophy-card__name { font-weight: 600; font-size: var(--fs-md); color: var(--color-text); }
.trophy-card__seasons { font-size: var(--fs-sm); color: var(--color-text-muted); }
.trophy-card__count {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-yellow);
  background: rgba(217,160,29,.1);
  border: 1px solid rgba(217,160,29,.22);
  border-radius: 20px;
  padding: 0.15rem 0.5rem;
  flex-shrink: 0;
}

/* -- Logo Fallback -------------------------------------------- */
img.logo--fallback { opacity: 0.35; filter: grayscale(1); }
img.team-logo:not([src]),
img.team-logo[src=""],
img.league-logo:not([src]),
img.league-logo[src=""] { visibility: hidden; }

span.logo--fallback {
  display: inline-block;
  background: var(--color-bg-card);
  border-radius: 50%;
  flex-shrink: 0;
}
span.logo--fallback.team-logo--xs  { width: 20px;  height: 20px; }
span.logo--fallback.team-logo--sm  { width: 24px;  height: 24px; }
span.logo--fallback.team-logo      { width: 32px;  height: 32px; }
span.logo--fallback.team-logo--lg  { width: 48px;  height: 48px; }
span.logo--fallback.match-team__logo      { width: 56px; height: 56px; }
span.logo--fallback.club-header__logo     { width: 72px; height: 72px; }
span.logo--fallback.page-header__logo     { width: 40px; height: 40px; }
span.logo--fallback.champion-banner__logo { width: 44px; height: 44px; }
span.logo--fallback.match-row__logo       { width: 18px; height: 18px; }
span.logo--fallback.match-row__league-logo{ width: 14px; height: 14px; }
span.logo--fallback.heute-match__logo     { width: 16px; height: 16px; }
span.logo--fallback.heute-league__logo    { width: 16px; height: 16px; }
span.logo--fallback.league-card__logo     { width: 48px; height: 48px; }

/* -- Stat Highlight Zero State -------------------------------- */
.stat-highlight__value--zero { color: var(--color-text-muted); opacity: 0.6; }

/* -- No Stats Notice ------------------------------------------ */
.no-stats-notice {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
  text-align: center;
}
.no-stats-notice__link { color: var(--color-accent); text-decoration: underline; }

/* -- Rank Medals ------------------------------------------------
   Nummerierte Farb-Badges statt Medaillen-Emojis für Platz 1-3. */
.col-rank { width: 2.5rem; text-align: center; }
.rank-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1;
}
.rank-medal--gold   { background: rgba(217,160,29,.16); color: var(--color-yellow); border: 1px solid rgba(217,160,29,.4); }
.rank-medal--silver { background: rgba(184,196,209,.14); color: #b8c4d1; border: 1px solid rgba(184,196,209,.35); }
.rank-medal--bronze { background: rgba(200,121,47,.14);  color: #c8792f; border: 1px solid rgba(200,121,47,.35); }
.rank-num {
  display: inline-block;
  min-width: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* -- Position Badges ------------------------------------------ */
.pos-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--color-bg-card);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.pos-badge--goalkeeper,
.pos-badge--torwart,
.pos-badge--gk { background: rgba(99,102,241,.13); color: #a78bfa; border-color: rgba(99,102,241,.3); }
.pos-badge--defender,
.pos-badge--abwehr,
.pos-badge--cb, .pos-badge--lb, .pos-badge--rb, .pos-badge--rwb, .pos-badge--lwb { background: rgba(59,130,246,.1); color: #60a5fa; border-color: rgba(59,130,246,.3); }
.pos-badge--midfielder,
.pos-badge--mittelfeld,
.pos-badge--cm, .pos-badge--dm, .pos-badge--am, .pos-badge--rm, .pos-badge--lm { background: rgba(34,197,94,.1); color: #4ade80; border-color: rgba(34,197,94,.25); }
.pos-badge--attacker,
.pos-badge--stürmer,
.pos-badge--forward,
.pos-badge--st, .pos-badge--cf, .pos-badge--lw, .pos-badge--rw, .pos-badge--ss { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(239,68,68,.25); }

/* -- Sortable Tables ------------------------------------------ */
.sortable-table th.sort-col { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-table th.sort-col:hover { color: var(--color-accent); }
.sortable-table th.sort-col::after { content: ' ⇅'; opacity: 0.3; font-size: 0.7em; }
.sortable-table th.sort--asc::after  { content: ' ↑'; opacity: 0.8; color: var(--color-accent); }
.sortable-table th.sort--desc::after { content: ' ↓'; opacity: 0.8; color: var(--color-accent); }

/* -- Club Cell ------------------------------------------------ */
.cell-club {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.cell-club:hover { color: var(--color-accent); }

/* -- Responsive Utilities ------------------------------------- */
@media (max-width: 479px)  { .hide-xs { display: none !important; } }
@media (max-width: 639px)  { .hide-sm { display: none !important; } }
@media (max-width: 767px)  { .hide-md { display: none !important; } }
@media (max-width: 1023px) { .hide-lg { display: none !important; } }

/* -- Table Hints ---------------------------------------------- */
.hint-muted {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  padding-left: 0.25rem;
}

/* -- Season Filter -------------------------------------------- */
.season-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}
.season-filter__label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-right: 0.25rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* -- Season Dropdown ("Weitere Saisons") -----------------------
   Ersetzt den frueheren nativen <select> fuer die Saison-Historie:
   dessen aufgeklappte Liste war reines Browser-Chrome (weisser
   Hintergrund, Systemschrift) und ist mitten aus dem dunklen Theme
   herausgefallen. Trigger bleibt eine Pille im Stil von .filter-btn,
   das Panel ist ein eigenes, durchgestyltes Options-Menue. */
.season-dropdown { position: relative; display: inline-flex; }
.season-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  border-radius: 99px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  cursor: pointer;
  transition: all var(--transition);
}
.season-dropdown__trigger:hover {
  color: var(--color-text);
  border-color: rgba(46,160,67,.4);
  background: rgba(46,160,67,.07);
}
.season-dropdown__trigger--active {
  color: var(--color-accent);
  border-color: rgba(46,160,67,.5);
  background: rgba(46,160,67,.1);
}
.season-dropdown__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform var(--transition);
}
.season-dropdown[data-open="true"] .season-dropdown__chevron { transform: rotate(180deg); }
.season-dropdown__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 170px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  padding: 0.3rem;
  /* Duenne, eingefaerbte Scrollbar statt der breiten Browser-Standardleiste
     (dieselbe Behandlung wie bei .trending-card__scorer-scroll). */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.season-dropdown__panel::-webkit-scrollbar { width: 6px; }
.season-dropdown__panel::-webkit-scrollbar-track { background: transparent; }
.season-dropdown__panel::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
.season-dropdown__option {
  display: block;
  padding: 0.45rem 0.7rem;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition);
}
.season-dropdown__option:hover { background: var(--color-bg-hover); text-decoration: none; }
.season-dropdown__option--active { color: var(--color-accent); font-weight: 600; background: rgba(46,160,67,.08); }

/* -- Spieltag Page -------------------------------------------- */
.spieltag-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-left: auto;
}
.live-dot {
  color: var(--color-red);
  font-size: var(--fs-xs);
  animation: pulse 1.5s infinite;
}

.btn-refresh {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.6rem;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.btn-refresh:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ============================================================
   HOMEPAGE FEATURES v3 — Match-Ticker · Featured Match ·
   Favoriten · Trending · xG-Luegentabelle
   ============================================================ */

/* -- Match Ticker -------------------------------------------- */
.match-ticker {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

/* -- Featured Match Card ------------------------------------- */
.featured-match {
  padding: 1.5rem 0 0.5rem;
}
.featured-match__card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.featured-match__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(46,160,67,.05) 0%, transparent 70%);
  pointer-events: none;
}
.featured-match__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  text-decoration: none;
}
.featured-match__team:hover .featured-match__name { color: var(--color-accent); text-decoration: underline; }
.featured-match__logo { width: 52px; height: 52px; object-fit: contain; }
span.logo--fallback.featured-match__logo { width: 52px; height: 52px; }
.featured-match__name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.featured-match__pos {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-elevated);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
}

.featured-match__centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.featured-match__scoreline {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}
.featured-match__scoreline-sep { color: var(--color-text-muted); }
.featured-match__kickoff { text-align: center; }
.featured-match__kickoff-date { display: block; font-size: var(--fs-xl); font-weight: 700; color: var(--color-text); }
.featured-match__kickoff-time { display: block; font-size: var(--fs-md); font-weight: 500; color: var(--color-text-muted); margin-top: 0.1rem; }
.featured-match__h2h {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
}
.h2h-chip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--color-bg-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1;
}
.h2h-w { color: var(--color-text-muted); }
.h2h-w--home { color: var(--color-green); }
.h2h-w--away { color: var(--color-red); }
.h2h-d { color: var(--color-text-muted); font-weight: 600; }
.h2h-sep { color: var(--color-text-subtle); font-weight: 400; }

@media (max-width: 600px) {
  .featured-match__card { grid-template-columns: 1fr auto 1fr; padding: 1rem 0.75rem; gap: 0.5rem; }
  .featured-match__logo { width: 38px; height: 38px; }
  span.logo--fallback.featured-match__logo { width: 38px; height: 38px; }
  .featured-match__name { font-size: var(--fs-sm); }
  .featured-match__scoreline { font-size: var(--fs-xl); }
  .featured-match__kickoff-date { font-size: var(--fs-lg); }
  .featured-match__kickoff-time { font-size: var(--fs-sm); }
}

/* -- Favoriten Section --------------------------------------- */
.section--favoriten {
  padding: 1.25rem 0 0;
}
.fav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.fav-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.fav-edit-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.fav-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.6rem;
}
.fav-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition), border-color var(--transition);
}
.fav-card:hover { background: var(--color-bg-hover); border-color: var(--color-accent); }
.fav-card__logo { width: 32px; height: 32px; object-fit: contain; }
.fav-card__info { display: flex; flex-direction: column; gap: 0.15rem; overflow: hidden; }
.fav-card__name { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-card__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }
.fav-card__stats { display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-end; }
.fav-card__stat { font-size: var(--fs-xs); color: var(--color-text-muted); display: flex; align-items: center; gap: 0.25rem; }
.fav-card__stat-label { font-size: var(--fs-xs); text-transform: uppercase; color: var(--color-text-subtle); margin-right: 0.15rem; }
.fav-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; font-size: var(--fs-xs); font-weight: 700;
}
.fav-dot--w { background: rgba(46,160,67,.18); color: var(--color-green); }
.fav-dot--l { background: rgba(224,82,82,.15); color: var(--color-red); }
.fav-dot--d { background: rgba(94,115,136,.15); color: var(--color-text-muted); }

/* Favoriten Modal */
.fav-modal {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(7,9,15,.75); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.fav-modal[hidden] { display: none; }
.fav-modal__inner {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  width: 100%; max-width: 420px;
  max-height: 80vh;
  display: flex; flex-direction: column; gap: 0.75rem;
  box-shadow: var(--shadow-lg);
}
.fav-modal__head {
  display: flex; align-items: center; justify-content: space-between;
}
.fav-modal__head h3 { font-size: var(--fs-md); font-weight: 700; }
.fav-modal__close {
  background: none; border: none; color: var(--color-text-muted);
  font-size: var(--fs-md); cursor: pointer; line-height: 1; padding: 0.25rem;
}
.fav-modal__close:hover { color: var(--color-text); }
.fav-modal__search {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  padding: 0.5rem 0.75rem;
  width: 100%;
  outline: none;
}
.fav-modal__search:focus { border-color: var(--color-accent); }
.fav-modal__results { overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.fav-modal__item {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 0.5rem 0.75rem;
  color: var(--color-text); font-size: var(--fs-md); cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.fav-modal__item:hover { border-color: var(--color-accent); }
.fav-modal__item--active { border-color: var(--color-accent); background: rgba(46,160,67,.08); }
.fav-modal__item-icon { font-size: var(--fs-md); color: var(--color-accent); }
.fav-modal__hint { font-size: var(--fs-xs); color: var(--color-text-muted); }
.fav-modal__empty { font-size: var(--fs-sm); color: var(--color-text-muted); padding: 0.5rem 0; }

/* -- Was ist los? Trending Cards ----------------------------- */
.section--trending { padding: 1.5rem 0 0; }
.trending-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}
.trending-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}
.trending-card:hover { background: var(--color-bg-hover); border-color: var(--color-accent); }
.trending-card__tag {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--color-accent);
  font-weight: 600;
}
.trending-card__body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.trending-card__logo { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
span.logo--fallback.trending-card__logo { width: 34px; height: 34px; }
.trending-card__title {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
}
.trending-card__sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}
.trending-card__scorer-scroll {
  max-height: 168px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -0.3rem;
  padding: 0 0.3rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.trending-card__scorer-scroll::-webkit-scrollbar { width: 6px; }
.trending-card__scorer-scroll::-webkit-scrollbar-track { background: transparent; }
.trending-card__scorer-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
.trending-card__scorer-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trending-card__scorer-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.3rem;
  margin: -0.2rem -0.3rem;
  transition: background var(--transition);
}
.trending-card__scorer-row:hover { background: var(--color-bg-hover); }
.trending-card__scorer-rank {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  width: 1.1rem;
  flex-shrink: 0;
  text-align: center;
}
.trending-card__logo--sm { width: 24px; height: 24px; }
span.logo--fallback.trending-card__logo--sm { width: 24px; height: 24px; }
.trending-card__team-link { display: inline-flex; flex-shrink: 0; }
.trending-card__scorer-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.trending-card__scorer-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text);
  text-decoration: none;
}
.trending-card__scorer-name:hover { text-decoration: underline; }
.trending-card__scorer-meta {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trending-card__scorer-meta a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.trending-card__scorer-meta a:hover { text-decoration: underline; }
.trending-card__scorer-goals {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--color-text);
  flex-shrink: 0;
}
.trending-card__score {
  display: inline-block;
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0.2rem;
}

/* -- xG-Luegentabelle Toggle --------------------------------- */
.tabellen-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.tabellen-mode-toggle {
  display: flex;
  gap: 0.25rem;
}
.tabellen-mode {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  letter-spacing: .03em;
}
.tabellen-mode:hover { border-color: var(--color-accent); color: var(--color-accent); }
.tabellen-mode--active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.tabellen-panel--xg .standings-table__pts { color: var(--color-accent); }

/* ── Mobile Nav ─────────────────────────────────────────────── */

/* Burger button — hidden on desktop, shown on mobile */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: 0.5rem;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: background var(--transition);
}
.nav-burger:hover span { background: var(--color-accent); }

/* Overlay wrapper — hidden by default, even on mobile */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}
/* Only show when JS adds --open */
.nav-mobile--open {
  display: block;
}

/* Semi-transparent backdrop */
.nav-mobile__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

/* Slide-in panel from left */
.nav-mobile__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--color-card);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1rem 1.25rem 2rem;
  gap: 0;
}

/* Header row: logo + close button */
.nav-mobile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.nav-mobile__logo {
  font-size: var(--fs-lg);
  text-decoration: none;
  color: var(--color-text);
}
.nav-mobile__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}
.nav-mobile__close:hover { color: var(--color-text); }

/* Mobile search */
.nav-mobile__search {
  position: relative;
  margin-bottom: 1.25rem;
}

/* Nav links */
.nav-mobile__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition);
}
.nav-mobile__link:last-child { border-bottom: none; }
.nav-mobile__link:hover,
.nav-mobile__link.is-active { color: var(--color-accent); }

.nav-mobile__dot--live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e53935;
  display: inline-block;
  flex-shrink: 0;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Section label */
.nav-mobile__section-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 1.25rem 0 0.5rem;
}

/* Show burger on mobile; hide desktop search + nav */
@media (max-width: 768px) {
  .nav-burger { display: flex; }
  .site-nav { display: none; }
  .site-header__search { display: none; }
}

/* ── Match Pitch (grafische Aufstellung) ─────────────────────────────── */
.match-pitch {
  margin-bottom: 1.5rem;
}
.match-pitch__field {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-width: 640px;
  margin: 0 auto;
  background:
    repeating-linear-gradient(
      to bottom,
      #1c6b2e 0,
      #1c6b2e 10%,
      #18602a 10%,
      #18602a 20%
    );
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.match-pitch__halfway-line {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: rgba(255,255,255,0.35);
}
.match-pitch__center-circle {
  position: absolute;
  left: 50%; top: 50%;
  width: 18%; aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.match-pitch__box {
  position: absolute;
  left: 50%;
  width: 44%;
  height: 12%;
  border: 2px solid rgba(255,255,255,0.35);
  transform: translateX(-50%);
}
.match-pitch__box--top    { top: 0; border-top: none; }
.match-pitch__box--bottom { bottom: 0; border-bottom: none; }

.pitch-player {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 64px;
  z-index: 1;
}
.pitch-player__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  text-decoration: none;
}
.pitch-player--home .pitch-player__dot { background: var(--color-green); }
.pitch-player--away .pitch-player__dot { background: var(--color-blue); }
.pitch-player--captain .pitch-player__dot { box-shadow: 0 0 0 2px #f0a500, 0 1px 4px rgba(0,0,0,0.4); }
.pitch-player__name {
  font-size: var(--fs-xs);
  line-height: 1.1;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-pitch__legend {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.match-pitch__legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.match-pitch__legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.match-pitch__legend-dot--home { background: var(--color-green); }
.match-pitch__legend-dot--away { background: var(--color-blue); }

@media (max-width: 480px) {
  .pitch-player { width: 44px; }
  .pitch-player__dot { width: 20px; height: 20px; font-size: var(--fs-xs); }
  .pitch-player__name { font-size: var(--fs-xs); max-width: 50px; }
}

/* ── /spieltag Seite ─────────────────────────────────────────────────── */
#spieltag-container {
  display: grid;
  /* War 320px — bei 3 Spalten pro Reihe blieb pro Vereinsname kaum Platz und
     Namen wie "Nottingham Forest"/"Paris Saint-Germain" wurden abgeschnitten.
     420px erzwingt tendenziell 2 statt 3 Spalten auf normalen Breiten, dafuer
     passen die Namen ohne "…"-Kuerzung. */
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 0.875rem;
  align-items: start;
}
.spieltag-loading,
.spieltag-empty {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  padding: 2rem 0;
  text-align: center;
}

.spieltag-league {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.spieltag-league__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.875rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}
.league-logo--xs { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.spieltag-league__name {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  text-decoration: none;
}
.spieltag-league__name:hover { color: var(--color-accent); }

.spieltag-row {
  display: grid;
  /* War "1fr 4.5rem 1fr 3.25rem" — die Zeile hat aber nur 3 Kind-Elemente
     (Heim/Center/Auswaerts), die vierte Spur blieb also ungenutzte Leerflaeche
     und hat den Vereinsnamen unnoetig Platz weggenommen (Ursache fuer die
     abgeschnittenen Namen wie "Nottingham…"). */
  grid-template-columns: 1fr 4.5rem 1fr;
  align-items: center;
  gap: 0.375rem;
  padding: 0.55rem 0.875rem;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.spieltag-row:last-child { border-bottom: none; }
.spieltag-row:hover      { background: var(--color-bg-hover); }
.spieltag-row--live      { background: rgba(46,160,67,.05); }
.spieltag-row--live:hover{ background: rgba(46,160,67,.1); }
.spieltag-row--played .match-score { color: var(--color-text-muted); }

.spieltag-home,
.spieltag-away {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
}
.spieltag-home { justify-content: flex-end; text-align: right; }
.spieltag-away { justify-content: flex-start; }
.spieltag-team-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.spieltag-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.spieltag-center .match-score {
  font-weight: 700;
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.spieltag-center .score--time  { color: var(--color-text-muted); font-weight: 500; }
.spieltag-center .score--live  { color: var(--color-green); }
.spieltag-center .score--cancel{ color: var(--color-red); font-size: var(--fs-xs); font-weight: 600; }

.status-badge {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.status-badge--live  { color: var(--color-green); font-weight: 700; }
.status-badge--played{ color: var(--color-text-subtle); }

/* Saisonpause-Hinweisbanner über dem naechsten bekannten Spieltag */
.season-break-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.875rem 1.1rem;
  margin-bottom: 0.25rem;
}
.season-break-banner__icon { font-size: var(--fs-xl); }
.season-break-banner__title {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-text);
}
.season-break-banner__sub {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  #spieltag-container { grid-template-columns: 1fr; }
  .spieltag-row { grid-template-columns: 1fr 3.5rem 1fr; font-size: var(--fs-sm); }
}

/* ── Matchup-Picker (H2H & Spieler-Vergleich Startzustand) ───────────────
   Zwei Bild-Platzhalter mit VS-Blitz dazwischen, Suchleiste je Seite,
   Vergleichen-Button darunter — Stilvorlage: Sport-Grafikdesign mit
   Spieler/Club-Foto + zentralem Blitz-Symbol. */
.matchup-picker {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 1.5rem;
  max-width: 720px;
  margin: 0 auto 2rem;
  padding: 1.75rem 1.5rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.matchup-picker__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}
.matchup-picker__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-border);
  overflow: hidden;
}
.matchup-picker__photo--empty {
  border-style: dashed;
  border-color: var(--color-border);
}
.matchup-picker__logo { width: 68px; height: 68px; object-fit: contain; }
.matchup-picker__placeholder-icon { width: 40px; height: 40px; color: var(--color-text-subtle); }
.matchup-picker__side .search-input { width: 100%; text-align: center; }

.matchup-picker__vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding-top: 1.25rem;
}
.matchup-picker__vs-bolt {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  filter: drop-shadow(0 0 8px var(--color-accent-glow));
}
.matchup-picker__vs-bolt .icon { width: 100%; height: 100%; }
.matchup-picker__vs-text {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}
.matchup-picker__submit {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 0.5rem;
}

@media (max-width: 560px) {
  .matchup-picker { grid-template-columns: 1fr; }
  .matchup-picker__vs { flex-direction: row; padding-top: 0; }
}

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

/* ============================================================
   DESIGN-SYSTEM v3 — Phase 1: Fundament
   Leitsätze: Farbe hat Bedeutung. Zahlen sind das Produkt.
   Ein Muster pro Aufgabe. Eine Spalte ohne Daten existiert nicht.
   Dieser Block steht bewusst am Ende und überschreibt ältere
   Regeln per Kaskade, statt 100 Stellen einzeln anzufassen.
   ============================================================ */

/* -- Zahlen ---------------------------------------------------- */
body { font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
th.num { text-align: right; }
.num--zero  { color: var(--color-text-subtle); }
.num--pos   { color: var(--pos); }
.num--neg   { color: var(--neg); }
.num--strong{ font-weight: 700; color: var(--color-text); }

/* -- Links: Textfarbe, Hover unterstreicht. Grün nur für Interaktion. */
a { color: var(--color-text); }
a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--color-text-muted); }
p a, .prose a, .zone-legend__note a { text-decoration: underline; text-decoration-color: var(--color-text-subtle); text-underline-offset: 2px; }
.link-team:hover, .standings-table__club-link:hover, .cell-club:hover,
.scorers-table__player-link:hover .scorers-table__name, .scorers-table__club:hover { color: var(--color-text); text-decoration: underline; }
.data-table a:hover, .standings-table a:hover, .scorers-table a:hover { color: var(--color-text); }
.tabellen-more, .tabellen-more--secondary, .stats-subheading__link, .empty-state__link { color: var(--color-text-muted); border-bottom: 0; }
.tabellen-more:hover, .stats-subheading__link:hover, .empty-state__link:hover { color: var(--color-text); text-decoration: none; }
.tabellen-expand-btn:hover, .tabellen-expand-btn--active { color: var(--color-text); }
.site-nav__link.is-active, .league-nav__link.is-active { color: var(--color-text); background: rgba(255,255,255,.08); box-shadow: inset 0 -2px 0 var(--accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.sortable-table th.sort-col:hover, .sortable-table th.sort--asc::after, .sortable-table th.sort--desc::after { color: var(--color-text); }
.text-green { color: var(--pos); }
.text-red   { color: var(--neg); }

/* Torzahlen und Punkte: fett, weiß — nicht grün */
.scorers-table__goals { color: var(--color-text); font-size: var(--fs-md); }
.standings-table__pts, .data-table td.font-bold { color: var(--color-text); }

/* Formbadges: Sieg/Niederlage semantisch, Unentschieden neutral (kein Gold) */
.form-badge--win  { background: var(--pos); color: #fff; }
.form-badge--draw { background: #3a4a5e; color: #dfe8f3; }
.form-badge--loss { background: var(--neg); color: #fff; }

/* -- Ein Label-Stil ------------------------------------------- */
.kicker, .fixture-card__league, .standings-table__separator span,
.data-table thead th, .standings-table thead th, .scorers-table thead th,
.site-footer__col-title, .today__label, .tops-card__title, .top-card__title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* -- Section-Head: Titel links, Control rechts, Linie in voller Breite */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .875rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-border);
}
/* Alleinstehender Titel: Linie in voller Breite (wie bisher) */
.section__title, .section-title, .today__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-text);
}
/* Im Section-Head trägt der Wrapper die Linie, nicht der Titel */
.section-head__title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; color: var(--color-text); }
.section-head .section__title, .section-head .section-title, .section-head h1, .section-head h2 { margin: 0; padding: 0; border: 0; font-size: var(--fs-lg); }
.section-head__meta { font-size: var(--fs-sm); color: var(--color-text-muted); }
.section-head__control { margin-left: auto; }

/* -- Ein Link-Muster für "Mehr →" ------------------------------ */
.more-link {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--color-text-muted); text-decoration: none; white-space: nowrap;
}
.more-link::after { content: '→'; transition: transform var(--transition); }
.more-link:hover { color: var(--color-text); text-decoration: none; }
.more-link:hover::after { transform: translateX(2px); }
.more-row { display: flex; justify-content: flex-end; gap: 1.25rem; padding: .625rem .5rem .75rem; border-top: 1px solid var(--color-border); }

/* -- Datenstand ("Stand: …") ------------------------------------ */
.data-stand { font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: .02em; white-space: nowrap; }
.data-stand--right { display: block; text-align: right; margin: -.25rem 0 .5rem; }
.site-footer__stand { font-size: var(--fs-xs); color: var(--color-text-subtle); margin-left: auto; }

/* -- Tabellen: Kopf wie Inhalt ausgerichtet, numerische Spalten rechts */
.data-table th { text-align: left; }
.data-table th.num, .data-table td.num { text-align: right; }
.data-table th.col-center, .data-table td.col-center { text-align: center; }
.standings-table th, .standings-table td { text-align: left; }
.standings-table th.num, .standings-table td.num { text-align: right; }
.standings-table td:nth-child(n+3):not(:last-child), .standings-table th:nth-child(n+3):not(:last-child) { text-align: inherit; }
.standings-table td.num, .standings-table th.num { text-align: right; }

/* -- Statistik-Balken ohne Daten ans Ende / gedimmt --------------- */
.match-stat-row--empty { opacity: .55; }

/* -- Typografie-Hierarchie ---------------------------------------- */
h1, .page-header__title { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-md); }

/* -- Tabellen-Raster: Name-Spalte nimmt den Rest, Zahlen kompakt rechts */
.data-table thead th, .standings-table thead th, .scorers-table thead th { text-align: left; }
.data-table thead th.num, .standings-table thead th.num, .scorers-table thead th.num { text-align: right; }
.data-table thead th.col-center { text-align: center; }
.data-table td, .standings-table__row td { padding: .5rem .75rem; line-height: 1.3; height: 40px; }
.data-table thead th { padding: .5rem .75rem; }
.data-table .col-team, .data-table .col-name { width: 100%; max-width: 0; }
.data-table .col-team .link-team, .data-table .col-name a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; max-width: 100%; }
.data-table td.num, .data-table th.num { min-width: 3.25ch; padding-left: .5rem; padding-right: .75rem; }
.data-table .col-pos { width: 2.25rem; color: var(--color-text-muted); white-space: nowrap; }
@media (max-width: 768px) {
  .data-table td, .standings-table__row td { height: 44px; padding: .5rem .5rem; }
  .data-table td.num, .data-table th.num { padding-left: .35rem; padding-right: .5rem; }
}
.link-team, .data-table .col-team .link-team, .data-table .col-name a { display: inline-flex; align-items: center; gap: .5rem; line-height: 1.2; vertical-align: middle; }
.data-table td { padding-top: .4rem; padding-bottom: .4rem; }
span.logo--fallback.team-logo--sm { width: 22px; height: 22px; }

/* -- Hero "Nächstes Spiel": halb so hoch, doppelt so viel Inhalt --------- */
.featured-match { padding: .5rem 0 0; }
.featured-match__card { padding: 1.25rem 1.25rem 1rem; gap: .75rem 1rem; grid-template-columns: 1fr auto 1fr; }
.featured-match__card::before { display: none; }
.featured-match__logo, span.logo--fallback.featured-match__logo { width: 44px; height: 44px; }
.featured-match__team { gap: .35rem; }
.featured-match__team:hover .featured-match__name { color: var(--color-text); }
.featured-match__pos { font-variant-numeric: tabular-nums; }
.featured-match__kickoff-date { font-size: 2rem; line-height: 1; letter-spacing: -.02em; }
.featured-match__kickoff-time { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: .35rem; }
.featured-match__venue { font-size: var(--fs-xs); color: var(--color-text-muted); }
.featured-match__foot {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap;
  margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--color-border-muted);
  font-size: var(--fs-sm); color: var(--color-text);
}
.featured-match__h2h, .featured-match__last { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.featured-match__foot .h2h-chip { font-size: var(--fs-sm); padding: .2rem .55rem; }
.featured-match__foot .h2h-w--home, .featured-match__foot .h2h-w--away { color: var(--color-text); }
.more-row--plain { border-top: 0; padding: .35rem 0 0; }
@media (max-width: 600px) {
  .featured-match__foot { gap: .5rem 1rem; justify-content: flex-start; }
  .featured-match__kickoff-date { font-size: var(--fs-xl); }
}

/* -- Liga-Switch (Startseite): ein Schalter für Tabelle + Torschützen ----- */
.section-head--switch { align-items: center; }
.league-switch-wrap { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.league-switch { margin: 0; }
.league-switch .tab { display: inline-flex; align-items: center; gap: .4rem; }
@media (max-width: 768px) {
  .section-head--switch { align-items: stretch; }
  .league-switch-wrap { width: 100%; }
  .league-switch { flex: 1; min-width: 0; overflow-x: auto; }
}
.featured-match > .container { padding-inline: 0; }
.featured-match { margin-bottom: 2rem; }
.trending-card__tag, .featured-match__label, .form-label, .match-coaches__label, .stat-highlight__label, .stats-list dt, .kader-group { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }

/* ============================================================
   DESIGN-SYSTEM v3 — Phase 2: Ikonografie & Identität
   ============================================================ */
/* Liga-Logos: einheitlicher 20px-Kasten mit hellem Kreis, damit auch das
   schwarze Premier-League-Logo auf Nachtblau lesbar ist. Keine Graustufen
   mehr — ein Logo, das man nicht erkennt, ist keins. */
.league-nav__logo, .tab-league-logo, .tops-card__league-logo, .site-footer__links .league-nav__logo {
  width: 20px; height: 20px; padding: 2px; box-sizing: border-box;
  border-radius: 50%; background: rgba(255,255,255,.10);
  object-fit: contain; filter: none; opacity: 1; margin-right: .45rem;
}
.site-footer__links .league-nav__logo { width: 18px; height: 18px; }
span.logo--fallback.league-nav__logo, span.logo--fallback.tab-league-logo, span.logo--fallback.tops-card__league-logo { width: 20px; height: 20px; }
.league-nav__link { padding: .35rem .75rem; }
.league-nav__link:hover .league-nav__logo, .league-nav__link.is-active .league-nav__logo { background: rgba(255,255,255,.16); }
/* Vereinswappen: ≥20px in Tabellen, 24px auf der Startseite */
.standings-table__logo, span.logo--fallback.standings-table__logo { width: 20px; height: 20px; }
.scorers-table__club-logo, span.logo--fallback.scorers-table__club-logo { width: 16px; height: 16px; }
.tops-card__logo, span.logo--fallback.tops-card__logo { width: 24px; height: 24px; }
.team-logo--xs, span.logo--fallback.team-logo--xs { width: 20px; height: 20px; }
span.logo--fallback[data-initials] { font-size: var(--fs-xs); }
/* Karten-Icons (statt 🟨/🟥) */
.card-icon { display: inline-block; width: 9px; height: 12px; border-radius: 2px; vertical-align: -1px; }
.card-icon--yellow { background: #e8c547; }
.card-icon--red    { background: var(--neg); }
/* Rang-Medaillen: Gold nur Rang 1, Silber/Bronze neutral */
.rank-medal { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: var(--fs-xs); font-weight: 700; }
.rank-medal--gold   { background: rgba(217,160,29,.16); color: var(--gold); border: 1px solid rgba(217,160,29,.4); }
.rank-medal--silver { background: rgba(184,196,209,.12); color: #b8c4d1; border: 1px solid rgba(184,196,209,.3); }
.rank-medal--bronze { background: rgba(200,121,47,.12); color: #c8792f; border: 1px solid rgba(200,121,47,.3); }

/* -- Wortmarke mit eigenem Zeichen ----------------------------------- */
.site-header__logo { display: inline-flex; align-items: center; gap: .45rem; }
.logo-mark { width: 22px; height: 22px; flex-shrink: 0; }
.logo-mark__bg { fill: var(--accent); }
.logo-mark__bar { fill: #07090f; }
.site-header__logo strong { color: var(--accent); }
.site-footer__logo { display: inline-flex; align-items: center; gap: .4rem; }
.site-footer__logo .logo-mark { width: 18px; height: 18px; }
@media (max-width: 640px) {
  /* Mobil scrollt die Tabelle horizontal — Namen nicht abschneiden */
  .data-table .col-team, .data-table .col-name { max-width: none; width: auto; }
  .data-table .col-team .link-team, .data-table .col-name a { overflow: visible; text-overflow: clip; max-width: none; }
}

/* ============================================================
   DESIGN-SYSTEM v3 — Phase 3: Charts (Inline-SVG, ChartHelper)
   ============================================================ */
.spark { display: inline-block; vertical-align: middle; color: var(--color-text-muted); }
.spark--up   { color: var(--pos); }
.spark--down { color: var(--neg); }
.col-spark { width: 96px; }
td.col-spark { padding-top: .25rem; padding-bottom: .25rem; }

.bars__label, .bars__value, .cols__tick, .linechart__tick, .radar__label, .tl__label { font-size: 11px; fill: var(--color-text-muted); font-family: var(--font-sans); }
.bars__value { fill: var(--color-text); font-weight: 600; }
.bars__track { fill: rgba(255,255,255,.05); }
.bars__fill  { fill: var(--color-text-muted); }
.bars__fill--hl { fill: var(--accent); }
.cols__grid, .linechart__grid { stroke: var(--color-border); stroke-width: 1; }
.cols__bar--0 { fill: var(--color-text); }
.cols__bar--1 { fill: var(--color-text-muted); opacity: .8; }
.cols__bar--2 { fill: var(--info); }
.chart-legend { display: flex; gap: .75rem 1.25rem; flex-wrap: wrap; margin-top: .5rem; font-size: var(--fs-sm); color: var(--color-text-muted); }
.chart-legend__item { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; color: inherit; font: inherit; cursor: default; padding: 0; }
.chart-legend__swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-legend__swatch.cols__bar--0 { background: var(--color-text); }
.chart-legend__swatch.cols__bar--1 { background: var(--color-text-muted); }
.chart-legend--teams .chart-legend__item { cursor: pointer; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--color-border); }
.chart-legend--teams .chart-legend__item:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.chart-legend--teams .chart-legend__item.is-active { color: var(--color-text); background: rgba(46,160,67,.14); border-color: var(--accent); }
.chart-note { font-size: var(--fs-xs); margin-top: .5rem; }

.linechart-wrap { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem; }
.linechart__series polyline { stroke: var(--color-text-subtle); transition: stroke var(--transition), opacity var(--transition); }
.linechart__series circle   { fill: var(--color-text-subtle); }
.linechart__series:hover polyline, .linechart__series--hl polyline { stroke: var(--accent); }
.linechart__series:hover circle,   .linechart__series--hl circle   { fill: var(--accent); }
.linechart-wrap.has-hover .linechart__series:not(.linechart__series--hl):not(:hover) polyline { opacity: .45; }

.radar__ring { fill: none; stroke: var(--color-border); }
.radar__axis { stroke: var(--color-border); }
.radar__area { fill: rgba(46,160,67,.18); stroke: var(--accent); stroke-width: 1.5; }
.radar__dot  { fill: var(--accent); }
.radar-chart { display: flex; flex-direction: column; align-items: center; }

/* Spielverlauf */
.match-timeline { margin: .75rem auto 0; max-width: 780px; }
.tl__axis { stroke: var(--color-border); stroke-width: 2; }
.tl__tick { stroke: var(--color-text-subtle); }
.tl__tick--ht { stroke: var(--color-text-muted); }
.tl__ht { stroke: var(--color-border); stroke-dasharray: 2 3; }
.tl__stem { stroke: var(--color-text-muted); stroke-width: 1; }
.tl__goal circle { fill: var(--color-text); stroke: var(--color-bg); stroke-width: 1.5; }
.tl__goal--og circle { fill: var(--neg); }
.tl__card--y { fill: #e8c547; }
.tl__card--r { fill: var(--neg); }
.tl__sub { fill: var(--color-text-subtle); }
.tl__miss line { stroke: var(--neg); stroke-width: 1.5; }
.match-timeline__sides { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; padding: 0 .25rem; }

/* Geteilter Balken (Ballbesitz o.ä.) */
.split-bar { display: grid; grid-template-columns: 3.5rem 1fr 3.5rem; align-items: center; gap: .5rem; max-width: 780px; margin: .5rem auto 0; font-size: var(--fs-sm); }
.split-bar__val { font-weight: 700; }
.split-bar__val:last-of-type { text-align: right; }
.split-bar__track { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.split-bar__home { display: block; height: 100%; background: var(--color-text); }
.split-bar__label { grid-column: 1 / -1; text-align: center; font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; }

/* Hero-Sparkline (Vereinsseite) */
.hero-spark { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: var(--color-text-muted); }
.stat-highlight--primary { border-color: var(--color-border); background: var(--color-bg-card); }
.stat-highlight--primary .stat-highlight__value { color: var(--color-text); }
.stat-highlight--primary .stat-highlight__label { color: var(--color-text-muted); opacity: 1; }
.player-header-row .radar-chart, .radar-chart { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; }
.radar-chart .radar { width: 300px; max-width: 100%; }
.tops-card__form { display: inline-flex; margin-left: auto; margin-right: .5rem; }
.tops-card__form .form-badge { width: 14px; height: 14px; font-size: 9px; border-radius: 3px; }
.match-score__state { color: var(--color-text-muted); }
.tops-card__form { margin-left: 0; }

/* ============================================================
   DESIGN-SYSTEM v3 — Phase 4: Breadcrumbs, Textabsätze
   ============================================================ */
.breadcrumbs { margin: -.5rem 0 1rem; font-size: var(--fs-xs); color: var(--color-text-muted); }
.breadcrumbs__list { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; }
.breadcrumbs__item + .breadcrumbs__item::before { content: '›'; margin: 0 .35rem 0 .1rem; color: var(--color-text-subtle); }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-text); }
.breadcrumbs [aria-current] span { color: var(--color-text); }
.intro-text { font-size: var(--fs-md); line-height: 1.6; color: var(--color-text); max-width: 72ch; margin: 0 0 1.5rem; }
.intro-text strong { font-weight: 600; }
.intro-text--muted { color: var(--color-text-muted); }
.matchup-picker-wrap { margin-bottom: 1rem; }
.matchup-picker-wrap > summary { list-style: none; cursor: pointer; display: inline-flex; margin-bottom: .5rem; }
.matchup-picker-wrap > summary::-webkit-details-marker { display: none; }
.matchup-picker-wrap > summary::after { content: '▾'; }
.matchup-picker-wrap[open] > summary::after { content: '▴'; }
.compare-actions { gap: .5rem; flex-wrap: wrap; }