.mobile {
	padding-top: 6px;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.menu-icon {
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

#top, #middle, #bottom {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Aktivierte Klasse für das X */
.menu-icon.active #top {
    transform: translateY(-4px) translateX(4px) rotate(45deg);
}

.menu-icon.active #middle {
    opacity: 0;
}

.menu-icon.active #bottom {
    transform: translateY(4px) translateX(-14px) rotate(-45deg);
}