/* Wie ein Knopf aussieht, der gerade speichert.
 *
 * Arnold, 07.10.2026: „sobald man den speichern knopf klickt ein feedback … sowas wie
 * eine sanduhr solange es noch nicht fertig ist (nur ein beispiel, überleg dir was)."
 *
 * Gewählt: ein Schleier in der Flächenfarbe über der Beschriftung und ein drehender Ring
 * in der Akzentfarbe darüber. Warum so und nicht als zusätzliches Zeichen neben dem Text:
 * Der Knopf behält seine Größe (die Breite hält das JS fest), die Zeile springt nicht, und
 * es funktioniert auf JEDEM Knopf — mit Text, mit Zeichen, hell wie dunkel —, ohne dass
 * eine Maske dafür etwas ändern muss.
 *
 * 🔴 Nur Nordstern-Token, keine eigene Palette und keine neue HEX-Farbe (ADR-268). Die
 * Optik liegt mit Absicht hier im CSS und nicht im JavaScript: `farben_waechter.py` prüft
 * `.html` und `.css`, JavaScript sieht er nicht. Was geprüft werden kann, gehört dorthin,
 * wo es geprüft wird.
 */

.wh-busy {
  position: relative;
  cursor: progress;
}

/* Der Schleier legt sich über die Beschriftung, statt sie zu entfernen: so bleibt die
   Breite erhalten und der Knopf behält seine eigene Form (auch den eigenen Radius). */
.wh-busy::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--panel);
  opacity: 0.72;
  pointer-events: none;
}

.wh-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  box-sizing: border-box;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: wh-dreht 0.7s linear infinite;
  pointer-events: none;
}

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

/* Wer Bewegung abgestellt hat, bekommt keinen Kreisel, aber trotzdem eine Antwort:
   der Ring steht still und atmet. Nichts zu zeigen wäre hier das Schlechteste. */
@media (prefers-reduced-motion: reduce) {
  .wh-busy::after {
    animation: wh-atmet 1.4s ease-in-out infinite;
    border-color: var(--accent);
  }
}

@keyframes wh-atmet {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}