/*
 * Leohaz Universal Sticky-Bar CSS
 * --------------------------------------------------------------------------
 * KOPIE der Sticky-Bar-spezifischen Regeln aus leohaz-mobile-home.css.
 * Greift via #lhz-sticky-bar etc. — body.home Prefix entfernt damit die
 * Regeln auf allen Seiten greifen wo dieses CSS-File geladen wird.
 *
 * Wird per functions.php nur auf den passenden Seiten geladen
 * (alle Mobile-Seiten ausser Startseite/Vault/Patent), daher kein
 * Risiko dass diese Regeln auf falschen Seiten greifen.
 *
 * ENTFERNT (home-only):
 *   - Hero-Block 100vh
 *   - masthead-mobile transparent + Logo-Positionierung
 *   - ART + LIFE Buttons (Parallax + Margin)
 *   - Coke-Logo Glow Keyframes
 *
 * Bei Bugfixes im Sticky-Bar-CSS: gleiche Aenderung in BEIDEN Files
 * (leohaz-mobile-home.css UND leohaz-sticky-bar.css) noetig!
 * --------------------------------------------------------------------------
 */

@media (max-width: 768px) {

    /* === SHINE-SWEEP — Übergang Grün -> Weiß ============================ */
    #lhz-bar-burger-clone i.lhz-color-to-white,
    #lhz-bar-heart-clone img.lhz-color-to-white,
    #lhz-bar-skull-img.lhz-color-to-white,
    #lhz-bar-logo img.lhz-color-to-white {
        filter: brightness(0) invert(1) !important;
        transition: filter 0.05s linear !important;
    }
    /* Stagger: rechts zuerst, links zuletzt */
    #lhz-bar-burger-clone i.lhz-color-to-white { transition-delay: 0s !important; }
    #lhz-bar-heart-clone img.lhz-color-to-white { transition-delay: 0.075s !important; }
    #lhz-bar-skull-img.lhz-color-to-white       { transition-delay: 0.20s !important; }

    /* === LOGO-WHITE-OVERLAY ============================================ */
    #lhz-bar-logo-white {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 30px !important;
        width: auto !important;
        display: block !important;
        pointer-events: none !important;
        opacity: 0 !important;
        transition: opacity 0.05s linear !important;
        transition-delay: 0.25s !important;
        transform: scaleX(-1) !important;
    }
    #lhz-bar-logo.lhz-show-white #lhz-bar-logo-white {
        opacity: 1 !important;
    }
    #lhz-bar-logo.lhz-show-white #lhz-bar-logo-white.lhz-instant-hide,
    #lhz-bar-logo-white.lhz-instant-hide {
        opacity: 0 !important;
        transition: none !important;
    }

    /* === SHINE-ELEMENT ===
       transform und opacity OHNE !important damit WAAPI sie animieren kann.
       mask-image = identisches Linien-Pattern wie Bar-Background → Sweep
       leuchtet NUR auf den Mesh-Linien auf, nicht der ganze Balken.
       Pattern muss synchron mit leohaz-favorites.css #lhz-sticky-bar::before
       bleiben (selbe data:URL). */
    #lhz-bar-shine {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        pointer-events: none !important;
        z-index: 100 !important;
        background: linear-gradient(
            105deg,
            transparent 35%,
            rgba(255,255,255,0.28) 45%,
            rgba(255,255,255,0.6) 50%,
            rgba(255,255,255,0.28) 55%,
            transparent 65%
        ) !important;
        mix-blend-mode: screen !important;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 59' preserveAspectRatio='none'%3E%3Cpath d='M 0 6 Q 25 1 50 8 Q 80 16 110 6 Q 140 -3 170 8 Q 200 18 230 6 Q 260 -4 290 10 Q 320 20 350 6 Q 380 -2 400 8' stroke='black' stroke-opacity='0.18' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 18 Q 30 10 65 20 Q 95 32 125 16 Q 160 2 195 18 Q 225 34 255 16 Q 285 0 315 20 Q 345 36 375 18 Q 400 6 400 14' stroke='black' stroke-opacity='0.22' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 30 Q 22 20 48 32 Q 75 44 105 28 Q 138 14 172 30 Q 202 46 232 28 Q 262 12 298 32 Q 328 48 358 30 Q 388 16 400 28' stroke='black' stroke-opacity='0.20' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 42 Q 35 32 72 44 Q 108 56 142 40 Q 172 26 205 42 Q 238 56 272 40 Q 302 24 338 42 Q 368 56 400 44' stroke='black' stroke-opacity='0.18' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 52 Q 22 46 48 54 Q 72 58 100 50 Q 130 42 162 52 Q 192 58 222 50 Q 252 42 282 52 Q 312 58 342 50 Q 372 44 400 52' stroke='black' stroke-opacity='0.15' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 -5 Q 42 10 82 5 Q 122 22 162 16 Q 202 34 242 28 Q 282 46 322 40 Q 362 56 400 52' stroke='black' stroke-opacity='0.16' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M -20 12 Q 35 16 85 12 Q 135 24 185 18 Q 235 30 285 24 Q 335 36 385 30 Q 400 34 400 32' stroke='black' stroke-opacity='0.14' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 -5 Q 358 10 318 6 Q 278 22 238 16 Q 198 34 158 28 Q 118 46 78 40 Q 38 56 0 52' stroke='black' stroke-opacity='0.16' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 420 12 Q 365 16 315 12 Q 265 24 215 18 Q 165 30 115 24 Q 65 36 15 30 Q 0 34 0 32' stroke='black' stroke-opacity='0.14' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 14 Q 42 24 82 12 Q 122 0 162 14 Q 202 26 242 12 Q 282 -2 322 14 Q 362 28 400 14' stroke='black' stroke-opacity='0.20' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 48 Q 55 38 105 44 Q 155 32 205 38 Q 255 26 305 32 Q 355 20 400 26' stroke='black' stroke-opacity='0.15' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 24 Q 50 30 100 22 Q 150 14 200 24 Q 250 34 300 22 Q 350 10 400 20' stroke='black' stroke-opacity='0.12' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 6 Q 375 1 350 8 Q 320 16 290 6 Q 260 -3 230 8 Q 200 18 170 6 Q 140 -4 110 10 Q 80 20 50 6 Q 20 -2 0 8' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 18 Q 370 10 335 20 Q 305 32 275 16 Q 240 2 205 18 Q 175 34 145 16 Q 115 0 85 20 Q 55 36 25 18 Q 0 6 0 14' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 30 Q 378 20 352 32 Q 325 44 295 28 Q 262 14 228 30 Q 198 46 168 28 Q 138 12 102 32 Q 72 48 42 30 Q 12 16 0 28' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 42 Q 365 32 328 44 Q 292 56 258 40 Q 228 26 195 42 Q 162 56 128 40 Q 98 24 62 42 Q 32 56 0 44' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 52 Q 378 46 352 54 Q 328 58 300 50 Q 270 42 238 52 Q 208 58 178 50 Q 148 42 118 52 Q 88 58 58 50 Q 28 44 0 52' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 -5 Q 358 10 318 5 Q 278 22 238 16 Q 198 34 158 28 Q 118 46 78 40 Q 38 56 0 52' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 420 12 Q 365 16 315 12 Q 265 24 215 18 Q 165 30 115 24 Q 65 36 15 30 Q 0 34 0 32' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 -5 Q 42 10 82 6 Q 122 22 162 16 Q 202 34 242 28 Q 282 46 322 40 Q 362 56 400 52' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M -20 12 Q 35 16 85 12 Q 135 24 185 18 Q 235 30 285 24 Q 335 36 385 30 Q 400 34 400 32' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 14 Q 358 24 318 12 Q 278 0 238 14 Q 198 26 158 12 Q 118 -2 78 14 Q 38 28 0 14' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 48 Q 345 38 295 44 Q 245 32 195 38 Q 145 26 95 32 Q 45 20 0 26' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 24 Q 350 30 300 22 Q 250 14 200 24 Q 150 34 100 22 Q 50 10 0 20' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 2 Q 20 0 40 2 Q 60 4 80 2 Q 100 0 120 2 Q 140 4 160 2 Q 180 0 200 2 Q 220 4 240 2 Q 260 0 280 2 Q 300 4 320 2 Q 340 0 360 2 Q 380 4 400 2' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 56 Q 20 58 40 56 Q 60 54 80 56 Q 100 58 120 56 Q 140 54 160 56 Q 180 58 200 56 Q 220 54 240 56 Q 260 58 280 56 Q 300 54 320 56 Q 340 58 360 56 Q 380 54 400 56' stroke='black' stroke-width='2' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 59' preserveAspectRatio='none'%3E%3Cpath d='M 0 6 Q 25 1 50 8 Q 80 16 110 6 Q 140 -3 170 8 Q 200 18 230 6 Q 260 -4 290 10 Q 320 20 350 6 Q 380 -2 400 8' stroke='black' stroke-opacity='0.18' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 18 Q 30 10 65 20 Q 95 32 125 16 Q 160 2 195 18 Q 225 34 255 16 Q 285 0 315 20 Q 345 36 375 18 Q 400 6 400 14' stroke='black' stroke-opacity='0.22' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 30 Q 22 20 48 32 Q 75 44 105 28 Q 138 14 172 30 Q 202 46 232 28 Q 262 12 298 32 Q 328 48 358 30 Q 388 16 400 28' stroke='black' stroke-opacity='0.20' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 42 Q 35 32 72 44 Q 108 56 142 40 Q 172 26 205 42 Q 238 56 272 40 Q 302 24 338 42 Q 368 56 400 44' stroke='black' stroke-opacity='0.18' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 52 Q 22 46 48 54 Q 72 58 100 50 Q 130 42 162 52 Q 192 58 222 50 Q 252 42 282 52 Q 312 58 342 50 Q 372 44 400 52' stroke='black' stroke-opacity='0.15' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 -5 Q 42 10 82 5 Q 122 22 162 16 Q 202 34 242 28 Q 282 46 322 40 Q 362 56 400 52' stroke='black' stroke-opacity='0.16' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M -20 12 Q 35 16 85 12 Q 135 24 185 18 Q 235 30 285 24 Q 335 36 385 30 Q 400 34 400 32' stroke='black' stroke-opacity='0.14' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 -5 Q 358 10 318 6 Q 278 22 238 16 Q 198 34 158 28 Q 118 46 78 40 Q 38 56 0 52' stroke='black' stroke-opacity='0.16' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 420 12 Q 365 16 315 12 Q 265 24 215 18 Q 165 30 115 24 Q 65 36 15 30 Q 0 34 0 32' stroke='black' stroke-opacity='0.14' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 14 Q 42 24 82 12 Q 122 0 162 14 Q 202 26 242 12 Q 282 -2 322 14 Q 362 28 400 14' stroke='black' stroke-opacity='0.20' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 48 Q 55 38 105 44 Q 155 32 205 38 Q 255 26 305 32 Q 355 20 400 26' stroke='black' stroke-opacity='0.15' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 24 Q 50 30 100 22 Q 150 14 200 24 Q 250 34 300 22 Q 350 10 400 20' stroke='black' stroke-opacity='0.12' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 6 Q 375 1 350 8 Q 320 16 290 6 Q 260 -3 230 8 Q 200 18 170 6 Q 140 -4 110 10 Q 80 20 50 6 Q 20 -2 0 8' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 18 Q 370 10 335 20 Q 305 32 275 16 Q 240 2 205 18 Q 175 34 145 16 Q 115 0 85 20 Q 55 36 25 18 Q 0 6 0 14' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 30 Q 378 20 352 32 Q 325 44 295 28 Q 262 14 228 30 Q 198 46 168 28 Q 138 12 102 32 Q 72 48 42 30 Q 12 16 0 28' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 42 Q 365 32 328 44 Q 292 56 258 40 Q 228 26 195 42 Q 162 56 128 40 Q 98 24 62 42 Q 32 56 0 44' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 52 Q 378 46 352 54 Q 328 58 300 50 Q 270 42 238 52 Q 208 58 178 50 Q 148 42 118 52 Q 88 58 58 50 Q 28 44 0 52' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 -5 Q 358 10 318 5 Q 278 22 238 16 Q 198 34 158 28 Q 118 46 78 40 Q 38 56 0 52' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 420 12 Q 365 16 315 12 Q 265 24 215 18 Q 165 30 115 24 Q 65 36 15 30 Q 0 34 0 32' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 -5 Q 42 10 82 6 Q 122 22 162 16 Q 202 34 242 28 Q 282 46 322 40 Q 362 56 400 52' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M -20 12 Q 35 16 85 12 Q 135 24 185 18 Q 235 30 285 24 Q 335 36 385 30 Q 400 34 400 32' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 14 Q 358 24 318 12 Q 278 0 238 14 Q 198 26 158 12 Q 118 -2 78 14 Q 38 28 0 14' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 48 Q 345 38 295 44 Q 245 32 195 38 Q 145 26 95 32 Q 45 20 0 26' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 400 24 Q 350 30 300 22 Q 250 14 200 24 Q 150 34 100 22 Q 50 10 0 20' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 2 Q 20 0 40 2 Q 60 4 80 2 Q 100 0 120 2 Q 140 4 160 2 Q 180 0 200 2 Q 220 4 240 2 Q 260 0 280 2 Q 300 4 320 2 Q 340 0 360 2 Q 380 4 400 2' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M 0 56 Q 20 58 40 56 Q 60 54 80 56 Q 100 58 120 56 Q 140 54 160 56 Q 180 58 200 56 Q 220 54 240 56 Q 260 58 280 56 Q 300 54 320 56 Q 340 58 360 56 Q 380 54 400 56' stroke='black' stroke-width='2' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
        -webkit-mask-size: 100% 100% !important;
                mask-size: 100% 100% !important;
        -webkit-mask-repeat: no-repeat !important;
                mask-repeat: no-repeat !important;
        will-change: transform, opacity !important;
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
    #lhz-bar-shine.lhz-shine-active {
        opacity: 1;
        animation: lhz-shine-sweep 0.3s linear forwards;
    }
    @keyframes lhz-shine-sweep {
        from { transform: translate3d(100%, 0, 0); }
        to   { transform: translate3d(-100%, 0, 0); }
    }

    /* === STROM-DURCH-KABEL EFFEKT (#lhz-bar-lines) — siehe mobile-home.css === */
    #lhz-bar-lines {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
        z-index: 101 !important;
        mix-blend-mode: screen !important;
        overflow: visible !important;
    }
    #lhz-bar-lines path {
        stroke-opacity: 0;
    }
    #lhz-bar-lines.lhz-lines-flowing .lhz-line-top {
        animation: lhz-line-flow-soft 200ms 0ms ease-out forwards;
    }
    #lhz-bar-lines.lhz-lines-flowing .lhz-line-mid1 {
        animation: lhz-line-flow-bright 200ms 60ms ease-out forwards;
    }
    #lhz-bar-lines.lhz-lines-flowing .lhz-line-mid2 {
        animation: lhz-line-flow-bright 200ms 120ms ease-out forwards;
    }
    #lhz-bar-lines.lhz-lines-flowing .lhz-line-mid3 {
        animation: lhz-line-flow-bright 200ms 180ms ease-out forwards;
    }
    #lhz-bar-lines.lhz-lines-flowing .lhz-line-bottom {
        animation: lhz-line-flow-soft 200ms 240ms ease-out forwards;
    }
    @keyframes lhz-line-flow-soft {
        0%   { stroke-opacity: 0; }
        30%  { stroke-opacity: 0.5; }
        100% { stroke-opacity: 0; }
    }
    @keyframes lhz-line-flow-bright {
        0%   { stroke-opacity: 0; }
        30%  { stroke-opacity: 0.9; }
        100% { stroke-opacity: 0; }
    }

    /* === FUNKEN-PULSE (User-Wunsch 2026-06-04 v8/v12) ===================
     * Runde 1px-Punkte mit weitem weißem Glow der einen Shine auf den
     * grauen Balken wirft. Wirkt wie pulsierende Knoten im organischen Netz.
     *
     * v12 Änderungen:
     *  - Form: runder Punkt (dash 0.001 in JS + linecap:round + width 1)
     *  - 50% heller (opacity max + stärkerer drop-shadow)
     *  - Glow erweitert auf 6px Radius mit sichtbarem Shine über die Linie
     *    hinaus auf den grauen Balken
     *  - Cycle-Dauern ×1.5 in JS
     *  - Fade-in/out via WAAPI strokeOpacity (kein Pausieren am Rand)
     *  - KEIN Atem-Cycle (war Verdacht für Scroll-Bug — v11)
     *
     * z-index: 60 — über Bar-Linien-Pattern (::before z=0), Shine-Sweep
     * (z=100) und Strom-Effekt (#lhz-bar-lines z=101) liegen darüber. */
    #lhz-bar-sparks {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
        z-index: 60 !important;
        overflow: visible !important;
    }
    /* Container nur sichtbar wenn aktiv (= nach Sweep) — verhindert dass
       die SVG-paths vor dem Sweep als statische weiße Linien zu sehen sind */
    #lhz-bar-sparks .lhz-spark {
        opacity: 0;
    }
    #lhz-bar-sparks.lhz-sparks-active .lhz-spark {
        opacity: 1;
    }
    #lhz-bar-sparks.lhz-sparks-active {
        animation: lhz-spark-pulse 1.6s linear infinite;
    }
    #lhz-bar-sparks .lhz-spark {
        stroke: #ffffff;            /* reines weiß für sichtbaren Shine */
        stroke-width: 1;            /* v18 (2026-06-06): zurück auf 1 (User-Wunsch) */
        fill: none;
        stroke-linecap: round;      /* macht dash 0.001 zu rundem Punkt */
        /* v18: 2 starke drop-shadows statt 5 schwacher.
           Stacked drop-shadows blurren akkumulativ (Output von N wird Input
           von N+1) → 5 Schichten erzeugen unscharfen + sehr schwachen Glow.
           2 Schichten mit hoher Alpha geben kompakten + sichtbaren Halo. */
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95))
                drop-shadow(0 0 7px rgba(255, 240, 170, 0.55));
    }
    /* Container-Glow-Pulse: 1.6s mit Helligkeits-Peaks bei ~0.5/0.8/1.0s */
    @keyframes lhz-spark-pulse {
        0%   { filter: brightness(1); }
        31%  { filter: brightness(1.3); }
        50%  { filter: brightness(1.5); }
        62%  { filter: brightness(1.3); }
        100% { filter: brightness(1); }
    }
}

