gototop

/* SCROLL BUTTONS + DARK MODE TOGGLE */

/* === SCROLL BUTTONS === */
.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 === */
.darkmode-toggle {
    position: fixed !important;
    top: 16px !important;
    left: 16px !important;
    width: 44px !important;
    height: 44px !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 99999 !important;
    font-size: 22px !important;
    line-height: 44px !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;
}
.darkmode-toggle: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;
}
.darkmode-toggle:active {
    transform: scale(0.95) !important;
}

/* Dark Mode: Toggle Button Anpassung */
body.dark-mode .darkmode-toggle {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFD93D !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .darkmode-toggle:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 4px 16px rgba(255, 217, 61, 0.2) !important;
}

@media (max-width: 768px) {
    .darkmode-toggle {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
        line-height: 40px !important;
        top: 12px !important;
        left: 12px !important;
    }
}

/* ============================================
   DARK MODE: Globale Overrides
   ============================================ */

/* Sanfter Uebergang auf ALLEN Elementen */
body.dark-mode-transition,
body.dark-mode-transition *,
body.dark-mode-transition *::before,
body.dark-mode-transition *::after {
    transition: background-color 0.5s ease,
                color 0.5s ease,
                border-color 0.5s ease,
                box-shadow 0.5s ease !important;
}

/* --- Body & Grundfarben --- */
body.dark-mode {
    background-color: #1a1a2e !important;
    color: #d4d4dc !important;
}

/* --- Haupt-Content-Bereich --- */
body.dark-mode #pageContent,
body.dark-mode .wiki-main-content,
body.dark-mode #topic-default,
body.dark-mode .mt-content-container,
body.dark-mode #bodyContent,
body.dark-mode #content,
body.dark-mode .pageContent,
body.dark-mode #pageText,
body.dark-mode .mt-page-content {
    background-color: #1e1e34 !important;
    color: #d4d4dc !important;
}

/* --- Header & Navigation --- */
body.dark-mode #header,
body.dark-mode .mt-header,
body.dark-mode #globalHeader,
body.dark-mode .navbar,
body.dark-mode .nav-bar,
body.dark-mode #topnav,
body.dark-mode .mt-site-nav,
body.dark-mode #siteNav,
body.dark-mode .site-header {
    background-color: #16162a !important;
    color: #c0c0d0 !important;
    border-color: #2a2a45 !important;
}

/* --- Sidebar --- */
body.dark-mode #sidebar,
body.dark-mode .mt-sidebar,
body.dark-mode #pageLeftBar,
body.dark-mode .sidebarBox,
body.dark-mode .mt-page-nav,
body.dark-mode #pageToc {
    background-color: #1a1a30 !important;
    color: #b8b8cc !important;
    border-color: #2a2a45 !important;
}

/* --- Footer --- */
body.dark-mode #footer,
body.dark-mode .mt-footer,
body.dark-mode #globalFooter {
    background-color: #141428 !important;
    color: #8888a0 !important;
    border-color: #2a2a45 !important;
}

/* --- Links --- */
body.dark-mode a {
    color: #6db3f2 !important;
}
body.dark-mode a:visited {
    color: #9b8ec4 !important;
}
body.dark-mode a:hover {
    color: #8dc9ff !important;
}

/* --- Ueberschriften --- */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #e8e8f0 !important;
}

/* --- Tabellen --- */
body.dark-mode table {
    border-color: #333355 !important;
}
body.dark-mode th {
    background-color: #252545 !important;
    color: #d0d0e0 !important;
    border-color: #333355 !important;
}
body.dark-mode td {
    background-color: #1e1e36 !important;
    color: #c8c8d8 !important;
    border-color: #2a2a48 !important;
}
body.dark-mode tr:nth-child(even) td {
    background-color: #222240 !important;
}
body.dark-mode tr:hover td {
    background-color: #2a2a50 !important;
}

/* --- Code & Pre --- */
body.dark-mode pre,
body.dark-mode code,
body.dark-mode .codeBlock {
    background-color: #12122a !important;
    color: #c8d8c8 !important;
    border-color: #333355 !important;
}

/* --- Inputs & Formulare --- */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: #222240 !important;
    color: #d4d4dc !important;
    border-color: #444466 !important;
}
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: #6db3f2 !important;
    box-shadow: 0 0 0 2px rgba(109, 179, 242, 0.2) !important;
}

/* --- Buttons --- */
body.dark-mode button,
body.dark-mode .button,
body.dark-mode input[type="submit"],
body.dark-mode input[type="button"] {
    background-color: #2a2a50 !important;
    color: #d4d4dc !important;
    border-color: #444466 !important;
}

/* --- Divider & HRs --- */
body.dark-mode hr {
    border-color: #333355 !important;
    background-color: #333355 !important;
}

/* --- Blockquotes --- */
body.dark-mode blockquote {
    background-color: #1e1e38 !important;
    border-left-color: #6db3f2 !important;
    color: #b8b8d0 !important;
}

/* --- Breadcrumbs --- */
body.dark-mode .mt-breadcrumb,
body.dark-mode #breadcrumb,
body.dark-mode .breadcrumbs {
    background-color: transparent !important;
    color: #8888a8 !important;
}

/* --- Tags --- */
body.dark-mode .pageTags,
body.dark-mode .mt-page-tags {
    background-color: transparent !important;
    color: #8888a8 !important;
}
body.dark-mode .pageTags a {
    color: #6db3f2 !important;
}

