@font-face {font-family:'roboto';src:url('roboto.woff2') format('woff2')}
*, *:before, *:after {box-sizing: border-box;}
html, body {font-family:roboto, Verdana, helvetica, sans-serif; font-size:100%; color:#fff; line-height:1.6; margin:0;padding:0}
html {background: url("../bg_schule.jpg") no-repeat; background-size:initial;}
body {background:rgba(60,60,60,.6)}

h1, h2, h3, h4, h5 {font-family:'roboto';font-weight:400;letter-spacing:2px;margin:2px;padding:0}
span {color:#fb2;max-width:80%}

a {background-color:transparent;color:#eef;text-decoration:none}
a:hover {color:#ffe;}

.drehen { transition:all .8s;}
.drehen:hover { transform:rotate(1080deg);}    

pre {white-space:pre-wrap;
font-size:1.5rem;
padding:1rem 0.5rem;
margin-bottom:2rem;
text-align:center;
color:#fff;
background:rgba(0,0,0,.2);
font-family:'open_sanslight';
}
section {background:rgba(50,50,50,.9); width:96%;margin-left:2%; padding:10px}
img {max-width:80%;display:inline; margin:0; height: auto;}

.kreisbox{
  position:relative;top:5px;left:5rem;width:15rem;height:15rem; padding:.5rem; border:solid 1px #2f2;
  border-radius:36rem;font-size:1.2rem; color:#fff;
  background:url("../bilder/wir.png") no-repeat; background-size:cover; }
.kreis:first-letter {color:#0ff;}
.kreis {margin-top:60%;letter-spacing:normal;padding-left:20px}

.titelzeile {margin:20px 4px 4px 60px;max-width:max-content}
.titelzeile:first-letter {color:#fa0;}  
aside  {position:relative; right:30px; padding:1.5rem;text-align:right} 
header {padding:5px ;min-height:3rem}
.einr {margin-left:25%}
li {list-style-type:none}
.linie {display:flex; flex-wrap:nowrap; justify-content:space-around; align-items:center;}
.pic{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}  
.links {display:flex;justify-content:space-evenly;background:rgba(40,90,40,.8);width:90%;margin-left:5%}
.links li:first-letter {color:#fa0;}

.fuss     {display:table;width:99%;margin:0; padding:0;}
.fussmenu {justify-content:space-evenly;display:flex;background:rgba(90,40,40,.8);width:90%;margin-left:5%}
.fussmenu li {display:inline; padding:.5rem;}
.fussmenu a  {text-align:center; color:#0dd}  
.fussmenu a:hover {color:#0f0}
.firma{text-align:center; color:#fff;font-size:70%;background:rgba(40,40,110,.8);width:90%;margin-left:5%}

@media (min-width: 550px) {
  aside {position:absolute;top:4rem; right:50px; padding:2rem;text-align:right} 
  }

@media (min-width: 1024px) {
  aside {min-width:10%; }
  aside {position:absolute;top:4rem; right:50px; padding:2rem;text-align:right} 
}