/* map.css - Gemeinsame Leaflet-Styles für Backend & Frontend */

/* Theme-Style Overrides */
.leaflet-container img.leaflet-tile {
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Verhindert ungewollte Abstände und Resets im Container */
.leaflet-container {
    font-family: inherit;
    box-sizing: border-box;
}

.leaflet-container * {
    box-sizing: border-box;
}

/* Strikte Behebung für Bild-Gitter in Popups oder Layern */
.leaflet-tile-container img {
    border: none !important;
}

/* Leaflet soll um unser DivIcon keinen eigenen Rahmen/Hintergrund zeichnen. */
.maps-marker-wrapper {
    background: transparent !important;
    border: 0 !important;
}

/* Der Pin selbst bekommt die im POI gespeicherte Farbe. */
.maps-marker-pin {
    --maps-marker-color: #3388ff;
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--maps-marker-color);
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
}

/* Das Symbol wird zurückgedreht, damit es im gedrehten Pin aufrecht steht. */
.maps-marker-symbol {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    transform: rotate(45deg);
}

/* SVG: Die Grafik dient nur als Maske. Dadurch wird jedes SVG weiß dargestellt,
   unabhängig davon, welche Füllfarbe in der SVG-Datei selbst definiert ist. */
.maps-marker-symbol-svg {
    display: block;
    background-color: #fff;
    -webkit-mask-image: var(--maps-marker-icon);
    mask-image: var(--maps-marker-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* PNG kann nicht wie SVG sauber als einfarbige Maske behandelt werden.
   Es wird daher unverändert angezeigt. Für inverse Symbole SVG verwenden. */
.maps-marker-symbol-png {
    display: block;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    object-fit: contain;
}