/*
========================================================================================================================
========================================================================================================================
========================================================================================================================
Desktop-First Design
==========
==========
==========
*/

/*
==========
Hanburger-Menu
==========
*/

/* ===== General Hamburger-Menu Styling ===== */

.hamburger-menu {
    display: none;
}





/*
========================================================================================================================
========================================================================================================================
========================================================================================================================
@media (max-width: 992px)
==========
==========
==========
*/




@media (max-width: 992px) {

/* 
==========
Hanburger-Menu
==========
*/

/* ===== General Hamburger-Menu Styling ===== */

.hamburger-menu {
    width: 50px;
    height: 50px;
    display: block;
}

/* ===== Checkbox ===== */ 

.hamburger-menu-checkbox {
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 10;
    opacity: 0;
    cursor: pointer;
}

/* Wenn das Hamburger-Menü aktiv ist */
.hamburger-menu-checkbox:checked {
    position: fixed;
}

/* ===== Strokes ===== */ 

.hamburger-menu-strokes {
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 9;
    /* background: rgba(0, 0, 0, 0.431); */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger-menu-strokes div {
    position: relative;
    width: 40px;
    height: 4px;
    background-color: rgb(88, 87, 89);

    transition: all ease 300ms;
}

/* Wenn das Hamburger-Menü aktiv ist */
.hamburger-menu-checkbox:checked + .hamburger-menu-strokes > div {
    position: fixed;
}

.hamburger-menu-strokes div::before, 
.hamburger-menu-strokes div::after {
    content: '';
    width: 40px;
    height: 4px;
    background-color: inherit;
    position: absolute;
    top: -10px;
    z-index: 9;
}

.hamburger-menu-strokes div::after {
    top: 10px;
}

/* Stroke animation */

.hamburger-menu-checkbox:checked + .hamburger-menu-strokes > div {
    transform: rotate(135deg);
    background-color: white;
}

.hamburger-menu-checkbox:checked + .hamburger-menu-strokes > div::before, 
.hamburger-menu-checkbox:checked + .hamburger-menu-strokes > div::after {
    top: 0;
    transform: rotate(90deg);
    background-color: white;
}

/* .hamburger-menu-checkbox:checked:hover + .hamburger-menu-strokes > div {
    transform: rotate(225deg);
} */

/* ===== Menu ===== */

.main-hamburger-menu {
   min-width: 100vw;
   min-height: 100vh;
   background-color: rgb(88, 87, 89);
   position: fixed;
   top: 0;
   left: 0;
   z-index: 8;
   transform: translateX(100%);
   opacity: 0;

   transition: all ease 800ms;
}

.main-hamburger-menu > div {
    width: 100%;
    height: 100%;
    position: absolute; 
    top: 0%;
    left: 0%;
    overflow: scroll;
}

.main-hamburger-menu ul li a {
    color: white;
}

.hamburger-menu-checkbox:checked ~ .main-hamburger-menu {
    transform: translateX(0%);
    opacity: 1;
}

/* Implementierung Logo 2 */

.logo-2-hamburger-menu img {
    height: 86.4px;
    padding-left: 5vw;
}

.logo-2-hamburger-menu {
    height: 120px;
    display: flex;
    align-items: center;
}


/* Implementierung Main-nav */

.main-nav-hamburger-menu {
    padding-left: 5vw;
}

/* Grösse und Weight der einzelnen Main Menüpunkte */
.main-nav-hamburger-menu ul li a span {
    font-size: 25px;
    font-weight: 700;
}



}




/*
========================================================================================================================
========================================================================================================================
========================================================================================================================
@Media (max-width 767px)
==========
==========
==========
*/

@media (max-width: 767px) {

/* 
==========
Hanburger-Menu
==========
*/

/* Implementierung Logo 2 */

.logo-2-hamburger-menu img {
    height: 84px;
    padding-left: 5vw;
}

/* Diese Höhe anpassen um den Toggle Button (in aktiviertem Zustand) zu zentrieren */
.logo-2-hamburger-menu {
    height: 110px;
}

}




/*
========================================================================================================================
========================================================================================================================
========================================================================================================================
@media (max-width: 500px)
==========
==========
==========
*/




@media (max-width: 500px) {

 /*
 ==========
 Hamburger-Menu
 ==========
 */
 
/* Implementierung Logo 2 */

.logo-2-hamburger-menu img {
    height: 48px;
    padding-left: 5vw;
}

.logo-2-hamburger-menu {
    height: 70px;
    display: flex;
    align-items: center;
}





}