/* ==========================================================================
   kryptoexperte.de — Rankings
   ========================================================================== */

.rank-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; padding-block: 30px 10px; }
.rank-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: 26px; box-shadow: var(--shadow-sm); }
.rank-card-head { display: flex; align-items: center; gap: 14px; }
.rank-card-ic { flex: none; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: oklch(0.95 0.04 var(--cat-hue)); color: oklch(0.5 0.11 var(--cat-hue)); }
.rank-card-title { font-size: 21px; margin-top: 4px; }
.rank-card-desc { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.rank-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }

.rank-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper); transition: transform .14s, box-shadow .18s, border-color .18s; }
.rank-row:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); border-color: var(--green-200); }
.rank-num { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; background: var(--sand); color: var(--ink-soft); }
.rank-num-1 { background: oklch(0.85 0.13 85); color: oklch(0.36 0.08 70); }
.rank-num-2 { background: oklch(0.86 0.02 250); color: oklch(0.4 0.02 250); }
.rank-num-3 { background: oklch(0.84 0.07 50); color: oklch(0.4 0.08 50); }
.rank-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rank-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 800; font-size: 16.5px; color: var(--green-950); }
.rank-reason { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.rank-stars { display: inline-flex; gap: 2px; flex: none; }

@media (max-width: 920px) {
  .rank-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rank-stars { display: none; }
  .rank-row { gap: 11px; padding: 11px; }
}