/* V1.0 */

#custom-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0; 
    height: 100vh;
    height: 100dvh; 
    width: 100%;
    z-index: 99999;
    /* overscroll-behavior: none; */

    overflow-y: auto;
    
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    
    /* === NEU: === */
    box-sizing: border-box; /* Verhindert, dass das Padding die Box riesig macht */

}


/* Optional: Den Mauszeiger beim Button anpassen, da es eine Grafik ist */
#but-cm-open {
    position: relative; /* Oder 'fixed', falls dein Header mitscrollt */
    z-index: 100000 !important;    /* Muss höher sein als die 99999 von #custom-menu */
    cursor: pointer;    /* Zeigt die Hand beim Hover, da es eine Grafik ist */
}

#but-cm-close {
    cursor: pointer;
}

#but-cm-open .menu-closed {
  background-color: blue !important;
}

/* Wenn der Divi Builder AKTIV ist, heben wir die Fixierung auf */
body.et-fb #custom-menu {
    position: relative !important;
    /* height: auto !important;*/
    z-index: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Verhindert den Highlight-Kasten auf dem iPhone/iPad */
#but-cm-open, 
#but-cm-close {
    -webkit-tap-highlight-color: transparent;
    outline: none;
    box-shadow: none;
}

/* Dein bisheriges :focus-visible zur Sicherheit beibehalten */
#but-cm-open:focus-visible {
    outline: 2px solid #0a56c7;
    outline-offset: 2px;
}