/* CSS Reset + Basics */
html, body {
    margin: 0;
    padding: 0;
    background: var(--neutral-10);
    box-sizing: border-box;
    height: 100%;
    scroll-behavior:smooth;
}

body {
    display: flex;
    flex-direction: column;

    div#content {
        flex-grow: 1;
    }
}

div#content > div {
    height: 100%;

    & > article {
        height: 100%;

        & > .gtnbrg-contentarea {
            height: 100%;
            display: flex;
            flex-direction: column;

            #spacebar {
                flex-grow: 1;
            }
        }
    }
}


.editor-visual-editor__post-title-wrapper {
    background-color: #eeeeee;
    margin-top: 0 !important;
    padding-top: 4rem !important;
}

details summary {
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker,
    &::marker{
        display: none;
    }
}

.blame {
    background: orange;
    border: dashed 1px red;
}

/* Page header Layout */
header#profactor-header .inner {
    display: flex;
    flex-direction: row;
    gap: var(--space-xs);
    align-items: center;
    justify-content: space-between;

    @media screen and (max-width: 1023px){
        padding-bottom: 8px;
    }

    #logo {
        display: flex;
        justify-content: start;
        align-items: center;
        flex-shrink: 1;
        padding-top: 8px;
        padding-bottom: 8px;

        svg {
            width: 100%;
            height: auto;
            max-width: 100%;

            @media screen and (max-width: 1023px){
                max-width: 193px;
            }
        }

        a {
            &:focus {
                outline: none;
            }

            &:focus-visible {
                outline: dashed 1px var(--neutral-60);
                outline-offset: 2px;
                -moz-outline-radius: 4px;
                border-radius: 4px;
            }
        }
    }

    #menue-area {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);

        #menue-top {
            display: none;
            justify-content: end;

            @media screen and (min-width: 1024px){
                display: flex;
                flex-direction: row;
                gap: var(--space-xxs);
            }

            #secondary-menue {
                display: flex;
                gap: 8px;
            }

            #search-bar {}

            #language-switcher {}

        }

        #primary-menue {}
    }

    /*wpml language switcher*/
    & div[class^='wpml-ls'] {
        max-width: fit-content;

        li a {
            border: unset !important;
            padding-right: 10px;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            font-family: var(--body-font-family);
            color: var(--neutral-80);

            padding: 4px 8px;
            height: 29px;
            display: flex;
            align-items: center;
            background: var(--neutral-20);
            border-radius: 4px;

            &:after {
                display: none ;
            }

        }
        & .wpml-ls-sub-menu {
            border-top: unset !important;
        }
    }
}

@media screen and (max-width: 1023px){
    header#profactor-header .inner {
        #mobile-menue {

            & > nav {
                z-index: 99999; /* 10 */
                gap: 1rem;
            }

            #primary-menue {
                margin-bottom: 0;

                .menu-item {
                    a {
                        padding: 5px 0;
                    }
                }
            }

            #secondary-menue {
                a {
                    padding: 4px 0;
                }
            }


            .mobile-inner-toolbar {
                order: 0;/* 3 */
                display: flex;
                flex-direction: row /* column */;
                gap: 0.7rem;
            }
        }
    }
}

/* Page footer Layout */
footer#profactor-footer .inner {
    div.content-area-1 {
        display: flex;
        gap: 50px;
        flex-direction: column;

        & > div:first-child {
            flex-grow: 1;
        }

         & p {
            margin: 0;
        }

        div span.h5 {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 8px;
            font-size: 28.1px;
            margin-bottom: 16px;
        }
        
        div p.body {
            margin-bottom: 16px;
        }

        @media screen and (min-width: 1024px){
            flex-direction: row;
        }

        .contact-info {
            display: flex;
            flex-direction: row;
            gap: 4px;

            @media screen and (min-width: 768px) {
                p:last-child:before {
                    content: "|";
                    margin: 4px;
                }
            }
        }

        @media screen and (max-width: 767px) {
            .contact-info {
                flex-direction: column;
            }
        }

    }

    div.content-area-2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: center;
        padding: 32px 16px 16px;
        gap: 20px;

        @media screen and (min-width: 1024px){
            justify-content: center;
        }

        img {
            width: auto;
            height: auto;
            /*max-width: 125px;
            max-height: 50px;*/
            max-width: 100px;
            max-height: 100px;
            object-fit: contain;

            @media screen and (min-width: 1024px){
                max-width: 125px;
                max-height: 75px;
            }
        }
    }
}
@media screen and (max-width: 1023px) {
    footer#profactor-footer .inner {
        --footer-gap: 32px;

        display: flex;
        flex-direction: column;
        gap: var(--footer-gap);
        padding-top: var(--footer-gap);
        padding-bottom: var(--footer-gap);

        div.content-area-1 {
            gap: var(--footer-gap);
        }

        div.content-area-2 {
            padding: 0 !important;
        }

        .content-area-3 {

            nav {
                row-gap: 2px;

                a {
                    padding: 2px 0;
                    gap: 1rem;
                }
            }
        }
    }
}

.content-area-3 {
    margin: auto;

    @media screen and (min-width: 1024px) {
        max-width: 90%;
    }
}

/* footer design adjustments */
footer#profactor-footer {

    .content-area-1 {

        .h5 {
            margin-bottom: 16px;

            svg {
                width: 40px;
                height: 40px;
                margin-right: 8px;
            }
        }

        .h6 {
            margin-bottom: 16px;
        }
    }

}



/* typography primary navigation */
.primary-nav-text {
    font-size: 22.5px;
    line-height: 29.3px;
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    color: var(--black-ci);
    text-transform: uppercase;
}

