@font-face {
    font-family: 'OpenSans-Regular';
        src: url('design/fonts/OpenSans-Regular.ttf');
        src: url('design/fonts/OpenSans-Regular.ttf') format ('truetype')
}


@font-face {
    font-family: 'OpenSans-Bold';
        src: url('design/fonts/OpenSans-Bold.ttf');
        src: url('design/fonts/OpenSans-Bold.ttf') format ('truetype')
}

@font-face {
    font-family: 'Audiowide-Regular';
        src: url('design/fonts/Audiowide-Regular.ttf');
        src: url('design/fonts/Audiowide-Regular.ttf') format ('truetype')
}


/* Setup  #F1F300--------------------------------------------- */
:root{
  --main-color: #0075DD;
  --sec-color: black;
}

a { color: #00e; }
a:visited { color: var(--main-color); }
a:hover { color: var(--main-color); }
a:focus { outline: thin dotted; }
a:link{color: var(--main-color); text-decoration: none;}
body {background-color: silver; font-family: 'OpenSans-Regular', Futura, Trebuchet MS, Arial, sans-serif; font-style: normal; }
h1 {margin-bottom:0em;font-size:4rem; color:var(--sec-color);line-height: 1.25em; font-family:'Audiowide-Regular';}
h2 {margin-bottom:0em;font-size:4rem; color:var(--sec-color);line-height: 1.25em; font-family:'Audiowide-Regular';}
h3 {margin-bottom:0.5em;margin-top:0;font-size:2.5rem; line-height: 1.25em; color: var(--main-color); font-family:'Audiowide-Regular';}
/* h3 {margin-bottom:0.5em;margin-top:0;font-size:1.15em;line-height: 1.25em; color:var(--sec-color); font-family:'OpenSans-Bold'} */
h4 {margin-bottom:0.5em;margin-top:0;font-size:1.15em;line-height: 1.25em; color:var(--sec-color); font-family:'OpenSans-Bold'}
#content_right h1 {margin-bottom:0;}
pre {font-family:monospace,serif;font-size:1em;white-space:pre;white-space:pre-wrap;word-wrap:break-word;margin:0;padding:0}
code {font:inherit;font-family:monospace,serif;font-size:1em;margin:0;padding:0}
p{ font-family:'OpenSans-Regular'; margin-bottom: 1em; margin-top: 0.25em; color:var(--sec-color); font-size: 1.25rem; line-height: 1.7em;}
em{font-style: italic;}
strong{ font-family:'OpenSans-Bold'; }
video{width: 100%;}
body{max-width:100%; overflow-x:hidden; background-color: white; background-attachment:fixed; background-size: cover;}
#content ul li{font-size: 1.25rem; line-height: 1.7em; list-style-type: disc;list-style-position: outside; padding-left: 1rem;}
#content ul{margin-left: 1vw;}
/* Struktur ------------------------------------------ */

#header{width: 100vw; height: 125px; background-color: black; position: relative; z-index: 1;}
#navi{width: 75%; position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);}
#navi_inner{display: inline;}
#navi_inner ul > li{display: inline-block; padding: 0 1rem; margin-right: 1rem; font-size: 1.25rem; color: white;}
#navi_inner a{color: white;}
#navi_inner a:hover{color: var(--main-color);}
#navi_inner > ul{display: inline-block;}

#navi_inner ul li ul{background-color: black; position: absolute; display: none;}
#navi_inner ul li:hover ul{display: block;}
#navi_inner ul li ul li{display: block;}

#logo{width: 75px; display: inline-block; margin-right: 5rem;}
#footer{width: 100%; height: 125px; background-color: black;}

/* Mobile Menu ####################################################################################*/
/* #mobile_wrapper, #mobile_navi_inner{display: none; text-align:center; overflow:hidden; margin-right: 2em;} Temp Angabe, kann gelöscht werden wenn mobile integration gestartet wird */
#mobile_wrapper{display: none; text-align:center; overflow:hidden; margin-right: 2em; position: absolute;top: 50%; right: 0; transform: translateY(-50%);}
#mobile_schriftzug_wrapper{display:inline-block; width:78%;}
.mobile_icon{width:40px; height:45px; display:inline-block;}
#mobile_navi_inner{display:none; width: 100%; text-align: left; overflow: hidden; position: absolute; background-color: black; z-index: 1; padding-bottom: 1em; font-size: 2em; left:0;}
#hamburger_line_wrapper{ width:100%; height:100%; padding-top:3px;}
.hamburger_line{position:relative; left: 7.5px;	height:4px;	top:10px; margin-bottom:3px; width: 25px; background-color: white; display:block; border-radius:2px;}
#mobile_schriftzug{background-image:url("design/images/Schriftzug.png"); width:230px; background-size: 100% auto; height:40px; background-repeat:no-repeat; display:inline-block; background-position:center;}
#mobile_navi_inner ul {display: block; overflow: hidden;}

#mobile_navi_inner ul li {text-align: center; border: none; width: 100%; padding: 0.5rem 0 0.5rem 0; border-bottom: 1px solid white;}
#mobile_navi_inner ul li:last-child{border: none;}
#mobile_navi_inner ul li.current a{ color: var(--main-color);}
#mobile_navi_inner ul li ul{display: block;}
#mobile_navi_inner ul li ul li{width: 100%; border: none;}
#mobile_navi_inner ul li ul li{width: 100%;}
#mobile_navi_inner ul li a{font-family: 'OpenSans-Regular'; color: white;}

#mobile_navi_inner ul li ul li a{font-family: 'OpenSans-Regular'; font-size: 1em;}
#mobile_navi_inner ul li ul li ul li a{font-family: 'OpenSans-Regular'; font-size: 0.8em;}
#mobile_navi_inner ul li.current ul li a{color: white;}
#mobile_navi_inner ul li ul li ul li.current{ background-color: #e2b224;}

/* Mobile Menu END ################################################################################*/

/* Elements --------------------------------------------*/

#content .text{width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; min-height: 100vh; position:relative;}
#content .text p:last-child{margin-bottom: 0;}
/* #content .text .inner_text{position: absolute; top: 50%; transform: translateY(-50%);} */
.text_verticalCenter{position: absolute; top: 50%; transform: translateY(-50%);}
.imageContentWidth{max-width: 1200px; margin-left: auto; margin-right: auto;}



/* helper ---------------------------------------------*/
.margin_top{margin-top: 5rem}
.margin_bottom{margin-bottom: 5rem;}

.ganz{width: 100%;}
.halb{width: 48.5%;}

.hidden { display: none !important; visibility: hidden; }
.clear {float: none; clear: both;}


/* #Media Queries -------------------------------------------- */
@media only screen and (min-width: 1201px) {
    h1{font-size: 3.3vw;}
    h2{font-size: 3.3vw;}
    h3{font-size: 2.1vw;}
    p, #content ul li{font-size: 1.05vw;}
    #content .text{max-width: 62.5vw;}
    #navi_inner ul > li{font-size: 1vw}
}

@media only screen and (max-width: 1200px) {
    #navi_inner ul > li{font-size: 1.5vw}
    #content .text{padding: 0 2.5% 0 2.5%; width: 95%; min-height: auto;}
    #content .inner_text{width: 95%;}
    #content ul{margin-left: 1.7vw;}
  
}

@media only screen and (max-width: 940px) {
  #navi_inner{display: none;}
  #navi{width: 100%;}
  #logo{margin-left: 10%;}
  #mobile_wrapper{display: block;}
  #content ul{margin-left: 2.2vw;}
}

@media only screen and (max-width: 720px) {
    h1{font-size: 3rem;}
    h2{font-size: 3rem;}
    h3{font-size: 1.5rem;}
    p, #content ul li{font-size: 1rem;}
    
    #content .text{min-height: auto; margin: 5rem 0} 
    .text_verticalCenter{position: relative; transform: none;}
}

@media only screen and (max-width: 450px) {
    h1{font-size: 2rem;}
    h2{font-size: 2rem;}
    #content ul{margin-left: 3.5vw;}
}