/* Style guide */

/* color */

:root {
    --root-font: 20px;
    --white: #ffffff;
    --blue: #3d78a1;
    --dark-blue: #1d2c3a;
    --red: #cc4e27;
    --button-font: 1.57rem;
    --btn-w: 11.5em;
    --btn-h: 3.2em;
    --sec-img-w: 35em;
    --sec-img-h: 45em;
    --pb: 2.5em;
}

/* Typography */
@font-face {
    font-family: ClanOT-Bold;
    src: url(../fonts/ClanOT-Bold.otf);
}
@font-face {
    font-family: ClanOT-BlackItalic;
    src: url(../fonts/ClanOT-BlackItalic.otf);
}
@font-face {
    font-family: ClanOT-Book;
    src: url(../fonts/ClanOT-Book.otf);
}
@font-face {
    font-family: ClanOT-Medium;
    src: url(../fonts/ClanOT-Medium.otf);
}
@font-face {
    font-family: ClanOT-MediumItalic;
    src: url(../fonts/ClanOT-MediumItalic.otf);
}

/* Button */
.stlye-btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 0;
}
.stlye-btn:hover {
    border: 0.34em solid inherit;
}


body {
    font-size: 16px;
}


h1 {
    font-size: 6em;
    text-transform: uppercase;
    font-family: ClanOT-Bold;
    word-break: break-word;
    letter-spacing: 3px;
}

h2 {
    font-size: 2.1em;
    text-transform: uppercase;
    font-family: ClanOT-Bold;
    word-break: break-word;
    letter-spacing: 3px;
}
h3 {
    font-size: 1.5em;
    text-transform: uppercase;
    font-family: ClanOT-Bold;
    word-break: break-word;
    letter-spacing: 3px;
}
h4 {
    font-size: 1.3em;
    font-family: ClanOT-Bold;
    word-break: break-word;
    letter-spacing: 3px;
}


p {
    font-size: 1.5em;
    font-family: ClanOT-Book;
    word-break: break-word;
}

strong {
    font-size: 1.57em;
    font-family: ClanOT-Bold;
    letter-spacing: 3px;
}

b {
    font-family: ClanOT-Bold;
    font-weight: 700;
}

a {
    font-size: 1em;
    font-family: ClanOT-Bold;
    letter-spacing: 3px;
    line-height: 1em;
}

.container {
    max-width: 80em;
}

.navbar>.container {
    padding: 0;
}

img {
    max-width: 100%;
}

.navbar-toggler-icon i {
    padding-top: 0.25em;
}

button, a {
    font-size: var(--button-font);
    font-family: ClanOT-Bold;
    letter-spacing: 3px;
    transition: all 0.1s ease 0.1s;
}

.db {
    display: block !important;
}
.slc-btn {
    padding: 0 1.3rem;
    text-decoration: none !important;
    border-radius: 10px;
    border: 4px solid var(--white);
    font-size: 1.5625rem;
    display: inline-flex;
    height: var(--btn-h);
    align-items: center;
    text-align: center;
    justify-content: center;
}



button:hover, a:hover {
    transition: all 0.1s ease 0.1s;
    /* border: 1px solid #1d2c3a;
    box-shadow: 6px 5px 10px 5px rgb(0 0 0 / 8%); */
    /* transform: scale(1.05); */
}


.dropdown-item.active, .dropdown-item:active {
    background-color: transparent;
}


ul.navbar-nav.mx-auto {
    align-items: center;
}

nav.navbar.navbar-expand-lg a.lang {
    color: var(--dark-blue);
}

nav.navbar.navbar-expand-lg a.lang:hover {
    color: var(--blue);
}

.arbeitgeber nav.navbar.navbar-expand-lg a.lang {
    color: var(--white);
}

.arbeitgeber nav.navbar.navbar-expand-lg a.lang:hover {
    color: var(--dark-blue);
}

.main-banner button:hover {
    border: 4px solid var(--dark-blue);
}
a.sec-2-btn:hover {
    border: 4px solid var(--blue);
    color: var(--blue);
    background-color: var(--white);
}
a.sec-3-btn:hover {
    border: 4px solid var(--white);
    color: var(--white);
    background-color: var(--dark-blue);
}
a.sec-4-btn:hover {
    border: 4px solid var(--red);
    color: var(--red);
    background-color: var(--white);
}

footer a {
    font-size: 0.9em;
    text-align: left;
    color: var(--white);
}

footer a:hover {
    color: var(--dark-blue);
    text-decoration: none;
}

/* Main css */

.logo {
    width: 250px;
}

header nav {
    top: 0px;
    left: 0px;
    height: 5.5em;
    background: var(--white) 0% 0% no-repeat padding-box;
    opacity: 1;
}

nav.navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 1.5em;
    padding-right: 1.5em;
}

nav.navbar.navbar-expand-lg a {
    color: var(--dark-blue);
}

nav.navbar.navbar-expand-lg a:hover {
    color: var(--blue);
}

nav.navbar.navbar-expand-lg .shop a {
    color: var(--white);
}

nav.navbar.navbar-expand-lg .shop a:hover {
    color: var(--dark-blue);
}

.main-banner h1 {
    color: var(--white);
    padding-bottom: 5rem;
    letter-spacing: 5px;
}

.main-banner-graphic {
    background: url(../icons/white-stroke-header-2.svg);
    height: 200px;
    background-repeat: repeat-x;
    margin-bottom: 17em;
}

.sec-2 h2 {
    padding-bottom: var(--pb);
}

.sec-3 {
    background-color: var(--dark-blue);
    color: var(--white);
}

.sec-3 .gap {
    padding-left: 10em;
}

.sec-3 img.content-infographic {
    width: 15em;
    padding-bottom: var(--pb);
}

.sec-3 p {
    color: inherit;
    padding-bottom: var(--pb);
}

.sec-3 h2 {
    padding-bottom: var(--pb);
}

a.sec-3-btn {
    width: var(--btn-w);
    height: var(--btn-h);
    background: var(--white);
    border: 4px solid var(--white);
    border-radius: 10px;
    color: var(--dark-blue);
}

.sec-3 .sec-inv {
    /* text-align: right; */
}

.sec-3 .sec-inv .gap {
    text-align: left;
}

img.sec-3-img {
    width: var(--sec-img-w);
    height: var(--sec-img-h);
    object-fit: cover;
}

.sec-4 {
    background-color: var(--white);
    color: var(--red);
}

.sec-4 .gap {
    padding-right: 10em;
}

.sec-4 img.content-infographic {
    width: 15em;
    padding-bottom: var(--pb);
}

.sec-4 p {
    color: inherit;
    padding-bottom: var(--pb);
}

.sec-4 h2 {
    padding-bottom: 2.5em;
}

img.sec-4-img {
    width: var(--sec-img-w);
    height: var(--sec-img-h);
    object-fit: cover;
}

/* Main page */
.main-LP a.slc-btn {
    color: var(--dark-blue);
    border-color: var(--white);
    background-color: var(--white);
}

.main-LP a.slc-btn:hover {
    color: var(--white);
    background: transparent;
    border-color: var(--white);
}
/* Main page end */

/* Page 2 */
.arbeitgeber {
    background-color: #3D78A1;
}

.arbeitgeber nav {
    background-color: #3D78A1;
}

.arbeitgeber nav.navbar.navbar-expand-lg .shop a {
    color: var(--blue);
}

.arbeitgeber nav.navbar.navbar-expand-lg .shop a:hover {
    color: var(--white);
}

.arbeitgeber nav.navbar.navbar-expand-lg .shop {
    background: var(--white);
    border: 4px solid var(--white);
    border-radius: 10px;
    margin-left: 1em;
}

.arbeitgeber nav.navbar.navbar-expand-lg .shop:hover {
    background: var(--blue);
    border: 4px solid var(--white);
    border-radius: 10px;
}

.sec-2.part-1 .gap {
    padding-left: 3em;
}

.arbeitgeber .sec-2.part-2 .card.card-1 {
    margin-left: -10px;
}

.arbeitgeber .sec-2.part-2 .card.card-2 {
    margin-right: 10px;
}

.employee-share .col-lg-12 {
    border: 3px solid var(--white);
    border-radius: 5px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    background-clip: border-box;
    align-items: center;
    padding: 20px;
}

.employee-share .col-lg-12 p {
    padding: 0 0.3rem;
    margin: 0;
    text-align: justify;
}

.employee-share .col-lg-12 .amount {
    display: flex;
}

.employee-share .col-lg-12 .amount .box {
    background: var(--white);
    width: 100px;
    border: 5px solid var(--white);
    border-radius: 5px;
    display: flex;
    height: 40px;
    color: var(--blue);
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
}

