/**
 * chip.css — Filterschalter (T-07).
 *
 * Echte <button>-Elemente in einem Formular: damit funktioniert der Filter
 * ohne JavaScript serverseitig, und aria-pressed ist semantisch zulässig.
 */

.ec-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ec-space-sm);
  margin-bottom: var(--ec-space-lg);
}

.ec-filter__set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ec-space-2xs);
  margin: 0;
  padding: 0;
  border: 0;
}

.ec-chip {
  min-height: var(--ec-space-xl);
  padding: var(--ec-space-3xs) var(--ec-space-sm);
  border: var(--ec-border-width) solid var(--ec-color-border-strong);
  border-radius: var(--ec-radius-pill);
  background-color: var(--ec-color-surface);
  color: var(--ec-color-ink);
  font: inherit;
  cursor: pointer;
  transition:
    background-color var(--ec-duration-fast) var(--ec-ease),
    border-color var(--ec-duration-fast) var(--ec-ease),
    color var(--ec-duration-fast) var(--ec-ease);
}

.ec-chip:hover {
  border-color: var(--ec-color-primary);
  color: var(--ec-color-primary);
}

.ec-chip[aria-pressed="true"] {
  border-color: var(--ec-color-primary);
  background-color: var(--ec-color-primary);
  color: var(--ec-color-surface);
}

.ec-filter__count {
  max-width: none;
  margin: 0;
  color: var(--ec-color-ink-muted);
  font-size: var(--ec-fs-small);
}