.info-card-man-container
{

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    aspect-ratio: 16 / 8;

    flex-direction: column;
    flex-wrap: wrap;
    
}



.info-card-container
{

    display: flex;
    align-items: center;
    justify-content: center;

    width: 50%;
    height: 100%;
    
    flex-direction: column;
    
    flex-wrap: wrap;
    justify-content: flex-start;

    padding: 0%;
    margin: 0%;

}



.title-info
{

    display: flex;
    align-items: center;
    justify-content: center;

    width: 85%;

    font-size: var(--size-subtitle-1);
    color: var(--webpage-text-color-title);

    font-weight: var(--weight-black);

    justify-content: left;
    
}



.description-text-info
{

    width: 85%;
    height: 80%;

    padding: 0%;
    margin: 0%;

    font-size: var(--size-text-2);
    color: var(--webpage-text-color-regular-light);

    font-weight: var(--weight-bold);

    line-height: 1.6;

    /* Das Geheimnis für den perfekten Zeilenumbruch */
    word-wrap: break-word;       /* Altes CSS: Bricht lange Wörter um */
    overflow-wrap: break-word;   /* Modernes CSS: Verhindert das Herausragen von Text */

    overflow: hidden;     /* Schneidet alles ab, was übersteht */
    text-overflow: ellipsis; /* Fügt die "..." am Ende ein */
    
    /* Das wichtigste Attribut für deine Formatierung: */
    white-space: normal;       /* Behält Absätze/Leerzeichen bei UND bricht lange Zeilen um */

    /* Textausrichtung und Struktur */
    text-align: left;            /* Zwingt den Text nach links */

}



.description-text-info-extended-setting
{

    width: 92%;
    height: 90%;

    padding: 2%;

}



.zero-margin
{
    margin: 0%;
}



.info-image
{

    width: 95%;

    padding: 0%;
    margin: 0%;

    aspect-ratio: 16 / 9;

}



.info-container-age-and-co
{

    display: flex;
    align-items: center;
    justify-content: center;

    width: 90%;
    flex-direction: row;

    margin: 0%;
    padding: 3%;

}



.info-age-and-co
{

    width: 35%;

    padding: 0%;
    margin: 0%;

    font-size: var(--size-text-1);
    color: var(--webpage-text-color-regular-dark);

    font-weight: var(--weight-bold);

}



#info-genre
{

    width: 65%;
    text-align: left; 

}



.helper-info
{

    width: 100%;
    height: 50%;

    padding: 1%;
    padding-left: 3%;
    margin: 0%;

    font-size: var(--size-text-2);
    color: var(--webpage-text-color-subtitle);

    font-weight: var(--weight-bold);

    line-height: 1.6;

    /* Das Geheimnis für den perfekten Zeilenumbruch */
    word-wrap: break-word;       /* Altes CSS: Bricht lange Wörter um */
    overflow-wrap: break-word;   /* Modernes CSS: Verhindert das Herausragen von Text */

    overflow: hidden;     /* Schneidet alles ab, was übersteht */
    text-overflow: ellipsis; /* Fügt die "..." am Ende ein */
    
    /* Das wichtigste Attribut für deine Formatierung: */
    white-space: normal;       /* Behält Absätze/Leerzeichen bei UND bricht lange Zeilen um */

    /* Textausrichtung und Struktur */
    text-align: left;            /* Zwingt den Text nach links */

}



#right-data
{

    flex-direction: row;
    justify-content: left;

}



.umbruch-symbol::after 
{

    content: "\A";            /* Das ist das unsichtbare CSS-Zeichen für einen Zeilenumbruch */
    white-space: pre;         /* Zwingt den Browser, den Umbruch auszuführen */

}



#link-container
{
    
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 16 / 1;

    flex-direction: row;
    padding: 0%;
    margin: 0%;

    justify-content: left;

}



.promo-info-card-link
{

    display: flex;
    align-items: center;
    justify-content: center;

    width: 30%;
    height: 50%;

    margin: 1.3%;

    font-size: var(--size-text-special);
    color: var(--webpage-text-color-button-dark);

    background-color: var(--webpage-text-color-regular-normal);

    border-radius: clamp(4px, var(--radius-dynamic), 12px);

    text-decoration: none; /* Entfernt den Unterstrich */

    transition: scale 0.3s;

}



.promo-info-card-link:hover
{
    scale: 1.1;
}



#series-heighlight-background
{
    
    background-color: var(--webpage-background-card-container-dark);

}



#films-heighlight-background
{

    background-color: var(--webpage-background-card-container-light);

}



#series-heighlight-background-color-1
{
    
    background-color: var(--webpage-background-card-container-dark-2);

}



#films-heighlight-background-color-1
{

    background-color: var(--webpage-background-card-container-light-2);

}



#series-heighlight-background-color-2
{
    
    background-color: var(--webpage-background-card-container-dark-3);

}



#films-heighlight-background-color-2
{

    background-color: var(--webpage-background-card-container-light-3);

}



#padding-stuff
{

    margin: 2%;

}



#end-of-page
{

    margin: 0%;

}



.link-button
{

    width: 20%;
    height: 100%;

    margin: 1.3%;

    font-size: var(--size-text-special);
    color: var(--webpage-text-color-button-dark);

    background-color: var(--webpage-text-color-regular-normal);

    border-radius: clamp(4px, var(--radius-dynamic), 12px);

    text-decoration: none; /* Entfernt den Unterstrich */

    transition: scale 0.3s;

}



.link-button:hover
{
    scale: 1.1;
}



#link-button-conatiner
{

    width: 94%;
    height: 3vw;
    align-items: flex-start;

}



.link-button-2
{

    width: 33%;
    height: 100%;

    margin: 1.3%;

    font-size: var(--size-text-special);
    color: var(--webpage-text-color-button-dark);

    background-color: var(--webpage-text-color-regular-normal);

    border-radius: clamp(4px, var(--radius-dynamic), 12px);

    text-decoration: none; /* Entfernt den Unterstrich */

    transition: scale 0.3s;

}



.link-button-2:hover
{
    scale: 1.1;
}



@media (max-width: 1020px) 
{

    .info-card-man-container
    {

        flex-direction: row;
        aspect-ratio: 1 / 1;

    }



    .info-card-container
    {

        width: 100%;
        height: auto;
        margin: 3vh;

    }



    #link-container
    {
        
        flex-direction: column;

        width: 100%;
        aspect-ratio: 16 / 4;

        justify-content: center;

        margin-top: 3vh;

    }



    .promo-info-card-link
    {

        width: 75%;
        height: 20%;

        margin: 1vh;

    }

}



@media (max-width: 800px) 
{

    .info-card-man-container
    {

        flex-direction: row;
        aspect-ratio: 1 / 1;

    }



    .info-card-container
    {

        width: 100%;
        height: auto;
        margin: 3vh;

    }



    #link-container
    {
        
        flex-direction: column;

        width: 100%;
        aspect-ratio: 16 / 4;

        justify-content: center;

        margin-top: 3vh;

    }



    .promo-info-card-link
    {

        width: 75%;
        height: 40%;

        margin: 1vh;

    }

}