gototop

/* SCROLL BUTTONS + PLASMA DARK MODE v5b */

/* === 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;
    }
}

/* === 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: #000 !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;
    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;
}