/*
 * Hero Header - vollflaechiger Header, Inhalt unten links.
 * Die Mittelzeile wechselt per hero-header.js; ohne JavaScript bleibt die
 * erste Zeile stehen (sie traegt serverseitig schon .-active).
 */

.hero-header {
    --hero-header-gap: clamp(24px, 5vw, 96px);
    --hero-header-ease: cubic-bezier(.2, .8, .2, 1);

    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    height: calc(100vh - 90px);
    height: calc(100svh - 90px);
    min-height: 480px;
    overflow: hidden;
    background: var(--color-business);
    color: #fff;
}

@media (max-width: 1199px) {
    .hero-header {
        height: calc(100vh - 80px);
        height: calc(100svh - 80px);
    }

}

.hero-header__media,
.hero-header__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-header__media img {
    object-fit: cover;
}

/* Gleichmaessige Abdunklung des Bildes - haelt den Text lesbar,
   unabhaengig vom Bildmotiv. */
.hero-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #00000066;
    pointer-events: none;
}

.hero-header__content {
    position: relative;
    z-index: 1;
    max-width: min(100%, 64rem);
    padding: var(--hero-header-gap);
    text-align: start;
}

.hero-header__headline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    color: inherit;
    font-family: var(--font-family-headings);
    line-height: .95;
}

/* Alle drei Zeilen gleich gross, gedeckelt bei 95px (erreicht ab ~1580px
   Viewport-Breite). */
.hero-header__line {
    font-size: clamp(2.25rem, 1rem + 5vw, 95px);
    font-weight: 700;
}

.hero-header__line.-top,
.hero-header__line.-bottom {

}

.hero-header__line.-middle {
    letter-spacing: -.02em;
}

/* Alle Woerter liegen in derselben Grid-Zelle uebereinander. Die Breite ist
   damit die des laengsten Worts, und der Wechsel verschiebt nichts. */
.hero-header__rotator {
    display: inline-grid;
    justify-items: start;
}

/* overflow: hidden ist die Maske, durch die die Zeichen ein- und auslaufen.
   Bei line-height .95 wuerde sie Umlaut-Punkte (Ü) und Unterlaengen (g, p, y)
   abschneiden - das padding weitet die Maske, der negative margin nimmt den
   Platz im Zeilenfluss wieder heraus. */
.hero-header__word {
    grid-area: 1 / 1;
    padding: .1em 0 .15em;
    margin: -.1em 0 -.15em;
    overflow: hidden;
    color: var(--line-color, #fff);
}

.hero-header__word:not(.-active):not(.-leaving) {
    visibility: hidden;
}

/* Von hero-header.js erzeugt: Wortgruppen (Umbruch nur zwischen Woertern)
   und darin einzelne Zeichen mit ihrem Index in --i. */
.hero-header__chunk {
    display: inline-block;
    white-space: nowrap;
}

.hero-header__char {
    display: inline-block;
    white-space: pre;
    transform: translateY(130%) rotate(6deg);
    opacity: 0;
    transition:
        transform .7s var(--hero-header-ease),
        opacity .45s linear;
    transition-delay: calc(var(--i, 0) * 32ms);
}

.hero-header__word.-active .hero-header__char {
    transform: none;
    opacity: 1;
}

.hero-header__word.-leaving .hero-header__char {
    transform: translateY(-130%) rotate(-6deg);
    opacity: 0;
    transition-duration: .5s, .35s;
    transition-delay: calc(var(--i, 0) * 18ms);
}

.hero-header__description {
    max-width: 36rem;
    margin: clamp(1rem, 2vw, 2rem) auto 0 0;
    font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
    line-height: 1.5;
}

.hero-header__description > :last-child {
    margin-bottom: 0;
}

.hero-header__description a:not([class*="btn"]) {
    color: inherit;
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .hero-header__char,
    .hero-header__word.-leaving .hero-header__char {
        transform: none;
        transition: opacity .4s linear;
        transition-delay: 0s;
    }
}