.hrblumberg{max-width: 100%;  top:15px; /* Responsive */}



/*---------------------------------------------------------------PORTRAIT*/
@media screen and (orientation:portrait){
    .content-box-in{position:absolute; bottom: 15vh;}
    .typobox {text-align: center;  margin: 0 auto;}
    .hrblumberg{margin: 0 auto;}
    h1{font-size: 5vw;}
    h2{font-size: 4.5vw;}
    .scrollbluetenbox{padding-top: 5%;} 
}

/*--------------------------Max Breite*/
@media screen and (orientation:portrait) and (max-width: 667px){
    .typobox {width: 80vw;}
    .hrblumberg{width: 90%;}
    span{display: inline-block; width: 100%;}

}

/*--------------------------Min Breite*/
@media screen and (orientation:portrait) and (min-width: 668px){
    .typobox {width: 80vw;}
    .hrblumberg{width: 60%;}
    span{display: inline-block; width: auto;}
    h1{font-size: 2.5vw;}
    h2{font-size: 2.5vw;} 

}

/*--------------------------Extra Small Mobile*/
@media screen and (orientation:portrait) and (max-height: 567px) {
    .content-box-in{ bottom: 35vh;}
 
} 


/*--------------------------Small Mobile*/
@media screen and (orientation:portrait) and (min-height: 568px) and (max-height: 767px){
    .scrollbluete {height:115px; width:115px;}
} 


/*--------------------------Medium Tablet*/
@media screen and (orientation:portrait) and (min-height: 768px){
    .scrollbluete {height:125px; width:125px;}
} 
  

/*--------------------------Large Laptop*/
@media screen and (orientation:portrait) and (min-height: 992px) {
    .scrollbluete {height:150px; width:150px;}
} 


/*--------------------------XL Desktop*/
@media screen and (orientation:portrait) and (min-height: 1200px) {
    .scrollbluete {height:180px; width:180px;}
} 


/*--------------------------2XL Desktop*/
@media screen and (orientation:portrait) and (min-height: 1400px) {
    .scrollbluete {height:250px; width:250px;}
} 















/*---------------------------------------------------------------LANDSCAPE*/
@media screen and (orientation:landscape){
    .content-box-in{width:; left: 30px; bottom:13.5vh; position: absolute;}
    .typobox {text-align: left; width:auto;} 
    .hrblumberg{ width:50%;}
    h1{font-size: 2.5vw; line-height: 1;}
    h2{font-size: 2vw;}
    .scrollbluetenbox{position: fixed;} 
} 

/*--------------------------Extra Small Mobile*/
@media screen and (orientation:landscape) and (max-width: 568px){
   
} 


/*-------------------------- Small Mobile*/
@media screen and (orientation:landscape) and (max-width: 767px){
    .scrollbluetenbox{right:25px; top:25px;}
    .scrollbluete {height:80px;width:80px;}    
} 


/*--------------------------Medium Tablet*/
@media screen and (orientation:landscape) and (min-width: 768px) and (max-height: 500px) {
    .scrollbluetenbox{right:25px; bottom:45px;}
    .scrollbluete {height:100px;width:100px;} 
} 


/*--------------------------Large Laptop*/
@media screen and (orientation:landscape) and (min-width: 992px) {
    .hrblumberg{top:20px;}
    .content-box-in{left: 5%;}
    .scrollbluetenbox{right:45px; top:45px;}
    .scrollbluete {height:150px;width:150px;} 
} 


/*--------------------------XL Desktop*/
@media screen and (orientation:landscape) and (min-width: 1200px) {
    .hrblumberg{top:25px;}
    h1{font-size: 2vw;}
    h2{font-size: 1.5vw;}
    .scrollbluetenbox{right:45px; top:45px;}
    .scrollbluete {height:150px;width:150px;}
} 


/*--------------------------2XL Desktop*/
@media screen and (orientation:landscape) and (min-width: 1400px) {
    h1{font-size: 1.5vw;}
    h2{font-size: 1vw;}
    .scrollbluetenbox{right:5%; top:11vh;}
    .scrollbluete {height:160px;width:160px;}
    
    
}