@charset "UTF-8";

*
{
margin:0;
padding:0;
border:0;
}

body {
     background: #ffffff;
     font: 100% 'Montserrat', sans-serif; color:#000000; text-align: justify;-webkit-font-smoothing: antialiased;
}

header{
      margin: auto;
      width:100%;
      height:auto;
      background-image: url(" ../images/hintergrund4.jpg");
       box-shadow: 5px 5px 6px rgba(0,0,0,0.25);
       background-size: cover;
}

.clearfix {
float: none;
clear: both;
}

.wrapper {
        margin:1% auto;
        margin-bottom:0;
        width:80%;
        height:auto;
}

#top{
        height:auto;
}

nav {display: block; width: 80%; margin:1% auto; margin-bottom:1%;   text-align: right;}
nav ul { list-style: none;}
nav li {display: inline-block;}

nav a {display: inline-block; background: transparent; color: #fff; padding: 5px 15px;
border: 1px solid white;text-decoration: none;font-family : Montserrat, sans-serif;text-transform:none;font-size: 1.1em; font-weight:400;}
nav a:hover {border: 1px solid white; background:#ffFFFF; color:#000000;
font-family : Montserrat, sans-serif;text-transform:none;font-size: 1.1em; font-weight:400;}
nav a:active {background: #fff; color:#000;}
nav select { display: none;}

a:hover { text-decoration : underline; color : #A02020; font-weight : normal;}
a {text-decoration : underline; color : #5F5F5F; font-weight : normal; }




.effect1{color: #FFFFFF;text-shadow: -3px 5px 5px rgba(0,0,0, 0.5);letter-spacing: 0.3em; }
.effect2{color: #FFFFFF;text-shadow: -3px 5px 5px rgba(0,0,0, 0.5);letter-spacing: 0.1em; }

h1 {font-size:250%; color:#2F2F2F;  text-align: left; font-family: 'Montserrat', sans-serif;
text-transform: none; font-weight: 500; padding: 1% ;}

h2 {font-size:150%;color:#2F2F2F; text-align: left; font-family: 'Montserrat', sans-serif;
text-transform: none; font-weight: 500;margin-bottom:1%;padding-left: 1% ;
}
h3 {font-size:140%;color:#3F3F3F; text-align: left; font-family: 'Montserrat', sans-serif;
text-transform: none; font-weight: 500;margin-bottom:1%;padding-left: 1% ;

}
/* header */
h5{font-size:700%;color:#F0F0F0; text-align: left; font-family: 'Caveat', cursive; font-weight: 400; margin-left:10%;
}
h6{font-size:150%;color:#F0F0F0; text-align: left; font-family: 'Montserrat', sans-serif; font-weight: 400;margin-left:10%;
}


dl.grid {
  display: grid;
  grid-template-columns: 1fr 100%;
}
dd {
  margin: 0;
  padding-left: 1em;
}
dl.grid dd {
  margin-bottom: 1em;
}




 p{
font-family: 'Montserrat', sans-serif;
font-size:1.4em;
font-weight:400;
text-align:left;
line-height:1.4em;
padding-left: 1% ;
}

 .klein {
font-family: 'Montserrat', sans-serif;
font-size:1em;
font-weight:400;
text-align:left;
line-height:1.4em;
padding-left: 1% ;
}

.left3{
margin:1%;
width:31%;
float:left;
}

.left3 h2{
font-family:  'Montserrat', sans-serif;text-transform: none;
font-size:2em;
font-weight:500;
text-align:left;
color:#003030;
margin-bottom:5%;
}

.left3 p{
font-family: 'Montserrat', sans-serif;
font-size:1.4em;
font-weight:400;
text-align:left;
line-height:1.4em%;
}

.mitte3{
margin:1%;
width:31%;
float:left;
}

.mitte3 h2{
font-family:  'Montserrat', sans-serif;text-transform: none;
font-size:2em;
font-weight:500;
text-align:left;
color:#003030;
margin-bottom:5%;
}

.mitte3 p{
font-family: 'Montserrat', sans-serif;
font-size:1.4em;
font-weight:400;
text-align:left;
line-height:1.4em;
}

.right3{
 margin:1%;
width:31%;
float:right;
}

.right3 h2{
font-family:  'Montserrat', sans-serif;text-transform: none;
font-size:2em;
font-weight:500;
text-align:left;
color:#003030;
margin-bottom:5%;
}

.right3 p{
font-family: 'Montserrat', sans-serif;
text-align:left;
font-size:1.4em;
line-height:1.4em;
}

.left2{
margin:1%;
width:48%;
float:left;
}

.left2 h2{
font-family:  'Montserrat', sans-serif;text-transform: none;
font-size:2em;
font-weight:500;
text-align:left;
color:#003030;
margin-bottom:5%;}

.left2 p{
font-family: 'Montserrat', sans-serif;
font-size:1.4em;
font-weight:400;
text-align:left;
line-height:1.4em%;
}

.right2{
margin:1%;
width:48%;
float:right;
}
.right2 h2{ font-family:  'Montserrat', sans-serif;text-transform: none;
font-size:2em;
font-weight:500;
text-align:left;
color:#003030;
margin-bottom:5%;

}

.right2 p{
font-family: 'Montserrat', sans-serif;
text-align:left;
font-size:1.4em;
font-weight:400;
line-height:1.4em;
}


hr{
height:1px;
width:100%;
background-color:#00009F;
margin:1% 0;
}



img.scaled {width: auto; /* Firefox */max-width: 100%;max-height: 100%;box-shadow: 5px 5px 6px rgba(0,0,0,0.25);margin: 1% 0 1%;}
img.liquid {width:100%;}
.imgleft {float : left;border : 0;margin : 5px 10px 10px 0px;padding : 5px;}
.imgright {float : right;border : 0;margin : 5px 10px 10px 0px;padding : 5px;}

footer{
        width:100%;
        padding:2%;
        background-image: url(" ../images/hintergrund2.jpg");
        background-size: cover; box-shadow: 5px 5px 6px rgba(0,0,0,0.25);
}



footer a {text-decoration : underline; color : #fff; font-weight : normal;}
footer p {color: #FFFFFF; text-align:center; font-size:1.4em;}

/* Media Queries */

 /* zwischen 861 und 1280 gilt das: */

 @media screen and (max-width:1280px) {
    .wrapper{  width:80%;      }
    body    {  font-size: 100%;}

}
 /* zwischen 721 und 860 gilt das: */
@media screen and (max-width: 860px) {
    .wrapper{ width:80%;      }
    body    { font-size: 90%; }
    nav     { text-align: left; margin-top:3% }

}
/* zwischen 591 und 720 gilt das: */
@media screen and (max-width: 720px) {
    .wrapper{ width:80%;     }
     body    { font-size: 70%;}
     .left2   {width:100%; margin:20px 0px 0px 0px;    }
    .right2  {width:100%;  margin:20px 0px 0px 0px;    }
    .left3   {width:100%;   margin:20px 0px 0px 0px;   }
    .right3  {width:100%;   margin:20px 0px 0px 0px;   }
    .mitte3   {width:100%;   margin:20px 0px 0px 0px;  }
      nav     {font-size: 2vw; text-align: left; margin-top:3%
}
/* zwischen 0 und 590 gilt das: */
@media screen and (max-width: 590px) {
    .wrapper{ width:80%;     }
    body    {font-size: 60%; }
    .left2   {width:100%; margin:20px 0px 0px 0px;    }
    .right2  {width:100%;  margin:20px 0px 0px 0px;    }
    .left3   {width:100%;   margin:20px 0px 0px 0px;   }
    .right3  {width:100%;   margin:20px 0px 0px 0px;   }
    .mitte3   {width:100%;   margin:20px 0px 0px 0px;  }
      nav     {font-size: 2vw; text-align: left; margin-top:3% }
     }