/* --- Knöpfe und Links (DESIGN 5) ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ease), border-color var(--ease), filter var(--ease), color var(--ease);
}

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

.btn--primary {
  background: var(--gradient-light);
  color: var(--text-inverse);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.btn--primary:hover:not(:disabled) {
  filter: brightness(1.06);
}

.btn--secondary {
  border-color: var(--border-subtle);
  background: var(--surface-pill);
  color: var(--text-1);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--surface-pill-hover);
}

.btn--accent {
  background: var(--gradient-accent);
  color: #1a1208;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px -14px rgba(240, 174, 102, 0.8);
}

.btn--accent:hover:not(:disabled) {
  filter: brightness(1.06);
}

/* Nicht umkehrbarer Schritt (Liste löschen). Er steht nie allein in einer Tabellenzeile,
   sondern immer erst auf der Bestätigungsseite – die Farbe sagt nur noch, was gleich passiert
   (DESIGN 5 „Knopf“, ergänzt nach dem Review zu AP 3.1). */
.btn--danger {
  border-color: var(--neg-strong);
  background: var(--neg-bg);
  color: var(--neg-soft);
}

.btn--danger:hover:not(:disabled) {
  border-color: var(--neg);
  background: var(--neg-strong);
  color: var(--text-1);
}

.btn--ghost {
  background: transparent;
  color: var(--text-2);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--surface-pill);
  color: var(--text-1);
}

.btn--sm {
  height: 32px;
  padding: 0 14px;
  font-size: 0.8125rem;
}

.btn--block {
  width: 100%;
}

.icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--surface-pill);
  color: var(--text-1);
  transition: background-color var(--ease), border-color var(--ease);
}

.icon-btn:hover,
.icon-btn[aria-expanded="true"] {
  border-color: var(--border);
  background: var(--surface-pill-hover);
}

.icon-btn__close,
.icon-btn[aria-expanded="true"] .icon-btn__open {
  display: none;
}

.icon-btn[aria-expanded="true"] .icon-btn__close {
  display: block;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-1);
  font-weight: 500;
  text-decoration: none;
}

.link-arrow .icon {
  transition: transform var(--ease);
}

.link-arrow:hover .icon {
  transform: translateX(2px);
}