body { margin: 0; padding: 0; font-family: sans-serif; }


#map {
            width: 100%;
            /* 100dvh ist ein moderner Handy-Befehl (Dynamic Viewport Height). 
               Er zieht automatisch die Adressleiste des Handys ab! */
            height: calc(100dvh - 70px); 
            
            /* Wir schieben die gesamte Karte 70 Pixel nach unten, 
               damit sie exakt unter dem Menü beginnt und nicht mehr dahinter verschwindet. */
            margin-top: 49px; 
            
            /* Falls du das position: absolute oder relative vorher drin hattest, 
               kannst du es hier weglassen oder auf relative setzen */
            position: relative;
            z-index: 1; /* Bleibt brav im Hintergrund */
        }


/* 1. Die unsichtbare Hülle (Leaflet bewegt diese) */
.marker-wrapper {
    background: transparent;
    border: none;
    display: flex;              /* Macht das Zentrieren kinderleicht */
    justify-content: center;    /* Horizontal mittig */
    align-items: center;        /* Vertikal mittig */
}

/* 2. Der eigentliche gelbe Punkt (sitzt IN der Hülle) */
.inner-dot {
    width: 12px;
    height: 12px;
    background-color: #FFD700;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 10px #FFD700;
    position: relative; /* Wichtig für den Ring */
}

/* 3. Der Ring (nur wenn Klasse .pulsing dabei ist) */
.pulsing::before {
    content: '';
    position: absolute;
    /* Der Ring soll größer sein als der Punkt, aber zentriert */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Exakte Mitte erzwingen */
    
    width: 20px;
    height: 20px;
    background-color: rgba(255, 215, 0, 0.6);
    border-radius: 50%;
    animation: pulse 2s infinite;
    z-index: -1; /* Hinter dem Punkt */
}

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* Popup Bilder */
.leaflet-popup-content-wrapper { border-radius: 8px; }
.popup-img { width: 100%; border-radius: 4px; margin-top: 5px; }