Lagebild: Sticky Section-Nav und Scroll-Spy entfernt

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lagebild/index.html

@@ -73,13 +73,7 @@
                 <div class="timeline-strip" id="timeline-strip"></div>
                 <div class="timeline-dropdown" id="timeline-dropdown"></div>
             </div>
-            <nav class="section-nav" id="section-nav">
+</div>
-                <a class="section-nav-link active" href="#section-lagebild" data-section="lagebild">Lagebild</a>
-                <a class="section-nav-link" href="#section-karte" data-section="karte">Karte</a>
-                <a class="section-nav-link" href="#section-faktenchecks" data-section="faktenchecks">Faktenchecks <span class="section-badge" id="badge-faktenchecks"></span></a>
-                <a class="section-nav-link" href="#section-artikel" data-section="artikel">Artikel <span class="section-badge" id="badge-artikel"></span></a>
-            </nav>
-        </div>
     </div>
 
     <!-- Main Content: All sections visible (Scroll-Narrative) -->

lagebild/lagebild.css

@@ -15,7 +15,6 @@
     --lb-success: #10B981;
     --lb-warning: #F59E0B;
     --lb-error: #EF4444;
-    --navbar-height: 72px;
 }
 
 /* ---------- Page Base ---------- */
@@ -217,13 +216,6 @@
     background: var(--lb-bg-card);
     border-bottom: 1px solid var(--lb-border);
     padding: 0 20px;
-    position: sticky;
-    top: var(--navbar-height);
-    z-index: 90;
-    transition: box-shadow 0.3s;
-}
-.control-bar.stuck {
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
 }
 .control-bar .container {
     max-width: 1000px;
@@ -384,44 +376,6 @@
     opacity: 0.7;
 }
 
-/* ---------- Section Navigation (Scroll-Spy) ---------- */
-.section-nav {
-    display: flex;
-    gap: 0;
-}
-.section-nav-link {
-    display: inline-block;
-    padding: 12px 20px;
-    font-size: 0.9rem;
-    font-weight: 600;
-    color: var(--lb-text-sec);
-    text-decoration: none;
-    border-bottom: 3px solid transparent;
-    transition: all 0.2s;
-    white-space: nowrap;
-}
-.section-nav-link:hover {
-    color: var(--lb-text);
-}
-.section-nav-link.active {
-    color: var(--lb-accent);
-    border-bottom-color: var(--lb-accent);
-}
-.section-badge {
-    display: inline-block;
-    background: rgba(200, 168, 81, 0.12);
-    color: var(--lb-accent);
-    padding: 1px 8px;
-    border-radius: 10px;
-    font-size: 0.7rem;
-    font-weight: 600;
-    margin-left: 4px;
-    vertical-align: middle;
-}
-.section-nav-link.active .section-badge {
-    background: rgba(200, 168, 81, 0.22);
-}
-
 /* ---------- Main Content ---------- */
 .lagebild-main {
     padding: 2rem 0 4rem;
@@ -435,7 +389,6 @@
 /* ---------- Content Sections ---------- */
 .content-section {
     margin-bottom: 3rem;
-    scroll-margin-top: calc(var(--navbar-height) + 120px);
 }
 
 /* ---------- Content Cards ---------- */

lagebild/lagebild.js

@@ -39,11 +39,9 @@ var Lagebild = {
                 fact_checks: this.data.fact_checks
             };
             this.render();
-            this.initScrollSpy();
             this.initLangToggle();
             this.initScrollReveal();
             this.initFloatingCta();
-            this.initStickyDetect();
         } catch (e) {
             console.error('Lagebild laden fehlgeschlagen:', e);
             this.showError();
@@ -538,68 +536,7 @@ var Lagebild = {
         document.getElementById('factchecks-content').innerHTML = h;
     },
 
-    /* ===== SCROLL-SPY (Section Navigation) ===== */
-    initScrollSpy: function() {
-        var navLinks = document.querySelectorAll('.section-nav-link');
-        var sections = document.querySelectorAll('.content-section');
-        var controlBar = document.getElementById('control-bar');
 
-        // Smooth scroll on click
-        for (var i = 0; i < navLinks.length; i++) {
-            navLinks[i].addEventListener('click', function(e) {
-                e.preventDefault();
-                var targetId = this.getAttribute('href').substring(1);
-                var target = document.getElementById(targetId);
-                if (target) {
-                    var offset = controlBar.offsetHeight + 20;
-                    var navbarH = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')) || 72;
-                    var top = target.getBoundingClientRect().top + window.scrollY - offset - navbarH;
-                    window.scrollTo({ top: top, behavior: 'smooth' });
-                }
-            });
-        }
-
-        // IntersectionObserver for scroll-spy
-        if (!('IntersectionObserver' in window)) return;
-
-        var observer = new IntersectionObserver(function(entries) {
-            entries.forEach(function(entry) {
-                if (entry.isIntersecting) {
-                    var id = entry.target.id;
-                    for (var j = 0; j < navLinks.length; j++) {
-                        navLinks[j].classList.remove('active');
-                        if (navLinks[j].getAttribute('href') === '#' + id) {
-                            navLinks[j].classList.add('active');
-                        }
-                    }
-                }
-            });
-        }, { rootMargin: '-20% 0px -70% 0px' });
-
-        for (var i = 0; i < sections.length; i++) {
-            observer.observe(sections[i]);
-        }
-    },
-
-    /* ===== STICKY DETECTION ===== */
-    initStickyDetect: function() {
-        var controlBar = document.getElementById('control-bar');
-        if (!('IntersectionObserver' in window)) return;
-
-        // Sentinel element before control-bar
-        var sentinel = document.createElement('div');
-        sentinel.style.height = '1px';
-        sentinel.style.visibility = 'hidden';
-        controlBar.parentNode.insertBefore(sentinel, controlBar);
-
-        var observer = new IntersectionObserver(function(entries) {
-            entries.forEach(function(entry) {
-                controlBar.classList.toggle('stuck', !entry.isIntersecting);
-            });
-        }, { threshold: 0 });
-
-        observer.observe(sentinel);
-    },
 
     initLangToggle: function() {
         var btn = document.querySelector('.lang-toggle');