/* =========================================================
   AB Portfolio – Cursor
   Alle Regeln gelten nur mit html.abx-cursor-on. Diese Klasse setzt
   das Cursor-Modul ausschließlich bei echter Maus. Ohne JavaScript
   und auf Touch-Geräten bleibt der normale Mauszeiger.
   ========================================================= */

/* Systemzeiger ausblenden (auch Lays Carousel-Pfeil- und Hand-Cursor).
   Lay-Add-ons setzen cursor mit !important und hoher Spezifität
   (z. B. `.lay-carousel a img { cursor: pointer !important }`).
   Laut CSS-Kaskade gewinnt ein !important aus einer Cascade Layer immer
   gegen ein !important ohne Layer, unabhängig von der Spezifität.
   Deshalb steht diese Regel in der Layer `abx`. */
@layer abx {
	html.abx-cursor-on,
	html.abx-cursor-on *,
	html.abx-cursor-on *::before,
	html.abx-cursor-on *::after {
		cursor: none !important;
	}
}

.abx-cursor {
	display: none;
}

html.abx-cursor-on .abx-cursor {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483647;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #fff;
	mix-blend-mode: normal;
	pointer-events: none;
	opacity: 0;
	transform: translate3d(-100px, -100px, 0);
	transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
	will-change: transform;
}

html.abx-cursor-on .abx-cursor.abx-cursor--visible {
	opacity: 1;
}

/* Overlay offen: Umkehr-Effekt, damit der Punkt auf Weiß sichtbar bleibt.
   Über Projekt-Thumbnails bleibt er rot ohne Mischeffekt (wie bisher). */
html.abx-cursor-on body.lay-overlay-open .abx-cursor:not(.abx-cursor--image):not(.abx-cursor--drag) {
	mix-blend-mode: exclusion;
}

/* Über Projekt-Thumbnails: rot, groß, deckend, ohne Mischeffekt. */
html.abx-cursor-on .abx-cursor.abx-cursor--image {
	width: 40px;
	height: 40px;
	background-color: rgb(255, 0, 0);
	mix-blend-mode: normal;
}

/* Über Text-Links und Buttons: rot, groß, mit Umkehr-Effekt. */
html.abx-cursor-on .abx-cursor.abx-cursor--text {
	width: 40px;
	height: 40px;
	background-color: rgb(255, 0, 0);
	mix-blend-mode: exclusion;
}

/* Über dem Back Button: weiß, groß, mit Umkehr-Effekt. */
html.abx-cursor-on .abx-cursor.abx-cursor--button {
	width: 40px;
	height: 40px;
	background-color: #fff;
	mix-blend-mode: exclusion;
}

/* Ziehen auf Scroll-Slider-Seiten (linke Maustaste gedrückt): rot, groß,
   deckend, ohne Mischeffekt. Steht zuletzt und hat damit Vorrang vor den
   Hover-Zuständen gleicher Gewichtung. */
html.abx-cursor-on .abx-cursor.abx-cursor--drag {
	width: 40px;
	height: 40px;
	background-color: rgb(255, 0, 0);
	mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
	html.abx-cursor-on .abx-cursor {
		transition: none;
	}
}