/**
 * card.css — Service-Karte (T-07).
 *
 * Die Karte ist vollflächig anklickbar, enthält aber genau EINEN Link im
 * Accessibility-Tree. Erreicht wird das über ein Pseudoelement, das die
 * Kartenfläche aufzieht — nicht über zusätzliche Links oder ein umschliessendes
 * <a>, das die Überschrift schlucken würde.
 *
 * Bewusster Nachteil: Text innerhalb der Karte lässt sich nicht mehr markieren.
 * Dokumentiert in docs/REDAKTION.md.
 */

.ec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ec-space-2xs);
  padding: var(--ec-space-md);
  border: var(--ec-border-width) solid var(--ec-color-border);
  border-radius: var(--ec-radius-lg);
  background-color: var(--ec-color-surface);
  transition:
    border-color var(--ec-duration-fast) var(--ec-ease),
    box-shadow var(--ec-duration-fast) var(--ec-ease);
}

.ec-card:hover {
  border-color: var(--ec-color-primary);
  box-shadow: var(--ec-shadow-md);
}

/* Fokus liegt auf dem Link, sichtbar wird die ganze Karte. */
.ec-card:has(.ec-card__link:focus-visible) {
  outline: var(--ec-focus-width) solid var(--ec-color-focus);
  outline-offset: var(--ec-focus-offset);
}

.ec-card__icon {
  color: var(--ec-color-primary);
}

.ec-card__title {
  margin: 0;
  font-size: var(--ec-fs-h3);
}

.ec-card__link {
  color: var(--ec-color-ink);
  text-decoration: none;
}

.ec-card__link::after {
  position: absolute;
  z-index: var(--ec-z-stretch);
  content: "";
  inset: 0;
}

.ec-card__link:focus-visible {
  outline: none;
}

.ec-card__teaser {
  max-width: none;
  margin: 0;
  color: var(--ec-color-ink-muted);
}

.ec-card__more {
  margin-top: auto;
  padding-top: var(--ec-space-2xs);
  color: var(--ec-color-primary);
  font-weight: var(--ec-fw-medium);
}