/* =========================================================
   AB Portfolio – Scroll-Balken in Spalten
   Wie das Grund-CSS nur oberhalb von Lays Handy-Breakpoint geladen.
   Werte wie bisher: 10 px hoch, unten am Rand, sanft einblenden.
   ========================================================= */

.abx-scroll-bar {
	position: fixed;
	bottom: 0;
	z-index: 200000;
	height: 10px;
	pointer-events: none;
	background-color: transparent;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.abx-scroll-bar.abx-scroll-bar--visible {
	opacity: 1;
}

.abx-scroll-bar__fill {
	width: 100%;
	height: 100%;
	background-color: #fff;
	transform: scaleX(0);
	transform-origin: left center;
}

/* Spalten in der rechten Bildschirmhälfte füllen sich von rechts (gespiegelt). */
.abx-scroll-bar--from-right .abx-scroll-bar__fill {
	transform-origin: right center;
}

/* Farbe automatisch: auf weißen Seiten schwarz. */
body:has(> .lay-content .abx-white-page) .abx-scroll-bar__fill {
	background-color: #000;
}

@media (prefers-reduced-motion: reduce) {
	.abx-scroll-bar {
		transition: none;
	}
}