/* ============================================================
   BUTTONS — ein Klassensystem für alle Buttons der Seite
   .btn                Basis, immer zusätzlich zu einem Modifier
   .btn--confirm        Bestätigen (Gold)
   .btn--cancel          Abbrechen (neutral/grau)
   .btn--danger          Löschen / gefährliche Aktion (rot)
   .btn--steam           Steam-Login
   .btn--ghost           Transparent, nur Rahmen
   Größen: .btn--sm  ·  .btn--icon (quadratisch, nur Icon)
   Gruppierung: .btn-group
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: var(--bg-raised);
  color: var(--text-primary);
  transition: background var(--transition), transform var(--transition);
}
.btn:hover  { background: var(--border); transform: translateY(-1px); }
.btn:disabled, .btn.is-disabled { opacity: .5; cursor: default; pointer-events: none; transform: none; }

.btn--confirm {
  background: var(--accent);
  color: var(--accent-text);
}
.btn--confirm:hover { background: var(--accent-hover); }

.btn--cancel {
  background: var(--bg-raised);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--cancel:hover { background: var(--border); }

.btn--danger {
  background: var(--danger);
  color: #fff;
}
.btn--danger:hover { background: var(--danger-hover); }

.btn--steam {
  background: var(--steam-bg);
  color: var(--steam-text);
  border-color: var(--steam-border);
}
.btn--steam:hover { background: var(--steam-hover); color: #fff; }

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.btn--ghost:hover { background: var(--bg-raised); }

.btn--sm   { padding: 5px 12px; font-size: var(--fs-meta); border-radius: var(--radius-sm); }
.btn--icon { padding: 8px; width: 34px; height: 34px; border-radius: var(--radius); flex-shrink: 0; }
.btn--icon.btn--sm { width: 26px; height: 26px; padding: 4px; }

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

/* Schmaler Pfeil-Button für Slider/Karussell-Navigation (ehem. .wg-arrow / .tlb-arrow / .ts-arrow) */
.btn--arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  width: 20px;
  height: 20px;
  border-radius: var(--radius);
  font-size: 20px;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.2s;
}
.btn--arrow:hover { background: transparent; color: var(--text-primary); transform: none; }

.btn-group {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}
.btn-group--split { justify-content: space-between; }