/* /////////////////////////////////////////////// 
RESPONSIVE
/////////////////////////////////////////////// */

#menuebutton {
	margin-top:-2px;
	width:45px;
	height:35px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/menuebutt-neu.png);
	background-repeat:no-repeat;
	background-position:0px -122px;
	background-size:100% auto;
	cursor:pointer;
	display:none;
}

#menuebutton.aktiv {
	background-position:0px -68px;
}


.hauptnav-mobile {
	opacity:1;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:0px;
	display:block;
	overflow:hidden;
	background:#000;
	z-index:100;
  -webkit-transition: height 0.4s ease-out;
  -moz-transition: height 0.4s ease-out;
  transition: height 0.4s ease-out;
}
.hauptnav-mobile.offen {
	height:100vh;
  -webkit-transition: height 0.4s ease-out;
  -moz-transition: height 0.4s ease-out;
  transition: height 0.4s ease-out;
}
.hauptnav-mobile ul {
	padding-top:80px;
}
.hauptnav-mobile ul li {
	padding:10px 0px 10px 0px;
}

/* mobilenav ausblenden */
@media only screen and (min-width: 981px){
	.hauptnav-mobile.offen {
		height:0px;
	}
}


.kopfzeile-kurz {/*wird von js zugewiesen*/
	height:50px;
	display:block;
	padding-top:10px;
}
.kopfzeile-kurz span.navpunkt {
	font: 16px/19px Averta, helvetica, sans-serif;
	letter-spacing:0.02em;
}


/* mobile */
@media only screen and (max-width: 980px) {
	
	.einspaltig {
		width:525px;	
	}
	.einspaltig .inhalt {
		width:400px;
		padding:45px 0px 60px 0px;
	}
	.zweispaltig .inhalt {
		width:660px;
		padding:45px 0px 60px 0px;
	}
	.zweispaltig .inhalt .lauftext-zweispaltig {
		-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
		-moz-column-gap: 30px; /* Firefox */
		column-gap: 30px;
	}
	.zweispaltig .inhalt .lauftext-einspaltig {
		width:400px;
	}
	
	/* format 10 / 67 */
	.bb-slickslider {
		height:502px;/* 442 + 30 legende + 30 dots */
		width:100%;/* 660 */
		margin-top:32px;
		/* margin-bottom bei dots in sep. stylesheet */;
	}
	.bb-slickslider div.slick-slide {
		height:472px;/* 442 + 30 legende */
	}
	.bb-slickslider img {
		max-height:442px;
		width:auto;
	}
	.slick-prev {
	    left:0px;
 		background-position:0px -120px;
    	opacity: .5;
	}
	.slick-next {
	    right:0px;
		background-position:0px -180px;
    	opacity: .5;
	}
	.bb-slickslider .bildlegende {
		font: 15px/19px Averta, helvetica, sans-serif;
	}
	body {
		font: 16px/24px Averta, helvetica, sans-serif;
	}
	h2, h3 {
		font: 30px/42px Averta, helvetica, sans-serif;
	}
	h3 {
		margin-top:40px;
	}
	p.impressumtext {
		font: 14px/19px Averta, helvetica, sans-serif;
	}
	.kopfzeile span.navpunkt {
		display:none;
	}
	
	#menuebutton {
		display:block;
	}
}


/* noch kleiner */
@media only screen and (max-width: 720px) {
	
	.einspaltig {
		width:300px;	
	}
	.einspaltig .inhalt {
		width:280px;
		padding:45px 0px 60px 0px;
	}


	.sektion.mit-bg {
		padding:50vw 0px 50vw 0px;
	}

	.sektion.mit-bg .einspaltig {
		width:100%;	
	}
	.sektion.mit-bg .einspaltig .inhalt {
		width:300px;
		padding:45px 0px 45px 0px;
	}
	.sektion.mit-bg .einspaltig .inhalt p:last-of-type {
		margin-bottom:0px;
	}


	.zweispaltig .inhalt {
		width:300px;
		padding:45px 0px 60px 0px;
	}
	.zweispaltig .inhalt .lauftext-zweispaltig {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */
		column-count: 1;
	}
	.zweispaltig .inhalt .lauftext-einspaltig {
		width:300px;
	}


	/* format 10 / 67 */
	.bb-slickslider {
		height:271px;/* 201 + 40 legende + 30 dots */
		width:100%;/* 300 */
		margin-top:32px;
		/* margin-bottom bei dots in sep. stylesheet */;
	}
	.bb-slickslider div.slick-slide {
		height:241px;/* 201 + 40 legende */
	}
	.bb-slickslider img {
		max-height:201px;
		width:auto;
	}
	.bb-slickslider .bildlegende {
		font: 14px/17px Averta, helvetica, sans-serif;
	}

	/* logos */
	.logowrapper {
		grid-template-columns: repeat(3, 1fr);
	}
	
	body {
		font: 15px/21px Averta, helvetica, sans-serif;
	}
	h2, h3 {
		font: 24px/34px Averta, helvetica, sans-serif;
	}
	h1.logo {
		width:450px;
		height:120px;
		padding-top:75px;
		display:block;
		top:calc((100vh / 2) - 120px);
		font: 24px/28px Averta, helvetica, sans-serif;
	}
	p.impressumtext {
		font: 13px/18px Averta, helvetica, sans-serif;
	}
}

/* kleinste */
@media only screen and (max-width: 479px) {
	
	h1.logo {
		width:300px;
		height:72px;
		padding-top:52px;
		display:block;
		top:calc((100vh / 2) - 90px);
		font: 18px/21px Averta, helvetica, sans-serif;
	}
}