/* JF-Alarm – Karte · © 2026 ff144 – erstellt mit Claude (KI von Anthropic) */
.karte{position:relative;overflow:hidden;border-radius:10px;touch-action:none;user-select:none;-webkit-user-select:none;
  background:#e8e4dc linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px) 0 0/32px 32px;
  background-blend-mode:normal}
.karte.dunkel{background-color:#1a1f26;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px}
.karte .k-kacheln img{position:absolute;left:0;top:0;width:256px;height:256px;max-width:none;pointer-events:none}
.karte .k-kacheln img.fehlt{visibility:hidden}
.karte.dunkel .k-kacheln{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.75)}
.karte .k-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.karte .k-route-rand{fill:none;stroke:rgba(0,0,0,.55);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.karte .k-route{fill:none;stroke:#3d8bff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.karte .k-marker{position:absolute;inset:0;pointer-events:none}
.karte .k-pin{position:absolute;left:0;top:0;width:0;height:0}
.karte .k-kopf{position:absolute;left:-15px;top:-38px;width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;
  background:#e3262b;box-shadow:0 0 0 3px #fff,0 6px 14px rgba(0,0,0,.45)}
.karte .k-kopf svg{transform:rotate(45deg)}
.karte .k-pin.gh .k-kopf{background:#2f5fa8;border-radius:8px;transform:none;left:-14px;top:-14px;width:28px;height:28px}
.karte .k-pin.gh .k-kopf svg{transform:none}
.karte .k-pin.ziel .k-kopf{animation:k-puls 1.6s ease-out infinite}
@keyframes k-puls{0%{box-shadow:0 0 0 3px #fff,0 0 0 3px rgba(227,38,43,.7),0 6px 14px rgba(0,0,0,.45)}100%{box-shadow:0 0 0 3px #fff,0 0 0 22px rgba(227,38,43,0),0 6px 14px rgba(0,0,0,.45)}}
.karte .k-titel{position:absolute;left:18px;top:-30px;white-space:nowrap;background:rgba(15,19,24,.88);color:#fff;font:600 12px/1.2 'Barlow',system-ui,sans-serif;padding:3px 7px;border-radius:5px}
.karte .k-pin.gh .k-titel{top:-12px}
.karte .k-zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:4px;z-index:2}
.karte .k-zoom button{width:32px;height:32px;border-radius:8px;border:1px solid rgba(0,0,0,.25);background:rgba(20,24,30,.85);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.karte .k-info{position:absolute;left:10px;top:10px;z-index:2;background:rgba(15,19,24,.88);color:#fff;font:700 14px/1.3 'Barlow',system-ui,sans-serif;padding:6px 10px;border-radius:8px;display:none}
.karte .k-quelle{position:absolute;right:0;bottom:0;z-index:2;font:11px/1.4 system-ui,sans-serif;background:rgba(255,255,255,.75);color:#333;padding:1px 6px;border-top-left-radius:6px}
.karte .k-quelle a{color:inherit}
.karte.zieht{cursor:grabbing}
.karte[data-klick]{cursor:crosshair}
@media (prefers-reduced-motion:reduce){.karte .k-pin.ziel .k-kopf{animation:none}}