/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/card.css
   Version: 0.1.4 · Build: 2026-09-22 · Benötigt: tokens.css, base.css
   VENDORED — READ-ONLY.

   0.1.4 — --flush spricht seine Teile jetzt als DIREKTE Kinder an. Als
   Nachfahren-Selektor traf die Regel auch ein __head, das jemand INNERHALB
   des __body untergebracht hatte: doppeltes Polster (16/24 im ohnehin
   schon 24 eingerückten Body) und eine zweite Trennlinie dicht unter der
   ersten. Es sah nach einem Gestaltungsfehler aus und war ein Markupfehler
   — der Selektor hat ihn still bedient, statt ihn zu zeigen.
   Jetzt bekommt ein falsch verschachtelter Kopf gar kein --flush-Polster
   mehr; das fällt auf.

   0.1.3 — Der Haken --bh-card-backdrop ist wieder entfallen. Er war für
   eine Markenebene gebaut, die verworfen wurde (BACKLOG), und hatte damit
   null Nutzer. Ein Haken ohne Bedarf ist eine Vermutung darüber, was
   jemand einmal brauchen könnte — und das DS nimmt nichts auf, wofür kein
   zweiter Bedarf belegt ist. Er kostete nichts und war trotzdem falsch.

   0.1.1 — .bh-card-grid: die mittlere Stufe war festgeschrieben.
   Wer --bh-card-grid-cols auf 2 setzte, bekam bei 1023px keine Reduktion,
   sondern wieder 2 — die erste echte Verschmälerung kam erst bei 767px, und
   auf dem Tablet stand eine zweispaltige Kartenwand in halber Breite. Das
   betraf JEDES Projekt der Flotte, nicht eine einzelne Seite. Die Stufe wird
   jetzt über --bh-card-grid-cols-md gesteuert. Wer vorher nichts gesetzt hat,
   sieht keine Änderung; wer 2 gesetzt hat, ergänzt --bh-card-grid-cols-md: 1.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-card {
  background: var(--bh-surface-1);
  border: 1px solid var(--bh-border-subtle);
  border-radius: var(--bh-radius-xl);
  box-shadow: var(--bh-shadow-1);
  padding: var(--bh-space-5);
  transition: border-color var(--bh-transition), box-shadow var(--bh-transition);
}

.bh-card--compact { padding: var(--bh-space-4); }
.bh-card--flush   { padding: 0; }

/* Anklickbare Karte: hebt sich über Rahmen und eine Schattenstufe, nie über
   Bewegung. */
.bh-card--interactive { cursor: pointer; }
.bh-card--interactive:hover { border-color: var(--bh-border-strong); box-shadow: var(--bh-shadow-2); }
.bh-card--interactive:active { background: var(--bh-surface-3); }
.bh-card--interactive:focus-within { border-color: var(--bh-color-accent); }
.bh-card--interactive:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: var(--bh-focus-offset);
}
.bh-card--interactive.is-disabled,
.bh-card--interactive[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* ── Kopf ────────────────────────────────────────────────────────────────
   Eine Zeile, eine Grundlinie: Titel links, Nebenaktion rechts.            */
.bh-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bh-space-3);
  margin-bottom: var(--bh-space-4);
}
.bh-card--flush > .bh-card__head {
  margin-bottom: 0;
  padding: var(--bh-space-4) var(--bh-space-5);
  border-bottom: 1px solid var(--bh-border-subtle);
}

.bh-card__title {
  margin: 0;
  color: var(--bh-text-primary);
  font-size: var(--bh-text-md);
  font-weight: var(--bh-weight-semibold);
  line-height: var(--bh-leading-normal);
}
.bh-card__subtitle {
  margin: var(--bh-space-1) 0 0;
  color: var(--bh-text-muted);
  font-size: var(--bh-text-xs);
}

.bh-card__body  { min-width: 0; }
.bh-card--flush > .bh-card__body { padding: var(--bh-space-5); }

.bh-card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bh-space-2);
  margin-top: var(--bh-space-4);
  padding-top: var(--bh-space-4);
  border-top: 1px solid var(--bh-border-subtle);
}
.bh-card--flush > .bh-card__foot {
  margin-top: 0;
  padding: var(--bh-space-4) var(--bh-space-5);
}

/* ── Raster ──────────────────────────────────────────────────────────────
   Drei Stufen, zwei davon steuerbar:

     --bh-card-grid-cols      ab 1024px   Standard 3
     --bh-card-grid-cols-md   768–1023px  Standard 2
     unter 768px              immer 1     nicht steuerbar

   Die mittlere Stufe muss steuerbar sein, weil sie sonst die obere überholt:
   ein Raster mit cols: 2 bliebe bei 1023px zweispaltig, statt schmaler zu
   werden. Ein zweispaltiges Raster setzt deshalb beide Werte:

     style="--bh-card-grid-cols: 2; --bh-card-grid-cols-md: 1"                */
.bh-card-grid {
  display: grid;
  gap: var(--bh-space-4);
  grid-template-columns: repeat(var(--bh-card-grid-cols, 3), minmax(0, 1fr));
}
@media (max-width: 1023px) {
  .bh-card-grid { grid-template-columns: repeat(var(--bh-card-grid-cols-md, 2), minmax(0, 1fr)); }
}
@media (max-width: 767px) { .bh-card-grid { grid-template-columns: 1fr; } }