/* ==========================================================================
Buttons: .btn / .btn.btn-outline / .btn-row

Baut auf base.css auf (--accent, --white sowie die Modifier .accent / .dark /
.very-dark an der Section). Auf farbigen Sektionen kehrt sich der Button um.
Das Formular-Pendant .btn-submit liegt in base.css.
========================================================================== */

.btn, a.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;

    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.08em;

    padding: 0.85rem 1.6rem;
    border-radius: 50px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--white);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;

    white-space: normal;
    text-align: center;
    &:hover {
        box-shadow: 0 0 12px rgba(152, 0, 46, 0.35);
        transform: translateY(-1px);
    }
}

.btn.btn-outline {
    background: transparent;
    color: var(--accent);
}

/* Auf farbigen Sektionen kehrt sich der Button um */
.accent .btn,
.dark .btn,
.very-dark .btn {
    background: var(--white);
    color: var(--accent);
    border-color: var(--white);

    &:hover {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
    }
}

.accent .btn.btn-outline,
.dark .btn.btn-outline,
.very-dark .btn.btn-outline {
    background: transparent;
    color: var(--white);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.5rem 0;
}