.scroll-up-btn {
	display: flex; /* Flexbox aktivieren */
	align-items: center; /* Vertikale Zentrierung */
	justify-content: center; /* Horizontale Zentrierung */
	background-color: transparent;
	border-radius: 25px;
	border-color: var(--blue-color);
	border-width: 2px;
	border-style: solid; /* Sicherstellen, dass die Ränder sichtbar sind */
	width: 50px;
	height: 50px;
	cursor: pointer; /* Zeigt an, dass es klickbar ist */
	transition: background-color 200ms ease, transform 200ms ease; /* Animation für Effekte */
}

.scroll-up-btn:hover {
	background-color: var(--blue-color); /* Hover-Effekt */
	color: white; /* Änderung der Icon-Farbe */
	transform: scale(1.1); /* Button leicht vergrößern */
}

.scroll-up-btn svg {
	stroke: var(--blue-color); /* Farbe des Icons */
	transition: stroke 200ms ease; /* Sanfte Änderung der Icon-Farbe */
}

.scroll-up-btn:hover svg {
	stroke: white; /* Icon-Farbe ändern bei Hover */
}

.hide-scroll-up {
	transition: all 300ms ease; /* Animation beim Ein-/Ausblenden */
	bottom: 5rem !important;
	opacity: 0;
}