/* Navigation: Pillen-Leiste im Kopf, Handy-Menü ab 1040 px, Fußnavigation. */

.wp-block-navigation.is-style-pill .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: 6px;
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--wp--preset--border-radius--pill);
	background: rgba(255, 255, 255, .06);
}

.wp-block-navigation.is-style-pill .wp-block-navigation-item__content {
	padding: 9px 16px;
	border-radius: var(--wp--preset--border-radius--pill);
	color: #d6dff0;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s, color .2s;
}

/* Fünf Hauptpunkte (mit „Unternehmen“) passen knapp über dem Handy-Menü nur enger. */
@media (min-width: 1040px) and (max-width: 1199px) {
	.wp-block-navigation.is-style-pill .wp-block-navigation__container {
		gap: 2px;
	}

	.wp-block-navigation.is-style-pill .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding-inline: 11px;
	}
}

.wp-block-navigation.is-style-pill .wp-block-navigation-item__content:hover {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

.wp-block-navigation.is-style-pill .wp-block-navigation__responsive-container-open,
.wp-block-navigation.is-style-pill .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* Untermenüs am Desktop: weiße Karte unter der Pille, dritte Ebene seitlich.
   Bei den hinteren Hauptpunkten (Service, Kontakt) klappt die dritte Ebene nach links,
   sonst läuft z. B. „Friedhofs- und Grabinfos“ aus dem Fenster. */
@media (min-width: 1040px) {
	.wp-block-navigation.is-style-pill .wp-block-navigation__submenu-icon {
		width: 10px;
		height: 10px;
		margin-left: -8px;
		margin-right: 8px;
		padding: 0;
		color: #d6dff0;
	}

	.wp-block-navigation.is-style-pill .has-child:is(:hover, :focus-within) > .wp-block-navigation-item__content {
		background: rgba(255, 255, 255, .1);
		color: #fff;
	}

	.wp-block-navigation.is-style-pill .wp-block-navigation__submenu-container {
		top: calc(100% + 10px);
		left: 0;
		z-index: 30;
		min-width: 248px !important;
		padding: 8px;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--preset--border-radius--medium);
		background: var(--wp--preset--color--base) !important;
		box-shadow: var(--wp--preset--shadow--card);
		color: var(--wp--preset--color--ink) !important;
	}

	/* Brücke über den Abstand, damit das Menü beim Hinüberfahren offen bleibt. */
	.wp-block-navigation.is-style-pill .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		inset: -12px 0 auto;
		height: 12px;
	}

	.wp-block-navigation.is-style-pill .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		width: 100%;
		padding: 10px 14px;
		border-radius: var(--wp--preset--border-radius--small);
		color: var(--wp--preset--color--ink);
		font-size: var(--wp--preset--font-size--small);
	}

	.wp-block-navigation.is-style-pill .wp-block-navigation__submenu-container :is(.wp-block-navigation-item__content:hover, .has-child:is(:hover, :focus-within) > .wp-block-navigation-item__content) {
		background: var(--wp--preset--color--sand);
		color: var(--wp--preset--color--blue);
	}

	.wp-block-navigation.is-style-pill .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
		position: absolute;
		right: 14px;
		margin: 0;
		color: var(--wp--preset--color--muted);
		transform: rotate(-90deg);
	}

	.wp-block-navigation.is-style-pill .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		top: -9px;
		left: calc(100% + 8px);
	}

	.wp-block-navigation.is-style-pill .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
		inset: 0 auto 0 -12px;
		width: 12px;
		height: auto;
	}

	.wp-block-navigation.is-style-pill .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(-n+2) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		right: calc(100% + 8px);
		left: auto;
	}

	.wp-block-navigation.is-style-pill .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(-n+2) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
		right: -12px;
		left: auto;
	}

	.wp-block-navigation.is-style-pill .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(-n+2) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
		transform: rotate(90deg);
	}

	/* Telefon-Button aus dem Menü steht am Desktop schon neben der Pille. */
	.wp-block-navigation.is-style-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-buttons {
		display: none;
	}
}

