@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* { margin:0; padding:0; }

body{
	margin:0 auto;
	font-family: 'Roboto', sans-serif;
	overflow:auto;
	height:100%;
}

#main {
	position:fixed;
	top: 100px;
	left: 0px;
	width:calc(100% - 0px);
	height:calc(100% - 100px);
	overflow:hidden;
	border-top: 0px solid #ddd;
}

#balken-links {
	position:absolute;
	top: 0px;
	left:10px;
	width:20px;
	height:100%;
	z-index:6;
	display:none;
}

#balken-links img{
	width:100%;
}

#close {
	position:absolute;
	top:0px;
	right:10px;
}

#sectionA {
	position:absolute;
	top: 0px;
	bottom:15px;
	left:90px;
	width:28%;
	height:calc(100%-15px);
	border: solid red 0px;
	z-index:5;
}

#sectionA-navi-container {
	position:absolute;
	bottom: 0px;
	left:90px;
	width:28%;
	height:auto;
	border: solid red 0px;
	z-index:7;
}

#sectionA-persona {
	position:absolute;
	top: 0px;
	left:0px;
	width:100%;
	height:260px;
	border: solid green 0px;
}

#sectionA img {
	height:100%;
}

#sectionA-intro {
	position:absolute;
	top: 20px;
	left:0px;
	width:100%;
	height:calc(100% - 30px);
	border: solid green 0px;
	overflow-y:auto;
}

#sectionA-beschreibung {
	position:absolute;
	top: 270px;
	left:0px;
	width:100%;
	height:calc(100% - 380px);
	border: solid green 0px;
	margin-bottom:10px;
	overflow-y:auto;
	display:inline;
}

#sectionA-kommentar {
	position:absolute;
	top: 270px;
	left:0px;
	width:100%;
	height:calc(100% - 340px);
	border: solid green 0px;
	margin-bottom:10px;
	overflow-y:auto;
	background-color:#fef8a9;
	display:none;
}

#sectionA-info {
	position:absolute;
	top: 270px;
	left:0px;
	width:100%;
	height:calc(100% - 340px);
	border: solid green 0px;
	margin-bottom:10px;
	overflow-y:auto;
	z-index:20;
	display:none;
}


#sectionA-titel {
	position:relative;
	border: solid green 0px;
}

#sectionA-text {
	position:relative;
	border: solid green 0px;
	margin-top:15px;
}

#sectionA-querverweis {
	position:relative;
	border: solid green 0px;
	margin-top:15px;
}

#sectionA-querverweis img{
	height:90px;
	border: solid red 0px;
}

#sectionA-navi {
	position:absolute;
	bottom: 30px;
	width:100%;
	height:60px;
	border: solid blue 0px;
	margin-left:11px;
}

#sectionA-navi img{
	height:40px;
	border: solid blue 0px;
}


#sectionB {
	position:absolute;
	top: 0px;
	right:10px;
	width:calc(72% - 90px - 10px - 20px);
	height:100%;
	border: solid red 0px;
	z-index:5;
}

#sectionB iframe{
	border:solid red 0px;
	height:100%;
	max-width:100%;
	max-height:100%;
}

#sectionB-container {
	height:100%;
	overflow-y:auto;
}

#sectionB img{
	width:100%
}

#sectionB-giscontainer {
	left:100px;
	width:calc(100%-200px);
	height:100%;
	overflow-y:hidden;
	border: solid blue 0px;
}

#slidezurueck{
	position:absolute;
	top: calc(50% - 30px);
	left:60px;
	height:60px;
	width:60px;
	z-index:500;
	border:solid red 0px;
}

#slidezurueck img{
	width:100%;
}

#slidevor{
	position:absolute;
	top: calc(50% - 30px);
	right:30px;
	height:60px;
	width:60px;
	z-index:500;
	border:solid red 0px;
}

#slidevor img{
	width:100%;
}


#sectionC {
	position:absolute;
	top: 0px;
	left:0px;
	width:100%;
	height:100%;
	border: solid red 0px;
	background-color: #87a9d0;
	z-index:6;
}

#sectionC img{
	max-width:100%;
	max-height:100%;
}

#sectionC iframe{
	border:solid red 0px;
	max-width:100%;
	max-height:100%;
}


a {
	text-decoration: none;
	color:#000;
}

a:hover{
	color:#87a9d0;
	text-decoration: none;
}

blau {
	color:#87a9d0;
	font-weight:700;
}

rot {
	color:#F01515;
	font-weight:700;
}

.button {
  background-color: #87a9d0; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  right:0;
  cursor:pointer;
  
}

#header{
	height:auto;
	/*border-bottom: 5px solid #212121;*/
}

