:root {
    --header_hight: 50px;
    --header_padding: 20px;
    --header_padding-right: 20px;
    --header_icon_width: 26px;
    --burger_width: 300px;
    --swipeHeight: 260px;
    --pinMenuMinTop: 100px;
    --pinMenuMinTopDesktop: 165px;
    --pinMenuPreviewHeightOffset: 30px;
    --shareMenuMinTop: 90px;
    --shareMenuMinTopDesktop: 100px;
    --startScreenMinTop: 80px;
    --startScreenMinTopDektop: 120px;
    --startScreenMinTop: 100px;
    --startScreenMinTopDesktop: 160px;
    --externalLinkQueryMinTop: 200px;
    --companyListVisibleFlapHeight: 64px;
    --companyListVisibleMobileTop: 70px;
    --favoritesVisibleFlapHeight: 56px;
    --favoritesListVisibleMobileTop: 70px;
    --removedVisibleFlapHeight: 56px;
    --removedListVisibleMobileTop: 70px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }


    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.pulse .pulse-item {
    animation: pulse 0.4s ease 2; /* Adjust duration and timing as needed */
}

.pulse.pulse-item {
    animation: pulse 0.4s ease 2; /* Adjust duration and timing as needed */
}

.pulse-short {
    animation: pulse 0.4s ease 2; /* Adjust duration and timing as needed */
}

/* klappt nicht mit einfachen animationen, weil die height in px sein muss. so geht es also */
/* das problem mit height ist, dass der banner bei gruppierten firmen mit zusammenfährt, wenn die
    erste firma zusammenfährt, auch wenn eine weitere drin ist. man kann das in der listenansicht
    zwar löschen, indem man den banner in der höhe erst fest zieht, und am ende wieder auf auf
    setzt. man kann firmen aber aus unterschiedlichen bereichen ausblenden. dann kann man den
    banner in der listensicht nicht einfrieren, weil das abfangen vom $broadcast erst passiert,
    nachdem die firma ausgeblendet ist. aber über die opacity wirk das auch ganz gut, vielleicht
    sogar weniger hektisch.
*/
@keyframes hideAnimation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
}

@keyframes showAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.hide-company {
    animation: hideAnimation 0.8s ease forwards;
}

.show-company {
    animation: showAnimation 1s ease forwards;
}

a:visited {
    color: inherit; /* or use the color you want for visited links */
    text-decoration: none; /* remove underline for visited links, if desired */
}

header {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - var(--header_padding) - var(--header_padding));
    height: var(--header_hight);
    background-color: #FFF;
    padding: 0 var(--header_padding);
    padding-right: var(--header_padding);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
    z-index: 5;
    display: flex;
    gap: 16px;
    align-items: center;
}

.header_logo {
    background-image: url("../assets/Schriftzug.svg");
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: contain;
    /*position: absolute;*/
    height: 100%;
    width: 202px;
}

a.link_favorits {
    margin-left: auto;
    background-image: url("../assets/Herz_orange.svg");
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: contain;
    /*    position: absolute;
    top: calc(var( --header_hight)*0.2 );
*/
    width: var(--header_icon_width);
    height: var(--header_icon_width);
    /*    right: calc(var(--header_padding-right) + 2.8*var(--header_icon_width));*/
}

a.link_favorits_existing {
    margin-left: auto;
    background-image: url("../assets/Herz_filled.svg");
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: contain;
    /*    position: absolute;
    top: calc(var( --header_hight)*0.2 );
*/
    width: var(--header_icon_width);
    height: var(--header_icon_width);
    /*    right: calc(var(--header_padding-right) + 2.8*var(--header_icon_width));
*/
}

span.link_favorits {
    display: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 10px;
    color: #ffa535;
    /*    position: absolute;
    top: calc(var( --header_hight)*0.2 + 20px);
    right: calc(var(--header_padding-right) + 3.5*var(--header_icon_width) );
*/
}

