@media (max-width: 1199px) {
    body {
        background-image: none;
    }
}

@media (min-width: 1200px) {
    body {
        background-size: 724px auto;
        background-position-x: -170px;
    }
}

/* #region ------------------------------- bewerbungsprozess ------------------------------------ */

#bewerbungsprozess-steps {
    position: relative;
    counter-reset: section;
    background: url('../../img/dots.svg') bottom 330px right -40px no-repeat;
}

#bewerbungsprozess-steps+* {
    margin-top: var(--distance-min);
}

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

@media (min-width: 768px) {
    #bewerbungsprozess-steps .col-text {
        padding-top: var(--distance-min);
        padding-bottom: var(--distance-min);
    }
}

#bewerbungsprozess-steps>.row {
    row-gap: 30px;
    padding-bottom: clamp(var(--distance-min), 8vw, 80px);
}

#bewerbungsprozess-steps li::before {
    counter-increment: section;
    content: counter(section);
    color: #ffffff;
    font-weight: var(--weight-bold);
    font-family: "Kanit", sans-serif;
    background: var(--main-color);
    border-radius: 100px 100px 0 100px;
    height: 60px;
    aspect-ratio: 1/1;
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 1;
    left: 15px;
    top: 0;
    box-shadow: 0 clamp(10px, 3vw, 30px) 0 0 #ffffff, 0 calc(clamp(10px, 3vw, 30px) * -1) 0 0 #ffffff;
}

@media (min-width: 768px) {
    #bewerbungsprozess-steps li::before {
        height: 80px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, calc(-50% + clamp(var(--distance-min), 8vw, 80px) * -0.5));
    }
}

@media (min-width: 992px) {
    #bewerbungsprozess-steps li::before {
        height: 100px;
    }
}

#bewerbungsprozess-steps li::after {
    content: "";
    display: block;
    position: absolute;
    left: 42px;
    top: 0;
    bottom: 0;
    border-left: 3px solid #383838;
    opacity: 0.2;
}

@media (min-width: 768px) {
    #bewerbungsprozess-steps li::after {
        left: calc(50% - 1px);
    }

    #bewerbungsprozess-steps li:first-child:after {
        top: 50%;
    }
}