#header-persona{
	width:100%;
	top:0px;
	left:0px;
	height:90px;
	border: solid red 0px;
	
}


#motto{
	position: fixed;
	top:50px;
	left:50px;
  	z-index:2000;
	font-size: 173%;
  	color:white;
	font-style: italic;
	margin-bottom:40px;
	       }
	       
#logo{
	position: fixed;
	top:10px;
	left:10px;
  	z-index:50;
	display:block;
	height:90px;
	border: solid green 0px;
	       }
	       
#verfasserfilter {
	position: absolute;
	top:10px;
	right:30px;
  	z-index:2000;
	display:block;
	height:70px;
	border: solid green 0px;
			}

#logo img{
	height:100%;
	       }

#marktplatz{
position:absolute;
width:90%;
left:5%;
top:0px;
height:100%;
border: solid red 0px;
}

#bannertitel img{
position:absolute;
width:50%;
left:200px;
top:70px;
border: solid red 0px;
z-index:1000;
}

#bannerverlosung img{
position:absolute;
width:50%;
left:200px;
bottom:100px;
border: solid red 0px;
z-index:1000;
}
	       
.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


/* TEXT
------------------------------------*/

h1 {
	background-color: #000000;
	line-height : 30px;
	text-align: left;
	font-size: 24px;
	font-weight:normal;
	text-decoration: none;
	color:#fff;
	display:inline;
    white-space:pre-wrap;
	text-transform: uppercase;
	padding: 5px;
    box-shadow: -16px 0 0 #000000; 

}

h1 a {
	color:#eee;
    font-weight:normal;
	text-decoration: none;
}
	
h1 a:hover{
	color:#eee;
	font-weight:normal;
	text-decoration: underline;
}


h2 {
	margin-left:11px;
	margin-right:11px;
	margin-top:11px;
	margin-bottom:11px;
	padding-top:11px;
	padding-bottom:0px;
	font-size: 20px;
	font-weight:900;
	text-decoration: none;
	color:#000;
}

h3 {
	margin:11px;
	font-size: 17px;
	font-weight:700;
	text-decoration: none;
	color:#000;
}

h3 a {
	color:#000000;
    font-weight:normal;
	text-decoration: none;
}

h3 a:hover {
	color:#C8E3B6;
    font-weight:normal;
	text-decoration: none;
}

p {
	font-size: 14px;
	text-decoration: none;
	color:#000;
	margin:11px;
	padding-top:5px;
	padding-bottom:5px;
}




p a {
	color:#87a9d0;
	text-decoration: underline dotted;
	font-weight:700;
}

p a.blk{
	color:#000;
}


p a:hover{
	color:#000;
	text-decoration: underline;
}


ul {
	list-style-type: circle;
	list-style-position: inside;
	}
	
li {
	font-size: 14px;
	margin:11px;
	padding-top:5px;
	padding-bottom:5px;
}


navunten {
	font-size: 15px;
	text-decoration: none;
	color:#000;
	margin:0px;
	padding-top:5px;
	padding-bottom:5px;
}

navunten a.blk{
	color:#000;
}


navunten a:hover{
	color:#000;
	text-decoration: underline;
}


#info-content p {
	font-size: 12px;
	text-decoration: none;
	color:#000;
	margin-left:11px;
	margin-right:11px;
	margin-bottom:0px;
	margin-top:-11px;
	border: solid 0px blue;
}

#info-content p a {
	color:#EE23EE;
	text-decoration: none;
}


#info-content p a:hover{
	color:#000;
	text-decoration: underline;
}


h4 {
	font-weight:normal;
	font-size: 12px;
	text-decoration: none;
	color:#000;
	margin-left:11px;
	margin-right:11px;
	padding-top:0px;
	padding-bottom:11px;
	text-transform: lowercase;
}

h4 a {
	color:#EE23EE;
	text-decoration: none;
}


h4 a:hover{
	color:#000;
	text-decoration: underline;
}


h5 {
	margin-left:11px;
	margin-right:11px;
	margin-top:25px;
	margin-bottom:11px;
	padding-top:11px;
	padding-bottom:0px;
	font-size: 12px;
	font-weight:normal;
	text-decoration: none;
	color:#000;
	text-transform: lowercase;
}

h6 {							//close button
	position:relative;
	margin-right:8px;
	font-size: 15px;
	font-weight:normal;
	text-decoration: none;
	color:#000;
	float:right;
	z-index:999;
	text-transform: lowercase; 
}

h6 a:hover {
	cursor:pointer;
}

.rechtsbuendig {
	text-align: right;
}

/* HINTERGRUND
------------------------------------*/

#bg {
  position: fixed;
  z-index:-999; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
  display:block;
}

