:root {
    --header_hight: 60px;
    --header_padding: 30px;
    --header_padding-right: 120px;
    --header_icon_width: 32px;
    --burger_width: 360px;
    --swipeHeight: 300px;
}

.header_logo {
    width: 288px;
}

.searcebar_Contrainer {
    transition: left 0.36s cubic-bezier(.4,1.35,.2,.96);
    scrollbar-width: none;
    /*overflow: hidden;*/
}

.filterVisible .filter {
    z-index: 4;
}

.filterVisible .companyList {
    z-index: 3;
}

.filterVisible .searcebar_Contrainer,
.companyListVisible .searcebar_Contrainer,
.companyListStartupVisible:not(.startScreenVisible) .searcebar_Contrainer {
    left: calc(var(--header_padding) + 420px);
    width: calc(100% - var(--header_padding)*2 - 420px);
}

.filter,
.companyList,
.filterVisible_Bottom .filter {
    max-width: calc(450px - var(--header_padding)*2 );
    left: -450px;
    top: 0;
    transition: left 0.1s cubic-bezier(.8,0,.2,1);
    border-radius: 0;
    overflow: visible;
}

.filterVisible .filter {
    left: 0;
    top: 0;
}

.favorites {
    max-width: calc(450px - var(--header_padding)*2 );
    right: 0;
    width: 0;
    padding-left: 0;
    padding-right: 0;
    top: 0;
    transition: width 0.1s cubic-bezier(.8,0,.2,1);
    transition: padding 0.1s cubic-bezier(.8,0,.2,1);
    border-radius: 0;
    overflow: visible;
}

.favoritesVisible .favorites {
    width: calc(100% - var(--header_padding) * 2 );
    padding: var(--header_padding);
}

.forEmployersVisible .forEmployersIndicator {
    display: block;
}

.forEmployersButton {
    display: block !important;
}

.forEmployersClose {
    top: 50px;
    right: 50px;
    cursor: pointer;
}

.forEmployersContainer {
    width: 500px;
    z-index: 999;
    top: 40px;
    right: 30px;
}

.removed {
    max-width: calc(450px - var(--header_padding)*2 );
    right: 0;
    width: 0;
    padding-left: 0;
    padding-right: 0;
    top: 0;
    transition: width 0.1s cubic-bezier(.8,0,.2,1);
    transition: padding 0.1s cubic-bezier(.8,0,.2,1);
    border-radius: 0;
    overflow: visible;
}

.removedVisible .removed {
    width: calc(100% - var(--header_padding) * 2 );
    padding: var(--header_padding);
}

.companyListVisible:not(.filterVisible):not(.startScreenVisible) .companyList {
    left: 0;
    top: 0;
}

.companyListStartupVisible:not(.startScreenVisible) .companyList {
    left: 0;
    top: 0;
}
/*.filter a.back,
.companyList a.back {
    display: none;
}
*/
.companyList .tab {
    display: block;
    position: absolute;
    right: -40px;
    top: calc(50% - 40px);
    background-color: var(--white);
    width: 40px;
    height: 80px;
    border-radius: 0 10px 10px 0;
    border: none;
    box-shadow: 4px 1px 4px rgba(0, 0, 0, 0.4);
}

.companyList .tab > span.icon {
    background-image: url("../assets/chefron_left_orange.svg");
    width: 25px;
    height: 25px;
    transform: rotate(180deg);
    transition: 0.4s;
}

.companyListVisible .companyList .tab > span.icon,
.companyListStartupVisible .companyList .tab > span.icon {
    transform: rotate(0deg);
}

.companyList h2.betiebssuche::before {
    display: none;
}

.companyList h6.betiebssuche {
    margin: 12px;
    text-align: center;
}

.companyList h4.betiebssuche {
    display: block;
    top: 42px;
    bottom: auto;
    /*font-size: initial;*/
}

.companyList {
    height: initial; /* calc(100% );*/
    min-height: calc(100% - var(--header_padding) * 2 );
}

.jobSearch {
    max-width: calc(400px - var(--header_padding)*2 );
    left: calc(450px + var(--header_padding) );
    top: 110%;
    height: calc(100% - 120px - var(--header_padding)*2);
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
    transition: top 0.36s cubic-bezier(.4,1.35,.2,.96);
}

