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

.menuebutton {
	position:relative;
	width:50px;
	height:40px;
	float:right;
	margin:-10px -7px 0px 20px;
	font-size:2px;
	line-height:2px;
	display:none;
	cursor:pointer;
	/*background:#eee;*/
}

.menuebutton .menuestrich {
	width:36px;
	height:2px;
	position:absolute;
	left:7px;
	background:#000;
	display:block;
	font-size:1px;
	line-height:1px;
	overflow:hidden;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}
.menuebutton .menuestrich-1 {
	top:4px;
    transition-property: opacity;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}
.menuebutton .menuestrich-2 {
	top:19px;
}
.menuebutton .menuestrich-3 {
	top:19px;
}
.menuebutton .menuestrich-4 {
	bottom:4px;
    transition-property: opacity;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.menuebutton.offen .menuestrich-1,
.menuebutton.offen .menuestrich-4 {
	opacity:0;
}
.menuebutton.offen .menuestrich-2 {
	transform: rotate(-45deg);
}
.menuebutton.offen .menuestrich-3 {
	transform: rotate(45deg);
}
.menuebutton.offen .menuestrich,
.menuebutton:hover .menuestrich {
	background:var(--rot);
}


.mobilenav {
	position:fixed;
	top:100px;
	display:block;
	height:0px;
	width:100%;
	text-align:center;
	overflow:hidden;
	background:#fff;
	list-style:none;
	z-index:2001;
   	-webkit-transition: height 0.5s ease-out;
	-moz-transition:height 0.5s ease-out;
	transition: height 0.5s ease-out;
}
.mobilenav.offen {
	height:calc(100vh - 100px);
   	-webkit-transition: height 0.5s ease-out;
	-moz-transition:height 0.5s ease-out;
	transition: height 0.5s ease-out;
}

.mobilenav .socialmedia {
	float:none;
	margin:10px 0px 0px 0px;
	text-align:center;
}
.mobilenav .socialmedia a {
	margin:0px 4px 0px 4px;
}

@media only screen and (min-width: 1161px) {
	.mobilenav.offen {
		max-height:0px;
	}
}




/* kleiner */
@media only screen and (max-width: 1160px) {
	.konsole {
		padding:130px 30px 0px 30px;
	}
	.kopfzeile {
		padding:0px 30px 0px 30px;
	}
	.kopfzeile a.logo {
		width:200px;
		height:30px;
		margin-top:63px;
	}

	.diaschau-wrapper #nachlinks,
	.diaschau-wrapper #nachrechts {
		background:url(images/diaschaupfeile-weiss.svg?ver=1.2);
		background-size:auto 100%;
		background-repeat:no-repeat;
		background-position:1rem 0;
		opacity:0.6;
	}
	.diaschau-wrapper #nachlinks {
		left: 0px;
	}
	.diaschau-wrapper #nachrechts {
		background-position:-7rem 0;
		right: 0px;
	}
}





/* mobile */
@media only screen and (max-width: 1000px) {
	
	.menuebutton {
		display:block;
	}
	.hauptnav, .kopfzeile .socialmedia {
		display:none;
	}
	.sprachweiche {
		margin-left:0px;/* plus li: 10px margin-left */
	}
	.kopfzeile {
		height:100px;
	}
	.kopfzeile a.logo {
		margin-top:43px;
	}
	.navcontainer {
		float:right;
		margin-top:43px;
	}
	.konsole {
		padding:100px 30px 0px 30px;
	}
	
	.einspaltig {/*achtung: muss in relation zu hochformatigen bildern sein (z.b. news)! */
		max-width:calc(75% + 12px);/* 80% wie hochformat + rundung */
	}
	.site-content img.hochformat,
	.site-content img.quadrat {
		max-width:75%;
	}
	.site-content img.querformatschmal {
		max-width:90%;
	}
	.punkt {/* diaschau */
		margin: 0px 0.6rem 0px 0.6rem;
	}
}



@media only screen and (max-width: 850px) {
	.einspaltig.eckdaten {
		max-width:100%;
	}

}

/* alles einspaltig */
@media only screen and (max-width: 700px) {
	.einspaltig {
		max-width:100%;
	}
	.teasercontainer.mitbild {
		width:100%;
		display:grid;
		grid-template-columns:1fr;
		grid-row-gap:2.86rem;	
	}
	.teasercontainer.mitbild.bildrechts .teaserbild {
		order:1;
	}
	.teasercontainer.mitbild.bildrechts .teasertext {
		order:2;
	}
	.teasercontainer.mitbild.bildlinks .teaserbild {
		text-align:left;
	}
	.site-content img.hochformat,
	.site-content img.quadrat {
		max-width:60%;
	}
	.site-content img.querformatschmal {
		max-width:75%;
	}

	.eckdaten {
		grid-template-columns:1fr;
		grid-row-gap:2rem;
	}
	.site-content .eckdaten img {
		margin-top: 6px;
		margin-bottom:0px;
	}
	.site-content .eckdaten img.hochformat,
	.site-content img.quadrat {
		max-width:65%;
	}

	
	h1 {
		margin-top: 2rem;
	}
	div.strich {
		margin-top: 1rem;
		margin-bottom:2rem;
	}
	.uebersichtcontainer div.strich {
		margin-top: 2rem;
  		margin-bottom: 2.5rem;
	}

}

/* kleinste */
@media only screen and (max-width: 479px) {
	.konsole {
		padding:80px 20px 0px 20px;
	}
	.kopfzeile {
		height:80px;
		padding:0px 20px 0px 20px;
	}
	.mobilenav {
		top:80px;
	}
	.mobilenav.offen {
		height:calc(100vh - 80px);
	}
	.kopfzeile a.logo {
		width:150px;
		height:20px;
		margin-top:35px;
	}
	.navcontainer {
		float:right;
		margin-top:30px;
	}
	.menuebutton {
	  	margin: -10px -7px 0px 10px;
	}
	.diaschau-wrapper #nachlinks,
	.diaschau-wrapper #nachrechts {
		display:none;
	}
	@supports (hyphens: auto) or (-ms-hyphens: auto) or (-moz-hyphens: auto) or (-webkit-hyphens: auto) {
	
		.site-content p {
			
			/*safari*/
			-webkit-hyphens: auto;
			-webkit-hyphenate-limit-before: 3;
			-webkit-hyphenate-limit-after: 3;
			-webkit-hyphenate-limit-chars: 4 2 2;
			-webkit-hyphenate-limit-lines: 3;
			-webkit-hyphenate-limit-last: always;
			-webkit-hyphenate-limit-zone: 8%;
			
			/*firefox*/
			-moz-hyphens: auto;
			-moz-hyphenate-limit-chars: 4 2 2;
			-moz-hyphenate-limit-lines: 3;
			-moz-hyphenate-limit-last: always;
			-moz-hyphenate-limit-zone: 8%;
			
			/*ie 10, edge*/
			-ms-hyphens: auto;
			-ms-hyphenate-limit-chars: 4 2 2;
			-ms-hyphenate-limit-lines: 3;
			-ms-hyphenate-limit-last: always;
			-ms-hyphenate-limit-zone: 8%;
			
			/*normal*/
			hyphens: auto;
			hyphenate-limit-chars: 4 2 2;
			hyphenate-limit-lines: 3;
			hyphenate-limit-last: always;
			hyphenate-limit-zone: 8%;
		}
	}

}