/* Widget: Primary Navigation Menue */
#primary-menue {
    display: none;
    gap: var(--space-xxs);
    position: relative;

    @media screen and (min-width: 1024px){
        display: flex;
        justify-content: end;
    }

    .widget-arrow-next {
        opacity: 0;
    }

    .arrow-icon {
        transition: all .20s ease-in-out;
        display: flex;
    }

    /* level 0 */
    div.menu-item {

        & > a,
        & > button{
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding: 16px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            border-radius: 4px;
            border: none;
            background: none;
        }

        & > *:hover,
        & > *:active,
        & > *:focus,
        & > *:focus-visible,
        & > *.is-active,
        & > *:focus-visible,
        &:focus-within > * {
            background-color: var(--dark-turkis-web);
            color: var(--neutral-10);
            outline: none;

            /* mobile behaviour */
            @media screen and (max-width: 1023px){
                background-color: var(--neutral-10);
                color: var(--black-ci);
            }

        }

        div.submenu {
            background:var(--neutral-10);
            border: solid 2px var(--dark-turkis-web);
            border-radius: 4px;
            position: absolute;
            top: 3.75em;
            left: 0;
            width: 100%;
            flex-direction: column;
            z-index: 99;

            /* mobile behaviour */
            @media screen and (max-width: 1023px){
                position: relative;
                top: unset;
                left: unset;
                border: none;
                box-sizing: border-box;
                border-radius: 0;
                padding-left: 16px !important;
            }

            &[aria-hidden="true"]{
                display: none;
                visibility: hidden;
                pointer-events: none;
            }

            &:hover,
            &:active,
            &:focus,
            &:focus-visible,
            &.is-active {
                display: flex;
            }

            a {
                color: var(--neutral-90);
                font-family: "Atkinson Hyperlegible";
                font-size: 22px;
                font-style: normal;
                font-weight: 400;
                line-height: 28.8px;
                text-decoration: none;
                border-radius: 4px;
                display: flex;
                padding: 16px 8px;
                justify-content: space-between;
                align-items: center;
                align-self: stretch;


                @media screen and (max-width: 1023px){
                    color: var(--black-ci, #231F20);
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 21.328px; /* 133.3% */
                    border-bottom: 0.5px solid var(--neutral-50, #C2C2C2);
                    border-radius: 0;
                }

                &:hover,
                &:active,
                &:focus,
                &:focus-visible,
                &.is-active {
                    background-color: var(--neutral-20);
                    outline: none;

                    @media screen and (min-width: 1024px){
                        .widget-arrow-next {
                            opacity: 1;
                        }
                    }
                }
            }
        }

        &:focus-within .submenu,
        &:hover .submenu {
            display: flex !important;
            visibility: visible !important;
            pointer-events: auto !important;
        }

        &:focus-within .arrow-icon,
        &:hover .arrow-icon {
            transform: rotate(180deg);
        }

        &:focus-within .submenu {
            aria-hidden: false;
        }
    }
}




/* Widget: Secondary Navigation Menue */
#secondary-menue {
    margin-right: 24px;

    a.secondary-nav-text {
        display: inline-block;
        text-decoration: none;
        padding: 4px 8px;

        /*display: flex;*/
        padding: 4px 8px;
        justify-content: center;
        align-items: center;
        border-radius: 4px;

        &:hover,
        &:focus,
        &:focus-visible,
        &:active {
            background: var(--dark-turkis-web, #1E7476);
            color: var(--neutral-10, #fff);
            outline: none;

            @media screen and (max-width: 1023px){
                color: var(--black-ci, #231F20);
                background: var(--neutral-20);
            }

        }
    }
}

/* Widget: Mobile Navigation Menue */
#mobile-menue {
    display: flex;

    .icon-close {display: none}
    .icon-burger {display: block}

    &[open] summary {
        .icon-close {display: block}
        .icon-burger {display: none}
    }

     & > nav{
         background: var(--neutral-10);
         position: absolute;
         top:70px;
         left: 0;
         right: 0;
         max-width: 100%;
         border-bottom: 4px solid var(--dark-turkis-web);
         display: flex;
         flex-direction: column;
         padding-top: 16px;
         padding-left: 16px;
         padding-right: 16px;
         padding-bottom: 16px;

         div.mobile-inner-toolbar {
             display: flex;
             flex-direction: row;
             margin-bottom: 16px;

             #search-bar,
             #search-bar form,
             #search-bar input {
                 display: flex;
                 max-width: 100%;
                 flex-grow: 1;
             }
         }

         a {
             /* display: block; */
         }

         #primary-menue {
             display: flex;
             flex-direction: column;
             position: relative;
             top: unset;
             left: unset;
             right: unset;
             bottom: unset;
             width: auto;
             margin-bottom: 16px;

             .menu-item > a,
             .menu-item > button{
                 width: 100%;
                 justify-content: flex-start;
             }

             .primary-nav-text {
                 padding: 0;
             }
         }

         #secondary-menue {
             display: flex;
             flex-direction: column;
             margin-right: auto;
         }

     }

    @media screen and (min-width: 1024px){
        display: none;
    }
}



