:root {

  --line-color: 51, 51, 51;    /* #333333 in RGB */

  --line-opacity: 1;           /* volle Deckkraft */

  --line-thickness: 1px;       /* Liniendicke */

  --blur: 0px;                 /* Weichzeichner */

  --gap: 20px;                 /* Abstand um Cursor */

}

 

#crosshair {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 2147483647;

}

 

#crosshair .line {

  position: fixed;

  background: rgba(var(--line-color), var(--line-opacity));

  filter: blur(var(--blur));

}

 

/* horizontale Linien */

#crosshair .h-left {

  height: var(--line-thickness);

  top: calc(var(--y, 50vh) - var(--line-thickness) / 2);

  left: 0;

  width: calc(var(--x, 50vw) - var(--gap));

}

#crosshair .h-right {

  height: var(--line-thickness);

  top: calc(var(--y, 50vh) - var(--line-thickness) / 2);

  left: calc(var(--x, 50vw) + var(--gap));

  width: calc(100vw - var(--x, 50vw) - var(--gap));

}

 

/* vertikale Linien */

#crosshair .v-top {

  width: var(--line-thickness);

  left: calc(var(--x, 50vw) - var(--line-thickness) / 2);

  top: 0;

  height: calc(var(--y, 50vh) - var(--gap));

}

#crosshair .v-bottom {

  width: var(--line-thickness);

  left: calc(var(--x, 50vw) - var(--line-thickness) / 2);

  top: calc(var(--y, 50vh) + var(--gap));

  height: calc(100vh - var(--y, 50vh) - var(--gap));

}

 

/* Plus-Symbol in der Mitte */

.cursor-plus {

  position: fixed;

  left: calc(var(--x, 50vw));

  top: calc(var(--y, 50vh));

  transform: translate(-50%, -50%);

  font-size: 18px;

  font-weight: bold;

  color: #333333;

  user-select: none;

}

 

@media (max-width: 600px) {

  :root {

    --gap: 15px;

    --line-thickness: 0.8px;

  }

  .cursor-plus {

    font-size: 14px;

  }

}

 

@media (prefers-reduced-motion: reduce) {

  #crosshair { display: none; }

}