:root {
    --light-rgb: 223, 246, 208; /* verwenden wie: rgba(var(--light-rgb),0.95) */
    --light-hex: #dff6d0;
    --dark-rgb: 47, 67, 15;
    --dark-hex: #2f430f;
}

#Frankreichkarte {
    width: 100%;
    height: 100%;
    background-image: url('../resources/map/france-contours.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
    position: relative;
}
.location {
    visibility: hidden; /* wird erst nach js-Berechnung der Position geändert */
    position: absolute;
    display: block;
    border: 5px solid var(--dark-hex);
    transform: translate(-50%,-50%);
    border-radius: 50%;
}
.location.not-available-yet {
    border: 5px solid grey;
}
.location>span{
    display: block;
    border-radius: 50%;
}
.location>span.empty{
    border: 7px solid rgba(var(--light-rgb), 0.7);
}
.location>span.non-empty {
    background:  rgba(var(--light-rgb), 0.7);
    padding: 0 5px;
}
#center {
    top: 50%;
    left: 50%;
    visibility: hidden; /* dient nur zur Orientierung - aber bloß nicht none, denn dann hat das keine Offset-Werte*/
}
.location:hover {
    border: 5px solid rgba(255, 106, 0, 0.9);
}