@layer components {
	.bem-mainNavigationMobile__hiddenMenu svg.kwIconMenu line {
		stroke-width: 3;
		transform-origin: center;
	}

	/* Hamburger three lines (default) */
	.bem-mainNavigationMobile__hiddenMenu:not(.hidden) svg.kwIconMenu line {
		transform: rotate(0) translate(0, 0);
		opacity: 1;
	}

	/* Cross two lines, one disappears (wenn kein hidden) */
	.bem-mainNavigationMobile__hiddenMenu.hidden svg.kwIconMenu .top {
		transform: rotate(45deg) translateY(7px);
	}

	.bem-mainNavigationMobile__hiddenMenu.hidden svg.kwIconMenu .middle {
		opacity: 0;
	}

	.bem-mainNavigationMobile__hiddenMenu.hidden svg.kwIconMenu .bottom {
		transform: rotate(-45deg) translateY(-7px);
	}

	/* Animation effect */
	.bem-mainNavigationMobile__hiddenMenu--animation svg.kwIconMenu line {
		transition: all 0.3s ease;
	}
}