/**
 * Karte: erhöhte Fläche, 1 px Kontur, Radius xl, großzügiger Innenabstand.
 * Kopf: .card__head mit optionalem .icon, .card__title (Standardfarbe) und
 * .card__text (gedämpft). Variante .card--highlight: Akzentkontur (2 px) mit
 * leichtem innerem Schein. Konturen statt Schatten.
 */
@layer components {
  .card {
    padding: var(--theme-card-padding);
    border: var(--border-width-thin) solid var(--theme-card-border);
    border-radius: var(--theme-card-radius);
    background-color: var(--theme-card-bg);
  }

  .card--highlight {
    border-color: var(--theme-card-accent);
    box-shadow:
      inset 0 0 0 var(--border-width-thin) var(--theme-card-accent),
      inset 0 0 2rem color-mix(in srgb, var(--theme-card-accent) 22%, transparent);
  }

  .card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .card__head > .icon {
    margin-block-start: 0.1875rem;
    color: var(--theme-meta-color);
  }

  .card__title {
    margin-block-end: var(--space-1);
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-normal);
  }

  .card__title a {
    text-decoration: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .card__title a:hover {
      text-decoration: underline;
    }
  }

  .card__text,
  .card__meta {
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
  }
}

@layer components {
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
}