/* Gemeinsame Gestaltung der Flohmarkt-Karte – für die öffentliche Karte (karte/) und die Pflegeseite (karte-pflege/) */
.kartenrahmen{position:relative;padding:8px}
.karte-scroll{overflow:auto;border-radius:12px;max-height:80vh;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
/* --pin = Größe der Punkte, --z = Maßstab der Karte; beides setzt karte.js beim Zoomen */
.karte{--z:1;--pin:30px;position:relative;width:100%}
.karte img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
/* Straßennamen über dem Luftbild: Schrift bleibt beim Zoomen gleich groß */
.namen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.namen g{font-size:calc(14px / var(--z));stroke-width:calc(3.5px / var(--z))}
.zoom{position:absolute;top:18px;right:18px;z-index:5;display:flex;flex-direction:column;gap:6px}
.zoom button{width:40px;height:40px;border-radius:12px;border:1px solid #d9d2c8;background:#fff;color:#22201d;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.zoom button:hover{background:#f3efe9}
.zoom button:disabled{opacity:.4;cursor:default}
/* Punkte: grüner Kreis mit Nummer. Der weiße Rand ist ein Schatten außen, damit die Nummer den ganzen Kreis zum Zentrieren hat */
.pin{--rand:calc(var(--pin) * .08 + .5px);position:absolute;transform:translate(-50%,-50%);width:var(--pin);height:var(--pin);padding:0;border:0;border-radius:50%;background:#2f9e5b;color:#fff;font:600 max(11px, calc(var(--pin) * .45)) system-ui,-apple-system,Arial,sans-serif;display:flex;justify-content:center;text-align:center;line-height:var(--pin);white-space:nowrap;font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none;cursor:pointer;box-shadow:0 0 0 var(--rand) #fff,0 2px 6px rgba(0,0,0,.3)}
/* blaue Punkte (Kuchenverkauf, Getränke, Essen, WC): Symbol statt Nummer, exakt auf dem Kreismittelpunkt */
.pin.ort{background:#1f6fd1}
.pin.ort svg{position:absolute;left:50%;top:50%;width:64%;height:64%;transform:translate(-50%,-50%);display:block}