.detailHeaderMedia {
    position: relative;
    aspect-ratio: 16 / 6;
    width: 100%;
    object-position: center;
    overflow: hidden;
}
.detailHeaderMedia.smallHeader {
    aspect-ratio: auto;
    height: 33vh;
}
.detailHeaderMedia:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 30%;
    left: 0;
    bottom: 0;
    z-index: 5;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    opacity: 0.3;
}
.detailHeaderMedia img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.detailHeaderBack {
    position: absolute;
    z-index: 20;
    top: 120px;
    left: 60px;
}
.detailHeaderBackBtn {
    font-family: "DIN", Arial, Helvetica, sans-serif;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background-color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 27px;
    color: var(--color-elvigray2);
    text-transform: uppercase;
    padding: 7px 10px 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 250ms;
}
.detailHeaderContent {
    position: relative;
}
.detailHeaderContent .innerWrap {
    display: flex;
}
.detailHeaderLogo {
    position: relative;
    display: flex;
    border-radius: 7px;
    width: 225px;
    height: 225px;
    left: 0;
    margin-top: -50px;
    padding: 20px;
    border: 1px solid var(--color-lightgray2);
}
.detailHeaderLogo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.detailHeaderBreadcrumb {
    position: absolute;
    display: flex;
    top: -40px;
}
.breadcrumbTop {
    display: flex;
}
.detailHeaderBreadcrumb a, .detailHeaderBreadcrumb .bcLast {
    font-size: 12px;
    line-height: 21px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-light);
}
.detailHeaderBreadcrumb i {
    font-size: 22px;
    margin: 0 8px;
}
.detailHeaderBreadcrumb i:before {
    color: #bababa;
}
.detailHeaderBreadcrumb a {
    font-size: 12px;
    line-height: 21px;
    text-transform: uppercase;
    color: var(--color-light);
}
.detailHeaderTitle {
    width: calc(100% - 225px);
    padding: 40px 0 0 60px;
}
.detailHeaderTitle h1 {
    font-size: 60px;
    line-height: 65px;
    color: var(--color-elvigray1);
    margin-bottom: 15px;
}
.detailHeaderDescription {
    display: flex;
    flex-wrap: wrap;
}
.detailHeaderCol {
    margin: 0 50px 25px 0;
}
.detailHeaderCol .iconWrap {
    padding-left: 30px;
    margin-bottom: 3px;
}
.detailHeaderCol i {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
}
.detailHeaderCol i:before {
    color: var(--color-elvigray2);
}
.detailHeaderCol * {
    font-size: 18px;
    line-height: 24px;
    color: var(--color-elvigray1);
}
.detailJobsLink * {
    transition: color 250ms ease;
}
.detailHeaderJobs {
    display: none;
}
@media (hover: hover) and (pointer: fine) {
    .detailHeaderBackBtn:hover, .detailHeaderBackBtn:focus {
        background-color: rgba(113, 80, 233, 1);
        color: var(--color-light);
    }
    [data-category-color="elvigreen"] .detailHeaderBackBtn:hover, [data-category-color="elvigreen"] .detailHeaderBackBtn:focus {
        background-color: rgba(var(--color-elvigreen)) !important;
    }
    [data-category-color="elviblue"] .detailHeaderBackBtn:hover, [data-category-color="elviblue"] .detailHeaderBackBtn:focus {
        background-color: rgba(var(--color-elviblue)) !important;
    }
}
@media (max-width: 1300px) {
    .detailHeaderBack {
        top: 80px;
        left: 24px;
    }
    .detailHeaderMedia.smallHeader:before {
        content: "";
        max-width: 100%;
        display: flex;
        background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 113px;
    }
}
@media (max-width: 1279px) {
    .detailHeaderLogo {
        width: 180px;
        height: 180px;
    }
    .detailHeaderTitle {
        width: calc(100% - 180px);
    }
    .detailHeaderTitle h1 {
        font-size: 48px;
        line-height: 54px;
    }
}
@media (max-width: 1024px) {
    .detailHeaderTitle {
        padding: 30px 0 0 50px;
    }
}
@media (max-width: 767px) {
    .detailHeaderBack {
        display: none;
        top: auto;
        left: auto;
        bottom: 20px;
        right: 20px;
    }
    .detailHeaderMedia {
        aspect-ratio: 5 / 4;
    }
    .detailHeaderContent .innerWrap {
        flex-wrap: wrap;
    }
    .detailHeaderBreadcrumb {
        display: none;
    }
    .detailHeaderLogo {
        width: 160px;
        height: 160px;
        margin-top: -120px;
    }
    .detailHeaderTitle {
        width: 100%;
        padding: 25px 0 0 0;
    }
    .detailHeaderTitle h1 {
        font-size: 36px;
        line-height: 40px;
        margin-bottom: 12px;
    }
    .detailHeaderDescription {
        margin: 0 -5px;
    }
    .detailHeaderCol {
        margin: 0 10px 15px 0;
        width: calc(50% - 10px);
        max-width: 200px;
        padding: 0;
    }
    .detailHeaderCol:last-child {
        margin-bottom: 0;
    }
    .detailHeaderCol * {
        font-size: 15px;
        line-height: 18px;
        hyphens: auto;
    }
    .detailHeaderCol i {
        margin-right: 10px;
        font-size: 16px;
    }
}
@media (max-width: 389px) {
    .detailHeaderCol {
        margin: 0 5px 15px 0;
        width: calc(50% - 5px);
    }
    .detailHeaderCol .iconWrap {
        padding-left: 25px;
    }
}


