:root {

    /* ============================
       NEON GRUND-FARBEN
    ============================ */
    --neon-green: #39ff14;
    --neon-green-dark: #2ecc10;
    --neon-green-rgb: 57,255,20;

    --neon-cyan: #00eaff;
    --neon-cyan-rgb: 0,234,255;
    --neon-cyan-bright-rgb: 0,255,255;

    --neon-magenta: #ff00ff;
    --neon-magenta-rgb: 255,0,255;

    --neon-red: #ff0033;
    --neon-red-soft: #ff4d6d;
    --neon-red-rgb: 255,0,51;

    --neon-yellow: #ffd900;
    --neon-yellow-rgb: 255,217,0;


    /* ============================
       TEXT-PASTELL (NEU)
    ============================ */
    --text-green-soft:   #d8ffe0;
    --text-cyan-soft:    #d8faff;
    --text-magenta-soft: #ffd8ff;


    /* ============================
       WEISS-GLOW STUFEN
    ============================ */
    --white-05: rgba(255,255,255,0.05);
    --white-08: rgba(255,255,255,0.08);
    --white-10: rgba(255,255,255,0.10);
    --white-15: rgba(255,255,255,0.15);
    --white-25: rgba(255,255,255,0.25);
    --white-35: rgba(255,255,255,0.35);
    --white-45: rgba(255,255,255,0.45);
    --white-55: rgba(255,255,255,0.55);
    --white-60: rgba(255,255,255,0.60);
    --white-75: rgba(255,255,255,0.75);

    --white: #ffffff;


    /* ============================
       SCHWARZ-SHADOW STUFEN (NEU)
    ============================ */
    --black: #000000;
    --black-40: rgba(0,0,0,0.40);
    --black-50: rgba(0,0,0,0.50);
    --black-55: rgba(0,0,0,0.55);
    --black-60: rgba(0,0,0,0.60);
    --black-80: rgba(0,0,0,0.80);


    /* ============================
       NEON-GREEN OPACITY VARIANTEN
    ============================ */
    --ng-10: rgba(var(--neon-green-rgb),0.10);
    --ng-15: rgba(var(--neon-green-rgb),0.15);
    --ng-25: rgba(var(--neon-green-rgb),0.25);
    --ng-35: rgba(var(--neon-green-rgb),0.35);
    --ng-40: rgba(var(--neon-green-rgb),0.40);
    --ng-45: rgba(var(--neon-green-rgb),0.45);
    --ng-55: rgba(var(--neon-green-rgb),0.55);
    --ng-65: rgba(var(--neon-green-rgb),0.65);
    --ng-70: rgba(var(--neon-green-rgb),0.70);
    --ng-75: rgba(var(--neon-green-rgb),0.75);
    --ng-85: rgba(var(--neon-green-rgb),0.85);
    --ng-90: rgba(var(--neon-green-rgb),0.90);
    --ng-100: rgba(var(--neon-green-rgb),1);


    /* ============================
       CYAN / MAGENTA / ROT OPACITY
    ============================ */
    --cyan-60: rgba(var(--neon-cyan-rgb),0.60);
    --cyan-55: rgba(var(--neon-cyan-bright-rgb),0.55);
    --cyan-45: rgba(var(--neon-cyan-bright-rgb),0.45);

    --magenta-45: rgba(var(--neon-magenta-rgb),0.45);

    --red-60: rgba(255,0,0,0.60);
    --red-90: rgba(255,0,0,0.90);


    /* ============================
       SONDERFARBEN
    ============================ */
    --blue-test: rgba(0,0,255,0.6);
}

/* =====================================================
   Glow‑Animationen
   ===================================================== */
   
