.menu-toggle { position: relative; overflow: hidden; }
.menu-toggle .cleaco-menu-icon { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.cleaco-menu-lines { position: absolute; inset: 0; opacity: 1; transition: opacity .18s ease, transform .28s cubic-bezier(.2,.75,.25,1); }
.cleaco-menu-lines i { position: absolute; left: 50%; width: 58%; height: 3px; border-radius: 9px; background: currentColor; transform: translateX(-50%); transform-origin: center; transition: transform .28s cubic-bezier(.2,.75,.25,1), width .28s ease; }
.cleaco-menu-lines i:nth-child(1) { top: 30%; }
.cleaco-menu-lines i:nth-child(2) { top: 48%; }
.cleaco-menu-lines i:nth-child(3) { top: 66%; }

/* The exact turquoise flashlight mark used for CLEACO's browser favicon. */
.cleaco-menu-flashlight {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("https://cleaco.de/wp-content/uploads/2026/11/cleaco-favicon-taschenlampe-tuerkis-300x300.png") center / contain no-repeat;
	opacity: 0;
	transform: scale(.58) rotate(180deg);
	transform-origin: 50% 50%;
	transition: opacity .22s ease, transform .34s cubic-bezier(.2,.75,.25,1);
}
.menu-toggle.cleaco-torch-open .cleaco-menu-lines { opacity: 0; transform: scale(.75) rotate(-12deg); }
.menu-toggle.cleaco-torch-open .cleaco-menu-flashlight { opacity: 1; transform: scale(1) rotate(180deg); }

/* The diagonal teal sweep crosses the open menu and lands on Leistungen. */
.header-nav { isolation: isolate; overflow: hidden; }
.header-nav > a { position: relative; z-index: 1; opacity: 1; }
.header-nav::before {
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	width: 100%;
	height: 78px;
	content: "";
	clip-path: polygon(100% 0, 65% 0, 35% 100%, 0 100%);
	background: linear-gradient(135deg, rgba(16,131,126,0) 0%, rgba(16,131,126,.28) 36%, rgba(16,131,126,.38) 52%, rgba(16,131,126,.12) 75%, rgba(16,131,126,0) 100%);
	filter: blur(7px);
	opacity: 0;
	transform: translate(17%,-14%);
	pointer-events: none;
}
.header-nav.cleaco-menu-opening::before { animation: cleaco-menu-light-sweep .88s cubic-bezier(.2,.75,.25,1) both; }
.header-nav.cleaco-menu-opening > a { animation: cleaco-menu-item-reveal .42s ease both; }
.header-nav.cleaco-menu-opening > a:nth-child(1) { animation-delay: .02s; }
.header-nav.cleaco-menu-opening > a:nth-child(2) { animation-delay: .06s; }
.header-nav.cleaco-menu-opening > a:nth-child(3) { animation-delay: .1s; }
.header-nav.cleaco-menu-opening > a:nth-child(4) { animation-delay: .14s; }
.header-nav.cleaco-menu-opening > a:nth-child(5) { animation-delay: .18s; }
.header-nav.cleaco-menu-opening > a:nth-child(6) { animation-delay: .22s; }
.header-nav.cleaco-menu-opening > a:nth-child(7) { animation-delay: .26s; }
.header-nav.cleaco-menu-opening > a[href*="/leistungen/"] { color: #10837e; text-shadow: 0 0 14px rgba(16,131,126,.45); }
.header-nav.cleaco-menu-opening > a[href*="/leistungen/"]::after {
	position: absolute;
	inset: -4px -8px;
	z-index: -1;
	content: "";
	border-radius: 8px;
	background: radial-gradient(ellipse at center, rgba(16,131,126,.22), rgba(16,131,126,.09) 62%, transparent 100%);
	opacity: 0;
	transform: scale(.82);
	animation: cleaco-leistungen-glow .76s ease-out .12s both;
}
@keyframes cleaco-menu-light-sweep {
	0% { opacity: 0; transform: translate(14%,-10%); }
	24% { opacity: .88; }
	60% { opacity: .62; }
	100% { opacity: 0; transform: translate(-6%,8%); }
}
@keyframes cleaco-leistungen-glow {
	0% { opacity: 0; transform: scale(.82); }
	35% { opacity: .86; transform: scale(1.04); }
	100% { opacity: 0; transform: scale(1); }
}
@keyframes cleaco-menu-item-reveal { 0% { opacity: .45; transform: translate(-7px,3px); } 100% { opacity: 1; transform: translate(0,0); } }
@media (prefers-reduced-motion: reduce) {
	.cleaco-menu-lines, .cleaco-menu-lines i, .cleaco-menu-flashlight { transition: none !important; animation: none !important; }
	.header-nav.cleaco-menu-opening::before, .header-nav.cleaco-menu-opening > a, .header-nav.cleaco-menu-opening > a::after { animation: none !important; }
}