/*START Orange Bubble Berufe*/
.orange-bubbles {
    background-color: var(--orange);
    border-radius: 25px;
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.orange-bubbles > img {
    /*        width: .8em;
        height: .8em;
        padding-right: 10px;
*/
}

.orange-bubbles p {
    padding: 5px 10px;
    font-weight: bold;
    border: none;
    margin: 0;
    color: var(--grey);
}
/*END Orange Bubble Berufe*/


/*START Berufe Searchbar*/
/*layout und border color*/
.SucheBeruf form {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    padding-right: 10px;
    padding: 5px;
    border: 3px solid var(--grey);
    border-radius: 25px;
    background-color: var(--white);
}

.SucheBeruf form > img {
    padding: 5px;
}

.SucheBeruf form .search {
    padding-right: 10px;
}

/*x bild*/
.SucheBeruf form .close {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.SucheBeruf form input:required:valid + .close {
    opacity: 1;
}

.SucheBeruf .close :required:invalid:not(:placeholder-shown) {
    opacity: 0;
}

/*input field no border*/
.SucheBeruf input {
    outline: none;
    border: none;
}

/*zu*/

/*reinschreiben*/

/*END Berufe Searchbar*/

/*START Filter Sections*/
.filter-section {
    position: relative;
    width: 100%;
}

.filter-section p {
    padding-right: 10px;
}

.filter-section h3 {
    margin: 0;
    padding-top: 5px;
}

.filter-section img {
    /*        width: 0.9em;
        height: 0.9em;
*/
}

.filter-section {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.Wohnort form {
    padding-right: 10px;
}

.Wohnort input {
    min-width: 250px;
    padding-right: 10px;
    border: none;
    outline: none;
    border-radius: 25px;
    background-color: var(--lightGrey);
}

.Wohnort input[type="text"] {
    padding: 10px;
}


/*START Slider*/
.sliderEntfernung {
    width: 100%;
    position: relative;
    padding: 0 20px 0 14px;
    margin-top: 42px;
}

/*@media (min-height: 755px) {
    .sliderEntfernung {
        margin-top: 42px;
    }
}
*/

sliderEntfernung .slider {
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
}

.sliderEntfernung-label-bottom {
    width: 100%;
    position: relative;
    padding: 0;
}

sliderEntfernung-label-bottom .slider {
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #04AA6D;
    cursor: pointer;
}
/*END Slider*/


/*START Checxboxen Mitarbeiter*/
.mitarbeiter-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    padding: 10px 10px;
    position: relative;
}

.container label {
    padding-left: 32px;
    padding-right: 16px;
}

.checkbox {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Hide the browser's default checkbox */
.container input {
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    position: absolute;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    height: 20px;
    width: 20px;
    box-sizing: border-box;
    background-color: var(--white);
    border: 3px solid var(--grey);
    border-radius: 5px;
}

/* On mouse-over, add a background color */
.container:hover input ~ .checkmark {
    transition: background-color 0.2s ease-in-out;
    background-color: var(--brightOrange);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: var(--orange);
    border: none;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    /*display: none;*/
    display: block;
    position: absolute;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
    border-right-width: 3px;
    border-bottom-width: 3px;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    position: absolute;
    left: 7px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid var(--grey);
    border-width: 0;
    border-right-width: 0px;
    border-bottom-width: 0px;
    transform: rotate(45deg);
    transition: border-bottom-width 0.05s ease-out, border-right-width 0.1s ease-in;
}


/*END Checxboxen Mitarbeiter*/

/*End Filter Sections*/


/*START Menubar*/

.menubar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.menubar-element {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 10px;
    background: var(--white);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
    border-radius: 25px;
    cursor: pointer;
    height: 20px;
    width: auto;
    min-width: 20px;
    border: solid #FFF 2px;
    background-repeat: no-repeat;
    background-position: 7px center;
    overflow: hidden;
    transition: border-color 0.4s cubic-bezier(.4,1.35,.2,.96), width 0.4s cubic-bezier(.4,1.35,.2,.96);
}

.menubar-element > label {
    margin: 0 10px;
    cursor: pointer;
}

.menubar-element input {
    /*position: absolute;*/
    margin-left: 6px;
    margin-right: 2px;
    flex-grow: 1;
    outline: none;
    border: none;
    background-color: transparent;
    /*right: 40px;*/
    /*width: 222px;*/
    font-size: 16px;
    height: 30px;
    opacity: 1;
    transition: opacity 0.2s;
}

.menubar-search {
    /*background-image: url('../assets/Suche.svg');*/
    width: 20px;
}

.menubar-search.visible {
    width: 250px;
    border-color: var(--orange);
}

.menubar-search:not(.visible).searched {
    width: 75px;
    border-color: var(--orange);
}

.menubar-element .icon_x {
    position: absolute;
    right: 10px;
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(.17,1.45,.65,1)
}

.menubar-element.searched .icon_x,
.menubar-element input:required:valid + .icon_x {
    transform: scale(1);
}

.menubar-element.searched {
    width: auto;
}

.menubar-element:not(.visible) input,
.menubar-element:not(.visible) img.menubar-search-clear {
    display: none;
}

.menubar-search label {
    margin: 0 8px;
}

.menubar-search.visible label {
    display: none;
}

.menubar-alleBerufe {
    cursor: pointer;
}

.menubar-alleBerufe.searched label {
    margin: 0 8px;
}


.menubar-filter {
    background-image: url('../assets/Filter.svg');
}

.menubar-entfernung {
    background-image: url('../assets/Entfernung.svg');
    background-position: 10px center;
    cursor: pointer;
}

.menubar-entfernung > label {
    margin-left: 30px;
}

.menubar label {
    font-weight: bold;
}

.menubar-element:hover label {
    /*    transition: color .2s;
    color: var(--brightOrange);
*/
}

/*End Menubar*/

/*START Unternehmensliste*/
.unternehmen-element {
    position: relative;
    /*width: calc(100% - 40px);*/
    background-color: var(--white);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
    border-radius: 25px;
    margin: 20px;
    overflow: hidden;
}

.unternehmen-element.sponsored {
    border: var(--orange) 3px solid;
}

.unternehmen-element.sponsored::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 20px;
    width: 101px;
    height: 22px;
    background-image: url("../assets/Gesponsert.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.unternehmen-element a {
    color: var(--grey);
}

.unternehmen-element.gruppiert {
    margin-left: 0;
    margin-right: 0;
    margin-top: 6px;
}

.unternehmen-element > section {
    padding-left: 15px;
    padding-right: 15px;
}

.unternehmen-element section:first-of-type {
    padding-top: 15px;
}

.unternehmen-element section:last-of-type {
    padding-bottom: 5px;
}

.banner-group-element {
    position: relative;
    width: calc(100% -40px);
    background-color: #f1f1f1;
    /*box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);*/
    border-radius: 25px;
    padding: 15px 0px;
    margin: 20px 15px !important;
}

.banner-single-element {
    margin-left: 10px;
    margin-right: 10px;
}

.banner-group-element.sponsored {
    border: var(--orange) 3px solid;
}

.banner-group-element.sponsored::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 20px;
    width: 101px;
    height: 22px;
    background-image: url("../assets/Gesponsert.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.banner-group-element a {
    color: var(--grey);
}

.UN-EL-header {
    display: flex;
    justify-content: space-between;
    padding-left: 5px;
    margin: 0;
}

.UN-EL-header h3 {
    margin: 0 auto 0 4px;
    padding-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.UN-EL-header-icons {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    margin: 4px 2px 0 0;
}

.UN-EL-header-icons > img {
    cursor: pointer;
    margin: 0;
}

.UN-EL-Struktur {
    padding-left: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin: 10px 0 0 0;
    padding-bottom: 7px;
}

.UN-EL-Struktur p {
    font-size: 90%;
    margin: 0;
}

.UN-EL-Struktur .dot-divider {
    height: 3px;
    width: 3px;
    background-color: var(--grey);
    border-radius: 50%;
    display: inline-block;
}

.website-link {
    padding-left: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    color: black;
}

.website-link .sub {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
}

.website-link > img {
    padding-left: 5px;
    margin: 0;
}

.website-link p {
    font-weight: bold;
    font-size: 16px;
    margin: 0;
    padding-right: 5px;
}

.aufklappmenu {
    position: relative;
}

.aufklappmenu .beschreibung {
    display: flex;
    flex-direction: row-reverse;
    padding-left: 5px;
}

.aufklappmenu label {
    position: absolute;
    align-self: last baseline;
    top: -20px;
    cursor: pointer;
    transform: rotate(0);
    transition: all 0.2s;
}

.aufklappen-ex {
    transition: all 0.4s ease-in-out;
}

.einzuklappendes {
    transition: all 0.2s ease-in-out;
    height: 0px;
    opacity: 0;
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}

.einzuklappendes p {
    margin-top: 0;
    margin-bottom: 0;
}

.toggle-image {
    cursor: pointer;
    align-self: flex-start;
}

.toggle-image.showing {
    transition: all 0.2s;
    transform: rotate(180deg);
}

.einzuklappendes.showing {
    height: auto;
    opacity: 1;
}

.aufklappmenu input:checked ~ .einzuklappendes {
    height: auto;
    opacity: 1;
}

.aufklappmenu input:checked ~ label {
    transition: all 0.2s;
    transform: rotate(180deg);
    padding-top: 20px;
    left: 20px;
    top: 0px;
    position: relative;
    margin: 0;
}

.AB-Teilung {
    display: flex;
    justify-content: space-between;
}

.AB-Teilung > img {
    align-self: last baseline;
    padding-bottom: 20px;
    padding-left: 0px;
    padding-right: 0px;
    cursor: pointer;
}

.AB-ZeigeMehr {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-top: 2px;
}

.AB-ZeigeMehr > span {
    font-weight: bold;
    font-size: 90%;
    margin-left: auto;
    margin-right: 4px;
}

.alleABS {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 2px;
}

.UN-LI-ausbildungsberufe h4 {
    margin: 8px 0 0 0;
    padding: 10px 5px;
}

.UN-LI-ausbildungsberufe img {
    margin: 8px 0 0 0;
}

.UN-LI-AB-element {
    padding-left: 5px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
}

.UN-LI-AB-element img {
    padding-left: 5px;
    margin: 0;
    cursor: pointer;
}

.UN-LI-AB-element p {
    font-size: 90%;
    margin: 0;
    padding-right: 5px;
    font-weight: normal;
}

/*der container nur, wenn finde deine route im selben block ist
.unternehmen-element .Route-Anzeigen-Container{
    padding-bottom: 7px;
    margin: 0;
}
*/
.unternehmen-element .RouteAnzeigen {
    font-weight: bold;
    background-color: var(--orange);
    border-radius: 25px;
    width: fit-content;
    cursor: pointer;
}

.unternehmen-element .RouteAnzeigen h3 {
    color: var(--white);
    padding: 5px 20px;
}

/*END Unternehmensliste*/

/*START Verkehr*/

.finde-deine-route h4 {
    margin: 0;
    padding: 10px 0;
}

.finde-deine-route .verkehr {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin: 0;
}

.finde-deine-route .verkehr > img {
    cursor: pointer;
}
/*END Verkehr*/

/*START Gesponsert Unternehmen Liste*/
.gesponsert-UN {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 5px solid var(--orange);
    border-radius: 25px;
}
/*END Gesponsert Unternehmen Liste*/


/*START Toggle Switch*/
.switcher {
    padding: 20px;
}

.switcher .switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 14px;
}

.switcher .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switcher .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--brightOrange);
    transition: .2s;
}

.switcher .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: -5px;
    bottom: -2px;
    background-color: var(--white);
    transition: .4s;
}