.jobSearchVisible:not(.pinMenuVisible) .jobSearch {
    top: 100px;
    left: calc(480px + var(--header_padding));
}



.pinMenu {
    left: 60px;
    bottom: 30px;
    /*height: 100%;*/
    height: calc(100% - var(--pinMenuMinTopDesktop) );
    /*overflow-y: auto;*/
    overflow: hidden;
    width: calc(100% - 60px );
}

.pinMenuVisible .pinMenu {
    top: initial;
    bottom: 80px;
}

.shareMenu {
    bottom: 30px;
    overflow: hidden;
    height: calc(100% - var(--shareMenuMinTopDesktop) );
    width: calc(100% - 60px );
    max-width: 420px;
    left: 50%;
    transform: translateX(-50%);
}

.shareMenuVisible .shareMenu {
    top: initial;
    bottom: 40px;
}

.startScreen {
    overflow-y: auto;
    min-height: 280px;
    max-width: 400px;
}

.startScreen .startScreenPage {
    margin-top: 0px;
}


.startScreenVisible:not(.initStartScreen):not(.shareMenuVisible) .startScreen {
    top: 50%;
    transform: translate(-50%, -50%);
    bottom: initial;
}

.startScreen img {
    padding: 12px;
}

.startScreen .startScreenClose {
    cursor: pointer;
    width: 24px;
    height: 24px;
    padding: 0;
    position: absolute;
    right: 12px;
    top: 12px;
}

.startScreen .startScreenGreeting {
    margin-top: 16px;
    font-size: 24px;
}

.startScreen .startScreenName {
    font-size: 22px;
}

@media (max-height: 865px) {

    .startScreenSplashRegular {
        display: none;
    }

    .startScreenSplashShallow {
        display: block;
    }

    /*    .startScreen .startScreenLogo {
        padding-top: 16px !important;
        padding-bottom: 12px !important;
    }
*/
}

.startScreen .startScreenContent {
    font-size: 16px;
    font-weight: bold;
    margin-top: 12px;
    padding: 0 42px 16px 42px;
}

.startScreen .startScreenLogo {
    padding-top: 24px;
    padding-bottom: 16px;
}

.startScreen .queryText {
    font-size: 20px;
    font-weight: bold;
    padding: 8px 24px 32px 24px;
}

.shareMenu .startScreenGreeting {
    margin-top: 16px;
    font-size: 24px;
}

.shareMenu .startScreenName {
    font-size: 22px;
}

.shareMenu .startScreenContent {
    font-size: 18px;
}

.messageDialog {
    overflow-y: auto;
    min-height: 220px;
    max-width: 340px;
}

.messageDialog .messageDialogPage {
    margin-top: 0px;
}


.messageDialogVisible .messageDialog {
    top: 50%;
    transform: translate(-50%, -50%);
    bottom: initial;
}

.messageDialog img {
    padding: 12px;
}

.messageDialog .messageDialogGreeting {
    margin-top: 0px;
    font-size: 24px;
}

.messageDialog .messageDialogName {
    font-size: 22px;
}

.messageDialog .messageDialogContent {
    font-size: 16px;
    margin-top: 12px;
    padding: 0 42px 0 42px;
}

.messageDialog .queryText {
    font-size: 20px;
    font-weight: bold;
    padding: 8px 24px 32px 24px;
}

.filterVisible .pinMenu {
    left: 500px;
}

.companyListVisible .pinMenu,
.companyListStartupVisible .pinMenu {
    left: 500px;
}

#filter-back {
    display: none !important;
}

#filter-found-info {
    display: flex;
    align-items: baseline;
}

#filter-found-info-small {
    display: none;
}

.filterCompanyCountFound {
    max-width: 22ch;
}

.menubar {
    gap: 20px;
}

.d-sm {
    display: none;
}

.d-md {
    display: block;
}

a.link_favorits {
    margin-left: inherit !important;
}

a.link_favorits_existing {
    margin-left: inherit !important;
}

.sharedPricing {
    font-size: 12px;
}

.diagonal-strike-sm::after {
    height: 2px; /* line thickness */
}
.sharedMenuPreviewWithBanner {
    max-height: calc(100% - var(--pinMenuPreviewHeightOffset) - 100px);
}