/* Mobile-First: Download-Hinweis-Modals unter den Hero-Buttons (011-ui-js.mdc Regel 007: keine Inline-Styles in JS) */

.screen-webmastertools-hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.screen-webmastertools-download-wrap {
    position: relative;
    display: inline-block;
}

.screen-webmastertools-download-modal {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: min(380px, calc(100vw - 32px));
    z-index: 99999;
}

.screen-webmastertools-modal-closed {
    display: none;
}

.screen-webmastertools-download-wrap:hover .screen-webmastertools-download-modal:not(.screen-webmastertools-modal-closed),
.screen-webmastertools-download-wrap:focus-within .screen-webmastertools-download-modal:not(.screen-webmastertools-modal-closed) {
    display: block;
}

@media (max-width: 575px) {
    .screen-webmastertools-download-modal {
        left: 0;
        transform: none;
        width: min(380px, calc(100vw - 24px));
    }
}

@media (min-width: 576px) {
    .screen-webmastertools-hero-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }
}