/**
 * Mobile Navigation: Menüknopf, Suche, Hauptmenü mit aufklappbaren
 * Untermenüs, Service- und Sprachmenü
 *
 * Eingebunden für Smartphone und Tablet (unter 1024 px) und für alle
 * Touch-Geräte (hover: none, pointer: coarse), page.typoscript. Wo die Teile
 * stehen, regeln responsive.css (Leiste über dem Slider, unter 1024 px) und
 * touch-nav.css (Panel neben der Desktop-Leiste, Touch ab 1024 px). Die Knöpfe
 * setzt dafg.js.
 */

/* --- Menüknopf ---------------------------------------------------------- */

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
	position: absolute;
	left: .8em;
	width: 1.6em;
	height: 3px;
	border-radius: 2px;
	background: #B02D0A;
	transition: transform .2s, background .2s;
}

.nav-toggle span {
	top: 50%;
	margin-top: -1px;
}

.nav-toggle span::before,
.nav-toggle span::after {
	content: "";
	left: 0;
}

.nav-toggle span::before {
	top: -.5em;
}

.nav-toggle span::after {
	top: .5em;
}

.nav-container.is-open .nav-toggle span {
	background: transparent;
}

.nav-container.is-open .nav-toggle span::before {
	transform: translateY(.5em) rotate(45deg);
}

.nav-container.is-open .nav-toggle span::after {
	transform: translateY(-.5em) rotate(-45deg);
}

/* --- Menüinhalt ---------------------------------------------------------- */

.nav-container .ym-searchform {
	display: block;
	float: none;
	position: relative;
	margin: .25em 0 .75em;
	margin-inline-end: .5em;
	/* Abstände aus den YAML-Stufen 740/480 px aufheben */
	padding: 0;
	width: auto;
	line-height: 1;
}

.nav-container .ym-searchform .ym-searchfield {
	box-sizing: border-box;
	padding: .6em .75em;
	padding-inline-end: 2.75em;
	width: 100%;
	height: auto;
	font-size: 1.1429em; /* 16 px, sonst zoomt iOS beim Tippen */
	line-height: 1.25;
}

.nav-container .ym-searchform input[type="image"] {
	position: absolute;
	top: 50%;
	inset-inline-end: .75em;
	transform: translateY(-50%);
}

.nav-container .mainNavi {
	font-size: 1.1429em;
	max-height: calc(100vh - 12em);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.nav-container .ym-hlist ul,
.nav-container .ym-hlist ul li {
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	width: auto;
}

.nav-container .ym-hlist.mainNavi > ul {
	padding: 0;
	padding-inline-end: .5em;
	border-top: 1px solid rgba(0, 0, 0, .12);
}

.nav-container .mainNavi > ul > li {
	position: relative;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.nav-container .mainNavi > ul > li > a,
.nav-container .mainNavi > ul > li > strong {
	padding: .6em 0;
	padding-inline-end: 3em;
	line-height: 1.5em;
}

.subnav-toggle {
	display: block !important;
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	margin: 0;
	padding: 0;
	width: 2.75em;
	height: 2.7em;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.subnav-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -.45em 0 0 -.3em;
	width: .55em;
	height: .55em;
	border-right: 2px solid #B02D0A;
	border-bottom: 2px solid #B02D0A;
	transform: rotate(45deg);
	transition: transform .2s;
}

.mainNavi li.is-open > .subnav-toggle::after {
	margin-top: -.15em;
	transform: rotate(-135deg);
}

/* Untermenüs: im Fluss statt als Dropdown, per Knopf aufklappbar */
.nav-container .ym-hlist ul li ul,
.nav-container .ym-hlist ul li:hover ul {
	display: none;
	position: static;
	margin: 0;
	padding: 0 0 .5em !important;
	padding-inline-start: 1em !important;
	font-size: .875em;
	background: none;
}

.nav-container .ym-hlist ul li.is-open ul {
	display: block;
}

.nav-container .ym-hlist.mainNavi ul li ul li {
	padding: 0 !important;
	width: auto;
	height: auto;
	background: none;
}

.nav-container .ym-hlist ul li ul li.last {
	display: none;
}

.nav-container .ym-hlist ul li ul li a {
	padding: .45em 0;
	line-height: 1.4em;
}

.nav-container .serviceNavi {
	padding: .5em 0;
	font-weight: 600;
}

.nav-container .serviceNavi ul li {
	display: inline-block;
}

.nav-container .serviceNavi ul li a {
	padding: .4em 0;
	padding-inline-end: .75em;
	color: #000;
}

.nav-container #langNavi {
	padding: 0 0 .75em;
}

.nav-container #langNavi ul li {
	display: inline-block;
}

.nav-container #langNavi ul li a {
	padding: .4em 0;
	padding-inline-end: .75em;
	color: #000;
}