#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
}

@media screen and (max-width: 500px) and (orientation: portrait), screen and (max-device-width: 500px) and (orientation: portrait) { 
#bg {
  left: -65%; 
  }
}

.banner {
	left:0px;
}	


	       
#introtext{
	position: fixed;
	width:33%;
	bottom:50px;
	right:10%;
  	z-index:2000;
	margin-bottom:40px;
	display:block;
	       }

#introtext p{
	font-size: 16px;
	font-style: italic;
	padding-bottom:0px;
	       }

.infotext{
	position: fixed;
	margin-top:100px;
	width:850px;
	left:50%;
	margin-left:-425px;
	height:auto;
	z-index:900;
	overflow-x:hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	       }

.infotext p{
	font-size: 16px;
	font-style: italic;
	padding-bottom:0px;
	       }

.marktplatzpersona{
	display:none;
	       }  

.hidden {
	display:none;
	       }  
#wetter {
    position:absolute;
    top:0px;
    right:0px;
    width:200px;
    height:120px;
    overflow:hidden;
}

/* CONTAINER
------------------------------------*/


#container {
		position: fixed;
		width: 850px;
		max-width:80%;
		margin-top:140px;
		top:25px;
		left:50%;
		margin-left:-425px;
		max-height:calc(100% - 240px);
		border: 1px solid #efefef;
		background: #f9f9f9;
		opacity:0.95;
		filter:alpha(opacity=95);
		z-index:500;
		overflow-x:hidden;
	}
	
		
#content {
		position: relative;
		top:0;
		left:0;
		width: 100%;
		height:auto;
		border: 0px solid green;
	}

/* Hide scrollbar for Chrome, Safari and Opera */
.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hidden-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 

#textoben {
		position: fixed;
		margin-top:150px;
		width:850px;
		left:50%;
		margin-left:-425px;
		height:auto;
		z-index:900;
		overflow-x:hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFF;
		opacity:0.95;
		filter:alpha(opacity=95);
		border:solid red 0px;
	} 

#personalogo {
	position: fixed;
	top:150px;
	left:50px;
  	z-index:2000;
	
}

.umfragecontainer {
	position:relative;
	top: 50px;
	left: 150px;
	z-index:500;
	width:700px;
	height:65%;
	bottom:150px;
	-ms-zoom: 1.3;
	-moz-transform: scale(1.3);
	-moz-transform-origin: 0 0;
	-webkit-transform: scale(1.3);
	-webkit-transform-origin: 0 0;
	border:solid red 0px;
}

.umfrageframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height:100%;
}

	

/* FOOTER
------------------------------------*/


#footer {
	z-index: 100;
	font-size: 14px;
	background-color:#FFF;
	border:0px solid red;
	width: 100%;
	height: 0px;
	bottom: 0px;
	left:0px;
	position:fixed;
}


#footerleft {
	z-index: 200;
	bottom: 5px;
	margin-left:50px;
	position: fixed;
}


#footerright {
	z-index: 200;
	float:right;
	bottom: 5px;
	right:29px;
	position: fixed;
}



    
/* MOBILE
------------------------------------*/ 

.mobileonly{display:none;opacity:0;}

.mobilelandscape{display:none;opacity:0;}

.mobileoff{display:block;opacity:1;}

.personathumb{display:none;opacity:0;}


@media only screen and (max-width: 1000px) and (orientation: landscape) { 
	
#sectionA-persona {display:none;}

#sectionA-beschreibung {
	position:absolute;
	top: 40px;
	left:0px;
	width:100%;
	height:calc(100% - 120px);
	border: solid green 0px;
	margin-bottom:10px;
	overflow-y:auto;
	display:inline;
}

#sectionA-kommentar {
	position:absolute;
	top: 40px;
	left:0px;
	width:100%;
	height:calc(100% - 120px);
	border: solid green 0px;
	margin-bottom:10px;
	overflow-y:auto;
	background-color:#fef8a9;
	display:none;
}

#sectionA-info {
	position:absolute;
	top: 40px;
	left:0px;
	width:100%;
	height:calc(100% - 120px);
	border: solid green 0px;
	margin-bottom:10px;
	overflow-y:auto;
	z-index:20;
	display:none;
}



}	


@media only screen and (max-device-width: 1000px) and (orientation: landscape) { 
	
.mobilelandscape{display:block;opacity:1;z-index:2000;}

#sectionA, #sectionA-navi-container, #sectionB, #sectionC, #sectionAm, #sectionBm, #sectionCm, #sectionAm-navi, #marktplatz, #wetter, #personathumbs, #container, #logo {display:none;opacity:0;}

#logomobil{max-width:100%;
}
.mobileonly{display:block;opacity:1;}

