#custom-hover-circle {
	position: fixed;
	pointer-events: none;
	width: 160px;
	height: 160px;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%) scale(0.35);
	opacity: 0;
	border-radius: 100px;
	background: rgba(167, 168, 170, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: transform 0.45s cubic-bezier(.38, .74, .24, 1.27),
				opacity 0.45s cubic-bezier(.02, 1.02, .17, 1.26);
	z-index: 9999;
}

#custom-hover-circle.active {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

#custom-hover-circle .icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* ✅ Pfeil-Pfad auf weiß setzen */
#custom-hover-circle .icon path {
	stroke: #ffffff;
}

/* ✅ SVG-Kreisbeschriftung */
#custom-hover-circle .pathText {
	animation: rotation 3s linear infinite;
	animation-play-state: paused;
}

#custom-hover-circle.active .pathText {
	animation-play-state: running;
}

/* ✅ Text auf weiß setzen */
#custom-hover-circle .pathText text {
	font-size: 12px;
	text-transform: uppercase;
	fill: #ffffff;
	font-weight: 700;
	letter-spacing: 1px;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}