#series-heighlight-background-color-1
{
    margin: 0%;
}



.text-image-container
{

    display: flex; 
    align-self: flex-start; 
    align-items: flex-start; 
    justify-content: center; 
    width: 100%;
    aspect-ratio: 8 / 1;

}



.text-container
{

    width: 48%; 
    height: 100%;
    flex: 1; 
    margin: 1%;
    margin-top: 0%;

}



.image-container
{

    width: 45%;
    aspect-ratio: 1 / 1;
    /*border: 1px solid #ccc;*/ /*box umrandung*/
    
    display: flex;
    justify-content: center;
    align-items: center;

}



.image
{

    /* Das Bild behält seine Proportionen und wird nicht verzerrt */
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Optional: Falls das Bild das Quadrat komplett ausfüllen soll */

}



.text-image-container-invert-order
{
    flex-direction: row-reverse;
}



@media (max-width: 960px) 
{

    .text-image-container
    {

        display: flex; 
        align-self: center; 
        align-items: center; 
        justify-content: center; 
        width: 100%;

    }



    .text-image-container
    {
        flex-direction: column-reverse;
    }



    .text-container
    {

        margin: 0%;

        margin-top: 2%;
        margin-left: 2%;

        width: 92%; 
        height: 80%;
        align-self: center;


    }



    .image-container
    {

        width: 90%; 
        height: 50%;

    }

}