/* ==========================================================================
   1. OVERLAY & POPUP CONTAINER (Standardmäßig ausgeblendet!)
   ========================================================================== */

/* Der graue, halbdurchsichtige Hintergrund */
.overlay-container {
    /* WICHTIG: display: none OHNE !important, damit JavaScript es überschreiben darf! */
    display: none; 
    
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 1000002 !important;
    
    /* Flexbox für die Zentrierung */
    justify-content: center !important;
    align-items: center !important;
}

/* Der eigentliche Popup-Kasten */
.overlay-container #popup {
    display: inline-flex !important; 
    position: relative !important;   /* Ankerpunkt für das "X" */
    
    left: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    z-index: 1000002 !important;
    opacity: 1 !important;
    
    /* ANGEPASST: Kleiner als vorher (35% statt 50%, 70vh statt 85vh) */
    max-width: 35% !important;       
    max-height: 70vh !important;     
    box-sizing: border-box !important;
}

/* Das Hauptbild im Popup */
.overlay-container #popup img {
    max-width: 100% !important;
    /* ANGEPASST: Muss zur max-height des Containers passen (70vh statt 85vh) */
    max-height: 70vh !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
}


/* ==========================================================================
   2. SCHLIESSEN-BUTTON (Das "X")
   ========================================================================== */

a#bclose_xh, 
a#close_xh,
.bclose {
    cursor: pointer !important;
    display: block !important;
    position: absolute !important;
    
    top: -15px !important;
    right: -15px !important;
    
    width: 35px !important;
    height: 35px !important;
    z-index: 1000005 !important;
}

a#bclose_xh img,
a#close_xh img,
.bclose img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}


/* ==========================================================================
   3. POPUP-BUTTON (Aktions-Button AUF dem Bild)
   ========================================================================== */

.popupbutton {
    position: absolute;
    /* ANGEPASST: Proportional zum kleineren Popup etwas verkleinert */
    right: 40px;
    width: 250px; /* Vorher 350px */
    bottom: 30px; /* Vorher 40px */
    z-index: 999999;
    display: block;
}

.popupbutton:hover {
    content: url('https://www.rkh-mb.de/fileadmin/popup/button-hover.svg');
}


/* ==========================================================================
   4. RESPONSIVE ANPASSUNGEN (Mobilgeräte)
   ========================================================================== */

@media (max-width: 767px) {
    .overlay-container #popup {
        /* ANGEPASST: Auf dem Handy etwas schmaler (70% statt 85%) */
        max-width: 70% !important;
    }

    .popupbutton {
        position: absolute;
        right: 8% !important;
        width: 45% !important;
        bottom: 5% !important;
    }
    
    a#bclose_xh,
    a#close_xh,
    .bclose {
        right: -8px !important;
        top: -12px !important;
        width: 30px !important;
        height: 30px !important;
    }
}