@font-face {
    font-family: 'Yanone Kaffeesatz';
    font-style: normal;
    src: local('Yanone Kaffeesatz'), local('Yanone Kaffeesatz'), url('../css/fonts/YanoneKaffeesatz-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
}

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial;
    font-size: 1rem;
}
@font-face{
    font-family: Pepsi;
    src: url(fonts/logo.TTF);
}

nav{
    z-index: 999;
    position: relative;
    height: 4rem;
    background: #D41819;
    color: #fff;
}
nav img#fsBogen{
    display: none;
    position: absolute;
    left: 0;
    height: 4rem;
}
header{
    position: absolute;
    font-family: Pepsi;
    line-height: 4rem;
    padding: 0.25rem 1rem;
    text-shadow: 1px 1px 1px #000;
}
#hamburger{
    width: 3rem;
    float: right;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem 0 0.5rem;
}
#hamburger img, #hamburgerHover img{
    height: 3rem;
}
nav #menu{
    display: none;
    //background: yellow;
}
nav #menu ul{
    position: absolute;
    list-style-type: none;
    width: 100%;
    top: 2.7rem;
    padding: 0;
    background: #D41819;
    border-radius: 0 0 8px 8px;
}
nav #menu ul hr{
    clear: both;
    color: #fff;
    margin: 0;
}
nav #menu ul span{
    display: block;
    padding: 0.5rem 0;
    text-align: center;
    background: #000;
    color: #fff;
}
nav #menu li{
    width: 48%;
    margin: 0 1%;
    padding: 0;
    border-bottom: 1px dotted #fff;
}
nav #menu ul li.catLI{
    color: #000;
    font-weight: bold;
    width: 94%;
}
nav #menu ul li.leftLI{
    float: left;
}
nav #menu ul li.rightLI{
    float: right;
}
nav #menu ul li.catLI, nav #menu li a{
    display: block;
    padding: 0.5rem 0;
}
nav #menu div#hamburgerHover{
    position: absolute;
    height: 3rem;
    right: 0;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    background: #ccc;
    border-radius: 5px 5px 0 0;
}
nav #menu li.noBottomLine{
    border-bottom: none;
}
#hotline{
    border-top: 1px solid #fff;
    text-align: center;
    background: #535760;
    padding-bottom: 0.2rem;
}
.phone{
    color: #fff;
}
.hoverMe img{
    width: 100%;
    //box-shadow: 3px 3px 3px #d41819;
}
.hoverText{
    font-size: 0.75rem;
}

footer{
    bottom: -6px;
    left: 0;
    width: 100%;
    background: #d41819;
    background: linear-gradient(to top, #D41819 90%, #535760 100%);
    padding: 5px 0 10px 0;
    text-align: center;
}
footer ul.notSmallScreen, .picSlide ul.notSmallScreen, article.notSmallScreen{
    display: none;
}
footer a#dateifabrik{
    position: absolute;
    right: 0;
    padding: 0.25rem 1rem;
    font-size: 0.8rem;
    color: #fff;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    outline: none;
}
footer a#dateifabrik:hover{
    color: rgba(255,255,255,1.0);
}
footer a#dateifabrik li{
    background: transparent;
}

/*
// STYLES BY SCREEN SIZE
*/
@media screen and (max-device-width: 300px){
    header{
        visibility: hidden;
    }
}

@media screen and (max-device-width: 767px){

    #hamburger:hover ~ #menu, nav #menu:hover{
        display: block;
    }
    #hamburger:hover ~ #menu ul, #hamburger:hover img, nav #menu:hover ul,  nav #menu:hover #hamburgerHover{
        background: #ccc;
    }
    nav #menu ul div.hoverMenu div.subLastRow{
        display: inline-block;
        width: 100%;
        height: 0.5rem;
        background: #fff;
    }

}

@media screen and (min-device-width: 480px){

    nav img#fsBogen{
        display: block;
    }
    header{
        padding-left: 6.5rem;
        font-size: 1.4rem;
    }

}


