/* ================ OFF-CANVS-MENUE ======================= */

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: rgba(240,240,240, 0.95);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 80px;
    width: 100%;
    margin-top: 00px;
}

.overlay a {
    display: block;
    color: #0F0F0F;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #FF0000;
}

.overlay .closebtn {
    position: absolute;
    top: -7px;
    right: 70px;
    font-size: 100px;
}


@media all and (min-width: 800px) {
        .overlay .closebtn {top: -7px; right: 100px; font-size: 100px;}

}


@media all and (min-width: 1000px) {
        .overlay .closebtn {top: -10px; right: 150px; font-size: 100px;}

}



@media screen and (max-height: 650px) {
  .overlay {overflow-y: auto;}

}






/* ----------------- NAVI --------------------------------------------------------------- */

.menuebar {position: fixed; background-color:#000000; width: 100%; height: 55px; bottom: 0px; z-index: 10; opacity: 1;}

.mennu    {position: fixed; background-color: none; width: 50px; top: 17px; right: 5px; z-index: 50; opacity: 1;}

.nav_back {position: fixed; background-color: none; width: 50px; bottom: 5px; left: -50px; z-index: 50; opacity: 1; }
.nav_join {position: fixed; background-color: none; width: 50px; bottom: 5px; right: 10px; z-index: 50; opacity: 1; }         /* OHNE FUNKTION */
.nav_call {position: fixed; background-color: none; width: 50px; bottom: 5px; right: 65px; z-index: 50; opacity: 1; }
.nav_news {position: fixed; background-color: none; width: 50px; bottom: 5px; right: 115px; z-index: 50; opacity: 1; }
.nav_book {position: fixed; background-color: none; width: 50px; bottom: 5px; right: 10px; z-index: 50; opacity: 1; }
.nav_up   {position: fixed; background-color: none; width: 50px; bottom: 5px; right:42%;  z-index: 50;  opacity: 1; display:none}


.mennu:hover,
.nav_up:hover,
.nav_join:hover,
.nav_call:hover,
.nav_news:hover,
.nav_book:hover{filter: brightness(1.3); transition: 0.2s;}
.nav_back:hover {filter: brightness(0.8); transition: 0.2s;}




@media all and (min-width: 560px) {
         .menuebar {position: fixed; background-color:#FFFFFF; width: 100%; height: 60px; bottom: 0px; z-index: 10; opacity: 1;}
}

@media all and (min-width: 1000px) {
        .menuebar {position: fixed; background-color:none; width: 100%; height: 0px; bottom: -10px; z-index: 10; opacity: 1;}
        .mennu    {width: 50px; top: 17px;  right: 10px; opacity: 1; }
        .nav_back {width: 50px; bottom: 20px;  right: -100px; opacity: 1; }
        .nav_join {width: 50px; top: 90px;  right: 60px; opacity: 1; }     /* OHNE FUNKTION */
        .nav_call {width: 50px; top: 69px;  right: 10px; opacity: 1; }
        .nav_news {width: 50px; top: 121px;  right: 10px; opacity: 1; }
        .nav_book {width: 50px; top: 173px;  right: 10px; opacity: 1; }
        .nav_up   {width: 50px; bottom: 20px; right: 10px; opacity: 1; display:block}
}




.fixed   {color:#7F7F7F;
         text-align:center;
         font-size: 80%;
         font-family: 'Roboto', sans-serif;
         font-weight: 600;
}









a.tip {
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative;
}
a.tip span {
    display: none
}
a.tip:hover span {
    border-bottom: #5F5F5F 1px solid;
    padding: 5px 10px 5px 5px;
    display: block;
    z-index: 100;
    background: none;
    right: 45px;
    margin-top: -25px;
    width: 280px;
    position: absolute;
    top: 0px;
    text-decoration: none;

    font-family: 'Roboto', sans-serif;
        font-size: 90%;
        font-weight: 400;
        letter-spacing: .03em;
        word-spacing: 0.1em;
        line-height:130%;
        text-align:right;
        color:#5F5F5F;
}


@media all and (max-width: 1000px) {
        a.tip:hover span { display: none }
        a.tip:hover {cursor: pointer;}
}

