/* =========================================================
   Hauptnavigation – Vorbild privatbergfuehrer.de
   Fixierter weißer Balken, Logo links, Menü rechts in Versalien.

   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);
	box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

/*--- 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);
}

/* Elternpunkt und Aufklapp-Pfeil nebeneinander.
   Das Untermenü ist Geschwister-Element (Bootstrap findet es nur dort)
   und umbricht darunter, sobald es im Fluss steht (schmale Bildschirme). */
.hauptnavigation .nav-split {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.hauptnavigation .nav-split > .nav-link {
	padding-right: 4px;
}

/*--- Aufklapp-Pfeil neben verlinkten Elternpunkten ---*/
.hauptnavigation .nav-aufklapp {
	border: 0;
	background: transparent;
}

.hauptnavigation .nav-aufklapp::after {
	display: inline-block;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-bottom: 0;
	border-left: .3em solid transparent;
	vertical-align: .1em;
}

.hauptnavigation .nav-split > .nav-aufklapp {
	padding: 20px 13px 20px 0;
	line-height: 54px;
}

/*--- 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-split > .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 {
		flex: 1 1 auto;
		border-bottom: 1px solid var(--pbf-linie);
	}

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

	.hauptnavigation .nav-split > .nav-aufklapp {
		flex: 0 0 auto;
		width: 48px;
		padding: 12px 0;
		line-height: 1.6;
		text-align: right;
	}

	/* Untermenü über die volle Breite unter den Elternpunkt */
	.hauptnavigation .nav-split > .dropdown-menu {
		flex: 0 0 100%;
		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 Pfeil.
	   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;
	}
}