@media screen and (min-device-width: 768px){

    header{
        font-size: 2rem;
    }
    #hamburger, #hamburgerHover, nav #menu ul hr, nav #menu ul span, nav #menu ul li{
        display: none;
    }
    nav #menu, nav #menu ul li.hoverLI{
        display: block;
    }
    nav #menu ul{
        border-top: 1px solid #fff;
        top: 4.4rem;
        text-align: center;
        padding: 0;
        border-radius: 0;
        background: linear-gradient(#D41819 90%, #535760 100%);
    }
    nav #menu ul div.hoverMenu{
        display: inline-block;
        background: #fff;
        position: relative;
        width: 8.5rem; /* Breite des MenüButtons */
    }
    nav #menu ul div.hoverMenu div.subMenu{
        position: absolute;
        display: none;
        background: #fff;
    }
    nav #menu ul li.catIndex{
        width: 8.5rem; /* Breite des MenüButtons */
        padding: 0;
        margin: 0;
        border-bottom: 1px solid #535760;
    }
    nav #menu ul li.catIndex a{
        color: #000;
        text-decoration: none;
    }
    nav #menu ul li.leftLI, nav #menu ul li.rightLI, nav #menu ul li.catLI{
        float: none;
        width: 8.5rem; /* Breite des MenüButtons */
        border-bottom: 1px dotted #535760;
        margin: 0;
        padding-left: 0;
    }
    nav #menu ul li.catLI{
        font-weight: normal;
        border-bottom: 1px solid #535760;
    }
    nav #menu ul li.catLI:hover{
        border-bottom: 1px dotted #535760;
    }
    nav #menu ul div.hoverMenu div.subMenu li a{
        text-decoration: none;
        color: #535760;
    }
    nav #menu ul div.hoverMenu div.subMenu li:last-of-type{
        border-bottom: none;
    }

    /* IMPORTANT menu hover functions */
    nav #menu ul div.hoverMenu:hover div.subMenu{
        display: block;
        box-shadow: 0 2px 2px 1px #535760;
    }
    nav #menu ul div.hoverMenu li.hoverLI:hover ~ div.subMenu li{
        position: relative;
        display: block;
    }
    nav div.hoverMenu{
        cursor: pointer;
    }
    nav #menu ul div.hoverMenu div.subMenu:hover li{
        display: block;
    }
    nav #menu ul li.catIndex:hover, nav #menu ul li.catIndex:hover a, nav #menu ul div.hoverMenu div.subMenu li:hover, nav #menu ul div.hoverMenu div.subMenu li:hover a{
        background: #535760;
        color: #fff;
        text-shadow: 1px 0 1px #000;
    }
    nav div#menu ul div.hoverMenu li.active, nav div#menu ul div.hoverMenu li.active a{
        text-decoration: underline;
    }
    nav div#menu ul div.hoverMenu div.subMenu li.active{
        background: #333;
        text-decoration: none;
    }
    nav div#menu ul div.hoverMenu div.subMenu li.active a{
        color: #fff;
        text-decoration: none;
    }

    .hoverText{
        font-size: 1rem;
    }
    /*
    nav #menu ul li.catLI:hover{
        background: #fff;
        color: #000;
        text-shadow: none;
    }
    */
    /* END menu hover functions */


    nav #menu ul div.hoverMenu div.subMenu li.notBigScreen, nav #menu ul li.notBigScreen, footer span.notBigScreen{
        display: none;
    }
    #hotline{
        box-sizing: border-box;
        text-align: left;
        padding-left: 2rem;
    }
    a.phone{
        text-decoration: none;
    }
    footer{
        position: fixed;
        z-index: 2;
    }
    footer ul.notSmallScreen{
        display: inline-block;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .picSlide ul.notSmallScreen{
        display: block;
        position: absolute;
        width: 100%;
        list-style: none;
    }
    footer ul.notSmallScreen li{
        display: inline-block;
        min-width: 5rem;
        font-size: 0.8rem;
        background: #000;
    }
    footer ul.notSmallScreen li a{
        display: block;
        height: 100%;
        padding: 0.25rem 0.5rem;
        color: #fff;
        color: rgba(255,255,255,0.8);
        text-decoration: none;
    }
    footer ul.notSmallScreen li a:hover{
        color: rgba(255,255,255,1.0);
    }

}