@keyframes cyberGlow {
    0%   { box-shadow: 0 0 8px var(--neon-green), 0 0 16px var(--neon-green); }
    33%  { box-shadow: 0 0 8px var(--neon-cyan), 0 0 16px var(--neon-cyan); }
    66%  { box-shadow: 0 0 8px var(--neon-magenta), 0 0 16px var(--neon-magenta); }
    100% { box-shadow: 0 0 8px var(--neon-green), 0 0 16px var(--neon-green); }
}

@keyframes navGlow {
    0%   { box-shadow: 0 0 0 rgba(var(--neon-green-rgb),0); }
    40%  { box-shadow: 0 0 22px rgba(var(--neon-green-rgb),0.55); }
    100% { box-shadow: 0 0 0 rgba(var(--neon-green-rgb),0); }
}

@keyframes navGlowDark {
    0%   { box-shadow: 0 0 0 rgba(var(--neon-green-rgb),0); }
    40%  { box-shadow: 0 0 22px rgba(var(--neon-green-rgb),0.65); }
    100% { box-shadow: 0 0 0 rgba(var(--neon-green-rgb),0); }
}

@keyframes homeGlowPulse {
    0%   { filter: drop-shadow(0 0 8px var(--neon-green)) drop-shadow(0 0 16px var(--neon-green)); }
    33%  { filter: drop-shadow(0 0 8px var(--neon-cyan)) drop-shadow(0 0 16px var(--neon-cyan)); }
    66%  { filter: drop-shadow(0 0 8px var(--neon-magenta)) drop-shadow(0 0 16px var(--neon-magenta)); }
    100% { filter: drop-shadow(0 0 8px var(--neon-green)) drop-shadow(0 0 16px var(--neon-green)); }
}

@keyframes megaGlowBorder {
    0%   { box-shadow: 0 0 8px var(--neon-green), 0 0 16px var(--neon-green); }
    33%  { box-shadow: 0 0 8px var(--neon-cyan), 0 0 16px var(--neon-cyan); }
    66%  { box-shadow: 0 0 8px var(--neon-magenta), 0 0 16px var(--neon-magenta); }
    100% { box-shadow: 0 0 8px var(--neon-green), 0 0 16px var(--neon-green); }
}

@keyframes megaLineGlow {
    0%   { box-shadow: 0 0 6px var(--neon-green), 0 0 12px var(--neon-green); background: var(--neon-green); }
    33%  { box-shadow: 0 0 6px var(--neon-cyan), 0 0 12px var(--neon-cyan); background: var(--neon-cyan); }
    66%  { box-shadow: 0 0 6px var(--neon-magenta), 0 0 12px var(--neon-magenta); background: var(--neon-magenta); }
    100% { box-shadow: 0 0 6px var(--neon-green), 0 0 12px var(--neon-green); background: var(--neon-green); }
}

@keyframes moreGlow {
    0%   { box-shadow: 0 0 4px var(--neon-green), 0 0 8px var(--neon-green); }
    33%  { box-shadow: 0 0 4px var(--neon-cyan), 0 0 8px var(--neon-cyan); }
    66%  { box-shadow: 0 0 4px var(--neon-magenta), 0 0 8px var(--neon-magenta); }
    100% { box-shadow: 0 0 4px var(--neon-green), 0 0 8px var(--neon-green); }
}

@keyframes pulseGlow {
    0%   { filter: blur(6px); opacity: 0.5; }
    50%  { filter: blur(12px); opacity: 1; }
    100% { filter: blur(6px); opacity: 0.5; }
}

@keyframes miniNavGlowIntro {
    0%   { transform: translateY(-140%); height: 72px; box-shadow: 0 0 0 rgba(var(--neon-green-rgb),0); opacity: 0; }
    30%  { transform: translateY(0); height: 72px; box-shadow: 0 0 22px rgba(var(--neon-green-rgb),0.8); opacity: 1; }
    60%  { height: 62px; box-shadow: 0 0 32px rgba(var(--neon-green-rgb),0.6); }
    100% { height: 55px; box-shadow: 0 0 0 rgba(var(--neon-green-rgb),0); }
}