@media (min-width: 576px) {
    #bewerbungsprozess-steps .banner::after {
        --bg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M124-804a3.852,3.852,0,0,1-2.825-1.175A3.852,3.852,0,0,1,120-808v-28a3.852,3.852,0,0,1,1.175-2.825A3.852,3.852,0,0,1,124-840h28a3.852,3.852,0,0,1,2.825,1.175A3.852,3.852,0,0,1,156-836v28a3.852,3.852,0,0,1-1.175,2.825A3.852,3.852,0,0,1,152-804Zm17.45-11.1a5.669,5.669,0,0,0,2.15-2.9H152v-18H124v18h8.4a5.669,5.669,0,0,0,2.15,2.9A5.824,5.824,0,0,0,138-814,5.824,5.824,0,0,0,141.45-815.1ZM138-818l-8-8,2.8-2.9,3.2,3.2V-834h4v8.3l3.2-3.2L146-826Z' transform='translate(-120 840)' fill='%237c5ead'/%3E%3C/svg%3E%0A");

        content: "";
        display: block;
        position: absolute;
        z-index: 8;
        inset: 0;
        background: var(--bg-icon) top 32px right 20px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='122' height='140' viewBox='0 0 122 140'%3E%3Cpath d='M-1708-357h-.1a40.118,40.118,0,0,0-39.9-37.112h-9.011c-18.338,0-33.431-15.293-33.646-34.086l0,34.085V-457a40.045,40.045,0,0,0-40-40H-1708Z' transform='translate(1830.659 497)' fill='%23ffffff'/%3E%3C/svg%3E%0A") top right no-repeat;
    }

    #bewerbungsprozess-steps :is(#step-2, #step-4, #step-6) .banner::after {
        background: var(--bg-icon) top 32px left 20px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='122' height='140' viewBox='0 0 122 140'%3E%3Cpath d='M-2263-1449v-140h122.27a40.127,40.127,0,0,0-39.61,40v28.825c-.23,18.78-15.325,34.06-33.649,34.061H-2223A40.119,40.119,0,0,0-2262.9-1449h-.1Z' transform='translate(2263 1589.001)' fill='%23ffffff'/%3E%3C/svg%3E%0A") top left no-repeat;
    }

    #bewerbungsprozess-steps #step-2 .banner::after {
        --bg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='26.558' viewBox='0 0 36 26.558'%3E%3Cpath d='M166.589-694.442,154-707.031l3.147-3.147,9.442,9.442L186.853-721,190-717.853Z' transform='translate(-154 721)' fill='%237c5ead'/%3E%3C/svg%3E%0A");
    }

    #bewerbungsprozess-steps #step-3 .banner::after {
        --bg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M102.59-853.81,96.2-860.2v-9h3.6v7.515l5.31,5.31ZM96.2-872.8v-3.6h3.6v3.6Zm12.6,12.6v-3.6h3.6v3.6ZM96.2-847.6v-3.6h3.6v3.6ZM83.6-860.2v-3.6h3.6v3.6ZM98-844a17.527,17.527,0,0,1-7.02-1.418,18.178,18.178,0,0,1-5.715-3.847,18.178,18.178,0,0,1-3.847-5.715A17.527,17.527,0,0,1,80-862a17.528,17.528,0,0,1,1.418-7.02,18.178,18.178,0,0,1,3.847-5.715,18.178,18.178,0,0,1,5.715-3.847A17.527,17.527,0,0,1,98-880a17.527,17.527,0,0,1,7.02,1.417,18.177,18.177,0,0,1,5.715,3.847,18.177,18.177,0,0,1,3.848,5.715A17.528,17.528,0,0,1,116-862a17.527,17.527,0,0,1-1.417,7.02,18.177,18.177,0,0,1-3.848,5.715,18.177,18.177,0,0,1-5.715,3.847A17.527,17.527,0,0,1,98-844Zm0-3.6a13.9,13.9,0,0,0,10.215-4.185A13.9,13.9,0,0,0,112.4-862a13.9,13.9,0,0,0-4.185-10.215A13.9,13.9,0,0,0,98-876.4a13.9,13.9,0,0,0-10.215,4.185A13.9,13.9,0,0,0,83.6-862a13.9,13.9,0,0,0,4.185,10.215A13.9,13.9,0,0,0,98-847.6ZM98-862Z' transform='translate(-80 880)' fill='%237c5ead'/%3E%3C/svg%3E%0A");
    }

    #bewerbungsprozess-steps #step-4 .banner::after {
        --bg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M15.413-711a2.171,2.171,0,0,1-1.725-.787,2.118,2.118,0,0,1-.488-1.838l.45-2.7a4.415,4.415,0,0,1,1.519-2.644A4.251,4.251,0,0,1,18-720a4.3,4.3,0,0,1,2.869,1.031,4.415,4.415,0,0,1,1.519,2.644l.45,2.7a2.118,2.118,0,0,1-.488,1.838,2.171,2.171,0,0,1-1.725.787ZM4.65-709.537a2.581,2.581,0,0,1-1.481-.338,1.77,1.77,0,0,1-.806-1.162,2.049,2.049,0,0,1-.038-.675,1.877,1.877,0,0,1,.188-.637q0,.037-.037-.15a4.958,4.958,0,0,1-.375-.9,1.46,1.46,0,0,1,.112-.862,2.4,2.4,0,0,1,.487-.712l.075-.075a1.889,1.889,0,0,1,.581-1.2,1.74,1.74,0,0,1,1.256-.487,5.031,5.031,0,0,1,.713.15l.112-.037a1.167,1.167,0,0,1,.488-.281A2.125,2.125,0,0,1,6.563-717a1.908,1.908,0,0,1,.731.131,1.139,1.139,0,0,1,.506.394.076.076,0,0,1,.056.019.076.076,0,0,0,.056.019,1.764,1.764,0,0,1,.919.319,1.643,1.643,0,0,1,.581.769,1.434,1.434,0,0,1,.056.506,1.95,1.95,0,0,1-.094.469.614.614,0,0,0,.038.15,2.058,2.058,0,0,1,.413.581,1.525,1.525,0,0,1,.15.656,3.655,3.655,0,0,1-.225.787.159.159,0,0,0,0,.15l.075.6a1.721,1.721,0,0,1-.656,1.35,2.366,2.366,0,0,1-1.594.563ZM30-709.5a2.889,2.889,0,0,1-2.119-.881A2.889,2.889,0,0,1,27-712.5a2.652,2.652,0,0,1,.131-.844,3.872,3.872,0,0,1,.356-.769l-1.05-.937a.535.535,0,0,1-.131-.75.758.758,0,0,1,.694-.45h3a2.889,2.889,0,0,1,2.119.881A2.889,2.889,0,0,1,33-713.25v.75a2.889,2.889,0,0,1-.881,2.119A2.889,2.889,0,0,1,30-709.5ZM0-702v-2.362a2.988,2.988,0,0,1,1.669-2.644A8.384,8.384,0,0,1,6-708q.488,0,.938.019a6.285,6.285,0,0,1,.862.094,5.681,5.681,0,0,0-.787,1.612,6.279,6.279,0,0,0-.262,1.838V-702Zm9,0v-2.437a4.478,4.478,0,0,1,2.494-3.937,12.5,12.5,0,0,1,6.506-1.5,12.482,12.482,0,0,1,6.525,1.5A4.482,4.482,0,0,1,27-704.437V-702Zm21-6a8.363,8.363,0,0,1,4.35.994A2.991,2.991,0,0,1,36-704.362V-702H29.25v-2.437a6.729,6.729,0,0,0-.244-1.838,5.873,5.873,0,0,0-.731-1.612,6.226,6.226,0,0,1,.844-.094Q29.55-708,30-708Z' transform='translate(0 720)' fill='%237c5ead'/%3E%3C/svg%3E%0A");
    }

    #bewerbungsprozess-steps #step-5 .banner::after {
        --bg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M89-851.2a1.742,1.742,0,0,1-1.283-.518A1.742,1.742,0,0,1,87.2-853v-3.6h23.4v-16.2h3.6a1.742,1.742,0,0,1,1.282.518A1.742,1.742,0,0,1,116-871v27l-7.2-7.2ZM80-853v-25.2a1.742,1.742,0,0,1,.518-1.283A1.742,1.742,0,0,1,81.8-880h23.4a1.742,1.742,0,0,1,1.282.517A1.742,1.742,0,0,1,107-878.2V-862a1.742,1.742,0,0,1-.518,1.282,1.742,1.742,0,0,1-1.282.518h-18Z' transform='translate(-80 880)' fill='%237c5ead'/%3E%3C/svg%3E%0A");
    }
}

@media (min-width: 1200px) {
    #bewerbungsprozess-steps #step-2 .banner::after {
        background: var(--bg-icon) top 32px left 20px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='122' height='140' viewBox='0 0 122 140'%3E%3Cpath d='M-2263-1449v-140h122.27a40.127,40.127,0,0,0-39.61,40v28.825c-.23,18.78-15.325,34.06-33.649,34.061H-2223A40.119,40.119,0,0,0-2262.9-1449h-.1Z' transform='translate(2263 1589.001)' fill='%23ebf1f6'/%3E%3C/svg%3E%0A") top left no-repeat;
    }
}

/* #endregion ---------------------------- bewerbungsprozess ------------------------------------ */