/* Area 1 Menue (First Navigation in Footer) */
#area1-menue {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
    align-items: flex-start;
    row-gap: 8px;

    @media screen and (min-width: 1024px){
        align-items: unset;
    }

    .menu-item {
        display: block;
        flex-grow: 1;
        box-sizing: content-box;

        a {
            color: var(--dark-turkis-web);
            text-align: right;
            font-family: 'Atkinson Hyperlegible';
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 28.8px; /* 160% */
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: none;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
            text-underline-position: from-font;
            text-transform: uppercase;

            &:hover,
            &:focus,
            &:focus-visible,
            &:active {
                text-decoration: none;
            }
        }

        @media screen and (min-width: 1024px) {
            width: unset;
            max-width: unset;
        }
    }

    .menu-item a {
        color: var(--dark-turkis-web);
        text-decoration: underline;
        display: block;
    }
}


/* social media links in Footer */

nav.socialmedia-links {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    gap: 8px;

    @media screen and (min-width: 1024px){
        justify-content: flex-end;
    }

    a {
        display: flex;
        padding: 4px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 7px 0px;
        background: var(--dark-turkis-web);
        color: var(--neutral-10);
    }
}

/* Widget: Footer Area 3 Navigation Menue */
#area3-menue {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;

    @media screen and (min-width: 1024px) {
        gap: 16px;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .menu-item {
        display: block;
        width: 100%;
        max-width: 50%;
        /*flex-grow: 1;*/
        box-sizing: content-box;

        @media screen and (min-width: 1024px) {
            width: unset;
            max-width: unset;
        }
    }

    .menu-item a {
        color: var(--neutral-10);
        text-decoration: underline;
        display: block;
    }
}

/* widget: language-switcher-view */
.widget-language-switcher a{
    display: flex;
    height: 29px;
    padding: 0px 8px;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    background: var(--neutral-20, #F5F5F5);
    text-decoration: none;
    color: var(--neutral-100);

    &:focus {
        outline: none;
    }

    &:focus-visible {
        outline: dashed 1px var(--neutral-60);
        outline-offset: 2px;
        -moz-outline-radius: 4px;
        border-radius: 4px;
    }
}

/* widget: Formularfeld */
.widget-input-field {
    display: flex;
    position: relative;

    input {
        display: flex;
        max-width: 208px;
        padding: 4px 8px;
        align-items: center;
        gap: 8px;
        border-radius: 4px;
        border: 1.5px solid var(--neutral-80);
        background: var(--neutral-10);
        padding-left: 35px;

        &:focus {
            outline: none;
        }

        &:focus-visible {
            outline: dashed 1px var(--neutral-60);
            outline-offset: 2px;
        }
    }
}

/* widget: Such-Formularfeld */
.widget-input-field-search {
    display: flex;
    position: relative;

    svg {
        position: absolute;
        left: 5px;
        top: 7px;
    }

    input {
        display: flex;
        max-width: 208px;
        padding: 4px 8px;
        align-items: center;
        gap: 8px;
        border-radius: 4px;
        border: 1.5px solid var(--neutral-80);
        background: var(--neutral-10);
        padding-left: 35px;
        font-family: var(--body-font-family);
        line-height: 1.8em;

        &:focus {
            outline: none;
        }

        &:focus-visible {
            outline: dashed 1px var(--neutral-60);
            outline-offset: 2px;
        }
    }
}

/* widget arrow-next */
.widget-arrow-next {
    display: flex;
    box-sizing: border-box;
    /*padding: 10px 24px;*/
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 7px 0px;
    background: var(--dark-turkis-web, #1E7476);
    transition: opacity 0.15s ease-in-out;

    svg {
        width: 16px;
        height: 13px;
        flex-shrink: 0;
        fill: var(--neutral-10, #FFF);
    }
}

/* widget burger-icon */
.widget-burger-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* widget scroll Top button */
#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 65px;
    right: 20px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;

    width: 50px;
    height: 50px;
    padding: 10px 24px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    border-radius: 7px 0;
    border: 2px solid var(--neutral-10, #FFF);
    background: var(--neutral-80, #616161);
    z-index: 9999;

    &:focus {
        outline: none;
    }

    &:focus-visible {
        outline: dashed 1px var(--neutral-60);
        outline-offset: 2px;
        -moz-outline-radius: 4px;
        border-radius: 4px;
    }

    svg {
        width: 26px;
        height: 20px;
        /*transform: rotate(-90deg);*/
        flex-shrink: 0;
        fill: var(--neutral-10, #FFF);
    }

    &.show {
        display: flex;
        opacity: 1;
    }
}


/* GUTENBERG Blocks */

/* breadcrumbs */
#profactor-breadcrumbs {
    color: var(--neutral-80);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-xxs);

    svg {
        line-height: 0;
        font-size: 0;
    }

    span[aria-current="page"] {
        text-decoration: underline;

        /* line clamp 1 line */
        white-space: normal;
        display: -webkit-box;
        max-width: 100%;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    a.breadcrumb-link {
        text-decoration: none;
        color: var(--neutral-80);
        white-space: nowrap;

        &:hover {
            text-decoration: underline;
        }

        &:focus {
            outline: none;
            text-decoration: underline;
        }

        &:focus-visible {
            text-decoration: underline;
            outline: dashed 1px var(--neutral-60);
            outline-offset: 2px;
            -moz-outline-radius: 4px;
            border-radius: 4px;
        }
    }
}

/* intro */

.profactor-intro {
    overflow: hidden;

    .inner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .image-container {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        aspect-ratio: 4 / 3;
        font-size: 0;

        @media screen and (min-width: 1024px){
            aspect-ratio: 16 / 9;
        }

        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }

    .intro-content {
        background: var(--neutral-10);
        width: 100%;
        z-index: 999;
        position: relative;
        box-shadow: var(--box-shadow);
        margin-bottom: var(--space-l);
        width: 998px;
        max-width: 80%;
        margin-top: -60px;

        @media screen and (max-width: 1023px){
            padding-left: 24px;
            padding-right: 24px;
        }
    }
}

/* Topics */

.profactor-topics {

    .topic-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-xl);
        margin-top: var(--space-xl);

        .topic-list-item {
            width: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;

            @media screen and (min-width: 1024px){
                flex-direction: row;

                &:nth-child(2n){
                    flex-direction: row-reverse;
                }
            }

            .image-container {
                /*width: 100%;
                max-width: 50%;*/
                min-width: 50%;
                overflow: hidden;
                aspect-ratio: 4 / 3;

                img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                }
            }

            .text-container {
                /*width: 100%;*/
                max-width: 100%;
                flex-grow: 1;

                @media screen and (min-width: 1024px){
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }
            }

            .btn-text {
                display: block;
                margin-top: 1em;
            }
        }
    }
}

/* for better editing experience in the backend */
body.wp-admin .profactor-topics .topic-list .topic-list-item {
    flex-direction: column !important;
}

div.profactor-topics2 .inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: var(--space-s);

    .h2 {
        width: 100%;
    }

    .topic2-image-area {
        display: block;
        /*width: 100%;*/
        max-width: 100%;
        overflow: hidden;

        @media screen and (min-width: 1024px){
            /*width: 100%;*/
            max-width: calc(50% - var(--space-s));
        }

        .image-container-inner {

            aspect-ratio: 3 / 4;

            img {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
        }
    }

    .topic2-list {
        display: block;
        /*width: 100%;*/
        max-width: 100%;

        .topic2-item {
            display: flex;
            border-bottom: solid 1px var(--neutral-90);

            &:first-child {
                padding-top: 0;

                .text-container {
                    padding-top: 0;
                }
            }

            &:last-child {
                border-bottom: none;
            }
        }

        @media screen and (min-width: 1024px){
            /*width: 100%;*/
            max-width: 50%;
        }

        .text-container {
            /*border-bottom: solid 1px var(--neutral-90);*/
        }

    }
}


div.profactor-benefits .inner {

    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .font-body {
        color: var(--neutral-10);
    }

    div.benefits-list-item {
        display: grid;
        grid-template-columns: repeat( var(--numberOfColums), 1fr);
        gap: var(--space-s);
        --numberOfColums: 1;

        @media screen and (min-width: 1024px){
            --numberOfColums: 3;
        }

        --numberOfGaps: calc(var(--numberOfColums) - 1 );
    }

    div.benefits-item {
        display: flex;
        flex-direction: column;
        gap: var(--space-s);
        height: 100%;

        @media screen and (min-width: 1024px) {

            /*&:nth-child(2n) {
                flex-direction: column-reverse;
            }*/

            &:nth-child(3n+2) {
                flex-direction: column-reverse;
            }
        }

        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .font-body {
            color: var(--neutral-100);
        }

        /* Fills remaining space */
        .text-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            /*gap: 1rem;*/
            justify-content: center;

            /* magic number to keep height consistent (based on the column width and aspect ration 4/3 */
            @media screen and (min-width: 1024px){
                /*min-height: 228px;*/
                min-height: 236px;
            }
        }

        .image-container {
            aspect-ratio: 4 / 3;
        }

        /*otherwise, long words will widen the columns.. */
        & > * {
            word-break: break-word;
        }
    }
}