@keyframes miniLogoGlow {
    0%   { filter: drop-shadow(0 0 0px var(--neon-green)); }
    40%  { filter: drop-shadow(0 0 12px var(--neon-green)); }
    70%  { filter: drop-shadow(0 0 20px var(--neon-green)); }
    100% { filter: drop-shadow(0 0 0px var(--neon-green)); }
}

@keyframes neoGlow {
    0%   { box-shadow: 0 0 8px var(--neon-green), 0 0 16px var(--neon-green); }
    33%  { box-shadow: 0 0 8px var(--neon-cyan), 0 0 16px var(--neon-cyan); }
    66%  { box-shadow: 0 0 8px var(--neon-magenta), 0 0 16px var(--neon-magenta); }
    100% { box-shadow: 0 0 8px var(--neon-green), 0 0 16px var(--neon-green); }
}

/* =====================================================
   PULSE‑Animationen, Glow‑Pulse, Text‑Pulse, Logo‑Pulse, Ribbon‑Pulse
   ===================================================== */
   
@keyframes badgePulse {
    0%   { box-shadow: 0 0 10px rgba(var(--neon-green-rgb),0.35); }
    50%  { box-shadow: 0 0 18px rgba(var(--neon-green-rgb),0.55); }
    100% { box-shadow: 0 0 10px rgba(var(--neon-green-rgb),0.35); }
}

@keyframes neonInfoPulse {
    0%   { box-shadow: 0 0 6px var(--neon-green), 0 0 12px var(--neon-green); border-color: var(--neon-green); }
    33%  { box-shadow: 0 0 6px var(--neon-cyan), 0 0 12px var(--neon-cyan); border-color: var(--neon-cyan); }
    66%  { box-shadow: 0 0 6px var(--neon-magenta), 0 0 12px var(--neon-magenta); border-color: var(--neon-magenta); }
    100% { box-shadow: 0 0 6px var(--neon-green), 0 0 12px var(--neon-green); border-color: var(--neon-green); }
}

@keyframes arrowPulse {
    0%   { text-shadow: 0 0 6px rgba(var(--neon-green-rgb),0.5); }
    50%  { text-shadow: 0 0 18px rgba(var(--neon-green-rgb),0.9); }
    100% { text-shadow: 0 0 6px rgba(var(--neon-green-rgb),0.5); }
}

/* =====================================================
   PULSE‑Animationen, Select‑Border, H1‑Pulse, Category‑Pulse
   ===================================================== */

@keyframes selectBorderPulse {
    0%   { border-color: var(--neon-green);   box-shadow: 0 0 4px var(--neon-green); }
    33%  { border-color: var(--neon-cyan);    box-shadow: 0 0 4px var(--neon-cyan); }
    66%  { border-color: var(--neon-magenta); box-shadow: 0 0 4px var(--neon-magenta); }
    100% { border-color: var(--neon-green);   box-shadow: 0 0 4px var(--neon-green); }
}

@keyframes h1PulseDark {
    0%   { box-shadow: 0 0 8px rgba(var(--neon-green-rgb),0.25); }
    50%  { box-shadow: 0 0 18px rgba(var(--neon-green-rgb),0.55); }
    100% { box-shadow: 0 0 8px rgba(var(--neon-green-rgb),0.25); }
}

@keyframes h1PulseLight {
    0%   { box-shadow: 0 0 6px rgba(var(--neon-green-rgb),0.25); }
    50%  { box-shadow: 0 0 14px rgba(var(--neon-green-rgb),0.45); }
    100% { box-shadow: 0 0 6px rgba(var(--neon-green-rgb),0.25); }
}

