/* ===========================================================================
   Kopfbereich – aufgebaut auf dem WordPress-Kernblock „Navigation“.
   Es gibt keine eigene Menü-Logik: Aufklappen, Tastaturbedienung und das
   mobile Overlay kommen vollständig aus dem Core. Hier wird nur gestaltet.
   =========================================================================== */

/*
 * „Sticky“ sitzt auf der Hülle, die der Core für den Template-Teil ausgibt,
 * nicht auf der Gruppe darin: Ein klebendes Element kann sich nur innerhalb
 * seines Elternelements bewegen. Die Hülle <header class="wp-block-template-part">
 * ist exakt so hoch wie der Kopfbereich – dort bliebe kein Spielraum und der
 * Kopfbereich würde beim Scrollen mit nach oben verschwinden. Ihr Elternteil
 * .wp-site-blocks umfasst dagegen die ganze Seite.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 200;
}

.asz-header {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid transparent;
	transition: border-color var(--asz-t), box-shadow var(--asz-t);
}

/*
 * Der Glas-Effekt liegt bewusst auf einem Pseudo-Element und nicht auf
 * .asz-header selbst: „backdrop-filter“ macht ein Element zum Bezugsrahmen für
 * „position: fixed“. Läge der Filter auf dem Kopfbereich, würde das mobile
 * Overlay des Navigations-Blocks nur so hoch wie der Kopfbereich – statt über
 * den ganzen Bildschirm. Als Pseudo-Element bleibt die Optik identisch, ohne
 * das Positionsverhalten der Kindelemente zu verändern.
 */
.asz-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, .9);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	pointer-events: none;
}

.asz-header.is-stuck {
	border-bottom-color: var(--wp--preset--color--line);
	box-shadow: 0 6px 24px rgba(11, 31, 26, .06);
}

/* Der Innencontainer ist der Bezugsrahmen für die Mega-Menüs –
   dadurch kann kein Panel aus dem Viewport laufen. */
.asz-header__inner {
	position: relative;
	max-width: var(--asz-shell);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	gap: clamp(.75rem, 2vw, 2rem);
}

/* --- Top-Bar ------------------------------------------------------------ */

.asz-topbar {
	background: var(--wp--preset--color--primary-dark);
	color: rgba(255, 255, 255, .82);
	font-size: .8125rem;
}

.asz-topbar .asz-header__inner {
	min-height: var(--asz-topbar-h);
	align-items: center;
}

.asz-topbar__meta {
	gap: 1.25rem;
	color: rgba(255, 255, 255, .7);
	font-size: .8125rem;
}

.asz-topbar__meta a {
	color: inherit;
	text-decoration: none;
	transition: color var(--asz-t);
}

.asz-topbar__meta a:hover {
	color: var(--wp--preset--color--accent);
}

/* --- Main-Bar ----------------------------------------------------------- */

.asz-mainbar .asz-header__inner {
	min-height: var(--asz-header-h);
	align-items: center;
}

.asz-brand {
	flex: 0 0 auto;
}

.asz-brand .wp-block-site-logo img {
	height: 38px;
	width: auto;
	transition: transform var(--asz-t);
}

.asz-brand:hover .wp-block-site-logo img {
	transform: scale(1.03);
}

.asz-header__actions {
	flex: 0 0 auto;
	gap: .5rem;
	align-items: center;
}

/* --- Navigation: Grundzustand ------------------------------------------- */

.asz-nav {
	flex: 1 1 auto;
}

.asz-nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--asz-t);
}

.asz-nav--main .wp-block-navigation__container > .wp-block-navigation-item:not(.asz-megamenu) {
	position: relative;
}

.asz-nav--main > .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
	font-size: .9375rem;
	color: var(--wp--preset--color--primary);
	padding-block: .55rem;
}

.asz-nav--main .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary-dark);
}

/* Unterstreichung beim Hover – ersetzt keine Funktion, nur Gestaltung. */
.asz-nav--main > .wp-block-navigation__responsive-container > .wp-block-navigation__responsive-dialog > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after,
.asz-nav--main .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 1.4rem;
	bottom: .15rem;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--asz-t);
}

.asz-nav--main .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.asz-nav--main .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content::after,
.asz-nav--main .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.asz-topbar .wp-block-navigation-item__content {
	font-size: .8125rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .86);
}