.arbeitgeber .sec-2.part-3 .heading {
    padding: 0;
}

/* .arbeitgeber .part-4 a {
    font-size: 1em;
    font-family: 'ClanOT-Book';
    color: var(--white);
    text-decoration: underline;
} */

.arbeitgeber .part-4 img, .arbeitgeber .part-5 img, .arbeitgeber .part-6 img {
    width: 100%;
    height: 50rem;
}

.arbeitgeber .part-5 img {
    text-align: right;
}

.arbeitgeber button.sec-2-btn {
    font-size: 1.5625rem;
    width: 15.8em;
    background-color: var(--white);
    color: var(--blue);
    padding-top: 0;
    padding-bottom: 0;
    height: 3.2em;
}

.arbeitgeber .sec-2.part-6 ul li {
    padding-bottom: 1em;
}

.arbeitgeber .sec-2.part-7 form label {
    font-size: 1.25em;
}

.arbeitgeber .sec-2.part-7 form input {
    height: auto;
    font-size: 1.25em;
    padding: 0.6em 1.4em;
}

.arbeitgeber .sec-2.part-7 form .form-group {
    margin-bottom: 2em;
    margin: 0 1em 2em 1em;
}

div#navbarSupportedContent.show{
    background: white;
    padding: 10px 20px;
    text-align: left;
    width: 100%;
    max-width: 300px;
    position: absolute;
    right: 15px;
    top: 50px;
    animation: none;
}
.dropdown-menu.show {
    font-size: 1em;
}
.dropdown-item {
    font-size: 1em;
    padding: 0.5em 1em;
}
.collapsing {
    display: none;
}

.gap-left {
    padding-left: 5em;
}

/* h1 {
    font-size: 133.33333333333331px;
    text-transform: uppercase;
    font-family: ClanOT-Bold;
}

h2 {
    font-size: 53.33333333333333px;
    text-transform: uppercase;
    font-family: ClanOT-Bold;
}
h3 {
    font-size: 33.33333333333333px;
    text-transform: uppercase;
    font-family: ClanOT-Bold;
}


p {
    font-size: 33.33333333333333px;
    font-family: ClanOT-Book;
}

strong {
    font-size: 33.33333333333333px;
    font-family: ClanOT-Bold;
}

a {
    font-size: 20px;
    font-family: ClanOT-Bold;
} */

/* Style guide as per design */

h1 {
    font-size: 6em;
    text-transform: uppercase;
    font-family: ClanOT-Bold;
    word-break: break-word;
    letter-spacing: 3px;
}

h2 {
    font-size: 2.1em;
    text-transform: uppercase;
    font-family: ClanOT-Bold;
    word-break: break-word;
    letter-spacing: 3px;
}
h3 {
    font-size: 1.5em;
    text-transform: uppercase;
    font-family: ClanOT-Bold;
    word-break: break-word;
    letter-spacing: 3px;
}
h4 {
    font-size: 1.6rem;
    font-family: ClanOT-Bold;
    word-break: break-word;
    letter-spacing: 0.05rem;
}


p {
    font-size: 1.564em;
    font-family: ClanOT-Book;
    word-break: break-word;
}

strong {
    font-size: 1.57rem;
    font-family: ClanOT-Bold;
    letter-spacing: 3px;
}

a {
    font-size: 1em;
    font-family: ClanOT-Bold;
    letter-spacing: 3px;
}

.navbar-toggler-icon i {
    padding-top: 0.25em;
}

button, .slc-btn {
    font-size: var(--button-font);
    font-family: ClanOT-Bold;
    letter-spacing: 3px;
    transition: all 0.1s ease 0.1s;
}

button:hover {
    transition: all 0.1s ease 0.1s;
    /* border: 1px solid #1d2c3a;
    box-shadow: 6px 5px 10px 5px rgb(0 0 0 / 8%); */
    /* transform: scale(1.05); */
}

nav.navbar.navbar-expand-lg a.lang {
    color: var(--dark-blue);
}

nav.navbar.navbar-expand-lg a.lang:hover {
    color: var(--blue);
}

.arbeitgeber nav.navbar.navbar-expand-lg a.lang {
    color: var(--white);
}

.arbeitgeber nav.navbar.navbar-expand-lg a.lang:hover {
    color: var(--dark-blue);
}

.main-banner button:hover {
    border: 4px solid var(--white);
    background: transparent;
    color: var(--white);
}
.sec-2-btn:hover {
    border: 4px solid var(--blue);
    color: var(--blue);
    background-color: var(--white);
}
.sec-3-btn:hover {
    border: 4px solid var(--white);
    color: var(--white);
    background-color: var(--dark-blue);
}
.sec-4-btn:hover {
    border: 4px solid var(--red);
    color: var(--red);
    background-color: var(--white);
}

footer a {
    font-size: 0.95em;
    text-align: left;
    color: var(--white);
    text-decoration: none;
}

footer a:hover {
    color: var(--dark-blue);
    text-decoration: none;
}

a.footer-app-link-disable {cursor: default;text-decoration: none;}



a.footer-app-link-disable:hover {
    color: var(--white);
}

/* Main css */

.logo {
    width: 250px;
}

header nav {
    top: 0px;
    left: 0px;
    height: 5.5em;
    background: var(--white) 0% 0% no-repeat padding-box;
    opacity: 1;
}

ul.navbar-nav.lang-dd {
    padding-left: 1.5em;
}

nav.navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 1em;
    padding-right: 1em;
}

nav.navbar.navbar-expand-lg a {
    color: var(--dark-blue);
    text-wrap: nowrap;
}

nav.navbar.navbar-expand-lg a:hover {
    color: var(--blue);
}

nav.navbar.navbar-expand-lg .shop {
    background: var(--dark-blue);
    border: 4px solid var(--dark-blue);
    border-radius: 10px;
    color: var(--white);
    margin-left: 1em;
}

nav.navbar.navbar-expand-lg .shop:hover {
    background: var(--white);
    border: 4px solid var(--dark-blue);
    border-radius: 10px;
}

.main-banner {
    background-image: url(../Images/1_Schaufenster_Homepage/Homepage_1.jpg);
    /*background-image: url(../Images/1_Schaufenster_Homepage/Adventkalendervorschau-website.jpeg);*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    padding: 7em 0 3.25em 0;
    margin-top: 5.5em;
}

.main-banner h1 {
    color: var(--white);
    padding-bottom: 5rem;
    letter-spacing: 5px;
}

.main-banner-graphic {
    background: url(../icons/white-stroke-header-2.svg);
    height: 200px;
    background-repeat: repeat-x;
    margin-bottom: 2em;
}
.main-banner h4 {
    width: 40em;
    margin: 0 auto;
    color: var(--white);
    padding-top: 2.5em;
    padding-bottom: 2.5em;
}

.main-banner button {
    border: 4px solid var(--white);
    background: var(--white) 0% 0% no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    display: inline-block;
    width: var(--btn-w);
    height: var(--btn-h);
    color: var(--dark-blue);
    margin-bottom: 2.5em;
}

.index-LP + .sec-2 span p {
    padding-bottom: var(--pb);
}

.sec-2, .sec-3, .sec-4 {
    padding: 5em 0;
}

.sec-2 {
    color: var(--blue);
}
.sec-2 .gap {
    padding-right: 5em;
    padding-left: 0;
}

.sec-2 img.content-infographic {
    width: 14.5em;
    padding-bottom: var(--pb);
}

img.content-infographic.content-infographic-svg {
    width: 100%;
}

.sec-2 p {
    color: inherit;
    /* padding-bottom: var(--pb); */
}

.sec-2 h2 {
    padding-bottom: var(--pb);
}

a.sec-2-btn {
    width: var(--btn-w);
    height: var(--btn-h);
    background: var(--blue);
    border: 4px solid var(--blue);
    border-radius: 10px;
    color: var(--white);
}

a.sec-2-btn:hover {
    width: var(--btn-w);
    height: var(--btn-h);
    background: var(--white);
    border: 4px solid var(--blue);
    border-radius: 10px;
    color: var(--blue);
}

img.sec-2-img {
    width: var(--sec-img-w);
    height: var(
    --sec-img-h);
    object-fit: cover;
}

.sec-3 {
    background-color: var(--dark-blue);
    color: var(--white);
}

.sec-3 .gap {
    padding-left: 10em;
}

.sec-3 img.content-infographic {
    width: 15em;
    padding-bottom: var(--pb);
}

.sec-3 p {
    color: inherit;
    padding-bottom: var(--pb);
}

.sec-3 h2 {
    padding-bottom: var(--pb);
}