@keyframes catImgPulse {
    0%   { filter: drop-shadow(0 0 2px var(--neon-green)) drop-shadow(0 0 8px var(--neon-green)); }
    33%  { filter: drop-shadow(0 0 2px var(--neon-cyan))  drop-shadow(0 0 8px var(--neon-cyan)); }
    66%  { filter: drop-shadow(0 0 2px var(--neon-magenta)) drop-shadow(0 0 8px var(--neon-magenta)); }
    100% { filter: drop-shadow(0 0 2px var(--neon-green)) drop-shadow(0 0 8px var(--neon-green)); }
}

@keyframes catTitlePulse {
    0% {
        text-shadow: 0 0 8px var(--neon-green), 0 0 16px var(--neon-green);
        color: var(--text-green-soft);
    }
    33% {
        text-shadow: 0 0 8px var(--neon-cyan), 0 0 16px var(--neon-cyan);
        color: var(--text-cyan-soft);
    }
    66% {
        text-shadow: 0 0 8px var(--neon-magenta), 0 0 16px var(--neon-magenta);
        color: var(--text-magenta-soft);
    }
    100% {
        text-shadow: 0 0 8px var(--neon-green), 0 0 16px var(--neon-green);
        color: var(--text-green-soft);
    }
}

/* =====================================================
   PULSE‑Animationen, Logo‑Pulse, Ribbon‑Pulse, Aura‑Pulse
   ===================================================== */
   
@keyframes logoPulse {
    0%   { filter: drop-shadow(0 0 6px rgba(var(--neon-green-rgb),0.45)); }
    50%  { filter: drop-shadow(0 0 12px rgba(var(--neon-green-rgb),0.75)); }
    100% { filter: drop-shadow(0 0 6px rgba(var(--neon-green-rgb),0.45)); }
}

@keyframes logoPulseColor {
    0%   { filter: drop-shadow(0 0 4px rgba(var(--neon-green-rgb),0.45)) drop-shadow(0 0 8px rgba(var(--neon-green-rgb),0.35)); }
    25%  { filter: drop-shadow(0 0 6px rgba(255,255,255,0.55)) drop-shadow(0 0 12px rgba(255,255,255,0.45)); }
    50%  { filter: drop-shadow(0 0 8px rgba(var(--neon-cyan-bright-rgb),0.55)) drop-shadow(0 0 14px rgba(var(--neon-cyan-bright-rgb),0.45)); }
    75%  { filter: drop-shadow(0 0 6px rgba(255,255,255,0.55)) drop-shadow(0 0 12px rgba(255,255,255,0.45)); }
    100% { filter: drop-shadow(0 0 4px rgba(var(--neon-green-rgb),0.45)) drop-shadow(0 0 8px rgba(var(--neon-green-rgb),0.35)); }
}

@keyframes logoAuraPulse {
    0%   { filter: brightness(1.15) contrast(1.1) drop-shadow(0 0 6px var(--neon-green)) drop-shadow(0 0 12px var(--neon-green)); }
    50%  { filter: brightness(1.35) contrast(1.2) drop-shadow(0 0 12px var(--neon-cyan)) drop-shadow(0 0 22px var(--neon-cyan)); }
    100% { filter: brightness(1.15) contrast(1.1) drop-shadow(0 0 6px var(--neon-green)) drop-shadow(0 0 12px var(--neon-green)); }
}

@keyframes ribbonPulse {
    0% {
        box-shadow: 0 0 6px var(--neon-green), 0 0 12px var(--neon-green);
        border-color: var(--neon-green);
        color: var(--text-green-soft);
    }
    33% {
        box-shadow: 0 0 6px var(--neon-cyan), 0 0 12px var(--neon-cyan);
        border-color: var(--neon-cyan);
        color: var(--text-cyan-soft);
    }
    66% {
        box-shadow: 0 0 6px var(--neon-magenta), 0 0 12px var(--neon-magenta);
        border-color: var(--neon-magenta);
        color: var(--text-magenta-soft);
    }
    100% {
        box-shadow: 0 0 6px var(--neon-green), 0 0 12px var(--neon-green);
        border-color: var(--neon-green);
        color: var(--text-green-soft);
    }
}

