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

#menuebutton {
	margin-top:27px;
	float:right;
	width:48px;
	height:50px;
	margin-left:10px;
	background-image:url(images/menuebutt.png);
	background-image:url(images/menuebutt.svg), linear-gradient(transparent, transparent);
	background-repeat:no-repeat;
	background-size:38px auto;
	background-position:10px 9px;
	cursor:pointer;
	display:none;
}

#menuebutton.aktiv {
	background-position:10px -46px;
}

.hauptnav-mobile {
	opacity:1;
	display:none;
}


.mobile-only {
	display:none;
}

/* kopfzeile und bannerbild */
@media only screen and (max-height: 980px),
screen and (max-width: 1350px) {
	.hauptnav {
		top:30px;
	}
	.kopfzeile {
		height:250px;
		background-size:138px auto;
		background-position:center 26px;
	}
	h1 {
		font:24px/28px proxima_novasemibold, helvetica, sans-serif;
		font-weight:normal;
		padding-top:150px;
	}
	.sektion-1 .bannerbild {
		height:calc(100vh - 250px);
	}
}

@media only screen and (max-height: 770px) {
	.zitat.mobile-only {
		display:block;
	}
	.zitat.desktop-only {
		display:none;
	}
	.sektion {
		padding-top:70px;
	}
	.sektion-1 {
		padding-top:0px;
	}
	.sektion.kurz {
		padding-top:8px;/* 50 - 42 */
	}
	.sektion .zitat {
		margin-top:50px;
	}
	.sektion ul + p.zitat {
		margin-top:32px;
	}
}
@media only screen and (max-height: 500px) {
	.kopfzeile {
		height:160px;
		background-size:85px auto;
		background-position:center 10px;
	}
	h1 {
		font:21px/24px proxima_novasemibold, helvetica, sans-serif;
		font-weight:normal;
		padding-top:85px;
	}
	h1 span.byline {
		display:inline-block;
		vertical-align:top;
		padding-top:1px;
	}
	h2 {
		font:21px/26px proxima_novasemibold, helvetica, sans-serif;
	}
	.sektion-1 .bannerbild {
		height:calc(100vh - 160px);
	}

}

/* kleiner */
@media only screen and (max-width: 1120px) {
	body {
		background-size:2000px auto;
		background-position:center calc(100vh + 600px);
	}
	.sektion-innen {
		width:600px;
	}
	.sektion-1 .sektion-innen {
		width:100%;
	}
	.sektion .zitat {
		font:36px/42px merriweatheritalic, sans-serif;
	}
}

@media only screen and (max-width: 920px) {
	.hauptnav {
		display:none;
	}
}


@media only screen and (max-width: 650px) {
	.kopfzeile {
		height:160px;
		background-size:85px auto;
		background-position:center 10px;
	}
	h1 {
		font:21px/24px proxima_novasemibold, helvetica, sans-serif;
		font-weight:normal;
		padding-top:85px;
	}
	h1 span.byline {
		display:inline-block;
		vertical-align:top;
		padding-top:1px;
	}
	.sektion-1 .bannerbild {
		height:calc(100vh - 160px);
	}

	.sektion {
		padding-top:45px;
	}
	.sektion-1 {
		padding-top:0px;
	}
	.sektion.kurz {
		padding-top:0px;
	}
	.sektion .zitat {
		margin-top:40px;
	}
	.sektion ul + p.zitat {
		margin-top:22px;
	}
	.sektion-innen {
		width:300px;
	}
	.sektion-1 .sektion-innen {
		width:100%;
	}
	.sektion-1 .zitat {
		position:relative;
		width:300px;
		margin-left:auto;
		margin-right:auto;
	}
	.sektion-1 .zitat.desktop-only {
		width:300px;
		left:50%;
		margin-left:-150px;
	}
	body, td {
		font:16px/21px proxima_novaregular, helvetica, sans-serif;
	}
	h1 {
		/*oben*/
	}
	h1 span.byline {
		font:14px/18px proxima_novasemibold, helvetica, sans-serif;
	}
	h2 {
		font:21px/26px proxima_novasemibold, helvetica, sans-serif;
		letter-spacing:0.1em;
		margin-bottom:24px;
	}
	h3 {
		font:16px/21px proxima_novasemibold, helvetica, sans-serif;
		letter-spacing:0.1em;
	}	
	.sektion .zitat {
		font:32px/38px merriweatheritalic, sans-serif;
	}

	@supports (hyphens: auto) or (-ms-hyphens: auto) or (-moz-hyphens: auto) or (-webkit-hyphens: auto) {
	
		.sektion p,
		.sektion li {
			
			/*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%;
		}
		.sektion p.zitat {
			-webkit-hyphens: none;
			-moz-hyphens: none;
			-ms-hyphens: none;
			hyphens: none;
		}
	}

	.sektion p img {
		margin-top:32px;
		margin-bottom:32px;
		max-width:100%;
		height:auto;
	}

}