.highlights-text
{

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

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

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

    justify-content: left;

}



.highlights-text-big
{

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

    width: 90%;
    font-size: var(--size-title-small);
    color: var(--webpage-text-color-title);

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

    justify-content: left;


    /*
    text-decoration: underline;
    text-decoration-thickness: 5%;
    text-underline-offset: 9%;
    */

}



.highlights
{

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

    margin-top: 3%;
    padding: 1%;

    flex-direction: column;
    /*background-color: #1C191F;*/

    /*background-color: #1c191f41;*/

}



.highlight-container
{

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

    width: 100%;
    flex-wrap: wrap;
    gap: 2vw;

    padding: 1%;

}



.highlight-card
{

    position: relative;

    width: 40%;
    aspect-ratio: 16/9;

    background-color: rgb(63, 63, 63);

    transition: scale 0.33s;
    
    /*overflow: hidden;*/

    flex-direction: column;

}



.highlight-card:hover
{
    scale: 1.1;
}



.highlight-card-mini
{

    position: relative;

    width: 22%;
    aspect-ratio: 16/9;

    background-color: rgb(63, 63, 63);

    transition: scale 0.33s;
    
    /*overflow: hidden;*/

    flex-direction: column;

}



.highlight-card-mini:hover
{
    scale: 1.15;
}



.highlight-image
{

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

    margin-top: 0%;

}



.highlight-text-box
{

    flex-direction: column;
    
    position: absolute;
    bottom: 0; /* Zwingt den Block ganz nach unten */
    left: 0;
    width: 100%;

}



.highlight-text
{

    font-size: var(--size-text-2);
    font-weight: var(--weight-bold);

    width: 100%;
    margin: 0%;

}



.highlight-text-top
{

    color: var(--webpage-text-color-subtitle);
    background-color: #171717b9;

}



.highlight-text-bottom
{

    color: var(--webpage-text-color-button-dark);
    background-color: var(--webpage-background-color-button-normal);

}



@media (max-width: 1500px) 
{

    .highlight-card-mini
    {
        width: 30%;
    }



    .highlight-card-mini:hover
    {
        scale: 1.12;
    }

}



@media (max-width: 960px) 
{

    .highlight-card
    {

        width: 90%;

    }



    .highlight-card:hover
    {
        scale: 1.075;
    }



    .highlight-card-mini
    {
        width: 45%;
    }



    .highlight-card-mini:hover
    {
        scale: 1.075;
    }

}



@media (max-width: 720px) 
{

    .highlight-card-mini
    {
        width: 80%;
    }



    .highlight-card-mini:hover
    {
        scale: 1.075;
    }

}