.list-of-available-results {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-m);
    --numberOfColums: 1;

    @media screen and (min-width: 1024px){
        &.columns-1 { --numberOfColums: 1; }
        &.columns-2 { --numberOfColums: 2; }
        &.columns-3 { --numberOfColums: 3; }
        &.columns-4 { --numberOfColums: 4; }
    }

    --numberOfGaps: calc(var(--numberOfColums) - 1 );

    & > a,
    & > div {
        width: calc( (100% - var(--numberOfGaps) * var(--space-m)) / var(--numberOfColums) );
    }

    & > a {
        color: inherit;
        text-decoration: none;

        &:hover,
        &:active {
            box-shadow: 4px 4px 12px 0 rgba(118, 118, 118, 0.15);
        }

        &:focus {
            outline: none;
            box-shadow: 4px 4px 12px 0 rgba(118, 118, 118, 0.15);
        }

        &:focus-visible {
            outline: dashed 1px var(--neutral-60);
            outline-offset: 2px;
            -moz-outline-radius: 4px;
            border-radius: 4px;
            box-shadow: 4px 4px 12px 0 rgba(118, 118, 118, 0.15);
        }
    }

    .single-result.dummy-item {
        display: none;
        /*background: linear-gradient(-45deg, var(--neutral-20), var(--neutral-30), var(--neutral-40), var(--neutral-50));
        background-size: 400% 400%;*/
        /*animation: gradient 4s ease infinite;*/

        .h4,
        .job-details .single-detail-with-icon {
            filter: blur(4px);
        }
    }
}





/* Filter global*/

form.wps-postlist-filter {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);

    @media screen and (min-width: 800px){
        flex-direction: row;
        flex-wrap: wrap;
    }
}


/* Filter old*/

form#joblistfilter {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    /*margin-bottom: var(--space-xs);*/

    @media screen and (min-width: 800px){
        flex-direction: row;
    }
}

