/* Zeitstrahl: Raute mit Pfeil folgt dem Mauszeiger (Gegenstück zur Projekt-Raute .qb--cursor) und zeigt in die
   Richtung, in die ein Klick blättert. Element und Richtung (data-richtung) setzt fh-zeitstrahl.js. */
.qb--process-cursor {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 60;
  pointer-events: none;
}
.qb--process-cursor::before,
.qb--process-cursor::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  translate: -50% -50%;
  scale: 0;
  transition: scale 0.45s cubic-bezier(0.19, 1, 0.22, 1), rotate 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.qb--process-cursor::before {
  width: 5.075rem;
  height: 5.075rem;
  rotate: 45deg;
  background-color: color-mix(in srgb, var(--primary) 89%, transparent);
}
.qb--process-cursor::after {
  width: 2.4rem;
  height: 1.46rem;
  background: url("../fh-assets/icons/arrow-right-light-white.svg") center / contain no-repeat;
}
.qb--process-cursor.is-visible::before,
.qb--process-cursor.is-visible::after {
  scale: 1;
}
.qb--process-cursor[data-richtung="zurueck"]::after {
  rotate: 180deg;
}
/* Über dem Strahl ersetzt die Raute den Mauszeiger */
.is-process-cursor,
.is-process-cursor * {
  cursor: none;
}

/* Ohne Pfeil-Button blättert die Tastatur im Strahl selbst (Pfeiltasten, fh-zeitstrahl.js macht ihn fokussierbar) */
.qb--process:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0.5rem;
}