/*******************************************************************************

		MIKROANIMATIONEN – nur in der Kopfzeile

		- Logo: wird beim Darüberfahren minimal grösser
		- Hamburger-Knopf: Linien verschieben ihre Länge
		- X im geöffneten Menü: dreht sich beim Darüberfahren
		- Bei «Bewegung reduzieren» (Systemeinstellung) abgeschaltet

*******************************************************************************/

:root {
	--anim-kurve: cubic-bezier(0.22, 0.61, 0.36, 1);	/* sanftes Auslaufen */
}

/* Logo */
#header #logo img {
	transition: transform 0.4s var(--anim-kurve);
}

#header #logo:hover img {
	transform: scale(1.02);
}

/* Hamburger-Knopf */
.menue-knopf span {
	transition: width 0.3s var(--anim-kurve), background 0.2s linear;
	margin-left: auto;
}

.menue-knopf span:nth-child(2) { width: 72%; }
.menue-knopf:hover span:nth-child(2) { width: 100%; }
.menue-knopf:hover span:nth-child(3) { width: 72%; }

/* X im Menü-Kopf */
.menue-schliessen span {
	transition: transform 0.3s var(--anim-kurve), background 0.2s linear;
}

.menue-schliessen:hover span { transform: rotate(135deg); }
.menue-schliessen:hover span + span { transform: rotate(45deg); }

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
	#header #logo img,
	.menue-knopf span,
	.menue-schliessen span {
		transition: none !important;
	}
}