/* --- Karten und Bento-Raster (DESIGN 4, 7) ------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.bento--compact {
  gap: var(--grid-gap-compact);
}

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

@media (width < 1200px) {
  .span-3 { grid-column: span 6; }
  .span-4 { grid-column: span 6; }
  .span-8 { grid-column: span 12; }
}

@media (width < 900px) {
  .span-3,
  .span-4,
  .span-6,
  .span-8 {
    grid-column: span 12;
  }

  .bento--tiles > .span-3 {
    grid-column: span 6;
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  background: var(--gradient-card);
  box-shadow: var(--shadow-card);
}

.card--compact {
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--r-tile);
}

.card--flush {
  padding: 0;
  overflow: hidden;
}

/* Hero-Karte: höchstens eine je Seite, warmes Licht und Bernstein-Rand unten. */
.card--hero {
  border-color: rgba(240, 174, 102, 0.16);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(240, 174, 102, 0.1), transparent 70%),
    var(--gradient-card);
}

.card--hero::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: -1px;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, rgba(240, 174, 102, 0), rgba(240, 174, 102, 0.75) 50%, rgba(240, 174, 102, 0));
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  min-height: 32px;
}

.card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--text-h2);
}

.card--compact .card__title {
  font: var(--text-h3);
}

.card__subtitle {
  color: var(--text-2);
}

/* Kartenfuß: sitzt immer am unteren Rand der Karte (.card ist eine Flex-Spalte). Ohne
   `margin-top: auto` schloss er direkt an den Inhalt an, und die Trennlinien dreier gleich
   hoher Karten einer Reihe lagen auf drei verschiedenen Höhen (AP 1.7, Review). */
.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-2);
}

/* In einer randlosen Karte (`card--flush`, `padding: 0`) bringt der Fuß seinen Innenabstand
   selbst mit; sonst klebt sein Text am abgerundeten Kartenrand und wird angeschnitten
   (gemessen: 1 px links; AP 3.1, Review). `.pager` macht dasselbe seit AP 1.7, nur für die
   Blätterleiste – diese Regel gilt für jeden Fuß. */
.card--flush .card__foot {
  padding: var(--space-3) var(--space-4);
}

/* Fließtext im Kartenfuß. `.card__foot` ist eine Flex-Zeile mit `space-between`: Ein Satz mit
   Auszeichnung darin (`<code>`, `<strong>`) zerfällt sonst in mehrere Flex-Kinder, die über die
   volle Breite auseinandergezogen werden – aus einem Satz wurden drei Zeilen (AP 1.7, Review).
   Entweder diese Variante verwenden oder den Satz in genau ein Kind fassen. */
.card__foot--text {
  display: block;
}

/* Große Zähler, z. B. „Signale des letzten Handelstags“ (DESIGN 3 „display“). */
.counters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.counter {
  display: grid;
  gap: var(--space-1);
  justify-items: center;
  padding: var(--space-4) var(--space-2);
  text-align: center;
}

.counter__value {
  font: var(--text-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.counter__value--hero {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.counter__label {
  color: var(--text-2);
}

.counter__value--empty {
  color: var(--text-3);
}