/* === KLONE in der Sticky-Bar (#lhz-sticky-bar) ===
   Klone für Heart + Burger als direkte Kinder des Sticky-Bars. */
@media (max-width: 640px) {
    #lhz-bar-heart-clone,
    #lhz-bar-burger-clone {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent !important;
        z-index: 2 !important;
    }
    #lhz-bar-burger-clone {
        right: 15px !important;
        padding: 8px !important;
        transform: translateY(calc(-50% - 2.5px)) !important;
    }
    #lhz-bar-heart-clone {
        right: 55px !important;
        padding: 8px !important;
    }
    #lhz-bar-heart-clone img {
        width: 24px !important;
        height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
    }
    #lhz-bar-burger-clone i,
    #lhz-bar-burger-clone svg {
        color: #00FF00 !important;
        fill: #00FF00 !important;
    }

    /* === SHAKE-Animation auf Hamburger-Klone (halbierte Werte) === */
    #lhz-bar-burger-clone.lhz-burger-shaking {
        animation: lhz-burger-glow 1.2s ease-out forwards !important;
        overflow: visible !important;
    }
    #lhz-bar-burger-clone.lhz-burger-shaking i {
        animation: lhz-burger-shake-icon-half 2s linear forwards !important;
    }
    @keyframes lhz-burger-shake-icon-half {
        0%    { transform: translateX(0); }
        5%    { transform: translateX(0); }
        12%   { transform: translateX(1.5px); }
        19%   { transform: translateX(-1.5px); }
        26%   { transform: translateX(1.5px); }
        33%   { transform: translateX(-1.5px); }
        40%   { transform: translateX(1.5px); }
        54%   { transform: translateX(-1.25px); }
        70%   { transform: translateX(0.75px); }
        88%   { transform: translateX(-0.25px); }
        100%  { transform: translateX(0); }
    }

    /* === DOPPEL-ANZEIGE VERHINDERN ===
       Original-Hamburger und Original-Herz unsichtbar — Klone uebernehmen.
       Klicks werden vom Klone via originalEl.click() weitergeleitet.
       visibility:hidden statt display:none damit click() noch funktioniert. */
    #masthead-mobile .col-sm-4.col-xs-4:first-child,
    #leohaz-fav-btn {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* === Sticky-Bar Inhalte: initial opacity 0 + transition === */
