/*--------------------------------------------header typo */
header div:nth-child(2) {position: absolute; right:75px;}


/*--------------------------------------------header zitat */
header div:first-child span{display:none;}
@media only screen and (min-width: 548px){header div:first-child span {display:block;}}


/*-------------------------------------------- noehornstern */
.stern {left:10vw;}
@media only screen and (orientation:portrait){.stern {top:25vh;}}
@media only screen and (orientation:landscape){.stern {top:50vh;}}

/*--------------------------------------------z-index > container > stern*/
.container-out:nth-child(2) {z-index: 4;}
.container-out:nth-child(4) {z-index: 4;}


/*--------------------------------------------first-container Index*/
@media only screen and (orientation: portrait) and (max-width:568px){.container-out:first-child{padding-top:20vh; padding-bottom:20vh;}}
@media only screen and (orientation: portrait) and (min-width:569px){.container-out:first-child{padding-top:20vh; padding-bottom:20vh;}}


@media only screen and (orientation: landscape) and (max-height:568px){.container-out:first-child{padding-top:15vh; padding-bottom:15vh;}}
@media only screen and (orientation: landscape) and (min-height:569px){.container-out:first-child{padding-top:25vh; padding-bottom:25vh;}}


/*--------------------------------------------Story-Bilder */
.comic-desktop, .comic-mobile{display:none; width: 100%; }
.comic-desktop{margin: 3px 0;} 


@media only screen and (max-width:568px) and (orientation: portrait){.comic-mobile{display:block;}}
@media only screen and (min-width:569px) and (orientation: portrait){.comic-desktop{display:block;}}

@media only screen and (orientation: landscape){.comic-desktop{display:block;}}



/*-------------------------------------------Leistung, Kosten, Termin */

.row h1, .row p{line-height: 0.7;}

@media only screen and (orientation: portrait){
.container-out:nth-of-type(5n){margin-top: 10vh;}
.column:first-of-type{display: flex; justify-content:center;} 
.column span{display: inline-block; width:100%; padding:1.5vh 0 5vh 0; text-align: center; background-image: radial-gradient(rgba(255,255,255,1) 25%, rgba(255,255,255,0) 70%);}
.row:nth-of-type(2n){margin-top: 5vh; margin-bottom: 5vh} 
 
}


@media only screen and (orientation: landscape){   
.container-out:nth-of-type(5n){margin-top: 15vh;}
    
.row{
            display: flex;
            flex-direction: row;      /* Elemente nebeneinander */
            justify-content: center;   /* Zentriert horizontal (in der Row) */
            align-items: center;       /* Zentriert vertikal */         /* Volle Höhe des Viewports */} 
 
.column{display: flex; width:50%;}    
.column:first-of-type{justify-content:right;}
    
.column:nth-child(2){
            display: flex;
            flex-direction: column;    /* Inhalt vertikal anordnen */
            justify-content: center;   /* Inhalt innerhalb der Spalten vertikal zentrieren */
            text-align: left;
            
    }

.column span{display: inline-block; background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));}

}   



@media only screen and (orientation: portrait) and (max-width:568px){ 
.row:nth-of-type(2n){margin-top: 10vh; margin-bottom: 10vh} 

}


@media only screen and (orientation: portrait) and (min-width:569px){ 
.row:nth-of-type(2n){margin-top: 5vh; margin-bottom: 5vh} 
}



@media only screen and (orientation: landscape) and (max-height:568px){ 
.row{ height: 70vh;} 
}

@media only screen and (orientation: landscape) and (min-height:569px){ 
.row{ height: 35vh;} 
}



@media only screen and (orientation: landscape) and (max-width:800px){ 
.column:first-of-type{width:40%;}
.column:last-of-type{width:60%;}
}
    
    


/*-------------------------------------------footer */
footer{margin-top: 10vh;}