.profactor-filter-detail-view {
    display: inline-flex;
    flex-direction: row;
    gap: var(--space-m);

    .details {
        display: flex;
        flex-direction: row;
        gap: 15px;

        .font-body {
            line-height: 0;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        .statusViewer {
            display: flex;
            flex-direction: row;
            gap: 15px;

            div.description {
                display: flex;
                padding: 4px 8px;
                justify-content: center;
                align-items: center;
                gap: 8px;
                border-radius: 4px;
                background: var(--neutral-20, #F5F5F5);
                color: var(--neutral-80, #616161);

                &.closeable {
                    cursor: pointer;

                    &::after {
                        content: url("icons/close.svg");
                        line-height: 0;
                    }
                }


            }
        }
    }

    .actions {
        display: flex;
        justify-content: center;

        button#resetFilterBtn {
            color: var(--black-ci);
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: auto;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
            text-underline-position: from-font;

            border: none;
            background: none;
            cursor: pointer;

            &:hover,
            &:active{
                text-decoration: none;
            }

            &:focus {
                text-decoration: none;
                outline: none;
                box-shadow: 4px 4px 12px 0 rgba(118, 118, 118, 0.15);
            }

            &:focus-visible {
                text-decoration: none;
                outline: dashed 2px var(--neutral-60);
                outline-offset: 5px;
                -moz-outline-radius: 4px;
                border-radius: 4px;
                box-shadow: 4px 4px 12px 0 rgba(118, 118, 118, 0.15);
            }
        }

    }
}


div.profactor-cto1 {
    text-align: center;

    div.h6 p {
        font-family: inherit !important;
        font-weight: inherit !important;
        font-style: inherit !important;
        color: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }
}

div#content article.n  > div.gtnbrg-contentarea {
    /*padding-bottom: var(--space-xl);*/

    & > p,
    & > .wp-block-heading,
    & > .wp-block-list,
    & > figure.wp-block-image {
        width: 100%;
        max-width: 1202px;
        margin: auto;
        box-sizing: border-box;
        margin-bottom: 1rem;

        & + .profactor-benefits {
            margin-top: var(--space-xl);
        }

        @media screen and (max-width: 1023px){
            padding-left: var(--space-s);
            padding-right: var(--space-s);
        }
    }

    @media screen and (min-width: 1024px){
        & > p {
            padding-right: 205px;
        }
    }

    /* there should be a padding-top on those headings.. lets see where they are actually used */
    & .wp-block-heading {
        padding-top: 30px;
    }

    /* more not full-width text areas */
    @media screen and (min-width: 1024px){

        .profactor-text .inner {
            padding-right: 205px;
        }

    }

    li a,
    p a {
        color: var(--dark-turkis-web);
        text-align: right;
        font-family: 'Atkinson Hyperlegible';
        /* font-size: 18px;*/
        font-size: inherit;
        font-style: normal;
        font-weight: 400;
        /* line-height: 28.8px; /* 160% */
        line-height: inherit;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
        word-wrap: break-word;

        &:hover,
        &:focus,
        &:focus-visible,
        &:active {
            text-decoration: none;
        }
    }


    & > .wp-block-list{
        list-style-position: outside;
        padding-left: 2.5em;

        li {
            margin-bottom: 1rem;
        }

        li::marker  {
            color: black;   /* Bullet-Farbe */
            font-size: 1em; /* Größe anpassen */
        }
    }
}

.single-post-header-image {
    background: #B2B9C0;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;

    /* 16:5 format is possible */
    &.image-format-165 {
        aspect-ratio: 16 / 5;
    }

    img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    @media screen and (min-width: 1024px){
        aspect-ratio: 16 / 9;
    }
}

/* ausnahme für single story */
.single-story-card .single-post-header-image {
    aspect-ratio: 16 / 9;

    @media screen and (min-width: 1024px){
        aspect-ratio: 16 / 9;
    }
}

.single-project-card .single-post-header-image {
    aspect-ratio: 4 / 3;
}

#contactPersonBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-l);

    @media screen and (min-width: 1024px) {
        flex-direction: row;
    }

    .contactPersonImage {
        background: #B2B9C0;
        max-width: 100%;
        width: 387px;
        /* aspect-ratio: 16 / 9; */
        aspect-ratio: 4 / 3;
        overflow: hidden;

        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }

}



.mission-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;

    & > div {
        background: #fff;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        /* padding: var(--space-s); */
        padding-left: var(--space-m);
        padding-right: var(--space-m);
        padding-top: var(--space-l);
        padding-bottom: var(--space-l);
        width: 100%;

        @media screen and (min-width: 1024px){
            width: calc(50% - 10px);/* 100%; */
            max-width: 50%;

            & > div {
                padding: var(--space-m);
            }
        }
    }

    @media screen and (min-width: 1024px) {

        & > .mission-item.pos-0{
            width: 100%;
        }

        & > .mission-item.pos-0 > .image-container {
            padding: 0;
        }

        & > .mission-item:not(.pos-0) > .image-container {
            padding: var(--space-m);
        }
    }

    .mission-item:not(.pos-0) img {
        width: 60px;
        height: 60px;
        margin-bottom: var(--space-s);

        @media screen and (min-width: 1024px){
            width: 80px;
            height: 80px;
        }
    }

    .mission-item:not(.pos-0) p {
        margin-top: var(--space-xs);
        margin-bottom: var(--space-xs);

        @media screen and (min-width: 1024px){
            margin-top: inherit;
            margin-bottom: inherit;
        }
    }

    .pos-0 {
        padding: 0;
    }

    .image-container {
        aspect-ratio: unset;
        height: 100%;
    }

    @media screen and (min-width: 1024px){

        & > div {
            width: calc(100% - 10px);/* 100%; */
            max-width: 100%;
        }

        .image-container {
            aspect-ratio: 16 / 5;
            height: inherit;
        }

        .pos-1,
        .pos-2 {
            width: calc(50% - 10px);/* 50%; */
            max-width: 50%;
        }

        .pos-3,
        .pos-4,
        .pos-5{
            width: calc(33.33% - 13.33px);/* 33.33% */
            max-width: 33.33%;
        }
    }
}


