body.mks-section-focus-mode {
    --mks-focus-opacity: 0.22;
    --mks-focus-blur: 4px;
    --mks-focus-grayscale: 0.65;
    --mks-focus-transition: 260ms ease;
}

body.mks-section-focus-mode .mks-section-dimmed {
    opacity: var(--mks-focus-opacity);
    filter:
        blur(var(--mks-focus-blur))
        grayscale(var(--mks-focus-grayscale));
    transition:
        opacity var(--mks-focus-transition),
        filter var(--mks-focus-transition);
    pointer-events: none;
    user-select: none;
}

body.mks-section-focus-mode .mks-section-active {
    position: relative;
    z-index: 2;
    opacity: 1;
    filter: none;
    transition:
        opacity var(--mks-focus-transition),
        filter var(--mks-focus-transition);
}

.mks-show-all-sections {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;
    min-height: 46px;
    padding: 0.72rem 1.1rem;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #111;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.16),
        0 2px 8px rgba(0, 0, 0, 0.08);
    font: inherit;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.mks-show-all-sections:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.2),
        0 3px 10px rgba(0, 0, 0, 0.1);
}

.mks-show-all-sections:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

@media (max-width: 680px) {
    body.mks-section-focus-mode {
        --mks-focus-opacity: 0.16;
        --mks-focus-blur: 3px;
    }

    .mks-show-all-sections {
        right: 14px;
        bottom: 14px;
        min-height: 44px;
        padding: 0.68rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.mks-section-focus-mode .mks-section-dimmed,
    body.mks-section-focus-mode .mks-section-active,
    .mks-show-all-sections {
        transition: none;
    }
}

@media (prefers-color-scheme: dark) {
    .mks-show-all-sections {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(24, 24, 24, 0.94);
        color: #fff;
    }

    .mks-show-all-sections:hover {
        background: rgba(34, 34, 34, 0.98);
    }
}

.mks-paywall__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 1.75rem; } .mks-paywall__buy, .mks-paywall__login { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.85rem 1.25rem; border-radius: 999px; font-weight: 700; font-size: 0.98rem; line-height: 1; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease; } /* Primärbutton */ .mks-paywall__buy { background: #1f2a44; color: #fff; border: 1px solid #1f2a44; box-shadow: 0 8px 20px rgba(31, 42, 68, 0.18); } .mks-paywall__buy:hover, .mks-paywall__buy:focus { background: #162039; border-color: #162039; color: #fff; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(31, 42, 68, 0.24); } /* Sekundärbutton */ .mks-paywall__login { background: transparent; color: #1f2a44; border: 1px solid rgba(31, 42, 68, 0.22); } .mks-paywall__login:hover, .mks-paywall__login:focus { background: rgba(31, 42, 68, 0.06); color: #162039; border-color: rgba(31, 42, 68, 0.38); transform: translateY(-1px); } /* Fokus sichtbar */ .mks-paywall__buy:focus-visible, .mks-paywall__login:focus-visible { outline: 3px solid rgba(31, 42, 68, 0.22); outline-offset: 3px; } /* Mobil untereinander */ @media (max-width: 640px) { .mks-paywall__actions { flex-direction: column; align-items: stretch; } .mks-paywall__buy, .mks-paywall__login { width: 100%; } }