@charset "utf-8";


/* hurme-geometric-sans4-semi-bold */
@font-face {
  font-family: 'HurmeGeometricSans4';
  font-style: normal;
  font-weight: normal; 
  src: url('fonts/HurmeGeometricSans4-SemiBold.woff2') format('woff2'), /* moderne Browser */
       url('fonts/HurmeGeometricSans4-SemiBold.woff') format('woff');   /* ältere Browser */
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v44-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/open-sans-v44-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}



html, body {
	margin:0;
	padding:0;
	text-align:center;
	color: #6D6E62; background: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
	height: 101%;
	font-size: 16px; line-height: 140%
}


div, img, area, textarea, input {
	outline: none;
}
H1, H2, H3  {  font-family: 'HurmeGeometricSans4'; margin: 0; padding: 0; padding-bottom: 10px; line-height:140%}
H3 {padding-bottom: 0; font-size: 120%;}
H1 {color: #599FD7;}
A {	color: #00476B; text-decoration: none;}
A:hover {	color: #000000;}

UL, LI{ padding: 0; margin: 0}
UL LI {margin-left: 15px;}

TD {vertical-align: top; padding: 0 15px 10px 0; }

.blau {color: #00476B; }
.hellblau {color: #00476B; }
.backblau {background: #599FD7; color: #FFFFFF}
.backblau A, .backblau H1 {color: #FFFFFF;}
.backgrau { background: #6D6E62 url(images/muster-weiss.png) center top no-repeat; background-size: 100% 300px; color: #FFFFFF}
.backgraublau { background: #6D6E62 url(images/muster-blau.png) center top no-repeat; background-size: 100% 300px; color: #FFFFFF}
.backblaugrau { background: #599FD7 url(images/muster-grau.png) center top no-repeat; background-size: 100% 300px; color: #FFFFFF}
.backgraublau A {color: #599FD7 }
.backgraublau A:hover {color: #FFFFFF }

.center {text-align: center;}
.right {text-align: right;}

.pagewidth {width:  100%; text-align:left; margin-left:auto; margin-right:auto; display: block; position: relative;}

header {background-color: rgba(240, 240, 240, 0.8);  position: fixed; width: 100%; height: 80px; z-index: 10012}
header img {display: block;}

#headerleft { width: 78%; margin-left: 2%; float: left;}
#headerright {width: 18%; margin-right: 2%; float: right; text-align: right;}


#logo { position: relative;width: 150px; float: left;}
#logo IMG {margin-top: 20px;}

#intrologo { opacity: 0; transform: scale(0.8); transition: all 2s ease; }
#intrologo.loaded {opacity: 1; transform: scale(1);}
#landkreisgrafik { opacity: 0; transform: scale(0.8); transition: all 4s ease; }
#landkreisgrafik.loaded {opacity: 1; transform: scale(1);}

IMG {max-width: 100%; height: auto;}

#but_menue {width: 40px; padding: 20px; padding-right: 0; margin-left: auto; margin-right: auto; cursor: pointer;}
#but_menue IMG {width: 100%; height: auto;}


NAV { position: fixed; left: 0; top: 80px; width: 100%; text-align: center; background-color: rgba(245, 245, 245, 0.9); display: none; z-index: 10012}
NAV UL, NAV LI {
	margin: 0; 
	padding: 0; 
	list-style-type: none; 
}

NAV UL LI A {display: block; font-size: 24px; padding: 20px 0;color: #6D6E62;  }
NAV UL LI A:hover { color: #599FD7 !important; }
NAV UL LI A.aktiv {color: #599FD7; font-size: 28px;font-weight: bold;}

#intro {display: block; position: relative;}		
#icon_landkreis {width:36%; margin-left: 4%; float: left; display:inline; text-align: left; z-index: 0; margin-top:90px;}
#icon_landkreis img {width: 50px;}
#datum {width:60%; float: left; display:inline;text-align: right;}
#datum img {width: 200px; height: 150px;}
#datumstext {position: absolute;  bottom: 35px; right: 5%; color: #FFFFFF;  font-family: 'HurmeGeometricSans4'; font-size: 30px; }

.no-bullets {
  list-style: none;      
  margin: 0;             
  padding-left: 20;       
}
.no-bullets li {
  margin: 0.25rem 0;     
}

#landkreisgrafik {position: relative;}

#dabeisein {   margin-top: -25%; position: relative;   z-index: 2; background: rgba(255,255,255,0.3); border-radius: 10px; padding: 25px; text-align:left; }

dl {margin: 0; padding: 0}
dt {cursor: pointer; font-weight: bold;}
dd { display:none; padding: 0; margin: 0;padding: 10px 25px;;}
.closed { background: #D9E7F6; padding: 15px 25px; margin-top: 5px; border-radius: 10px;}
.open { background:#ACD578;  padding: 15px 25px; margin-top: 5px; border-radius: 10px;}

dl.unternehmen dt {background: #79B1DF ; font-weight: normal; clear:both; display: block; overflow: hidden;}
dl.unternehmen dt IMG {border-radius: 10px; display: block} 
dl.unternehmen dt.closed { padding: 0; margin-top: 10px;}
dl.unternehmen dt.open { padding: 0; margin-top: 10px;}
dl.unternehmen dd { display:none; padding: 0; margin: 0;padding: 10px 25px; background: #FFFFFF; color: #6D6E62; border-radius: 10px; margin-top: 5px;}
dl.unternehmen dd A {color: #6D6E62;}
.unternehmen_titel {padding: 10px;}
.unternehmen_beschreibung {}

A.button_weiss {     display: inline-block; padding: 10px 50px; background-color: #FFFFFF; color: #6D6E62; border-radius: 10px;  font-weight: bold;   transition: background-color 0.3s, color 0.3s;}
A.button_weiss:hover {    background-color: #ACD578;    color: #000;}


.row {padding: 25px; display: block;}


.einspalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.einspalter .spalte1 {width: 100%; display: block;}

.zweispalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.zweispalter .spalte1 {width: 100%; display: block;}
.zweispalter .spalte2 {width: 100%; display: block;}
.zweispalter .spalte1gross {width: 100%; display: block;}
.zweispalter .spalte2klein {width: 100%; display: block;}
.zweispalter .spalte1klein {width: 100%; display: block;}
.zweispalter .spalte2gross {width: 100%; display: block;}

.dreispalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.dreispalter .spalte1 {width: 100%; display: block;}
.dreispalter .spalte2 {width: 100%; display: block;}
.dreispalter .spalte3 {width: 100%; display: block;}

.vierspalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.vierspalter .spalte1 {width: 100%; display: block;}
.vierspalter .spalte2 {width: 100%; display: block;}
.vierspalter .spalte3 {width: 100%; display: block;}
.vierspalter .spalte4 {width: 100%; display: block;}

.fuenfspalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.fuenfspalter .spalte1 {width: 50%; display: block; float: left;}
.fuenfspalter .spalte2 {width: 50%; display: block; float: left;}
.fuenfspalter .spalte3 {width: 50%; display: block; float: left;}
.fuenfspalter .spalte4 {width: 50%; display: block; float: left;}
.fuenfspalter .spalte5 {width: 50%; display: block; float: left;}


footer {display: block; background: #6D6E62  url(images/muster-weiss2.png) center top no-repeat; background-size: 100% 50px;; color: #FFFFFF; padding-top: 100px; }
footer A {color: #FFFFFF;}
footer A:hover {color: #599FD7;}
#footerlogo { margin-bottom:25px; width: 100%; max-width: 500px;}

#map {width: 100%; height: 500px;  }




/* #########################################################################################  */
		
.clearfix {
	display: block;
	clear: both;
}




/* Tabletts */
@media only screen and (min-width: 760px) {

	.pagewidth { max-width: 760px; }
		
	H1, H2, H3 {margin: 0; padding: 0; padding-bottom: 15px;}	
			

	#headerright {width: 20%; margin-right: 0%; float: right; text-align: right;}

	#datum img {width: 250px; height: 150px;}
	#datumstext {position: absolute;  bottom: 35px; right: 50px; color: #FFFFFF;  font-family: 'HurmeGeometricSans4'; font-size: 30px; }
			
	.einspalter {display: block; position: relative;}
	.einspalter .spalte1 {}
	
	.zweispalter {display: block; position: relative;}
	.zweispalter .spalte1 {width:48%; margin-right: 2%; float: left; display:inline;}
	.zweispalter .spalte2 {width:48%; margin-left: 2%; float: left; display:inline;}
	.zweispalter .spalte1gross {width:64%; margin-right: 2%; float: left; display:inline;}
	.zweispalter .spalte2klein {width:32%; margin-left: 2%; float: left; display:inline;}	
	.zweispalter .spalte1gross {width:32%; margin-right: 2%; float: left; display:inline;}
	.zweispalter .spalte2klein {width:64%; margin-left: 2%; float: left; display:inline;}				

	.dreispalter {display: block; position: relative;}
	.dreispalter .spalte1 {width:30.6%; margin-right: 2%; float: left; display:inline;}
	.dreispalter .spalte2 {width:30.6%; margin-left: 2%;margin-right: 2%; float: left; display:inline;}
	.dreispalter .spalte3 {width:30.6%; margin-left: 2%; float: left; display:inline;}	

	.vierspalter {display: block; position: relative;}
	.vierspalter .spalte1 {width: 48%; margin-right: 2%; float: left; display:inline;}
	.vierspalter .spalte2 {width: 48%; margin-left: 2%;float: left; display:inline;}
	.vierspalter .spalte3 {width: 48%; margin-right: 2% ;float: left; display:inline; clear: both;}
	.vierspalter .spalte4 {width: 48%; margin-left: 2%;float: left; display:inline;}

	.fuenfspalter {display: block; position: relative;}
	.fuenfspalter .spalte1 {width: 33%; display: block; float: left;}
	.fuenfspalter .spalte2 {width: 34%; display: block; float: left;}
	.fuenfspalter .spalte3 {width: 33%; display: block; float: left;}
	.fuenfspalter .spalte4 {width: 33%; display: block; float: left;}
	.fuenfspalter .spalte5 {width: 34%; display: block; float: left;}
	
footer .dreispalter .spalte2 {text-align: center; }
footer .dreispalter .spalte3 {text-align: right; }
	#footerlogo { margin-bottom:50px;}
}

/* Mittlere Gr��e */
@media only screen and (min-width: 960px)  {
	
	html, body {font-size: 18px;}

	.pagewidth { max-width: 960px; }
	
	H1, H2 {font-weight: normal; margin: 0; padding: 0; padding-bottom: 20px;}		

	#headerleft { width: 22%; margin-left: 2%; float: left;}
	#headerright {width: 74%; margin-right: 2%; float: right; text-align: right;}	

	#datum img {width: 300px; height: 170px;}
	#datumstext {position: absolute;  bottom: 45px; right: 70px; color: #FFFFFF;  font-family: 'HurmeGeometricSans4'; font-size: 32px; }

	
	#but_menue {display: none;}	
	NAV { position: relative; left: auto; width: auto; top: auto; right;  display: block;background: none; padding-top: 30px; }

	nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-between; }
	NAV UL LI A {font-size: 18px;  padding: 0 10px ; color: #6D6E62; font-size: 16px; font-weight:bold;}
	NAV UL LI A:hover {color: #599FD7;}
	
	
	
	.zweispalter .spalte1gross {width:68%; margin-right: 2%; float: left; display:inline;}
	.zweispalter .spalte2klein {width:28%; margin-left: 2%; float: left; display:inline;}		
	.zweispalter .spalte1klein{width:28%; margin-right: 2%; float: left; display:inline;}
	.zweispalter .spalte2gross {width:64%; margin-left: 2%; float: left; display:inline;}	
	
	.vierspalter {display: block; position: relative;}
	.vierspalter .spalte1 {width: 23%; margin-right: 2%; float: left; display:inline;}
	.vierspalter .spalte2 {width: 23%; margin-left: 1%; margin-right: 1%;float: left; display:inline;}
	.vierspalter .spalte3 {width: 23%;  margin-left: 1%; margin-right: 1%;display:inline; clear: inherit;}
	.vierspalter .spalte4 {width: 23%; margin-left: 2%;float: left; display:inline;}
	
	
	.fuenfspalter .spalte1 {width: 20%; display: block; float: left;}
	.fuenfspalter .spalte2 {width: 20%; display: block; float: left;}
	.fuenfspalter .spalte3 {width: 20%; display: block; float: left;}
	.fuenfspalter .spalte4 {width: 20%; display: block; float: left;}
	.fuenfspalter .spalte5 {width: 20%; display: block; float: left;}	
	
		
	#teaser {display: block;}

	#footerlogo { margin-bottom:35px;}	

	
}

/* Gro�e Monitore */
@media only screen and (min-width: 1280px)  {

	html, body {font-size: 19px;}
	.pagewidth { max-width: 1280px; }

	NAV UL LI A {font-size: 18px;}
	#footerlogo { margin-bottom: 45px;}	
	
	.unternehmen_logo {width: 40%; float: left;}
	.unternehmen_titel {width: calc(60% - 20px); float: left; font-size: 80%;}	
	


	
}

@media only screen and (min-width: 1600px)  {


	html, body {font-size: 21px;}
	.pagewidth { max-width: 1600px; }

	NAV {display: block; height: 28px;}
	NAV UL LI A {font-size: 20px; }
	
	.unternehmen_titel {width: calc(60% - 20px); float: left; font-size: 90%;}	
	


	
}