refactor(toc, customizer): improve TOC architecture and reorganize customizer settings

- Reorganized Customizer structure for improved clarity and maintainability
- Introduced consistent default values for all settings to ensure stable fallbacks
  when no user preferences are defined

- Refactored scroll-driven TOC implementation:
  - Optimized scroll handling using requestAnimationFrame
  - Reduced layout thrashing and unnecessary DOM reads
  - Improved heading detection logic (deterministic viewport trigger)
  - Enhanced positioning logic (responsive alignment + sidebar awareness)
  - Improved footer collision handling for more robust layout behavior

- Added optional IntersectionObserver-based TOC implementation:
  - Event-driven alternative to scroll-based approach
  - Currently not enabled by default
  - May not be supported long-term due to less deterministic behavior

- General cleanup and internal consistency improvements

chore: bump version to 2.4.0

assets/js/toc (Scroll-Driven Implementation).js

@@ -0,0 +1,322 @@
+/**
+ * Floating TOC (Scroll-Driven Implementation)
+ *
+ * This implementation uses a scroll-based approach combined with
+ * requestAnimationFrame to determine the currently active heading.
+ * The active section is calculated based on a fixed viewport trigger
+ * (offset from the top), ensuring predictable and stable behavior.
+ *
+ * Design Goals:
+ * - Deterministic highlighting (no competing states)
+ * - Visual stability (no flickering or race conditions)
+ * - Theme compatibility (no reliance on experimental APIs)
+ * - Maintainable and debuggable logic
+ *
+ * Characteristics:
+ * - Uses a cached list of headings for efficient iteration
+ * - Throttles scroll handling via requestAnimationFrame
+ * - Minimizes DOM writes and layout recalculations
+ * - Separates layout (positioning) from state (active link)
+ *
+ * Trade-offs:
+ * - Runs continuously during scroll (minor CPU overhead)
+ * - Relies on getBoundingClientRect for visibility detection
+ * - Less "event-driven" than IntersectionObserver-based approaches
+ *
+ * Notes:
+ * This approach was chosen over IntersectionObserver to guarantee
+ * consistent ordering, eliminate flickering edge cases, and provide
+ * fully deterministic behavior across all layouts and browsers.
+ */
+
+document.addEventListener('DOMContentLoaded', function () {
+    var toc = document.getElementById('zeitfresser-floating-toc');
+    var title = document.querySelector(
+        '.zeitfresser-article-heading .page-title, ' +
+        '.zeitfresser-article-heading .entry-title, ' +
+        '.entry-header .entry-title'
+    );
+    var progressBar = document.getElementById('zeitfresser-floating-toc-progress');
+    var nav = toc ? toc.querySelector('.zeitfresser-floating-toc__nav') : null;
+
+    if (!toc || !title) {
+        return;
+    }
+
+    var links = Array.prototype.slice.call(toc.querySelectorAll('a[data-target]'));
+    var desktopQuery = window.matchMedia('(min-width: 1500px)');
+    var stickyTop = 100;
+    var headingOffset = 88;
+    var ticking = false;
+    var tocBottomOffset = null;
+    var cachedSidebar = null;
+    var headings = getHeadings();
+
+    function isDesktop() {
+        return desktopQuery.matches;
+    }
+
+    function getTarget(link) {
+        var id = link.getAttribute('data-target');
+        return id ? document.getElementById(id) : null;
+    }
+
+    function getHeadings() {
+        return links
+            .map(function (link) {
+                return { link: link, target: getTarget(link) };
+            })
+            .filter(function (item) {
+                return !!item.target;
+            });
+    }
+
+    function getArticleElement() {
+        return document.querySelector(
+            '.single-post .post-content article, ' +
+            '.single-post .post-content, ' +
+            'article.post, article, ' +
+            '.entry-content'
+        );
+    }
+
+    function getTocBottomOffset() {
+        if (tocBottomOffset !== null) return tocBottomOffset;
+
+        var value = getComputedStyle(document.documentElement)
+            .getPropertyValue('--toc-bottom-offset')
+            .trim();
+
+        tocBottomOffset = parseInt(value, 10) || 12;
+        return tocBottomOffset;
+    }
+
+    function getRealSidebar() {
+        if (cachedSidebar) return cachedSidebar;
+
+        var candidates = Array.prototype.slice.call(
+            document.querySelectorAll('aside, .sidebar, #secondary')
+        );
+
+        cachedSidebar = candidates
+            .filter(function (el) {
+                var rect = el.getBoundingClientRect();
+                return rect.width > 200 && rect.height > 200;
+            })
+            .sort(function (a, b) {
+                var rectA = a.getBoundingClientRect();
+                var rectB = b.getBoundingClientRect();
+                return rectB.left - rectA.left;
+            })[0] || null;
+
+        return cachedSidebar;
+    }
+
+    function syncPosition() {
+        if (!isDesktop()) {
+            document.documentElement.style.setProperty('--zeitfresser-toc-top', stickyTop + 'px');
+            document.documentElement.style.setProperty('--zeitfresser-toc-left', '24px');
+            document.documentElement.style.setProperty('--zeitfresser-toc-width', '220px');
+            return;
+        }
+
+        var scrollTop = window.scrollY || window.pageYOffset || 0;
+        var titleRect = title.getBoundingClientRect();
+
+        // 🔥 bessere Content-Erkennung
+        var contentColumn =
+            document.querySelector('.inside-page .main-wrapper > section') ||
+            document.querySelector('#primary') ||
+            document.querySelector('.content-area') ||
+            title;
+
+        if (!contentColumn) return;
+
+        var sidebar = getRealSidebar();
+        var contentRect = contentColumn.getBoundingClientRect();
+        var sidebarRect = sidebar ? sidebar.getBoundingClientRect() : null;
+
+        var gap = 48;
+
+        if (sidebarRect) {
+            gap = Math.abs(sidebarRect.left - contentRect.right);
+            gap = Math.max(32, Math.min(gap, 120));
+        }
+
+        var maxWidth = Math.max(Math.round(contentRect.left - gap - 24), 180);
+        var tocWidth = Math.max(220, Math.min(260, maxWidth));
+        
+        var tocLeft = Math.max(
+            24,
+            Math.round(contentRect.left - gap - tocWidth)
+        );
+
+        var tocTop = Math.max(
+            stickyTop,
+            Math.round(titleRect.top + scrollTop + 14)
+        );
+
+        document.documentElement.style.setProperty('--zeitfresser-toc-top', tocTop + 'px');
+        document.documentElement.style.setProperty('--zeitfresser-toc-left', tocLeft + 'px');
+        document.documentElement.style.setProperty('--zeitfresser-toc-width', tocWidth + 'px');
+    }
+
+    function handleFooterCollision() {
+        if (!isDesktop()) {
+            toc.style.transform = '';
+            return;
+        }
+
+        var article = getArticleElement();
+        if (!article) {
+            toc.style.transform = '';
+            return;
+        }
+
+        toc.style.transform = '';
+
+        var scrollTop = window.scrollY || window.pageYOffset;
+        var articleRect = article.getBoundingClientRect();
+        var articleBottom = articleRect.top + scrollTop + articleRect.height;
+
+        var tocRect = toc.getBoundingClientRect();
+        var tocTop = tocRect.top + scrollTop;
+        var tocHeight = tocRect.height;
+        var tocBottom = tocTop + tocHeight;
+
+        var offset = getTocBottomOffset();
+        var maxBottom = articleBottom - offset;
+        var overflow = Math.ceil(tocBottom - maxBottom);
+
+        if (overflow > 0) {
+            toc.style.transform = 'translateY(-' + overflow + 'px)';
+        }
+    }
+
+    function setActiveLink(id) {
+        links.forEach(function (link) {
+            var active = link.getAttribute('data-target') === id;
+            link.classList.toggle('is-active', active);
+
+            if (active) {
+                link.setAttribute('aria-current', 'true');
+            } else {
+                link.removeAttribute('aria-current');
+            }
+        });
+    }
+
+    function updateProgress() {
+        if (!progressBar) return;
+
+        var article = getArticleElement();
+        if (!article) {
+            progressBar.style.width = '0%';
+            return;
+        }
+
+        var rect = article.getBoundingClientRect();
+        var total = Math.max(article.offsetHeight - window.innerHeight, 1);
+
+        var progress = Math.min(
+            Math.max((-rect.top / total) * 100, 0),
+            100
+        );
+
+        progressBar.style.width = progress + '%';
+    }
+
+    function updateActiveHeading() {
+        if (!headings.length) return;
+
+        var currentId = headings[0].target.id;
+        var triggerY = headingOffset + 24;
+
+        for (var i = 0; i < headings.length; i++) {
+            var rectTop = headings[i].target.getBoundingClientRect().top;
+
+            if (rectTop <= triggerY) {
+                currentId = headings[i].target.id;
+            } else {
+                break;
+            }
+        }
+
+        setActiveLink(currentId);
+    }
+
+    function onViewportChange() {
+        if (ticking) return;
+
+        ticking = true;
+
+        window.requestAnimationFrame(function () {
+            syncPosition();
+            handleFooterCollision();
+            updateProgress();
+            updateActiveHeading();
+            ticking = false;
+        });
+    }
+
+    links.forEach(function (link) {
+        link.addEventListener('click', function (event) {
+            var target = getTarget(link);
+            if (!target) return;
+
+            event.preventDefault();
+
+            var top =
+                target.getBoundingClientRect().top +
+                window.scrollY -
+                headingOffset;
+
+            window.scrollTo({
+                top: top,
+                behavior: 'smooth'
+            });
+
+            setActiveLink(target.id);
+        });
+    });
+
+    if (nav) {
+        nav.addEventListener(
+            'wheel',
+            function (event) {
+                var canScroll = nav.scrollHeight > nav.clientHeight;
+                if (!canScroll) return;
+
+                var atTop = nav.scrollTop <= 0;
+                var atBottom =
+                    Math.ceil(nav.scrollTop + nav.clientHeight) >= nav.scrollHeight;
+
+                if (
+                    (event.deltaY < 0 && !atTop) ||
+                    (event.deltaY > 0 && !atBottom)
+                ) {
+                    event.preventDefault();
+                    nav.scrollTop += event.deltaY;
+                }
+            },
+            { passive: false }
+        );
+    }
+
+    // Initial run
+    syncPosition();
+    handleFooterCollision();
+    updateProgress();
+    updateActiveHeading();
+
+    requestAnimationFrame(function () {
+        toc.classList.add('is-visible');
+    });
+
+    window.addEventListener('scroll', onViewportChange, { passive: true });
+    window.addEventListener('resize', onViewportChange, { passive: true });
+    window.addEventListener('load', function () {
+        syncPosition();
+    });
+    
+});

