#germany-map-container {
    position: relative;
    width: 100%;
    max-width: 586px; /* Adjust to match your SVG width */
    margin: 0 auto;
}

.mapsvg-marker {
    width: 25px; /* Adjust the size of the marker image as needed */
    height: auto; /* Adjust the size of the marker image as needed */
    cursor: pointer; /* Indicates that the marker is clickable */
}

.mapsvg-marker:hover {
    border: 1px solid grey; /* Optional: Add a border on hover */
    background-color: rgba(255, 255, 255, 0.8); /* Optional: Change background color on hover */
}

/* Media Queries for Scaling */
@media (max-width: 1200px) {
    #germany-map-container {
        max-width: 500px;
    }
}

@media (max-width: 992px) {
    #germany-map-container {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    #germany-map-container {
        max-width: 300px;
    }
}

@media (max-width: 576px) {
    #germany-map-container {
        max-width: 250px;
    }
}

.mapsvg-tooltip {
    position: absolute;
    display: none;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 1000;
    max-width: 150px; /* Ensure the tooltip does not get too wide */
}