@media (max-width: 640px) {
    #lhz-bar-logo,
    #lhz-bar-skull {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
}

/* === STICKY-BAR: scroll-linked statt zeitbasierte Slide-In === */
@media (max-width: 640px) {
    #lhz-sticky-bar {
        transition: none !important;
    }
}

/* === INFINITY-LOGO HORIZONTAL SPIEGELN === */
@media (max-width: 640px) {
    #lhz-sticky-bar #lhz-bar-logo {
        transform: scaleX(-1);
    }
}

/* =====================================================================
 * BOTTLE-LOAD ANIMATION (Bar-Mitte, User-Wunsch 2026-06-01)
 * ---------------------------------------------------------------------
 * Spiegelt das Startseiten-Setup aus leohaz-mobile-home.css — ohne
 * body.home Praefix. Technik: <div>s mit mask-image als Alpha-Mask +
 * background-color #00FF00 → garantiert gleiche Bar-Gruene wie die
 * anderen Symbole.
 *
 * Container 30×30px (= Hoehe des Infinity-Logos). mask-size:contain →
 * alle 4 Bilder identisch dimensioniert + positioniert (Blink-Effekt
 * ohne Layout-Shift).
 *
 * Aktiv auf: alle Universal-Mobile-Seiten (NICHT Vault/Patent — siehe
 * functions.php Enqueue-Bedingung).
 *
 * pointer-events:none → keine Klick-Sperre. opacity ohne !important
 * (Cache-Fix Schritt 3 — WAAPI muss ueberschreiben koennen).
 * ===================================================================== */
