/* Homepage banner – colours (.tanzhaus/.kreislaufhaus/.quartier/.wohnen) come from variables.scss / main.css */
#banner{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	z-index: 10001; /* above #header (10000) */
	overflow: hidden;
	background: #EB4A30;
	transform: translateY(-100%);
	transition: transform 0.6s cubic-bezier(.22,.8,.3,1);
	user-select: none;
}
body.banner-open #banner{
	transform: translateY(0);
}

#banner .banner-item{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	text-align: center;
	text-transform: uppercase;
	font-family: "ABCGintoNord-Black", "Arial Black";
	font-size: 20px; /* 50% of before ($fontsize_M) */
	line-height: 1.05;
	transform: translateY(100%);
	pointer-events: none;
}
#banner .banner-item.active{
	transform: translateY(0);
	transition: transform 2s cubic-bezier(.455,.03,.515,.955); /* = GSAP power2.inOut, 2s like the home-animation (d) */
	pointer-events: auto;
}
#banner .banner-item.leaving{
	transform: translateY(-100%);
	transition: transform 2s cubic-bezier(.455,.03,.515,.955); /* = GSAP power2.inOut, 2s like the home-animation (d) */
}
#banner .banner-item a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* header + menu make room while the banner is open */
body.has-banner #header,
body.has-banner nav{
	transition: all 0.6s cubic-bezier(.22,.8,.3,1);
}
body.banner-open #header{ top: 50px; }
body.banner-open nav{ top: 100px; }

/* inner pages: content moves down with the header (the homepage hero handles itself) */
body.has-banner:not(.page-home){ transition: padding-top 0.6s cubic-bezier(.22,.8,.3,1); }
body.banner-open:not(.page-home){ padding-top: 50px; }

@media (max-width: 1000px){
	#banner .banner-item{
		font-size: 16px; /* $fontsize_mobile_M */
		padding: 0 15px;
	}
}