div.profactor-numbers {

    /* --p1: 40; Anteil in Prozent: 4 Mio von 10 Mio */
    --deg1: calc(var(--p1) * 3.6deg);
    --size: 200px;     /* Außendurchmesser */
    --hole: 70%;       /* Loch-Durchmesser in % von außen */
    --c1: #9E9E9E;     /* Segment 1 (4 Mio) */
    --c2: #1E7476;     /* Segment 2 (6 Mio) */
    --bg: #fff;        /* Hintergrundfarbe */

    .overview-text {
        width: 100%;
        text-align: center;
        margin-top: 73px;
        margin-bottom: 73px;
    }

    .factlist {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 125px;

        .fact-item {
            box-sizing: border-box;
            border: 1px solid var(--neutral-60, #9E9E9E);
            background: #FFF;
            padding: var(--space-s);
            display: flex;
            flex-direction: row;
            gap: 15px;
            align-items: start;

            width: 100%;
            max-width: 100%;

            @media screen and (min-width: 768px){
                width: calc(50% - ( 1 * 15px/2));
                max-width: 100%;
            }

            @media screen and (min-width: 1024px){
                align-items: center;

                &:nth-child(1),
                &:nth-child(2) {
                    width: calc(50% - ( 1 * 15px/2));
                    max-width: 100%;
                }

                &:nth-child(3),
                &:nth-child(4),
                &:nth-child(5),
                &:nth-child(6){
                    width: calc(25% - ( 3 * 15px/4));
                    max-width: 50%;
                }

            }

            .fact-icon {
                background: var(--neutral-30, #EDEDED);
                aspect-ratio: 1 / 1;
                width: 100%;
                max-width: 64px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .diagram {
        display:flex;
        flex-direction: column;
        justify-content:center;
        align-items:center;
        gap: 72px;

        @media screen and (min-width: 1024px){
            flex-direction: row;
        }

        .item {
            border-left: solid 8px #000;
            padding-left: 24px;
            padding-right: 24px;
            padding-top: 16px;
            padding-bottom: 16px;
        }

        .swatch {
            width: 20px;
            height: 100%;
        }

        .donut {
            position: relative;
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            background: conic-gradient(
                    from 35deg,
                        /* Erste Linie am Start (0°) */
                    #fff 0deg 0.50deg,
                    var(--c1) 0.50deg calc(var(--deg1) - 0.50deg),
                        /* Linie zwischen Segment 1 und 2 */
                    #fff calc(var(--deg1) - 0.50deg) calc(var(--deg1) + 0.50deg),
                    var(--c2) calc(var(--deg1) + 0.50deg) calc(360deg - 0.50deg),
                        /* Zweite Linie am Ende (360°) */
                    #fff calc(360deg - 0.50deg) 360deg
            );

            &::before {
                content:"";
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                width: var(--hole);
                height: var(--hole);
                border-radius:50%;
                background: var(--bg);
            }
        }
    }
}

div.template-part-event .inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
    margin-top: 48px;

    @media screen and (min-width: 1024px){
        flex-direction: row;
    }

    div.event-content {
        flex-grow: 1;
    }

    div.event-details {
        display: flex;
        flex-direction: column;
        gap: 20px;

        & > div {
            border-radius: 4px;
            border: 1.5px solid var(--neutral-60, #9E9E9E);
            padding: 32px;

            h2 {
                white-space: nowrap;
                display: flex;
                justify-content: start;
                align-items: center;
                gap: 16px;
            }
        }
    }

}

.storyCardContainer {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    margin-bottom: 32px;
    gap: 32px;
    align-items: stretch;

    & > * {
        max-width: 100%;
    }


    @media screen and (min-width: 1024px){
        flex-direction: row;
        gap: 16px;

        & > * {
            max-width: 30%;
        }
    }


}

.story-card {
    border-radius: 4px;
    background: var(--neutral-10, #FFF);
    padding: 16px;
    box-shadow: 0px 0px 0px 0 rgba(118, 118, 118, 0.10);
    transition: box-shadow ease-in-out 0.5s;

    &:hover,
    &:focus,
    &:focus-visible {
        box-shadow: 4px 4px 12px 0 rgba(118, 118, 118, 0.10);
    }

    .single-post-header-image {
        margin-bottom: 16px;
    }
}

a.single-story-card {
    text-decoration: none;
    padding-bottom: 16px;

    &:hover,
    &:focus,
    &:focus-visible {
        box-shadow: 4px 4px 12px 0 rgba(118, 118, 118, 0.10);
    }
}

.single-story-card .category-tag {
    font-size: 14px;
}

.single-story-card .spacebar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.video-grid-container {
    display: flex;
    --numberOfColums: 1;
    --numberOfGaps: calc(var(--numberOfColums) - 1 );
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-m);

    @media screen and (min-width: 768px){
        --numberOfColums: 2;
    }

    @media screen and (min-width: 1024px){
        --numberOfColums: 3;
    }

    .video-grid-item {
        width: calc( (100% - var(--numberOfGaps) * var(--space-m)) / var(--numberOfColums) );
        background: #fff;
        display: block;
        text-decoration: none !important;
        color: var(--neutral-90, #424242);
        transition: box-shadow ease-in-out 0.5s;

        &:hover,
        &:focus,
        &:focus-visible {
            box-shadow: 4px 4px 12px 0 rgba(118, 118, 118, 0.10);
        }

        div.image-container {
            position: relative;

            svg {
                z-index: 999;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(calc(65px/-2), calc(65px/-2));
            }
        }
    }
}

.profactor-subpages {
    overflow: hidden;
}

div.subpagegrid {
    --numberOfColums: 1;
    --gapValue: var(--space-m);
    --numberOfGaps: calc(var(--numberOfColums) - 1 );

    @media screen and (min-width: 1024px){
        --numberOfColums: 2;
    }

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gapValue);

    &::after {
        content: "";
        position: absolute;
        top: 25px;
        right: 25px;
        width: 565px;
        height: 563px;
        background-image: url("icons/bglogo.svg");
        background-size: contain; /* oder cover */
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.1;
        z-index: 1;
    }

    a {
        text-decoration: none;
        color: inherit
    }

    & > * {
        width: calc( (100% - var(--numberOfGaps) * var(--gapValue)) / var(--numberOfColums) );
        box-shadow: 4px 4px 12px 0 rgba(118, 118, 118, 0.10);
        box-sizing: border-box;
        z-index: 99;
    }
}

div.topics4grid {
    --numberOfColums: 1;
    --gapValue: var(--space-m);
    --numberOfGaps: calc(var(--numberOfColums) - 1 );

    @media screen and (min-width: 1024px){
        &.number-of-topics-2 {
            --numberOfColums: 2;
        }

        &.number-of-topics-3 {
            --numberOfColums: 3;
        }
    }

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gapValue);

    &::after {
        content: "";
        position: absolute;
        top: 25px;
        right: 25px;
        width: 565px;
        height: 563px;
        background-image: url("icons/bglogo.svg");
        background-size: contain; /* oder cover */
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.1;
        z-index: 1;
    }

    a {
        text-decoration: none;
        color: inherit
    }

    & > * {
        width: calc( (100% - var(--numberOfGaps) * var(--gapValue)) / var(--numberOfColums) );
        box-shadow: 4px 4px 12px 0 rgba(118, 118, 118, 0.10);
        box-sizing: border-box;
        z-index: 99;
    }
}


.profactor-pageteaser {
    padding-top: 80px;
    padding-bottom: 80px;

    @media screen and (min-width: 1024px){
        &.reversed .inner {
            flex-direction: row-reverse;
        }
    }

    .inner {
        --numberOfColums: 1;
        --gapValue: var(--space-m);
        --numberOfGaps: calc(var(--numberOfColums) - 1 );

        @media screen and (min-width: 1024px){
            --numberOfColums: 2;
        }

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: var(--gapValue);

        & > * {
            width: calc( (100% - var(--numberOfGaps) * var(--gapValue)) / var(--numberOfColums) );
            box-sizing: border-box;
            z-index: 99;

            @media screen and (min-width: 1024px){
                width: calc( (80% - var(--numberOfGaps) * var(--gapValue)) / var(--numberOfColums) );

                &.page-teaser-content {
                    width: calc( (120% - var(--numberOfGaps) * var(--gapValue)) / var(--numberOfColums) );
                }
            }

            img {
                width: 100%;
                max-width: 100%;
                height: auto;
            }

            .btn-primary {
                /* padding: 10px 10px;*/
                padding: 0;
                background: var(--dark-turkis-web);
                width: 32px;
                height: 32px;
                box-sizing: border-box;
                border-radius: 7px 0 7px 0;

                svg path {
                    fill: #fff;
                }

                &:hover {
                    background: var(--dark-turkis-web-hover);
                }

                &:focus,
                &:focus-visible {
                    background: var(--dark-turkis-web);
                }


            }
        }
    }
}

.profactor-pageteasergrid {
    padding-top: 48px;
    padding-bottom: 48px;


    @media screen and (min-width: 1024px){

        &.columns-1 .inner {
            --numberOfColums: 1;
        }

        &.columns-2 .inner {
            --numberOfColums: 2;
        }

        &.columns-3 .inner {
            --numberOfColums: 3;
        }

        &.columns-4 .inner {
            --numberOfColums: 4;
        }

        &.reversed .inner {
            flex-direction: row-reverse;
        }
    }

    .inner {
        --numberOfColums: 2;
        --gapValue: var(--space-m);
        --numberOfGaps: calc(var(--numberOfColums) - 1 );

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--gapValue);

        & > * {
            width: calc( (100% - var(--numberOfGaps) * var(--gapValue)) / var(--numberOfColums) );
            box-sizing: border-box;
            z-index: 99;

            img {
                width: 100%;
                max-width: 100%;
                height: auto;
            }

            .btn-primary {
                padding: 10px 10px;
                padding: 0;
                background: var(--dark-turkis-web);
                width: 32px;
                height: 32px;
                box-sizing: border-box;
                border-radius: 7px 0 7px 0;

                svg path{
                    fill: white;
                }

                &:hover,
                &:focus,
                &:focus-visible,
                &:active {
                    border-radius: 7px 0 7px 0;
                    background: var(--dark-turkis-web-hover);
                    box-shadow: none;
                }
            }
        }
    }
}

.icon-box {
    display: flex;
    flex-direction: row;
    gap: 15px;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: center;

    img {
        width: 100%;
        aspect-ratio: 1 / 1;
        max-width: 74px;
    }
}

.profactor-team-grid {

    .team-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(250px, 1fr));
        gap: 21px;

        .team-person-box {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 80px;

            .image-container {
                aspect-ratio: 4 / 3;
                overflow: hidden;

                img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    @media screen and (max-width: 991px) {
        .team-container {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }
    }
}

/* Updates for PDF View */

body.pdf-view {

    header#profactor-header .inner #menue-area {
        display: none !important;
    }

    header#profactor-header .inner {
        justify-content: center !important;
    }

    #profactor-breadcrumbs {
        display: none !important;
    }

    #backToTopBtn {
        display: none;
    }

    #profactor-footer {
        display: none;
    }

    &.single-job {

        .application-button-container {
            display: none;
        }

        .profactor-benefits {
            display: none;
        }

        .cta-container {
            background-color: var(--neutral-20);
            a.btn-secondary {display: none;}
        }
    }
}

