/* ============================================================
   Card – Surface + Titel + Body + optional Actions
   Konsumiert ausschließlich Semantic-Tokens aus dist/tokens.css
   ============================================================ */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);

  background-color: var(--color-surface-default);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-surface);
  padding: var(--space-inset-lg);
  box-shadow: var(--elevation-sm);
  overflow: hidden;
}

/* ── Image-Variante ───────────────────────────────────────── */
.card--image {
  padding: 0;
  gap: 0;
}

.card__image {
  width: 100%;
  display: block;
  object-fit: cover;
}

.card--image .card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
  padding: var(--space-inset-lg);
}

/* ── Titel ────────────────────────────────────────────────── */
.card__title {
  margin: 0;
  font: var(--text-style-title-l);
  font-weight: var(--weight-bold);
  color: var(--color-text-default);
}

/* ── Body ─────────────────────────────────────────────────── */
.card__body {
  margin: 0;
  font: var(--text-style-body-m);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

/* ── Actions (optional) ───────────────────────────────────── */
.card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-gap-md);
}