/* ============================================================================
 * statcard.css - tc-statcard
 * ----------------------------------------------------------------------------
 * SCHICHT 1. KPI-Kachel: Icon-Medaillon + grosser Wert + Label + optionales
 * Delta (Trend vs. Vorwert). Reicher als tc-stat-block (Quick-Stat) - fuer
 * Kopf-Kennzahlen (Rating, Gold, Bilanz ...). In .tc-statcard-grid anordnen.
 *
 * THEME-GETRIEBEN (Sieg/Niederlage-Toenung nutzt Semantik-Farben = DATEN).
 *
 * Struktur:
 *   .tc-statcard-grid              responsives Raster (auto-fit)
 *   .tc-statcard  (--gold/--win/--loss)
 *     .tc-statcard__icon
 *     .tc-statcard__body
 *       __value . __label . __delta (--up/--down/--flat)
 * ============================================================================ */

.tc-statcard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.tc-statcard { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--tc-radius-lg, 12px); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.14)); border: 1px solid var(--tc-border-subtle); transition: all var(--tc-motion-normal, 200ms ease); }
.tc-statcard:hover { border-color: var(--tc-border-default); transform: translateY(-1px); box-shadow: var(--tc-shadow-md); }
.tc-statcard__icon { width: 40px; height: 40px; border-radius: var(--tc-radius-md, 8px); display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0; background: radial-gradient(circle at 30% 25%, rgba(var(--tc-accent-rgb),0.22), rgba(0,0,0,0.35)); border: 1px solid rgba(var(--tc-accent-rgb),0.28); }
.tc-statcard__body { min-width: 0; display: flex; flex-direction: column; }
.tc-statcard__value { font-family: var(--tc-font-body, sans-serif); font-weight: 700; font-size: 1.7rem; color: var(--tc-text-strong); font-variant-numeric: tabular-nums; line-height: 1; }
.tc-statcard__label { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tc-text-muted); margin-top: 3px; }
.tc-statcard__delta { font-size: 0.62rem; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; }
.tc-statcard__delta--up { color: var(--tc-success, #4ade80); }
.tc-statcard__delta--down { color: var(--tc-danger, #f87171); }
.tc-statcard__delta--flat { color: var(--tc-text-muted); }
.tc-statcard--gold .tc-statcard__icon { background: radial-gradient(circle at 30% 25%, rgba(var(--tc-highlight-rgb),0.25), rgba(0,0,0,0.35)); border-color: rgba(var(--tc-highlight-rgb),0.32); }
.tc-statcard--gold .tc-statcard__value { color: var(--tc-highlight); }
.tc-statcard--win .tc-statcard__icon { background: radial-gradient(circle at 30% 25%, rgba(74,222,128,0.2), rgba(0,0,0,0.35)); border-color: rgba(74,222,128,0.3); }
.tc-statcard--loss .tc-statcard__icon { background: radial-gradient(circle at 30% 25%, rgba(248,113,113,0.18), rgba(0,0,0,0.35)); border-color: rgba(248,113,113,0.3); }

/* ----------------------------------------------------------------------------
 * KLICKBAR (20.08.2026, Tim: „Die hier sollten klickbar sein und
 * Kontextinformationen geben.")
 *
 * Die Kachel hatte seit jeher einen Hover-Zustand (Rand heller, 1px hoch) —
 * sie SAH also anfassbar aus und war es nicht. Das ist die unangenehmere
 * Haelfte des Problems: Ein toter Knopf ist schlimmer als eine Anzeige, die
 * gar nicht erst danach aussieht.
 *
 * Der Modifier macht aus der Kachel einen Knopf. `__hinweis` ist die Zeile
 * darunter — bewusst NICHT `__delta`: Das ist ein Trend (rauf/runter) und
 * traegt eine Aussage ueber die Entwicklung. Hier steht, was ein Klick bringt.
 * -------------------------------------------------------------------------- */
.tc-statcard--klickbar { cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; }
.tc-statcard--klickbar:hover { border-color: rgba(var(--tc-highlight-rgb), 0.4); }
.tc-statcard--klickbar:focus-visible { outline: none; border-color: var(--tc-highlight); box-shadow: 0 0 0 2px rgba(var(--tc-highlight-rgb), 0.45); }

/* Der Pfeil sitzt in der Ecke und bleibt SICHTBAR. Ihn erst beim Zeigen
   einzublenden hilft genau dort nicht, wo die Frage entsteht — am Handy gibt
   es kein Hover, und am Schreibtisch muss man raten, wo sich Zeigen lohnt. */
.tc-statcard__pfeil {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--tc-text-muted);
  opacity: 0.55;
  transition: opacity var(--tc-motion-normal, 200ms ease), transform var(--tc-motion-normal, 200ms ease);
}
.tc-statcard--klickbar:hover .tc-statcard__pfeil,
.tc-statcard--klickbar:focus-visible .tc-statcard__pfeil { opacity: 1; transform: translateX(2px); color: var(--tc-highlight); }

.tc-statcard__hinweis {
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--tc-text-muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .tc-statcard, .tc-statcard__pfeil { transition: none; }
  .tc-statcard--klickbar:hover { transform: none; }
}