/* ═══════════════════════════════════════════════════════
   FW Schrietz — Knöpfe für Admin, Monitor und Funk
   Eine Familie, alte Klassennamen bleiben als Aliase gültig:
     Hauptaktion  .btn-red   = .btn-primary (Monitor) = .btn-rot (Funk)
     Nebenaktion  .btn-ghost = .btn-leer (Funk)
     Gefahr       .btn-danger
     Klein        .btn-sm    = .btn-klein (Funk)
   Die Website hat eigene, größere Knöpfe (css/site.css).
═══════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    position: relative;
    padding: 0.58rem 1.15rem;
    font-family: var(--btn-font); font-size: var(--btn-size); font-weight: var(--btn-weight);
    letter-spacing: var(--btn-track); text-transform: var(--btn-case);
    border-radius: var(--radius-sm);
    cursor: pointer; border: none; text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, filter 0.15s, opacity 0.15s, transform 0.15s var(--ein);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-red, .btn-primary, .btn-rot { background: var(--red); color: #fff; }
.btn-red:hover, .btn-primary:hover, .btn-rot:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn-ghost, .btn-leer { background: var(--surface2); color: var(--text-mid); border: 1px solid var(--border); }
.btn-ghost:hover, .btn-leer:hover { border-color: var(--border-red); color: var(--text); background: rgba(232,25,44,0.06); }

.btn-danger { background: rgba(232,25,44,0.12); color: #ff6b75; border: 1px solid rgba(232,25,44,0.25); }
.btn-danger:hover { background: rgba(232,25,44,0.2); border-color: rgba(232,25,44,0.45); transform: translateY(-1px); }

.btn-sm, .btn-klein { padding: 0.35rem 0.8rem; font-size: var(--btn-size-sm); }
.btn:disabled:hover { filter: none; transform: none; }