/* Variablen */
:root {
    --stage-background: #e0e8f1;
    --background2: #b9d2db;
    --background3: #204a5a;
    --background4: #f0f0f0;
    --job-karriere-font-color: #4e879d;
    --job-karriere-font-color-secondary: #707070;
    --job-karriere-fontSize-small: 15px; /* 15px */
    --job-karriere-fontSize-medium: 1.125em; /* 18px */
    --job-karriere-fontSize-big: 2.5em; /* 40px */
    --job-karriere-fontSize-veryBig: 3em; /* 48px */
}

@font-face {
    font-family: "Quickbrush";
    src: url("Quickbrush/font.woff2") format("woff2"),
        url("Quickbrush/font.woff") format("woff");
}

p {
    text-align: left;
}

.quickbrush {
    font-family: "Quickbrush";
}

/*###########################################################*/
/* Stage Element */
/*###########################################################*/

/* Headlines */
.job-karriere-stage {
    font-family: "Utopia", "Arial Narrow", Arial, sans-serif;
    background: linear-gradient(to right, #e0e8f1, #e8f0f9);
    position: relative;
    min-height: 444px;
}

.job-karriere-stage .job-karriere-stage-headline {
    font-family: "Utopia", "Arial Narrow", Arial, sans-serif;
    font-size: var(--job-karriere-fontSize-veryBig);
    color: var(--job-karriere-font-color);
    margin-top: 50px;
    z-index: 6;
}
.job-karriere-stage .job-karriere-stage-subheadline {
    font-size: var(--job-karriere-fontSize-medium);
    color: var(--job-karriere-font-color);
    margin-top: -9px;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    z-index: 6;
}

/* Auflistung */
.job-karriere-stage ul {
    margin-top: 10px;
    z-index: 6;
    padding-left: 0;
}

.job-karriere-stage-checklist ul {
    list-style: none;
}

.job-karriere-stage-checklist ul li:before {
    content: "✓";
    font-weight: bold;
    margin-right: 5px;
    color: var(--job-karriere-font-color);
}

.job-karriere-stage-checklist ul li {
    margin-bottom: 5px;
    color: var(--job-karriere-font-color-secondary);
    font-weight: bold;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.job-karriere-stage-checklist .button-jobboerse {
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    max-width: 182px;
    background-image: none;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0;
    height: 40px;
    font-size: 16px;
}

.cura-carriere-standort {
    color: white;
}

.cura-job-link-standort {
    /* color: white !important; */
    /* font-weight: bold; */
    /* text-decoration: underline;
    letter-spacing: 1.5px; */

    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    max-width: 182px;
    background-image: none;
    background-color: rgba(68, 127, 152, 0.85);
    color: white !important;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0;
    height: 40px;
    font-size: 16px;
    margin: 15px 0;
}

.cura-job-link-standort:hover {
    font-weight: bold;
}

/* Button */

.job-karriere-btn {
    background-color: var(--job-karriere-font-color);
    color: white !important;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    height: 37px;
    display: flex;
    left: 17px;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 3px 6px #00000062;
    margin-top: 20px;
    transition: all 0.4s ease;
    z-index: 6;
}

.job-karriere-btn:hover {
    background-color: var(--background2);
    color: var(--job-karriere-font-color-secondary) !important;
}

.job-karriere-stage-image {
    height: 444px;
    max-width: 1049px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
}

.job-karriere-stage-checklist {
    z-index: 10;
}

@media (max-width: 1200px) {
    .job-karriere-stage-image {
        max-width: 969px;
        height: auto;
    }
}

@media (max-width: 1200px) {
    .job-karriere-stage {
        margin-bottom: 112px !important;
    }
}

@media (max-width: 995px) {
    .job-karriere-stage-headline {
        margin-top: 200px !important;
        background-color: rgba(255, 255, 255, 0.8);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(5px);
        line-height: 1em;
        padding-bottom: 15px;
        padding-top: 15px;
    }

    .job-karriere-stage-subheadline {
        background-color: rgba(255, 255, 255, 0.8);
        margin-top: -10px !important;
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(5px);
    }

    .job-karriere-stage ul {
        background-color: rgba(255, 255, 255, 0.8);
        margin-top: -10px !important;
        padding-bottom: 100px !important;
        padding-top: 20px !important;
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(5px);
        overflow: hidden;
        margin-left: -15px;
        padding-left: 15px;
    }

    .job-karriere-btn {
        margin-top: -70px !important;
        margin-bottom: 105px !important;
    }

    .job-karriere-stage-image {
        height: auto;
        max-width: 749px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 5;
    }
}

@media (max-width: 550px) {
    .job-karriere-stage ul {
        background-color: rgba(255, 255, 255, 0.8);
        margin-top: -10px !important;
        padding-bottom: 100px !important;
        padding-top: 20px !important;
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(5px);
        overflow: hidden;
        width: 107%;
        margin-left: -15px;
        padding-left: 15px;
    }
}

/*###########################################################*/
/* Filter Element */
/*###########################################################*/

.job-karriere-filter {
    background-color: var(--background3);
    min-height: 139px;
    border-radius: 0 0 52px 0;
    box-shadow: 0px 8px 8px #00000029;
    margin: -110px 0 40px -17px;
    z-index: 6;
    position: relative;
}

.button-03 {
    position: relative;
    right: 40px;
    bottom: 0;
    border-radius: 0 0 15px 0;
    border: none;
    margin-bottom: 0px !important;
    box-shadow: 3px 3px 6px transparent !important;
    font-family: "Utopia";
}

.curaJobsFilterElemWrapper {
    margin-top: -18px;
}

#srchFilterBtn {
    display: none;
}

#srchFilterBtn.active {
    display: block;
    position: relative;
    right: 40px;
    bottom: 0;
    border-radius: 0 0 15px 0;
    border: none;
    margin-bottom: 0px !important;
    box-shadow: 3px 3px 6px transparent !important;
    font-family: "Utopia";
}

