@charset "UTF-8";
		
html, body {
height:100%;
margin:0;
padding:0;
color: #56544a;
font-size: 18px;
line-height: 125%;
font-family: 'Source Sans Pro', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal, light;
font-weight: 400;
background-color:#fff;
}

header, nav, section {display: block;}

header {
top: 100px;
padding-left: 20px;
position:relative;
height: auto;
background-color:#fff;
width:100%;
color: white;
z-index:10;
}

#logo {
z-index: 20;
position: fixed;
top: 0px;
width: 100%;
height: auto;
float: none;
background-color: #fff;
mix-blend-mode: multiply; 
text-align: center;
align-content: center;
}

#logo img {
width: auto;
height: 100px;
}

#bildposition {
z-index: 5;
position:relative;
width: 100%;
margin: 0 auto;
padding: 0;
}

#startbild{
height: 50%;
align-content: center;
text-align: center;
}
#startbild img {
width: 70%;
height: auto;
}

nav {
z-index: 9;
bottom:0px;
left:0px;
position:absolute;
width:100%;
height: 35px;
background-color: #93A4D3;
background-image: url(img/navi.jpg);
background-size: 75%;
background-position: bottom;
background-repeat: no-repeat;
box-shadow: 0 20px 20px 0px white;
	
}

#naviposition {
z-index: 9;
width: 75%;
padding-left: 20px;
padding-right: 20px;
min-width: 590px;
height: 35px;
margin: 0 auto;
}
* html nav {
top:expression(auto);
}
.fixed-navi {
top: 0px;
position:fixed !important;
position:absolute;
background-image: none;
border-top: 100px;
border-top-color: #fff;
border-top-style: solid;
}

* html .fixed-navi {
top:expression(documentElement.scrollTop);
}

#Content, #Contentfixed {
z-index: 4;
top: 100px;
position:relative;
width: 75%;
min-width: 570px;
overflow: visible;
margin: 0 auto;
padding: 0;
padding-left: 20px;
padding-right: 20px;
background-color:#fff;
padding-bottom: 35px;
}
#Contentfixed {
top: 130px;
}

#Contentfixed img, #Content img {
width: 350px; 
height: auto;
margin-left: 35px;
align: right;
}
ul#navi {
letter-spacing: 0.04em;
margin: 0;
padding-left: 0;
text-align: left;
clear: left;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

ul#navi li, ul#navi a, ul#navi span {
padding-top: 3px;
padding-right: 5%;
color: #EEEEFF;
display: inline;	
float: left;
text-decoration:none;
list-style: none;
mix-blend-mode: none; 
}
	
ul#navi a:hover  {
color: #384b7c;
text-decoration:none;
}
ul#navi a.zurueck  {
color: #384b7c;
text-decoration:none;
}
ul#navi span, ul#navi a:active  {
color: #384b7c;
text-decoration:none;
}
#navi a {
text-align:left;
color: #fff;
text-decoration: none;
}
a:link, a:visited, a:hover, a:active {
color: #fff;
text-decoration: none;
}
ul {
text-decoration:none;
color: #222;
list-style-position:outside;
list-style-type:square;
}

#Content a, #Contentfixed a {
color:#56544a;
text-decoration-line: underline;
}

h1 {
font-family: 'Source Sans Pro', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: 200;
letter-spacing: 0.06em;
text-decoration: none;
color: #56544a;
font-size: 48px;
line-height: 100%;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

h2 {
font-family: 'Source Sans Pro', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: 600;
letter-spacing: 0.05em;
font-size: 18px;
line-height: 125%;
font-style: bold;
color: #6d6c67;
}

h3 {
font-size: 18px;
line-height: 125%;
font-family: 'Source Sans Pro', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal, light;
font-weight: 400;
}

strong {
font-weight: 600;
font-style: bold;
}

zitat {
font-weight: 200;
font-size: 24px;
line-height: 120%;
}

klein {
font-weight: 200;
font-size: 13px;
line-height: 120%;
}

hr {
border: none;
border-top: 1px  dotted #333;
margin-top: 15px;
}

#box {
margin: 0 auto;
margin-bottom: 150px;
width: 60%;
height: auto;
padding: 0;
background-color: #fff;
overflow: auto;
}

#box a, #jb a, #mh a, #bl a, #sl a, #bl-direkt a {
color: #56544a;
}

#box img {
width: 100%; 
height: auto;
align: left;
float: none;
}

#jb, #mh, #bl, #sl, #bl-direkt {
z-index: 1;
top: 135px;
position: fixed;
width: 100%;
height: 100%;
margin: 0 auto;
padding: 10px;
float: none;
text-align:left;
background-color: #fff;
opacity: 0;
overflow: scroll;
}

#jb, #mh, #bl, #sl {
 transition:all 1s ease;
}

#bl-direkt {
z-index: 30;
top: 135px;
opacity: 1;}

#jb:target, #mh:target, #bl:target, #sl:target {
z-index: 30;
top: 135px;
opacity: 1;
}



/*große fenster*/
@media screen and (min-width: 1600px)  {
	
#Contentfixed img, #Content img {
width: 550px; 
height: auto;
margin-left: 35px;
align: right;
}
}


/*für alle mobilgeräte*/
@media screen and (max-width: 1200px) {

#Contentfixed img, #Content img {
width: 100%; 
height: auto;
margin-bottom: 15px;
margin-left: 35px;
align: left;
}
	
ul#navi {
font-size: 25px;
}	

nav {
height: 45px;
padding-top: 5px;
}

#naviposition {
height: 50px;
}
}
	
@media screen and (min-device-width: 800px) and (max-device-width: 1200px) {

#Contentfixed img, #Content img {
width: 100%; 
height: auto;
margin-bottom: 15px;
margin-left: 35px;
align: left;
}
	
#Content, #Contentfixed {
padding-left: 10px;
padding-right: 5px;
width: 90%;
}
	
ul#navi {
font-size: 25px;
}	

nav {
height: 45px;
padding-top: 5px;
}

#naviposition {
height: 50px;
width: 90%;
}
}

/*iphone5 und andere kleine*/
@media screen and (max-width: 700px) {

#Content, #Contentfixed {
padding-right: 0px;
width: 90%;
}
	
ul#navi {
font-size: 29px;
}	

nav {
height: 45px;
padding-top: 5px;
}

#naviposition {
width: 90%;
height: 50px;
}
}