
<style>
/*---------- Browser resets and presets typography ----------*/
*{}
* {font-family: 'Open Sans', sans-serif;font-weight:400;}
p, a, span, html, body, figure, figcaption, h1, h2, h3, h4, h5 {margin:0;padding:0;}
p, a, span, html, body, figure, figcaption {font-size:1em;letter-spacing:.025em;line-height:1.65;}
a>img {border:none;}
input[type="checkbox"] {border:none;}
p {padding-bottom:1em;}
h1 {padding-bottom:.5em;}
h1, h2 {color:#0086de;letter-spacing:-.015em}
h4 + h1 {margin-top:1em;}
h3, h3 a, h4, h4 a {font-weight:700;font-size:1em;}
/*h3 {line-height:1.35;}*/
a {transition:color .5s;-webkit-transition:color .5s;}
a:link, a:visited, label {color:#0086de;text-decoration:none;}
a:hover, a:active {color:#333;}
h1, h1 a {font-size:2.35em;font-weight:300;line-height:1.1;}
h2/*, h2 a*/ {font-size:1.3em;font-weight:400;}
a[href$=".pdf"]::before {content:url(images/pdf.png);margin-right:.25em;position:relative;top:.15em;}
a[href$=".pdf"]::after {content:" (pdf)";}
#top {position:fixed;bottom:6em;z-index:9;}
#bg {position:fixed;z-index:-19;width:100%;height:100%;left:0;top:0;background: url(images/bg_logo.jpg);background-position:center top;}
#themenbild {width:100%;height:18em;background-size:cover;background-repeat:no-repeat;background-position:center center;}
/*---------- Browser resets and presets typography ----------*/


/*---------- Navigation Styling ----------*/
nav {height:10em;padding:0 1em;width:70%;max-width:85em;text-align:center;display:table;margin:0 auto;}
nav a:link, nav a:visited {color:#333;}
nav a:hover, nav a:active, nav .current_page_item>a, nav .current_page_ancestor>a {color:#0086de;}
#logo {height:5em;padding:0 2em 0 0;display:table-cell}
#logo img {height:5em;position:relative;top:2em;}
ul#hauptnav {display:inline;padding-left:2%;display:table-row}
ul#hauptnav>li {display:table-cell;text-align:left;padding-right:3em;}
ul#hauptnav>li:last-of-type {padding-right:0em;}
ul#hauptnav>li>a {font-weight:400;position:relative;z-incdex:99}
ul.sub-menu {position:absolute;display:none;opacity:0;}
ul.sub-menu>li, ul.sub-menu>li>a {padding:0;line-height:.9;text-align:left}
ul#hauptnav>li:hover>ul.sub-menu, ul#hauptnav>li.current_page_item>ul.sub-menu, ul#hauptnav>li.current_page_ancestor>ul.sub-menu {display:block;opacity:1;background-color:rgba(255,255,255,.9);padding:0 .5em .5em;border-radius:.5em;}
ul#hauptnav>li>ul.sub-menu {list-style:none;}
.sub-menu .menu-item {padding:0.25em 0 0 0;}
ul#hauptnav>li>ul>li>a {font-weight:400;font-size:.8em;}
#drop-nav {display:none;}
#drop-nav select {outline:none;-webkit-appearance:none;margin:0;position:absolute;top:3.5em;z-index:99;left:20%;margin-left:1.5em;width:70%;padding:.25em .25em .25em 1.75em;	-moz-padding-left:2.5em;box-shadow:none;border:1px solid #999;font-size:1em;border-radius:0;background-color:#fff;}
/*---------- Navigation Styling ----------*/


/*---------- Main Styling ----------*/
.main {max-width:68em;margin:0 auto;}
article {width:55%;float:right;padding:5%}
.main a:link[target="_blank"] {padding-right:1.25em;background-image:url(images/external_link.svg);background-size:1em;background-position:right center;background-repeat:no-repeat;}
/*---------- Main Styling ----------*/



/*----------  Aside Container (Marginalspalte) und dessen Inhalte ----------*/
aside {width:30%;float:left;padding:5% 0 5% 5%;}
.videoWrapper {position:relative;padding-bottom:56.25%;padding-top: 25px ;}
.videoWrapper iframe {position:absolute;top: 0;left: 0;width: 100%;height: 100%;}
figure {padding-top:4.3em;padding-bottom:2em;}
figure img {width:100%;}
figcaption {font-size:.8em;font-weight:400;line-height:1.5;}
figcaption.right {text-align:right;}
/*----------  Aside Container und dessen Inhalte ----------*/


/*---------- Footer ---------- */
footer {height:2.5em;padding-top:.5em;font-size:0.8em;position:fixed;bottom:0;background:#fff;width:100%;text-align:center;border-top:1px solid #ddd;}
#fontsize {position:fixed;left:1em;}
#fontsize input {position:relative;top:.2em;width:1.75em;height:1.75em;}
#fontsize label {color:#0086de;}
.komprimiert {display:none;}
/*---------- Footer ---------- */


/*----------  Intro Seite ---------- */
.dia {position:fixed;z-index:-19;width:100%;height:100%;left:0;top:0;background-position:center top;background-size:cover;}
#navtransparenzbar { position:absolute;width:67%;z-index:0;border-left:4.5em solid rgba(255,255,255,.0);height:3.75em;top:2.6em;right:0;background:rgba(255,255,255,.8)}
/*----------  Intro Seite ---------- */

/*---------- Smartphone mediaqueries: ----------*/
@media (min-width : 2340px) {
#navtransparenzbar {width:50%;border-left:28em solid rgba(255,255,255,.0);}
}
@media (max-width : 1050px) {
.komprimiert {display:inline}
.komplett {display:none;}
ul#hauptnav>li {padding-right:1em;}
img#logo {padding-right:1em}
#navtransparenzbar {width:50%;border-left:12em solid rgba(255,255,255,.0);}
}
@media (max-width:882px) {
#logo img {margin-right:-19.235em;}
#navtransparenzbar {border-left:15em solid rgba(255,255,255,.0);}
}
@media (max-width:700px) {
article {width:90%;}
aside {display:none;}
/*nav-changes*/
	nav {height:7em;text-align:left;display:block;width:auto;}
	ul#hauptnav {display:none;}
	#navtransparenzbar {width:100%;height:5em;top:1em;right:0;background:rgba(255,255,255,.8)}
	#drop-nav {display:block;background:url(images/menu.png) left center no-repeat;background-size:contain;}
	#drop-nav:focus{border-color:#0086de;color:#0086de;}
	#drop-nav:focus option{color:#0086de;}
	#drop-nav option>option {font-size:.75em;}
	#logo_small {position:absolute;left:5%;top:1em;width:90%;height:5em;background-size:contain;background-repeat:no-repeat;background-position:left top;}
figure {padding: 1em 10%;}
figcaption.right {text-align:left;}
#glossarfigure {column-count:2;-webkit-column-count:2;-moz-column-count:2;} /* Glossar Zweispaltigmachen */
#top{bottom:.75em;right:1em;}
#themenbild {height:15em;}
}
@media (max-width:480px) {
#glossarfigure {column-count:1;-webkit-column-count:1;-moz-column-count:1;} /* Glossar Einspaltigmachen */
#themenbild {height:10em;}
}
</style>