document.addEventListener('DOMContentLoaded', () => {
  const page = document.body.dataset.page
  document.querySelectorAll('nav ul a').forEach(a => { if (a.dataset.page === page) a.classList.add('active') })
  const menu = document.querySelector('.menu-btn')
  if (menu) menu.addEventListener('click', () => document.querySelector('nav ul').classList.toggle('open'))

  document.querySelectorAll('.tabs').forEach(tabs => {
    const panels = document.querySelectorAll(tabs.dataset.panels)
    tabs.querySelectorAll('button').forEach((b, i) => b.addEventListener('click', () => {
      tabs.querySelectorAll('button').forEach(x => x.classList.remove('on'))
      panels.forEach(p => p.classList.remove('on'))
      b.classList.add('on'); panels[i].classList.add('on')
    }))
  })

  const box = document.querySelector('.lightbox')
  if (box) {
    document.querySelectorAll('.gallery button').forEach(b => b.addEventListener('click', () => {
      const d = box.querySelector('div'); d.textContent = b.textContent; d.style.background = b.style.background
      box.classList.add('on')
    }))
    box.addEventListener('click', () => box.classList.remove('on'))
  }

  const yearly = document.querySelector('#yearly')
  if (yearly) yearly.addEventListener('change', () => {
    document.querySelectorAll('[data-month]').forEach(el => {
      const m = Number(el.dataset.month)
      el.textContent = yearly.checked ? `${Math.round(m * 10)} € / Jahr` : `${m} € / Monat`
    })
  })

  const counter = document.querySelector('.counter')
  if (counter) {
    const out = counter.querySelector('output'); let n = 0
    counter.querySelector('[data-step="-1"]').addEventListener('click', () => { n = Math.max(0, n - 1); out.value = n })
    counter.querySelector('[data-step="1"]').addEventListener('click', () => { n += 1; out.value = n })
  }

  const form = document.querySelector('#kontakt-form')
  if (form) form.addEventListener('submit', e => {
    e.preventDefault()
    document.querySelector('.notice').classList.add('on')
    form.reset()
  })
})