/* app v23 – Strände auf der Karte nach Zoomstufe (js/map.js → drawStraende) */
/* nah: Foto etwas kleiner als bisher (46 → 40 px) */
.spin-img { width: 40px; height: 40px; }
.spin-b { top: 23px; right: -6px; width: 20px; height: 20px; border-radius: 10px; }
/* weit: kleiner Punkt – Tippfläche bleibt 28 px */
.sdot { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sdot-i { width: 11px; height: 11px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(29,54,95,.45); }
/* mittel: einzelner Strand als Wellen-Icon */
.swelle { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 13px; background: var(--teal-d); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(29,54,95,.3); }
/* mittel: mehrere Strände zusammengefasst */
.sbundle { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 11px 0 8px; border-radius: 15px; background: var(--teal-d); color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; cursor: pointer; box-shadow: 0 0 0 2.5px #fff, 0 0 0 8px rgba(88,190,195,.3), 0 2px 6px rgba(29,54,95,.3); }
.leaflet-marker-icon:focus-visible .sdot-i, .leaflet-marker-icon:focus-visible .swelle, .leaflet-marker-icon:focus-visible .sbundle { outline: 3px solid var(--navy); outline-offset: 3px; }