more robust toc scroll

* reorganized CSS into clear sections (Root, Base, Layout, Typography, Components, Utilities)
* removed redundant and duplicate rules (header, branding, search, media, etc.)
* consolidated repeated selectors into single sources of truth
* unified form styles (comments + CF7)
* cleaned up sidebar/widget styles and resolved conflicting rules
* fixed related posts grid issue (min-width: 0 for grid children)
* improved TOC structure and extracted shared calculations
* simplified social links and hover behavior
* removed unsafe global performance hint (will-change)
* added prefers-reduced-motion support for accessibility
* improved overall cascade predictability and reduced specificity conflicts

No visual changes intended (safe refactor).

assets/css/colors.css

@@ -1,12 +1,11 @@
 :root {
-  --site-title-color: #f7f7fa;
+  --light-color: #f7f7fa;
-  --primary-color: #f7f7fa;
+  --dark-color: #1e1f29;
-  --secondary-color: #f7f7fa;
+  --footer-color: #2f313d;
-  --light-color: #1e1f29;
+  --hover-color: #bd93f9;
-  --grey-color: #f7f7fa;
+  
-  --dark-color: #f7f7fa;
 }
 
 body {
   background-color: #1e1f29;
-}
+}

assets/css/fonts.css

@@ -59,8 +59,8 @@
    ========================= */
 
 :root {
-  --primary-font: 'Oswald', var(--zeitfresser-heading-fallback);
+  --primary-font: 'Oswald', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --secondary-font: 'Roboto', var(--zeitfresser-body-fallback);
+  --secondary-font: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 
   --site-identity-font-size: 40px;
 

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

@@ -0,0 +1,325 @@
+/**
+ * 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(
+            Math.max(article.scrollHeight, 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 tocBottomOffset = null;
+    var cachedSidebar = null;
+    var headings = getHeadings();
 
     function isDesktop() {
         return desktopQuery.matches;
@@ -26,14 +62,13 @@ 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;
-            return !!item.target;
+            });
-        });
     }
 
     function getArticleElement() {
@@ -56,6 +91,27 @@ document.addEventListener('DOMContentLoaded', function () {
         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');
@@ -64,36 +120,41 @@ document.addEventListener('DOMContentLoaded', function () {
             return;
         }
 
-        var titleRect = title.getBoundingClientRect();
         var scrollTop = window.scrollY || window.pageYOffset || 0;
+        var titleRect = title.getBoundingClientRect();
 
-        var contentColumn = document.querySelector(
+        // 🔥 bessere Content-Erkennung
-            '.inside-page .main-wrapper > *:first-child, ' +
+        var contentColumn =
-            '.inside-page .main-wrapper .primary-content, ' +
+            document.querySelector('.inside-page .main-wrapper > section') ||
-            '.inside-page .main-wrapper #primary, ' +
+            document.querySelector('#primary') ||
-            '.inside-page .main-wrapper main'
+            document.querySelector('.content-area') ||
-        );
+            title;
 
-        var sidebar = document.querySelector(
+        if (!contentColumn) return;
-            '.inside-page .main-wrapper > aside, ' +
-            '.inside-page .main-wrapper .widget-area, ' +
-            '.inside-page .main-wrapper #secondary, ' +
-            '.inside-page .main-wrapper .sidebar'
-        );
 
-        var contentRect = contentColumn ? contentColumn.getBoundingClientRect() : titleRect;
+        var sidebar = getRealSidebar();
+        var contentRect = contentColumn.getBoundingClientRect();
         var sidebarRect = sidebar ? sidebar.getBoundingClientRect() : null;
 
-        var mirroredGap = 56;
+        var gap = 48;
 
         if (sidebarRect) {
-            mirroredGap = Math.max(Math.round(sidebarRect.left - contentRect.right), 40);
+            gap = Math.abs(sidebarRect.left - contentRect.right);
+            gap = Math.max(32, Math.min(gap, 120));
         }
 
-        var maxWidth = Math.max(Math.round(contentRect.left - mirroredGap - 24), 180);
+        var maxWidth = Math.max(Math.round(contentRect.left - gap - 24), 180);
-        var tocWidth = Math.max(190, Math.min(250, maxWidth));
+        var tocWidth = Math.max(220, Math.min(260, maxWidth));
-        var tocLeft = Math.max(24, Math.round(contentRect.left - mirroredGap - tocWidth));
+        
-        var tocTop = Math.max(stickyTop, Math.round(titleRect.top + scrollTop + 14));
+        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');
@@ -107,7 +168,6 @@ document.addEventListener('DOMContentLoaded', function () {
         }
 
         var article = getArticleElement();
-
         if (!article) {
             toc.style.transform = '';
             return;
@@ -116,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;
 
@@ -126,7 +185,6 @@ document.addEventListener('DOMContentLoaded', function () {
         var tocBottom = tocTop + tocHeight;
 
         var offset = getTocBottomOffset();
-
         var maxBottom = articleBottom - offset;
         var overflow = Math.ceil(tocBottom - maxBottom);
 
@@ -152,31 +210,40 @@ document.addEventListener('DOMContentLoaded', function () {
         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 total = Math.max(
-        var progress = Math.min(Math.max((-rect.top / total) * 100, 0), 100);
+            Math.max(article.scrollHeight, article.offsetHeight) - window.innerHeight,
+            1
+        );
+
+        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);
     }
@@ -202,7 +269,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,
@@ -214,18 +284,26 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 
     if (nav) {
-        nav.addEventListener('wheel', function (event) {
+        nav.addEventListener(
-            var canScroll = nav.scrollHeight > nav.clientHeight;
+            'wheel',
-            if (!canScroll) return;
+            function (event) {
+                var canScroll = nav.scrollHeight > nav.clientHeight;
+                if (!canScroll) return;
 
-            var atTop = nav.scrollTop <= 0;
+                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.preventDefault();
+                    (event.deltaY < 0 && !atTop) ||
-                nav.scrollTop += event.deltaY;
+                    (event.deltaY > 0 && !atBottom)
-            }
+                ) {
-        }, { passive: false });
+                    event.preventDefault();
+                    nav.scrollTop += event.deltaY;
+                }
+            },
+            { passive: false }
+        );
     }
 
     // Initial run
@@ -240,4 +318,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
     window.addEventListener('scroll', onViewportChange, { passive: true });
     window.addEventListener('resize', onViewportChange, { passive: true });
+    window.addEventListener('load', function () {
+        syncPosition();
+    });
+    
 });

functions.php

@@ -698,3 +698,11 @@ function zeitfresser_responsive_image_sizes( $sizes, $size ) {
     return $sizes;
 }
 add_filter( 'wp_calculate_image_sizes', 'zeitfresser_responsive_image_sizes', 10, 2 );
+
+/**
+ * Delete Cookie Button
+ */
+ add_filter( 'comment_form_default_fields', function( $fields ) {
+    unset( $fields['cookies'] );
+    return $fields;
+});

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(
-        array(
+            $wp_customize,
-            'type'        => 'number',
+            'ztfr_header_heading',
-            'section'     => 'ztfr_general',
+            array(
-            'label'       => 'Excerpt Length (Post Cards)',
+                'label'    => 'Header',
-            'description' => 'Number of words shown in post previews.',
+                'section'  => 'ztfr_general',
-            'input_attrs' => array(
+                'priority' => 1,
-                'min'  => 5,
+            )
-                'max'  => 100,
-                'step' => 1,
-            ),
         )
     );
 
@@ -62,9 +74,10 @@ function zeitfresser_general_options( $wp_customize ) {
     $wp_customize->add_control(
         'show_hide_site_title',
         array(
-            'type'    => 'checkbox',
+            'type'     => 'checkbox',
-            'section' => 'ztfr_general',
+            'section'  => 'ztfr_general',
-            'label'   => 'Show Site Title',
+            'label'    => 'Show Site Title',
+            'priority' => 2,
         )
     );
 
@@ -82,9 +95,58 @@ function zeitfresser_general_options( $wp_customize ) {
     $wp_customize->add_control(
         'show_hide_site_tagline',
         array(
-            'type'    => 'checkbox',
+            'type'     => 'checkbox',
-            'section' => 'ztfr_general',
+            'section'  => 'ztfr_general',
-            'label'   => 'Show Tagline',
+            '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(
-        'ztfr_social_heading',
+        new ZTFR_Customize_Heading_Control(
-        array(
+            $wp_customize,
-            'section'     => 'ztfr_general',
+            'ztfr_social_heading',
-            'type'        => 'hidden',
+            array(
-            'description' => '<hr><strong>' . esc_html__( 'Social Links', 'zeitfresser' ) . '</strong>',
+                'label'    => esc_html__( 'Social Links', 'zeitfresser' ),
-            'priority'    => 30,
+                'section'  => 'ztfr_general',
+                '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(
-        'ztfr_toc_heading',
+        new ZTFR_Customize_Heading_Control(
-        array(
+            $wp_customize,
-            'section'     => 'ztfr_general',
+            'ztfr_toc_heading',
-            'type'        => 'hidden',
+            array(
-            'description' => '<hr><strong>' . esc_html__( 'Article TOC', 'zeitfresser' ) . '</strong>',
+                'label'    => esc_html__( 'TOC', 'zeitfresser' ),
-            'priority'    => 20,
+                'section'  => 'ztfr_general',
+                'priority' => 10,
+            )
         )
     );
 
     /**
-     * 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,

inc/zeitfresser-toc.php

@@ -9,6 +9,31 @@ if ( ! defined( 'ABSPATH' ) ) {
 	exit;
 }
 
+/**
+ * Enqueue TOC script when needed.
+ */
+function zeitfresser_enqueue_toc_assets() {
+
+    if ( ! is_singular( 'post' ) ) {
+        return;
+    }
+
+    if ( ! zeitfresser_has_floating_toc() ) {
+        return;
+    }
+
+    $asset = zeitfresser_asset_versioned('/js/toc.js');
+
+    wp_enqueue_script(
+        'zeitfresser-toc',
+        $asset['url'],
+        [],
+        $asset['version'],
+        true
+    );
+}
+add_action( 'wp_enqueue_scripts', 'zeitfresser_enqueue_toc_assets', 20 );
+
 /**
  * Return whether article TOC output is enabled.
  *

readme.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://ztfr.eu/matrix">
-    <img src="assets/community-badge.png" alt="Join Zeitfresser Matrix Community" height="70" />
+    <img src="screenshot.png" alt="Join Zeitfresser Matrix Community" height="70" />
   </a>
 </p>
 
@@ -130,9 +130,7 @@ Using caching, a CDN, and optimized hosting will further improve performance, es
 
 ## 🛠 Development & Support
 
-If you want to get support or participate in development, you can join the  
+If you want to get support or participate in development, you can join the <a href="https://ztfr.eu/matrix">Zeitfresser Matrix Community</a> or the <a href="https://look.ztfr.eu/#/#support:ztfr.eu">Development & Support Channel</a>.
-<a href="https://ztfr.eu/matrix">Zeitfresser Matrix Community</a> or the  
-<a href="https://look.ztfr.eu/#/#support:ztfr.eu">Development & Support Channel</a>.
 
 ## 📄 License
 

single.php

@@ -17,7 +17,9 @@ $show_hide_related_posts = get_theme_mod(
 <div id="primary" class="inside-page content-area">
     <div class="container">
         <div class="main-wrapper">
-
+            
+            <?php zeitfresser_render_floating_toc(); ?>
+            
             <section class="page-section full-width-view">
                 <div class="detail-content">