helikon

/* SCROLL BUTTONS + PLASMA DARK MODE v5c - BANKER'S LAMP */

/* === 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 - Kein Kreis, nur Icon === */
#taetDarkToggle {
    position: fixed !important;
    top: 30px !important;
    right: 90px !important;
    width: 50px !important;
    height: 50px !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    z-index: 2147483647 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    opacity: 0.85 !important;
}
#taetDarkToggle:hover {
    transform: scale(1.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;
    }
}

/* === BANKER'S LAMP PIXEL ART (3px Raster) === */
.lamp-pixel {
    display: block !important;
    width: 3px !important;
    height: 3px !important;
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    background: transparent !important;
}

/* AUS: Graue Bankerlampe */
.lamp-off {
    box-shadow:
        /* Schirm oben schmal (5 breit) */
        12px 0 0 0 #666, 15px 0 0 0 #777, 18px 0 0 0 #777, 21px 0 0 0 #777, 24px 0 0 0 #666,
        /* Schirm (7 breit) */
        9px 3px 0 0 #555, 12px 3px 0 0 #666, 15px 3px 0 0 #777, 18px 3px 0 0 #777, 21px 3px 0 0 #777, 24px 3px 0 0 #666, 27px 3px 0 0 #555,
        /* Schirm breiter (9 breit) */
        6px 6px 0 0 #555, 9px 6px 0 0 #666, 12px 6px 0 0 #777, 15px 6px 0 0 #777, 18px 6px 0 0 #777, 21px 6px 0 0 #777, 24px 6px 0 0 #666, 27px 6px 0 0 #555, 30px 6px 0 0 #444,
        /* Schirm (11 breit) */
        3px 9px 0 0 #444, 6px 9px 0 0 #555, 9px 9px 0 0 #666, 12px 9px 0 0 #777, 15px 9px 0 0 #777, 18px 9px 0 0 #777, 21px 9px 0 0 #777, 24px 9px 0 0 #666, 27px 9px 0 0 #555, 30px 9px 0 0 #444, 33px 9px 0 0 #444,
        /* Schirm Unterkante (13 breit) */
        0px 12px 0 0 #444, 3px 12px 0 0 #555, 6px 12px 0 0 #555, 9px 12px 0 0 #666, 12px 12px 0 0 #666, 15px 12px 0 0 #666, 18px 12px 0 0 #666, 21px 12px 0 0 #666, 24px 12px 0 0 #666, 27px 12px 0 0 #555, 30px 12px 0 0 #555, 33px 12px 0 0 #444, 36px 12px 0 0 #444,
        /* Hals (3 breit) */
        15px 15px 0 0 #666, 18px 15px 0 0 #666, 21px 15px 0 0 #666,
        /* Stiel (3 breit) */
        15px 18px 0 0 #555, 18px 18px 0 0 #666, 21px 18px 0 0 #555,
        /* Stiel duenn (2 breit) */
        15px 21px 0 0 #555, 18px 21px 0 0 #555,
        15px 24px 0 0 #555, 18px 24px 0 0 #555,
        /* Gelenk (3 breit) */
        15px 27px 0 0 #666, 18px 27px 0 0 #666, 21px 27px 0 0 #666,
        /* Sockel oben (9 breit) */
        6px 30px 0 0 #555, 9px 30px 0 0 #555, 12px 30px 0 0 #666, 15px 30px 0 0 #666, 18px 30px 0 0 #666, 21px 30px 0 0 #666, 24px 30px 0 0 #666, 27px 30px 0 0 #555, 30px 30px 0 0 #555,
        /* Sockel mitte (11 breit) */
        3px 33px 0 0 #444, 6px 33px 0 0 #555, 9px 33px 0 0 #555, 12px 33px 0 0 #666, 15px 33px 0 0 #666, 18px 33px 0 0 #666, 21px 33px 0 0 #666, 24px 33px 0 0 #666, 27px 33px 0 0 #555, 30px 33px 0 0 #555, 33px 33px 0 0 #444,
        /* Sockel unten (9 breit) */
        6px 36px 0 0 #444, 9px 36px 0 0 #555, 12px 36px 0 0 #555, 15px 36px 0 0 #555, 18px 36px 0 0 #555, 21px 36px 0 0 #555, 24px 36px 0 0 #555, 27px 36px 0 0 #555, 30px 36px 0 0 #444 !important;
}

