/* #region --------------------------------- wir-bieten-dir ------------------------------------- */

@media (min-width: 992px) {
    #wir-bieten-dir {
        background: url('../../img/form.svg') bottom 110px left calc(50% + 607px) no-repeat;
    }
}

#wir-bieten-dir .btgrid {
    position: relative;
    z-index: 1;
}

#wir-bieten-dir .btgrid:first-of-type:before {
    content: "";
    display: block;
    margin: 0 auto -30px auto;
    width: 230px;
    aspect-ratio: 363/317;
    background: url('../../img/maskottchen/kollege-smartphone.webp') center / cover no-repeat;
}

@media (min-width: 768px) {
    #wir-bieten-dir .btgrid:first-of-type:before {
        margin-top: -150px;
        margin-right: 50px;
    }
}

@media (min-width: 1200px) {
    #wir-bieten-dir .btgrid:first-of-type:before {
        margin: 0;
        position: absolute;
        bottom: 220px;
        right: -60px;
    }
}

@media (min-width: 1600px) {
    #wir-bieten-dir .btgrid:first-of-type:before {
        width: 363px;
        right: -180px;
        bottom: 210px;
    }
}

/* #endregion ------------------------------ wir-bieten-dir ------------------------------------- */

/* #region -------------------------------- stellenangebote ------------------------------------- */

#stellenangebote {
    position: relative;
    padding-top: var(--distance-medium);
    padding-bottom: var(--distance-medium);
    background: url('../../img/dots.svg') bottom 70px right 15px no-repeat;
}

#stellenangebote::after {
    content: "";
    display: block;
    margin: 0 auto calc(var(--distance-medium) * -1) auto;
    width: 260px;
    aspect-ratio: 722/521;
    background: url('../../img/maskottchen/kollegen-megafon.webp') center / cover no-repeat;
}

@media (min-width: 576px) {
    #stellenangebote::after {
        margin-top: -140px;
        margin-right: 50px;
    }
}

@media (min-width: 768px) {
    #stellenangebote::after {
        margin: 0;
        position: absolute;
        z-index: 8;
        bottom: 0;
        left: -10px;
        width: 330px;
    }
}

@media (min-width: 992px) {
    #stellenangebote::after {
        width: 490px;
    }
}

@media (min-width: 1200px) {
    #stellenangebote::after {
        width: clamp(490px, 40vw, 722px);
        left: calc(clamp(10px, 2vw, 125px) * -1);
    }
}

@media (min-width: 1600px) {
    #stellenangebote::after {
        left: -125px;
    }
}

#stellenangebote :is(h1, h2) {
    position: relative;
    margin-bottom: clamp(20px, 2vw, 40px);
}

@media (min-width: 1200px) {
    #stellenangebote :is(h1, h2)::after {
        content: "";
        display: block;
        position: absolute;
        bottom: -80px;
        left: -100px;
        width: 89px;
        height: 96px;
        background: url('../../img/arrow/arrow-1.svg') center no-repeat;
        transform: scaleX(-1) rotate(20deg);
    }
}

#stellenangebote p a {
    margin-top: clamp(15px, 2vw, 25px);
}

@media (min-width: 768px) {
    #stellenangebote>div+div {
        padding-top: clamp(var(--distance-min), 4vw, 70px)
    }

    #stellenangebote :is(.banner, .banner img) {
        height: 100%;
    }

    #stellenangebote .banner img {
        object-fit: cover;
    }
}

#stellenangebote .banner::after,
#stellenangebote .banner::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
}

@media (min-width: 768px) {
    #stellenangebote .banner::before {
        z-index: 7;
        opacity: 0.8;
        border-radius: var(--border-radius-large);
        background: var(--gradient);
    }
}

