/**
 * Touch-Geräte ab 1024 px (iPad quer, große Tablets)
 *
 * Eingebunden mit media="screen and (min-width: 1024px) and (hover: none)
 * and (pointer: coarse)" (page.typoscript). Kopf, Slider und Leiste mit Logo
 * bleiben wie am Desktop; nur Menü, Service, Sprachen und Suche weichen einem
 * Menüknopf. Er öffnet die mobile Navigation (mobile-nav.css) als Panel am
 * rechten Rand. Die Desktop-Navigation mit Hover-Untermenüs lässt sich per
 * Touch schlecht bedienen.
 *
 * Maße in px, weil die Desktop-Ansicht mit fester 12-px-Grundschrift rechnet.
 */

/* --- Geschlossen: Desktop-Leiste mit Menüknopf -------------------------- */

/* Unsichtbar statt ausgeblendet und in der Höhe des Desktops (die Stile aus
   mobile-nav.css greifen schon), damit das Logo an seinem Platz bleibt */
.nav-container .ym-grid:first-child,
.nav-container .ym-grid:nth-child(2) > .ym-gl:nth-child(2) {
	visibility: hidden;
}

.nav-container .ym-grid:first-child {
	display: block;
	overflow: hidden;
	height: 36px;
}

/* Rechts auf der Linie des letzten Menüpunkts, mittig im Balken (100 px) */
.nav-toggle {
	display: block !important;
	position: absolute;
	top: 28px;
	right: calc(max(0px, (100% - 1024px) / 2) + 32px);
	margin: 0;
	padding: 0;
	width: 45px;
	height: 45px;
	border: 0;
	font-size: 14px;
	background: transparent;
	cursor: pointer;
}

/* --- Geöffnet: Panel am rechten Rand ------------------------------------ */

.nav-container.is-open {
	--nav-panel: min(360px, 90vw);
	z-index: 1100 !important;
}

/* Abdunkelung der Seite; ein Tipp darauf schließt (dafg.js) */
.nav-container.is-open::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, .35);
}

.nav-container.is-open::before {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: var(--nav-panel);
	background: #d3cac6;
	box-shadow: -2px 0 8px rgba(0, 0, 0, .25);
}

.nav-container.is-open .nav-toggle {
	position: fixed;
	top: 8px;
	right: 8px;
	z-index: 4;
}

/* Oben Suche, Service und Sprachen ... */
.nav-container.is-open .ym-grid:first-child {
	visibility: visible;
	position: fixed;
	top: 60px;
	right: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	margin: 0;
	padding: 0 16px;
	min-width: 0;
	max-width: none;
	overflow: visible;
	width: var(--nav-panel);
	height: auto;
	font-size: 14px;
}

/* ... deren Platz in der Leiste bleibt, sonst rückt das Logo hoch */
.nav-container.is-open .ym-grid:nth-child(2) {
	margin-top: 36px;
}

.nav-container.is-open .ym-grid:first-child > .ym-gl {
	float: none;
	margin: 0 !important;
	width: auto;
}

.nav-container.is-open .ym-grid:first-child > .ym-gl:nth-child(3) {
	order: -1;
}

.nav-container .ym-searchform {
	margin: 0 0 .75em;
}

/* ... darunter das Hauptmenü, das für sich scrollt; die Oberkante setzt
   dafg.js beim Öffnen (--nav-top) */
.nav-container.is-open .ym-grid:nth-child(2) > .ym-gl:nth-child(2) {
	visibility: visible;
	position: fixed;
	top: var(--nav-top, 180px);
	right: 0;
	bottom: 0;
	z-index: 3;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	margin: 0;
	padding: 0 16px 24px;
	width: var(--nav-panel);
	font-size: 14px;
}

.nav-container .mainNavi {
	max-height: none;
	overflow: visible;
}