/**
 * Zehner Buchung Mobil - Navigationsleisten.
 *
 * Zwei getrennte Faelle:
 *
 * 1. ul.submenu (Unterseiten-Leiste) hat vom Theme bereits overflow-x:auto und
 *    scrollt korrekt. Auf dem Handy sieht man das nur nicht - die Eintraege
 *    enden hart am Bildschirmrand, ohne Scrollbalken und ohne Hinweis, dass
 *    rechts noch etwas kommt.
 *
 * 2. ul#primary-menu-list (Hauptnavigation) laeuft zwischen rund 760px und
 *    950px ueber den Bildschirmrand hinaus, ohne zu scrollen: das Theme zeigt
 *    dort noch die volle Desktop-Leiste, blendet das Burger-Menue aber erst
 *    weiter unten ein. Folge ist waagerechter Ueberlauf der ganzen Seite
 *    (auf dem iPad hochkant rund 180px). Diese Liste fuehrt keine
 *    Ausklapp-Untermenues, ein Scroll-Container ist dort also gefahrlos.
 *
 * Die Klasse .zbm-nav-scrollable setzt nav-scroll.js, sobald wirklich mehr
 * Inhalt vorhanden ist als Platz - das Layout selbst bleibt unangetastet.
 */

nav#site-navigation ul.submenu,
nav#site-navigation ul#primary-menu-list.zbm-nav-scrollable {
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

nav#site-navigation ul.submenu::-webkit-scrollbar,
nav#site-navigation ul#primary-menu-list.zbm-nav-scrollable::-webkit-scrollbar {
	display: none;
}

/**
 * Ursache des Ueberlaufs: der Kopfbereich ist ein Flex-Container mit
 * flex-wrap:nowrap, und nav#site-navigation ist als Flex-Element auf
 * min-width:auto voreingestellt. Es kann daher nicht unter seine Inhaltsbreite
 * schrumpfen und schiebt sich stattdessen ueber den rechten Bildschirmrand
 * hinaus. min-width:0 erlaubt das Schrumpfen, der Scroll-Container in der Liste
 * faengt den Rest ab.
 */
@media (max-width: 1100px) {

	nav#site-navigation {
		min-width: 0;
	}

	nav#site-navigation > ul {
		max-width: 100%;
		overflow-x: auto;
	}

	nav#site-navigation ul#primary-menu-list {
		flex-wrap: nowrap;
	}
}

/* Weicher Auslauf am rechten Rand als Scroll-Hinweis. Nur solange rechts
   tatsaechlich noch etwas steht (.zbm-nav-at-end entfernt ihn am Ende). */
nav#site-navigation ul.submenu.zbm-nav-scrollable,
nav#site-navigation ul#primary-menu-list.zbm-nav-scrollable {
	-webkit-mask-image: linear-gradient(to right, #000 82%, rgba(0, 0, 0, 0.15) 100%);
	mask-image: linear-gradient(to right, #000 82%, rgba(0, 0, 0, 0.15) 100%);
}

nav#site-navigation ul.submenu.zbm-nav-scrollable.zbm-nav-at-end,
nav#site-navigation ul#primary-menu-list.zbm-nav-scrollable.zbm-nav-at-end {
	-webkit-mask-image: none;
	mask-image: none;
}