/* ============================================================================
   Ladeanzeige vor dem Angular-Bootstrap.
   ----------------------------------------------------------------------------
   index.html verlinkt diese Datei direkt, noch vor boot.js — sie laeuft also,
   bevor irgendein Theme bekannt ist. Die Variante kann hier deshalb nicht aus
   der Session kommen; prefers-color-scheme ist die einzige Information, die zu
   diesem Zeitpunkt vorliegt.

   Der Ring greift den Verlauf des Orbit-Zeichens auf: conic-gradient als
   Flaeche, per Maske auf einen Ring reduziert.
   ========================================================================== */

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

#id-loader {
  background-color: #f6f8fc;   /* --bg der Landing Page */
  padding-bottom: 0;
}

#id-loader::before {
  content: '';
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, #2563eb, #7c3aed 40%, #0d9488 70%, #2563eb);
  /* 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: uf-loader-spin 1s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  #id-loader::before { animation-duration: 3s; }
}

@media (prefers-color-scheme: dark) {
  #id-loader {
    background-color: #080d17;
  }
  #id-loader::before {
    background: conic-gradient(from 90deg, #3b82f6, #8b5cf6 40%, #14b8a6 70%, #3b82f6);
  }
}