/*------S 1*/
.content-box{ 
    position:absolute;
    width:80vw;
   
}




/*--------------------------*/
section:first-of-type {background: linear-gradient(180deg, rgba(32,32,32,0) 40%, rgba(32,32,32,0.5) 100%);}
 

/*--------------------------*/
.hrblumberg{
    filter: drop-shadow(0px 5px 2px rgba(32,32,32, 0.65));
    z-index: 200;
    position: relative;
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
}




h1, h2{color: #fdfdfd; text-shadow: 0px 3px 1px rgba(32,32,32,0.65);}



h1{
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 2px;}

span{  
    display: inline-block; /* Sorgt dafür, dass die Wörter in einer Zeile bleiben */
    word-wrap: break-word; /* Für ältere Browser */
    overflow-wrap: break-word; /* Für modernere Browser */
    hyphens: auto; /* Optional: automatisches Hinzufügen von Trennstrichen */}


h2{
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;}








/*--------------------------*/
.scrollbluetenbox{ 
    position: absolute; 
    width: auto; 
    height: auto;
    background-repeat: no-repeat;
}

@media screen and (orientation:landscape) and (min-width: 480px) and (max-width: 1439px){.scrollbluetenbox{top:5vh; right:3vw;}} 
@media screen and (orientation:landscape) and (min-width: 1440px) {.scrollbluetenbox{bottom:5em; right:5em;}} 


#scrollbluete-bg{
    position: absolute;
    background-image: url(../../../images/home/scrollbluete-bg.svg);
    background-repeat: no-repeat;
    filter: drop-shadow(0px 8px 8px rgba(32, 32, 32, 1));
}


#scrollbluete-inner{
    animation: rotating-left 20s linear infinite; 
    background-image: url(../../../images/home/scrollbluete-inner.svg); 
    background-repeat: no-repeat;
}

#scrollbluete-middle-b{ 
    position: absolute;
    animation: rotating-left 30s linear infinite; 

    background-image: url(../../../images/home/scrollbluete-middle-b.svg); 
    background-repeat: no-repeat;
}

#scrollbluete-middle-a{ 
    position: absolute;
    animation: rotating-left 40s linear infinite; 

    background-image: url(../../../images/home/scrollbluete-middle-a.svg); 
    background-repeat: no-repeat;
}


#scrollbluete-outer{ 
    position: absolute;
    animation: rotating-left 50s linear infinite; 
    background-image: url(../../../images/home/scrollbluete-outer.svg); 
    background-repeat: no-repeat;
}


@keyframes rotating-left{
	0% {transform: rotate(0);}
	100% {transform: rotate(1turn);}
}
@keyframes rotating-right{
	0% {transform: rotate(0);}
	100% {transform: rotate(-1turn);}
}