:root {
	--header-height: 97px;
	@media screen and (min-width: 48rem) {
		--header-height: 130px;
	}
}
header#site-header {
	background: transparent linear-gradient(89deg, #E11872 0%, #830C7B 100%) 0% 0% no-repeat padding-box;
	font-family: "solano-gothic-pro-mvb", "Arial Narrow", "Franklin Gothic", Arial, sans-serif;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;

	height: var(--header-height);
	.header-inner {
		padding-left: 0;
		padding-right: 1rem;
		@media screen and (min-width: 48rem) {
			padding-right: 1.875rem;
		}
	}

	.logo-container {
		background-color: #FFFFFF;
		border-radius: 0px 30rem 30rem 0px;
		padding: 1rem 1.5rem 1rem 1rem;
		flex-shrink: 1;
		max-width: 50%;
		min-width: 150px;

		@media screen and (min-width: 48rem) {
			max-width: initial;
			min-width: initial;
			flex-shrink: 0;
			padding: 2rem 2.5rem 2rem 2rem;
		}
	}

	.logo-wrapper {
		a {
			display: block;
		}
		img {
			width: 225px;
			height: 62px;
		}
	}
}

#metanav {
	--abstand-devider: 2rem;
		justify-content: flex-end;

	.navigation-open & {
		padding: 1rem;
	}

	a {
		color: #FFFFFF;
		text-decoration: none;
		font-weight: normal;
	}
	.sidebutton-content {
		white-space: nowrap;
	}
	.sidebutton-icon {
		vertical-align: middle;
	}

	.navigation-open & {
		justify-content: center;
	}

	&> *:not(:last-child) {
		&::after {
			content: '';
			height: 100%;
			width: 1px;
			display: inline-block;
			background-color: #FFFFFF;
			vertical-align: middle;
			margin: 0 0 0 var(--abstand-devider);
		}
	}

}

#metanav-aktuelles, #metanav-termine, #language-selector {
	white-space: nowrap;
	margin: 0 var(--abstand-devider) 0 0;
	&::before {
		content: '';
		background: url(../img/icons/news.svg) no-repeat left center / contain;
		height: 1em;
    width: 1em;
		margin-right: .25rem;
		display: inline-block;
		vertical-align: middle;
	}

	.navigation-open & {
		font-size: 1.4rem;
	}
}

#metanav-aktuelles {
	.navigation-open & {
		order: 1;
	}
}

#metanav-termine {
	&::before {
		background-image: url(../img/icons/calendar.svg);
	}

	.navigation-open & {
		order: 2;
		margin-right: 0;
		&::after {
			display: none;
		}
	}
}

#language-selector, #language-selector-mobile {
	font-size: .9rem;
	position: relative;
	&::before {
		content: '';
		display: inline-block;
		background: url(../img/icons/metanav.svg) no-repeat left center / cover;
		width: .9em;
		height: .9em;
	}
	ul {
		position: absolute;
		display: none;
	}

	.navigation-open & {
		display: none;
		order: 0;
		padding: 1rem;
		width: 100%;
		margin: 0;
		text-align: center;
		&::after {
			display: none;
		}
	}
	.description {
		color: #FFFFFF;
		padding: .3rem .6rem;
		cursor: pointer;
	}

	&.opened {
		ul {
			display: block;
			top: calc(100% - 11px);
			width: 100%;
			z-index: 10;
			.entry.lvl-1 {
				padding-left: 1.167rem;
				a {
					width: 100%;
					display: block;
					padding-right: var(--abstand-devider);
				}
			}

			.description {
				border-top: 1px solid #830C7B;
				width: calc(100% - 3px);
				display: block;
			}
		}

		.description {
			background: #FFFFFF;
			color: #830C7B;
		}

	}
}

#language-selector-mobile {
	display: none;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: normal;
	font-size: 1.4rem;
	border-top: 1px solid #FFFFFF;
	max-width: 80%;
	.navigation-open & {
		margin: 2rem auto 0 auto;
		display: block;
	}

	ul {
		position: relative;
		a {
			text-decoration: none;
		}
	}

	.description {
			background: transparent;
			color: #FFFFFF;
	}

	&.opened {
		.description {
			background: transparent;
			color: #FFFFFF;
		}

		ul {
			.entry.lvl-1 {
				a {
					font-weight: normal;
				}
			}
			.description {
				border-top: none;
			}
		}
	}

}

.sidebutton1.eyeAble_customToolOpenerClass .sidebutton-content::after, .sidebutton1.eyeAble_customToolOpenerClass .sidebutton-content::before {
	display: none;
}

.hamburger {
	display: flex;
	align-items: center;
	min-width: 82px;
	justify-content: flex-end;

	@media screen and (min-width: 64rem) {
		display: none;
	}

	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
		background-color: #FFFFFF;
	}

	&.is-active {
		.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
			background-color: #FFFFFF;
		}
	}
}

