/* views/loadingView.css */

/* Das Haupt-Overlay: Liegt unsichtbar über der App */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999; /* Über allen Leaflet-Layern (Karten-Controls enden meist bei 1000-2000) */
    background-color: rgba(255, 255, 255, 0.4); /* Sanfte weiße Abdunkelung */
    backdrop-filter: blur(2px); /* Moderner Milchglas-Effekt (optional, extrem edel) */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Weicher Übergang beim Ein-/Ausblenden */
    opacity: 0;
    pointer-events: none; /* Klicks gehen durch, wenn unsichtbar */
    transition: opacity 0.2s ease-in-out;
    will-change: opacity;
}

/* Der Modifikator für den aktiven Zustand */
.loading-overlay--visible {
    opacity: 1;
    pointer-events: auto; /* Blockiert Eingaben auf der Karte, während geladen wird */
}

/* Der reine CSS-Spinner (Keine Bilder nötig!) */
.loading-overlay__spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 120, 168, 0.15); /* Dein Leaflet-Blau in ganz hell */
    border-top-color: #0078A8; /* Dein Leaflet-Blau als Akzent */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Die Rotations-Animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}