/* DM Overlay Manager – Frontend-Styles */

/* ── Wrapper (füllt den Viewport) ───────────────────────────────── */
.dm-overlay-wrap {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;   /* Klicks gehen durch, außer auf aktiven Elementen */
}

/* ── Backdrop (halbtransparenter dunkler Hintergrund) ───────────── */
.dm-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
    pointer-events: all;
}

/* ── Popup-Box ──────────────────────────────────────────────────── */
.dm-overlay-box {
    position: absolute;
    background: #ffffff;
    border-radius: 8px;
    padding: 28px 28px 24px;
    max-width: 500px;
    width: 90%;
    pointer-events: all;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* ── Positionen (Desktop) ───────────────────────────────────────── */
.dm-overlay-bottom-center .dm-overlay-box {
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
}
.dm-overlay-bottom-right .dm-overlay-box {
    bottom: 28px;
    right: 28px;
}
.dm-overlay-middle-center .dm-overlay-box {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.dm-overlay-middle-right .dm-overlay-box {
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
}

/* ── Schließen-Button ───────────────────────────────────────────── */
.dm-overlay-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}
.dm-overlay-close:hover {
    color: #111;
}

/* ── Inhalt ─────────────────────────────────────────────────────── */
.dm-overlay-content {
    margin-top: 4px;
}
.dm-overlay-content h1,
.dm-overlay-content h2,
.dm-overlay-content h3 {
    margin-top: 0;
}

/* ── Mobile: immer Unten Mitte ──────────────────────────────────── */
@media (max-width: 768px) {
    .dm-overlay-box {
        bottom: 0   !important;
        left: 50%   !important;
        right: auto !important;
        top: auto   !important;
        transform: translateX(-50%) !important;
        border-radius: 10px 10px 0 0;
        max-width: 100%;
        width: 100%;
        padding: 24px 20px 28px;
    }
}