:root{
  --csr-bg:#0b0d12; --csr-fg:#e9ecf1; --csr-accent:#29cc7a;
  --csr-muted:#9aa3ad; --csr-card:#141923; --csr-ring:2px solid #29cc7a;
}

/* Karte */
.csr-card{
  display:grid; grid-template-rows:auto 1fr auto;
  background:var(--csr-card); color:var(--csr-fg);
  border:1px solid #1d2430; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.csr-link{ display:block; color:inherit; text-decoration:none; }
.csr-card:focus-within, .csr-card:has(.csr-link:focus-visible){ outline:var(--csr-ring); outline-offset:3px; }

/* SR-only */
.csr-sr{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

/* Header */
.csr-head{ position:relative; padding:1.6rem .9rem .2rem; }
.csr-date{
  position:absolute; top:.55rem; right:.6rem;
  font-size:.78rem; color:var(--csr-muted); font-variant-numeric:tabular-nums;
}
/* Kategorie-Badge links oben, reagiert auf ?cat=... */
.csr-cat{
  position:absolute; top:.55rem; left:.6rem;
  max-width:calc(100% - 7.5rem); /* Platz für Datum rechts */
  padding:.18rem .55rem; border-radius:999px;
  border:1px solid #263044; background:#0f1722; color:#dfe9f2;
  font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Zeile: Team | Score | Team */
.csr-row{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:.5rem; align-items:stretch;
}
.csr-team{
  display:flex; align-items:center; justify-content:center;
  padding:.28rem .55rem; border-radius:999px;
  border:1px solid #263044; background:linear-gradient(180deg,#18202c,#121824);
  min-height:2.2rem;
}
.csr-team.home{ box-shadow:inset 0 0 0 1px rgba(41,204,122,.35); }
.csr-team.away{ box-shadow:inset 0 0 0 1px rgba(41,184,204,.35); }
.csr-team__label{
  text-align:center; line-height:1.15; font-weight:700; font-size:.92rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Ergebnis-Badge */
.csr-score-badge{
  display:inline-flex; align-items:center; justify-content:center; gap:.2rem;
  padding:.14rem .6rem; border-radius:999px;
  border:1px solid #2fa56c; background:#0f1722;
  font-size:1.6rem; font-weight:900; font-variant-numeric:tabular-nums;
}
.csr-score-badge .c{ opacity:.65; }

/* Body */
.csr-body{ padding:.65rem .9rem .9rem; }
.csr-excerpt{
  margin:0; color:#c7ced6; line-height:1.35; font-size:.95rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Fuß */
.csr-foot{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:0 .9rem .9rem; }
.csr-chip{ border:1px solid #263044; padding:.18rem .5rem; border-radius:999px; font-size:.8rem; color:#cfe5d9; }
.csr-chip.res-home{ background:rgba(41,204,122,.12); border-color:#2fa56c; }
.csr-chip.res-away{ background:rgba(41,184,204,.12); border-color:#2f8aa5; }
.csr-chip.res-draw{ background:rgba(180,180,180,.12); border-color:#4a5568; }
.csr-cta{ color:var(--csr-accent); font-weight:600; font-size:.9rem; }

/* Hover */
@media (hover:hover){ .csr-card:hover{ transform:translateY(-1px); border-color:rgba(41,204,122,.35); box-shadow:0 10px 28px rgba(0,0,0,.24); } }
@media (prefers-reduced-motion:reduce){ .csr-card{ transition:none; } }

/* Mobil */
@media (max-width:520px){
  .csr-row{ grid-template-columns:1fr; }
  .csr-head{ padding-top:2.2rem; }
}