.asz-topbar .wp-block-navigation-item__content:hover {
	color: #fff;
}

.asz-topbar .wp-block-navigation__submenu-icon svg {
	opacity: .7;
}

/* --- Aufklappmenüs ------------------------------------------------------- */

.asz-nav .wp-block-navigation__submenu-container {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--asz-radius-lg);
	box-shadow: 0 30px 70px rgba(0, 56, 47, .16);
	padding: 1rem;
	gap: .1rem;
}

.asz-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .5rem .7rem;
	border-radius: var(--asz-radius-sm);
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	font-size: .9375rem;
	line-height: 1.35;
	transition: background-color var(--asz-t), color var(--asz-t), transform var(--asz-t);
}

.asz-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--primary);
	transform: translateX(2px);
}

/* --- Mega-Menü ----------------------------------------------------------
   Der Core setzt auf mehreren Ebenen `position: relative`. Für die Panels
   heben wir das am Desktop auf, damit der Bezugsrahmen der Seiten-Container
   ist – dadurch spannt das Panel exakt über das Raster und kann nie über den
   Viewport hinauslaufen. */

@media (min-width: 1100px) {
	.asz-nav--main.wp-block-navigation,
	.asz-nav--main.wp-block-navigation .wp-block-navigation__responsive-container,
	.asz-nav--main.wp-block-navigation .wp-block-navigation__responsive-dialog,
	.asz-nav--main.wp-block-navigation .wp-block-navigation__responsive-close,
	.asz-nav--main.wp-block-navigation .wp-block-navigation__responsive-container-content,
	.asz-nav--main.wp-block-navigation .wp-block-navigation__container,
	.asz-nav--main.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item.asz-megamenu {
		position: static;
	}

	.asz-nav--main.wp-block-navigation .wp-block-navigation-item.asz-megamenu > .wp-block-navigation__submenu-container {
		left: clamp(1.25rem, 5vw, 3rem);
		right: clamp(1.25rem, 5vw, 3rem);
		top: 100%;
		width: auto;
		min-width: 0;
		max-width: none;
		margin-top: .35rem;
		display: block;
		columns: 3;
		column-gap: clamp(1.5rem, 3vw, 3rem);
		padding: clamp(1.5rem, 2.5vw, 2rem);
	}

	.asz-nav--main.wp-block-navigation .wp-block-navigation-item.asz-megamenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		break-inside: avoid;
		width: 100%;
		display: block;
	}

	.asz-nav--main.wp-block-navigation .wp-block-navigation-item.asz-megamenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: block;
		white-space: normal;
	}
}

/* Hervorgehobener Menüpunkt (CTA) – über „Zusätzliche CSS-Klasse“ gesetzt. */
.asz-nav .asz-nav-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
	text-align: center;
	justify-content: center;
	margin-top: .5rem;
	border-radius: 999px;
	padding: .75rem 1.1rem;
}

.asz-nav .asz-nav-cta > .wp-block-navigation-item__content:hover {
	background: #0bb96f;
	color: var(--wp--preset--color--primary-dark);
	transform: none;
}

/* --- Suche (Kernblock, Symbol-Variante) --------------------------------- */

.asz-header__search .wp-block-search__inside-wrapper {
	border: 0;
}

.asz-header__search .wp-block-search__button {
	width: 44px;
	height: 44px;
	padding: 0;
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line);
	background: #fff;
	color: var(--wp--preset--color--primary);
	transition: background-color var(--asz-t), border-color var(--asz-t), transform var(--asz-t);
}

.asz-header__search .wp-block-search__button:hover {
	background: var(--wp--preset--color--mint);
	border-color: var(--wp--preset--color--mint-strong);
	transform: translateY(-1px);
}

.asz-header__search .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.asz-header__search .wp-block-search__input {
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line);
	padding: .6rem 1rem;
}

/* --- Termin-Button ------------------------------------------------------- */

.asz-btn-booking {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .8rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: .9375rem;
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--asz-t), background-color var(--asz-t), box-shadow var(--asz-t);
}

.asz-btn-booking:hover {
	transform: translateY(-1px);
	background: #0bb96f;
	box-shadow: 0 10px 24px rgba(0, 56, 47, .18);
}