body #profactor-footer {
    margin-top: 64px;

    @media screen and (min-width: 1024px){
        margin-top: 128px;
    }
}

body.has-contact-person {

    #profactor-footer {
        margin-top: 0;
    }

    .contactPersonBox-container {
        margin-top: var(--space-xxl);
    }
}


.nothing-found-here {
    width: 100%;
    background-color: var(--dark-turkis-web);
    margin-bottom: 32px;
    padding: 8px 16px !important;

    p {
        display: flex;
        flex-direction: row;
        gap: 16px;
        justify-content: flex-start;
        align-items: center;
        color: var(--neutral-10) !important;
        margin: 0;
    }
}


.profactor-publication .list-of-available-results {
    gap: 0;

    & > div{
        border-bottom: 0.5px solid var(--neutral-70, #757575);
        padding-top: 16px;
        padding-bottom: 16px;
        overflow-x: auto;

        &:first-child {
           padding-top: 0px;
        }

        &:last-child {
            /* border-bottom: none; */
        }

        h2.h6,
        div.description{
            color: var(--neutral-90, #424242)
        }
    }
}

/* wps-accordion style for cookie plugin */

/* wps accordion */

.wps-accordion {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---- individual item ---- */

.wps-accordion details {
    background-color: #fff !important;
    /* background: #fff !important;*/
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.wps-accordion details[open] {
    /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);*/
}

/* ---- trigger ---- */

/* cookie banner */

#cmplz-cookiebanner-container {


    #cmplz-header-1-optin {
        font-family: var(--main-headline-font-family);
        font-style: var(--main-headline-font-style);
        font-weight: var(--main-headline-font-weight);
        color: var(--main-headline-color);
        margin: 0;
        padding: 0;
        font-size: 20px;
        line-height: 28.8px;

        @media screen and (min-width: 1024px){
            font-size: 28.13px;
            line-height: 36.569px;
        }
    }


    .cmplz-message,
    .cmplz-category-title,
    .cmplz-description,
    .cmplz-always-active {
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight);
        font-style: var(--body-font-style);
        color: var(--body-color);
        font-size: 16px;
        line-height: 26.6px;

        @media screen and (min-width: 1024px){
            font-size: 18px;
            line-height: 28.8px;
        }
    }

    .cmplz-message {
        margin-bottom: 45px;
    }

    .cmplz-category-title {
        font-weight: bold;
    }

    a.cmplz-link {
        color: var(--dark-turkis-web);
        text-align: right;
        font-family: 'Atkinson Hyperlegible';
        /* font-size: 18px;*/
        font-size: inherit;
        font-style: normal;
        font-weight: 400;
        /* line-height: 28.8px; /* 160% */
        line-height: inherit;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;

        &:hover,
        &:focus,
        &:focus-visible,
        &:active {
            text-decoration: none;
        }
    }

    div.cmplz-documents {
        margin-top: 16px;
    }
}

