.bo_dy  {
        
            /*
            background: linear-gradient(217deg, #646760, #167874, #f6fb0e);
            
            
            */
            background: linear-gradient(217deg, #646760, #1678741c, #f6fb0e);
            background-size: 600% 600%;


            animation: hinten 37s ease infinite;      
                        
            }
    
            @keyframes hinten   {
                                0%{background-position:0% 40%}
                                50%{background-position:100% 61%}
                                100%{background-position:0% 40%}
                                }    

                                
/*-------------------// translate(10px, 15px); -
Animation, mehrere Layer, deckungsgleich, responsive:
a) umgebendes <div-> pos:relative, width: x%!. 
b) bild1: <div>: width:100%;
  position: absolute;
  top: 50px;
  left: 0; bild1 : Width:100%
c) bild2: pos: absolute, width: 100%. d) keyframe: transform in "%"!!.   */


/*position:absolute; top:0; left:0; - transform:      rotate(-140deg) ;  --*/

*{
    --bubblepos: -18%, -19%; }


.anfibg         {  }

    
.ani, .ani object          { width: 70%;    }
.ani object    {position:absolute; top:0; left:0;} 


#pbucht         { transform: scale(25%); translate:  20% -20%;}      

#k1, #k4             {
                transform: rotate(-140deg)  scale(7%)  ;                    
                animation: move 5s infinite linear;
                }  
                
#k4             {
                transform: rotate(-140deg)  scale(9%)  ;                    
                animation: move 5s infinite linear; animation-delay: 3s;
                }                  
                
                
                
#k3             {
                transform: rotate(40deg)  scale(7%)  ;                    
                animation: park 10s infinite ease-in-out;
                } 
                
                
#baums             {transform: translate( 10%, 20%) scale(1.5) ;}                 
                
#bubble             {animation:  bubble 10s  infinite ease-in-out; }    
           

                    @keyframes bubble {
                    0% { transform: translate( var(--bubblepos)) scale(18%)  ;  opacity: 0;  }
                    40% {transform: translate( var(--bubblepos)) scale(18%); opacity: 0;}
                    
                 
                    43% {transform: translate( var(--bubblepos)) scale(18%)   ; opacity: 0.4;}
                    45% {transform: translate( var(--bubblepos)) scale(20%)   ; opacity: 1;}
                    47% {transform: translate( var(--bubblepos)) scale(18%)   ; opacity: 0.6;}
                    50% { transform: translate( var(--bubblepos)) scale(20%)   ; opacity: 0.7; }
                    70% {opacity: 0;}
                    100% {  transform: translate(  17%, -70%) scale(14%)  ; opacity: 0;}

                    }                  
                
                
                
                
                
   @keyframes move
  {
 	0%      {translate:     8% -55%;  }
 	100%    {translate:     -87% 0%; }
  }
  
  
     @keyframes park
  {
 	0%      {translate:   -70% 0%;  }
        40%  {translate:   -7% -36%;  }
        
        50%  {translate:   -7% -36%;  }
        
 	100%    {translate:    25% -55%; }
  }                                    

  
  
   
#blink          {
                transform:  rotate(40deg)  scale(8%)  ; opacity: 0.8;                   
                animation:  blink 10s infinite ease-in-out, 
                            einaus 1s linear infinite ;               
                }                               



                @keyframes blink
                {
                    0%      {visibility: visible;    translate:   -68% -8%; }
                   
                   
                    40%     {translate:   -4% -38%;  }    
                    
                    50%     {    translate:   -4% -38%;  }
                    60%     { visibility: hidden;}
                    100%    { visibility: hidden;  translate:    30% -54%;  }
                }   
                @keyframes einaus
                {
                    50% { opacity: 0.0; }


                }