.asz-btn-booking svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
   Umbruchpunkt: Das Kern-Overlay öffnet standardmäßig erst unter 600 px.
   Für die breite Hauptnavigation heben wir den Punkt auf 1100 px an –
   ausschließlich per CSS, die Mechanik bleibt die des Cores.
   --------------------------------------------------------------------------- */

@media (max-width: 1099px) {
	.asz-topbar {
		display: none;
	}

	.asz-nav--main .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.asz-nav--main .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.asz-nav--main {
		flex: 0 0 auto;
		order: 3;
	}

	.asz-header .asz-btn-booking span {
		display: none;
	}

	.asz-header .asz-btn-booking {
		padding: .8rem;
	}

	/* Overlay-Zustand (Core-Klassen) an das asz-Design anpassen. */
	.asz-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: clamp(1.5rem, 5vw, 3rem);
	}

	/*
	 * Die Navigation ist auf dem Desktop zentriert ausgerichtet
	 * (Blockeinstellung „Mittig“, Klasse .items-justified-center). Im mobilen
	 * Overlay stapeln sich die Punkte untereinander – dort wäre die zentrierte
	 * Ausrichtung schlecht lesbar und die Trefferflächen wären nur so breit wie
	 * der Text. Deshalb hier linksbündig über die volle Breite.
	 */
	.asz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.asz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.asz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
	.asz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		align-items: stretch;
		text-align: start;
	}

	.asz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
	}

	.asz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		color: #fff;
		font-size: 1.125rem;
		padding-block: .6rem;
	}

	.asz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background: transparent;
		border: 0;
		box-shadow: none;
		columns: 1;
		padding-left: 1rem;
	}

	.asz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: .9375rem;
		color: rgba(255, 255, 255, .82);
	}

	.asz-nav .wp-block-navigation__responsive-container.is-menu-open .asz-nav-cta > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--primary-dark);
		display: inline-flex;
	}

	.asz-nav .wp-block-navigation__responsive-container-open,
	.asz-nav .wp-block-navigation__responsive-container-close {
		color: var(--wp--preset--color--primary);
		padding: .6rem;
		border-radius: 999px;
		border: 1px solid var(--wp--preset--color--line);
		background: #fff;
	}

	.asz-nav .wp-block-navigation__responsive-container-close {
		color: #fff;
		background: transparent;
		border-color: rgba(255, 255, 255, .3);
	}

	.asz-nav .wp-block-navigation__responsive-container-open svg,
	.asz-nav .wp-block-navigation__responsive-container-close svg {
		width: 22px;
		height: 22px;
	}
}

@media (max-width: 781px) {
	.asz-brand .wp-block-site-logo img {
		height: 32px;
	}
}

/* Hauptnavigation bleibt einzeilig; lange Beschriftungen dürfen schrumpfen. */
@media (min-width: 1100px) {
	.asz-nav--main .wp-block-navigation__container {
		flex-wrap: nowrap;
		gap: clamp(.4rem, 1.2vw, 1.25rem);
	}

	.asz-nav--main .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		white-space: nowrap;
	}
}

@media (min-width: 1100px) and (max-width: 1320px) {
	.asz-nav--main .wp-block-navigation-item__content {
		font-size: .875rem;
	}
}

/*
 * Mobiles Overlay einfärben (statt über Blockattribute, die auch die
 * Desktop-Untermenüs umfärben würden). Der Kern setzt Weiß auf Schwarz über
 *   .wp-block-navigation:not(.has-background)
 *     .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
 * Diese Regel hat fünf Klassen; unsere spiegelt deshalb denselben Aufbau und
 * gewinnt über eine Klasse mehr – ohne !important.
 */
.asz-nav.wp-block-navigation:not(.has-background)
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--primary-dark);
	color: #fff;
}

/* „Häufig gesucht“ / „Aus dem Blog“ – hervorgehobene Schnelllinks im Panel */
.asz-nav .asz-nav-highlight > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	margin-top: .35rem;
}

.asz-nav .asz-nav-highlight > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--mint-strong);
}

.asz-nav .asz-nav-az > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-top: .35rem;
}

.asz-nav .asz-nav-az > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
	background: transparent;
}