/* =====================================================
   BOUNCE‑Animationen, Bewegung, Wobble, Wiggle, Slide‑Effekte
   ===================================================== */

@keyframes navBounceDark {
    0%   { transform: translateY(-140%); }
    55%  { transform: translateY(10px); }
    75%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

@keyframes navBounce {
    0%   { transform: translateY(-120%); }
    60%  { transform: translateY(6px); }
    80%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

@keyframes homeWiggleBounce {
    0%   { transform: rotate(0deg) scale(1.15); }
    15%  { transform: rotate(10deg) scale(1.15); }
    30%  { transform: rotate(-10deg) scale(1.15); }
    45%  { transform: rotate(8deg) scale(1.15); }
    60%  { transform: rotate(-8deg) scale(1.15); }
    75%  { transform: rotate(4deg) scale(1.15); }
    90%  { transform: rotate(-2deg) scale(1.15); }
    100% { transform: rotate(0deg) scale(1.15); }
}

@keyframes added-breathe {
    0%   { text-shadow: 0 0 4px rgba(var(--neon-green-rgb),0.35); }
    50%  { text-shadow: 0 0 10px rgba(var(--neon-green-rgb),0.65); }
    100% { text-shadow: 0 0 4px rgba(var(--neon-green-rgb),0.35); }
}

@keyframes toggleWobble {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-2px); }
    40%  { transform: translateX(2px); }
    60%  { transform: translateX(-1px); }
    80%  { transform: translateX(1px); }
    100% { transform: translateX(0); }
}

@keyframes arrowWiggle {
    0%   { transform: translateY(-50%) rotate(0deg); }
    30%  { transform: translateY(-50%) rotate(12deg); }
    60%  { transform: translateY(-50%) rotate(-12deg); }
    100% { transform: translateY(-50%) rotate(0deg); }
}

