/* Farben */ .bezirk.fc { fill: #90b5e5; } .bezirk.fc:hover, .bezirk.fc.is-active { fill: #dfe8f7; } /* Sanft & neutral */ #Karte .bezirk { cursor: default; transition: fill .16s ease, filter .12s ease; } /* Fokus-Markierung unterdrücken */ #Karte .bezirk:focus, #Karte .bezirk:focus-visible { outline: none; } #Karte .bezirk { -webkit-tap-highlight-color: transparent; } (function () { function ensureTip(){ let t = document.getElementById("karte-tooltip"); if (!t){ t = document.createElement("div"); t.id = "karte-tooltip"; Object.assign(t.style, { position:"fixed", pointerEvents:"none", padding:"6px 10px", fontSize:"12px", borderRadius:"8px", boxShadow:"0 2px 8px rgba(0,0,0,.15)", background:"rgba(20,20,20,.9)", color:"#fff", zIndex:"9999", visibility:"hidden" }); document.body.appendChild(t); } return t; } const labelOf = el => el.getAttribute("aria-label") || el.getAttribute("data-name") || el.id || ""; document.addEventListener("DOMContentLoaded", () => { const svg = document.getElementById("Karte"); if (!svg) return; const tip = ensureTip(); let lockedEl = null; // Hover nur wenn kein Lock aktiv svg.addEventListener("mousemove", e => { if (lockedEl) return; const b = e.target.closest?.(".bezirk"); if (!b) { tip.style.visibility = "hidden"; return; } tip.textContent = labelOf(b); tip.style.left = (e.clientX + 12) + "px"; tip.style.top = (e.clientY + 12) + "px"; tip.style.visibility = "visible"; }); svg.addEventListener("mouseleave", () => { if (!lockedEl) tip.style.visibility = "hidden"; }); // Klick: nur einen Bezirk aktiv svg.addEventListener("click", e => { const b = e.target.closest?.(".bezirk"); // Immer alles deaktivieren svg.querySelectorAll(".bezirk.is-active").forEach(el => { el.classList.remove("is-active"); el.setAttribute("aria-pressed","false"); }); if (b && b !== lockedEl) { // Diesen aktivieren b.classList.add("is-active"); b.setAttribute("aria-pressed","true"); lockedEl = b; // Tooltip fixieren tip.textContent = labelOf(b); tip.style.left = (e.clientX + 12) + "px"; tip.style.top = (e.clientY + 12) + "px"; tip.style.visibility = "visible"; } else { // erneuter Klick oder außerhalb → alles aus lockedEl = null; tip.style.visibility = "hidden"; } // Fokus-Rand weg b?.blur?.(); }); }); })();