/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/* 
   Neue Variante: OHNE animierte GIF-Datei: 
   ----------------------------------------   
   Reine CSS-Variante des animierten: src="../images/loader.gif". 
   CSS ist moderner und viel besser als die GIF-Datei! Untenstehendes CSS wurde von ChatGPT vorgeschlagen:
*/

/* Vollbild-Overlay mit zentriertem Spinner */
.css_Busy_Indicator_Overlay_Modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: rgba(128, 128, 128, 0.6);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Web', 'Segoe UI', Arial, sans-serif;
}

/* Spinner-Design */
.css_Busy_Indicator_Spinner {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 8px solid rgba(0, 0, 0, 0.1); /* hellgrauer Kreis */
    border-top-color: white; /* fast schwarzer oberer Teil */
    animation: spin 1s linear infinite;
}

/* Animation bleibt gleich */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/* 
   Alte Variante: MIT animierter GIF-Datei: NIE LÖSCHEN -> siehe Begründung unten!
   -------------------------------------------------------------------------------
   Nicht löschen, da für mich dieser Busy-Indicator in den Admin-Pages visuell viel besser sichtbar als die 
   css-Version von oben, vor allem bei longrunnging-Requests! Variante: src="../images/loader.gif": ist für 
   öffentliche Page eine schlechte Variante. Für meine Admin-Pages ist es aber hervorragend!
*/

.gif_Busy_Indicator_Modal {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Web', 'Segoe UI', Arial, sans-serif;
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    background: rgba(128,128,128,0.6);
}

.gif_Busy_Indicator_Center_Modal {
    z-index: 1000;
    padding: 12px;
    /* width muss immer 2px grösser sein als Bildgrösse */
    width: 140px;
    height: 140px;
    background-color: White;
    border-radius: 10px;
    display: flex;
    justify-content: center; /* Bild horizontal zentrieren */
    align-items: center; /* Bild vertikal zentrieren */
}

    .gif_Busy_Indicator_Center_Modal img {
        /* Achtung hier Bildgrösse anpassen! */
        height: 128px;
        width: 128px;
    }

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */