(function () {
  const ring = document.getElementById('ring');
  if (!ring) return;

  /* – Browser‑Bild‑Drag unterbinden – */
  ring.addEventListener('dragstart', e => e.preventDefault());

  /* – kleine Helfer – */
  const deg = rad => rad * 180 / Math.PI;
  const center = () => {
    const r = ring.getBoundingClientRect();
    return { cx: r.left + r.width / 2, cy: r.top + r.height / 2 };
  };
  const angleFromPtr = e => {
    const { cx, cy } = center();
    return deg(Math.atan2(e.clientY - cy, e.clientX - cx));
  };
  const getRingAng = () =>
    parseFloat(getComputedStyle(ring).getPropertyValue('--angle')) || 0;
  const setRingAng = a =>
    ring.style.setProperty('--angle', a + 'deg');

  /* – State – */
  let isDown        = false;
  let dragging      = false;
  let suppressClick = false;
  let startAng      = 0;
  let baseAng       = 0;
  const THRESH      = 6;        // Grad‑Schwelle

  /* – Pointer down – */
  ring.addEventListener('pointerdown', e => {
    isDown        = true;
    dragging      = false;
    suppressClick = false;
    startAng      = angleFromPtr(e);
    baseAng       = getRingAng();
    ring.classList.add('dragging');
  }, { passive: true });

  /* – Pointer move – */
 let lastAngle = 0;  // ← neu eingeführt

window.addEventListener('pointermove', e => {
  if (!isDown) return;

  const currentAngle = angleFromPtr(e);

  if (!dragging) {
    const initialDiff = currentAngle - startAng;
    if (Math.abs(initialDiff) > THRESH) {
      dragging      = true;
      suppressClick = true;
      lastAngle     = currentAngle;  // ← Initialisieren bei Drag-Start
    }
  }

  if (dragging) {
    let delta = currentAngle - lastAngle;

    // Entsprungung an der -180°/+180° Grenze
    if (delta > 180) delta -= 360;
    if (delta < -180) delta += 360;

    const newAngle = getRingAng() + delta;
    setRingAng(newAngle);

    lastAngle = currentAngle;  // ← Update für nächsten Frame

    e.preventDefault();        // blockiert Text‑Select / Scroll
  }
}, { passive: false });

  /* – Pointer up / cancel – */
  const end = () => {
    isDown   = false;
    dragging = false;
    ring.classList.remove('dragging');
    /* suppressClick bleibt, bis click‑Handler feuert */
  };
  window.addEventListener('pointerup',     end);
  window.addEventListener('pointercancel', end);

  /* – Klick global abfangen & ggf. neutralisieren – */
  window.addEventListener('click', e => {
    if (!suppressClick) return;
    /* Wenn der Klick innerhalb des Rings war → blockieren */
    if (ring.contains(e.target)) {
      e.preventDefault();
      e.stopPropagation();
    }
    suppressClick = false;      // zurücksetzen
  }, true);                     // Capture‑Phase!
})();