.switcher .switch input:checked + .slider {
    background-color: var(--brightOrange);
}

.switcher .switch input:checked + .slider:before {
    transform: translateX(24px);
    background-color: var(--orange);
    opacity: 1;
}

/* Rounded sliders */
.switcher .switch .slider.round {
    border-radius: 34px;
}

.switcher .switch .slider.round:before {
    border-radius: 50%;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
/*END Toggle Switch*/
.GeheZuExternemLink {
    font-weight: bold;
    background-color: var(--orange);
    border-radius: 25px;
    width: fit-content;
    cursor: pointer;
}

.GeheZuExternemLink h3 {
    color: var(--white);
    padding: 5px 20px;
}

.MehrInfosLink {
    font-weight: bold;
    background-color: var(--white);
    border-radius: 25px;
    width: fit-content;
    cursor: pointer;
}

.MehrInfosLink h3 {
    color: var(--orange);
    padding: 5px 20px;
}

.selected-job {
    background-color: var(--orange);
    font-weight: bold;
    font-size: 14px;
    border-radius: 40px;
    padding: 2px 8px;
    margin-right: 4px;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    max-width: 380px;
    /*width: fit-content;*/
}

.selected-job span {
    white-space: nowrap; /* Prevent text from wrapping to the next line */
    overflow: hidden; /* Clip text that overflows */
    text-overflow: ellipsis; /* Display an ellipsis (...) when text is clipped */
}

.selected-job img {
    cursor: pointer;
    padding-left: 8px;
    align-self: center;
}

.selected-job-header {
    font-size: 14px;
    font-weight: bold;
    margin: 8px 2px;
}