gototop

/* SCROLL BUTTONS + PLASMA DARK MODE v5 */

/* === SCROLL BUTTONS (Original) === */
.scroll-btn {
    position: fixed !important;
    right: 30px !important;
    width: 50px !important;
    height: 50px !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
    pointer-events: none !important;
}
.scroll-btn.visible {
    opacity: 0.8 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.scroll-btn:hover {
    opacity: 1 !important;
}
.scroll-to-top {
    bottom: 30px !important;
}
.scroll-to-bottom {
    top: 30px !important;
    transform: rotate(180deg) !important;
}
@media (max-width: 768px) {
    .scroll-btn {
        width: 45px !important;
        height: 45px !important;
    }
    .scroll-to-top {
        bottom: 20px !important;
        right: 20px !important;
    }
    .scroll-to-bottom {
        top: 20px !important;
        right: 20px !important;
    }
}

/* === DARK MODE TOGGLE BUTTON === */
#taetDarkToggle {
    position: fixed !important;
    top: 30px !important;
    right: 90px !important;
    width: 50px !important;
    height: 50px !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 2147483647 !important;
    font-size: 24px !important;
    line-height: 50px !important;
    text-align: center !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.06) !important;
    color: #555 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    opacity: 0.8 !important;
}
#taetDarkToggle:hover {
    background: rgba(0, 0, 0, 0.12) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    opacity: 1 !important;
}
#taetDarkToggle:active {
    transform: scale(0.95) !important;
}
@media (max-width: 768px) {
    #taetDarkToggle {
        width: 45px !important;
        height: 45px !important;
        font-size: 22px !important;
        line-height: 45px !important;
        top: 20px !important;
        right: 75px !important;
    }
}

