/* Buttons: mindestens 48px hoch, mobil volle Breite. */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: var(--touch-target); min-width: var(--touch-target);
  padding: 0 var(--space-4); margin: var(--space-1) 0;
  font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  color: var(--color-text); background: var(--color-surface-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); filter: none; }
.btn-secondary { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border); }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-danger); }
.btn-danger:hover { background: var(--color-danger-hover); filter: none; }

form.button_to, .button_to { margin: 0; }

.actions { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); }
.actions form { margin: 0; }
.actions .btn { margin: 0; }

@media (min-width: 600px) {
  .btn { display: inline-flex; width: auto; padding: 0 var(--space-5); margin: var(--space-1) var(--space-2) var(--space-1) 0; }
  .actions { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
  .btn-block { width: 100%; }
}