// ======================================== // NOTIFICATION SYSTEM // ======================================== function showNotification(title, message, type = 'info') { const notification = document.createElement('div'); notification.className = `notification notification-${type}`; notification.innerHTML = `

${title}

${message}

`; document.body.appendChild(notification); // Animate in requestAnimationFrame(() => { notification.style.transform = 'translateX(0)'; notification.style.opacity = '1'; }); // Auto close after 5 seconds setTimeout(() => { notification.style.transform = 'translateX(100%)'; notification.style.opacity = '0'; setTimeout(() => notification.remove(), 300); }, 5000); // Close button notification.querySelector('.notification-close').addEventListener('click', () => { notification.style.transform = 'translateX(100%)'; notification.style.opacity = '0'; setTimeout(() => notification.remove(), 300); }); } // ======================================== // MOBILE NAVIGATION // ======================================== const hamburger = document.querySelector(".mlk-hamburger"); const mobileNav = document.querySelector(".mlk-mobile-nav"); const overlay = document.querySelector(".mlk-mobile-overlay"); const closeBtn = document.querySelector(".mlk-close-btn"); if (hamburger && mobileNav && overlay && closeBtn) { hamburger.addEventListener("click", () => { mobileNav.classList.add("open"); overlay.style.display = "block"; }); closeBtn.addEventListener("click", () => { mobileNav.classList.remove("open"); overlay.style.display = "none"; }); overlay.addEventListener("click", () => { mobileNav.classList.remove("open"); overlay.style.display = "none"; }); // Close mobile menu when clicking on internal links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { if (mobileNav.classList.contains('open')) { mobileNav.classList.remove("open"); overlay.style.display = "none"; } }); }); } // ======================================== // COUNTER ANIMATION // ======================================== const counters = document.querySelectorAll('.counter'); const speed = 100; const startCounters = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const counter = entry.target; const target = parseInt(counter.getAttribute('data-target')); const count = +counter.innerText; const increment = target / speed; if (count < target) { counter.innerText = Math.ceil(count + increment); setTimeout(() => startCounters([entry], observer), 1); } else { counter.innerText = target; } } }); }; const counterObserver = new IntersectionObserver(startCounters, { threshold: 0.3 }); counters.forEach(counter => counterObserver.observe(counter)); // ======================================== // INITIALIZATION COMPLETE // ======================================== console.log('🚀 Mini-Lernkreis Website erfolgreich initialisiert!'); });