gototop

/* SCROLL BUTTONS + PLASMA DARK MODE v5c - PIXEL BULB */

/* === 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;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: background 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;
    overflow: hidden !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;
        top: 20px !important;
        right: 75px !important;
    }
}

/* === PIXEL BULB ICON === */
.bulb-pixel {
    display: block !important;
    width: 3px !important;
    height: 3px !important;
    position: absolute !important;
    top: 11px !important;
    left: 14px !important;
    background: transparent !important;
}

.bulb-off {
    box-shadow:
        6px 6px 0 0 #555,  9px 6px 0 0 #555,  12px 6px 0 0 #555,
        3px 9px 0 0 #555,   6px 9px 0 0 #666,   9px 9px 0 0 #666,  12px 9px 0 0 #555,  15px 9px 0 0 #555,
        3px 12px 0 0 #555,  6px 12px 0 0 #666,  9px 12px 0 0 #666, 12px 12px 0 0 #555, 15px 12px 0 0 #555,
        6px 15px 0 0 #555,  9px 15px 0 0 #555, 12px 15px 0 0 #555,
        9px 18px 0 0 #444,
        6px 21px 0 0 #444,  9px 21px 0 0 #555, 12px 21px 0 0 #444,
        9px 24px 0 0 #444 !important;
}

.bulb-on {
    box-shadow:
        9px 0px 0 0 #FFF5CC,
        3px 3px 0 0 #FFF5CC,                                        15px 3px 0 0 #FFF5CC,
        6px 6px 0 0 #FFD700,  9px 6px 0 0 #FFD700, 12px 6px 0 0 #FFD700,
        3px 9px 0 0 #FFD700,  6px 9px 0 0 #FFED4A,  9px 9px 0 0 #FFED4A, 12px 9px 0 0 #FFD700, 15px 9px 0 0 #FFD700,
        3px 12px 0 0 #FFD700, 6px 12px 0 0 #FFED4A, 9px 12px 0 0 #FFED4A,12px 12px 0 0 #FFD700,15px 12px 0 0 #FFD700,
        6px 15px 0 0 #FFD700, 9px 15px 0 0 #FFD700,12px 15px 0 0 #FFD700,
        9px 18px 0 0 #888,
        6px 21px 0 0 #888,   9px 21px 0 0 #999,   12px 21px 0 0 #888,
        9px 24px 0 0 #888 !important;
}

/* === PLASMA DARK MODE FILTER === */
html.plasma-dark {
    filter: invert(0.92) hue-rotate(180deg) sepia(0.15) saturate(1.2) brightness(0.85) !important;
    background-color: #fff !important;
    min-height: 100% !important;
}

html.plasma-dark body,
html.plasma-dark .wrap,
html.plasma-dark .w_body,
html.plasma-dark .b-body {
    background-color: #fff !important;
}

html.plasma-transition {
    transition: filter 0.6s ease !important;
}

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

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 = normal */
html.plasma-dark #taetDarkToggle {
    filter: invert(1) hue-rotate(180deg) !important;
    background: rgba(40, 30, 10, 0.7) !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;
}