/* Ladezustände (Revision 15.10., A3). Eigene Datei statt styles.css; nur Tokens aus styles.css :root.
   Startschirm für alle; alles unter body.ladezustaende nur mit Schalter cockpit-ladezustaende (app.js setzt die Klasse). */

/* ---------- Startschirm (index.html), bis app.js boot body.booting wegnimmt ---------- */
.start-schirm {
  position: fixed;
  inset: 0;
  z-index: var(--z-sprung);
  display: grid;
  place-items: center;
  background: var(--color-card);
}
body:not(.booting) .start-schirm {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms;
}
@media (prefers-reduced-motion: no-preference) {
  .start-schirm-marke { animation: sk-puls 1.4s ease-in-out infinite; }
}

/* ---------- Ring im Knopf, solange die Aktion läuft (ui.button, ui.form, ui.dialog, ui.el("button")) ---------- */
body.ladezustaende button[aria-busy="true"]::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: lade-drehen 700ms linear infinite;
}
/* Icon-Knöpfe: der Ring steht an Stelle des Icons, die Breite bleibt */
body.ladezustaende button[aria-busy="true"] > svg { display: none; }
@keyframes lade-drehen { to { transform: rotate(1turn); } }

/* ---------- Nachladen innerhalb einer Seite (ui.laden, ui.ladeZeilen) ---------- */
/* Ohne Schalter bleibt alles wie bisher: die Zeilen erscheinen gar nicht */
body:not(.ladezustaende) .lade-neu { display: none; }
/* Wie die Seite beim Aktualisieren: erst nach 300 ms, damit schnelle Antworten nicht flackern */
.lade-neu { transition: opacity 150ms ease 300ms; }
@starting-style { .lade-neu { opacity: 0; } }
/* Kalender und Schubladen: das alte Bild bleibt stehen, leicht gedämpft (ui.laden(host, fn, "dimmen")) */
body.ladezustaende .lade-dimmen[aria-busy="true"] { opacity: 0.6; transition: opacity 150ms ease 300ms; }
/* Seiten, die sich selbst neu zeichnen, setzen ui.ladeZeilen() zuerst und hängen danach ihren Inhalt an: sobald
   etwas dahinter steht, verschwinden die Zeilen (kein Aufräumen in jedem Bereich nötig) */
.lade-neu:not(:last-child) { display: none; }