@media (min-width: 1200px) {
    #blog-container,
    #bewerben {
        margin: 0 auto;
        max-width: 1580px
    }
}

/* #region ------------------------------------- about ------------------------------------------ */

#about {
    padding: var(--distance-large) 0;
}

@media (max-width: 767px) {
    #about {
        padding-bottom: calc(80vw + var(--distance-small));
    }
}

#about::after {
    content: "";
    position: absolute;
    height: 80vw;
    left: 15px;
    right: 15px;
    bottom: 0;
    background: bottom center / contain no-repeat;
}

@media (min-width: 768px) {
    #about::after {
        top: 100px;
        right: 15px;
        bottom: 0;
        width: 50%;
        background: bottom right / contain no-repeat;
        height: unset;
        left: unset;
        max-width: 678px;
    }
}

/* #endregion ---------------------------------- about ------------------------------------------ */

/* #region -------------------------------------- blog ------------------------------------------ */

#blog {
    background: linear-gradient(to top, var(--highlight) 50%, rgba(255, 255, 255, 0) 50%);
}

@media (max-width: 767px) {
    #blog-container .template-page * {
        text-align: center !important;
    }
}

#blog-container {
    padding: var(--distance-small) 0;
    border-radius: 30px;
    background: var(--main-color) url('../img/2025/blog-bg.webp') center / cover no-repeat;
    box-shadow: inset 0 0 0 100vw rgba(8, 61, 119, 0.7);
}

#blog-container .row {
    align-items: center;
    row-gap: 30px;
}

#blog-container :is(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 0;
}

@media (min-width: 1200px) {
    #blog-container>div {
        padding: 0;
    }
}

/* #endregion ----------------------------------- blog ------------------------------------------ */

/* #region ---------------------------------- firmenwebseite ------------------------------------ */

#firmenwebseite {
    padding: var(--distance-large) 0;
    background: linear-gradient(to bottom, var(--highlight), rgba(255, 255, 255, 0) 400px);
}

#firmenwebseite-steps {
    position: relative;
    counter-reset: section;
}

@media (max-width: 767px) {
    #firmenwebseite-steps>li {
        padding-left: 90px;
    }
}

#firmenwebseite-steps>.row {
    row-gap: 30px;
}

#firmenwebseite-steps>.row:not(:last-child) {
    padding-bottom: calc(var(--distance-large) - 20px);
}

#firmenwebseite-steps li::before {
    counter-increment: section;
    content: counter(section);
    color: var(--main-color);
    font-weight: 700;
    background: var(--highlight);
    border-radius: var(--border-radius-large);
    height: 60px;
    aspect-ratio: 1/1;
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 1;
    left: 15px;
    top: 0;
}

@media (min-width: 768px) {
    #firmenwebseite-steps li::before {
        height: 80px;
        left: calc(50% - 40px);
    }
}

@media (min-width: 992px) {
    #firmenwebseite-steps li::before {
        height: 112px;
        left: calc(50% - 56px);
    }
}

#firmenwebseite-steps li:not(:last-child)::after {
    content: "";
    display: block;
    position: absolute;
    left: 42px;
    top: 70px;
    bottom: 20px;
    border-left: 5px dotted #929dab;
}

@media (min-width: 768px) {
    #firmenwebseite-steps li:not(:last-child)::after {
        left: calc(50% - 2px);
        top: 100px;
    }
}

@media (min-width: 992px) {
    #firmenwebseite-steps li:not(:last-child)::after {
        top: 132px;
    }
}

#firmenwebseite-stepsimg {
    display: block;
}

@media (min-width: 1200px) {
    #firmenwebseite-steps #step-1>div:last-child {
        padding-bottom: 5vw;
    }

    #firmenwebseite-steps #step-2 .banner {
        margin-top: -5vw;
    }

    #firmenwebseite-steps #step-3>div:last-child {
        padding-bottom: 5vw;
    }

    #firmenwebseite-steps #step-4 .banner {
        margin-top: -5vw;
    }
}

@media (min-width: 1580px) {
    #firmenwebseite-steps #step-1>div:last-child {
        padding-bottom: 150px;
    }

    #firmenwebseite-steps #step-2 .banner {
        margin-top: -150px;
    }

    #firmenwebseite-steps #step-3>div:last-child {
        padding-bottom: 230px;
    }

    #firmenwebseite-steps #step-4 .banner {
        margin-top: -230px;
    }
}

/* #endregion ------------------------------- firmenwebseite ------------------------------------ */

/* #region ------------------------------------- bewerben --------------------------------------- */

#bewerben {
    padding: var(--distance-medium) 0;
    border-radius: 30px;
    background: linear-gradient(rgba(8, 61, 119, 0.7), rgba(8, 61, 119, 0.7)),
        url('../img/2025/bewerben-bg.webp') center / cover no-repeat,
        var(--main-color);
    font-size: calc(var(--font-size) + 4px);
}

@media (min-width: 992px) {
    #bewerben {
        background: url('../img/2025/daumen-hoch.svg') top clamp(20px, 2vw, 40px) left clamp(20px, 2vw, 40px) no-repeat,
            url('../img/2025/high-five.svg') bottom right / auto 26vw no-repeat,
            linear-gradient(rgba(8, 61, 119, 0.7), rgba(8, 61, 119, 0.7)),
            url('../img/2025/bewerben-bg.webp') center / cover no-repeat,
            var(--main-color);
    }
}

@media (min-width: 1400px) {
    #bewerben {
        background: url('../img/2025/daumen-hoch.svg') top 80px right calc(50% + 625px) no-repeat,
            url('../img/2025/high-five.svg') bottom left calc(50% + 2px) no-repeat,
            linear-gradient(rgba(8, 61, 119, 0.7), rgba(8, 61, 119, 0.7)),
            url('../img/2025/bewerben-bg.webp') center / cover no-repeat,
            var(--main-color);
    }
}

/* #endregion ---------------------------------- bewerben --------------------------------------- */