/**
 * hana+nils · Büro für Gestaltung
 * https://hananils.de · buero@hananils.de
 */

.title {
    --readability: 0;

    /* define spaces to allow for background colors */
    margin: 0;
    padding-top: 4.15rem;
    padding-right: calc(var(--dynamic-spacing-inline-end) + 4.4rem);
    padding-bottom: 3.8rem;
    padding-left: var(--dynamic-spacing-inline-start);
}

.card .title {
    padding-right: var(--dynamic-spacing-inline-end);
}

/* adjust whitespace below header without cover */
.content > .title {
    margin-bottom: 4.25rem;
}

.cover .title {
    position: relative;
    margin: 0;
    z-index: 100;
}

@media (min-height: 700px) and (min-width: 500px) {
    .cover:not(article) .title {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 100;
    }
}

#news .content > .cover .title {
    margin-bottom: 18.5rem;
}

@media (min-height: 700px) {
    #news .content > .cover .title {
        margin-bottom: 14vh;
    }
}

.title h1 {
    margin-left: -0.5rem;
    font-size: var(--text-size-3);
    font-weight: var(--text-weight-extrablack);
    line-height: var(--text-line-3);
}

@media (min-width: 320px) {
    .title h1 {
        --scale-factor: calc((100vw - 32rem) / (105 - 32));

        font-size: calc(
            var(--text-size-3) + ((11.2 - 4.5) * var(--scale-factor))
        );
        line-height: calc(
            var(--text-line-3) + ((11 - 4.5) * var(--scale-factor))
        );
    }
}

@media (min-width: 1050px) {
    .title h1 {
        max-width: calc(
            160rem - var(--dynamic-spacing-inline-start) -
                var(--dynamic-spacing-inline-end)
        );
        font-size: var(--text-size-1);
        line-height: var(--text-line-1);
    }
}

/* Contrast */

.title.on-dark h1,
.title.on-dark h2 {
    color: #fff;
    text-shadow:
        0 0 0.1rem rgba(0, 0, 0, calc(0.3 + calc(var(--readability) * 0.2))),
        0 0 2rem rgba(0, 0, 0, calc(0.15 + calc(var(--readability) * 0.15))),
        0 0 3rem rgba(0, 0, 0, calc(var(--readability) * 0.4)),
        0 0 7rem rgba(0, 0, 0, calc(var(--readability) * 2 - 1));
}

.title.on-dark .subline {
    color: #fff;
    text-shadow:
        0 0 5rem rgba(0, 0, 0, 0.5),
        0 0 0.2rem rgba(0, 0, 0, calc(0.3 + var(--readability))),
        0 0 2rem rgba(0, 0, 0, 0.3),
        0 0 3rem rgba(0, 0, 0, calc(var(--readability) * 1.4)),
        0 0 7rem rgba(0, 0, 0, calc(var(--readability) * 2 - 1));
}

.title.on-light h1,
.title.on-light h2 {
    color: #000;
    text-shadow:
        0 0 0.1rem
            rgba(255, 255, 255, calc(0.3 + calc(var(--readability) * 0.2))),
        0 0 2rem
            rgba(255, 255, 255, calc(0.15 + calc(var(--readability) * 0.15))),
        0 0 3rem rgba(255, 255, 255, calc(var(--readability) * 0.4)),
        0 0 7rem rgba(255, 255, 255, calc(var(--readability) * 2 - 1));
}

.title.on-light .subline {
    color: #000;
    text-shadow:
        0 0 5rem rgba(255, 255, 255, 0.5),
        0 0 0.2rem rgba(255, 255, 255, calc(0.3 + var(--readability))),
        0 0 2rem rgba(255, 255, 255, 0.3),
        0 0 3rem rgba(255, 255, 255, calc(var(--readability) * 1.4)),
        0 0 7rem rgba(255, 255, 255, calc(var(--readability) * 2 - 1));
}

/* Long words */

@media (max-width: 1050px) {
    .title .long-word {
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}