.mobileoff{display:none;opacity:0;}

}	



	
@media screen and (max-width: 690px) and (orientation: portrait), only screen and (orientation: portrait) {



#sectionA-navi-container{display:none;opacity:0;}

#container {
  margin-left:5%;
  left:0%;
  width:90%;
  max-width:90%;
  margin-top:45px;
  max-height:calc(100% - 100px);
  border: 1px solid #efefef;
  background: #f9f9f9;
  opacity:0.95;
  filter:alpha(opacity=95);
  border:solid red 0px;
  }

#sectionAm {
  margin-left:5%;
  left:0%;
  width:90%;
  max-width:90%;
  margin-top:60px;
  max-height:calc(100% - 150px);
  border: 1px solid #efefef;
  background: #ffffff;
  opacity:0.95;
  filter:alpha(opacity=95);
  border:solid yellow 0px;
  overflow-y:auto;
  padding-bottom:80px;
  }

#sectionAm-beschreibung {
	position:relative;
	top: 0px;
	left:0px;
	width:100%;
	height:auto;
	border: solid green 0px;
	margin-bottom:10px;
	overflow-y:auto;
	display:inline;
	border:solid blue 0px;
}

#sectionAm-navi {
	position:absolute;
	bottom: 20px;
	width:100%;
	height:60px;
	border: solid blue 0px;
	margin-left:calc(5% + 11px);
	z-index:1000;
}

#sectionAm-navi img{
	height:40px;
	border: solid blue 0px;
}


#sectionAm-info {
	position:relative;
	top: 0px;
	left:0px;
	width:100%;
	height:auto;
	border: solid green 0px;
	margin-bottom:10px;
	overflow-y:auto;
	overflow-x:hidden;
	display:none;
	border:solid red 0px;
}

#quelle{
	width:95%;
	overflow-wrap: break-word;
	border:solid blue 0px;
}


#sectionBm {
  height:auto;
  }
  

#sectionBm-container {
	height:100%;
	overflow-y:auto;
	border:solid red 0px;
}
  
#sectionBm img {
  height:auto;
  width:100%;
  }

#sectionCm {
	position:absolute;
	top: 0px;
	left:0px;
	width:100%;
	height:100%;
	border: solid red 0px;
	background-color: #87a9d0;
	z-index:5;
}

#sectionCm img{
	max-width:100%;
	max-height:100%;
}

#sectionCm iframe{
	border:solid red 0px;
	max-width:100%;
	max-height:100%;
}

.umfragecontainer {
	position:relative;
	top: 50px;
	left: 5%;
	z-index:500;
	width:90%;
	height:1200px;
	max-height:calc(100% - 140px);
	-ms-zoom: 1;
	-moz-transform: scale(1);
	-moz-transform-origin: 0 0;
	-webkit-transform: scale(1);
	-webkit-transform-origin: 0 0;
	border:solid red 0px;
}

.umfrageframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height:100%;
}


#logomobil{
	position: fixed;
	top:0px;
	left:5px;
	width:100%;
	max-height:fit-content;
  	z-index:2000;
	       }

#reloadnoefim {
	border: solid red 0px;
	z-index:200;
}


#map {
	margin-top: 60px; 
}

#returnbutton {
	position: fixed;
	bottom: 25px;
	right:5%;
	border:solid red 0px;
	z-index: 500;
}

#footerleft {
	margin-left:30px;
}

#footerleft a{
	font-size: 12px;
}

#logomobil img{
	max-width:100%;
	height:40px;
	       }  
  

#bg {
  display:none;
}

#personathumbs {
	position:fixed;
	left:50px;
	right:50px;
	bottom:35px;
	z-index:20;
	}

.personathumb{
	width:60px;
	height:60px;
	display:inline-block;
	opacity:1;
	border:solid #777 1px;
	background: #f9f9f9;
	}

.personathumb-breit{
	width:127px;
	height:60px;
	display:inline-block;
	opacity:1;
	border:solid #777 1px;
	background: #f9f9f9;
	overflow:hidden;
	}

.personathumb img{
  width:100%;
}

.personathumb-breit img{
  width:100%;
}

#main {
	position:fixed;
	top: 0px;
	width:100%;
	height:100%;
	overflow:hidden;
	border-top: 0px solid #ddd;
}

#marktplatz{
position:absolute;
width:300%;
left:-100%;
top:unset;
height: 100%;
bottom:70px;
border: solid red 0px;
}

#marktplatz img{
height:100%;
object-fit: contain;
}

h2 {margin-right:35px;}

.mobileonly{display:block;opacity:1;}

.mobileoff{display:none;opacity:0;}
  
}