/* =========================================================
   Hauptnavigation – Vorbild privatbergfuehrer.de
   Fixierter weißer Balken, Logo links, Menü rechts in Versalien.
   Menüpunkte mit Unterseiten sind button-Elemente (nicht verlinkt) und
   klappen nur das Untermenü auf.

   Aufbau: Desktop zuerst (Regeln ohne Media Query), Abweichungen
   für schmale Bildschirme ausschließlich in @media (max-width: …).
   Der Umschaltpunkt 1399.98 px muss zur Bootstrap-Klasse
   navbar-expand-xxl im Partial Navigation.html passen.

   Markup: Resources/Private/PageView/Partials/Navigation.html
   ========================================================= */

.hauptnavigation {
	--bs-navbar-padding-y: 0;
	--bs-navbar-color: var(--pbf-text);
	--bs-navbar-hover-color: var(--pbf-blau);
	--bs-navbar-active-color: var(--pbf-blau);
	background-color: var(--pbf-hintergrund);
	padding-top: 10px;
}

/*--- Logo und Schriftzug ---*/
.hauptnavigation .navbar-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	margin-right: 1rem;
}

.hauptnavigation .navbar-brand img {
	display: block;
	width: auto;
	height: 73px;
}

.hauptnavigation .logo-schriftzug {
	color: var(--pbf-blau);
	font-family: var(--pbf-font-base);
	font-size: 15px;
	line-height: 1.2;
}

/*--- Menüpunkte ---*/
.hauptnavigation .nav-link {
	padding: 20px 17px;
	color: var(--pbf-text);
	font-family: var(--pbf-font-headline);
	font-size: 13px;
	line-height: 54px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.hauptnavigation .nav-link:hover,
.hauptnavigation .nav-link:focus-visible,
.hauptnavigation .nav-link.active,
.hauptnavigation .nav-item.show>.nav-link {
	color: var(--pbf-blau);
}

/*--- Elternpunkte: button statt Link, sieht aus wie ein Menüpunkt ---*/
.hauptnavigation button.nav-link {
	border: 0;
	background: transparent;
	text-align: left;
}

.hauptnavigation .nav-item.dropdown {
	position: relative;
}

/*--- Dropdown ---*/
.hauptnavigation .dropdown-menu {
	--bs-dropdown-min-width: 230px;
	--bs-dropdown-padding-y: 15px;
	--bs-dropdown-border-radius: 0;
	--bs-dropdown-border-width: 0;
	--bs-dropdown-link-color: #777;
	--bs-dropdown-link-hover-color: var(--pbf-blau);
	--bs-dropdown-link-hover-bg: transparent;
	--bs-dropdown-link-active-color: var(--pbf-blau);
	--bs-dropdown-link-active-bg: transparent;
	--bs-dropdown-item-padding-x: 25px;
	--bs-dropdown-item-padding-y: 6px;
	--bs-dropdown-font-size: 13px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 17.6%);
}

/* Position des Untermenüs unter dem Elternpunkt.
   Beim Öffnen per Klick setzt Popper eigene Inline-Werte (Auslöser ist per
   data-bs-reference="parent" der Menüpunkt selbst, nicht der kleine Pfeil-Button).
   Beim Öffnen per Überfahren gibt es keine Inline-Werte – dann greifen diese Regeln,
   sonst säße das Menü auf Höhe des Pfeils statt darunter. */
.hauptnavigation .nav-item.dropdown>.dropdown-menu {
	top: 100%;
	left: 0;
	margin-top: 0;
}

/* Untermenü zusätzlich per Überfahren öffnen */
.hauptnavigation .dropdown:hover>.dropdown-menu,
.hauptnavigation .dropdown:focus-within>.dropdown-menu {
	display: block;
	margin-top: 0;
}

.hauptnavigation .dropdown-sublist .dropdown-item-sub {
	padding-left: 40px;
	font-size: 12px;
}

/*--- Sprachumschalter ---*/
.hauptnavigation .sprache {
	display: flex;
	gap: .5rem;
	align-items: center;
	margin-left: 1rem;
}

.hauptnavigation .sprache-item.is-active {
	font-weight: 700;
}

.hauptnavigation .sprache-item.is-disabled {
	opacity: .5;
}

/*------------------------------------*\
  #BIS 1399.98 PX – Offcanvas statt Dropdowns
\*------------------------------------*/
@media (max-width: 1399.98px) {

	.hauptnavigation {
		min-height: var(--pbf-header-hoehe-mobil);
	}

	.hauptnavigation .navbar-brand {
		gap: 8px;
	}

	.hauptnavigation .navbar-brand img {
		height: 40px;
	}

	.hauptnavigation .logo-schriftzug {
		font-size: 13px;
	}

	.hauptnavigation .offcanvas {
		max-width: 320px;
	}

	.hauptnavigation .nav-item>.nav-link {
		border-bottom: 1px solid var(--pbf-linie);
	}

	.hauptnavigation .nav-link {
		padding: 12px 0;
		line-height: 1.6;
	}

	/* Elternpunkt über die volle Breite, Pfeil rechts */
	.hauptnavigation button.nav-link {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
	}

	/* Untermenü über die volle Breite unter den Elternpunkt */
	.hauptnavigation .nav-item.dropdown>.dropdown-menu {
		width: 100%;
	}

	.hauptnavigation .dropdown-menu {
		--bs-dropdown-padding-y: 0;
		--bs-dropdown-item-padding-x: 12px;
		--bs-dropdown-item-padding-y: 10px;
		box-shadow: none;
		background: var(--pbf-grau-hell);
	}

	/* Kein Öffnen per Überfahren – nur per Tippen auf den Menüpunkt.
	   Sonst bleibt auf Touchgeräten ein Untermenü nach dem Antippen offen hängen. */
	.hauptnavigation .dropdown:hover>.dropdown-menu:not(.show),
	.hauptnavigation .dropdown:focus-within>.dropdown-menu:not(.show) {
		display: none;
	}

	.hauptnavigation .dropdown-sublist .dropdown-item-sub {
		padding-left: 28px;
	}

	.hauptnavigation .sprache {
		margin-top: 1rem;
		margin-left: 0;
	}
}

/*--- Sehr schmale Geräte: Schriftzug neben dem Logo ausblenden ---*/
@media (max-width: 400px) {

	.hauptnavigation .logo-schriftzug {
		display: none;
	}
}