/* Unter 1040 px reicht der Platz nicht: Menü-Button statt Leiste (Core schaltet erst bei 600 px um). */
@media (max-width: 1039px) {
	.wp-block-navigation.is-style-pill .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation.is-style-pill .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Geöffnetes Handy-Menü (Aufbau aus himml26): Vollbild, nachtblau, Zeilen mit Trennlinie.
   Untermenüs klappen als Akkordeon auf; Link und Pfeil-Button sind getrennte Ziele,
   damit „Unternehmen“ verlinkt bleibt und der Pfeil nur aufklappt. */
.wp-block-navigation.is-style-pill .wp-block-navigation__responsive-container.is-menu-open {
	--himml-nav-line: rgba(255, 255, 255, .12);
	--himml-nav-sub: rgba(255, 255, 255, .04);
	--himml-nav-sub-deep: rgba(255, 255, 255, .08);
	--himml-nav-toggle: 3.25rem;

	padding: 0;
	background: var(--wp--preset--color--night) !important;
	color: #fff !important;
	overflow-x: clip;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.wp-block-navigation.is-style-pill .is-menu-open :is(.wp-block-navigation__responsive-close, .wp-block-navigation__responsive-dialog) {
	width: 100%;
	max-width: none;
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 24px;
	right: var(--wp--style--root--padding-right, 24px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--preset--border-radius--pill);
	color: #fff;
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	gap: 0;
	min-height: 100%;
	padding: 88px var(--wp--style--root--padding-right, 24px) 40px var(--wp--style--root--padding-left, 24px);
	box-sizing: border-box;
}

.wp-block-navigation.is-style-pill .is-menu-open :is(.wp-block-navigation__container, .wp-block-navigation__submenu-container) {
	flex-direction: column;
	align-items: stretch !important;
	gap: 0 !important;
	width: 100%;
	margin: 0;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	background: none;
	list-style: none;
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation__container {
	border-top: 1px solid var(--himml-nav-line);
}

/* Jede Zeile: Link links, bei Untermenü rechts eine eigene Spalte für den Pfeil. */
.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation-item {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	border-bottom: 1px solid var(--himml-nav-line);
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation-item.has-child {
	grid-template-columns: minmax(0, 1fr) var(--himml-nav-toggle);
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 3.5rem;
	padding: 12px 16px 12px 0;
	border-radius: 0;
	line-height: 1.3;
	color: #fff;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	white-space: normal;
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation-item__content:hover {
	background: none;
	color: var(--wp--preset--color--pale);
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	grid-column: 1;
	grid-row: 1;
}

/* Core blendet den Pfeil im Overlay aus und zeigt alle Untermenüs offen. Hier umgekehrt:
   zu, bis view.js dem Eintrag .is-open gibt. */
.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
	display: inline-flex !important;
	grid-column: 2;
	grid-row: 1;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	width: var(--himml-nav-toggle);
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--himml-nav-line);
	background: none;
	color: #fff;
	cursor: pointer;
	visibility: visible;
	opacity: 1;
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation-submenu__toggle svg {
	display: block !important;
	width: 14px;
	height: 14px;
	margin: 0;
	stroke: currentColor;
	transition: transform .2s var(--himml-ease, ease);
}

.wp-block-navigation.is-style-pill .is-menu-open .is-open > .wp-block-navigation-submenu__toggle svg {
	transform: rotate(180deg);
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation-item > .wp-block-navigation__submenu-container {
	display: none !important;
	position: static !important;
	grid-column: 1 / -1;
	grid-row: 2;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	overflow: visible !important;
	border-top: 1px solid var(--himml-nav-line);
	background: var(--himml-nav-sub) !important;
	box-shadow: none !important;
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation-item.is-open > .wp-block-navigation__submenu-container {
	display: flex !important;
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
	border-bottom: 0;
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	min-height: 3.25rem;
	padding-left: 16px;
	color: var(--wp--preset--color--on-night);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	background: var(--himml-nav-sub-deep) !important;
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-left: 32px;
}

/* Telefon-Button am Ende des Menüs (stammt aus dem Menü der alten Seite):
   im Overlay weiß über die volle Breite, Telefon-Icon des Themes statt Font Awesome. */
.wp-block-navigation.is-style-pill .is-menu-open .wp-block-buttons {
	width: 100%;
	margin-top: 28px;
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-button {
	width: 100%;
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 24px;
	border-radius: var(--wp--preset--border-radius--pill) !important;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--night);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-button__link .fa {
	display: none;
}

.wp-block-navigation.is-style-pill .is-menu-open .wp-block-button__link[href^="tel:"]::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("../../icons/phone.svg") center / contain no-repeat;
	mask: url("../../icons/phone.svg") center / contain no-repeat;
}

.wp-block-navigation.is-style-pill .is-menu-open :is(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle, .wp-block-navigation__responsive-container-close):focus-visible {
	outline: 2px solid var(--wp--preset--color--sky);
	outline-offset: -2px;
}

/* Fußnavigation: schlichte Liste. */
.wp-block-navigation.himml-footer__nav .wp-block-navigation__container {
	gap: 9px;
}

.wp-block-navigation.himml-footer__nav .wp-block-navigation-item__content {
	padding: 0;
	color: #dbe3f2;
	font-weight: 300;
}

.wp-block-navigation.himml-footer__nav .wp-block-navigation-item__content:hover {
	color: #fff;
}

/* Core vererbt den Hintergrund an jeden Eintrag; in der Pille doppelt sich das. */
.wp-block-navigation.is-style-pill .wp-block-navigation-item {
	background: none;
}