a.link_excluded {
    background-image: url("../assets/ausblenden_icon.svg");
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: contain;
    /*    position: absolute;
    top: calc(var( --header_hight)*0.2 );
    */
    width: var(--header_icon_width);
    height: var(--header_icon_width);
    /*    right: calc(var(--header_padding-right) + 1.5*var(--header_icon_width));*/
}

a.link_excluded.filled {
    /*background-image: url("../assets/ausblenden_icon32Filled.png");*/
}

span.link_excluded {
    display: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 10px;
    color: #ffa535;
    position: absolute;
    /*    top: calc(var( --header_hight)*0.2 + 20px);
    right: calc(var(--header_padding-right) + 2.35*var(--header_icon_width));
*/
}

.link_burgemenu {
    background-image: url("../assets/Burger_orange.svg");
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: contain;
    /*position: absolute;*/
    top: calc(var( --header_hight)*0.24);
    width: var(--header_icon_width);
    height: calc(var(--header_icon_width) * 0.8);
    /*right: var(--header_padding-right);*/
}

.map,
.mapMenus {
    position: absolute;
    left: 0;
    top: var(--header_hight);
    width: 100%;
    height: calc(100% - var(--header_hight));
    margin: 0;
    padding: 0;
    z-index: 1;
    overflow: hidden;
}

.searcebar_Contrainer {
    position: absolute;
    padding: var(--header_padding);
    height: 40px;
    width: calc(100% - var(--header_padding)*2);
    left: 0;
    top: calc(var(--header_padding)*0.75 - var(--header_padding) );
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    pointer-events: none;
}

.searcebar_Contrainer::-webkit-scrollbar {
    display: none;
}

.searcebar_Contrainer > .scroll {
    position: relative;
    white-space: nowrap;
    height: 100%;
    padding-right: var(--header_padding);
    width: fit-content;
    pointer-events: all;
}

.filter,
.favorites,
.removed {
    z-index: 3;
}

.companyList {
    z-index: 4;
}

.filter,
.companyList {
    position: absolute;
    background-color: var(--white);
    width: calc(100% - var(--header_padding) * 2 );
    top: 0;
    min-height: calc(100% - var(--header_padding) * 2 );
    padding: var(--header_padding);
    left: -110%;
    transition: left 0.2s cubic-bezier(.8,0,.2,1);
    overflow: hidden;
}

.favorites {
    position: absolute;
    background-color: var(--white);
    width: calc(100% - var(--header_padding) * 2 );
    top: 0;
    min-height: calc(100% - var(--header_padding) * 2 );
    padding: var(--header_padding);
    right: 100%;
    transition: right 0.2s cubic-bezier(.8,0,.2,1);
    overflow: hidden;
    z-index: 99;
}

.removed {
    position: absolute;
    background-color: var(--white);
    width: calc(100% - var(--header_padding) * 2 );
    top: 0;
    min-height: calc(100% - var(--header_padding) * 2 );
    padding: var(--header_padding);
    right: 100%;
    transition: right 0.2s cubic-bezier(.8,0,.2,1);
    overflow: hidden;
    z-index: 99;
}
/*
.filterVisible_Bottom .filter {
    top: calc(100% - var(--companyListVisibleFlapHeight));
    left: 0;
    transition: top 0.2s cubic-bezier(.8,0,.2,1), border-radius 0.2s;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    border-radius: 40px 40px 0 0;
}
*/
/*.filterVisible #companyList > button {
    display: none;
}

.filterVisible #companyList > button {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;*/ /* You can adjust the duration and easing function as needed */
/*}*/
.companyList {
    top: calc(100% - var(--companyListVisibleFlapHeight));
    left: 0;
    transition: top 0.2s cubic-bezier(.8,0,.2,1), border-radius 0.2s;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    border-radius: 40px 40px 0 0;
    min-height: calc(100% - var(--header_padding) * 2 - 70px);
}

.companyListVisible:not(startScreenVisible) .companyList {
    top: var(--companyListVisibleMobileTop);
}

.startScreenVisible .companyList {
    top: 100%;
}