assets/js/toc (observer).js

@@ -0,0 +1,299 @@
+/**
+ * Floating TOC (IntersectionObserver Version)
+ *
+ * This implementation relies on the IntersectionObserver API to detect which
+ * headings are currently visible in the viewport. It is event-driven and
+ * more efficient, as updates occur only when visibility changes.
+ *
+ * Pros:
+ * - Lower CPU usage (no continuous polling)
+ * - Native browser optimization
+ *
+ * Cons:
+ * - Can produce multiple competing active states
+ * - May require tuning to avoid flickering or reordering
+ */
+
+document.addEventListener('DOMContentLoaded', function () {
+    var toc = document.getElementById('zeitfresser-floating-toc');
+    var title = document.querySelector('.zeitfresser-article-heading .page-title, .zeitfresser-article-heading .entry-title, .entry-header .entry-title');
+    var progressBar = document.getElementById('zeitfresser-floating-toc-progress');
+    var nav = toc ? toc.querySelector('.zeitfresser-floating-toc__nav') : null;
+
+    if (!toc || !title) {
+        return;
+    }
+
+    var links = Array.prototype.slice.call(toc.querySelectorAll('a[data-target]'));
+    var desktopQuery = window.matchMedia('(min-width: 1500px)');
+    var stickyTop = 100;
+    var headingOffset = 88;
+    var ticking = false;
+    var cachedSidebar = null;
+    var tocBottomOffset = null;
+
+    function isDesktop() {
+        return desktopQuery.matches;
+    }
+
+    function getTarget(link) {
+        var id = link.getAttribute('data-target');
+        return id ? document.getElementById(id) : null;
+    }
+
+    function getHeadings() {
+        return links.map(function (link) {
+            return {
+                link: link,
+                target: getTarget(link)
+            };
+        }).filter(function (item) {
+            return !!item.target;
+        });
+    }
+
+    function getArticleElement() {
+        return document.querySelector(
+            '.single-post .post-content article, ' +
+            '.single-post .post-content, ' +
+            'article.post, article, ' +
+            '.entry-content'
+        );
+    }
+
+    function getTocBottomOffset() {
+        if (tocBottomOffset !== null) return tocBottomOffset;
+
+        var value = getComputedStyle(document.documentElement)
+            .getPropertyValue('--toc-bottom-offset')
+            .trim();
+
+        tocBottomOffset = parseInt(value, 10) || 12;
+        return tocBottomOffset;
+    }
+    
+    function getRealSidebar() {
+        if (cachedSidebar) return cachedSidebar;
+
+        var candidates = Array.prototype.slice.call(
+            document.querySelectorAll('aside, .sidebar, #secondary')
+        );
+
+        cachedSidebar = candidates
+            .filter(function (el) {
+                var rect = el.getBoundingClientRect();
+                return rect.width > 200 && rect.height > 200;
+            })
+            .sort(function (a, b) {
+                return b.getBoundingClientRect().left - a.getBoundingClientRect().left;
+            })[0] || null;
+
+        return cachedSidebar;
+    }
+
+    function syncPosition() {
+        if (!isDesktop()) {
+            document.documentElement.style.setProperty('--zeitfresser-toc-top', stickyTop + 'px');
+            document.documentElement.style.setProperty('--zeitfresser-toc-left', '24px');
+            document.documentElement.style.setProperty('--zeitfresser-toc-width', '220px');
+            return;
+        }
+
+        var scrollTop = window.scrollY || window.pageYOffset || 0;
+        var titleRect = title.getBoundingClientRect();
+
+        // 🔥 bessere Content-Erkennung
+        var contentColumn =
+            document.querySelector('.inside-page .main-wrapper > section') ||
+            document.querySelector('#primary') ||
+            document.querySelector('.content-area') ||
+            title;
+
+        if (!contentColumn) return;
+
+        var sidebar = getRealSidebar();
+
+        var contentRect = contentColumn.getBoundingClientRect();
+        var sidebarRect = sidebar ? sidebar.getBoundingClientRect() : null;
+
+        var gap = 48;
+
+        if (sidebarRect) {
+            gap = Math.abs(sidebarRect.left - contentRect.right);
+            gap = Math.max(32, Math.min(gap, 120));
+        }
+
+        // Toc Content Breite
+        var maxWidth = Math.max(Math.round(contentRect.left - gap - 24), 180);
+        var tocWidth = Math.max(220, Math.min(260, maxWidth));
+
+        var tocLeft = Math.max(
+            24,
+            Math.round(contentRect.left - gap - tocWidth)
+        );
+
+        var tocTop = Math.max(
+            stickyTop,
+            Math.round(titleRect.top + scrollTop + 14)
+        );
+
+        document.documentElement.style.setProperty('--zeitfresser-toc-top', tocTop + 'px');
+        document.documentElement.style.setProperty('--zeitfresser-toc-left', tocLeft + 'px');
+        document.documentElement.style.setProperty('--zeitfresser-toc-width', tocWidth + 'px');
+    }
+
+    function handleFooterCollision() {
+        if (!isDesktop()) {
+            toc.style.transform = '';
+            return;
+        }
+
+        var article = getArticleElement();
+
+        if (!article) {
+            toc.style.transform = '';
+            return;
+        }
+
+        toc.style.transform = '';
+
+        var scrollTop = window.scrollY || window.pageYOffset;
+
+        var articleRect = article.getBoundingClientRect();
+        var articleBottom = articleRect.top + scrollTop + articleRect.height;
+
+        var tocRect = toc.getBoundingClientRect();
+        var tocTop = tocRect.top + scrollTop;
+        var tocHeight = tocRect.height;
+        var tocBottom = tocTop + tocHeight;
+
+        var offset = getTocBottomOffset();
+
+        var maxBottom = articleBottom - offset;
+        var overflow = Math.ceil(tocBottom - maxBottom);
+
+        if (overflow > 0) {
+            toc.style.transform = 'translateY(-' + overflow + 'px)';
+        }
+    }
+
+    function setActiveLink(id) {
+        links.forEach(function (link) {
+            var active = link.getAttribute('data-target') === id;
+            link.classList.toggle('is-active', active);
+
+            if (active) {
+                link.setAttribute('aria-current', 'true');
+            } else {
+                link.removeAttribute('aria-current');
+            }
+        });
+    }
+
+    function updateProgress() {
+        if (!progressBar) return;
+
+        var article = getArticleElement();
+
+        if (!article) {
+            progressBar.style.width = '0%';
+            return;
+        }
+
+        var rect = article.getBoundingClientRect();
+        var total = Math.max(article.offsetHeight - window.innerHeight, 1);
+        var progress = Math.min(Math.max((-rect.top / total) * 100, 0), 100);
+
+        progressBar.style.width = progress + '%';
+    }
+
+    function onViewportChange() {
+        if (ticking) return;
+
+        ticking = true;
+
+        window.requestAnimationFrame(function () {
+            syncPosition();
+            handleFooterCollision();
+            updateProgress();
+            ticking = false;
+        });
+    }
+    
+    // 🔥 NEW: IntersectionObserver for active headings
+    let currentActiveId = null;
+
+    function initIntersectionObserver() {
+        const headings = getHeadings();
+        if (!headings.length) return;
+
+        const observer = new IntersectionObserver(function (entries) {
+
+            entries.forEach(function (entry) {
+                if (entry.isIntersecting) {
+                    const id = entry.target.id;
+
+                    if (id !== currentActiveId) {
+                        currentActiveId = id;
+                        setActiveLink(id);
+                    }
+                }
+            });
+
+        }, {
+            root: null,
+            rootMargin: `-${headingOffset}px 0px -70% 0px`,
+            threshold: 0
+        });
+
+        headings.forEach(function (item) {
+            if (item.target) {
+                observer.observe(item.target);
+            }
+        });
+    }
+
+    links.forEach(function (link) {
+        link.addEventListener('click', function (event) {
+            var target = getTarget(link);
+            if (!target) return;
+
+            event.preventDefault();
+
+            var top = target.getBoundingClientRect().top + window.scrollY - headingOffset;
+
+            window.scrollTo({
+                top: top,
+                behavior: 'smooth'
+            });
+        });
+    });
+
+    if (nav) {
+        nav.addEventListener('wheel', function (event) {
+            var canScroll = nav.scrollHeight > nav.clientHeight;
+            if (!canScroll) return;
+
+            var atTop = nav.scrollTop <= 0;
+            var atBottom = Math.ceil(nav.scrollTop + nav.clientHeight) >= nav.scrollHeight;
+
+            if ((event.deltaY < 0 && !atTop) || (event.deltaY > 0 && !atBottom)) {
+                event.preventDefault();
+                nav.scrollTop += event.deltaY;
+            }
+        }, { passive: false });
+    }
+
+    // Initial run
+    syncPosition();
+    handleFooterCollision();
+    updateProgress();
+    initIntersectionObserver();
+
+    requestAnimationFrame(function () {
+        toc.classList.add('is-visible');
+    });
+
+    window.addEventListener('scroll', onViewportChange, { passive: true });
+    window.addEventListener('resize', onViewportChange, { passive: true });
+});

