/* 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:var(--sz-18); height:var(--sz-18);
    border: 2px solid var(--grey-200);
    border-top-color: var(--o);
    border-radius: 50%;
    /* Eine Umdrehung in --dur-slow (0,3 s) flimmert: --dur-slow ist die Dauer eines ÜBERGANGS,
       keine Rotationsdauer für eine Dauerschleife. Dreifach gibt eine ruhige Umdrehung. */
    animation: spin calc(var(--dur-slow) * 3) linear infinite;
    vertical-align: middle;
    /* flex: statt nur shrink auch GROW sperren — in einem Flex-Elternteil mit einer Regel wie
       `.x > span { flex: 1 }` streckt sich der Spinner sonst zur vollen Breite. Ein Kreis mit
       border-radius: 50% wird dabei zur langen Ellipse und wischt beim Drehen quer über die Zeile. */
    flex: 0 0 auto;
}
.mage-spinner-sm { width:var(--sz-14); height:var(--sz-14); border-width: 2px; }
.mage-spinner-lg { width:var(--sz-24); height:var(--sz-24); 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:var(--sp-3);
    padding:var(--sp-11) var(--sp-8); text-align: center;
    color: var(--muted); font-size:var(--fs-base);
}
.mage-loading-compact { padding:var(--sp-5) var(--sp-7); }
/* Zeilen-Ladezustand (Design::loading ['inline'=>true]) — linksbündig, kleine graue Schrift, wenig Luft:
   eine nachladende Sektion in einer Seitenleiste. */
.mage-loading.mage-loading-inline { justify-content: flex-start; text-align: left; padding: var(--sp-4) 0; font-size: var(--fs-sm); }
/* display:flex darf das hidden-Attribut nicht aushebeln (Module schalten den Ladezustand per el.hidden). */
.mage-loading[hidden] { display: none; }