.startScreenVisible header {
    pointer-events: none;
}

.startScreenVisible header {
    pointer-events: none;
}

.filter h2,
.favorites h2,
.removed h2,
.jobSearch h2,
.companyList h2 {
    margin-top: 0;
}

.filter a.back,
.favorites a.back,
.removed a.back
.jobSearch a.back,
.companyList a.back {
    position: absolute;
    left: var(--header_padding);
    top: calc(var(--header_padding) + 4px );
    font-weight: bold;
    color: var(--grey);
    /*font-size: 14px;*/
}

.filter .tab,
.favorites .tab,
.removed .tab,
.companyList .tab {
    display: none;
}

.filterVisible .filter {
    left: 0;
    top: 0;
    border-radius: 0;
}

.favoritesVisible .favorites {
    right: 0;
    top: 0;
    border-radius: 0;
}

.forEmployers {
    position: absolute;
    display: none;
}

.forEmployersIndicator {
    position: absolute;
    display: none;
}

.forEmployersVisible .forEmployers {
    display: block;
}

.forEmployersButton {
    display: none;
}

.forEmployersClose {
    width: 25px;
    height: 25px;
    z-index: 1000;
    top: 20px;
    right: 30px;
    cursor: pointer;
}

.forEmployersContainer {
    max-width: 500px;
    width: calc(100% - 20px);
    z-index: 999;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    top: 10px;
    right: 10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.removedVisible .removed {
    right: 0;
    top: 0;
    border-radius: 0;
}

.companyList h2.betiebssuche,
.removed h2.betiebssuche {
    position: absolute;
    font-size: 16px;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 0;
}

.companyList h4.betiebssuche {
    display: none;
    position: absolute;
    top: 42px;
    margin: 0 0 0 0;
    text-align: center;
    color: #ffa535;
    z-index: 999;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    font-size: small;
}

.companyListVisible .companyList h4.betiebssuche {
    display: block;
}

.companyList h2.betiebssuche::before {
    content: "";
    position: absolute;
    left: calc(50% - 95px );
    height: 6px;
    top: 10px;
    width: 190px;
    background-color: var(--grey);
    border-radius: 6px;
    transition: left 0.5s, width 0.5s;
}

.filterVisible .filter h2.betiebssuche::before {
    left: calc(50% - 3px );
    width: 6px;
}

.jobSearch {
    position: absolute;
    background-color: var(--white);
    width: calc(100% - var(--header_padding) * 2 );
    top: 0;
    height: calc(100% - var(--header_padding) * 2 );
    padding: var(--header_padding);
    padding-bottom: 0;
    z-index: 3;
    left: 110%;
    transition: left 0.2s cubic-bezier(.8,0,.2,1);
    overflow: hidden;
}

.jobSearch .berufssuche {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--lightGrey);
    color: var(--grey);
    width: calc(100% - var(--header_padding));
    border-radius: 50px;
    border: none;
    padding: 4px 12px;
}

.jobSearch .berufssuche > input {
    flex-grow: 1;
    background-color: var(--lightGrey);
    color: var(--grey);
    border: none;
    outline: none;
}

/*        .jobSearch .berufssuche::after {
            content: "";
            position: absolute;
            right: 10px;
            top: 6px;
            height: 20px;
            width: 20px;
            background-image: url("../assets/Suche.svg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
*/

.jobSearchVisible:not(.pinMenuVisible) .jobSearch {
    left: 0;
}


.tabSection {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding-top: 20px;
    margin: 0 calc(var(--header_padding) * -1);
    background: rgb(221,221,221);
    background: linear-gradient(0deg, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 24%);
}

.tabSection .tab {
    position: relative;
    width: 32%;
    font-size: 14px;
    text-align: center;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    box-shadow: 1px 1px 10px rgba(0, 20px, 0, 0);
    background-color: rgba(255, 255, 255, 0);
    transition: 0.4s;
}

