/* ===========================================================================
   atomic-loader — EIN Ladezustand fuer alle Ajax-Vorgaenge (reines CSS)
   ===========================================================================

   Wer laedt, sagt es dem Browser ohnehin: `aria-busy="true"` am Container.
   Dieses Stylesheet macht daraus den sichtbaren Loader — halbtransparente
   Flaeche ueber dem Container plus Ring in der Mitte. Es gibt KEIN Markup und
   KEIN JavaScript; jede Quelle setzt nur ihr Busy-Signal:

     [aria-busy="true"]     Standard-Signal (pl-form-async, pl-form-overlay,
                            atomic-ajaxnav, eigene fetch-Skripte)
     .htmx-request          HTMX setzt die Klasse am `hx-indicator`-Ziel
                            (Listen von plate_resorts/-suites/-programs/-experts)

   Host-Muster: Scrollt der Busy-Container selbst (Overlay-Rumpf), saesse der
   Ring in der Mitte des GESAMTEN Inhalts, nicht des sichtbaren Ausschnitts.
   Dann traegt ein nicht scrollender Vorfahr `data-a-loader-host` — der Loader
   liegt auf ihm, sobald ein Nachfahre busy ist, und der Nachfahre selbst
   zeichnet keinen zweiten.

   Ring-Position: `top: min(50%, 45vh)` — Mitte kurzer Container, bei hohen
   Containern (Listen) in Sichtweite des Ausloesers oben.

   Verzoegerung: Der Loader erscheint erst nach `--a-loader-delay` (150 ms).
   Warme Antworten kommen darunter zurueck — kein Flackern bei jedem Klick.

   Themebar ueber Variablen (auf `:root` oder lokal am Container/Host):
     --a-loader-backdrop   Flaeche, Default hell halbtransparent
     --a-loader-color      Ringfarbe, Default currentColor
     --a-loader-size       Ringdurchmesser, Default 2.25rem
     --a-loader-delay      Erscheinen nach, Default 150ms
   Kein Tailwind, keine Bibliothek. `position: relative` wird NUR im
   Busy-Zustand gesetzt.
   ------------------------------------------------------------------------- */

:root {
  --a-loader-backdrop: rgb(255 255 255 / 0.55);
  --a-loader-color: currentColor;
  --a-loader-size: 2.25rem;
  --a-loader-delay: 150ms;
}

@keyframes a-loader-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes a-loader-spin {
  to { transform: rotate(1turn); }
}

/* Busy-Container ohne Host, und Hosts mit busy Nachfahre. */
:where([aria-busy="true"], .htmx-request):not([data-a-loader-host] *),
[data-a-loader-host]:has([aria-busy="true"], .htmx-request) {
  position: relative;
  pointer-events: none;
}

:where([aria-busy="true"], .htmx-request):not([data-a-loader-host] *)::before,
[data-a-loader-host]:has([aria-busy="true"], .htmx-request)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--a-loader-backdrop);
  animation: a-loader-in 0.2s ease-out var(--a-loader-delay) both;
}

:where([aria-busy="true"], .htmx-request):not([data-a-loader-host] *)::after,
[data-a-loader-host]:has([aria-busy="true"], .htmx-request)::after {
  content: "";
  position: absolute;
  z-index: 21;
  /* Mitte — aber bei hohen Containern (Listen) nicht unterhalb des sichtbaren
     Ausschnitts: der Ausloeser (Filter) steht oben, also bleibt der Ring in
     Sichtweite statt in der Container-Mitte drei Bildschirme tiefer. */
  top: min(50%, 45vh);
  left: 50%;
  width: var(--a-loader-size);
  height: var(--a-loader-size);
  margin: calc(var(--a-loader-size) / -2) 0 0 calc(var(--a-loader-size) / -2);
  box-sizing: border-box;
  border: 2px solid var(--a-loader-color);
  border-right-color: transparent;
  border-radius: 50%;
  animation:
    a-loader-in 0.2s ease-out var(--a-loader-delay) both,
    a-loader-spin 0.8s linear infinite;
}

/* Bei einem Host zeichnet der Busy-Nachfahre nichts Eigenes. */
[data-a-loader-host] :where([aria-busy="true"], .htmx-request)::before,
[data-a-loader-host] :where([aria-busy="true"], .htmx-request)::after {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  :where([aria-busy="true"], .htmx-request)::after,
  [data-a-loader-host]:has([aria-busy="true"], .htmx-request)::after {
    animation: a-loader-in 0.2s ease-out var(--a-loader-delay) both;
    border-right-color: var(--a-loader-color);
    opacity: 0.6;
  }
}