a.sec-3-btn {
    width: var(--btn-w);
    height: var(--btn-h);
    background: var(--white);
    border: 4px solid var(--white);
    border-radius: 10px;
    color: var(--dark-blue);
}

.sec-3 .sec-inv {
    /* text-align: right; */
}

.sec-3 .sec-inv .gap {
    text-align: left;
    padding-left: 7em;
}

img.sec-3-img {
    width: var(--sec-img-w);
    height: var(--sec-img-h);
    object-fit: cover;
}

.sec-4 {
    background-color: var(--white);
    color: var(--red);
}

.sec-4 .gap {
    padding-right: 8em;
    padding-left: 0;
}

.sec-4 img.content-infographic {
    width: 15em;
    padding-bottom: var(--pb);
}

.sec-4 p {
    color: inherit;
    padding-bottom: var(--pb);
}

.sec-4 h2 {
    padding-bottom: 2.5em;
}

a.sec-4-btn {
    width: var(--btn-w);
    height: var(--btn-h);
    background: var(--red);
    border: 4px solid var(--red);
    border-radius: 10px;
    color: var(--white);
}

img.sec-4-img {
    width: var(--sec-img-w);
    height: var(--sec-img-h);
    object-fit: cover;
}

/* Footer */
footer {
    background-color: var(--blue);
    padding: 100px 0;
}

footer > div.container > div > div:nth-child(3) > ul {
    margin-bottom: 0;
}

.footer-search {
    width: 100%;
    padding-bottom: 1rem;
}

.footer-search-section {
    justify-content: space-between;
}

.input-group.footer-search input {
    background: var(--blue);
    color: var(--white);
    border: 3px solid var(--white);
    border-radius: 0.5rem;
}

.gastronomie .input-group.footer-search .form-control::placeholder {
    color: white;
}

.input-group.footer-search .input-group-append {
    background: var(--white);
    border-radius: 0.5rem;
}


.input-group.footer-search button.btn.btn-secondary {
    background: white;
    border: white;
}

.input-group.footer-search button.btn.btn-secondary i {
    color: var(--blue);
}

.input-group.footer-search .form-control::placeholder {
    color: var(--white);
    font-size: 15px;
    line-height: 19px;
    font-family: 'ClanOT-Bold';
}
/* Form */

.form-content {
    padding: 15em 0 5em 0;
}

.arbeitgeber .form-row {
    display: flex;
    flex-wrap: nowrap;
    margin-left: -10px;
}

.arbeitgeber form button.sec-2-btn {
    margin: 0.8em;
    border: 4px solid var(--blue);
    border-radius: 10px;
    margin-left: -10px;
    padding-left: 0;
}

.arbeitgeber .sec-2.part-7 > div > form > div:nth-child(3) .form-group {
    width: 99.5% !important;
    max-width: 100% !important;
}

footer li {
    list-style: none;
    padding-bottom: 20px;
}
footer ul.footer-app-icon {
    display: flex;
}

#app > div > div > footer > div.container > div > div:nth-child(4) > ul.footer-app-icon.footer-search-section {
    position: relative;
    left: -10px;
}


footer .svg-img {
    width: 50px;
    height: 38px;
    margin: 0px 15px;
    margin-top: 0;
    object-fit: contain;
}

footer li:first-child .svg-img {
    margin-left: 0;
}
footer li:last-child .svg-img {
    margin-right: 0;
}
.footer-graphic {
    background: url(../icons/white-stroke-footer-2.svg);
    height: 400px;
    background-repeat-y: no-repeat;
}

/* Page 2 */
.arbeitgeber {
    background-color: #3D78A1;
}

.arbeitgeber nav {
    background-color: #3D78A1;
}

.arbeitgeber nav.navbar.navbar-expand-lg ul.navbar-nav.lang-dd .dropdown-menu a {
    color: var(--dark-blue);
}

.arbeitgeber nav.navbar.navbar-expand-lg a {
    color: #fff;
}

.arbeitgeber nav.navbar.navbar-expand-lg a:hover {
    color: var(--dark-blue);
}

.arbeitgeber .dropdown-menu.show {
    /* background-color: #3D78A1; */
}

/* New menu changes */
.arbeitgeber a.navbar-brand.mobile {
    display: none;
}

.arbeitgeber #navbarSupportedContent > div:nth-child(2) {
    display: flex;
}

.arbeitgeber #navbarSupportedContent {
    justify-content: space-between;
}


@media only screen and (max-width: 986px) {
    .arbeitgeber a.navbar-brand.mobile {
        display: block;
    }
    .arbeitgeber #navbarSupportedContent > a.desktop {
         display: none;
    }

    .arbeitgeber #navbarSupportedContent > div:nth-child(2) {
        display: block;
    }
}

/* New menu changes end */
.arbeitgeber .main-banner {
    background-image: url(../Images/2_Arbeitgeber_Employers/Employers_1.jpg);
    background-position: 0em 1.2em;
    margin-top: 0;
    padding-top: 4em;
    padding-bottom: 19em;
}

.arbeitgeber .main-banner h1 {
    padding-top: 12.5rem;
    padding-bottom: 10rem;
}

.arbeitgeber .sec-2 {
    color: var(--white);
    padding: 2em 0;
}

.arbeitgeber .sec-2.part-3, .arbeitgeber .sec-2.part-4, .arbeitgeber .sec-2.part-5 {
    padding: 7.5em 0 10.5em 0;
}

.arbeitgeber .sec-2.part-1, .arbeitgeber .sec-2.part-2 {
    padding-top: 5em;
}

.arbeitgeber .sec-2.part-7 {
    padding-bottom: 15em;
}

.arbeitgeber h2 {
    font-size: 2em;
    padding-bottom: 25px;
}

.arbeitgeber p {
    font-size: 1.5625rem;
}

.arbeitgeber .part-1 img.sec-2-img {
    width: auto;
    height: 100%;
}

.arbeitgeber .sec-2.part-2 .card {
    color: var(--blue);
    padding: 2em 2em;
    font-size: 1.5625em;
    border: 5px solid var(--blue);
    border-radius: 10px;
}

.arbeitgeber .sec-2.part-2 .card.card-1 {
    margin-left: -10px;
}

.arbeitgeber .sec-2.part-2 .card.card-2 {
    margin-right: 10px;
}

.employee-share .col-lg-12 {
    border: 3px solid var(--white);
    border-radius: 5px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    background-clip: border-box;
    align-items: center;
    padding: 20px;
}

.employee-share .col-lg-12 p {
    padding: 0 0.3rem;
    margin: 0;
    text-align: justify;
}

.employee-share .col-lg-12 .amount {
    display: flex;
}

.employee-share .col-lg-12 .amount .box {
    background: var(--white);
    width: 100px;
    border: 5px solid var(--white);
    border-radius: 5px;
    display: flex;
    height: 40px;
    color: var(--blue);
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
}

.arbeitgeber .sec-2.part-3 .heading {
    padding: 0;
}

/* .arbeitgeber .part-4 a {
    font-size: 1em;
    font-family: 'ClanOT-Book';
    color: var(--white);
    text-decoration: underline;
} */

.arbeitgeber .accordion-item a {
    color: var(--bluw);
}

.arbeitgeber .part-4 img, .arbeitgeber .part-5 img, .arbeitgeber .part-6 img {
    width: 100%;
    height: 50rem;
}

.arbeitgeber .part-5 img {
    text-align: right;
}

.arbeitgeber a.sec-2-btn {
    background-color: var(--white);
    color: var(--blue);
    padding: 0 1.3rem;
    text-decoration: none;
    border-radius: 10px;
    border: 4px solid var(--white);
    font-size: 1.5625rem;
    display: inline-flex;
    margin: 1em 0;
    height: var(--btn-h);
    align-items: center;
    text-align: center;
    justify-content: center;
}

.reg-btn {
    width: var(--btn-w)!important;
}

.arbeitgeber a.sec-2-btn:hover {
    background-color: var(--blue);
    color: var(--white);
    border: 4px solid var(--white);
}

.arbeitgeber .sec-2.part-6 ul, .arbeitgeber .sec-2.part-6 p {
    font-size: 1.5625rem;
}

.arbeitgeber .sec-2.part-6 ul li {
    padding-bottom: 1em;
}

.arbeitgeber .sec-2.part-7 form label {
    font-size: 1.5625rem;
}

.arbeitgeber .sec-2.part-7 form input, .arbeitgeber .sec-2.part-7 form textarea, .arbeitgeber .sec-2.part-7 form select {
    height: auto;
    font-size: 1.5625rem;
    padding: 0.6em 1.4em;
    width: 95%;
}

.arbeitgeber .sec-2.part-7 form textarea {
    width: 100% !important;
}