.tabSection .tab::after {
    content: " ";
    position: absolute;
    bottom: 0;
    background-color: var(--orange);
    height: 4px;
    width: 0%;
    left: 50%;
    border-radius: 4px;
    transition: 0.36s cubic-bezier(.4,1.35,.2,.96);
}

.tabSection .tab1 {
    padding-top: 20px;
}

.tabSection .tab.seleced {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
    background-color: var(--white);
    font-weight: bold;
}

.tabSection .tab.seleced::after {
    width: 80%;
    left: 10%;
}

.jobSearch .list {
    position: absolute;
    padding: 30px 20px;
    left: 0;
    top: 204px;
    height: calc(100% - 164px - 100px);
    width: calc(100% - 20px*2 );
    overflow-x: hidden;
    overflow-y: scroll;
}

.jobSearch .list-filter {
    padding: 0 10px;
    /*    overflow-x: scroll;
    overflow-y: hidden;
*/
}

.jobSearch .list-filter::-webkit-scrollbar {
    display: none;
}

.jobSearch .list-filter > .scroll {
    position: relative;
    white-space: nowrap;
    height: 100%;
    padding-right: 20px;
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.jobSearch .list-filter a {
    background-color: var(--lightGrey);
    color: var(--grey);
    font-size: 14px;
    font-weight: normal;
    border-radius: 40px;
    padding: 4px 10px;
    transition: background-color 0.2s;
}

.jobSearch .list-filter a.seleced {
    color: white;
    background-color: var(--orange);
    font-weight: bold;
}

.jobSearch .list > p {
    margin: 0;
    padding: 10px;
}

.jobSearch .list .selectAll {
    color: var(--grey);
    text-decoration: underline;
}

.jobSearch .info {
    position: absolute;
    top: 8px;
    right: 4px;
    border: none;
    background-color: transparent;
    width: 1.4em;
    height: 1.4em;
}


.scrollcontainer {
    position: absolute;
    left: 0;
    width: 100%;
    top: 64px;
    height: calc(100% - 60px);
}

.scrollcontainer > div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 40px);
    overflow-y: scroll;
    padding-top: 8px;
    padding-bottom: 20px;
}

div.gradient-top,
div.gradient-bottom {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 40px;
    pointer-events: none;
    overflow: hidden;
    pointer-events: none;
}