assets/js/toc.js

@@ -1,6 +1,41 @@
+/**
+ * Floating TOC (Scroll-Driven Implementation)
+ *
+ * This implementation uses a scroll-based approach combined with
+ * requestAnimationFrame to determine the currently active heading.
+ * The active section is calculated based on a fixed viewport trigger
+ * (offset from the top), ensuring predictable and stable behavior.
+ *
+ * Design Goals:
+ * - Deterministic highlighting (no competing states)
+ * - Visual stability (no flickering or race conditions)
+ * - Theme compatibility (no reliance on experimental APIs)
+ * - Maintainable and debuggable logic
+ *
+ * Characteristics:
+ * - Uses a cached list of headings for efficient iteration
+ * - Throttles scroll handling via requestAnimationFrame
+ * - Minimizes DOM writes and layout recalculations
+ * - Separates layout (positioning) from state (active link)
+ *
+ * Trade-offs:
+ * - Runs continuously during scroll (minor CPU overhead)
+ * - Relies on getBoundingClientRect for visibility detection
+ * - Less "event-driven" than IntersectionObserver-based approaches
+ *
+ * Notes:
+ * This approach was chosen over IntersectionObserver to guarantee
+ * consistent ordering, eliminate flickering edge cases, and provide
+ * fully deterministic behavior across all layouts and browsers.
+ */
+
 document.addEventListener('DOMContentLoaded', function () {
     var toc = document.getElementById('zeitfresser-floating-toc');
-    var title = document.querySelector('.zeitfresser-article-heading .page-title, .zeitfresser-article-heading .entry-title, .entry-header .entry-title');
+    var title = document.querySelector(
+        '.zeitfresser-article-heading .page-title, ' +
+        '.zeitfresser-article-heading .entry-title, ' +
+        '.entry-header .entry-title'
+    );
     var progressBar = document.getElementById('zeitfresser-floating-toc-progress');
     var nav = toc ? toc.querySelector('.zeitfresser-floating-toc__nav') : null;
 
@@ -13,8 +48,9 @@ document.addEventListener('DOMContentLoaded', function () {
     var stickyTop = 100;
     var headingOffset = 88;
     var ticking = false;
-    var cachedSidebar = null;
     var tocBottomOffset = null;
+    var cachedSidebar = null;
+    var headings = getHeadings();
 
     function isDesktop() {
         return desktopQuery.matches;
@@ -26,12 +62,11 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     function getHeadings() {
-        return links.map(function (link) {
+        return links
-            return {
+            .map(function (link) {
-                link: link,
+                return { link: link, target: getTarget(link) };
-                target: getTarget(link)
+            })
-            };
+            .filter(function (item) {
-        }).filter(function (item) {
                 return !!item.target;
             });
     }
@@ -69,7 +104,9 @@ document.addEventListener('DOMContentLoaded', function () {
                 return rect.width > 200 && rect.height > 200;
             })
             .sort(function (a, b) {
-                return b.getBoundingClientRect().left - a.getBoundingClientRect().left;
+                var rectA = a.getBoundingClientRect();
+                var rectB = b.getBoundingClientRect();
+                return rectB.left - rectA.left;
             })[0] || null;
 
         return cachedSidebar;
@@ -96,7 +133,6 @@ document.addEventListener('DOMContentLoaded', function () {
         if (!contentColumn) return;
 
         var sidebar = getRealSidebar();
-
         var contentRect = contentColumn.getBoundingClientRect();
         var sidebarRect = sidebar ? sidebar.getBoundingClientRect() : null;
 
@@ -107,7 +143,6 @@ document.addEventListener('DOMContentLoaded', function () {
             gap = Math.max(32, Math.min(gap, 120));
         }
 
-        // Toc Content Breite
         var maxWidth = Math.max(Math.round(contentRect.left - gap - 24), 180);
         var tocWidth = Math.max(220, Math.min(260, maxWidth));
         
@@ -133,7 +168,6 @@ document.addEventListener('DOMContentLoaded', function () {
         }
 
         var article = getArticleElement();
-
         if (!article) {
             toc.style.transform = '';
             return;
@@ -142,7 +176,6 @@ document.addEventListener('DOMContentLoaded', function () {
         toc.style.transform = '';
 
         var scrollTop = window.scrollY || window.pageYOffset;
-
         var articleRect = article.getBoundingClientRect();
         var articleBottom = articleRect.top + scrollTop + articleRect.height;
 
@@ -152,7 +185,6 @@ document.addEventListener('DOMContentLoaded', function () {
         var tocBottom = tocTop + tocHeight;
 
         var offset = getTocBottomOffset();
-
         var maxBottom = articleBottom - offset;
         var overflow = Math.ceil(tocBottom - maxBottom);
 
@@ -178,7 +210,6 @@ document.addEventListener('DOMContentLoaded', function () {
         if (!progressBar) return;
 
         var article = getArticleElement();
-
         if (!article) {
             progressBar.style.width = '0%';
             return;
@@ -186,23 +217,30 @@ document.addEventListener('DOMContentLoaded', function () {
 
         var rect = article.getBoundingClientRect();
         var total = Math.max(article.offsetHeight - window.innerHeight, 1);
-        var progress = Math.min(Math.max((-rect.top / total) * 100, 0), 100);
+
+        var progress = Math.min(
+            Math.max((-rect.top / total) * 100, 0),
+            100
+        );
 
         progressBar.style.width = progress + '%';
     }
 
     function updateActiveHeading() {
-        var headings = getHeadings();
         if (!headings.length) return;
 
         var currentId = headings[0].target.id;
         var triggerY = headingOffset + 24;
 
-        headings.forEach(function (item) {
+        for (var i = 0; i < headings.length; i++) {
-            if (item.target.getBoundingClientRect().top <= triggerY) {
+            var rectTop = headings[i].target.getBoundingClientRect().top;
-                currentId = item.target.id;
+
+            if (rectTop <= triggerY) {
+                currentId = headings[i].target.id;
+            } else {
+                break;
+            }
         }
-        });
 
         setActiveLink(currentId);
     }
@@ -228,7 +266,10 @@ document.addEventListener('DOMContentLoaded', function () {
 
             event.preventDefault();
 
-            var top = target.getBoundingClientRect().top + window.scrollY - headingOffset;
+            var top =
+                target.getBoundingClientRect().top +
+                window.scrollY -
+                headingOffset;
 
             window.scrollTo({
                 top: top,
@@ -240,18 +281,26 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 
     if (nav) {
-        nav.addEventListener('wheel', function (event) {
+        nav.addEventListener(
+            'wheel',
+            function (event) {
                 var canScroll = nav.scrollHeight > nav.clientHeight;
                 if (!canScroll) return;
 
                 var atTop = nav.scrollTop <= 0;
-            var atBottom = Math.ceil(nav.scrollTop + nav.clientHeight) >= nav.scrollHeight;
+                var atBottom =
+                    Math.ceil(nav.scrollTop + nav.clientHeight) >= nav.scrollHeight;
 
-            if ((event.deltaY < 0 && !atTop) || (event.deltaY > 0 && !atBottom)) {
+                if (
+                    (event.deltaY < 0 && !atTop) ||
+                    (event.deltaY > 0 && !atBottom)
+                ) {
                     event.preventDefault();
                     nav.scrollTop += event.deltaY;
                 }
-        }, { passive: false });
+            },
+            { passive: false }
+        );
     }
 
     // Initial run
@@ -266,4 +315,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
     window.addEventListener('scroll', onViewportChange, { passive: true });
     window.addEventListener('resize', onViewportChange, { passive: true });
+    window.addEventListener('load', function () {
+        syncPosition();
+    });
+    
 });

inc/customizer/general.php

@@ -10,7 +10,24 @@ add_action( 'customize_register', 'zeitfresser_general_options' );
 function zeitfresser_general_options( $wp_customize ) {
 
     /**
-     * General Section (falls nicht schon vorhanden)
+     * 🔥 Custom Heading Control
+     */
+    if ( class_exists( 'WP_Customize_Control' ) ) {
+        class ZTFR_Customize_Heading_Control extends WP_Customize_Control {
+            public $type = 'ztfr-heading';
+
+            public function render_content() {
+                ?>
+                <span style="display:block; font-weight:600; font-size:14px; margin:15px 0 5px;">
+                    <?php echo esc_html( $this->label ); ?>
+                </span>
+                <?php
+            }
+        }
+    }
+
+    /**
+     * General Section
      */
     if ( ! $wp_customize->get_section( 'ztfr_general' ) ) {
         $wp_customize->add_section(
@@ -23,28 +40,23 @@ function zeitfresser_general_options( $wp_customize ) {
     }
 
     /**
-     * Excerpt Length
+     * ------------------------
+     * HEADER
+     * ------------------------
      */
-    $wp_customize->add_setting(
+    $wp_customize->add_setting( 'ztfr_header_heading', array(
-        'post_snippet_excerpt_size',
+        'sanitize_callback' => 'sanitize_text_field',
-        array(
+    ));
-            'default'           => 20,
-            'sanitize_callback' => 'absint',
-        )
-    );
 
     $wp_customize->add_control(
-        'post_snippet_excerpt_size',
+        new ZTFR_Customize_Heading_Control(
+            $wp_customize,
+            'ztfr_header_heading',
             array(
-            'type'        => 'number',
+                'label'    => 'Header',
                 'section'  => 'ztfr_general',
-            'label'       => 'Excerpt Length (Post Cards)',
+                'priority' => 1,
-            'description' => 'Number of words shown in post previews.',
+            )
-            'input_attrs' => array(
-                'min'  => 5,
-                'max'  => 100,
-                'step' => 1,
-            ),
         )
     );
 
@@ -65,6 +77,7 @@ function zeitfresser_general_options( $wp_customize ) {
             'type'     => 'checkbox',
             'section'  => 'ztfr_general',
             'label'    => 'Show Site Title',
+            'priority' => 2,
         )
     );
 
@@ -85,6 +98,55 @@ function zeitfresser_general_options( $wp_customize ) {
             'type'     => 'checkbox',
             'section'  => 'ztfr_general',
             'label'    => 'Show Tagline',
+            'priority' => 3,
+        )
+    );
+
+    /**
+     * ------------------------
+     * GRID
+     * ------------------------
+     */
+    $wp_customize->add_setting( 'ztfr_grid_heading', array(
+        'sanitize_callback' => 'sanitize_text_field',
+    ));
+
+    $wp_customize->add_control(
+        new ZTFR_Customize_Heading_Control(
+            $wp_customize,
+            'ztfr_grid_heading',
+            array(
+                'label'    => 'Grid',
+                'section'  => 'ztfr_general',
+                'priority' => 20,
+            )
+        )
+    );
+
+    /**
+     * Excerpt Length
+     */
+    $wp_customize->add_setting(
+        'post_snippet_excerpt_size',
+        array(
+            'default'           => 25,
+            'sanitize_callback' => 'absint',
+        )
+    );
+
+    $wp_customize->add_control(
+        'post_snippet_excerpt_size',
+        array(
+            'type'        => 'number',
+            'section'     => 'ztfr_general',
+            'label'       => 'Excerpt Length (Post Cards)',
+            'description' => 'Number of words shown in post previews.',
+            'priority'    => 21,
+            'input_attrs' => array(
+                'min'  => 5,
+                'max'  => 100,
+                'step' => 1,
+            ),
         )
     );
 }

inc/customizer/layout.php

@@ -27,7 +27,7 @@ function zeitfresser_layout_options( $wp_customize ) {
             'section'     => 'ztfr_general',
             'label'       => esc_html__( 'Container Width', 'zeitfresser' ),
             'description' => esc_html__( 'Maximum width of the content container in pixels.', 'zeitfresser' ),
-            'priority'    => 10,
+            'priority'    => 22,
             'input_attrs' => array(
                 'min'  => 800,
                 'max'  => 2000,
@@ -47,7 +47,7 @@ function zeitfresser_container_width_dynamic_css() {
     $container_width = (int) get_theme_mod( 'container_width' );
 
     if ( $container_width <= 0 ) {
-        $container_width = 1140;
+        $container_width = 1400;
     }
 
     echo '<style>:root{--container-width:' . esc_attr( $container_width ) . 'px;}</style>';

inc/customizer/social.php

@@ -6,11 +6,6 @@
  */
 
 if ( ! function_exists( 'zeitfresser_get_social_links' ) ) {
-    /**
-     * Return supported social networks.
-     *
-     * @return array<string,string>
-     */
     function zeitfresser_get_social_links() {
         return array(
             'facebook'  => esc_html__( 'Facebook', 'zeitfresser' ),
@@ -31,31 +26,52 @@ add_action( 'customize_register', 'zeitfresser_social_links' );
 
 function zeitfresser_social_links( $wp_customize ) {
 
-    $social_links = zeitfresser_get_social_links();
+    /**
+     * 🔥 Heading Control (falls noch nicht vorhanden)
+     */
+    if ( class_exists( 'WP_Customize_Control' ) && ! class_exists( 'ZTFR_Customize_Heading_Control' ) ) {
+        class ZTFR_Customize_Heading_Control extends WP_Customize_Control {
+            public $type = 'ztfr-heading';
+
+            public function render_content() {
+                ?>
+                <span style="display:block; font-weight:600; font-size:14px; margin:15px 0 5px;">
+                    <?php echo esc_html( $this->label ); ?>
+                </span>
+                <?php
+            }
+        }
+    }
 
     /**
-     * Section Divider
+     * ------------------------
+     * SOCIAL HEADING
+     * ------------------------
      */
     $wp_customize->add_setting(
         'ztfr_social_heading',
         array(
-            'sanitize_callback' => 'wp_kses_post',
+            'sanitize_callback' => 'sanitize_text_field',
         )
     );
 
     $wp_customize->add_control(
+        new ZTFR_Customize_Heading_Control(
+            $wp_customize,
             'ztfr_social_heading',
             array(
+                'label'    => esc_html__( 'Social Links', 'zeitfresser' ),
                 'section'  => 'ztfr_general',
-            'type'        => 'hidden',
-            'description' => '<hr><strong>' . esc_html__( 'Social Links', 'zeitfresser' ) . '</strong>',
                 'priority' => 30,
             )
+        )
     );
 
     /**
      * Social URLs
      */
+    $social_links = zeitfresser_get_social_links();
+
     $priority = 31;
 
     foreach ( $social_links as $key => $label ) {

inc/customizer/toc.php

@@ -10,27 +10,48 @@ add_action( 'customize_register', 'zeitfresser_toc_options' );
 function zeitfresser_toc_options( $wp_customize ) {
 
     /**
-     * Section Divider (UI only)
+     * 🔥 Heading Control (falls noch nicht vorhanden)
+     */
+    if ( class_exists( 'WP_Customize_Control' ) && ! class_exists( 'ZTFR_Customize_Heading_Control' ) ) {
+        class ZTFR_Customize_Heading_Control extends WP_Customize_Control {
+            public $type = 'ztfr-heading';
+
+            public function render_content() {
+                ?>
+                <span style="display:block; font-weight:600; font-size:14px; margin:15px 0 5px;">
+                    <?php echo esc_html( $this->label ); ?>
+                </span>
+                <?php
+            }
+        }
+    }
+
+    /**
+     * ------------------------
+     * TOC HEADING
+     * ------------------------
      */
     $wp_customize->add_setting(
         'ztfr_toc_heading',
         array(
-            'sanitize_callback' => 'wp_kses_post',
+            'sanitize_callback' => 'sanitize_text_field',
         )
     );
 
     $wp_customize->add_control(
+        new ZTFR_Customize_Heading_Control(
+            $wp_customize,
             'ztfr_toc_heading',
             array(
+                'label'    => esc_html__( 'TOC', 'zeitfresser' ),
                 'section'  => 'ztfr_general',
-            'type'        => 'hidden',
+                'priority' => 10,
-            'description' => '<hr><strong>' . esc_html__( 'Article TOC', 'zeitfresser' ) . '</strong>',
+            )
-            'priority'    => 20,
         )
     );
 
     /**
-     * Toggle TOC
+     * Show TOC
      */
     $wp_customize->add_setting(
         'show_article_toc',
@@ -47,7 +68,7 @@ function zeitfresser_toc_options( $wp_customize ) {
             'section'     => 'ztfr_general',
             'label'       => esc_html__( 'Show Article TOC', 'zeitfresser' ),
             'description' => esc_html__( 'Enable floating TOC on single posts.', 'zeitfresser' ),
-            'priority'    => 21,
+            'priority'    => 11,
         )
     );
 
@@ -67,9 +88,9 @@ function zeitfresser_toc_options( $wp_customize ) {
         array(
             'type'        => 'number',
             'section'     => 'ztfr_general',
-            'label'       => esc_html__( 'Minimum Headlines for TOC', 'zeitfresser' ),
+            'label'       => esc_html__( 'Minimum Headlines', 'zeitfresser' ),
             'description' => esc_html__( 'TOC appears only if this number of headings is reached.', 'zeitfresser' ),
-            'priority'    => 22,
+            'priority'    => 12,
             'input_attrs' => array(
                 'min'  => 1,
                 'max'  => 50,

style.css

@@ -5,7 +5,7 @@ Author: Zeitfresser
 Author URI: https://ztfr.eu/
 Theme URI: https://ztfr.eu/
 Description: Zeitfresser Wordpress Theme
-Version: 2.2
+Version: 2.4
 Tested up to: 6.2
 Requires PHP: 7.0
 License: GNU General Public License v2 or later