/* ── Intro ── */
:root {
    --clr-primary: #0081c3;
    --clr-secondary: #0d2865;
    --clr-intro-bg: #080d1b;
    --content-width: 1200px;
}

/* Break frame: full viewport width */
.frame-type-km_intro {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ce-intro {
    /* background: var(--clr-intro-bg); */
    position: relative;
    overflow: hidden;
    min-height: 70dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    &.ce-intro--voll {
        min-height: 100svh;

        .intro-content {
            margin-bottom: 9rem;
        }
    }

    /* Content constraint to 1200px grid */
    .intro-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: var(--content-width);
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    .intro-content {
        /* max-width: 65%; */
        padding: 2rem 0 3.5rem;
    }

    .intro-headline {
        font-size: clamp(2rem, 5vw, 5rem);
        font-weight: 900;
        line-height: .9;
        margin: 0 0 1rem;
        color: var(--clr-secondary);
    }

    .intro-subline {
        font-size: clamp(1rem, 2.35vw, 2rem);
        font-weight: 400;
        margin: 0;
        color: #fff;
        line-height: 1;
    }

    /* PNG: centered in viewport, bottom-anchored, overlaps text (z-index 1 < text z-index 2) */
    .intro-image {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
        z-index: 1;
        pointer-events: none;
        display: flex;
        align-items: center;
    }

    .intro-img {
        height: 100%;
        max-height: 750px;
        width: auto;
        display: block;
    }


    /* Mobile: image in the middle (flex flow), text at bottom */
    @media (max-width: 767px) {
        min-height: 100svh;
        padding-bottom: 0;
        justify-content: flex-start;

        &.ce-intro--voll {
            min-height: 100svh;
        }

        &::before {
            width: 85vw;
            aspect-ratio: 1;
            top: 40%;
        }

        /* Image: back in normal flow, takes all remaining space above text */
        .intro-image {
            position: relative;
            left: auto;
            bottom: auto;
            transform: none;
            height: auto;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 0 1rem;
        }

        .intro-img {
            height: auto;
            max-height: 95vw;
            max-width: 95%;
            width: auto;
        }

        .intro-inner {
            flex-shrink: 0;
        }

        .intro-content {
            max-width: 90%;
            padding: 1.5rem 1.5rem 2.5rem 0;
        }
    }

    &.ce-intro-noimage {
        justify-content: flex-end;

        @media (max-width: 767px) {
            justify-content: flex-end;
        }
    }
}