.hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--color-border);
    height: 35rem;
}

.hero--compact {
    height: 24rem;
}

@media (max-width: 1000px) {
    .hero {
        grid-template-columns: 2fr 1fr;
        height: auto;
    }

}

@media (max-width: 700px) {
    .hero {
        grid-template-columns: 1fr;
        height: auto;
    }
}

.hero__main {
    position: relative;
    padding: var(--spacing-lg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 700px) {
    .hero__main {
        height: 18rem;
        padding: var(--spacing-sm);
    }
}

.hero__content {
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    max-width: 60%;
    padding: 2.5rem;
    border-radius: .4rem;
    overflow: hidden;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(3px);
    border-top: 4px solid oklch(
        var(--theme-color-lightness)
        var(--theme-color-chroma)
        var(--category-hue)
    );
    color: black;
}

@media (max-width: 1000px) {
    .hero__content {
        left: 1.5rem;
        bottom: 1.5rem;
        max-width: 80%;
        padding: 2rem;
    }
}

@media (max-width: 700px) {
    .hero__content {
        left: 1rem;
        bottom: 1rem;
        max-width: 80%;
        padding: 1.5rem;
    }
}

.hero__title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.25rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Anzahl der Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
}

.hero__title a {
    color: inherit;
    text-decoration: none;
}

.hero__title a:hover {
    text-decoration: underline;
}

.hero__excerpt {
    margin: 0 0 .75rem;
    line-height: 1.6;
    color: var(--color-text-light);
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Anzahl der Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 3;
}

.hero__category {
    position: absolute;
    top: 0;
    left: 0;
    /*width: 100%;*/
    /*padding: .3rem .5rem;*/
    /*background: var(--color-first);*/
    /*color: white;*/
}

.hero__button {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: .1rem .5rem;
    border-top-left-radius: .4rem;
    background: var(--color-primary);
    font-weight: 600;
    color: white;
    text-decoration: none;
}

.hero__button:hover {
    text-decoration: underline;
 }

.hero__ticker {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

@media (max-width: 700px) {
    .hero__ticker {
        height: 18rem;
    }
}

.hero__ticker-border {
    overflow: hidden;
}

.hero__ticker-items {
    flex: 1;
    overflow: hidden;   /* später auto */
    min-height: 0;      /* GANZ wichtig! */
}

.hero__ticker-item {
    border-left: .25rem solid;
    border-left-color: oklch(
            var(--theme-color-lightness)
            var(--theme-color-chroma)
            var(--category-hue)
    );
    border-bottom: 1px solid;
    border-bottom-color: var(--color-border);
}

.hero__ticker-title {
    margin-top: 0;
    margin-bottom: 0;
}

.hero__ticker-excerpt {
    margin-top: 0;
    margin-bottom: 0;
}

.hero__ticker-link {
    display: block;
    padding: 1rem;
    color: inherit;
    text-decoration: none;
    transition: background-color .2s ease;
}

.hero__ticker-link:hover {
    background: oklch(
            var(--theme-color-lightness-light)
            var(--theme-color-chroma-light)
            var(--category-hue)
    );
}

.hero__ticker-title {
    margin: 0 0 .5rem;
    font-size: 1rem;
    line-height: 1.3;
}

.hero__ticker-excerpt {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--color-text-light);
}