*,:before,:after{box-sizing:border-box}
@font-face{font-family:'federo';src:url(federo.woff2) format("truetype")}
html,body{height:100%;width:100%;font-family:federo,Verdana,sans-serif;font-size:100%;margin:0;padding:0}
body{background:url(../images/video_bg4.jpg);background-size:cover}
h1{font-size:300%}
header{max-width:100%;min-height:1rem;padding:2px}
nav{min-height:1px;text-align:right;position:absolute;right:10px;top:10px;position:fixed;z-index:99}
.drehen{transition:all .5s;display:inline-block;text-rendering:auto;font-size:24px;font-weight:900;color:#fff;text-shadow:#111 2px 2px 4px}
.drehen:hover{transform:rotate(900deg)}
label{display:inline-block;color:#fff;background:#158;padding:.2rem .5rem;margin:.2rem}
#menu{width:100vw;text-align:right;margin-top:-10rem;margin-left:-10rem;visibility:hidden;transition:all 1s;opacity:0}
#menu li{list-style-type:none;margin:.1rem;padding:0;border:#fff 1px solid;border-radius:8px}
#menu li a{display:block;text-align:left;text-decoration:none;padding:6px;color:#fff;border-radius:9px 3px;font-size:110%}
nav ul{position:relative;margin:0;padding:0;background:#333}
nav a{display:block;padding:0 6px;color:#f00;font-size:20px;line-height:30px;text-decoration:none}
nav a:hover{background-color:#0ff}
nav ul ul{display:flex;flex-wrap:wrap;display:none;position:absolute;top:40px;margin-left:-30px;padding:0;}
nav ul li{display:inline-flex;background-color:#820;text-align:left}
nav ul li:hover > ul{display:inherit}
nav ul ul li{max-width:140px;float:none;display:list-item;position:relative;right:140px;top:8px;width:130px}
nav ul ul ul li{position:relative;top:-60px;left:170px}
li > a:after{content:' ↓'}
li > a:only-child:after{content:''}

button#back2top{position:fixed;right:2%;bottom:4%;opacity:0;visibility:hidden;font-size:22px;color:#fff;background-color:red;border:none;border-radius:1rem;padding:3px 2px;margin:0}
#back-top{color:red;width:45px;height:45px;display:block}
.hoch{position:fixed;bottom:10px;right:10px;z-index:10;width:40px}
#background-video{width:100vw;height:100vh;object-fit:cover;position:fixed;left:0;right:0;top:0;bottom:0;z-index:-1}

input[type=checkbox]{display:none}
input[type=checkbox]:checked ~ #menu{visibility:visible;opacity:1;margin-top:4rem;margin-left:0}
#logo{max-width:30%;height:1rem;position:absolute;left:40px;top:10px;position:fixed;font-family:'federo';content:'\f0c9'}
#schatten{margin:0;padding:0;letter-spacing:.2em;color:red;text-shadow:-1px -1px 1px hsl(0,0%,30%),-2px -2px 1px hsl(0,0%,35%),-3px -3px 1px hsl(0,0%,40%),-4px -4px 1px hsl(0,0%,50%),-5px -5px 1px hsl(0,0%,60%)}
article{max-width:90%;margin-top:22rem;margin-left:5%;margin-right:5%;padding:20px;background:#999;background:linear-gradient(to right,rgba(185,188,189,.5) 0%,rgba(232,238,240,.5) 50%,rgba(185,188,189,1) 100%)}
img{max-width:80%;height:auto}
.flexbox{background:#fff;width:100%;display:flex;flex-wrap:wrap;padding:10px;opacity:.8; min-height:300px}
.breit33{width:33.3%;background:#eef;padding:1rem}
.breit66{max-width:66.6%;background:#efe;padding:1rem}
.expand{font-size:30px;font-stretch:extra-expanded}
.expand1{font-size:25px;font-weight:600;font-stretch:extra-expanded;text-shadow:#111 2px 2px 4px;color:#000}
@media (min-width: 576px) {
#menu li a{width:100%;padding:2px}
}
@media (max-width: 750px) {
#background-video{display:none}
body{background:url(../images/video_bg4.jpg) no-repeat;background-size:cover}
article{position:absolute;top:-14rem}
}
@media (min-width: 1024px) and (orientation: landscape) {
article{position:absolute;top:-5rem;min-height:500px}
#menu{background:transparent;transition:none;visibility:visible;opacity:1;margin-top:0;margin-left:0}
#menu ul{background:transparent}
#menu li{margin:2px}
#menu ul ul li{right:10px;}
#menu li a{width:100%;padding:4px 12px}
nav{padding:1rem}
label{display:none}
input[type=checkbox]:checked ~ #menu{margin-top:0;margin-left:0}
}