/* Basis-Label (Städte & POI-Labels) */
  .city-marker, .poi-label {
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Open Sans",Arial,sans-serif;
      font-weight: 400;
      color: #fff; line-height: 1.0em;
      text-shadow: -1px 0 1px rgba(0,0,0,.6),
                   1px 0 1px rgba(0,0,0,.6),
                   0 1px 1px rgba(0,0,0,.6),
                   0 -1px 1px rgba(0,0,0,.6);
      transform: translate(-50%, -50%);
      text-align: center;
    width: max-content;
  		max-width: 110px; letter-spacing: 1px;
  }

  /* Städte zentriert auf Punkt (nur Text) */
  .city-marker {
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
  }

    .verysmall  { font-size: 9px; }
    .mediumsmall  { font-size: 11px; }
    .small  { font-size: 12px; } 
    .medium { font-size: 12px; }
    .large  { font-size: 13px; }

  /* Basisklasse für POIs */
.leaflet-pane .poi {
  position: relative;            /* Container bleibt am Leaflet-Punkt */
  /* Container selbst hat keine feste Größe -> ok */
}

/* Das runde Icon wird exakt auf den Punkt zentriert */
.leaflet-pane .poi .poi-icon {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  width: var(--sz, 20px);
  height: var(--sz, 20px);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
	border: 2px solid #fff;
  /* Hintergrundfarbe setzt du bereits im JS */
}

/* SVG füllt den Icon-Kreis */
.leaflet-pane .poi .poi-icon svg {
  width: 100%;
  height: 100%;
}


 .poi-label {
  position: absolute;
  /*left: 0;*/
  top: calc(var(--sz, 16px) / 2 + var(--gap, 4px)); /* unter dem Icon */
  transform: translate(-50%, 0);
  /*white-space: nowrap;
  text-align: center;*/
  font-size: var(--fs, 11px);
  /*line-height: 1.1;*/
  pointer-events: none; /* damit Klicks aufs Icon gehen */
}

  /* Länder/Staaten weiter CAPS (falls genutzt) */
  .laender .poi-label,
  .states  .poi-label { text-transform: uppercase; letter-spacing: 1px; }


.bi.bi-water-3-spaced { width: 12px; height: 12px; }