/* Hero: image drives height, content overlays via CSS Grid stacking */
.ce-hero {
    display: grid;
    width: 100%;
    overflow: hidden;
    container-type: inline-size;
}

.ce-hero__bg {
    grid-area: 1 / 1;
    z-index: 0;
    position: relative;

    picture {
        display: block;
        width: 100%;
    }
}

.ce-hero__img {
    width: 100%;
    height: auto;
    display: block;
}

/* ——— Hero Start (Bild + Signet + Text) ——— */
.ce-hero--hero-start {
    .ce-hero__content {
        grid-area: 1 / 1;
        z-index: 2;
        align-self: end;
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        padding: 2.75rem 5% 3.5rem;

        @media (max-width: 767px) {
            flex-direction: column;
            padding: 1.75rem 5% 2.25rem;
            gap: 0.9rem;
        }
    }

    .ce-hero__signet {
        flex-shrink: 0;
        width: 8.4rem;
        margin-top: 0.5rem;

        svg {
            width: 100%;
            height: auto;
            display: block;
        }

        svg,
        svg path,
        svg polygon,
        svg rect,
        svg circle,
        .st0 {
            fill: #fff;
        }

        @media (max-width: 767px) {
            width: 3.5rem;
        }
    }

    .ce-hero__text {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .ce-hero__headline {
        font-size: clamp(2rem, 4vw, 2.6rem);
        font-weight: 700;
        line-height: 0.9;
        margin: 0;
        margin-top: 6px;
        color: #fff;
        text-transform: none;
    }

    .ce-hero__subline {
        font-size: clamp(0.7rem, 1.2vw, 0.85rem);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin: 0;
        color: #fff;
    }
}

/* ——— Hero Branch (Pill-Überschriften) ——— */
.ce-hero--hero-branch {
    .ce-hero__pills {
        grid-area: 1 / 1;
        z-index: 2;
        align-self: end;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0 5% 4.5rem 13.4%;

        @media (max-width: 767px) {
            padding-left: 5%;
            padding-bottom: 2.5rem;
        }
    }
}

.ce-hero__pill {
    display: inline-block;
    background-color: #e61f47;
    color: #fff;
    margin: 0;
    line-height: 1.15;
    border-radius: 2rem;
}

.ce-hero__pill--headline {
    font-size: clamp(1rem, 3.5vw, 3.5rem);
    font-weight: 900;
    text-transform: none;
    padding: 0.7rem 1.8rem;
    position: relative;
    z-index: 1;
}

.ce-hero__pill--subline {
    font-size: clamp(0.75rem, 2vw, 1.5rem);
    font-weight: 300;
    letter-spacing: .1rem;
    text-transform: uppercase;
    padding: 0.5rem 1.4rem;
    padding-top: 0;
    margin-left: 8cqw;
    margin-top: -0.7cqw;
    position: relative;
    z-index: 2;
}