/* Akkordeon-Navigation für Koji – Desktop-Sidebar und Mobile-Menü
   Unterpunkte werden erst eingeklappt, wenn das Skript geladen ist (.dd-acc-ready). */

.site-nav li.dd-acc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: .4rem;
}

.site-nav li.dd-acc > a {
	min-width: 0;
}

/* Lange Menüpunkte (z. B. „Produktions-Richtlinien / globale Markenkampagne 2026“)
   mit Silbentrennung umbrechen, damit die Zeile bis an die Pfeil-Spalte läuft. */
.site-nav a {
	-webkit-hyphens: auto;
	hyphens: auto;
	-webkit-hyphenate-limit-before: 3;
	-webkit-hyphenate-limit-after: 3;
	hyphenate-limit-chars: 6 3 3;
}

/* Unterpunkte direkt im Rhythmus der Liste an den Hauptpunkt anschließen,
   den Extra-Abstand ans Ende der Gruppe setzen (Koji: margin-top .6em). */
.site-nav li.dd-acc > .sub-menu {
	grid-column: 1 / -1;
	margin-top: 0;
	margin-bottom: .6em;
}

.dd-acc__toggle {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	height: 3.2rem;
	justify-content: center;
	margin: -.6rem -.6rem -.6rem 0;
	padding: 0;
	width: 3.2rem;
	transition: background-color .15s ease;
}

.dd-acc__toggle:hover {
	background: rgba(19, 62, 143, .08);
}

.dd-acc__toggle:focus-visible {
	outline: 2px solid #20b9d6;
	outline-offset: 1px;
}

.dd-acc__toggle svg {
	display: block;
	pointer-events: none; /* Klick soll den Button treffen, nicht das Icon */
	transition: transform .2s ease;
}

.dd-acc--open > .dd-acc__toggle svg {
	transform: rotate(180deg);
}

/* Eingeklappt, sobald JavaScript aktiv ist. Koji setzt html.js schon im <head>,
   der Zweig der aktuellen Seite ist serverseitig als .dd-acc--open markiert –
   so stimmt der Zustand beim ersten Zeichnen, ohne Springen oder Flackern. */
html.js .site-nav li.dd-acc > .sub-menu,
.site-nav.dd-acc-ready li.dd-acc > .sub-menu {
	display: none;
}

html.js .site-nav li.dd-acc.dd-acc--open > .sub-menu,
.site-nav.dd-acc-ready li.dd-acc.dd-acc--open > .sub-menu {
	display: block;
}

/* Animation nur beim Aufklappen per Klick, nicht beim Laden der Seite */
.site-nav li.dd-acc.dd-acc--animate > .sub-menu {
	animation: dd-acc-in .18s ease-out;
}

@keyframes dd-acc-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* Aktive Seite hervorheben */
.site-nav .current-menu-item > a {
	color: #20b9d6;
}

/* Sprachumschalter „DE / EN“ unter dem letzten Menüpunkt */
.site-nav li.dd-lang-switch {
	align-items: center;
	display: flex;
	font-size: 1.3rem;
	font-weight: 600;
	gap: .6rem;
	letter-spacing: .04em;
	margin-top: 2.4rem;
}

.site-nav li.dd-lang-switch a {
	color: #133e8f;
	opacity: .5;
	text-decoration: none;
	transition: opacity .15s ease;
}

.site-nav li.dd-lang-switch a:hover,
.site-nav li.dd-lang-switch a:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

.site-nav li.dd-lang-switch a.is-current {
	opacity: 1;
}

.dd-lang-switch__sep {
	color: #133e8f;
	opacity: .35;
}

/* Mobile: größere Tippfläche */
@media (max-width: 999px) {
	.dd-acc__toggle {
		height: 4.4rem;
		width: 4.4rem;
		margin: -1.2rem -1.2rem -1.2rem 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dd-acc__toggle svg,
	.site-nav li.dd-acc.dd-acc--animate > .sub-menu {
		animation: none;
		transition: none;
	}
}