@media (min-width: 992px) {
    #stellenangebote .banner::after {
        z-index: 8;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='142' viewBox='0 0 156 142'%3E%3Cpath d='M-3806,898.484h0V756h156.623A40.124,40.124,0,0,0-3689,796v28.828c-.23,18.779-15.324,34.059-33.649,34.061H-3766A40.126,40.126,0,0,0-3806,898.484Z' transform='translate(3806 -756)' fill='%23ffffff'/%3E%3C/svg%3E%0A") top left no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='140' viewBox='0 0 120 140'%3E%3Cpath d='M555,170h-.1A40.118,40.118,0,0,0,515,132.887H505.99c-18.338,0-33.432-15.293-33.647-34.086l0,34.085V70A40.075,40.075,0,0,0,435,30.087V30H555Z' transform='translate(-435 -30)' fill='%23ffffff'/%3E%3C/svg%3E%0A") top right no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='182' height='138' viewBox='0 0 182 138'%3E%3Cpath id='Differenzmenge_1' data-name='Differenzmenge 1' d='M-3251,1429h-182.882a39.733,39.733,0,0,0,28.271-11.729A39.728,39.728,0,0,0-3393.883,1389v-24.878a34.765,34.765,0,0,1,2.718-13.16,34.683,34.683,0,0,1,7.153-10.8,33.729,33.729,0,0,1,10.531-7.352,32.5,32.5,0,0,1,12.852-2.8H-3291a40.1,40.1,0,0,0,40-39.725V1429Z' transform='translate(3433.882 -1290.276)' fill='%23ffffff'/%3E%3C/svg%3E%0A") bottom right no-repeat;
    }
}

/* #endregion ----------------------------- stellenangebote ------------------------------------- */

/* #region ------------------------------ initiativbewerbung ------------------------------------ */

@media (min-width: 992px) {
    #initiativbewerbung {
        background: url('../../img/speechbubbles.svg') center right / auto 100% no-repeat, var(--gradient), var(--main-color);
    }
}

/* #endregion --------------------------- initiativbewerbung ------------------------------------ */

/* #region ---------------------------------- job-nav ------------------------------------------- */

#job-kategorie {
    position: relative;
    padding-bottom: var(--distance-medium);
}

#job-kategorie:not(:has(nav)) {
    padding-bottom: var(--distance-min);
}

@media (min-width: 992px) {
    #job-kategorie::after {
        content: "";
        display: block;
        position: absolute;
        right: 165px;
        bottom: 0;
        width: 332px;
        height: 430px;
        background: url('../../img/dots.svg') bottom left no-repeat;
        transform: rotate(90deg);
        pointer-events: none;
    }
}

#job-kategorie:has(nav)>.row:before {
    content: "";
    display: block;
    margin: 0 auto -30px auto;
    width: 230px;
    aspect-ratio: 411/390;
    background: url('../../img/maskottchen/programmiererin-laptop-smartphone\ Kopie.webp') center / cover no-repeat;
}

@media (min-width: 768px) {
    #job-kategorie:has(nav)>.row:before {
        margin-top: -180px;
        margin-left: -10px;
        position: relative;
        z-index: 9;
    }
}

@media (min-width: 1200px) {
    #job-kategorie:has(nav)>.row:before {
        margin: 0;
        position: absolute;
        bottom: -60px;
        left: -40px;
    }
}

@media (min-width: 1600px) {
    #job-kategorie:has(nav)>.row:before {
        width: 411px;
        left: -180px;
    }
}














#job-nav ul.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    list-style: none;
    position: relative;
    z-index: 10;
}

#job-nav ul.nav>li {
    width: 100%;
    position: relative;
}

@media (min-width: 768px) {
    #job-nav ul.nav>li {
        width: calc(50% - 15px);
    }
}

@media (min-width: 992px) {
    #job-nav ul.nav>li {
        width: calc(33.33% - 20px);
    }
}

#job-nav ul.nav>li a {
    color: inherit;
    font-weight: var(--weight-bold);
    font-family: "Kanit", sans-serif;
    position: static;
}

#job-nav ul.nav>li a::after {
    content: "mehr erfahren";
    display: block;
    max-width: 100%;
    width: max-content;
    font-family: "Comfortaa", sans-serif;
    margin-top: 15px;
    background: var(--gradient);
}

#job-nav ul.nav>li a:is(:hover, :focus)::after {
    box-shadow: inset 300px 0 0 var(--secondary-color);
    transition: box-shadow 300ms linear;
}

#job-nav ul.nav>li a::before {
    content: "";
    display: block;
    inset: 0;
    position: absolute;
}

/* #endregion ------------------------------- job-nav ------------------------------------------- */

/* #region ------------------------------- deine-aufgaben --------------------------------------- */

#deine-aufgaben {
    padding-top: var(--distance-medium);
    font-size: 1rem;
    position: relative;
}

#deine-aufgaben::before {
    content: "";
    display: block;
    position: absolute;
    top: 264px;
    right: 0;
    height: 837px;
    width: 557px;
    background: url('../../img/form-transparent.svg') center left no-repeat;
}

