@layer components {

/* ── Nav-Buttons ── */
.btn-nav-logout {
    background: var(--font-grey);
    color: var(--white);
    border: none;
    border-radius: 4px;
    padding: 4px 11px;
    font-size: var(--fs-sm);
    cursor: pointer;
    font-family: inherit;
    font-weight: var(--fw-medium);
    transition: background-color 0.12s;
}
.btn-nav-logout:hover,
.btn-nav-logout:focus { background: var(--mid-gray); color: var(--white); }

.btn-embed-logout { background-color: var(--bg-color); border: none; padding-left: 0; }
.btn-embed-logout svg { width: 16px; height: 16px; }

/* ── Generische Button-Klassen ── */
.btn {
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: var(--fw-semibold);
    transition: all 0.3s ease;
    display: inline-block;
    border: none;
    cursor: pointer;
    font-size: var(--fs-2xl);
}

.btn-primary {
    background: var(--data-blue-2);
    color: var(--white);
    width: 100%;
    padding: 14px 24px;
}
.btn-primary:hover {
    background: var(--data-blue-3);
    transform: translateY(-1px);
    box-shadow: var(--shadow-blue-hover);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary--highlight { background: linear-gradient(135deg, var(--font-highlight) 0%, var(--font-accent) 100%); }

.btn-login, .btn-submit { width: 100%; margin-bottom: 20px; }

.btn-secondary { background: var(--border-color); color: var(--font-base); }
.btn-secondary:hover { background: var(--dark-surface-color); }

/* ── Auth Bestätigungsseiten ── */
.action-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* ── Speichern-Button (capacity) ── */
.capacity .entry-list button {
    padding: 4px 10px;
    height: fit-content;
    width: fit-content;
    border: none;
    border-radius: 4px;
    background-color: var(--data-blue-2);
}
.capacity .entry-list button:focus,
.capacity .entry-list button:hover {
    background-color: color-mix(in srgb, var(--data-blue-2) 50%, var(--data-blue-3) 50%);
}
.capacity .entry-list button:active {
    background-color: var(--data-blue-3);
    color: var(--font-grey);
}
.capacity .entry-list button.disabled {
    background-color: var(--font-grey);
    color: var(--font-light);
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .btn { padding: 12px 20px; }
}

} /* @layer components */