/* SCROLL BUTTONS + DARK MODE v4 */
/* === 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: 9999 !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;
}
}
/* === DARK MODE: Toggle Button Anpassung === */
body.dark-mode #taetDarkToggle {
background: rgba(255, 255, 255, 0.08) !important;
color: #FFD93D !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode #taetDarkToggle:hover {
background: rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 4px 16px rgba(255, 217, 61, 0.25) !important;
}
/* ============================================
DARK MODE CSS (in script-css fuer Reload)
Wird ZUSAETZLICH per JS injiziert fuer
sofortige Wirkung beim Live-Toggle
============================================ */
/* Transition */
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 */
body.dark-mode {
background-color: #0d0d1a !important;
color: #c8c8d8 !important;
}
/* Content */
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,
body.dark-mode #bodyContentWrap,
body.dark-mode .inner-content,
body.dark-mode #contentArea,
body.dark-mode #pageBar,
body.dark-mode .contentPadding {
background-color: #111122 !important;
color: #c8c8d8 !important;
}
/* Header & Nav */
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,
body.dark-mode #headerWrap,
body.dark-mode #pageBar,
body.dark-mode .pageBar {
background-color: #0a0a18 !important;
color: #a0a0b8 !important;
border-color: #1a1a30 !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,
body.dark-mode .col-xs-12 {
background-color: #0e0e1e !important;
color: #a8a8c0 !important;
border-color: #1a1a30 !important;
}
/* Footer */
body.dark-mode #footer,
body.dark-mode .mt-footer,
body.dark-mode #globalFooter,
body.dark-mode .footerArea {
background-color: #080814 !important;
color: #666680 !important;
border-color: #1a1a30 !important;
}
/* Links */
body.dark-mode a {
color: #5a9fd4 !important;
}
body.dark-mode a:visited {
color: #8a7ab0 !important;
}
body.dark-mode a:hover {
color: #7ab8f0 !important;
}
/* Headings */
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: #dcdce8 !important;
}
/* Tabellen */
body.dark-mode table {
border-color: #222240 !important;
}
body.dark-mode th {
background-color: #161630 !important;
color: #c0c0d4 !important;
border-color: #222240 !important;
}
body.dark-mode td {
background-color: #111126 !important;
color: #b8b8cc !important;
border-color: #1c1c38 !important;
}
body.dark-mode tr:nth-child(even) td {
background-color: #14142c !important;
}
body.dark-mode tr:hover td {
background-color: #1a1a38 !important;
}
/* Code & Pre */
body.dark-mode pre,
body.dark-mode code,
body.dark-mode .codeBlock {
background-color: #0a0a1a !important;
color: #a8d8a8 !important;
border-color: #222240 !important;
}
/* Inputs */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
background-color: #161630 !important;
color: #c8c8d8 !important;
border-color: #333358 !important;
}
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
border-color: #5a9fd4 !important;
box-shadow: 0 0 0 2px rgba(90, 159, 212, 0.2) !important;
}
/* Buttons */
body.dark-mode button:not(#taetDarkToggle),
body.dark-mode .button,
body.dark-mode input[type="submit"],
body.dark-mode input[type="button"] {
background-color: #1a1a38 !important;
color: #c8c8d8 !important;
border-color: #333358 !important;
}
/* HR */
body.dark-mode hr {
border-color: #222240 !important;
background-color: #222240 !important;
}
/* Blockquotes */
body.dark-mode blockquote {
background-color: #10102a !important;
border-left-color: #5a9fd4 !important;
color: #a0a0bc !important;
}
/* Breadcrumbs */
body.dark-mode .mt-breadcrumb,
body.dark-mode #breadcrumb,
body.dark-mode .breadcrumbs {
background-color: transparent !important;
color: #666688 !important;
}
/* Tags */
body.dark-mode .pageTags,
body.dark-mode .mt-page-tags {
background-color: transparent !important;
color: #666688 !important;
}
body.dark-mode .pageTags a {
color: #5a9fd4 !important;
}
/* Suche */
body.dark-mode #searchBox,
body.dark-mode .mt-search,
body.dark-mode #searchInput {
background-color: #161630 !important;
color: #c8c8d8 !important;
border-color: #333358 !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: #10102a !important;
color: #b0b0c8 !important;
border-color: #222240 !important;
}
/* Toolbar & Menus */
body.dark-mode .mt-page-toolbar,
body.dark-mode #pageToolbar {
background-color: #0e0e1e !important;
border-color: #1a1a30 !important;
}
body.dark-mode .mt-user-menu,
body.dark-mode #userMenu,
body.dark-mode .dropdown-menu {
background-color: #161630 !important;
border-color: #222240 !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}
/* Tabs */
body.dark-mode .mt-page-tab,
body.dark-mode .mt-page-tab-active,
body.dark-mode .ui-tabs-nav li {
background-color: #111126 !important;
border-color: #222240 !important;
}
body.dark-mode .mt-page-tab-active,
body.dark-mode .ui-tabs-active {
background-color: #1a1a38 !important;
}
/* Borders global */
body.dark-mode div,
body.dark-mode span,
body.dark-mode section,
body.dark-mode article,
body.dark-mode aside,
body.dark-mode nav,
body.dark-mode main {
border-color: #1a1a30 !important;
}
/* Inline weisse Hintergruende */
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background-color:#fff"],
body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background-color:#ffffff"],
body.dark-mode [style*="background-color: #ffffff"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background-color: rgb(255"],
body.dark-mode [style*="background-color:rgb(255"] {
background-color: #111122 !important;
}
/* Inline weisse Schrift-Farbe (auf dunklem Hintergrund schon ok) */
body.dark-mode [style*="color: black"],
body.dark-mode [style*="color:#000"],
body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color:rgb(0"] {
color: #c8c8d8 !important;
}
/* Bilder leicht abdunkeln */
body.dark-mode img:not(.scroll-btn):not(#taetDarkToggle) {
opacity: 0.85;
}
body.dark-mode img:not(.scroll-btn):not(#taetDarkToggle):hover {
opacity: 1;
}
/* Scroll Buttons invertieren */
body.dark-mode .scroll-btn {
filter: invert(0.85) !important;
}
/* Helikon Chat */
body.dark-mode #helikon-chat-container {
border-color: #222240 !important;
}
/* Scrollbar (Webkit) */
body.dark-mode ::-webkit-scrollbar {
width: 10px;
background-color: #0d0d1a;
}
body.dark-mode ::-webkit-scrollbar-thumb {
background-color: #2a2a48;
border-radius: 5px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
background-color: #3a3a58;
}
/* Wildcards */
body.dark-mode .bg-white,
body.dark-mode .background-white,
body.dark-mode .white-bg {
background-color: #111122 !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');
/* =========================================================
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 - mit try/catch fuer Tracking Prevention */
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) {
darkLog('Cookie lesen fehlgeschlagen');
}
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) {
darkLog('Cookie setzen fehlgeschlagen');
}
}
/* Dark Mode CSS nochmal per JS injizieren (Belt + Suspenders) */
function injectDarkCSS() {
if (document.getElementById('taet-dark-inject')) return;
var css = '' +
'body.dark-mode { background-color: #0d0d1a !important; color: #c8c8d8 !important; }' +
'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,' +
'body.dark-mode #bodyContentWrap, body.dark-mode .inner-content, body.dark-mode #contentArea,' +
'body.dark-mode #pageBar, body.dark-mode .contentPadding' +
'{ background-color: #111122 !important; color: #c8c8d8 !important; }' +
'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,' +
'body.dark-mode #headerWrap, body.dark-mode .pageBar' +
'{ background-color: #0a0a18 !important; color: #a0a0b8 !important; border-color: #1a1a30 !important; }' +
'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,' +
'body.dark-mode .col-xs-12' +
'{ background-color: #0e0e1e !important; color: #a8a8c0 !important; border-color: #1a1a30 !important; }' +
'body.dark-mode #footer, body.dark-mode .mt-footer, body.dark-mode #globalFooter,' +
'body.dark-mode .footerArea { background-color: #080814 !important; color: #666680 !important; }' +
'body.dark-mode a { color: #5a9fd4 !important; }' +
'body.dark-mode a:visited { color: #8a7ab0 !important; }' +
'body.dark-mode a:hover { color: #7ab8f0 !important; }' +
'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: #dcdce8 !important; }' +
'body.dark-mode table { border-color: #222240 !important; }' +
'body.dark-mode th { background-color: #161630 !important; color: #c0c0d4 !important; border-color: #222240 !important; }' +
'body.dark-mode td { background-color: #111126 !important; color: #b8b8cc !important; border-color: #1c1c38 !important; }' +
'body.dark-mode tr:nth-child(even) td { background-color: #14142c !important; }' +
'body.dark-mode tr:hover td { background-color: #1a1a38 !important; }' +
'body.dark-mode pre, body.dark-mode code, body.dark-mode .codeBlock' +
'{ background-color: #0a0a1a !important; color: #a8d8a8 !important; border-color: #222240 !important; }' +
'body.dark-mode input, body.dark-mode textarea, body.dark-mode select' +
'{ background-color: #161630 !important; color: #c8c8d8 !important; border-color: #333358 !important; }' +
'body.dark-mode button:not(#taetDarkToggle), body.dark-mode .button,' +
'body.dark-mode input[type="submit"], body.dark-mode input[type="button"]' +
'{ background-color: #1a1a38 !important; color: #c8c8d8 !important; border-color: #333358 !important; }' +
'body.dark-mode hr { border-color: #222240 !important; background-color: #222240 !important; }' +
'body.dark-mode blockquote { background-color: #10102a !important; border-left-color: #5a9fd4 !important; color: #a0a0bc !important; }' +
'body.dark-mode .pageTags a { color: #5a9fd4 !important; }' +
'body.dark-mode .mt-page-toolbar, body.dark-mode #pageToolbar { background-color: #0e0e1e !important; }' +
'body.dark-mode .dropdown-menu { background-color: #161630 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.6) !important; }' +
'body.dark-mode div, body.dark-mode span, body.dark-mode section,' +
'body.dark-mode article, body.dark-mode aside, body.dark-mode nav, body.dark-mode main' +
'{ border-color: #1a1a30 !important; }' +
'body.dark-mode [style*="background-color: white"],' +
'body.dark-mode [style*="background-color:#fff"],' +
'body.dark-mode [style*="background-color: #fff"],' +
'body.dark-mode [style*="background-color:#ffffff"],' +
'body.dark-mode [style*="background-color: #ffffff"],' +
'body.dark-mode [style*="background: white"],' +
'body.dark-mode [style*="background:#fff"],' +
'body.dark-mode [style*="background: #fff"],' +
'body.dark-mode [style*="background-color: rgb(255"],' +
'body.dark-mode [style*="background-color:rgb(255"] { background-color: #111122 !important; }' +
'body.dark-mode [style*="color: black"],' +
'body.dark-mode [style*="color:#000"],' +
'body.dark-mode [style*="color: #000"],' +
'body.dark-mode [style*="color:rgb(0"] { color: #c8c8d8 !important; }' +
'body.dark-mode img:not(.scroll-btn) { opacity: 0.85; }' +
'body.dark-mode img:not(.scroll-btn):hover { opacity: 1; }' +
'body.dark-mode .scroll-btn { filter: invert(0.85) !important; }' +
'body.dark-mode #taetDarkToggle { background: rgba(255,255,255,0.08) !important; color: #FFD93D !important; }' +
'body.dark-mode #helikon-chat-container { border-color: #222240 !important; }' +
'body.dark-mode ::-webkit-scrollbar { width: 10px; background-color: #0d0d1a; }' +
'body.dark-mode ::-webkit-scrollbar-thumb { background-color: #2a2a48; border-radius: 5px; }';
var tag = document.createElement('style');
tag.type = 'text/css';
tag.id = 'taet-dark-inject';
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('CSS injiziert (' + css.length + ' chars)');
}
/* Toggle Button erstellen */
var toggleBtn = document.createElement('button');
toggleBtn.id = 'taetDarkToggle';
toggleBtn.title = 'Nachtmodus';
toggleBtn.textContent = '\uD83C\uDF19';
document.body.appendChild(toggleBtn);
darkLog('Toggle Button erstellt');
/* CSS sofort injizieren */
injectDarkCSS();
/* Dark Mode aktivieren */
function enableDark(animate) {
var cn = document.body.className || '';
if (animate && cn.indexOf('dark-mode-transition') === -1) {
document.body.className = cn + ' dark-mode-transition';
}
setTimeout(function() {
var cn2 = document.body.className || '';
if (cn2.indexOf('dark-mode') === -1) {
document.body.className = cn2 + ' dark-mode';
}
toggleBtn.textContent = '\u2600\uFE0F';
toggleBtn.title = 'Tagmodus';
isDark = true;
setCookie(COOKIE_NAME, '1', COOKIE_DAYS);
darkLog('Aktiviert');
if (animate) {
setTimeout(function() {
document.body.className = (document.body.className || '').replace(/\s*dark-mode-transition/g, '');
}, 600);
}
}, animate ? 20 : 0);
}
/* Dark Mode deaktivieren */
function disableDark(animate) {
var cn = document.body.className || '';
if (animate && cn.indexOf('dark-mode-transition') === -1) {
document.body.className = cn + ' dark-mode-transition';
}
setTimeout(function() {
/* dark-mode-transition zuerst entfernen, dann dark-mode */
var cn2 = (document.body.className || '');
cn2 = cn2.replace(/\s*dark-mode-transition/g, '');
cn2 = cn2.replace(/\s*dark-mode/g, '');
document.body.className = cn2;
toggleBtn.textContent = '\uD83C\uDF19';
toggleBtn.title = 'Nachtmodus';
isDark = false;
setCookie(COOKIE_NAME, '0', COOKIE_DAYS);
darkLog('Deaktiviert');
}, animate ? 20 : 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');
})();