@media (max-width: 640px) {
    #lhz-bar-bottle {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        /* User-Wunsch 2026-06-02: doppelte Groesse (vorher 30×30). */
        width: 60px !important;
        height: 60px !important;
        /* Tap-Target: navigiert zu /vault/ + startet Bottle-Load neu. */
        pointer-events: auto !important;
        cursor: pointer !important;
        /* <a>-Element Reset — kein Underline / Link-Blau / iOS Tap-Highlight. */
        text-decoration: none !important;
        color: inherit !important;
        -webkit-tap-highlight-color: transparent !important;
        z-index: 2 !important;
        overflow: visible !important;
    }
    #lhz-bar-bottle .lhz-bottle-img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        pointer-events: none !important;
        background-color: #00FF00 !important;
        -webkit-mask-repeat: no-repeat !important;
                mask-repeat: no-repeat !important;
        -webkit-mask-position: center center !important;
                mask-position: center center !important;
        -webkit-mask-size: contain !important;
                mask-size: contain !important;
        transition: background-color 0.05s linear 0.15s !important;
        /* opacity OHNE !important — Cache-Fix #3, WAAPI muss ueberschreiben */
        opacity: 0;
    }
    /* WEISS-Zustand nach Sweep — NUR Bild 1 wird weiss. */
    #lhz-bar-bottle.lhz-bottle-white .lhz-bottle-1 {
        background-color: #ffffff !important;
    }

    /* =====================================================================
     * PLAY-CARD (3 Karten, User-Wunsch 2026-06-03) — Universal-Seiten
     * ---------------------------------------------------------------------
     * Identische Optik zur Startseite: 3 PNG-Karten als mask-image gestapelt,
     * Hoehe 24px (= Skull), Position dynamisch zwischen Skull und Bottle.
     * Gruene Bar-Farbe via background-color, Sweep-Weiss nur auf Karte 3
     * via CSS-Klasse + transition. Tap navigiert zu /cards/.
     * ===================================================================== */
    #lhz-bar-playcard {
        position: absolute !important;
        top: 50% !important;
        /* v15 (User-Wunsch 2026-06-04): STATISCHE CSS-Position via calc().
           Skull-Position ist konstant in Pixeln (~81px vom viewport-left:
           padding 14 + logo 30 + gap 14 + skull-margin 11 + skull-w/2 12).
           Bottle-Mitte bei 50% des viewports. Midpoint = (81 + viewport/2)/2
           = 40.5px + 25%. Minus PLAYCARD_X_OFFSET 8 = calc(32.5px + 25%).
           Funktioniert auf JEDEM viewport, kein JS nötig — robust gegen
           Rotation, BFCache, Race-Conditions. */
        left: calc(32.5px + 25%) !important;
        transform: translate(-50%, -50%) !important;
        width: 32px !important;
        height: 28px !important;     /* v5: +2px → 28px, mittig via translateY(-50%) */
        pointer-events: auto !important;
        cursor: pointer !important;
        text-decoration: none !important;
        color: inherit !important;
        -webkit-tap-highlight-color: transparent !important;
        z-index: 2 !important;
        overflow: visible !important;
    }
    /* === FAVORITES: Play-Card als Flex-Child neben Infinity-Logo ============
     * (User-Wunsch 2026-06-04 v2 — Root-Cause-Fix nach Infinity-Pattern)
     *
     * Auf Favorites/Vault/Patent existiert KEIN #lhz-bar-skull, weil
     * leohaz-favorites.js den Skull-Button nur erstellt wenn ein
     * ghost-overlay auf der Seite existiert (favorites.js Z.1529).
     * Ohne Skull war der bisherige JS-positioning-Approach unloesbar →
     * Card landete ganz links.
     *
     * Loesung: JS haengt die Card auf Favorites als Flex-Child in
     * #lhz-bar-left an (Marker-Klasse `lhz-pc-favorites-flex`). CSS hier
     * macht aus dem absolute-positioning ein normales Flex-Item — exakt
     * dort wo Skull auf anderen Seiten sitzt. Robust, kein JS-Race.
     * ======================================================================= */
    #lhz-bar-playcard.lhz-pc-favorites-flex {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 0 0 11px !important;   /* = Skull-margin-left auf Universal */
        flex: 0 0 auto !important;
    }
    #lhz-bar-playcard .lhz-playcard-img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        pointer-events: none !important;
        background-color: #00FF00 !important;
        -webkit-mask-repeat: no-repeat !important;
                mask-repeat: no-repeat !important;
        -webkit-mask-position: center center !important;
                mask-position: center center !important;
        /* User-Wunsch 2026-06-03 v3: mask-size auto/100% → 24px Hoehe
           garantiert (= Skull-Hoehe), Breite proportional, ggf. seitlich
           gecropt. Siehe mobile-home.css fuer Details. */
        -webkit-mask-size: auto 100% !important;
                mask-size: auto 100% !important;
        transition: background-color 0.05s linear 0.15s !important;
        opacity: 0;
    }
    #lhz-bar-playcard.lhz-playcard-white .lhz-playcard-5 {
        background-color: #ffffff !important;
    }

    /* === SKULL Position-Sync mit Startseite (User-Wunsch 2026-06-03 v8)
       Auf Universal-Seiten lag Skull bisher auf einer anderen Position als
       auf der Startseite — Ursache: favorites.css `#lhz-bar-skull` Regel
       (Specificity 1,0,0) wurde nach sticky-bar.css's `#lhz-bar-skull`
       Regel (gleiche 1,0,0) geladen → favorites gewann via Cascade-Order.
       Mit `body #lhz-bar-skull` Selektor (Specificity 1,0,1) gewinnen wir
       garantiert — analog zur Home wo `body.home #lhz-bar-skull` greift.
       Wert identisch zu mobile-home.css (= 11px nach v8). */
    body #lhz-bar-skull {
        margin-left: 11px !important;
    }
}

