/* Der Lader von Gülbiza: eine Hibiskusblüte (shared/ui/lader.js; Nutzerwahl 30.09.2026, 02:02).
 *
 * Ein Lader ist ein `<span class="lader lader--bluete lader--<größe>">` mit ein paar `<i>`-Lagen. Bewegt werden nur die `<i>` und
 * nur mit `transform` und `opacity` (Compositor): fünf Blätter gehen reihum auf, bleiben eine Weile offen und gehen reihum wieder
 * zu, eine Schleife von 2 s, lautlos, ohne Text.
 *
 * Erscheinen: erst nach 0,35 s (`lader-ein`), damit ein schnelles Speichern nicht flackert; `lader--sofort` für Stellen, die
 * ohnehin schon warten. Im Ruhezustand steht er nicht im Dokument (lader.js `laderSetzen`). „Bewegung reduzieren“: die Blätter
 * stehen still, der ganze Lader atmet nur leise in der Deckkraft. */
.lader{
 --g:1em;
 --l-bluete:#f197a8;--l-bluete-rand:#fffaf0;--l-bluete-ader:#d56c84;--l-bluete-mitte:#b5566e;--l-pollen:#f2c46b;
 position:relative;display:inline-block;flex:none;box-sizing:border-box;width:var(--g);height:var(--g);margin:0;padding:0;vertical-align:middle;
 pointer-events:none;animation:lader-ein .3s ease .35s both;
}
.lader--klein{--g:16px}
.lader--mittel{--g:24px}
.lader--gross{--g:112px}
.lader--sofort{animation:none}
.lader>i{position:absolute;inset:0;display:block}
/* Die Zeichnung trägt ihre Farben selbst: was ein umgebendes `.ae-svg svg` (Leiste, Menü) an Füllung und Strich vorgibt, gilt hier nicht. */
.lader>i>svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}

/* ——— Hibiskusblüte: Blatt für Blatt auf, eine Weile offen, Blatt für Blatt zu (2 s) ——— */
.lader--bluete .l-blatt{transform-origin:50% 50%;animation:lader-blatt 2s ease-in-out infinite}
.lader--bluete>i:nth-child(2){--d:.12s}
.lader--bluete>i:nth-child(3){--d:.24s}
.lader--bluete>i:nth-child(4){--d:.36s}
.lader--bluete>i:nth-child(5){--d:.48s}
@keyframes lader-blatt{0%{transform:scale(.56);opacity:.82}24%,56%{transform:scale(1);opacity:1}82%,100%{transform:scale(.56);opacity:.82}}
/* Jede bewegte Lage beginnt um ihren Versatz `--d` versetzt. `backwards`: Wer noch auf seinen Versatz wartet, steht schon im ersten
 * Bild (sonst stünde ein Blatt kurz ganz offen da). */
.lader .l-an{animation-delay:var(--d,0s);animation-fill-mode:backwards}
/* Ruhend und ganz offen (lader.js `{offen:true}`): alle fünf Blätter stehen, nichts kreist und nichts atmet — das „fertig“ des Laders.
 * Steht nach den Blättern der Schleife, damit es sie überstimmt. */
.lader--offen,.lader--offen .l-an{animation:none}

@keyframes lader-ein{from{opacity:0}to{opacity:1}}
@keyframes lader-atmen{0%,100%{opacity:1}50%{opacity:.45}}

/* ——— An der Stelle eines Zeichens (Knopf, Wölkchen): der Lader steht mittig darüber, das Zeichen weicht mit derselben
 * Verzögerung, sobald er erscheint (kein Loch dazwischen), und kommt zurück, wenn er geht. ——— */
.lader-platz{position:relative}
.lader-platz>.lader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.lader-platz[data-laedt]>:not(.lader,.lader-haken){animation:lader-weicht .3s ease .35s both}
.lader-platz[data-laedt="sofort"]>:not(.lader,.lader-haken){animation-delay:0s}
@keyframes lader-weicht{from{opacity:1}to{opacity:0}}

/* ——— Das Häkchen nach einem Erfolg (nie nach einem Fehler): an derselben Stelle, dann wieder das Zeichen ——— */
.lader-haken{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;animation:lader-haken-ein .28s ease both}
.lader-platz>.lader-haken>svg{display:block;width:88%;height:88%;fill:none;stroke:none}
.lader-platz[data-laedt="haken"]>:not(.lader-haken){animation:none;opacity:0}
@keyframes lader-haken-ein{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* „Bewegung reduzieren“: nichts geht auf oder zu; der Lader atmet nur leise in der Deckkraft (2,4 s). Die Regeln stehen mit `!important`
 * und etwas mehr Gewicht (`span.lader`), weil aufbau.css (`*{animation:none!important}`) und editor.css (`.ae-root *`) unter „Bewegung
 * reduzieren“ sonst auch das Atmen, das Erscheinen nach 0,35 s und das Weichen des Zeichens abschalten würden. */
@media (prefers-reduced-motion:reduce){
 span.lader .l-an{animation:none!important}
 span.lader{animation:lader-ein .3s ease .35s both,lader-atmen 2.4s ease-in-out .65s infinite!important}
 span.lader.lader--sofort{animation:lader-atmen 2.4s ease-in-out infinite!important}
 .lader-platz[data-laedt]>:not(.lader,.lader-haken){animation:lader-weicht .3s ease .35s both!important}
 .lader-platz[data-laedt="sofort"]>:not(.lader,.lader-haken){animation-delay:0s!important}
 .lader-haken{animation:none}
 /* Der ruhende, ganz offene Lader steht still, er atmet auch dann nicht. */
 span.lader.lader--offen{animation:none!important}
}