/*
 * Die Bricks-Section .header-mobil besitzt im Editor inline display: none.
 * !important hebt diese Vorgabe auf; Sichtbarkeit und Animation werden unten
 * ausschließlich über CSS geregelt, da display nicht animierbar ist.
 */
#brx-header .header-desktop {
	transition: opacity 280ms ease, transform 360ms ease;
}

#brx-header .header-mobil {
	display: flex !important;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	background-color: #ffffff;
	box-shadow: 0 8px 24px rgba(20, 35, 40, 0.12);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-14px);
	transition: opacity 280ms ease, transform 360ms ease, visibility 0s linear 360ms;
}

#brx-header .header-mobil .brxe-container {
	padding-top: 32px;
	padding-bottom: 32px;
	align-items: center;
}

#brx-header .header-mobil .bricks-nav-menu,
#brxe-wpawlf .bricks-nav-menu {
	align-items: center;
}

#brx-header .header-mobil .bricks-nav-menu > li:last-child > a,
#brxe-wpawlf .bricks-nav-menu > li:last-child > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	line-height: 1.2;
	color: #ffffff;
	background-color: #A8853F;
}

#brx-header.sj-header-scrolled .header-desktop {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-14px);
}

#brx-header.sj-header-scrolled .header-mobil {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition-delay: 80ms, 80ms, 0s;
}

@media (prefers-reduced-motion: reduce) {
	#brx-header .header-desktop,
	#brx-header .header-mobil {
		transition: none;
	}
}