main {
    background-color: var(--color-white);
    background-size: auto, auto;

}

.aktuelles {
    color: var(--color-black);
    gap:0;
}

/* header {
    background-color: var(--color-light) !important;
  } */

/*header .header__logo{
    background-image: url('../../images/siien_logo_invertiert.svg');
}

header .header__btn-nav {
    stroke: var(--color-black);
}*/


.aktuelles .text-component {
    padding-left: var(--space-main-padding-small); 
    padding-right: var(--space-main-padding-large); 
    /* padding-bottom: calc(var(--space-large) - var(--space-extra-small)); */
    display: grid;
    gap: var(--space-small);
    padding-top: 100px;
}

@media (min-width: 500px) { 
    .aktuelles .text-component {
        padding-top: 180px;
    }
}

@media (min-width: 1010px) {
    .aktuelles .text-component{
        max-width: 85%;
    }
}

.aktuelles .wrapper {
    gap: 1vw;
    padding: var(--space-large) 1vw 1vw 1vw;
}


@media (min-width: 670px) {
    .aktuelles .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    }

    @media (max-width: 670px) {


    .aktuelles .wrapper {
        gap: 2vw;
        display: grid;
        padding: var(--space-medium) 2vw 2vw 2vw;
 
    }

    .blog .wrapper p {
        font-size: 0.8rem;
        line-height: 1.2rem;
        
    }

    .blog__date {
    font-size: var(--font-size-small) !important;
    padding-top: 0;
    }

}

@media (min-width: 1240px) {
    .aktuelles .wrapper {
    grid-template-columns: repeat(4, 1fr);
    }
}

.blog {
    position: relative;
}

.blog__headline {
    font-size: 24px;
    line-height: 1.3rem;
  
}

.blog__date {
    font-size: var(--font-size-medium);
    padding-top: 5px;
}

.blog__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.blog__image-wrapper {
    aspect-ratio: 1;
    position: relative;
}

.blog__overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 5;
}

.blog__overlay--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 20;
}

.blog__background {
    position: absolute;
    inset: 0;
    background-color: var(--color-pink);
}

.blog__description {
    position: relative;
    z-index: 21;
    color: white;
}

.blog__btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent;
    border: none;
    cursor: pointer;
}

.header__btn-nav--inactive svg {
    animation-name: color-inactive-scrolled;
}

.header__btn-nav--active svg {
    animation-name: color-active-scrolled;
}

.blog__description-scroll {
    position: absolute;
    inset: 1rem;
    z-index: 2;

    box-sizing: border-box;

    top: var(--space-small);
    right: var(--space-small);
    bottom: var(--space-small);
    left: var(--space-small);

    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;

    padding-right: 0.5rem;

    color: var(--color-white);

    -webkit-overflow-scrolling: touch;
}