(function () {
    if (window._scrollBtnsInit) {
        if (window.console) console.log('[ScrollBtns] SKIP: Bereits initialisiert (Singleton)');
        return;
    }
    window._scrollBtnsInit = true;

    var PREFIX = '[ScrollBtns] ';
    var THRESHOLD = 1000;
    var timer = null;
    var isVisible = false;

    function log(msg) {
        if (window.console && console.log) {
            console.log(PREFIX + msg);
        }
    }

    /* ===== SCROLL BUTTONS (Original, unangetastet) ===== */
    var topBtn = document.getElementById('scrollTopBtn');
    var bottomBtn = document.getElementById('scrollBottomBtn');

    if (!topBtn || !bottomBtn) {
        log('Buttons nicht gefunden!');
        return;
    }

    log('Init gestartet...');

    document.body.appendChild(topBtn);
    document.body.appendChild(bottomBtn);
    log('Buttons an body verschoben (Stacking Fix)');

    function goToTop(e) {
        if (e && e.preventDefault) e.preventDefault();
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
        log('Scroll to Top');
    }

    function goToBottom(e) {
        if (e && e.preventDefault) e.preventDefault();
        var maxScroll = Math.max(
            document.body.scrollHeight || 0,
            document.documentElement.scrollHeight || 0
        );
        document.body.scrollTop = maxScroll;
        document.documentElement.scrollTop = maxScroll;
        log('Scroll to Bottom: ' + maxScroll + 'px');
    }

    function updateVisibility() {
        var scrollTop = window.pageYOffset ||
                        document.documentElement.scrollTop ||
                        document.body.scrollTop || 0;

        if (scrollTop > THRESHOLD && !isVisible) {
            topBtn.className = 'scroll-btn scroll-to-top visible';
            bottomBtn.className = 'scroll-btn scroll-to-bottom visible';
            isVisible = true;
            log('Buttons sichtbar (Scroll > ' + THRESHOLD + 'px)');
        } else if (scrollTop <= THRESHOLD && isVisible) {
            topBtn.className = 'scroll-btn scroll-to-top';
            bottomBtn.className = 'scroll-btn scroll-to-bottom';
            isVisible = false;
        }
    }

    if (topBtn.addEventListener) {
        topBtn.addEventListener('click', goToTop, false);
        bottomBtn.addEventListener('click', goToBottom, false);
    } else if (topBtn.attachEvent) {
        topBtn.attachEvent('onclick', goToTop);
        bottomBtn.attachEvent('onclick', goToBottom);
    }

    if (window.addEventListener) {
        window.addEventListener('scroll', function () {
            clearTimeout(timer);
            timer = setTimeout(updateVisibility, 80);
        }, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', function () {
            clearTimeout(timer);
            timer = setTimeout(updateVisibility, 80);
        });
    }

    updateVisibility();
    log('ScrollBtns fertig! Threshold: ' + THRESHOLD + 'px');

    /* =========================================================
       PLASMA DARK MODE v5
       Wie Browser-Extensions: CSS filter auf <html>
       Invertiert ALLES sofort, kein Override-Kampf mit MindTouch
       Amber/Plasma Tint fuer warmen Monitor-Look
       ========================================================= */
    var DARK_PREFIX = '[DarkMode] ';
    var COOKIE_NAME = 'taet_darkmode';
    var COOKIE_DAYS = 365;
    var isDark = false;
    var htmlEl = document.documentElement || document.getElementsByTagName('html')[0];

    function darkLog(msg) {
        if (window.console && console.log) {
            console.log(DARK_PREFIX + msg);
        }
    }

    /* Cookie lesen */
    function getCookie(name) {
        try {
            var cookies = document.cookie ? document.cookie.split(';') : [];
            for (var i = 0; i < cookies.length; i++) {
                var co = cookies[i];
                while (co.charAt(0) === ' ') co = co.substring(1);
                if (co.indexOf(name + '=') === 0) {
                    return co.substring(name.length + 1);
                }
            }
        } catch(e) { /* Tracking Prevention */ }
        return '';
    }

    /* Cookie setzen */
    function setCookie(name, value, days) {
        try {
            var d = new Date();
            d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
            document.cookie = name + '=' + value + ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax';
        } catch(e) { /* Tracking Prevention */ }
    }

    /* CSS injizieren */
    function injectCSS() {
        if (document.getElementById('taet-plasma-css')) return;

        var css = '' +
        /* === PLASMA FILTER: Invertiert + Amber Tint === */
        'html.plasma-dark {' +
        '  filter: invert(0.92) hue-rotate(180deg) sepia(0.15) saturate(1.2) brightness(0.85) !important;' +
        '  background-color: #000 !important;' +
        '}' +

        /* Sanfter Uebergang */
        'html.plasma-transition {' +
        '  transition: filter 0.6s ease !important;' +
        '}' +

        /* Bilder, Videos, Canvas: Doppelt invertieren = normal aussehen */
        'html.plasma-dark img,' +
        'html.plasma-dark video,' +
        'html.plasma-dark canvas,' +
        'html.plasma-dark svg image,' +
        'html.plasma-dark [style*="background-image"],' +
        'html.plasma-dark .scroll-btn,' +
        'html.plasma-dark iframe {' +
        '  filter: invert(1) hue-rotate(180deg) sepia(0.15) !important;' +
        '}' +

        /* Bilder etwas abdunkeln damit nicht zu grell */
        'html.plasma-dark img,' +
        'html.plasma-dark video {' +
        '  opacity: 0.88 !important;' +
        '}' +
        'html.plasma-dark img:hover,' +
        'html.plasma-dark video:hover {' +
        '  opacity: 1 !important;' +
        '}' +

        /* Toggle Button: Doppelt invertieren damit er normal bleibt */
        'html.plasma-dark #taetDarkToggle {' +
        '  filter: invert(1) hue-rotate(180deg) !important;' +
        '  background: rgba(40, 30, 10, 0.7) !important;' +
        '  color: #FFD93D !important;' +
        '  box-shadow: 0 2px 12px rgba(255, 180, 0, 0.3) !important;' +
        '  opacity: 1 !important;' +
        '}' +
        'html.plasma-dark #taetDarkToggle:hover {' +
        '  background: rgba(60, 45, 15, 0.85) !important;' +
        '  box-shadow: 0 4px 20px rgba(255, 180, 0, 0.5) !important;' +
        '}' +

        /* Scrollbar dunkel */
        'html.plasma-dark ::-webkit-scrollbar {' +
        '  background-color: #111 !important;' +
        '}' +
        'html.plasma-dark ::-webkit-scrollbar-thumb {' +
        '  background-color: #444 !important;' +
        '  border-radius: 5px !important;' +
        '}' +
        'html.plasma-dark ::-webkit-scrollbar-thumb:hover {' +
        '  background-color: #666 !important;' +
        '}' +

        /* Helikon Chat Buddy: re-invertieren */
        'html.plasma-dark #helikon-chat-container img,' +
        'html.plasma-dark .buddy-gif {' +
        '  filter: invert(1) hue-rotate(180deg) !important;' +
        '  opacity: 1 !important;' +
        '}';

        var tag = document.createElement('style');
        tag.type = 'text/css';
        tag.id = 'taet-plasma-css';
        if (tag.styleSheet) {
            tag.styleSheet.cssText = css;
        } else {
            tag.appendChild(document.createTextNode(css));
        }
        var head = document.head || document.getElementsByTagName('head')[0];
        head.appendChild(tag);
        darkLog('Plasma CSS injiziert (' + css.length + ' chars)');
    }

    /* Toggle Button erstellen */
    var toggleBtn = document.createElement('button');
    toggleBtn.id = 'taetDarkToggle';
    toggleBtn.title = 'Plasma Nachtmodus';
    toggleBtn.textContent = '\uD83C\uDF19';
    document.body.appendChild(toggleBtn);
    darkLog('Toggle Button erstellt');

    /* CSS sofort injizieren */
    injectCSS();

    /* Plasma Dark Mode aktivieren */
    function enableDark(animate) {
        if (animate) {
            htmlEl.className = (htmlEl.className || '') + ' plasma-transition';
        }
        setTimeout(function() {
            var cn = htmlEl.className || '';
            if (cn.indexOf('plasma-dark') === -1) {
                htmlEl.className = cn + ' plasma-dark';
            }
            toggleBtn.textContent = '\u2600\uFE0F';
            toggleBtn.title = 'Tagmodus';
            isDark = true;
            setCookie(COOKIE_NAME, '1', COOKIE_DAYS);
            darkLog('Aktiviert (Plasma)');

            if (animate) {
                setTimeout(function() {
                    htmlEl.className = (htmlEl.className || '').replace(/\s*plasma-transition/g, '');
                }, 700);
            }
        }, animate ? 10 : 0);
    }

    /* Plasma Dark Mode deaktivieren */
    function disableDark(animate) {
        if (animate) {
            var cn = htmlEl.className || '';
            if (cn.indexOf('plasma-transition') === -1) {
                htmlEl.className = cn + ' plasma-transition';
            }
        }
        setTimeout(function() {
            htmlEl.className = (htmlEl.className || '')
                .replace(/\s*plasma-dark/g, '')
                .replace(/\s*plasma-transition/g, '');
            if (animate) {
                /* Transition class kurz dran lassen fuer Rueckweg */
                htmlEl.className = (htmlEl.className || '') + ' plasma-transition';
                setTimeout(function() {
                    htmlEl.className = (htmlEl.className || '').replace(/\s*plasma-transition/g, '');
                }, 700);
            }
            toggleBtn.textContent = '\uD83C\uDF19';
            toggleBtn.title = 'Plasma Nachtmodus';
            isDark = false;
            setCookie(COOKIE_NAME, '0', COOKIE_DAYS);
            darkLog('Deaktiviert');
        }, animate ? 10 : 0);
    }

    /* Toggle */
    function toggleDark() {
        if (isDark) {
            disableDark(true);
        } else {
            enableDark(true);
        }
    }

    /* Click Event */
    if (toggleBtn.addEventListener) {
        toggleBtn.addEventListener('click', toggleDark, false);
    } else if (toggleBtn.attachEvent) {
        toggleBtn.attachEvent('onclick', toggleDark);
    }

    /* Gespeicherten Zustand laden (OHNE Animation) */
    var saved = getCookie(COOKIE_NAME);
    if (saved === '1') {
        enableDark(false);
        darkLog('Aus Cookie geladen');
    } else {
        darkLog('Tagmodus (Standard)');
    }

    darkLog('Init fertig');
})();
</html>