:root{
    --primaryColor: black;
    --secondaryColor: #FF6600;
    --tertiaryColor:#1E1E1E;
    --quartiereColor:#191919;
    --fontMainColor:white;

}

body{
    margin:0px;
    font-family: DIN, sans-serif;
    color:var(--fontMainColor);
}

#innerBody{
    margin: 4px;
    height:400%;
}

/*
Navigation Bar
 */
#navbar{
    display:block;
    /*position:sticky;
    top:0;*/
    list-style-type:none;
    margin:0;
    padding:0;
    background-color:var(--primaryColor);
    overflow:hidden;
    display: flex;
    align-items: stretch;
    font-size:1.5em;
    width:100%;
    /*Navbar über allen anderen Elementen darstellen*/
    z-index:2;
}

.navbar-li{
    display: flex;
    justify-content: space-around;
    align-items: center;
    color:white;
    float: left;
    width:20%;
}
.navbar-li a{
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: var(--fontMainColor);
    text-align: center;
    text-decoration: none;
    cursor:pointer;
    height: 100%;
    width:100%
}
.navbar-li a:hover{
    color:var(--secondaryColor);
    cursor: pointer;
}

#navbar-button{
    border: 5px solid var(--secondaryColor);
    border-radius:10px;
    width:8%;
    margin-right:1%;
}

.navbar-button:hover{

}

#navbar-logo{
    max-width:4.5em;
}

#navButton{
    visibility: hidden;
    width:0px;
}

/*
Allgemein
 */
.page{
    min-height:100vh;
    max-height: 1000vh;
    margin-left:1vh;
    margin-right: 1vh;
}

.centeredPage{
    min-height:87vh;
    max-height: 1000vh;
    display: flex;
    justify-content: center;
}

#firstPage{
    min-height:87vh;
    max-height: 1000vh;
    display: flex;
    justify-content: center;
}

#lastPage{
    height: 20vh;
}


.whiteTitle{
    color:white;
    font-size:3em;
}


.whiteParagraph{
    var(--fontMainColor);
    font-size:1.5em;
}

.orangeParInline{
    color:var(--secondaryColor);
    margin: 0px;
    padding:0px;
    display:inline;
}

.centered{
    text-align: center;
}

.flexCentered{
    display: flex;
    align-items: center;
}

.defaultLink{
    color: var(--secondaryColor);
}



@media screen and (max-width: 1400px) {
    .whiteParagraph,
    .whiteTitle{
        text-align: center;
    }
}


/*
Navbar - mobile
 */
@media screen and (max-width: 1100px) {
    #navbar{
        display:block;
        top:0;
    }
    .navbar-li{
        visibility: hidden; !important;
        height: 0px; !important;
    }
    .navbar-li a{
        width: 100%;
        text-align:left;
        padding-left:2vw;
        padding-top:1vh;
        padding-bottom:1vh;
    }

    .navbar-li-hidden{
        display:block;
        width:100%;
        font-size:2.4em;
        border-bottom:1px solid white;
    }
    .navbar-li-hidden a{
        display: flex;
        color: var(--fontMainColor);
        text-align:left;
        padding-left:2vw;
        text-decoration:none;
        padding-top:1.5vh;
        padding-bottom:1.5vh;
    }

    #subNavDiv{
        height: 0%;
    }
    #navButton{
        visibility: visible;
        width:3em;
        float:right;
        margin-top:1.5em;
        margin-right:1em;
        margin-bottom:1.5em;
        cursor:pointer;
    }

    .navbar-mobile-main{
        visibility: visible;
        height: 100%;
        max-height: 10vh;
        width:100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #navbar-logo{
        max-height: 10vh;
    }

    .whiteTitle{
        font-size:5em;
        text-align: center;
    }

    .whiteParagraph{
        font-size:2em;
    }

    #firstPage{
        /*padding-top:10vh;

         */

    }

    #firstPage,
    .page,
    .centeredPage{
        min-height: 90vh;
    }
}