/*
 * Klick-Rückmeldung — das Aussehen zu js/common/klick-rueckmeldung.js.
 *
 * Firma: 4Unit Systems Integration GmbH — Kommerzielle Nutzung nur mit gültiger Lizenz.
 *
 * Zwei Zeichen, mehr braucht es nicht: ein Drehring am angeklickten Element und ein dünner
 * Balken oben an der Seite. Beides erscheint sofort beim Klick und verschwindet mit der
 * neuen Seite.
 */

/* Der Drehring sitzt im Element, damit er dessen Größe nicht verändert — ein springender
   Knopf unter dem Mauszeiger ist unangenehmer als gar keine Rückmeldung. */
.klick-wartet {
    position: relative;
    pointer-events: none;
    opacity: 0.75;
}

.klick-wartet::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.5rem;
    width: 0.85rem;
    height: 0.85rem;
    margin-top: -0.425rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: klick-dreht 0.7s linear infinite;
}

/* Bei einem Knopf mit Text rückt der Inhalt nach links, damit der Ring nicht darauf liegt. */
.btn.klick-wartet,
a.btn.klick-wartet {
    padding-right: 2rem;
}

@keyframes klick-dreht {
    to {
        transform: rotate(360deg);
    }
}

/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt einen ruhenden Ring statt eines
   drehenden — sichtbar bleibt er trotzdem. */
@media (prefers-reduced-motion: reduce) {
    .klick-wartet::after {
        animation: none;
        border-right-color: currentColor;
        opacity: 0.6;
    }
}

/* Der Balken oben: schmal genug, um nichts zu verdecken, deutlich genug, um aufzufallen. */
.klick-fortschritt {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 2000;
    background: linear-gradient(90deg,
        rgba(102, 126, 234, 0) 0%,
        rgba(102, 126, 234, 1) 50%,
        rgba(102, 126, 234, 0) 100%);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: klick-laeuft 1.1s ease-in-out infinite;
}

@keyframes klick-laeuft {
    0% {
        background-position: -40% 0;
    }
    100% {
        background-position: 140% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .klick-fortschritt {
        animation: none;
        background: rgba(102, 126, 234, 0.85);
    }
}