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

.menuebutt {
	position:relative;
	width:50px;
	height:36px;
	top:30px;
	font-size:2px;
	line-height:2px;
	display:block;
	cursor:pointer;
	float:right;
}

.strich {
	width:50px;
	height:2px;
	position:absolute;
	background:var(--blau);
	display:block;	
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}
.strich-1 {
	top:0px;
    transition-property: opacity;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}
.strich-2 {
	top:17px;
}
.strich-3 {
	top:17px;
}
.strich-4 {
	bottom:0px;
    transition-property: opacity;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.menuebutt.offen .strich-1,
.menuebutt.offen .strich-4 {
	opacity:0;
}
.menuebutt.offen .strich-2 {
	transform: rotate(-45deg);
}
.menuebutt.offen .strich-3 {
	transform: rotate(45deg);
}


.hauptnav-mobile {
	position:fixed;
	top:7rem;
	width:100%;
	height:0px;
	overflow:hidden;
	z-index:100;
	background:var(--blau);
	-webkit-transition: height 0.4s ease-out;
	-moz-transition:height 0.4s ease-out;
	transition: height 0.4s ease-out;

}
.hauptnav-mobile.offen {
	height:calc(100vh - 7rem);
	-webkit-transition: height 0.4s ease-out;
	-moz-transition:height 0.4s ease-out;
	transition: height 0.4s ease-out;
}

.hauptnav-mobile ul {
	width:100%;
	margin-top:8vh;
	text-align:center;
}





/* minimale seitenhoehe --> fusszeile immer unten */
@media only screen and (min-width: 1760px) {
	.site-content {
		/* 100vh - (((bannerhoehe))) - kopfhoehe - banner margin - fusszeile padding - fusszeile 4 * line-height */
		min-height:calc(100vh - 560px - 10rem - 3rem - 7.77rem - (4 * 1.33rem));
	}
}


/* mobilenav ausblenden */
@media only screen and (min-width: 681px){
	.hauptnav-mobile {
		height:0px;
		opacity:0;
		overflow:hidden;
		display:none;
	}
	.menuebutt {
		display:none;
	}
}


/* mobile */
@media only screen and (max-width: 680px) {
	.menuebutt {
		display:block;
	}
	.hauptnav {
		display:none;
	}
	
	.kopfzeile {
		position:fixed;
		top:0px;
		height:7rem;
		width:100%;
		padding:0px var(--abstandlinksrechts) 0px var(--abstandlinksrechts);
		z-index:101;
		background:#fff;
		
	}
	a.logo {
		margin-top:1.3rem;
	}
	
	
	.banner {
		margin-top:7rem;
		grid-template-columns:1fr;
	}
	.bannerbild {
		aspect-ratio:5 / 3;
		order: 1;/* bild immer oben */
	}
	.bannertext {
		padding:2.22rem;
		order: 2;/* text immer unterhalb bild */
	}
	.banner h1 {
		margin-bottom:0px;
	}
	.banner p.ueberzeile {
		margin-top:-6px;
	}


	.site-content {
		/* 100vh - (((bannerhoehe))) - bannertexthoehe - kopfhoehe - banner margin - fusszeile padding - fusszeile 4 * line-height */
		min-height:calc(100vh - (((50vw - var(--abstandlinksrechts)) / 5) * 2.5) - 10rem - 10rem - 3rem - 7.77rem - (4 * 1.33rem));
	}
	
	.site-content.banner_off {
		padding-top:10rem;	
		min-height:calc(100vh + 12rem - 10rem - 3rem - 7.77rem - (4 * 1.33rem));
	}
	.block {
		padding-bottom:2rem;
	}
	h3 {
		margin-top:2rem;
	}
	.blocktext h3:first-of-type {
		margin-top:0;
	}

	.block.einspaltig {
		width:calc(100% - 4.44rem);
	}
	.block.textlinks_bildrechts,
	.block.textrechts_bildlinks,
	.block.textlinks_textrechts {
		display:block;
	}
	.block.textlinks_bildrechts .blocktext {
		position:relative;
		margin-left:auto;
		margin-right:auto;
		width:calc(100% - 4.44rem);
		padding-right:0;
		padding-bottom:2.22rem;
	}
	.block.textrechts_bildlinks .blocktext {
		position:relative;
		margin-left:auto;
		margin-right:auto;
		width:calc(100% - 4.44rem);
		padding-left:0;
		padding-top:calc(2.22rem + 1.333rem);/* plus margin absatz */
	}
	.block.textlinks_textrechts .blocktext {
		position:relative;
		margin-left:auto;
		margin-right:auto;
		width:calc(100% - 4.44rem);
	}
	
	.teaserwrapper {
		display:block;
		position:relative;
		margin-left:auto;
		margin-right:auto;
		width:calc(100% - 4.44rem);
	}
	.teaserwrapper a {
		aspect-ratio:4 / 3;
		margin-bottom:2.22rem;
	}
	.teaserwrapper a:hover div {/* effekt off */
		width:100%;
		height:100%;
		margin-left:0;
		margin-top:0;
	}
}


@media only screen and (max-width: 540px) {
	:root {
		--abstandlinksrechts:2rem;
	}
	.block.einspaltig,
	.block.textlinks_bildrechts .blocktext,
	.block.textrechts_bildlinks .blocktext,
	.block.textlinks_textrechts .blocktext,
	.teaserwrapper {
		width:100%;
	}
}

@media only screen and (max-width: 300px) {

}