div.gradient-top {
    top: 204px;
    z-index: 20;
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

div.gradient-bottom {
    z-index: 20;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

.scrollcontainer > div.gradient-top {
    top: 0;
    height: 22px;
    padding: 0;
}

.scrollcontainer > div.gradient-bottom {
    top: calc(100% - 80px);
}

.burgerMenu {
    position: absolute;
    right: calc(var(--burger_width) * -1 - var(--header_padding)*2 );
    top: 0;
    height: calc(100% - var(--header_padding)*2 );
    width: var(--burger_width);
    background-color: var(--white);
    z-index: 100;
    padding: var(--header_padding);
    transition: right 0.1s cubic-bezier(.8,0,.2,1);
}

.burgerMenu.burgerMenuVisible {
    right: 0;
}

.burgerMenu div.X {
    position: absolute;
    background-image: url(../assets/Close_orange.svg);
    left: calc(100% - var(--header_hight));
    top: 0;
    height: var(--header_hight);
    width: var(--header_hight);
    background-size: 20px;
    cursor: pointer;
}

.burgerMenu div.scrollcontainer {
    position: absolute;
    left: 0;
    top: var(--header_hight);
    width: calc(100% - var(--header_padding)*2);
    height: calc(100% - var(--header_hight) - var(--header_padding)*2);
    overflow-y: auto;
    padding: var(--header_padding);
}

.burgerMenu .logo {
    position: relative;
    width: 202px;
    height: 28px;
    background-image: url("../assets/Logo.svg");
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 20px;
}

.burgerMenu a {
    display: block;
    color: var(--grey);
    padding: 6px 0 6px 30px;
    margin: 2px 0;
    background-position: 0px 3px;
    background-size: 26px;
    background-repeat: no-repeat;
}

.burgerMenu section {
    margin: 20px 0;
}

.burgerMenu .socialLinks {
    overflow: visible;
    top: initial !important;
    position: static !important;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    height: auto;
    /*bottom: 40px;*/
    margin-top: auto;
    padding-bottom: 0;
}

.burgerMenu .socialLinks a {
    position: relative;
    width: 40px;
    height: 40px;
    background-position: center;
}

.link-extern {
}

.link-Betrieb {
    background-image: url("../assets/add_orange.svg");
}

.link-arbeitgeber {
    background-image: url("../assets/briefcase.svg");
}


.link-karrieremag {
    background-image: url("../assets/karrieremag.svg");
}

.link-geschichte {
    background-image: url("../assets/geschichte.svg");
}

.link-magazin {
    background-image: url("../assets/magazin.svg");
}

.link-berufsprofile {
    background-image: url("../assets/mitarbeiter.svg");
}

.link-bewerbungstipps {
    background-image: url("../assets/bewerbungstipps.svg");
}

.link-arbeitgeber {
    background-image: url("../assets/fur-arbeitgeber.svg");
}

.link-betrieb-anmelden {
    background-image: url("../assets/betrieb-anmelden.svg");
}


.link-Einstellungen {
}

.link-insta {
    background-image: url("../assets/social/instagram.svg");
}

.link-facebook {
    background-image: url("../assets/social/facebook.svg");
}

.link-linkedin {
    background-image: url("../assets/social/linkedin.svg");
}


.swiper {
    position: absolute;
    width: 100%;
    height: var(--swipeHeight);
    top: calc(100% - var(--swipeHeight) - 20px )
}

.swiper-pagination-bullet {
    background: var(--lightGrey);
    transition: 0.2s;
    border-radius: 10px;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--orange);
    width: 40px;
    border-radius: 10px;
}

.swiper-slide {
    background-color: var(--white);
    border-radius: 10px;
}

.swiper-button-next, .swiper-button-prev {
    top: calc(100% - 32px);
    color: var(--grey);
    width: 120px;
}

.swiper-button-next {
    right: 20px;
}

.swiper-button-prev {
    left: 20px;
}

.swiper-button-prev:after, .swiper-button-next:after {
    content: "";
}

/* pinMenu - - - - - - - - - - - - - - */
.pinMenu {
    pointer-events: none;
    background-color: rgb(255, 255, 255, 0);
    display: flex;
    flex-direction: column;
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    padding: 10px; /* damit das box-shadow des contents rein passt */
    height: calc(100% - var(--pinMenuMinTop) );
    /*    width: calc(100% - 60px ); */
    /*width: 100vw;*/
    max-width: 420px;
    top: 100%;
    overflow: hidden;
}

.pinMenuPreview {
    height: calc(100% - var(--pinMenuPreviewHeightOffset ));
}

.sharedMenuPreview {
    height: calc(100% - var(--pinMenuPreviewHeightOffset ));
}

.sharedMenuPreviewWithBanner {
    max-height: calc(100% - var(--pinMenuPreviewHeightOffset) - 80px);
}

@media (max-width: 462px) {
    .pinMenu {
        /*left: initial;*/
    }
}

.pinMenu .pinMenuContent {
    position: relative;
    pointer-events: all;
    background-color: var(--white);
    border-radius: 10px;
    /*padding: 20px;*/
    box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    overflow-y: auto;
    max-width: 420px;
}

.pinMenu .pinMenuHeader {
    margin-bottom: 12px;
    display: flex;
    pointer-events: none;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
}

.pinMenu .pinMenuHeader .pinMenuNavigation {
    pointer-events: all;
    background-color: var(--white);
    display: flex;
    align-items: center;
    border-radius: 16px;
    padding: 4px 8px;
    box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.5);
    width: fit-content;
    /*align-items: center;*/
}

.pinMenu .pinMenuHeader .pinMenuDelete {
    pointer-events: all;
    background-color: var(--white);
    margin-left: auto;
    display: flex;
    align-items: center;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.5);
    width: fit-content;
    aspect-ratio: 1/1;
    cursor: pointer;
    /*align-items: center;*/
}

