* {
    box-sizing:border-box;
}
html,body{
  background-color: #425051;
  color:#fff;
  font-family: arial, sans-serif;
  font-size:100%;
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}
h1, h2 {font-size: 16px; font-size: 1.2rem;text-align:left;}
p {font-size: 16px; font-size: 1rem;padding:0;margin:0}
ul li {list-style:disc;margin-left:15px;}
ul {padding-top:10px;padding-bottom:10px;}
ol {margin-top:10px;}
ol li {list-style:decimal;margin-left:35px;margin-bottom:10px;}

header{display:none;}
.logo{width:50px;height:50px;margin:4px;float:right;margin-right:10px;}

/* links */
a:link, a:visited{ text-decoration:none;color:white;}
a:active, a:hover{  text-decoration:none;  color:white;}
li a{display:block;text-decoration:none;}
.mobile{display:none;}

#wrapper{  
    margin:auto;
    float:none;
    max-width: 1100px;
    min-width:320px;
    min-height: 100%;
    text-align: left;
    background-color: #7a8b8e;
    overflow:visible;
    position:relative;
}

/* Navigation */

 nav{
     padding-top:0px;
     overflow:auto;
     width:260px;
     height:100%;float:left;
     background-color:rgba(105,115,117,0.9);
     position:fixed;
     right:-265px;
     
     transition: .5s ease;
     border-left:1px solid white;
     font-size: 18px;
     font-size:1.25rem;
     z-index:50;}
 
nav ul {list-style:none;padding:0;margin:0;  }
nav ul li a:link,nav ul li a:visited,nav ul li  a:active,nav ul li  a:hover{
  text-decoration:none;
  color:white;
  background-color:transparent;
}

nav ul li, nav ul li:first-child{display:block;float:none;padding-left:15px;border:0;border-bottom:1px solid white;padding-top:10px;padding-bottom:10px;list-style:none;margin-left:0;}
nav ul li.last {border:0;padding-right:0;}
.close_nav{position:absolute;top:5px;right:42px;padding:0;height:42px;width:42px;}
.close_nav .container img{max-width:100%;max-height:100%;}
#button{font-weight:normal;font-size:1.6rem}
.container {display: inline-block;cursor: pointer;max-width:100%;max-height:100%;}

.sideMenu{color:white;display:block;position:absolute;top:30px;right:0;height:35px;}


/* blazy */
.b-lazy {
     max-width: 100%;
     -webkit-transition: opacity 500ms ease-in-out;
        -moz-transition: opacity 500ms ease-in-out;
          -o-transition: opacity 500ms ease-in-out;
             transition: opacity 500ms ease-in-out;
              max-width: 100%;
                opacity: 0;
        }
.b-lazy.b-loaded {opacity: 1;}
.image-wrapper { 
    position:relative;
    background: url('../js/loader.gif') center center no-repeat;
    background-size:7%;
    width: 100%;  }
.image-wrapper .caption{
    float:none;
    font-size:190%;
    font-weight:bold;
    width:100%;
    height:30%;
    background-color: rgba(50,50,50,0.5);
    bottom:0px;
    position:absolute;
    text-shadow: black 3px 3px 3px;
    
}
.ratio {
    padding-bottom: 66.5%; 
    height: 0;
}

/* Inhaltsbereich */


section {
    position:relative; 
    width:100%;
    min-height:100%;
    }

article{line-height:1.5;height:100%;}
.opener {border:0;max-width:1100px; width:100%; margin:0;padding:0;position:relative; }
.opener img {width:100%;}

p{padding-top:10px;hyphens:auto;  -webkit-hyphens: auto;-webkit-hyphenate-limit-chars: auto 3;-webkit-hyphenate-limit-lines: 4;-ms-hyphens: auto;-ms-hyphenate-limit-chars: auto 3;-ms-hyphenate-limit-lines: 4;}

.content {border:0; width:100%; padding-left:10%;padding-right:10%;padding-top:30px;padding-bottom:30px;position:relative;
         hyphens:auto;  -webkit-hyphens: auto;
         -webkit-hyphenate-limi-chars: auto 3;
         -webkit-hyphenate-limit-lines: 4;
         -ms-hyphens: auto;
         -ms-hyphenate-limit-chars: auto 3;
         -ms-hyphenate-limit-lines: 4;}

.adresszeile{
    padding-top:5px;
    padding-bottom:5px;
    background-color:#697375;
    font-size:0.75rem;
    text-align:center;
    
}
/* footer gesamt*/  
footer{
    padding:15px;
    font-size:1.0rem;
    text-align:right;
    font-weight:normal;
}

/* formular Style */
input, textarea {background:#697375;color:white;width:100%;}

form table tr td{padding-top:10px;padding-bottom:10px;padding-right:5px;}
form table tr td.spalte1{text-align:right;width:auto;padding-left:0;margin-left:0;min-width:100px;}
form table tr td.spalte2{padding-left:0;margin-left:0;min-width:200px;}
.submit{width:150px;height:40px}
/* MOBILE ------------------------------------------------------------------------------------------------*/
@media only screen and (min-width : 1330px) {
    nav{border-right:0;padding-top:10px;}
    nav ul li, nav ul li:first-child{border-right:1px solid white;padding-top:15px;padding-bottom:15px;}
    }

@media only screen and (max-width : 900px) { 
.mobile{display:inline;}
#wrapper{width:100%;} 
.close_nav{height:35px;width:35px;right:30px;top:0;}   
.sideMenu {top:30px;}
#footer {min-height:0; }
#Adresse {clear:both;width:100%;margin-bottom:0px;margin-top:0;}
}

@media only screen and (max-width : 650px) {
.sideMenu{display:none;}
.topMenu{color:white;position:absolute;top:15px;left:60px;height:50px;}
header{display:block;width:100%;height:60px;background-color:#697375;position:fixed;z-index:100;}
.close_nav{height:30px;width:30px;top:0px;right:15px;}   
nav{font-size: 16px;font-size:1.1rem;z-index:200}
h1{font-size:14px;font-size:1rem;}
}

@media only screen and (max-width : 480px) { 
.content {padding:15px;padding-right:50px;}
.content .logo {right:0;bottom:10px;height:70px;}
.close_nav{right:10px;top:0;}   
h1{text-align:left;}  
nav{width:180px;font-size: 13px;font-weight:bold;font-size:0.9rem;}
nav ul li, nav ul li:first-child{display:block;float:none;padding-left:15px;border-left:0;}
.sideMenu {top:20px;}
}