/* Spinner + Loading — 1:1 aus ERP utilities.css (nur diese Komponente). */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Ein Spinner, ein Ort. Alle Module nutzen diese Klassen.
   Größen: .mage-spinner-sm (14px), default (18px), .mage-spinner-lg (24px) */
.mage-spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid #dde4ed;
    border-top-color: var(--o);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    flex-shrink: 0;
}
.mage-spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.mage-spinner-lg { width: 24px; height: 24px; border-width: 2.5px; }

/* Zentrierter Ladezustand mit Text:
   <div class="mage-loading"><span class="mage-spinner"></span> Laden…</div> */
.mage-loading {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 40px 20px; text-align: center;
    color: #999; font-size: 13px;
}
.mage-loading-compact { padding: 12px 16px; }