/* ============================================================
   MOL-Sticker — Monitorul Oficial Local Floating Link
   Stilistisch konsistent mit dem Accessibility-Sticker:
     - rechts am Rand fixiert
     - Markenblau (#2567ad)
     - High-Contrast-Mode unterstützt
   Vertikale Compliance-Linie rechts, dezent versetzt:
     - MOL-Sticker bei top 10 % (klar oben, prominent)
     - Accessibility-Button bei top 55 % (knapp unter der Mitte)
   Auf Mobile bleiben beide kompakt gestackt (siehe @media unten).
   ============================================================ */

/* Hinweis: Die Positionierung des Accessibility-Buttons wird direkt in
   user/themes/editorial/assets/accessibility/accessibility.css gepflegt
   (Panel bei top: 55%, Button im Panel zentriert via translateY(-50%)).
   Kein Override hier nötig — beide Sticker reagieren damit identisch auf Resize. */


#mol-sticker {
    position: fixed !important;
    right: 0 !important;
    top: 10% !important;
    z-index: 9998 !important; /* unter Acc-Panel (9999): Panel darf überlagern */

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;

    padding: 16px 10px !important;
    background: #2567ad !important;
    color: #ffffff !important;
    text-decoration: none !important;

    border-radius: 6px 0 0 6px !important;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.15) !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.06em !important;

    transition: background 0.2s ease, padding-right 0.2s ease !important;
}

#mol-sticker i {
    font-size: 18px !important;
    line-height: 1 !important;
}

#mol-sticker .mol-sticker-label {
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
}

#mol-sticker:hover,
#mol-sticker:focus {
    background: #1d5290 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding-right: 14px !important;
    outline: none !important;
}

#mol-sticker:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: -4px !important;
}

/* High-Contrast-Mode des Accessibility-Plugins respektieren */
body.acc-high-contrast #mol-sticker {
    background: #000000 !important;
    color: #ffff00 !important;
    border: 2px solid #ffff00 !important;
}

body.acc-high-contrast #mol-sticker i {
    color: #ffff00 !important;
}

/* Mobile: 50×50 Icon-Button, direkt über dem Accessibility-Button gestackt.
   Accessibility-Button sitzt bei top:50% (siehe accessibility.css .acc-btn-float
   → .acc-panel top:50% mit translateY(-50%) und Button bei top:-1px left:-51px).
   Wir setzen den MOL-Button etwa 55px höher → bildet einen sauberen Stack. */
@media (max-width: 768px) {
    #mol-sticker {
        top: 50% !important;
        transform: translateY(calc(-50% - 55px)) !important;

        flex-direction: row !important;
        padding: 0 !important;
        width: 50px !important;
        height: 50px !important;

        justify-content: center !important;
        align-items: center !important;

        border-radius: 0 !important;
        border-left: 1px solid #ddd !important;
        border-top: 1px solid #ddd !important;
        border-bottom: 1px solid #ddd !important;
    }

    #mol-sticker .mol-sticker-label {
        display: none !important;
    }

    #mol-sticker i {
        font-size: 22px !important;
    }
}