@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

* {margin:0; padding:0;}
body {margin:0; padding:0; font-family: 'Open Sans', Arial, serif; height: 100%;}

#logo {position: relative; float:left; z-index:50;}

#nav {position: relative; float:right; font-weight: 400; font-size:14px; z-index:9990;}
#nav > a {display: none;}
#nav li {position: relative;}
#nav li a {color:#000; display: block; text-decoration: none !important;}
#nav span:after {border: 0.313em solid transparent; border-top-color: #000; content: ''; vertical-align: middle; display: inline-block; position: relative; right: -0.313em;}

/* Divs als Layout-Tabellen. Im schmallen Layout werden sie zu Blöcken */
/* @author Holger Seitter 
 * @date 22.08.2016
 * */
.ltable {
	display:table;
}
.lrow {
	display:table-row;
}
.lcell {
	position:relative;
	display:table-cell;
	height:100%;
}
.spacer {
	width:20px;
}
.top {
	position:absolute;
	top:0;
}
.bottom {
	position:absolute;
	bottom:0;
	width:100%;
}
.w28p { /* width 28 % */
	width:28%;
}
.w100p {
	width:100%;
}

.db { /* die gibts bei mir immer, da brauch nur bei class="db" reinschreiben und ich hab nen roten Rand damit ich seh was ich mach */
	border:1px solid red;
}


/* first level */
#nav > ul {height: 2.5em; list-style: none;}
#nav > ul > li {width: 20%; height: 100%; float: left;}
#nav > ul > li > a {height: 100%; font-size: 0.9em; line-height: 2.5em; text-align: center;}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a {background-color: rgb(116, 134, 162); color:#FFF;}

/* second level */
#nav li ul {background-color: #ededed; display: none; position: absolute; top: 100%; list-style: none;}
#nav li:hover ul {display: block; left: 0; right: 0;}
#nav li:not( :first-child ):hover ul {left: -1px;}
#nav li ul a {font-size: 0.9em; padding: 0.75em;} 
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a {background-color: rgb(116, 134, 162); color:#FFF;}

#slider {z-index:5000 !important;}

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0; display:none;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
ol.bjqs-markers li a{padding:5px;background:#fff;color:#000;margin:5px;text-decoration: none; font-size:10px;}
ol.bjqs-markers li.active-marker a, ol.bjqs-markers li a:hover{background-color: rgb(116, 134, 162); color:#FFF; }
p.bjqs-caption{display:block;background-color: rgb(116, 134, 162); color:#FFF; width:80%; text-align:center; margin-left: 10%; position:relative; padding:10px;}

#headline {width:80%; position:relative; background-color: rgb(116, 134, 162); margin-left: auto; margin-right: auto; top:-50px;}
h1 {font-weight: 300; color:#fff; text-align:center;}
h2 {font-weight: 400; color:#000; font-size:18px;}
p {font-size:13px;}
p a {color:#000; font-weight:700; text-decoration:none;}
h3 {font-weight: 700; color:#000; font-size:13px;}
ul.bullets {list-style-type:disc; list-style-position:outside; padding-left:15px; font-size:13px;}

#clear {clear:both;}

#text {margin-left: auto; margin-right: auto;}
#bild-rechts {margin-left: auto; margin-right: auto;}

#start-wrapper {position:relative; width:80%; margin-left: auto; margin-right: auto; padding-bottom:50px; z-index:10 !important;}
li.start-kasten {list-style-type:none; text-align: center; margin-bottom:50px;}
#balken {position:relative;background-color: rgb(116, 134, 162); padding:5px; margin-top:15px; font-weight:400; font-size:13px; width:100%; text-align: center;}
#balken a {text-decoration:none; color:#FFF;}

#footer-startseite {position:relative; top:150px; width:70%; margin-left: auto; margin-right: auto; font-weight: 400; font-size:10px; text-align:center; padding:25px; z-index:-5 !important;}
#footer-startseite a {margin:2%; color:#000; text-decoration:none;}

footer {width:70%; margin-left: auto; margin-right: auto; font-weight: 400; font-size:10px; text-align:center; padding:25px;}
footer a {margin:2%; color:#000; text-decoration:none;}

.CookieDeclarationTableCell {
	font-size:13px;
}
.CookieDeclarationTableHeader {
	font-size:13px;
}

@media only screen and (min-width: 10px ) {  /* ab 10px */
#logo {margin:25px;}
#logo img {max-width:150px;}
#bild-top {width:100%;}
#bild-top img {width:100%;}
#headline {padding:10px;}
h1 {font-size:20px;}
#text {width:80%; margin-bottom:25px; font-size:14px;}
#bild-rechts {width:80%; margin-bottom:25px;}
#bild-rechts img {width:100%;}
#start-wrapper {top:250px;}
p.bjqs-caption {bottom:50px; font-size:11px;}
}

@media only screen and (min-width: 500px ) { 
p.bjqs-caption{bottom:60px; font-size:15px;}
}

@media only screen and ( max-width: 800px ) {    /* bis 800 */
#nav {width: 100%; position: relative; float:right; top:-70px; }
#nav > a {text-align: right; position: relative; width: 100%;height:50px;}
#nav > a:before, #nav > a:after {position: absolute; border: 2px solid #000; top: 35%; left: 90%; right: 5%; content: '';}
#nav > a:after {top: 60%;}
#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type {display: block;}

.ltable, .lrow, .lcell {
	display:block;
	width:100%;
}
.top, .bottom { /* dürfen jetzt nicht mehr absolut sein */
	position:relative;
}

/* first level */
#nav > ul {width:80%; height: auto; display: none; position: absolute; left: 0; right: 0; background-color:#ededed;}
#nav:target > ul { display: block; }
#nav > ul > li { width: 100%; float: none; }
#nav > ul > li > a { height: auto; text-align: left; padding: 0 0.833em; }
#nav > ul > li:not( :last-child ) > a { border-right: none;}

/* second level */
#nav li ul { position: static; padding: 1.25em;  padding-top: 0;}
}

@media only screen and (min-width: 700px ) { 
p.bjqs-caption{bottom:75px; font-size:20px;}
}

@media only screen and (min-width: 800px ) {  /* ab 800px */
#nav {width: 70%; margin-top:25px;} 
#logo img {max-width:170px;}
#headline {padding:25px;}
#start-wrapper {top:200px;}
}

@media only screen and (min-width: 900px ) {  /* ab 900px */
#inhalt {width:85%; margin-left: auto; margin-right: auto;}
h1 {font-size:24px;}
#text {width:45%; position:relative; float:left;}
#bild-rechts {width:45%; position:relative; float:right;}
#start-wrapper {width:80%;}
li.start-kasten {width:28%; float:left; margin:2%;}
}

@media only screen and (min-width: 1000px ) { 
p.bjqs-caption{bottom:90px; font-size:24px;}
}

@media only screen and (min-width: 1600px ) { 
p.bjqs-caption{bottom:100px;}
}

@media only screen and (min-width: 1900px ) {  /* ab 1900px */
#start-wrapper {width:70%;}
#inhalt {width:75%;}
}

@media only screen and (min-width: 2000px ) { 
p.bjqs-caption{bottom:120px;}
}