* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--regular), serif;
    font-size: var(--flowtext);
    line-height: var(--flowtext-lineheight);
    color: var(--prim-color);
}
:root {
    /* Farben */
    --prim-color: rgb(100, 100, 100); /* Primärfarbe */
    --sec-color-gray: rgb(190, 190, 190); /* Hover-Effekt bei Text */
    --sec-color-gray-tp: rgba(190, 190, 190, 0.7); /* Hover-Effekt Transparent für Image Slider */
    --sec-color-gray-light: rgb(240, 240, 240);
    --sec-color-white: rgb(255, 255, 255); /* Hover-Effekt bei Bildern */
    --sec-color-anthrazit: rgb(40, 40, 40);

    /* Schriftgrößen */
    --headline-1: 40pt; /* Firmenname */
    --headline-1-lineheight: 40pt;
    --headline-2: 16pt; /* Überschrift in Fließtext */
    --headline-2-lineheight: 20pt;
    --flowtext: 11pt;
    --flowtext-lineheight: 15pt;
    --subline-lineheight: 12pt;
    --main-menu: 16pt; /* Hauptmenü */
    --main-menu-mobile: 20pt; /* Hauptmenü MOBIL */
    --sub-menu: 12pt; /* Untermenü */
    --subline: 10pt; /* Bildunterschrift */

    /* Schriftarten */
    --regular: 'Roboto-Regular';
    --thin: 'Roboto-Thin';
    --light: 'Roboto-Light';

}

@font-face {
    font-family: "Roboto-Regular";
    src: url("../resource/font/Roboto/Roboto-Regular.ttf");
}
@font-face {
    font-family: "Roboto-Thin";
    src: url("../resource/font/Roboto/Roboto-Thin.ttf");
}
@font-face {
    font-family: "Roboto-Light";
    src: url("../resource/font/Roboto/Roboto-Light.ttf");
}

body {
    margin: 6vh 10vw 6vh 10vw
}

#header-top {    
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    height: auto;
}
#home-link {
    margin-right: 4vw;
    text-decoration: none;
    font-family: var(--thin);
    font-size: var(--headline-1);
    line-height: var(--headline-1-lineheight);
    color: var(--prim-color);
}
#header-sideinfo {
    display: none;
    font-size: var(--subline);
    color: var(--prim-color);
    text-align: right;
}
#menu-icon {
    display: none;
    margin-left: auto;
    margin-right: 0;
    margin-top: auto;
    margin-bottom: 0;
    width: 36px;
    height: 36px;
}
#menu-icon:hover {
    background-color: var(--sec-color-gray-tp);
}

/*Navbar DESKTOP*/
.header-navbar {    
    margin-top: 6vh;
}
.header-navbar > ul {
    display: flex;
    list-style-type: none;
}
.header-navbar-item {    
    height: auto;
    padding-right: 3.54vw;
}
.header-navbar-item > a {
    text-decoration: none;
    font-size: var(--main-menu);
    color: var(--prim-color);
}
.active-link {
    border-bottom: 1px solid var(--prim-color);
    padding-bottom: 0.1em;    
}

.header-navbar-item > a:hover {
    color: var(--sec-color-gray);
}

/*Navbar MOBILE*/
.overlay {
    height: 100%;
    width: 0%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}
.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: var(--main-menu-mobile);
    color: #818181;
    display: block;
    transition: 0.3s;
}
.overlay a.active-link-mobile {
    color: var(--sec-color-anthrazit);
}
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}
.overlay .nav-closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}




footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10vh;
    margin-bottom: 5vh;
}
footer > p {    
    font-size: var(--subline); 
}
footer > p:nth-of-type(2) {
    margin-left: auto;
    margin-right: 20px;
}
footer > p > a {
    text-decoration: none;
    color: var(--prim-color)
}

@media only screen and (min-width: 900px) {
    #header-sideinfo {
        display: inline-block;
    }
}
@media only screen and (min-width: 768px) and (max-width: 899px) {
    #header-top {
        display: block;
    }
    footer {
        display: block;
    }
    footer > p:nth-of-type(2) {
        margin-right: 0;
        margin-top: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .header-navbar {
        display: none;
    }
    #menu-icon {
        display: inline-block;
    }
    footer {
        display: block;
    }
    footer > p:nth-of-type(2) {
        margin-right: 0;
        margin-top: 10px;
    }
}