/* AN: Gruener Schirm leuchtet + warme Lichtstrahlen */
.lamp-on {
    box-shadow:
        /* Schirm oben - dunkelgruen (5 breit) */
        12px 0 0 0 #1B5E20, 15px 0 0 0 #2E7D32, 18px 0 0 0 #2E7D32, 21px 0 0 0 #2E7D32, 24px 0 0 0 #1B5E20,
        /* Schirm - gruen (7 breit) */
        9px 3px 0 0 #1B5E20, 12px 3px 0 0 #2E7D32, 15px 3px 0 0 #43A047, 18px 3px 0 0 #43A047, 21px 3px 0 0 #43A047, 24px 3px 0 0 #2E7D32, 27px 3px 0 0 #1B5E20,
        /* Schirm heller (9 breit) */
        6px 6px 0 0 #1B5E20, 9px 6px 0 0 #2E7D32, 12px 6px 0 0 #43A047, 15px 6px 0 0 #66BB6A, 18px 6px 0 0 #66BB6A, 21px 6px 0 0 #66BB6A, 24px 6px 0 0 #43A047, 27px 6px 0 0 #2E7D32, 30px 6px 0 0 #1B5E20,
        /* Schirm glow (11 breit) */
        3px 9px 0 0 #1B5E20, 6px 9px 0 0 #2E7D32, 9px 9px 0 0 #43A047, 12px 9px 0 0 #66BB6A, 15px 9px 0 0 #81C784, 18px 9px 0 0 #81C784, 21px 9px 0 0 #81C784, 24px 9px 0 0 #66BB6A, 27px 9px 0 0 #43A047, 30px 9px 0 0 #2E7D32, 33px 9px 0 0 #1B5E20,
        /* Schirm Unterkante - hellste Kante (13 breit) */
        0px 12px 0 0 #1B5E20, 3px 12px 0 0 #2E7D32, 6px 12px 0 0 #43A047, 9px 12px 0 0 #66BB6A, 12px 12px 0 0 #81C784, 15px 12px 0 0 #A5D6A7, 18px 12px 0 0 #A5D6A7, 21px 12px 0 0 #A5D6A7, 24px 12px 0 0 #81C784, 27px 12px 0 0 #66BB6A, 30px 12px 0 0 #43A047, 33px 12px 0 0 #2E7D32, 36px 12px 0 0 #1B5E20,
        /* === WARME LICHTSTRAHLEN unter Schirm === */
        6px 15px 0 0 #FFFDE7, 12px 15px 0 0 #FFF9C4, 24px 15px 0 0 #FFF9C4, 30px 15px 0 0 #FFFDE7,
        3px 18px 0 0 #FFFDE7, 9px 18px 0 0 #FFF9C4, 27px 18px 0 0 #FFF9C4, 33px 18px 0 0 #FFFDE7,
        0px 21px 0 0 #FFF9C4, 36px 21px 0 0 #FFF9C4,
        /* Hals (heller, beleuchtet) */
        15px 15px 0 0 #888, 18px 15px 0 0 #888, 21px 15px 0 0 #888,
        /* Stiel */
        15px 18px 0 0 #777, 18px 18px 0 0 #888, 21px 18px 0 0 #777,
        /* Stiel duenn */
        15px 21px 0 0 #777, 18px 21px 0 0 #777,
        15px 24px 0 0 #777, 18px 24px 0 0 #777,
        /* Gelenk */
        15px 27px 0 0 #888, 18px 27px 0 0 #888, 21px 27px 0 0 #888,
        /* Sockel oben (heller, Lichtschein) */
        6px 30px 0 0 #666, 9px 30px 0 0 #666, 12px 30px 0 0 #777, 15px 30px 0 0 #777, 18px 30px 0 0 #777, 21px 30px 0 0 #777, 24px 30px 0 0 #777, 27px 30px 0 0 #666, 30px 30px 0 0 #666,
        /* Sockel mitte */
        3px 33px 0 0 #555, 6px 33px 0 0 #666, 9px 33px 0 0 #666, 12px 33px 0 0 #777, 15px 33px 0 0 #777, 18px 33px 0 0 #777, 21px 33px 0 0 #777, 24px 33px 0 0 #777, 27px 33px 0 0 #666, 30px 33px 0 0 #666, 33px 33px 0 0 #555,
        /* Sockel unten */
        6px 36px 0 0 #555, 9px 36px 0 0 #666, 12px 36px 0 0 #666, 15px 36px 0 0 #666, 18px 36px 0 0 #666, 21px 36px 0 0 #666, 24px 36px 0 0 #666, 27px 36px 0 0 #666, 30px 36px 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;
    opacity: 1 !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;
}