/* import font google poppins 
@import url("Poppins-Black.ttf");
*/
@font-face {
    src: url("Poppins-Regular.ttf");
    font-family: Poppins;
}


body {
    padding: 0;
    margin: 0;
    background-color: white;
    font-family: "Poppins", sans-serif, Verdana, sans-serif;

}









/* öffnungszeiten */
div#open {

    color: rgb(160, 158, 158);

    font-size: medium;
    text-align: center;
    margin: 0.5px;

    position: sticky;
    top: 80px;
    backdrop-filter: blur(0px); 
    

    display: flex;
    justify-content: center;
    align-items: center;
}


/* call Icon number als span inline innerhalb div öffnungszeiten  */

a[href^="tel:"]:before {
    content: "\260e";
    margin-right: 10px;
    margin-left: 20px;
    color: black;
    font-size: large;

}


a[href^="tel:"]:link {
    text-decoration: none;
    color: black;
    font-size: medium;

}

a[href^="tel:"]:hover {

    color: magenta;


}




/* ausrichtung center elemente */

.mitte {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* teaser shop merci beauty lounge */
#teaser {
    width: 100%;
    height: 300px;
}

#teaser img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (min-width:800px) {
    #teaser {
        height: 600px;
    }
}





/* fussbereich */

footer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 24px;
    padding-bottom: 24px;
}

footer ul li a {
    font-weight: 600;
    padding: 16px;
}

section {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

section#Kontakt ul {
    list-style: none;

}





.social-icon {
    color: black;
    transition: color 0.2s;
    text-decoration: none;

    align-items: center;
    font-size: large;
    text-align: center;

}

div.footer {
    text-align: center;
    padding-top: 10px;
}

.social-icon:hover {
    color: magenta;

}

ion-icon {
    font-size: 32px;

}





footer {
    background-color: silver;


}

.rechtliches {
    color: rgb(113, 112, 112);
    font-size: small;
    text-decoration: none;
}

.rechtliches:hover {
    color: rgb(160, 158, 158);
}

/* folge merci auf google maps */

a.maps:link {

    text-decoration: none;
    color: magenta;
}

a.maps:visited {

    text-decoration: none;
    color: magenta;
}


a.maps:hover {
    color: silver;


}

.merci.home {
    color: magenta;

}




header a {
    text-decoration: none;

}

header {
    padding: 0 20px;
    background-color: white;
    height: 100px;
    display: flex;
    justify-content: space-between;


    margin-top: 12px;
    margin-bottom: 12px;

    position: sticky;
    top: 0px;
    backdrop-filter: blur(0px);

}





nav ul {
    list-style: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

}

nav ul a {
    color: rgb(160, 158, 158);

}

nav ul a:visited {
    color: rgb(160, 158, 158);

}




nav ul li {
    padding: 5px;
    margin-left: 10px;

}

nav ul li:hover {
    transform: scale(1.1);
    transition: 0.3s;

}












#hamburger-icon {
    margin: auto 0;
    display: none;
    cursor: pointer;
}

#hamburger-icon div {
    width: 35px;
    height: 3px;
    background-color: black;
    margin: 6px 0;
    transition: 0.4s;

}




#hamburger-icon ul a {
    color: magenta;

    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;


}






.open .bar1 {
    -webkit-transform: rotate(-45deg) translate(-6px, 6px);
    transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
    opacity: 0;
}

.open .bar3 {
    -webkit-transform: rotate(45deg) translate(-6px, -8px);
    transform: rotate(45deg) translate(-6px, -8px);
}


.mobile-menu {
    display: none;
    position: absolute;
    top: 75px;
    left: 0;
    height: calc(100vh - 50px);
    width: 100%;

    list-style: none
}

.open .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    background-color: silver;
    font-size: larger;
    margin-top: 70px;
    margin-bottom: 100px;
    margin-left: 0;
    margin-right: 0;

    position: absolute;
    top: 100px;
    left: 0;
    height: calc(100vh - 50px);
    width: 100%;

    list-style: none










}

.open .mobile-menu ul a {
    color: rgb(160, 158, 158);
}

.open .mobile-menu:link {
    color: rgb(160, 158, 158);
}

.open .mobile-menu:visited {
    color: rgb(160, 158, 158);
}



.mobile-menu li {
    margin-bottom: 10px;
    color: rgb(160, 158, 158);

}

@media only screen and (max-width: 600px) {
    header nav {
        display: none;
    }

    #hamburger-icon {
        display: block;
    }
}

span#feme {
    color: magenta;
    font-size: larger;
}

span#men {
    color: rgb(147, 144, 144);
    font-size: larger;

}

span#kids {
    color: #d4af37;
    font-size: larger;
    
}

ul#copyright{
    color:  rgb(113, 112, 112);
    font-size: smaller;
    background-color: silver;
    list-style: none;
    padding-top: 0;
    padding-bottom: 2px;
    text-align: center;
    

}