/**
 * PingPong Menü – Navigationsleiste mit wandernder Markierung.
 *
 * Der Effekt: zwei deckungsgleiche Listen übereinander. Die untere zeigt die
 * Schrift in der Akzentfarbe auf dunklem Grund, die obere ist ein farbiger
 * Balken mit umgekehrten Farben – und per clip-path auf genau einen Eintrag
 * beschnitten. Das JavaScript verschiebt nur die beiden Schnittkanten, den
 * weichen Lauf macht die CSS-Transition.
 */

.pp-menu {
	position: relative;
	display: inline-block;
	max-width: 100%;
	isolation: isolate;
	overflow: hidden;

	--pp-menu-bg: #000000;
	--pp-menu-active: var(--e-global-color-primary, #e9495c);
	--pp-menu-inverted: #000000;
	--pp-menu-burger: 60px;
	--pp-menu-r-tl: 10px;
	--pp-menu-r-tr: 10px;
	--pp-menu-r-br: 40px;
	--pp-menu-r-bl: 10px;
	--pp-menu-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--pp-menu-duration: 0.5s;
	--pp-menu-clip-left: 0px;
	--pp-menu-clip-right: 100%;

	background: var(--pp-menu-bg);
	border-radius: var(--pp-menu-r-tl) var(--pp-menu-r-tr) var(--pp-menu-r-br) var(--pp-menu-r-bl);
}

.pp-menu *,
.pp-menu *::before,
.pp-menu *::after {
	box-sizing: border-box;
}

/* ---- Desktop ---- */

.pp-menu-desktop { position: relative; }

.pp-menu-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp-menu-item a {
	display: block;
	padding: 16px 24px;
	font-size: 32px;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	color: var(--pp-menu-active);
}

/* Die farbige Pille. pointer-events aus, damit sie das Überfahren der
   darunterliegenden Einträge nicht abfängt. */
.pp-menu-inverted {
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: var(--pp-menu-active);
	border-radius: var(--pp-menu-r-tl) var(--pp-menu-r-tr) var(--pp-menu-r-br) var(--pp-menu-r-bl);
	clip-path: inset(0 var(--pp-menu-clip-right) 0 var(--pp-menu-clip-left) round
		var(--pp-menu-r-tl) var(--pp-menu-r-tr) var(--pp-menu-r-br) var(--pp-menu-r-bl));
	transition: clip-path 0.4s var(--pp-menu-ease);
	z-index: 1;
}

.pp-menu-inverted .pp-menu-item a { color: var(--pp-menu-inverted); }

/* Tastaturbedienung: der Fokus muss sichtbar sein, obwohl die Pille darüber
   liegt – deshalb der Umriss innen. */
.pp-menu-normal .pp-menu-item a:focus-visible {
	outline: 2px solid var(--pp-menu-active);
	outline-offset: -4px;
	position: relative;
	z-index: 2;
}

/* ---- Mobil ---- */

.pp-menu-mobile { display: none; }

.pp-menu-shell {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: var(--pp-menu-burger);
	height: var(--pp-menu-burger);
	background: var(--pp-menu-bg);
	border-radius: var(--pp-menu-r-tl) var(--pp-menu-r-tr) var(--pp-menu-r-br) var(--pp-menu-r-bl);
	overflow: hidden;
	will-change: width, height;
	transition:
		width var(--pp-menu-duration) var(--pp-menu-ease),
		height var(--pp-menu-duration) var(--pp-menu-ease);
}

.pp-menu.is-open .pp-menu-shell {
	width: var(--pp-menu-shell-w, 280px);
	height: var(--pp-menu-shell-h, 360px);
}

.pp-menu-bar { flex-shrink: 0; }

.pp-menu-burger {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	padding: 0;
	width: var(--pp-menu-burger);
	height: var(--pp-menu-burger);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: transparent; /* zeigt den Grund der Hülle – also immer dieselbe Farbe */
	color: var(--pp-menu-active);
}

.pp-menu-burger:focus-visible {
	outline: 2px solid var(--pp-menu-active);
	outline-offset: -4px;
}

.pp-menu-burger-svg { display: block; overflow: visible; }

.pp-menu-burger-line {
	stroke: var(--pp-menu-active);
	stroke-width: 2;
	stroke-linecap: round;
	transform-box: fill-box;
	transform-origin: center;
	transition:
		transform 0.4s var(--pp-menu-ease),
		opacity 0.2s ease,
		stroke-width 0.25s ease;
}

.pp-menu-panel { width: 100%; }

.pp-menu-mobile-list {
	flex-direction: column;
	flex-wrap: nowrap;
	width: 100%;
}

.pp-menu-mobile-list .pp-menu-item { width: 100%; }

.pp-menu-mobile-list .pp-menu-item a {
	width: 100%;
	text-align: right;
	white-space: nowrap;
	border-radius: 0;
	color: var(--pp-menu-active);
	background: transparent;
	padding: 12px 24px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pp-menu-mobile-list .pp-menu-item.is-current a {
	background-color: var(--pp-menu-active);
	color: var(--pp-menu-inverted);
}

/* Burger → Kreuz */
.pp-menu.is-open .pp-menu-burger-line { stroke-width: 2.75; }
.pp-menu.is-open .pp-menu-burger-line--top { transform: translateY(5px) rotate(45deg) scaleX(1.15); }
.pp-menu.is-open .pp-menu-burger-line--mid { opacity: 0; transform: scaleX(0); }
.pp-menu.is-open .pp-menu-burger-line--bot { transform: translateY(-5px) rotate(-45deg) scaleX(1.15); }

@media (prefers-reduced-motion: reduce) {
	.pp-menu-shell,
	.pp-menu-burger-line,
	.pp-menu-inverted {
		transition: none !important;
	}
}