.pinMenu .pinMenuContent > section {
    padding-left: 20px;
    padding-right: 20px;
}

.pinMenu .pinMenuContent section:first-of-type {
    padding-top: 28px;
}

.pinMenu .pinMenuContent section:last-of-type {
    padding-bottom: 20px;
}

.pinMenuVisible .pinMenu {
    top: initial;
    bottom: 80px;
}
/* shareMenu - - - - - - - - - - - - - - */
.shareMenu {
    pointer-events: none;
    background-color: rgb(255, 255, 255, 0);
    display: flex;
    flex-direction: column;
    z-index: 1;
    position: absolute;
    left: 10px;
    right: 10px;
    padding: 10px 2px; /* damit das box-shadow des contents rein passt */
    height: calc(100% - var(--shareMenuMinTop) );
    /*    width: calc(100% - 60px ); */
    max-width: 420px;
    top: 100%;
    z-index: 9999;
}

@media (min-width: 415px) {
    .shareMenu {
        padding: 10px;
    }
}


.shareMenu .shareMenuContent {
    position: relative;
    pointer-events: all;
    background-color: var(--white);
    border-radius: 10px;
    /*padding: 20px 20px 38px 20px;*/
    box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    overflow-y: auto;
}

.shareMenu .shareMenuHeader {
    margin-top: 0;
    margin-bottom: 12px;
    display: flex;
    pointer-events: none;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
}

.shareMenu .shareMenuHeader .shareMenuNavigation {
    pointer-events: all;
    background-color: var(--white);
    display: flex;
    align-items: center;
    border-radius: 16px;
    padding: 6px 8px;
    box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.5);
    width: 100%;
    /*align-items: center;*/
}

.shareMenu .shareMenuContent > section {
    padding-left: 20px;
    padding-right: 20px;
}

.shareMenu .shareMenuContent section:first-of-type {
    padding-top: 28px;
}

/*    .shareMenu .shareMenuContent section:last-of-type {
        padding-bottom: 48px;
    }
*/
.shareMenuClose {
    pointer-events: all;
    background-color: var(--white);
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 99;
    display: flex;
    align-items: center;
    border-radius: 16px;
    padding: 2px;
    box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.5);
    width: fit-content;
}

.shareMenuCloseButton {
    pointer-events: all;
    background-color: var(--white);
    display: flex;
    align-items: center;
    border-radius: 24px;
    padding: 8px;
    /*box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.5);*/
    width: fit-content;
    cursor: pointer;
    /*align-items: center;*/
}

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

.shareMenu .shareMenuDelete {
    pointer-events: all;
    background-color: var(--white);
    margin-left: auto;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.5);
    width: fit-content;
    aspect-ratio: 1/1;
    cursor: pointer;
    /*align-items: center;*/
}


/* startScreen - - - - - - - - - - - - - - */
.startScreenOverlay {
    z-index: 3;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background-color: rgb(255, 255, 255, 0);
}

.startScreen {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 100px);
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 100%;
    left: 50%;
    bottom: 40px;
    background-color: var(--white);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 2;
    position: absolute;
    padding: 10px; /* damit das box-shadow des contents rein passt */
    min-height: 250px;
    width: calc(100% - 60px);
    max-width: 300px;
}

.startScreen img {
    padding: 8px;
}

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

.startScreen .startScreenGreeting {
    font-size: 18px;
}

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

.startScreen .startScreenPage {
    flex-direction: column;
    display: flex;
    align-items: center;
    margin-bottom: auto;
}

.shareMenu .startScreenPage {
    flex-direction: column;
    display: flex;
    align-items: center;
    margin-bottom: auto;
    width: 100%;
    padding: 8px;
}

.startScreenSplashRegular {
    display: block;
}

.startScreenSplashShallow {
    display: none;
}

@media (max-height: 755px) {

    .startScreenSplashRegular {
        display: none;
    }

    .startScreenSplashShallow {
        display: block;
    }
}

