/* ============================================================================
   CAMPUSonline COmmunity — Ladeanzeige vor dem Angular-Bootstrap
   ----------------------------------------------------------------------------
   index.html verlinkt diese Datei direkt, noch vor boot.js. Die gewaehlte
   Variante liegt in einem HttpOnly-Cookie, an das dieses Markup nicht
   herankommt — prefers-color-scheme ist die einzige Information zu diesem
   Zeitpunkt. Nah genug, und es erspart Dunkelmodus-Nutzern den weissen Blitz.

   Der Ring greift den Verlauf der Homepage auf (brand-700 -> brand-500 ->
   accent-500): conic-gradient als Flaeche, per Maske auf einen Ring reduziert.
   Das ist eine Grafik, kein Text — hier gilt die 3:1-Schwelle.
   ========================================================================== */

#id-loader span {
  display: none;               /* Standard-Spinner des Frameworks ausblenden */
}

#id-loader {
  background-color: #FBF9FC;
  padding-bottom: 0;
}

#id-loader::before {
  content: '';
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, #7826A1, #AA51D6 45%, #DD4084 75%, #7826A1);
  /* Ring statt Scheibe: innen ausmaskieren. -webkit- fuer aeltere Safari. */
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 5px));
  animation: coco-loader-spin 1s linear infinite;
}

@keyframes coco-loader-spin {
  to { transform: rotate(360deg); }
}

/* Reduzierte Bewegung: der Ring bleibt, dreht sich aber langsam statt gar
   nicht — ein stehender Ring liest sich sonst als "haengt". */
@media (prefers-reduced-motion: reduce) {
  #id-loader::before { animation-duration: 3s; }
}

@media (prefers-color-scheme: dark) {
  #id-loader {
    background-color: #140B1A;
  }
  #id-loader::before {
    background: conic-gradient(from 90deg, #AA51D6, #BE7CDE 45%, #EA66A0 75%, #AA51D6);
  }
}

/* Ladeanzeige ausblenden, sobald Angular irgendetwas in sein Wurzelelement
   gerendert hat. Unabhaengig vom Tag — index.html der jeweiligen App
   entscheidet zwischen <app-root>, <oc-application> usw. Geprueft wird nur,
   dass das Geschwister direkt nach #id-loader nicht mehr leer ist. */
body:has(#id-loader ~ *:not(:empty)) #id-loader {
  display: none;
}