/* ==========================================================================
   LIEPS COMPONENT – SCROLL INDICATOR
   Aus der bisherigen custom.css unverändert ausgelagert.
   ========================================================================== */

/* ==========================================================================
   Benutzerdefinierter Scroll-Indikator
   ========================================================================== */

/* Nativen Browser-Scrollbar ausblenden */
html,
body {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
	display: none;
}


/* ==========================================================================
   Scroll-Indikator
   ========================================================================== */

.scroll-indicator {
	position: fixed;
	top: 50%;
	right: 24px;
	z-index: 9999;

	width: 16px;

	transform: translateY(-50%);

	pointer-events: none;
}

/* Bei geöffnetem Bootstrap-Modal ausblenden */
body.modal-open .scroll-indicator {
	display: none !important;
}


/* ==========================================================================
   Kurzer Track
   ========================================================================== */

.scroll-indicator__track {
	position: relative;

	width: 2px;
	height: 160px;

	margin: 0 auto;

	background: rgba(var(--bs-body-bg-rgb), 0.1);
	-webkit-backdrop-filter: invert(1);
	backdrop-filter: invert(1);
	border-radius: 999px;

	pointer-events: auto;

	transition:
		background-color 0.2s ease,
		width 0.2s ease;
}

.scroll-indicator__track:hover {
	width: 4px;
	background: rgba(var(--bs-body-bg-rgb), 0.5);
}


/* ==========================================================================
   Scroll-Griff
   ========================================================================== */

.scroll-indicator__drop {
	position: absolute;
	top: 0;
	left: 50%;

	width: 16px;
	height: 29px;
	background-image: url('https://echt.lieps.de/fileadmin/images/scroll_indicator.webp');

	margin-left: -8px;


	/* Hintergrund hinter dem Tropfen invertieren */

	background-color: transparent;
	mix-blend-mode: difference;
	-webkit-backdrop-filter: invert(1);
	backdrop-filter: invert(1);
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

	cursor: grab;
	pointer-events: auto;
	touch-action: none;

	transform-origin: center;
	will-change: transform;
}

.scroll-indicator__drop:active {
	cursor: grabbing;
}

.scroll-indicator__drop:focus {
	outline: none;
}

.scroll-indicator__drop:focus-visible {
	outline: 3px solid var(--brand-color-scarlet-flame) !important;
	outline-offset: 4px;
	transform: scale(1.25);
}

/* ==========================================================================
   Mobile Darstellung
   ========================================================================== */

@media (max-width: 767.98px) {
	.scroll-indicator {
		right: 12px;
	}

	.scroll-indicator__track {
		height: 120px;
	}
}