.startScreen .startScreenContent {
    font-size: 15px;
    font-weight: bold;
    margin-top: 4px;
    padding: 8px 16px;
}

@media (min-height: 755px) {
    .startScreen .startScreenContent {
        font-size: 16px;
        padding: 12px 16px;
    }

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


.startScreen .startScreenLogo {
    padding-top: 12px;
    padding-bottom: 8px;
}

.shareMenu .startScreenContent {
    font-size: 14px;
    margin-top: 12px;
    text-align: center;
}

.startScreen .queryText {
    font-size: 16px;
    font-weight: bold;
    padding: 4px 16px 28px 24px;
}

.startScreen .otherPage {
    border-radius: 5px;
    padding: 4px;
    background-color: #c5c5c7;
    margin-left: 3px;
    margin-right: 3px;
}

.startScreen .currentPage {
    border-radius: 5px;
    padding: 4px 16px;
    background-color: #ffa535;
    margin-left: 3px;
    margin-right: 3px;
}

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

@media (min-height: 755px) {
    .startScreenVisible:not(.initStartScreen):not(.shareMenuVisible) .startScreen {
        bottom: 40px;
    }
}

.startScreenVisible .startScreenOverlay {
    top: 0;
    bottom: 0;
}
/* messageDialog - - - - - - - - - - - - - - */
.messageDialogOverlay {
    z-index: 100;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background-color: rgb(255, 255, 255, 0);
}

.messageDialog {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 100%;
    left: 50%;
    bottom: 60px;
    background-color: var(--white);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 3;
    position: absolute;
    padding: 10px; /* damit das box-shadow des contents rein passt */
    min-height: 200px;
    width: calc(100% - 60px);
    max-width: 250px;
}

.messageDialog img {
    cursor: pointer;
    padding: 8px;
    width: 16px;
    height: 16px;
    padding-left: 4px;
}

.messageDialog .messageDialogGreeting {
    font-size: 18px;
}

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

.messageDialog .messageDialogPage {
    flex-direction: column;
    display: flex;
    align-items: center;
    margin-bottom: auto;
}

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

.messageDialog .queryText {
    font-size: 16px;
    font-weight: bold;
    padding: 4px 16px 28px 24px;
}

.messageDialog .otherPage {
    border-radius: 5px;
    padding: 4px;
    background-color: #c5c5c7;
    margin-left: 3px;
    margin-right: 3px;
}

.messageDialog .currentPage {
    border-radius: 5px;
    padding: 4px 16px;
    background-color: #ffa535;
    margin-left: 3px;
    margin-right: 3px;
}

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

.messageDialogVisible .messageDialogOverlay {
    top: 0;
    bottom: 0;
}


/* externalLinkQuery - - - - - - - - - - - - - - */
.externalLinkQuery {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 98;
    background-color: black;
    opacity: 50%;
    top: 100%;
}

.externalLinkQueryDialog {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: calc(50% - 190px);
    z-index: 9999;
    /*right: 40px;*/
    max-width: 300px;
    /*height: 250px;*/
    /*max-width: 400px;*/
    border-radius: 10px;
    padding: 20px;
    background-color: var(--white);
    box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    overflow-y: hidden;
    top: 100%;
    padding: 20px 30px 36px 30px;
}

.externalLinkQueryVisible .externalLinkQuery {
    top: 0;
}

.externalLinkQueryVisible .externalLinkQueryDialog {
    top: calc(50% - 145px);
}

#filter-back {
    display: inline-flex !important;
    align-items: center !important;
}

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

