/** * NetzdienstFX – Cursor-Dot: Basis-Struktur * ------------------------------------------------ * Reine Struktur/Mechanik (Position, Stacking, Übergänge). Größe/Farbe/Timing * über die CSS-Custom-Properties unten in der Kunden-CSS überschreiben. * * mix-blend-mode: difference sorgt dafür, dass die Punktfarbe automatisch mit * dem Untergrund kontrastiert (hell auf Dunkel, dunkel auf Hell) – dafür darf * zwischen .cursor-dot und kein Vorfahre mit eigenem Stacking-Context * (transform/opacity < 1/isolation) liegen, sonst blendet der Punkt nur mit * diesem Vorfahren statt mit der ganzen Seite. Im Default-Fall (Element wird * direkt an document.body angehängt) ist das kein Thema. */ .cursor-dot { position: fixed; top: 0; left: 0; width: var(--cursor-dot-size, 14px); height: var(--cursor-dot-size, 14px); border-radius: 50%; background: var(--cursor-dot-color, #fff); mix-blend-mode: difference; pointer-events: none; z-index: 9999; opacity: 0; transition: width var(--cursor-dot-duration, 0.2s) ease, height var(--cursor-dot-duration, 0.2s) ease, opacity 0.2s ease; will-change: transform; } .cursor-dot.is-visible { opacity: 1; } .cursor-dot.is-active { width: var(--cursor-dot-active-size, 44px); height: var(--cursor-dot-active-size, 44px); } /* Standardmäßig bleibt der native Cursor sichtbar (der Punkt läuft ihm nur mit Verzug hinterher) – nur mit data-hide-native-cursor auf dem .cursor-dot-Element setzt cursor-dot.js zusätzlich diese Klasse und blendet den Pfeil aus. */ html.cursor-dot-hide-native, html.cursor-dot-hide-native a, html.cursor-dot-hide-native button, html.cursor-dot-hide-native .cursor-target { cursor: none; } @media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .cursor-dot { display: none; } html.cursor-dot-hide-native, html.cursor-dot-hide-native a, html.cursor-dot-hide-native button, html.cursor-dot-hide-native .cursor-target { cursor: auto; } }