.job-karriere-filter.active {
    animation: smoothHeight 0.6s ease-in-out;
}

@keyframes smoothHeight {
    from {
        height: 139px;
    }
    to {
        height: 500px;
    }
}

.job-karriere-filter .job-karriere-filter-title {
    color: white;
    margin-left: 85px;
    font-size: 20px;
    font-family: "utopia", serif;
}

.job-karriere-filter-dropdowntrigger {
    color: #85a7b4;
    cursor: pointer;
    margin-top: 12px;
    display: flex;
    justify-content: start;
    align-items: center;
    text-align: left;
}

.job-karriere-filter-dropdowntrigger-open {
    color: #85a7b4;
    cursor: pointer;
    margin-top: 12px;
    display: flex;
    justify-content: start;
    align-items: center;
    text-align: left;
}

.job-karriere-filter-results {
    color: white;
    cursor: pointer;
}

.job-karriere-filter-results::after {
    content: "";
    background-image: url("../Icons/PfeilRunter.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-weight: bold;
    margin-left: 15px;
    color: var(--job-karriere-font-color);
    min-width: 13px;
    display: inline-block;
    min-height: 5px;
}

.job-karriere-filter-results-open {
    color: white;
    cursor: pointer;
}

.job-karriere-filter-results-open::after {
    content: "";
    background-image: url("../Icons/PfeilHoch.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-weight: bold;
    margin-left: 15px;
    color: var(--job-karriere-font-color);
    min-width: 13px;
    display: inline-block;
    min-height: 5px;
}

.scopeWorkList {
    display: none;
    margin-left: -5px;
}
.scopeWorkList.active {
    display: block;
}
.federalStatesList {
    display: none;
}
.federalStatesList.active {
    display: block;
}
.locationListe {
    display: none;
}
.locationListe.active {
    display: block;
}

.job-karriere-filter-checkboxelement label {
    margin-left: 8px;
    color: white;
    font-weight: 100;
}

@media (max-width: 1200px) {
    .job-karriere-filter .job-karriere-filter-title {
        margin-left: 85px !important;
        padding-left: 0px !important;
        text-align: left;
    }
}

@media (max-width: 991px) {
    .job-karriere-filter .job-karriere-filter-title {
        margin-left: 0px !important;
        text-align: left;
        margin-top: 15px !important;
    }

    .noresult {
        margin-left: 15px;
    }

    .job-karriere-filter-dropdowntrigger {
        margin-top: 1px;
    }

    .job-karriere-filter {
        padding-bottom: 4px;
    }

    .scopeWorkList {
        margin-left: 0;
    }

    .curaJobsFilterElemWrapper {
        margin-top: 10px;
    }
}

/* ############################################### */
/* Willkommens Section */
/* ############################################### */

.job-karriere-welcome {
    margin-top: 128px;
    padding-bottom: 56px;
}

.job-karriere-welcome h2 {
    font-size: var(--job-karriere-fontSize-veryBig);
    color: var(--job-karriere-font-color) !important;
    font-family: "Quickbrush", Cambria, Cochin, Georgia, Times,
        "Times New Roman", serif;
}
.job-karriere-welcome p {
    font-size: var(--job-karriere-fontSize-small);
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    color: var(--job-karriere-font-color-secondary);
    margin-bottom: -13px;
    max-width: 800px;
    text-align: left !important;
}

@media (max-width: 900px) {
    .job-karriere-welcome {
        margin-top: 80px;
        padding-bottom: 56px;
    }
}

/* ############################################### */
/* Search Result Section */
/* ############################################### */
.job-karriere-searchResult-headline {
    color: var(--job-karriere-font-color) !important;
    font-weight: bold;
    font-size: var(--job-karriere-fontSize-big);
    margin-bottom: 70px;
    margin-left: 10px;
}

.job-karriere-searchResult-div {
    background-color: var(--background4);
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    padding-top: 30px;
    padding-bottom: 30px;
}
.job-karriere-searchResult .f3-widget-paginator {
    margin-left: 15px;
}

.radiusSelectfield {
    background-color: #447f98;
    color: white;
    height: 27px;
}

.mainWrapperDiv {
    display: flex;
    align-items: center;
    margin-left: -5px;
}

.job-karriere-searchResult-div:nth-child(even) {
    background-color: white !important;
    border: none;
}

.job-karriere-tile-Mainlink {
    color: var(--job-karriere-font-color) !important;
    font-size: 1.3em;
}

.job-karriere-tile-Mainlink:hover {
    text-decoration: underline;
}

.job-karriere-searchResult-div p {
    color: #7e7e7e !important;
    max-width: 700px;
    text-align: left !important;
}

.job-karriere-searchResult-wrapper {
    display: flex;
    justify-content: start;
    margin-top: 30px;
}

.mini-wrapper {
    display: flex;
    margin-right: 120px;
    align-items: center;
}

.mini-wrapper .boldLabelTag {
    margin-left: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    color: black !important;
}

.job-karriere-tile-link {
    text-decoration: underline !important;
    color: var(--job-karriere-font-color) !important;
    transition: all 0.4s ease;
}

.job-karriere-tile-link:hover {
    /* color: black !important; */
    font-weight: bold;
}

@media (max-width: 995px) {
    .mainWrapperDiv {
        margin-left: 0;
    }
}

/* ############################################### */
/* Tile Section */
/* ############################################### */

.job-karriere-tiles {
    background-color: var(--background2);
    min-height: 463px;
    height: auto;
}

.job-karriere-tiles h2 {
    font-size: var(--job-karriere-fontSize-big);
    margin-left: 91px;
    margin-top: 50px;
    margin-bottom: 50px;
    color: var(--job-karriere-font-color) !important;
    line-height: 1em;
}

.job-karriere-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 110px !important;
}

.job-carriere-tile {
    max-width: 286px;
    height: 271px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    margin-right: 20px;
    margin-bottom: 20px;
}

.job-carriere-tile h4 {
    color: white;
    margin-right: 5px;
    margin-bottom: -20px;
    width: 100%;
}

.job-carriere-tile p {
    padding: 20px;
    width: 100%;
    text-align: center !important;
}

.job-carriere-tile1 {
    background-color: var(--job-karriere-font-color);
    color: white;
}
.job-carriere-tile2 {
    background-color: white;
    color: var(--background3);
}
.job-carriere-tile2 h4 {
    color: var(--background3);
}
.job-carriere-tile3 {
    background-color: var(--background3);
    color: white;
}

@media (max-width: 900px) {
    .job-karriere-wrapper {
        padding-left: 15px !important;
    }

    .job-karriere-tiles h2 {
        margin-left: 0px;
    }
}

/* ############################################### */
/* Kontakt Section */
/* ############################################### */

.job-karriere-contact {
    background-color: #dfe0e0;
    min-height: 367px;
    margin-top: -25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Bei Verwendung der Klasse Cura Icon werden diese innerhalb der Klasse job-karriere-contact nicht eingeblendet */
.job-karriere-contact .cura-icon.cura-icon-mail {
    background-image: none;
}

.job-karriere-contact .cura-icon.cura-icon-tel {
    background-image: none;
    color: var(--job-karriere-font-color-secondary);
    margin: 0;
    padding: 0;
}

.job-karriere-contact-imagediv {
    max-width: 229px;
    height: 268px;
    margin-right: 90px;
    display: flex;
    justify-content: center;
    align-items: start;
}

.job-karriere-contact-image {
    max-width: 229px;
    height: auto;
}
.job-karriere-contact-siteContainer .cura-icon {
    padding-left: 0;
}

.job-karriere-contact h2 {
    font-size: var(--job-karriere-fontSize-big);
    color: var(--job-karriere-font-color) !important;
}

.job-karriere-contact p {
    color: var(--job-karriere-font-color-secondary);
    margin-top: -5px;
    margin-bottom: -5px;
}

.job-karriere-contact p strong {
    color: var(--job-karriere-font-color);
}

.job-karriere-contact-maillink {
    font-weight: bold !important;
    color: var(--job-karriere-font-color) !important;
}

.job-karriere-contact h4 {
    margin-top: 50px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .job-karriere-contact h2 {
        line-height: 1.1em;
    }

    .job-karriere-contact-imagediv {
        margin-right: 20px;
        margin-left: 0;
        height: 200px;
    }

    .job-karriere-contact {
        display: flex;
        flex-direction: column;
        padding: 20px;
        align-items: start;
    }

    .job-karriere-contact-siteContainer {
        padding: 30px 0;
    }
}

/* ############################################### */
/* FAQ Section */
/* ############################################### */

.job-karriere-faq {
    background-color: var(--job-karriere-font-color);
    min-height: 407px;
    height: auto;
    margin-top: -30px;
}

.job-karriere-infobar {
    border-bottom: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.job-karriere-info {
    margin: 30px 30px 20px 0;
    color: white;
    cursor: pointer;
    transition: 0.4s ease-in-out;
}
.job-karriere-info.active {
    color: #204a5a;
    font-weight: bold;
}

.job-karriere-info:hover {
    color: #204a5a;
}

.job-karriere-faq h4 {
    color: #ffffff;
}

.job-karriere-faq p {
    color: #ffffff;
    text-align: left !important;
}

.job-karriere-info-image {
    max-width: 466px;
    height: 51px;
    margin-bottom: 50px;
    margin-top: 50px;
}

.job-karriere-info-link {
    color: white !important;
    text-decoration: underline;
    transition: all 0.4s ease;
}
.job-karriere-info-link:hover {
    color: #204a5a !important;
}

.infoContainer {
    display: none;
}

.infoContainer.active {
    display: block;
}

.infoContainer a {
    color: #204a5a !important;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .job-karriere-infobar {
        flex-direction: column;
        justify-content: start;
        align-items: flex-start;
        width: 100%;
    }

    .job-karriere-info {
        margin: 10px 0px 10px 0px;
    }

    .job-karriere-info-image {
        max-width: 320px;
        height: auto;
    }

    .job-karriere-stage-checklist .button-jobboerse {
        margin-bottom: 50px;
    }

    .job-karriere-filter-dropdowntrigger {
        margin-top: 20px;
    }

    .button-03 {
        margin-top: 40px !important;
    }
}