.filterCompanyCountFound {
    font-size: 14px;
    font-weight: bold;
    padding-top: 4px;
    white-space: nowrap;
    max-width: 15ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slideCompanyList {
    cursor: pointer;
}

.d-sm {
    display: block;
}

.d-md {
    display: none;
}

.company-hidden .UN-EL-header h3 {
    color: lightgray;
}

.company-hidden h4 {
    color: lightgray;
}

.company-hidden .UN-EL-Struktur {
    color: lightgray;
}

.company-hidden .website-link {
    color: lightgray;
}

.company-hidden .UN-LI-AB-element {
    color: lightgray;
}

.company-hidden p {
    color: lightgray;
}

.azubibtn {
    width: fit-content;
    color: white !important;
    background-color: #ffa535 !important;
    padding: 4px 16px !important;
    border-radius: 20px !important;
    border: solid 2px #ffa535 !important;
    cursor: pointer;
    /*margin: 10px 0 0 0 !important;*/
    font-family: nunito !important;
    font-size: 18px !important;
    font-weight: bold !important;
    white-space: nowrap;
    display: flex;
}

.azubibtn.azubidisabled {
    cursor: default;
    background-color: #ffce92 !important;
    border: solid 2px #ffce92 !important;
}

.azubibtn:disabled {
    cursor: default;
    background-color: #ffce92 !important;
    border: solid 2px #ffce92 !important;
}

.azubibtn:hover {
    color: white;
    background-color: #ffa535;
    opacity: 0.9;
}

.azubibtn_inv {
    width: fit-content;
    color: #ffa535;
    background-color: white;
    padding: 4px 16px;
    border: solid 3px #ffa535;
    border-radius: 20px;
    cursor: pointer;
    margin: 10px 0 0 0;
    font-family: nunito !important;
    font-size: 18px !important;
    font-weight: bold !important;
    white-space: nowrap;
    display: flex;
}

.azubibtn_inv:hover {
    color: #ffa535;
    background-color: white;
    opacity: 0.9;
}

.azubibtn_inv:disabled {
    color: #ffd8a6; /* Lighter shade of the enabled color */
    border-color: #ffd8a6; /* Lighter border */
    cursor: default; /* Default cursor */
    /*opacity: 0.7;*/ /* Slightly faded */
}

a.azubibtn_inv:visited {
    color: #ffa535;
}

.sharedPricing {
    white-space: nowrap;
    font-size: 10px;
}

.diagonal-strike-sm {
    position: relative;
    display: inline-block;
    /*color: black;*/
}

.diagonal-strike-sm::after {
    content: "";
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    height: 1px; /* line thickness */
    background-color: black; /* line color */
    transform: rotate(331deg); /* adjust angle */
    transform-origin: center;
    pointer-events: none;
}

.regular-12 {
    font-family: nunito;
    font-size: 12px;
}

.regular-13 {
    font-family: nunito;
    font-size: 13px;
}

.regular-14 {
    font-family: nunito;
    font-size: 14px;
}

.regular-16 {
    font-family: nunito;
    font-size: 16px;
}

.regular-18 {
    font-family: nunito;
    font-size: 18px;
}

.regular-20 {
    font-family: nunito;
    font-size: 20px;
}

.regular-22 {
    font-family: nunito;
    font-size: 22px;
}

.regular-25 {
    font-family: nunito;
    font-size: 25px;
}

.regular-28 {
    font-family: nunito;
    font-size: 28px;
}

.regular-36 {
    font-family: nunito;
    font-size: 36px;
}

.regular-45 {
    font-family: nunito;
    font-size: 45px;
}

.regular-50 {
    font-family: nunito;
    font-size: 50px;
}

.text-13 {
    font-size: 13px;
}

.text-14 {
    font-size: 14px;
}

.text-16 {
    font-size: 16px;
}

.text-18 {
    font-size: 18px;
}

.text-20 {
    font-size: 20px;
}

.text-22 {
    font-size: 22px;
}

.text-25 {
    font-size: 25px;
}

.text-28 {
    font-size: 28px;
}

.text-36 {
    font-size: 36px;
}

.text-45 {
    font-size: 45px;
}

.text-50 {
    font-size: 50px;
}

a {
    color: black;
    font-weight: normal;
    text-decoration: none !important;
}

.rotate-warning {
    display: none;
}

@media (orientation: landscape) and (max-height: 500px) {
    .rotate-warning {
        display: flex;
    }
}