/* Pulsierender Effekt für das aktive Standort-Icon */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); } /* Leicht größer */
    100% { transform: scale(1); }
}

.leaflet-control-locate a .fa-location-arrow {
    color: black !important; /* Erzwingt die Farbe auf Schwarz */
}

/* Entfernt die Leaflet Locate-Button-Animation */
.leaflet-control-locate.active a {
    animation: none !important;
}

/* Entfernt das weiße drehende Overlay */
.leaflet-control-locate.active a::before,
.leaflet-control-locate.active a::after {
    display: none !important;
    content: none !important;
    animation: none !important;
    border: none !important;
}

/* 💡 Fix: Jetzt funktioniert Hover */
.leaflet-control-locate:hover .fa-location-arrow {
    color: var(--primary-color) !important;
    animation: pulse 1.5s infinite ease-in-out;
}

/* 💡 Fix: Jetzt funktioniert Active */
.leaflet-control-locate:active .fa-location-arrow {
    color: var(--primary-color) !important;
    animation: pulse 1.5s infinite ease-in-out;
}

/* Auch der aktive Status bleibt leuchtend */
.leaflet-control-locate.active .fa-location-arrow {
    color: var(--primary-color) !important;
    animation: pulse 1.5s infinite ease-in-out;
}

.leaflet-locate-circle {
    stroke: var(--primary-color);
    fill-opacity: 0.3;
}

.leaflet-locate-icon {
    font-family: FontAwesome;
    content: "\f124"; /* fa-location-arrow */
}

.leaflet-control-locate a {
    font-size: 18px; /* Größe anpassen */
    color: var(--primary-color); /* Farbe anpassen */
}

.leaflet-control-locate-spinner {
    display: none !important;
}