/* ====================================================
   buttons.css — Knopf-System .btn (-primary/-secondary/-ghost/-danger/-sm)
   Ausgelagert aus components.css am 2026-10-10 (single source), damit
   Seiten ohne components.css den Zeitzonen-Hinweis mit denselben
   Knoepfen zeigen. components.css bindet diese Datei oben per @import ein.
   ==================================================== */

/* ─────────────────────────────────────────────────────
   BTN SYSTEM
   Semantic button classes für Seiten-CSS-Migration.
   Basis: .btn — Modifier: -primary/-secondary/-ghost/-danger/-sm
   ───────────────────────────────────────────────────── */

.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         10px 20px;
    font-size:       var(--text-body, 16px);
    font-weight:     var(--weight-semibold, 600);
    font-family:     inherit;
    line-height:     1.2;
    border:          1px solid transparent;
    border-radius:   var(--radius-md, 8px);
    cursor:          pointer;
    white-space:     nowrap;
    user-select:     none;
    text-decoration: none;
    min-height:      44px;
    transition:      background 120ms ease,
                     border-color 120ms ease,
                     color 120ms ease;
}

.btn:focus-visible {
    outline:    none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(91, 135, 204, 0.35));
}

.btn:disabled,
.btn[disabled] {
    opacity:        0.45;
    cursor:         not-allowed;
    pointer-events: none;
}

/* Primary — brand action */
.btn-primary {
    background:   var(--color-primary, #5b87cc);
    border-color: var(--color-primary, #5b87cc);
    color:        var(--neutral-0); /* WP-4 */
}
@media (hover: hover) and (pointer: fine) {
    .btn-primary:not(:disabled):hover {
        background:   var(--color-primary-dark, var(--accent-hover, #2a5fa8));
        border-color: var(--color-primary-dark, var(--accent-hover, #2a5fa8));
    }
}
.btn-primary:active:not(:disabled) {
    background:   var(--accent-active, #1a3e73);
    border-color: var(--accent-active, #1a3e73);
}

/* Secondary — outlined, subtle fill */
.btn-secondary {
    background:   var(--bg-surface, #fff);
    border-color: var(--border-default, #e9ecef);
    color:        var(--text-primary, #060f1c);
}
@media (hover: hover) and (pointer: fine) {
    .btn-secondary:not(:disabled):hover {
        background:   var(--bg-subtle, #f1f3f5);
        border-color: var(--border-strong, #dee2e6);
    }
}

/* Ghost — transparent, low-emphasis */
.btn-ghost {
    background:   transparent;
    border-color: transparent;
    color:        var(--text-secondary, #495057);
}
@media (hover: hover) and (pointer: fine) {
    .btn-ghost:not(:disabled):hover {
        background: var(--bg-subtle, #f1f3f5);
    }
}

/* Danger — destructive action */
.btn-danger {
    background:   var(--color-error, #dc2626);
    border-color: var(--color-error, #dc2626);
    color:        var(--neutral-0); /* WP-4 */
}
@media (hover: hover) and (pointer: fine) {
    .btn-danger:not(:disabled):hover {
        background:   var(--danger-text, #b91c1c);
        border-color: var(--danger-text, #b91c1c);
    }
}

/* Small variant */
.btn-sm {
    padding:    6px 12px;
    font-size:  var(--text-caption, 12px);
    min-height: 32px;
}