/*///////////////////////////////////////////////////////
// Profilheader Modul
//////////////////////////////////////////////////////*/
.profileHeader {
    margin-bottom: 25px;
}
.profileHeader .detailHeaderMedia.hasAnimation {
    aspect-ratio: auto;
}
.profileHeader .profileHeaderAnimation {
    position: relative;
    z-index: 2;
    /*height: 592px;*/
    aspect-ratio: 16 / 6;
    max-height: 100vh;
}
.profileHeader .profileHeaderBackgroundAnimation {
    position: absolute;
    z-index: 1;
    height: 100%;
}
.profileHeader .profileHeaderAnimation .animateIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.profileHeader .profileHeaderAnimation path {
    vector-effect: non-scaling-stroke;
    stroke-width: 1px !important;
}
.profileHeader .detailHeaderLogo {
    justify-content: center;
    border: 0;
}
.profileHeader .detailHeaderLogo img {
    width: 70%;
}
.profileHeader[data-layout="1"] .detailHeaderLogo {
    align-items: center;
}
.profileHeader[data-layout="1"] .detailHeaderLogo img {
    height: 85%;
}
/*.profileHeader[data-layout="1"] .profileHeaderAnimation .animateIcon svg,
.profileHeader[data-layout="2"] .profileHeaderAnimation .animateIcon svg {
    transform: translate3d(0px, 0px, 0px) scale(0.75) !important;
}*/
.profileHeader[data-layout="1"] .profileHeaderAnimation .animateIcon svg,
.profileHeader[data-layout="2"] .profileHeaderAnimation .animateIcon svg {
    width: 100% !important;
    height: auto !important;
}
.profileHeader .detailHeaderMedia.hasVideo {
    object-fit: cover;
}
.profileHeaderVideo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: top;
}
.profileHeader .detailHeaderMedia[data-valign="top"] .profileHeaderVideo {
    object-position: top;
}
.profileHeader .detailHeaderMedia[data-valign="center"] .profileHeaderVideo {
    object-position: center;
}
.profileHeader .detailHeaderMedia[data-valign="bottom"] .profileHeaderVideo {
    object-position: bottom;
}
@media (min-width: 2000px) {
    .profileHeader .profileHeaderAnimation {
        max-height: 100%;
    }
}
@media (max-width: 767px) {
    .profileHeader {
        margin-bottom: 0;
    }
    .profileHeader .profileHeaderAnimation {
        aspect-ratio: 5 / 4;
    }
    .profileHeader[data-layout="0"] .profileHeaderAnimation .animateIcon.scaleAnimation svg {
        transform: translate3d(0px, 0px, 0px) scale(1.5) !important;
    }
    /*.profileHeader[data-layout="1"] .profileHeaderAnimation .animateIcon svg,
    .profileHeader[data-layout="2"] .profileHeaderAnimation .animateIcon svg {
        transform: translate3d(0px, 0px, 0px) scale(0.85) !important;
    }
    .profileHeader[data-layout="0"] .profileHeaderAnimation .animateIcon svg {
        transform: translate3d(0px, 0px, 0px) scale(1.2) !important;
    }*/
    .profileHeader[data-layout="1"] .profileHeaderAnimation .animateIcon svg,
    .profileHeader[data-layout="2"] .profileHeaderAnimation .animateIcon svg {
        width: 100% !important;
        transform: translate3d(0px, 0px, 0px) scale(1.5) !important;
    }
    .profileHeader .profileHeaderAnimation path {
        stroke-width: 0.002em !important;
    }
    .profileHeader[data-layout="1"] .profileHeaderAnimation path,
    .profileHeader[data-layout="2"] .profileHeaderAnimation path {
        stroke-width: 0.0009em !important;
    }
    .profileHeader .detailHeaderLogo {
        width: 75px;
        height: 75px;
        margin-top: -50px;
        padding: 5px;
    }
    /*.profileHeader .detailHeaderCol:first-child {
        width: calc(100% - 10px);
        max-width: 100%;
    }*/
}