/* --- Suche --- */
body.dark-mode #searchBox,
body.dark-mode .mt-search,
body.dark-mode #searchInput {
    background-color: #222240 !important;
    color: #d4d4dc !important;
    border-color: #444466 !important;
}

/* --- Panels & Boxen --- */
body.dark-mode .panel,
body.dark-mode .box,
body.dark-mode .infobox,
body.dark-mode .callout,
body.dark-mode .mt-message,
body.dark-mode .notice {
    background-color: #1e1e38 !important;
    color: #c8c8d8 !important;
    border-color: #333355 !important;
}

/* --- Scrollbar (Webkit) --- */
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    background-color: #1a1a2e;
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background-color: #3a3a5a;
    border-radius: 5px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: #4a4a6a;
}

/* --- Bilder: leicht abdunkeln damit sie nicht blenden --- */
body.dark-mode img {
    opacity: 0.88;
}
body.dark-mode img:hover {
    opacity: 1;
}

/* --- Scroll Buttons im Dark Mode --- */
body.dark-mode .scroll-btn {
    filter: invert(0.85) !important;
}

/* --- Diverse MindTouch-spezifische Elemente --- */
body.dark-mode .mt-page-toolbar,
body.dark-mode #pageToolbar {
    background-color: #1a1a30 !important;
    border-color: #2a2a45 !important;
}

body.dark-mode .mt-user-menu,
body.dark-mode #userMenu,
body.dark-mode .dropdown-menu {
    background-color: #222240 !important;
    border-color: #333355 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .mt-page-tab,
body.dark-mode .mt-page-tab-active,
body.dark-mode .ui-tabs-nav li {
    background-color: #1e1e36 !important;
    border-color: #333355 !important;
}

body.dark-mode .mt-page-tab-active,
body.dark-mode .ui-tabs-active {
    background-color: #2a2a50 !important;
}

/* --- Helikon Chat im Dark Mode --- */
body.dark-mode #helikon-chat-container {
    border-color: #333355 !important;
}

/* --- Catch-All fuer weisse Hintergruende --- */
body.dark-mode div[style*="background-color: white"],
body.dark-mode div[style*="background-color:#fff"],
body.dark-mode div[style*="background-color: #fff"],
body.dark-mode div[style*="background-color:#ffffff"],
body.dark-mode div[style*="background-color: #ffffff"],
body.dark-mode div[style*="background: white"],
body.dark-mode div[style*="background:#fff"],
body.dark-mode div[style*="background: #fff"] {
    background-color: #1e1e34 !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 ===== */
    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');

    /* ===== DARK MODE ===== */
    var DARK_PREFIX = '[DarkMode] ';
    var COOKIE_NAME = 'taet_darkmode';
    var COOKIE_DAYS = 365;
    var isDark = false;

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

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

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

    /* Toggle Button erstellen */
    var toggleBtn = document.createElement('button');
    toggleBtn.className = 'darkmode-toggle';
    toggleBtn.title = 'Nachtmodus umschalten';
    toggleBtn.textContent = '\uD83C\uDF19';
    document.body.appendChild(toggleBtn);

    /* Dark Mode aktivieren */
    function enableDark(animate) {
        if (animate) {
            document.body.className = (document.body.className || '') + ' dark-mode-transition';
        }
        /* Kurzer Timeout damit transition-class greift */
        setTimeout(function() {
            var cn = document.body.className || '';
            if (cn.indexOf('dark-mode') === -1 || cn.indexOf('dark-mode-transition') !== -1) {
                /* dark-mode hinzufuegen falls nicht vorhanden */
                if (cn.indexOf('dark-mode') === -1) {
                    document.body.className = cn + ' dark-mode';
                }
            }
            toggleBtn.textContent = '\u2600\uFE0F';
            toggleBtn.title = 'Tagmodus umschalten';
            isDark = true;
            setCookie(COOKIE_NAME, '1', COOKIE_DAYS);
            darkLog('Aktiviert');

            /* Transition-Klasse nach Animation entfernen */
            if (animate) {
                setTimeout(function() {
                    document.body.className = document.body.className.replace(/\s*dark-mode-transition/g, '');
                }, 600);
            }
        }, animate ? 10 : 0);
    }

    /* Dark Mode deaktivieren */
    function disableDark(animate) {
        if (animate) {
            var cn = document.body.className || '';
            if (cn.indexOf('dark-mode-transition') === -1) {
                document.body.className = cn + ' dark-mode-transition';
            }
        }
        setTimeout(function() {
            document.body.className = (document.body.className || '')
                .replace(/\s*dark-mode-transition/g, '')
                .replace(/\s*dark-mode/g, '');
            if (animate) {
                document.body.className = (document.body.className || '') + ' dark-mode-transition';
                setTimeout(function() {
                    document.body.className = (document.body.className || '').replace(/\s*dark-mode-transition/g, '');
                }, 600);
            }
            toggleBtn.textContent = '\uD83C\uDF19';
            toggleBtn.title = 'Nachtmodus umschalten';
            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 beim Seitenstart) */
    var saved = getCookie(COOKIE_NAME);
    if (saved === '1') {
        enableDark(false);
        darkLog('Aus Cookie geladen');
    } else {
        darkLog('Tagmodus (Standard)');
    }

    darkLog('Init fertig');
})();