#deine-aufgaben .template-page>.row:first-child>.col-xs-12>.btgrid {
    padding: 20px;
    background: var(--main-color);
    border-radius: var(--border-radius-large);
}

#deine-aufgaben .template-page>.row:first-child>.col-xs-12>.btgrid>.row>.col .content {
    padding: 40px clamp(20px, 4vw, 50px);
}

#deine-aufgaben .template-page>.row:first-child>.col-xs-12>.btgrid>.row>.col:first-child .content {
    background: #ffffff;
    border-radius: var(--border-radius-large);
    height: 100%;
}

#deine-aufgaben .template-page>.row:first-child>.col-xs-12>.btgrid>.row>.col:last-child {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='103.351' height='116.506' viewBox='0 0 103.351 116.506'%3E%3Cg  transform='translate(103.351) rotate(90)' opacity='0.2'%3E%3Cpath d='M15.734.3c-4.553.74-9.418,1.621-12.2,4.345C.307,7.8-.448,13.032.226,17.176,1.483,24.9,10.464,29.862,20.286,28.265c4.993-.813,8.311-4.306,11.117-7.436,2.713-3.028,5.008-5.644,4.391-9.44C34.536,3.665,25.556-1.3,15.734.3Z' transform='translate(80.611 0)' fill='%23fff' fill-rule='evenodd'/%3E%3Cpath d='M1.016,6.659c-.686,2.18-1.381,4.527-.8,6.366a7.266,7.266,0,0,0,4.805,4.253c3.7,1.165,7.892-1.7,9.374-6.4.752-2.39-.052-4.635-.813-6.573-.734-1.875-1.379-3.474-3.2-4.046C6.694-.9,2.5,1.96,1.016,6.659Z' transform='translate(55.303 44.825)' fill='%23fff' fill-rule='evenodd'/%3E%3Cpath d='M4.644,3.228C2.682,5.026.614,6.99.132,9.185c-.559,2.541.734,5.3,2.37,7.089,3.048,3.327,8.95,2.881,13.182-1,2.152-1.971,2.648-4.7,3.01-7.1.351-2.318.63-4.307-.869-5.943C14.777-1.1,8.875-.651,4.644,3.228Z' transform='translate(9.91 38.538)' fill='%23fff' fill-rule='evenodd'/%3E%3Cpath d='M6.439,4.477C3.719,6.969.851,9.694.183,12.738-.591,16.261,1.2,20.095,3.47,22.571c4.229,4.614,12.414,4,18.283-1.383,2.984-2.734,3.671-6.526,4.175-9.852.486-3.216.874-5.973-1.205-8.242C20.495-1.521,12.309-.9,6.439,4.477Z' transform='translate(0 77.687)' fill='%23fff' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E%0A") top 5px right 20px no-repeat;
}

#deine-aufgaben .template-page>.row:first-child>.col-xs-12>.btgrid>.row>.col:last-child .content,
#deine-aufgaben .template-page>.row:first-child>.col-xs-12>.btgrid>.row>.col:last-child .content * {
    color: #ffffff;
}

@media (min-width: 992px) {
    #deine-aufgaben .template-page>.row:first-child>.col-xs-12>.btgrid>.row>.col:last-child .content {
        padding-left: 30px;
    }
}

#deine-aufgaben .template-page>.row:first-child>.col-xs-12>.btgrid>.row>.col:last-child li {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14.755' viewBox='0 0 20 14.755'%3E%3Cpath d='M160.994-706.245,154-713.239l1.748-1.748,5.245,5.245L172.252-721,174-719.252Z' transform='translate(-154 721)' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}

#deine-aufgaben .template-page>.row:not(:first-child) {
    padding-top: clamp(var(--distance-min), 6vw, 60px);
}

/* #endregion ---------------------------- deine-aufgaben --------------------------------------- */

/* #region ------------------------------- deine-bewerbung -------------------------------------- */

#deine-bewerbung {
    padding-top: var(--distance-medium);
    position: relative;
    z-index: 1;
}

#deine-bewerbung::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 310px;
    height: 430px;
    background: url('../../img/dots.svg') bottom left no-repeat;
    transform: scale(-1);
    z-index: -1;
}

#deine-bewerbung .template-page>.row:not(:first-child) {
    padding-top: 30px;
}

/* #endregion ---------------------------- deine-bewerbung -------------------------------------- */