@keyframes orbitGlow {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =====================================================
   FADE / INTRO / ZOOM‑Animationen
   ===================================================== */

@keyframes logoIntro {
    0% {
        opacity: 0;
        filter:
            brightness(0.6)
            contrast(0.8)
            drop-shadow(0 0 0px var(--neon-green));
    }
    40% {
        opacity: 1;
        filter:
            brightness(1.55)
            contrast(1.25)
            drop-shadow(0 0 22px var(--neon-green))
            drop-shadow(0 0 32px var(--neon-cyan));
    }
    100% {
        opacity: 1;
        filter:
            brightness(1.2)
            contrast(1.15)
            drop-shadow(0 0 6px var(--neon-green))
            drop-shadow(0 0 12px var(--neon-green));
    }
}

@keyframes badgeFlyIn {
    0%   { opacity: 0; transform: translateY(-20px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes logoZoomIn {
    0%   { transform: scale(0.88); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* =====================================================
   SPECIAL / ORBIT / FLASH‑Animationen
   ===================================================== */

@keyframes cardOrbitOnce {
    0%   { transform: rotate(0deg); opacity: 0.8; }
    100% { transform: rotate(360deg); opacity: 0; }
}

@keyframes closeOrbit {
    0%   { transform: rotate(0deg); opacity: 0.8; }
    100% { transform: rotate(360deg); opacity: 0; }
}

@keyframes closeExplode {
    0%   { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

@keyframes headerExplode {
    0%   { width: 0; height: 0; opacity: 1; }
    100% { width: 180%; height: 180%; opacity: 0; }
}

@keyframes headerBadgePulse {
    0%   { box-shadow: 0 0 6px var(--red-60); }
    50%  { box-shadow: 0 0 12px var(--red-90); }
    100% { box-shadow: 0 0 6px var(--red-60); }
}

@keyframes neonBreath {
    0%   { filter: drop-shadow(0 0 10px var(--neon-green))   drop-shadow(0 0 20px var(--neon-green)); }
    33%  { filter: drop-shadow(0 0 10px var(--neon-cyan))    drop-shadow(0 0 20px var(--neon-cyan)); }
    66%  { filter: drop-shadow(0 0 10px var(--neon-magenta)) drop-shadow(0 0 20px var(--neon-magenta)); }
    100% { filter: drop-shadow(0 0 10px var(--neon-green))   drop-shadow(0 0 20px var(--neon-green)); }
}

@keyframes breathe {
    0%   { transform: scale(1);     box-shadow: 0 0 8px var(--ng-35); }
    50%  { transform: scale(1.06);  box-shadow: 0 0 14px var(--ng-55); }
    100% { transform: scale(1);     box-shadow: 0 0 8px var(--ng-35); }
}

@keyframes traffic-breathe {
    0%   { transform: scale(1);   box-shadow: 0 0 8px var(--ng-55); }
    50%  { transform: scale(1.15); box-shadow: 0 0 14px var(--ng-85); }
    100% { transform: scale(1);   box-shadow: 0 0 8px var(--ng-55); }
}

@keyframes glow-green {
    0%   { transform: scale(1);   box-shadow: 0 0 8px var(--neon-green), inset 0 0 4px var(--black-40); }
    50%  { transform: scale(1.15); box-shadow: 0 0 16px var(--neon-green), inset 0 0 6px var(--black-50); }
    100% { transform: scale(1);   box-shadow: 0 0 8px var(--neon-green), inset 0 0 4px var(--black-40); }
}

@keyframes glow-yellow {
    0%   { transform: scale(1);   box-shadow: 0 0 6px var(--neon-yellow), inset 0 0 3px var(--black-40); }
    50%  { transform: scale(1.10); box-shadow: 0 0 12px var(--neon-yellow), inset 0 0 5px var(--black-50); }
    100% { transform: scale(1);   box-shadow: 0 0 6px var(--neon-yellow), inset 0 0 3px var(--black-40); }
}

@keyframes glow-red {
    0%   { transform: scale(1);   box-shadow: 0 0 8px var(--neon-red), inset 0 0 4px var(--black-40); }
    50%  { transform: scale(1.20); box-shadow: 0 0 18px var(--neon-red), inset 0 0 6px var(--black-50); }
    100% { transform: scale(1);   box-shadow: 0 0 8px var(--neon-red), inset 0 0 4px var(--black-40); }
}

@keyframes rating-breathe {
    0%   { opacity: 0.75; text-shadow: 0 0 4px var(--ng-35); }
    50%  { opacity: 1;    text-shadow: 0 0 8px var(--ng-55); }
    100% { opacity: 0.75; text-shadow: 0 0 4px var(--ng-35); }
}

@keyframes delivery-breathe {
    0%   { text-shadow: 0 0 4px var(--ng-45); }
    50%  { text-shadow: 0 0 10px var(--ng-75); }
    100% { text-shadow: 0 0 4px var(--ng-45); }
}

@keyframes tax-breathe {
    0%   { text-shadow: 0 0 4px var(--ng-45); }
    50%  { text-shadow: 0 0 10px var(--ng-75); }
    100% { text-shadow: 0 0 4px var(--ng-45); }
}

@keyframes zoomtext-breathe {
    0%   { text-shadow: 0 0 4px var(--ng-35); }
    50%  { text-shadow: 0 0 10px var(--ng-65); }
    100% { text-shadow: 0 0 4px var(--ng-35); }
}

@keyframes neonPulse {
    0% {
        box-shadow:
            0 0 6px var(--ng-40),
            0 0 12px var(--ng-25);
    }
    50% {
        box-shadow:
            0 0 10px var(--ng-70),
            0 0 18px var(--ng-45);
    }
    100% {
        box-shadow:
            0 0 6px var(--ng-40),
            0 0 12px var(--ng-25);
    }
}
	
@keyframes toggleColorPulse {
    0% {
        filter: drop-shadow(0 0 6px var(--neon-green))
                drop-shadow(0 0 12px var(--neon-green));
        color: var(--neon-green);
    }
    33% {
        filter: drop-shadow(0 0 6px var(--neon-cyan))
                drop-shadow(0 0 12px var(--neon-cyan));
        color: var(--neon-cyan);
    }
    66% {
        filter: drop-shadow(0 0 6px var(--neon-magenta))
                drop-shadow(0 0 12px var(--neon-magenta));
        color: var(--neon-magenta);
    }
    100% {
        filter: drop-shadow(0 0 6px var(--neon-green))
                drop-shadow(0 0 12px var(--neon-green));
        color: var(--neon-green);
    }
}

@keyframes logoChromeSweep {
    0%   { transform: translateX(-120%); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateX(140%); opacity: 0; }
}

@keyframes offcanvasFlash {
    0%   { opacity: 0; border-color: rgba(var(--neon-green-rgb),0); }
    40%  { opacity: 1; border-color: rgba(var(--neon-green-rgb),1); }
    100% { opacity: 0; border-color: rgba(var(--neon-green-rgb),0); }
}

/* =====================================================
   Shine‑Animationen, DIAGONAL‑SHINE / LOGO‑SHINE
   ===================================================== */

@keyframes logoDiagonalShine {
    0%   { transform: translate(-120%, -120%) rotate(35deg); opacity: 0.35; }
    50%  { opacity: 0.55; }
    100% { transform: translate(120%, 120%) rotate(35deg); opacity: 0.35; }
}

/* =====================================================
   Shine‑Animationen, NEON‑SHINE (A/B)
   ===================================================== */

@keyframes neonShineA {
    0%   { left: -60%; opacity: 0.2; }
    25%  { opacity: 1; }
    50%  { left: 120%; opacity: 1; }
    75%  { opacity: 0.4; }
    100% { left: 120%; opacity: 0; }
}

@keyframes neonShineB {
    0%   { right: -60%; opacity: 0.2; }
    25%  { opacity: 1; }
    50%  { right: 120%; opacity: 1; }
    75%  { opacity: 0.4; }
    100% { right: 120%; opacity: 0; }
}

/* =====================================================
   Shine‑Animationen, RIBBON‑SHINE / CATEGORY‑TITLE‑SHINE
   ===================================================== */

@keyframes ribbonShine {
    0%   { left: -80%; opacity: 0.2; }
    40%  { opacity: 1; }
    100% { left: 140%; opacity: 0; }
}

@keyframes catTitleShine {
    0%   { left: -80%; opacity: 0.2; }
    40%  { opacity: 1; }
    100% { left: 150%; opacity: 0; }
}

/* =====================================================
   Shine‑Animationen, TAB‑SHINE / TAB‑NEON‑SHINE
   ===================================================== */

@keyframes tab-shine {
    0%   { left: -60%; opacity: 0; }
    50%  { opacity: 0.9; }
    100% { left: 160%; opacity: 0; }
}

@keyframes neonTabShine {
    0%   { left: -60%; opacity: 0.2; }
    40%  { opacity: 1; }
    100% { left: 160%; opacity: 0; }
}

/* =====================================================
   Shine‑Animationen, NEO‑SHINE / IMAGE‑SHINE
   ===================================================== */

@keyframes neoShine {
    0%   { left: -60%; opacity: 0; }
    50%  { opacity: 1; }
    100% { left: 160%; opacity: 0; }
}

@keyframes neonImgShine {
    0%   { left: -60%; opacity: 0.2; }
    40%  { opacity: 1; }
    100% { left: 160%; opacity: 0; }
}

/* =====================================================
   Shine‑Animationen, BADGE‑SHINE
   ===================================================== */

@keyframes badgeShine {
    0%   { top: -120%; left: -60%; }
    50%  { top: 120%;  left: 60%; }
    100% { top: -120%; left: -60%; }
}

/* =====================================================
   Shine‑Animationen, SHINE‑MOVE
   ===================================================== */

@keyframes shineMove {
    0%   { top: -130%; left: -90%; }
    100% { top: 130%; left: 90%; }
}

/* =====================================================
   Shine‑Animationen, MINI‑NAV‑SHINE
   ===================================================== */

@keyframes miniNavShine {
    0%   { top: -130%; left: -90%; }
    100% { top: 130%; left: 90%; }
}

/* =====================================================
   Shine‑Animationen, SHINE‑SWIPE (Standard‑Swipe)
   ===================================================== */

@keyframes shineSwipe {
    0%   { top: -120%; left: -60%; }
    50%  { top: 120%;  left: 60%; }
    100% { top: -120%; left: -60%; }
}

/* =====================================================
   Shine‑Animationen, MSN‑SHINE (Mobile Sticky Nav)
   ===================================================== */

@keyframes msnShine {
    0%   { top: -160%; left: -90%; }
    100% { top: 160%; left: 90%; }
}

/* =====================================================
   Shine‑Animationen, LOGO‑COLOR‑SHINE
   ===================================================== */

@keyframes logoColorShine {
    0%   { top: -120%; left: -80%; }
    100% { top: 120%; left: 80%; }
}

/* =====================================================
   Shine‑Animationen, NEON‑SHINE (Full Swipe)
   ===================================================== */

@keyframes neonShine {
    0%   { top: -160%; left: -90%; }
    100% { top: 160%; left: 90%; }
}

/* =====================================================
   Shine‑Animationen, SHINE‑SWIPE‑FULL (für Buttons / Search‑Button)
   ===================================================== */

@keyframes shineSwipeFull {
    0%   { transform: translateX(-120%) rotate(25deg); }
    60%  { transform: translateX(120%) rotate(25deg); }
    100% { transform: translateX(120%) rotate(25deg); }
}

/* =====================================================
   GRADIENT‑MOVE / BACKGROUND‑MOVE
   ===================================================== */

@keyframes navGradientMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =====================================================
   MINI‑LOGO‑DROP (Intro‑Drop‑Animation)
   ===================================================== */

@keyframes miniLogoDrop {
    0%   { transform: translateY(-26px) scale(1.45); opacity: 0; }
    50%  { transform: translateY(-8px) scale(1.30); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* =====================================================
   MINI‑ICON‑STAGGER (Einzel‑Icon‑Einblendung)
   ===================================================== */

@keyframes miniIconStagger {
    0%   { transform: translateX(32px); opacity: 0; }
    60%  { transform: translateX(6px); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}

/* =====================================================
   MINI‑ICON‑ROTATE (Einblendung + Rotation)
   ===================================================== */

@keyframes miniIconRotate {
    0%   { transform: translateX(32px) rotate(-25deg); opacity: 0; }
    60%  { transform: translateX(6px) rotate(-8deg); opacity: 1; }
    100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}

/* =====================================================
   HEADER‑BADGE‑ORBIT (Orbit‑Effekt)
   ===================================================== */

@keyframes headerBadgeOrbit {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =====================================================
   CARD‑BORDER‑FLASH (Flash‑Effekt für Karten)
   ===================================================== */

@keyframes cardBorderFlash {
    0% {
        opacity: 0;
        border-color: rgba(var(--neon-green-rgb),0);
    }
    40% {
        opacity: 1;
        border-color: rgba(var(--neon-green-rgb),0.9);
        box-shadow:
            0 0 18px rgba(var(--neon-green-rgb),0.8),
            0 0 28px rgba(var(--neon-cyan-rgb),0.6);
    }
    100% {
        opacity: 0;
        border-color: rgba(var(--neon-green-rgb),0);
    }
}