gototop

/* SCROLL BUTTONS + PLASMA DARK MODE v5c - LUXO PIXEL LAMP */

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

/* === LUXO PIXEL LAMP ICON === */
.lamp-pixel {
    display: block !important;
    width: 3px !important;
    height: 3px !important;
    position: absolute !important;
    top: 9px !important;
    left: 11px !important;
    background: transparent !important;
}

/* AUS: Graue Schreibtischlampe (Luxo-Stil) */
.lamp-off {
    box-shadow:
        /* Schirm oben (schmal) */
        9px 0 0 0 #555, 12px 0 0 0 #666, 15px 0 0 0 #555,
        /* Schirm mitte */
        6px 3px 0 0 #555, 9px 3px 0 0 #666, 12px 3px 0 0 #666, 15px 3px 0 0 #666, 18px 3px 0 0 #555,
        /* Schirm unten (breit) */
        3px 6px 0 0 #555, 6px 6px 0 0 #666, 9px 6px 0 0 #666, 12px 6px 0 0 #666, 15px 6px 0 0 #666, 18px 6px 0 0 #666, 21px 6px 0 0 #555,
        /* Schirm Rand */
        0px 9px 0 0 #444, 3px 9px 0 0 #555, 6px 9px 0 0 #555, 9px 9px 0 0 #555, 12px 9px 0 0 #555, 15px 9px 0 0 #555, 18px 9px 0 0 #555, 21px 9px 0 0 #555, 24px 9px 0 0 #444,
        /* Hals oben (schraeg wie Luxo) */
        12px 12px 0 0 #555, 15px 12px 0 0 #555,
        /* Hals mitte */
        9px 15px 0 0 #555, 12px 15px 0 0 #555,
        /* Hals unten */
        9px 18px 0 0 #555, 12px 18px 0 0 #555,
        /* Stiel zum Fuss */
        12px 21px 0 0 #555,
        /* Fuss oben */
        3px 24px 0 0 #444, 6px 24px 0 0 #555, 9px 24px 0 0 #555, 12px 24px 0 0 #555, 15px 24px 0 0 #555, 18px 24px 0 0 #555, 21px 24px 0 0 #444,
        /* Fuss unten */
        6px 27px 0 0 #444, 9px 27px 0 0 #444, 12px 27px 0 0 #444, 15px 27px 0 0 #444, 18px 27px 0 0 #444 !important;
}

/* AN: Leuchtende Lampe mit goldgelbem Schirm + Lichtstrahlen */
.lamp-on {
    box-shadow:
        /* Schirm oben - gold */
        9px 0 0 0 #B8860B, 12px 0 0 0 #DAA520, 15px 0 0 0 #B8860B,
        /* Schirm mitte - heller */
        6px 3px 0 0 #DAA520, 9px 3px 0 0 #FFD700, 12px 3px 0 0 #FFD700, 15px 3px 0 0 #FFD700, 18px 3px 0 0 #DAA520,
        /* Schirm unten - am hellsten */
        3px 6px 0 0 #DAA520, 6px 6px 0 0 #FFD700, 9px 6px 0 0 #FFED4A, 12px 6px 0 0 #FFED4A, 15px 6px 0 0 #FFED4A, 18px 6px 0 0 #FFD700, 21px 6px 0 0 #DAA520,
        /* Schirm Rand - goldene Kante */
        0px 9px 0 0 #B8860B, 3px 9px 0 0 #DAA520, 6px 9px 0 0 #FFD700, 9px 9px 0 0 #FFED4A, 12px 9px 0 0 #FFED4A, 15px 9px 0 0 #FFED4A, 18px 9px 0 0 #FFD700, 21px 9px 0 0 #DAA520, 24px 9px 0 0 #B8860B,
        /* === LICHTSTRAHLEN unter dem Schirm === */
        3px 12px 0 0 #FFF8DC, 9px 12px 0 0 #FFF5CC, 21px 12px 0 0 #FFF8DC,
        0px 15px 0 0 #FFF5CC, 6px 15px 0 0 #FFF8DC, 18px 15px 0 0 #FFF8DC, 24px 15px 0 0 #FFF5CC,
        /* Hals oben */
        12px 12px 0 0 #777, 15px 12px 0 0 #777,
        /* Hals mitte */
        9px 15px 0 0 #777, 12px 15px 0 0 #777,
        /* Hals unten */
        9px 18px 0 0 #666, 12px 18px 0 0 #666,
        /* Stiel */
        12px 21px 0 0 #666,
        /* Fuss oben */
        3px 24px 0 0 #555, 6px 24px 0 0 #555, 9px 24px 0 0 #666, 12px 24px 0 0 #666, 15px 24px 0 0 #666, 18px 24px 0 0 #555, 21px 24px 0 0 #555,
        /* Fuss unten */
        6px 27px 0 0 #555, 9px 27px 0 0 #555, 12px 27px 0 0 #555, 15px 27px 0 0 #555, 18px 27px 0 0 #555 !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;
}