/* Untermenüs der Hauptnavigation (Design → Menüs, Tiefe 2). */
.site-header__nav > .menu-item { position: relative; list-style: none; }
.site-header__nav > .menu-item-has-children > a::after { content: "▾"; font-size: .7em; margin-left: .3em; display: inline-block; transition: transform .2s; }
.site-header__nav .sub-menu {
	position: absolute; top: 100%; left: -0.8rem; z-index: 50; min-width: 230px; margin: 0; padding: .45rem 0;
	list-style: none; background: var(--white, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
	box-shadow: 0 10px 28px rgba(0,0,0,.12); opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s, transform .15s, visibility .15s;
}
.site-header__nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.site-header__nav .sub-menu a { display: block; padding: .5rem 1rem; font-weight: 500; white-space: nowrap; }
.site-header__nav .sub-menu a:hover { background: var(--bg-soft, #f4f6f5); }
.site-header__nav > .menu-item-has-children:hover > .sub-menu,
.site-header__nav > .menu-item-has-children:focus-within > .sub-menu,
.site-header__nav > .menu-item-has-children.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-header__nav > .menu-item-has-children:hover > a::after,
.site-header__nav > .menu-item-has-children.is-open > a::after { transform: rotate(180deg); }

@media (max-width: 1060px) {
	.site-header__nav > .menu-item { width: 100%; }
	.site-header__nav .sub-menu {
		position: static; min-width: 0; border: 0; box-shadow: none; padding: 0 0 0 1rem; margin-top: .2rem;
		opacity: 1; visibility: visible; transform: none; display: none; background: transparent;
	}
	.site-header__nav > .menu-item-has-children.is-open > .sub-menu { display: block; }
	.site-header__nav .sub-menu a { padding: .45rem 0; font-weight: 500; }
}

/* Menüpunkte nicht umbrechen; bei mittleren Breiten etwas enger setzen. */
.site-header__nav > .menu-item > a { white-space: nowrap; }
@media (min-width: 1061px) and (max-width: 1240px) {
	.site-header__nav { gap: .85rem; }
	.site-header__nav > .menu-item > a, .site-header__nav .lang-switch__toggle { font-size: .9rem; }
	.site-header__nav a.site-header__book { padding-inline: 1rem; }
}

/* Hamburger-Menü schon bis 1060 px (Tablet quer / kleine Laptops): sonst läuft das Menü über
   den Rand und drückt das Logo weg. Entspricht den 860-px-Regeln aus theme.css/theme-wp.css. */
@media (min-width: 861px) and (max-width: 1060px) {
	.site-header__toggle { display: block; margin-left: auto; }
	.site-header__nav {
		display: none; position: absolute; top: 72px; left: 0; right: 0;
		flex-direction: column; align-items: flex-start; gap: 1rem;
		background: var(--white, #fff); padding: 1.2rem; border-bottom: 1px solid var(--line, #e5e7eb);
		box-shadow: var(--shadow-pop, 0 12px 30px rgba(0,0,0,.12));
	}
	.site-header__nav.is-open { display: flex; }
	.site-header__nav a { padding: .7rem 0; width: 100%; }
	.site-header__nav .lang-switch { align-self: flex-start; }
	.site-header__nav .lang-switch__menu { left: 0; right: auto; }
}