/* button: Aktionsknopf in vier Rollen und drei Größen. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.button:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-offset); }

.button:disabled, .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.button--primary { background: var(--color-primary); color: var(--color-primary-text); }

@media (hover: hover) {
  .button--primary:hover:not(:disabled) { background: var(--color-primary-hover); }
}

.button--primary:active:not(:disabled) { background: var(--color-primary-hover); }

.button--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }

@media (hover: hover) {
  .button--secondary:hover:not(:disabled) { background: var(--color-surface-muted); }
}

.button--secondary:active:not(:disabled) { background: var(--color-surface-muted); }

.button--ghost { background: transparent; color: var(--color-text-muted); }

@media (hover: hover) {
  .button--ghost:hover:not(:disabled) { background: var(--color-surface-muted); color: var(--color-text); }
}

.button--ghost:active:not(:disabled) { background: var(--color-surface-muted); color: var(--color-text); }

.button--danger { background: var(--color-danger); color: var(--color-danger-text); }

@media (hover: hover) {
  .button--danger:hover:not(:disabled) { background: var(--color-danger-hover); }
}

.button--danger:active:not(:disabled) { background: var(--color-danger-hover); }

.button--sm { min-height: var(--tap-min); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }

.button--lg { min-height: var(--control-height-lg); padding: var(--space-3) var(--space-5); font-size: var(--text-lg); }

.button--block { display: flex; width: 100%; }

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