.eyeAble-icon {
	cursor: pointer;
	height: 50px;
	display: block;
	background: transparent url("../img/eye-able-badge.svg") left center / contain no-repeat;
	width: 50px;
	padding: 0;
	border-radius: 0;
}

.navigation-wrapper {
	height: var(--header-height);
	justify-content: center;
	@media screen and (min-width: 64rem) {
		height: auto;
	}

	.navigation-open & {
		&::before {
			content: '';
			position: fixed;
			top: var(--header-height);
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #ffffff6b;
			@media screen and (min-width: 64rem) {
				display: none;
			}
		}
	}
}

#main-navigation-wrapper {
	display: none;
	
	@media screen and (min-width: 64rem) {
		display: block;
	}

	.navigation-open & {
		display: block;
		position: fixed;
		top: calc(var(--header-height) - 1px);
		left: 0;
		right: 0;
		padding-bottom: 1rem;
		border-bottom-left-radius: 44px;
		background: transparent linear-gradient(89deg, #E11872 0%, #830C7B 100%) 0% 0% no-repeat padding-box;

		@media screen and (min-width: 64rem) {
			position: static;
			background: transparent;
			padding: 0;
			border: none;
		}
	}
}

#main-navigation {
	padding: 1rem 0 0 0;
	margin: 0 -1rem;
	.lvl-1.entry {
		padding: .375rem 1.5rem;
		padding-top: .55rem;
		padding-bottom: 0;

		.navigation-open & {
			min-width: 200px;
			& > .nav-link {
				font-size: 2rem !important;
			}
		}
		& > .nav-link {
			color: #FFFFFF;
			text-decoration: none;
			padding: 0;
			padding-bottom: .55rem;
			border-bottom: 7px solid transparent;
			font-size: 1.1rem !important;
			@media screen and (min-width: 1150px) {
				font-size: 1.5rem !important;
				
			}
			&:hover, &.active {
				color: #FFFFFF;
				border-bottom: 7px solid #FFFFFF;
			}
			&::before {
				content: '';
				background: url(../img/arrow-right-top-white.svg) no-repeat left center / contain;
				height: .8em;
				width: 1em;
				margin-right: .25rem;
				display: inline-block;
			}
			html:not(.wf-active) & {
				font-size: 1.25rem !important;
				&::before {
					width: .9em;
					margin-right: .1rem;
				}
			}
		}
	}

	.navigation-open & {
		position: static;
		height: auto;
		top: initial;
		background: transparent;
		display: flex;
		flex-direction: column;
		margin: 0;
		align-items: center;

		.head-search {
			order: -1;
			margin-bottom: 1rem;
		}
		.search-wrapper {
			background: transparent;
		}
		.search-v4 {
			input {
				flex-grow: 1;
				border: 1px solid #ccc;
				z-index: 5;
				background: #fff;
				cursor: text;
			}
			button {
				background: url(../img/icons/search.svg) no-repeat center center / 15px 15px;
			}
		}
	}

	.toggle-subnavi {
		right: -10px;
		top: 26px;
	}
	.lvl-1.entry.open-subnavi {
		background-color: transparent;
	}

	.subnavi.lvl-1 {
		@media screen and (min-width: 64rem) {
			background: #830C7B;
			border-bottom-right-radius: 24px;
			top: calc(100% - 1px);

		}
		.lvl-2.entry .nav-link {
			color: #FFFFFF;
			text-decoration: none;
			font-size: 1.2rem;
			&:hover {
				color: #FFFFFF;
				text-decoration: underline;
			}
		}
	}
}

.search-wrapper {
	width: auto;
}
.search-v4 input {
	width: 40px;
	opacity: 0;
	transition: all 0.3s ease-in-out;
	color: #830C7B;
	padding: 0;
	&:focus, .navigation-open & {
		width: 200px;
		padding: .2rem .8rem;
		opacity: 1;
	}
}




main {
	padding-top: var(--header-height) !important;
}

footer#footer {
	background: #830C7B 0% 0% no-repeat padding-box;
	border-radius: 0px 44px 0px 0px;
	p {
		line-height: 140%;
	}

	a {
		text-decoration: none;
		&:hover {
			color: #FFFFFF;
			text-decoration: underline;
		}
	}

	ul {
		margin: 0;
		justify-content: center;
		@media screen and (min-width: 64rem) {
			justify-content: flex-start;
		}
		li {
			margin-left: 0;
		}
	}

	.social-link {
		margin: 0 1rem 1rem 1rem;
	}

	.hannover-logos {
		justify-content: center;
		align-items: flex-end;
		
		@media screen and (min-width: 64rem) {
			justify-content: flex-end;
		}

		a {
			display: block;
			margin: 1rem;
		}
	}

	.contact-data {
		width: 100%;
    text-align: center;
		@media screen and (min-width: 64rem) {
    	text-align: left;
		}
	}
}

.h-100 {
	height: 100%;
}

form {
	.font--button-medium {
		font-size: 1.2rem;
	}
}

a[nameid="send-login-form"] {
	font-size: 1.2rem;
}