/* Style for default galerie */
div.gtnbrg-contentarea figure.wp-block-gallery {
    margin: auto;
    width: calc(100% - 2*var(--space-s));
    max-width: 1202px;

    figcaption.wp-element-caption {
        display: none !important;
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight);
        font-style: var(--body-font-style);
        color: var(--body-color);
        font-size: 16px;
        line-height: 26.6px;

        @media screen and (min-width: 1024px){
            font-size: 18px;
            line-height: 28.8px;
        }
    }
}

/* text on the intro element is always left-aligned, but not on the home page */
body.home .headimage-box-widget > div.font-body {
    text-align: center;
}

body.home .headimage-box-widget h1,
body.home .headimage-box-widget .h1,
body.home .headimage-box-widget h2,
body.home .headimage-box-widget .h2 {
    text-align: center;
}



@media screen and (min-width: 1024px){
    div.mission-content h2.text-white + p.text-white {
        max-width: 793px;
    }
}


.gtnbrg-contentarea .wp-block-heading ~ p ~ .profactor-pageteasergrid {
    /*padding-top: 48px !important;*/
}

.gtnbrg-contentarea p + .profactor-pageteaser {
    /*padding-top: 48px !important;*/
}



.profactor-topics4 .topics4grid .font-body {

    & > *:first-child {
        margin-top: 0;
    }

    & > *:last-child {
        margin-bottom: 0;
    }

}


div#content .gtnbrg-contentarea {

    h2.wp-block-heading {
        padding-top: 48px !important;
    }

    .container-default + h2.wp-block-heading {
        padding-top: 0 !important;
    }

    .wps-spacer-block + h2.wp-block-heading,
    .container-default + .wp-block-spacer + h2.wp-block-heading,
    .container-default + .wps-spacer-block + h2.wp-block-heading {
        padding-top: 0 !important;
    }

    & > p:has(+ .container-default),
    & > p:has(+ .wp-block-spacer + .container-default),
    & > p:has(+ .wps-spacer-block + .container-default){
        margin-bottom: 0 !important;
    }

    h3.wp-block-heading {
        padding-top: 24px !important;
    }
}