.arbeitgeber .sec-2.part-7 form .form-group {
    margin-bottom: 2em;
    margin: 0 1em 2em 1em;
    margin-left: 0;
    padding-left: 0;
    margin-right: 0;
    padding-right: 0;
    max-width: 100%;
    width: 51%;
}

/* Accordion */
.sec-2 .accordion {
    --bs-accordion-color: var(
    --blue);
    --bs-accordion-bg: var(
    --white);
    --bs-accordion-transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;
    --bs-accordion-border-color: var(
    --white);
    --bs-accordion-border-width: 1px;
    --bs-accordion-border-radius: 0.375rem;
    --bs-accordion-inner-border-radius: calc(0.375rem - 1px);
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(
    --blue);
    --bs-accordion-btn-bg: var(
    --white);
    --bs-accordion-btn-icon: url(
    data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-border: brown;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url(
    data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    --bs-accordion-btn-focus-border-color: #86b7fe;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: #0c63e4;
    --bs-accordion-active-bg: #e7f1ff;
}

.sec-2 .accordion-item {
    margin: 1em 2em;
    border-radius: 10px;
}

.sec-2 .accordion-item .accordion-button {
    border-radius: 20px;
    color: var(--blue);
    background: var(--white);
    font-size: 1.5625rem;
    position: relative;
}

.arbeitgeber .accordion h2 {
    padding: 10px;
}

.accordion-button::after {
    width: 50px;
    height: 50px;
    background: none;
    background-size: contain;
    border: 4px solid;
    border-radius: 50px;
    content: "\f107";
    font-size: 42px;
    padding: 2px 10px 10px 8px;
    font-family: 'FontAwesome';
    line-height: 42px;
}
.accordion-button:not(.collapsed)::after {
    background: none;
    background-size: contain;
}

.sec-2 .accordion-item .accordion-button:focus {
    box-shadow: none;
}

.arbeitgeber.gastronomie .sec-2 .accordion-item .accordion-body a {
    color: var(--red);
    font-size: 1.3rem;
}

.sec-2 .accordion-body {
    font-size: 1.5625em;
}

.arbeitgeber .sec-2 .accordion-head {
    text-align: center;
    padding: 10em 0 5em 0;
}

/* Accordion end */
/* Privatpersonen */
.arbeitgeber.privatpersonen nav {
    background-color: var(--dark-blue);
}

.arbeitgeber.privatpersonen nav.navbar.navbar-expand-lg .shop a {
    color: var(--dark-blue);
}

.arbeitgeber.privatpersonen nav.navbar.navbar-expand-lg .shop:hover {
    background: var(--dark-blue);
    color: var(--white) !important;
}

.arbeitgeber.privatpersonen nav.navbar.navbar-expand-lg .shop a:hover {
    color: var(--white);
}

.arbeitgeber.privatpersonen nav.navbar.navbar-expand-lg a:hover {
    color: var(--white);
}

.arbeitgeber.privatpersonen {
    background-color: var(--dark-blue);
}

.arbeitgeber.privatpersonen .main-banner {
    background-image: url(../Images/3_PrivatePersons/Private_1.jpg);
}

.arbeitgeber.privatpersonen.karteninhaber .main-banner {
    background-image: url(../Images/8_Karteninhaber/Karteninhaber-header-img.jpg);
}

.arbeitgeber.privatpersonen .main-banner {
    margin-bottom: 5em;
    background-position: center;
}

.arbeitgeber.privatpersonen .sec-2.part-2 .card {
    color: var(--dark-blue);
    border: 5px solid var(--dark-blue);
    border-radius: 10px;
}

.arbeitgeber.privatpersonen a.sec-2-btn {
    color: var(--dark-blue);
}

.arbeitgeber.privatpersonen a.sec-2-btn:hover {
    background-color: var(--dark-blue);
    color: var(--white);
}

.arbeitgeber.privatpersonen .accordion-item a {
    color: var(--dark-blue);
    font-size: 1.3rem;
}

.arbeitgeber.privatpersonen .sec-2 .accordion-item .accordion-button, .arbeitgeber.privatpersonen .sec-2 .accordion-item {
    color: var(--dark-blue);
}

.arbeitgeber.privatpersonen form button.sec-2-btn {
    border-color: var(--white);
    color: var(--dark-blue);
    margin: 0;
    margin-top: 1.3em;
}

.arbeitgeber.privatpersonen form button.sec-2-btn:hover {
    color: var(--white);
    background-color: var(--dark-blue);
}

.arbeitgeber.privatpersonen .part-6.img1-1 img {
    height: auto;
}

.arbeitgeber.privatpersonen p {
    padding-bottom: 0;
}

.arbeitgeber.privatpersonen .sec-2.part-2 .card li {
    font-size: 1.6rem;
}
.arbeitgeber.privatpersonen .part-5 img.jetzt {
    object-position: left;
}

.privatpersonen.arbeitgeber .sec-2.part-7 form textarea {
    width: 95% !important;
}

/* Privatpersonen End */

/* Gastronomie */
.arbeitgeber.gastronomie {
    background-color: var(--red);
}

.arbeitgeber.gastronomie nav {
    background-color: var(--white);
}

.arbeitgeber.gastronomie nav.navbar.navbar-expand-lg a {
    color: var(--red);
}

.arbeitgeber.gastronomie nav.navbar.navbar-expand-lg .shop {
    background: var(--red);
    border-color: var(--red);
}

.arbeitgeber.gastronomie nav.navbar.navbar-expand-lg .shop a {
    color: var(--white);
}

.arbeitgeber.gastronomie nav.navbar.navbar-expand-lg .shop:hover {
    background: var(--white);
}

.arbeitgeber.gastronomie nav.navbar.navbar-expand-lg .shop a:hover {
    color: var(--red);
}

.arbeitgeber.gastronomie .main-banner {
    background-image: url(../Images/4_Gastronomy/Gastronomy_1.jpg);
    background-position-y: 65%;
}

.arbeitgeber.gastronomie .part-5 img.sec-1-img {
    height: auto;
    width: 27rem;
    padding-bottom: 2.5em;
}

.arbeitgeber.gastronomie .sec-2.part-2 .card {
    color: var(--red);
    border: 5px solid var(--red);
    border-radius: 10px;
}

.arbeitgeber.gastronomie a.sec-2-btn {
    color: var(--red);
}

.arbeitgeber.gastronomie a.sec-2-btn:hover {
    color: var(--white);
    background-color: var(--red);
}

.arbeitgeber.gastronomie .stacked-btn {
    display: flex;
}

.arbeitgeber.gastronomie .stacked-btn a.sec-2-btn {
    width: 11em;
    text-align: center;
    margin: 0.35em 0.25em;
    color: var(--red);
    padding: 2em 0.5em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.arbeitgeber.gastronomie .stacked-btn a.sec-2-btn:hover {
    background-color: var(--red);
    color: var(--white);
}

.arbeitgeber.gastronomie .sec-2 .accordion-item .accordion-button, .arbeitgeber.gastronomie .accordion-item {
    color: var(--red);
}

.arbeitgeber.gastronomie  .form-control::placeholder  {
    color: var(--red);
}

.arbeitgeber.gastronomie button.sec-2-btn:hover {
    border: 4px solid var(--white);
    color: var(--white);
    background-color: var(--red);
}

.arbeitgeber.gastronomie button.sec-2-btn {
    border: 4px solid var(--white);
    color: var(--red);
    background-color: var(--white);
}


/* Gastronomie end */
/* Kontakt */

.kontakt .sec-2 {
    padding: 0;
}

.kontakt .main-banner {
    background-image: url(../Images/6_Contact/Contact_1.jpg);
    margin-top: 4em;
    padding-top: 10em;
    padding-bottom: 25em;
}

.kontakt.arbeitgeber .sec-2.part-7 > div > form > div:nth-child(3) .form-group {
    width: 51% !important;
}

.kontakt.arbeitgeber .sec-2.part-7 form textarea {
    width: 95% !important;
}

.arbeitgeber.kontakt .main-banner h1 {
    padding-top: 1em;
    padding-bottom: 0em;
}

.arbeitgeber.kontakt .main-banner .main-banner-graphic {
    transform: rotate(180deg);
}

.arbeitgeber.kontakt form button.sec-2-btn {
    margin-left: 0;
    margin-top: 2rem;
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
    color: var(--white);
    border-radius: 10px;
}

.arbeitgeber.kontakt form button.sec-2-btn:hover {
    background-color: var(--white);
    border-color: var(--dark-blue);
    color: var(--dark-blue);
    border-radius: 10px;
}

.arbeitgeber.kontakt nav {
    background-color: var(--white);
}

.arbeitgeber.kontakt nav.navbar.navbar-expand-lg a {
    color: var(--dark-blue);
}


.arbeitgeber.kontakt nav.navbar.navbar-expand-lg a:hover {
    color: var(--blue);
}

.arbeitgeber.kontakt nav.navbar.navbar-expand-lg .shop {
    background-color: var(--dark-blue);
    border: 4px solid var(--dark-blue);
}

.arbeitgeber.kontakt nav.navbar.navbar-expand-lg .shop:hover {
    background-color: var(--white);
    border: 4px solid var(--dark-blue);
}

.arbeitgeber.kontakt nav.navbar.navbar-expand-lg .shop a {
    color: var(--white);
}

.arbeitgeber.kontakt nav.navbar.navbar-expand-lg .shop:hover a {
    color: var(--dark-blue);
}

.arbeitgeber.kontakt {
    background-color: var(--white);
}

.arbeitgeber.kontakt .sec-2 {
    color: var(--dark-blue);
}

.kontakt .kontakt-border .main-banner-graphic {
    filter: invert(1);
    margin-bottom: 14.5rem;
}

.arbeitgeber.kontakt .sec-2.kontakt-map {
    padding-bottom: 13.75em;
}

.arbeitgeber.kontakt .sec-2.part-7 {
    padding: 0;
    padding-bottom: 12.5rem;
}

.arbeitgeber.kontakt .form-content {
    padding-top: 7.9rem;
    padding-bottom: 10.45rem;
}

.arbeitgeber.kontakt .sec-2.part-7 form label {
    padding-bottom: 1rem;
}

.arbeitgeber.kontakt select, .arbeitgeber.kontakt textarea, .arbeitgeber.kontakt input:not(.footer-search input) {
    text-decoration: none;
    outline: none;
    box-shadow: none;
    border-color: var(--dark-blue);
}

.arbeitgeber.kontakt .form-content p {
    padding: 0;
    margin: 0;
}

.arbeitgeber.kontakt .form-select {
    background-size: 1.875rem;
    background-position: right 1.875rem center;
}

.kontakt .contact-info-address h3, .kontakt .contact-info-address p, .kontakt .contact-info-timings h3, .kontakt .contact-info-timings p {
    margin-bottom: 2rem;
    padding: 0;
}

.kontakt .contact-info-address a {
    /* text-decoration: none; */
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: var(--dark-blue);
}

.arbeitgeber.kontakt .sec-2.contact-info {
    padding-bottom: 4.7rem;
}

.arbeitgeber.kontakt .sec-2.contact-map {
    padding-bottom: 13.75rem;
}
/* Kontakt end */
/* Rechtliches */
.rechtliches .accordion-body h3 {
    font-size: 1.6rem;
}

.rechtliches h3, .rechtliches .sec-2 .accordion-item .accordion-button {
    font-size: 1.875rem;
}

.rechtliches h4 {
    letter-spacing: 0.05rem;
    padding: 0;
    margin: 0;
}

.rechtliches .main-heading {
    padding: 13.3em 0;
    margin-top: 6.8em;
}

.rechtliches.arbeitgeber .sec-2 .accordion-head {
    padding: 0 0rem 5rem 2rem;
    text-align: left;
}

.rechtliches.arbeitgeber h2 {
    font-size: 2.5em;
}

.rechtliches .sec-2 .accordion-item {
    border: 4px solid var(--dark-blue);
    color: var(--dark-blue);
    margin: 0 0 2em 2em;
}

.rechtliches .sec-2 .accordion-item .accordion-button {
    color: var(--dark-blue);
}

.rechtliches .sec-2 .accordion {
    padding-bottom: 18.75rem;
}


/* Rechtliches end */
/* NEWS */

.news .main-banner {
    padding: 10em 0 13.25em 0;
    background-image: url(../Images/7_News/News-1.jpg);
}

.news .main-banner .main-banner-graphic {
    transform: rotate(180deg);
    margin-bottom: 13em;
}

.news .sec-2 h2 {
    font-size: 2.5em;
    padding-bottom: 1.56rem;
    margin: 0;
    color: var(--dark-blue);
}

.news .sec-2 p {
    padding-bottom: 1.56rem;
    margin: 0;
    color: var(--dark-blue);
}

.news button.sec-2-btn {
    background: var(--dark-blue);
    border-color: var(--dark-blue);
}

.news button.sec-2-btn:hover {
    background: var(--white);
    color: var(--dark-blue);
}

.news .sec-2 .gap {
    padding-right: 4rem;
}

.news .sec-2.part-3 img.sec-3-img {
    object-position: 77%;
}
/* NEWS end */

/* NEWS LP */
.lp-main img {
    height: 45rem;
    width: 100%;
    object-fit: cover;
    object-position: 50% 63%;
    margin-top: 10rem;
    margin-bottom: 5rem;
}

.newsLP.kontakt .kontakt-border .main-banner-graphic {
    margin: 11rem 0;
}

.lp-suggestions .lp-heading {
    padding-left: 1rem;
    padding-bottom: 5.5rem;
}

.lp-suggestions .lp-content img {
    width: 26rem;
    height: 24rem;
    object-position: center;
    object-fit: cover;
    padding-bottom: 2.5rem;
}

.lp-suggestions .lp-content strong {
    margin-bottom: 1rem;
    display: block;
    letter-spacing: 0;
}

.newsLP .slc-btn {
    background: var(--dark-blue);
    border-color: var(--dark-blue);
    color: var(--white);
}

.newsLP .slc-btn:hover {
    background: var(--white);
    color: var(--dark-blue);
}

.lp-content p {
    padding-bottom: 2rem;
}

.lp-suggestions {
    padding-bottom: 20rem;
}
/* NEWS LP end */
/* Uber Uns */

.uberuns .main-banner-graphic {
    background-position: center;
}

.uberuns .main-banner h1 {
    padding-bottom: 9rem !important;
}

.uberuns.arbeitgeber.kontakt .sec-2 {
    padding-top: 7.375rem;
}

.uberuns .main-banner {
    padding: 10em 0 9.25em 0;
    background-image: url(../Images/5_UeberUns_AboutUs/About_1.jpg);
}

.uberuns.arbeitgeber .lp-heading h2 {
    text-align: center;
}

.uberuns.arbeitgeber h2 {
    font-size: 2.5rem;
}

.part-1-content h2 {
    padding-bottom: 1.68rem;
    margin: 0;
}

.part-1-content p {
    padding-bottom: 0;
    margin: 0;
}

.uberuns.newsLP.kontakt .kontakt-border .main-banner-graphic {
    margin-top: 4rem;
    margin-bottom: 0;
}

.uberuns .lp-suggestions .lp-content .uberuns-icons img {
    width: 100%;
    height: 100%;
    padding-bottom: 0;
}

.uberuns .uberuns-icons a {
    width: 3.125rem;
    height: 3.125rem;
    margin-right: 1.25rem;
}

.uberuns .lp-content p {
    padding-bottom: 1.5rem;
    margin: 0;
}

.uberuns .lp-suggestions .lp-content > div {
    padding-bottom: 6rem;
}

.uberuns .lp-suggestions .lp-content strong {
    padding-bottom: 0;
    margin: 0;
    font-size: 1.875rem;
}

.uberuns .lp-suggestions .lp-content img {
    width: 24rem;
    padding-bottom: 1.875rem;
}

.uberuns .lp-suggestions .lp-heading {
    padding: 0;
}

.uberuns .lp-suggestions .lp-content {
    padding: 5rem 0 0.5rem 0;
}


.partner.lp-suggestions .lp-heading {
    padding-bottom: 7.125rem;
}

.partner-slider .slick-slide {
    padding: 0 1.5rem;
}

.partner-slider .slick-slide img {
    object-fit: contain;
    height: 16rem;
    width: 30rem;
    text-align: center;
    margin: 0 auto;
}

.slick-prev, .slick-next {
    width: 3rem !important ;
    height: 3rem !important;
}

.slick-prev:before, .slick-next:before {
    color: var(--dark-blue) !important;
    font-size: 3rem !important;
    font-family: 'font-awesome';
}

.partner-slider .slick-next {
    right: -5rem;
}

.partner-slider .slick-prev {
    left: -5rem;
}

ul.slick-dots {
    display: none !important;
}

.lp-suggestions.TEAM, .lp-suggestions.VERWALTUNG, .partner.lp-suggestions {
    padding-bottom: 6rem;
}




/* Uber Uns end */
/* Responsive */

@media only screen and (max-width: 1680px) {
    body {
        font-size: 16px;
    }

    .main-banner-graphic {
        margin-top: -5em;
    }

    .gap {
        padding: 1em 4em;
    }

    .sec-3 .gap {
        padding: 1em 4em;
    }
}
@media only screen and (max-width: 1480px) {
    body {
        font-size: 14px;
    }

    .gap {
        padding: 1em 8em;
    }

    .sec-3 .gap {
        padding: 1em 8em !important;
    }
}
@media only screen and (max-width: 1280px) {
    body {
        font-size: 12px;
    }

    .gap {
        padding: 1em 8em;
    }

    .sec-3 .gap {
        padding: 1em 8em !important;
    }
}
@media only screen and (max-width: 1080px) {
    body {
        font-size: 10px;
    }

    .gap {
        padding: 1em 8em;
    }

    .sec-3 .gap {
        padding: 1em 8em !important;
    }
}

@media only screen and (max-width: 986px) {
    /* Page 2 */
    .arbeitgeber .main-banner h1 {
        padding-top: 5rem;
    }

    .arbeitgeber .navbar-toggler-icon i {
        color: var(--white);
    }

    .arbeitgeber nav.navbar.navbar-expand-lg a {
        color: var(--blue);
    }

    .arbeitgeber .dropdown-menu.show {
        background-color: var(--white);
    }

    .arbeitgeber .navbar-toggler-icon i {
        color: var(--white);
    }

    nav.navbar.navbar-expand-lg a, .arbeitgeber nav.navbar.navbar-expand-lg a.lang {
        color: var(--blue);
        font-size: 2.5em;
        text-align: center;
    }

    .arbeitgeber nav.navbar.navbar-expand-lg dropdown-menu a {
        color: var(--white);
    }

    a.dropdown-item {
        color: var(--white);
    }

    .arbeitgeber .dropdown-menu.show {
        background-color: var(--white);
    }

    .arbeitgeber .sec-2 .gap {
        padding-right: 1rem;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 1rem;
    }

    .arbeitgeber .part-1 img.sec-2-img {
        height: 100%;
    }

    .arbeitgeber p {
        padding-bottom: 0;
    }

    .arbeitgeber h2 {
        padding: 0;
    }

    .arbeitgeber .sec-2.part-2 .card {
        padding: 2em;
/*         height: 33em; */
    }

    .arbeitgeber .sec-2.part-3 {
        padding: 2em 1em;
    }

    .arbeitgeber .part-6 button.sec-2-btn {
        width: 45%;
        text-align: center;
        padding: 0.2rem 0;
        height: auto;
    }

    .arbeitgeber .sec-2.part-6 ul + div {
        justify-content: center;
    }

    .arbeitgeber .sec-2 .form-content.text-center.w-50.mx-auto {
        width: 100% !important;
    }

    .arbeitgeber h2 br {
        display: none;
    }

    .footer-graphic {
        height: 165px;
    }

    footer {
        padding: 30px 0 0 0;
    }

    footer a {
        font-size: 1.4rem;
    }

    /* home page  */
    .main-banner h1 {
        padding: 2rem 0;
    }
}

@media only screen and (max-width: 768px) {
    :root {
        font-size: 9px;
    }

    body {
        font-size: 9px;
    }

    .main-banner h1 {
        line-height: inherit;
        padding-bottom: 0;
        letter-spacing: 2px;
    }

    .main-banner-graphic {
        margin-top: -100px;
        margin-bottom: 50px;
    }

    /* .main-banner h4 {
        width: 100%;
        padding: 50px;
        position: relative;
        top: 150px;
    }

    .main-banner button {
        margin-bottom: 0;
        margin-top: 120px;
    }

    .main-banner {
        position: relative;
    } */

    .gap {
        padding: 1em 8em;
    }

    .sec-3 .gap {
        padding: 1em 8em !important;
    }


    .arbeitgeber .part-4 img, .arbeitgeber .part-5 img, .arbeitgeber .part-6 img {
        width: 100%;
        height: 30rem;
    }

    .gap, .gap-left {
        padding: 0;
    }

    .slick-prev, .slick-next {
        display: none !important;
    }

    .partner-slider .slick-slide img {
        height: 10rem;
    }

    .partner.lp-suggestions .lp-heading {
        padding-bottom: 1rem;
    }

    #navbarSupportedContent .navbar-nav li {
        margin: 1em 0;
    }

    .uberuns .lp-suggestions .lp-heading {
        text-align: center;
    }

}

@media only screen and (max-width: 580px){
    /* hamburger */
    .navbar-toggler span {
        display: block;
        background-color: var(--dark-blue);
        height: 3px;
        width: 25px;
        margin-top: 5px;
        margin-bottom: 5px;
        position: relative;
        left: 0;
        opacity: 1;
        transition: all 0.35s ease-out;
        transform-origin: center left;
      }

    .arbeitgeber .navbar-toggler span {
        background-color: var(--white);
    }

    .arbeitgeber.kontakt .navbar-toggler span, .arbeitgeber.rechtliches .navbar-toggler span {
        background-color: var(--dark-blue);
    }

    .arbeitgeber.gastronomie .navbar-toggler span {
        background-color: var(--red);
    }

      .navbar-toggler span:nth-child(1) {
        transform: translate(0%, -33%) rotate(45deg);
      }

      .navbar-toggler span:nth-child(2) {
        opacity: 0;
      }

      .navbar-toggler span:nth-child(3) {
        transform: translate(0%, 0%) rotate(-45deg);
      }

      .navbar-toggler span:nth-child(1) {
        margin-top: 0.3em;
      }

      .navbar-toggler.collapsed span:nth-child(1) {
        transform: translate(15%, -33%) rotate(0deg);
      }

      .navbar-toggler.collapsed span:nth-child(2) {
        opacity: 1;
        transform: translate(15%, 0%) rotate(0deg);
      }

      .navbar-toggler.collapsed span:nth-child(3) {
        transform: translate(15%, 33%) rotate(0deg);
      }
    /* hamburger end */

    body, div {
        font-size: 6px !important;
    }

    a {
        /*font-size: 2.2em;*/
    }

    h4 {
        font-size: 2rem;
        text-align: left;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    button.navbar-toggler {
        border: 0;
    }

    span.navbar-toggler-icon {
        background: transparent;
    }

    .arbeitgeber a.sec-2-btn {
        font-size: 1.55rem;
        width: 50%;
        justify-content: center;
        height: 7rem;
        letter-spacing: 2px;
        line-height: 2rem;
    }

    .dropdown-item {
        font-size: 2em;
    }
    .main-banner {
        margin-top: 10em;
        padding: 4em 0em 1em 0em !important;
    }

    .arbeitgeber.gastronomie .main-banner {
         margin-top: 10em;
         padding: 8em 0em 3em 0em !important;
    }

    .arbeitgeber.gastronomie .main-banner h1 {
         margin-top: 0;
         padding: 1em 3rem 4em 3rem !important;
    }


    .arbeitgeber.gastronomie .main-banner-graphic {
         margin-top: 0;
         padding: 0 !important;
    }


    .kontakt .main-banner {
        margin-top: 10em;
        padding: 4em 0em 10em 0em !important;
    }
    .main-banner h1 {
        line-height: 1em;
        padding-bottom: 2em;
        letter-spacing: 0.3em;
    }

    .main-banner-graphic {
        margin-top: -145px;
        margin-bottom: 60px;
    }

    .gap, .gap-left {
        padding: 1rem !important;
    }

    img.logo {
        width: 150px;
    }

    nav.navbar.navbar-expand-lg {
        height: 60px;
        padding: 0 2rem;
    }

    .main-LP .part-1 img.sec-2-img, .main-LP img.sec-2-img, .main-LP img.sec-3-img, .main-LP img.sec-4-img {
        width: 100%;
        margin-bottom: 2rem;
    }

    .main-LP .sec-2 h2, .main-LP  .sec-3 h2, .main-LP  .sec-4 h2 {
        text-align: center;
    }

    .main-LP .main-banner h4 {
        padding: 0;
        position: relative;
        top: 20rem;
        text-align: center;
        color: var(--dark-blue);
    }

    .main-LP .main-banner {
        position: relative;
    }

    .main-LP .sec-2 {
        margin-top: 23rem;
    }

    .main-LP .main-banner button {}

    .main-LP.container-fluid.main-banner.text-center {
        margin-bottom: 35em;
    }

    .main-LP.container-fluid.main-banner.text-center h4 {
        top: 10em;
        position: relative;
        text-align: center;
    }

    .main-LP.container-fluid.main-banner.text-center .slc-btn {
        top: 13em;
    }

    .main-LP.index-LP a.slc-btn:hover {
        color: var(--dark-blue);
        border-color: var(--dark-blue);
    }

    .main-LP a.slc-btn {
        position: relative;
        /* top: 22rem; */
        top: 0rem;
        border-color: var(--dark-blue);
        font-size: 1.5rem;
        background-color: var(--dark-blue);
        color: var(--white);
    }

    .main-LP a.slc-btn::hover {
        border-color: var(--dark-blue);
        background-color: var(--white);
        color: var(--dark-blue);
    }

    .main-LP .main-banner-graphic {
        background-size: cover;
        background-position: center;
    }

    .main-LP .sec-4 .row, .main-LP .sec-2 .row {
        flex-direction: column-reverse;
    }

    .main-LP + .sec-2 .row {
        flex-direction: column-reverse;
    }

    .main-LP + .sec-2 .row h2 {
        text-align: center;
    }

    .main-LP + .sec-2 .row img.sec-2-img {
        margin: 60px 0 30px 0;
    }

    .main-LP + .sec-2 + .sec-3 .sec-inv img {
        margin: 60px 0 30px 0;
    }

    .main-LP + .sec-2 + .sec-3 .sec-inv h2 {
        text-align: center;
    }


    .main-LP + .sec-2 + .sec-3 + .sec-4 .row {
        flex-direction: column-reverse;
    }

    .main-LP + .sec-2 + .sec-3 + .sec-4 .row img {
        margin: 60px 0 30px 0;
    }

    .main-LP + .sec-2 + .sec-3 + .sec-4 .row h2 {
        text-align: center;
    }

    .main-banner button {
        margin-bottom: 1em;
    }

    .main-LP.main-banner h4 {
        margin-top: 0;
        padding-bottom: 1em;
        font-size: 16px;
        word-break: break-word;
        width: 100%;
        letter-spacing: 1px;
        width: 79%;
        color: var(--dark-b);
    }

    .main-banner h4 {
        margin-top: 160px;
        padding-bottom: 1em;
        font-size: 16px;
        word-break: break-word;
        width: 100%;
        letter-spacing: 1px;
    }

    .arbeitgeber .sec-2.part-2, .arbeitgeber .sec-2.part-3, .arbeitgeber .sec-2.part-4, .arbeitgeber .sec-2.part-5, .arbeitgeber .sec-2.part-6, .arbeitgeber .sec-2.part-7a {
        padding: 7rem 0 0 0;
    }

    .sec-2.part-6.img1-1 {
    padding-top: 0;
}

    .sec-2, .sec-3, .sec-4 {
        text-align: center;
    }

    .sec-2 h2, .sec-3 h2, .sec-4 h2 {
        text-align: left;
        font-size: 3.5em;
        padding-bottom: 1em;
        letter-spacing: 1.05px;
        line-height: 2.8rem;
    }

    .sec-2 p, .sec-3 p, .sec-4 p {
        text-align: left;
        font-size: 2.668em;
        font-size: 1.5625rem;
        padding-bottom: 1em !important;
    }

    .container {max-width: 60rem;padding: 0 2rem;}

    button {
        text-align: center;
        font-size: 14px;
        letter-spacing: 1px;
    }

    a.sec-2-btn, a.sec-3-btn, a.sec-4-btn {
        margin-bottom: 2em;
        width: 60%;
    }

    .arbeitgeber .part-1 img.sec-2-img, img.sec-2-img, img.sec-3-img, img.sec-4-img {
        width: 100%;
    }

    .sec-2 img.content-infographic {
        width: 50% !important;
    }

    .sec-3 .sec-inv .gap {
        text-align: center;
        padding: 1em !important;
    }

    .sec-3 .sec-inv {
        /* flex-direction: column-reverse; */
    }

    .sec-3 img.content-infographic {
        width: 30em;
    }

    .arbeitgeber .sec-2 .accordion-head {
        text-align: center;
        padding: 1.8rem 0 1.8rem 0;
    }

    .sec-2 .accordion-item .accordion-button {
        border-radius: 20px;
        color: var(--blue);
        background: var(--white);
        font-size: 2rem;
        position: relative;
    }

    .sec-2 .accordion-item {
        margin: 4rem 0rem;
        border-radius: 10px;
    }

    .sec-2 .accordion-item h3 {
        font-size: 2.5rem;
        line-height: 3rem;
    }


    .sec-2 .accordion-item .accordion-body strong {
        font-size: 1em;
    }

    .sec-2 .accordion-item .accordion-body{
        font-size: 2rem !important;
        /* font-size: 1rem; */
        text-align: left;
    }

    .sec-2 .accordion-item .accordion-body a{
        font-size: 1.5625rem;
        text-align: left;
        color: var(--blue);
    }

    .arbeitgeber .sec-2 .accordion-item .accordion-body a {
        color: var(--blue);
        letter-spacing: 0;
    }

    .sec-4 img.content-infographic {
        width: 30em;
    }

    .accordion-button::after {
        width: 30px;
        height: 30px;
        border: none;
        content: "\f107";
        font-size: 36px;
        padding: 0;
        font-family: 'FontAwesome';
        line-height: 2rem;
    }

    .arbeitgeber .sec-2.part-7 form label {
        font-size: 2rem;
    }

    footer {
        padding-top: 2em;
        padding-bottom: 5em;
        text-align: center;
        font-size: 2.5em;
    }

    footer .svg-img {
        width: 38px;
        height: 38px;
        margin: 0px 1rem;
        margin-top: 0;
        object-fit: contain;
    }

    footer ul {
        margin: 0;
        padding: 0;
        text-align: left;
    }

    footer ul.footer-app-icon {
        justify-content: left;
        padding-bottom: 6rem;
    }

    #app > div > div > footer > div.container > div > div:nth-child(4) > ul.footer-app-icon.footer-search-section {
        left: 0;
    }

    .footer-graphic {
        height: 80px;
        margin-bottom: -70px;
        background: transparent;
    }

    body > footer > div.container > div > div:nth-child(3) {
        padding: 4rem 1rem;
    }

    footer > div.container > div > div:nth-child(3) > ul:nth-child(1) > li:nth-child(2) {
        padding-top: 4rem;
    }

    footer .input-group.footer-search input {
        font-size: 2rem;
    }

    footer .input-group.footer-search .input-group-append button {
        font-size: 2rem;
    }

    footer li {
        padding-bottom: 2rem;
    }

    li.footer-search {
        /* padding-bottom: 6rem; */
    }


    /* Page 2 */

    .arbeitgeber .main-banner h1 {
        padding-top: 12.5rem;
    }

    .arbeitgeber .sec-2.part-2 .card {
        margin-bottom: 1rem;
        padding: 20px;
    }

    .arbeitgeber .sec-2.part-2 .card h3 {
        font-size: 3em;
    }

    .arbeitgeber .sec-2.part-2 .card li {
        font-size: 2.7em;
        /* font-size: 1rem; */
        text-align: left;
    }

    .arbeitgeber .sec-2.part-6 ul li {
        text-align: left;
        font-size: 2rem;
        /* font-size: 1rem; */
    }

    .arbeitgeber .employee-share .col-lg-12 p {
        padding: 0;
    }

    .arbeitgeber .employee-share .col-lg-12 .amount p {
        font-size: 2rem;
        width: 50px;
        padding: 0;
        margin: 0;
        text-align: left;
        margin-right: 10px;
    }

    .arbeitgeber .employee-share {
        padding: 2em;
    }

    .employee-share .col-lg-12 .amount .box {
        width: 222px !important;
        font-size: 2.5em;
        margin-left: 0;
    }

    .employee-share .col-lg-12 .amount {
    width: 150px;
    align-items: baseline;
    flex: 0 1 10%;
    flex-direction: column;
    }

    .employee-share .col-lg-12 {
        padding: 1.5rem;
        /* flex-direction: column; */
        text-align: left;
        flex-wrap: wrap;
    }

    .employee-share .col-lg-12:first-child {
        padding: 1.5rem;
        flex-direction: column;
        text-align: left;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .arbeitgeber .sec-2.part-6 .gap {
        padding: 0 !important;
    }

    .arbeitgeber .part-4 img, .arbeitgeber .part-5 img, .arbeitgeber .part-6 img {
        width: 100%;
        padding-bottom: 0;
        height: 49rem;
    }

    .arbeitgeber .part-5 .row {
        flex-direction: column-reverse;
    }

    .arbeitgeber .sec-3 .row {
        /* flex-direction: column-reverse; */
    }

    .arbeitgeber .sec-2.part-5 .gap {
        padding: 1em 3em !important;
    }

    .arbeitgeber .sec-2 .form-content {
        width: 100% !important;
    }

    .arbeitgeber button.sec-2-btn, .arbeitgeber.kontakt form button.sec-2-btn {
        font-size: 2.5em;
        /* font-size: 2rem; */
        width: 13.75rem;
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-left: 1rem !important;
        margin: 0 auto !important;
        text-align: center;
        padding-right: 0;
        padding-left: 0;
    }

    .arbeitgeber .sec-2.part-6 p {
        font-size: 2rem;
    }

    .arbeitgeber .sec-2.part-6 .row {
        margin: 0 auto;
        justify-content: center;
    }

    .arbeitgeber .sec-2.part-7 form .form-group {
        text-align: left;
        font-size: 2em;
        margin-bottom: 4rem;
        margin-left: 0;
        padding-left: 0;
        margin-right: 0;
        padding-right: 0;
        width: 100%;
    }

    .arbeitgeber .form-row {
        flex-direction: column;
    }

    .arbeitgeber .sec-2.part-7 form input, .arbeitgeber .sec-2.part-7 form textarea, .arbeitgeber .sec-2.part-7 form select {
        width: 100%;
        font-size: 2rem;
        border-radius: 0.625rem;
        padding: 1.5rem;
    }

    .arbeitgeber .form-row {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Privatpersonen */

    #app > div > div > main > .privatpersonen > div.sec-2.part-7 > div > form > div:nth-child(2) {
        position: relative;
        padding-top: 140px;
    }

    #app > div > div > main > .privatpersonen > div.sec-2.part-7 > div > form > div:nth-child(2) > div:nth-child(2) > #inputEmail {
        position: absolute;
        top: -300px;
    }

    #app > div > div > main > .privatpersonen > div.sec-2.part-7 > div > form > div:nth-child(2) > div:nth-child(2) > label {
        position: absolute;
        top: -337px;
    }

    .privatpersonen .sec-2.part-5 {
        padding-top: 0;
        padding-bottom: 5rem;
    }

    .privatpersonen .part-5 img.sec-2-img {
        margin-bottom: 5rem !important;
    }

    .privatpersonen button.sec-2-btn {
        margin: 0 auto !important;
        /* margin-top: 4rem !important; */
    }

    .arbeitgeber.privatpersonen .sec-2.part-2 .card li {
        font-size: 2.7em;
    }

    .arbeitgeber.privatpersonen .card p {
        text-align: left;
    }
    .gastronomie .arbeitgeber .part-5 .row {
        flex-direction: column;
    }

    .gastronomie .arbeitgeber .part-4 .row {
        flex-direction: column-reverse;
    }

    .part-5 img.sec-2-img {
        margin: 5rem 0;
    }

    .part-4 img.sec-2-img {
        margin: 5rem 0;
    }

    .part-6 img.sec-2-img {
        margin: 5rem 0;
    }

    .privatpersonen.arbeitgeber .sec-2.part-7 form textarea {
        width: 100% !important;
    }

    /* Gastronomie */
    .arbeitgeber.gastronomie nav.navbar.navbar-expand-lg a.lang {
        color: var(--red);
    }
    .arbeitgeber.gastronomie .stacked-btn a.sec-2-btn {
        width: 100%;
        display: block;
        height: 5rem;
        padding: 1rem 0.5rem;
        font-size: 1.7rem;
    }

    .arbeitgeber.gastronomie .stacked-btn {
        display: block;
    }

    .arbeitgeber.kontakt .form-content {
        padding-top: 3.5rem;
        padding-bottom: 5rem;
    }

    .arbeitgeber.kontakt .sec-2.part-7 {
        padding-bottom: 5rem;
    }

    .kontakt .kontakt-border .main-banner-graphic {
         margin-bottom: 8rem;
    }

    .kontakt h3 {
        font-size: 2rem;
        text-align: left;
    }

    .arbeitgeber.kontakt .sec-2.contact-map {
        padding-bottom: 8rem;
    }

    .rechtliches.arbeitgeber h2 {
        font-size: 3.4em;
    }

    .rechtliches.arbeitgeber .sec-2 .accordion-head {
        padding: 0 0 3.4em 2em;
    }

    .rechtliches h3, .rechtliches .sec-2 .accordion-item .accordion-button {
        font-size: 1.35em;
    }

    .rechtliches .sec-2 .accordion-item {
        border: 2px solid var(--dark-blue);
    }

    .rechtliches .sec-2 .accordion {
        padding-bottom: 9.75rem;
    }

    #app > div > div > main > .gastronomie > div.sec-2.part-2 > div > div > div:nth-child(1) {
        margin-bottom: -12px;
        padding-bottom: 0;
    }

    #app > div > div > main > .gastronomie > div.sec-2.part-2 > div > div > div:nth-child(2) {
        border-top: 0;margin-top: -6px;padding-top: 0;border-top-right-radius: 0;border-top-left-radius: 0;
    }

    /* news */
    .news .sec-2.part-3 {
        padding-bottom: 15rem;
    }

    .news .part-1 img.sec-2-img, .news img.sec-2-img, .news img.sec-3-img, .news img.sec-4-img {
        width: 100%;
        height: 50rem;
        margin-bottom: 6rem;
        margin-top: 4rem;
    }

    .news .sec-2.part-2 .row {
        flex-direction: column-reverse;
    }

    /* News LP */
    .newsLP.arbeitgeber.kontakt h2 {
        font-size: 2rem;
        padding-bottom:  2rem;
    }

    .newsLP.arbeitgeber.kontakt strong {
        font-size: 1.57rem;
    }

    .row.align-items-stretch.lp-content > div {
        padding-bottom: 4rem;
        width: 50%;
    }

    a.lp-content-btn.slc-btn {
        font-size: 1.4rem;
        letter-spacing: 1px;
    }

    .col-lg-4.col-md-4.col-sm-12 {}

    /* .lp-content > div:nth-child(3) {
        display: none;
    } */

    .newsLP.kontakt .kontakt-border .main-banner-graphic {
        margin: 3rem 0 !important;
        background-size: contain;
    }

    /* Uberuns */

    .uberuns .main-banner h1 {
        padding-bottom: 20rem;
    }

    .uberuns .main-banner {
        padding-bottom: 25rem;
    }


    .uberuns.arbeitgeber.kontakt .sec-2 .gap img {
        padding-bottom: 6.8rem;
    }

    .main-banner-graphic {
        background-size: contain;
        height: 10rem;
        margin-top: 0;
    }

     .newsLP .main-banner {
    padding: 10rem 0rem 19rem 0rem !important;
    background-position: 80% center;
    }
    .newsLP .main-banner h1 {
        margin-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .newsLP .main-banner-graphic {
        background-size: cover;
        background-position: center;
        height: 11rem;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .uberuns .main-banner-graphic {
        background-size: cover;
        background-position: 59% 50%;
        height: 7rem;
        transform: rotate(0deg) !important;
    }

    .lp-suggestions.TEAM, .lp-suggestions.VERWALTUNG, .partner.lp-suggestions {
        padding-bottom: 2rem;
    }

    .uberuns .lp-suggestions .lp-content > div {
        padding: 2rem 2rem;
        width: 50%;
    }

    .uberuns .lp-suggestions .lp-content img {
        height: 17rem;
        width: 17rem;
    }

    /* Kontakt */
    .kontakt.arbeitgeber .sec-2.part-7 > div > form > div:nth-child(3) .form-group {
        width: 100% !important;
    }

    .kontakt.arbeitgeber .sec-2.part-7 form textarea {
        width: 100% !important;
    }
    .arbeitgeber.kontakt form button.sec-2-btn {
        /* margin-top: 4rem !important; */
    }

    #app > div > div > main > .kontakt > div.sec-2.part-7 > div > form > div:nth-child(5) {
        position: relative;
        padding-top: 150px;
    }

    #app > div > div > main > .kontakt > div.sec-2.part-7 > div > form > div:nth-child(5) > div:nth-child(2) > #inputEmail {
        position: absolute;
        top: -310px;
    }

    #app > div > div > main > .kontakt > div.sec-2.part-7 > div > form > div:nth-child(5) > div:nth-child(2) > label {
        position: absolute;
        top: -353px;
    }

    .news-details li {
        font-size: 1.5625rem;
        font-family: ClanOT-Book;
    }

    .news-details a {
        font-size: 1.5625rem;
    }

}

a.footer-app-link-disable {
    cursor: default;
    text-decoration: none;
}



a.footer-app-link-disable:hover {
    color: var(--white);
}


.kart-btn {
    width: 10em !important;
}

.sec-2.kart-second-div ul{
    font-size: 1.5625rem;
}

@media only screen and (max-width: 580px){
    .arbeitgeber .sec-2.kart-second-div ul li {
        text-align: left;
        font-size: 2rem;
        /* font-size: 1rem; */
    }

    .kart-second-form{
        padding-top: unset !important;
    }
    .kart-second-form label{
        position: unset !important;
    }

    #establishment_website{
        margin-bottom: 4rem !important;
    }
}