/* =====================================================================
 * CUSTOM GO-TOP BUTTON (Universal Mobile, User-Wunsch 2026-06-01)
 * ---------------------------------------------------------------------
 * Spiegelt die Startseiten-Loesung aus leohaz-mobile-home.css, aber:
 *   - OHNE body.home Praefix (gilt auf allen Universal-Menue-Seiten)
 *   - OHNE Elementor-Anchor (#leohaz-top) — pures JS scrollTo(0, 0)
 *   - User-Anweisung 2026-06-13: Scope max-width:1024px — Mobile UND
 *     Tablet nutzen den Custom-Button, Sydney's .go-top nur Desktop
 *
 * Funktioniert verlaesslich weil INSTANT scroll (Zwei-Arg scrollTo)
 * keine GPU-Layer-Disposal triggert (siehe HANDOFF Lesson 2026-06-01).
 * ===================================================================== */
@media (max-width: 1024px) {
    /* Sydney's eigener go-top Button: Mobile + Tablet verstecken */
    .go-top {
        display: none !important;
    }

    /* === CUSTOM GO-TOP BUTTON ===
       href="#" + JS preventDefault + scrollTo(0, 0) → instant, kein
       smooth-scroll, keine GPU-Layer-Disposal. */
    #lhz-custom-go-top {
        position: fixed !important;
        bottom: 18px !important;
        right: 18px !important;
        width: 52px !important;       /* groessere Tap-Area (Apple-Guideline 44+) */
        height: 52px !important;
        background: rgba(0, 0, 0, 0.65) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        z-index: 99999 !important;     /* ueber Sticky-Bar (9990) */
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.15s ease !important;   /* schneller sichtbar */
        -webkit-tap-highlight-color: transparent !important;
        cursor: pointer !important;
        touch-action: manipulation !important;       /* iOS: kein 300ms Tap-Delay */
        -webkit-touch-callout: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    #lhz-custom-go-top.lhz-visible {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    /* Pfeil-Icon: CSS-only via border + rotate. */
    #lhz-custom-go-top span {
        display: block !important;
        width: 13px !important;
        height: 13px !important;
        border-left: 2px solid #fff !important;
        border-top: 2px solid #fff !important;
        transform: rotate(45deg) !important;
        margin-top: 4px !important;
        pointer-events: none !important;   /* Span soll nicht eigene Hits absorbieren */
    }

    /* === Vault-Popup: Custom Go-Top ausblenden ========================
       User-Wunsch 2026-06-02: Falls der Vault-Popup auf einer Universal-
       Seite ueber einen Color-Button geoeffnet wird (.v3-pop-open Klasse),
       Custom-Go-Top weg — macht im Popup keinen Sinn. :has() Selector. */
    body:has(.v3-popup-overlay.v3-pop-open) #lhz-custom-go-top {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}