<h1 class='my-heading'>Just some HTML</h1><?php echo 'The year is ' . date('Y'); ?>

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: none; /* Kein Hintergrund für die gesamte Nav-Leiste */
    text-align: center;
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    text-decoration: none;
    color: #B3B3B3; /* 70% Grau für nicht aktive Menüpunkte */
    padding: 10px 15px;
    display: block;
    background: none; /* Kein Hintergrund für Link */
}

nav ul li a:hover {
    color: white; /* Weiße Textfarbe beim Hover */
}

nav ul li a.active {
    color: green; /* Grüne Textfarbe für den aktiven Menüpunkt */
}

document.addEventListener("DOMContentLoaded", function() {
    const sections = document.querySelectorAll('section');
    const navLinks = document.querySelectorAll('nav ul li a');

    window.addEventListener('scroll', () => {
        let current = '';
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;
            if (pageYOffset >= (sectionTop - sectionHeight / 3)) {
                current = section.getAttribute('id');
            }
        });

        navLinks.forEach(link => {
            link.classList.remove('active');
            if (link.href.includes(current)) {
                link.classList.add('active');
            }
        });
    });
});