
@font-face{font-display:swap;font-family:'Ubuntu';font-style: normal;font-weight: 400;src:local('Ubuntu Regular'),local('Ubuntu-Regular'),url('ubuntu-v12-latin-regular.woff2') format('woff2'),url('ubuntu-v12-latin-regular.woff') format('woff')}
@font-face{font-display:swap;font-family:'FontAwesome';src:url( fontawesome-webfont.eot?v=4.3.0);src:url(fontawesome-webfont.eot?#iefix&v=4.3.0) format("embedded-opentype"),url(fontawesome-webfont.woff2?v=4.3.0) format("woff2"),url(fontawesome-webfont.woff?v=4.3.0) format("woff"),url(fontawesome-webfont.ttf?v=4.3.0) format("truetype"),url(fontawesome-webfont.svg?v=4.3.0#fontawesomeregular) format("svg");font-weight:400;font-style:normal}.fa,.fab,.fad,.fal,.far,.fas{text-shadow:0 0;display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;-webkit-font-smoothing:antialiased}
@font-face{font-display:swap;font-family: 'Merienda One';font-style: normal;font-weight: 400;src: local('Merienda One'), local('MeriendaOne-Regular'),url('merienda-one-v8-latin-regular.woff2') format('woff2'),url('merienda-one-v8-latin-regular.woff') format('woff'),url('merienda-one-v8-latin-regular.ttf') format('truetype'),url('merienda-one-v8-latin-regular.svg#MeriendaOne') format('svg')}
.fa-phone:before{content: "\f095";}
body{
  background: url("images/body-bg.jpg")0 center;
  background-size:cover;
  background-attachment:fixed;
  width:100%; 
  height:100vh; 
  font:normal 400 1.3rem/1.6rem 'Ubuntu',arial, sans-serif; 
  padding:0; 
  margin:0; 
  overflow-x:hidden;
  overflow-y:scroll;
  text-align:left;  
  hyphens:auto;
  text-shadow: 1px 1px 0 #fff
  }
body * {box-sizing:border-box}
main{
  background:rgba(233, 225, 225, 0.601);
  position:relative;
  max-width:60em;
  margin:1em auto 0;
  padding:0;
  height:auto;
  display:block;
  border-radius:.75em
}  
header{
  position:relative; 
  max-width:100%; 
  height:auto; 
  padding:.75em .5em; 
  box-shadow:2px 4px 8px 0 rgba(50,50,50,.25);
  border-bottom:solid 5px #7497d3;
  border-radius:.5em .5em 0 0  
}
header div{padding:.5em}
.content{background:url("images/fuesse.gif") no-repeat 50% 10vh;width:100%}
.flex{
  display:flex;
  flex-wrap:wrap; 
  justify-content:space-between; 
  align-content:flex-start;
  align-items:center;
  padding:.5em .75em
}
.content-left,.content-right{align-self:flex-start;flex:0 1 50%}
.content-right{flex:0 1 45%;padding-top:.25em}
h1,h2,h3{font-family: 'Merienda One',Arial,cursive,sans-serif;font-size:2rem;line-height:2rem;text-align:center;color:#265280;}
h2,h3{font-size:1.7rem;line-height:1.7rem}
h3{font-size:1.4rem;margin-top:.75em}
footer{ 
  position:relative; 
  width:100%;
  color: #5b4d4d;
  padding:1.5em;
  background:url("images/bg_footer.jpg");
  background-size:cover;
  background-position:center;
  border-radius:0 0 .75em .75em;
  font-size:.95rem
}
p,li{color:#01346a}
.first{padding-top:1.25em}
figure{max-width:100%;text-align:center}
figure img{border-radius:.5em;max-width:100%;height:auto}
.box{background:rgba(75, 164, 253, 0.263);padding:.25em .5em} 
ul{list-style:none;padding:.5em} 
.content-right ul{list-style:square;margin:-.75em 0;padding:.5em}
.content-right img{border:solid .3em rgba(255,255,255,.75);box-shadow: 2px 4px 8px 0 rgba(50,50,50,.25)}
.content-left figure:nth-of-type(2){margin-top:2em}
.left{float:left;margin:0 1em .5em 0;padding:0}
.center{text-align:center}
.bold,b{font-weight:bolder} 
.blue {color:blue}
button{cursor:pointer;transition:all .5s ease}
hr{border:0;height:1px;background-image:linear-gradient(to right,rgba(120,10,153,0),rgba(120,10,153,.75),rgba(120,10,153,0));margin:.75em 0}
.no{display:none}
#Impressum{
  display:none;
  position:fixed;
  bottom:3em;
  left:.5em;
  width:340px;
  background:#0450a2;
  font-size:1.1rem;padding:.75em;z-index:2;
  box-shadow: 2px 4px 8px 0 rgba(50,50,50,.25);
  border-radius:1em;
  border:3px solid #fff;
  text-shadow:none;
  height:50vh;
  overflow:auto
}
#Impressum h3{color:#fff;font-size:1.2rem;}
#Impressum p{color:#fff}
#Impressum p a{font-weight:bolder;transition:all .5s ease;color:#b29df7}
#Impressum p a:hover{color:#eadef5} 
@media screen and (max-width:1300px){ 
  main{margin:1em .75em 0;}
} 
@media screen and (max-width:930px){
  .content{background-position:75% 10vh}
  .content-left,.content-right{flex:1 0 55%}
}
@media screen and (max-width:800px){
  body{background: url("images/body-bg-650.jpg")0 center!important;
    background-size:cover!important;
    background-attachment:fixed!important}
    .content-left,.content-right{flex:1 0 100%}
}
@media screen and (max-width:650px){
  .content{background-position:85% 10vh!important}
}
@media screen and (max-width:520px){
  .left{float:none;margin-bottom:-2em;text-align:center}
  h1{font-size:1.8rem}
  h2{font-size:1.6rem}
  h3{font-size:1.4rem}
}
@media screen and (max-width:460px){
  h1{font-size:1.6rem}
  h2{font-size:1.4rem}
  h3{font-size:1.3rem}
}
@media screen and (max-width:370px){
  h1{font-size:1.5rem}
  h2{font-size:1.3rem}
  h3{font-size:1.2rem}
}