/* SINGLE LAF JOB CSS */
:root {
    --single_headline_color: #ff0000;
    --single_text_color: #000000;
    --single_button_bg_color: #0073aa;
    --single_button_text_color: #ffffff;
    --single_button_border_color: #005177;
    --single_button_hover_bg_color: #005177;
    --single_button_hover_text_color: #ffffff;
    --single_button_hover_border_color: #003f4f;
    --single_button_border_radius: 5px;
    --single_button_border_width: 1px;
    --single_contact_bg_color: #f9f9f9;
    --single_contact_headline_color: #000000;
    --single_contact_text_color: #000000;
    --single_cta_bg_color: #0073aa;
    --single_cta_text_color: #ffffff;
    --single_cta_button_bg_color: #ff0000;
    --single_cta_button_text_color: #ffffff;
    --single_cta_button_border_color: #005177;
    --single_cta_button_hover_bg_color: #005177;
    --single_cta_button_hover_text_color: #ffffff;
    --single_cta_button_hover_border_color: #003f4f;
    --single_cta_button_border_radius: 5px;
    --single_cta_button_border_width: 1px;
    --gap: 40px; /* Hier kannst du den Gap-Wert anpassen */
    --column-width: calc((100% - (var(--gap) * 11)) / 12); /* Breite einer einzelnen Spalte */
    --single_container_max_width: 1430px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    padding: 0 !important;
    background-color: #ffffff;
}

h1 {
    font-size: 40px !important;
    line-height: 1.25 !important;
    color: var(--single_headline_color) !important;
    margin: 0 !important;
}
h2 {
    font-size: 40px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}
h3 {
    font-size: 26px !important;
    line-height: 1.25 !important;
    color: var(--single_headline_color) !important;
    margin-bottom: 20px !important;
}
h4 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
}
p, li {
    font-size: 18px !important;
    line-height: 1.25 !important;
    color: var(--single_text-color) !important;
}
ul {
    padding-left: 20px !important;
}
li::marker {
    color: var(--single_headline_color) !important;
}
ul li:not(:last-child),
ol li:not(:last-child) {
    margin-bottom: 6px;
}
.laf-job-address p {
    margin:  0 !important;
}
.info-headline {
    color: var(--single_headline_color) !important;
    margin-bottom: 5px !important;
}
.laf-job-single-link {
    color: var(--single_text_color) !important;
    text-decoration: underline !important;
}
.laf-job-single-link:hover {
    color: var(--single_headline_color) !important;
}

.laf-full-background {
    background-color: var(--single_contact_bg_color) !important;
    padding: 50px 0 !important;
}

.laf-job-button {
    padding: 15px 35px;
    background-color: var(--single_button_bg_color) !important;
    color: var(--single_button_text_color) !important;
    border-radius: var(--single_button_border_radius) !important;
    border-width: var(--single_button_border_width)  !important;
    border-color: var(--single_button_border_color) !important;
    border-style: solid !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 20px !important;
    transition: 0.4s !important;
    text-decoration: none;
}
.laf-job-button:hover {
    background-color: var(--single_button_hover_bg_color) !important;
    color: var(--single_button_hover_text_color) !important;
    border-color: var(--single_button_hover_border_color) !important;
}


/* CTA BUTTONS */
.laf-job-contact-btn-container {
    display: flex;
    flex-wrap: wrap;
}
.laf-job-contact-btn-container a:first-of-type {
    margin-right: 25px;
}
.laf-job-contact-btn-container .laf-job-button {
    margin-bottom: 20px;
}
.laf-job-contact-btn-mail .laf-job-contact-btn-content:before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    transition: 0.4s !important;
    background-color: var(--single_cta_button_text_color);
    mask-image: url('../images/mail.svg');
    -webkit-mask-image: url('../images/mail.svg');
    mask-size: cover;
    -webkit-mask-size: cover;
    
}
.laf-job-contact-btn-mail:hover .laf-job-contact-btn-content:before {
    background-color: var(--single_cta_button_hover_text_color);
    transition: 0.4s !important;
}
.laf-job-contact-btn-phone .laf-job-contact-btn-content:before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    transition: 0.4s !important;
    background-color: var(--single_cta_button_text_color);
    mask-image: url('../images/phone.svg');
    -webkit-mask-image: url('../images/phone.svg');
    mask-size: cover;
    -webkit-mask-size: cover;
    
}
.laf-job-contact-btn-phone:hover .laf-job-contact-btn-content:before {
    background-color: var(--single_cta_button_hover_text_color);
    transition: 0.4s !important;
}
.laf-job-contact-btn-content {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Abstand zwischen Icon und Text */
}

@media screen and (max-width: 450px) {
    .laf-job-contact-btn-content {
        color: transparent;
        font-size: 0;
        gap: 0;
    }
}
.laf-job-contact-text {
    color: var(--single_contact_text_color) !important;
}
.laf-job-contact-headline {
    color: var(--single_contact_headline_color) !important;
}
.laf-job-cta-button {
    padding: 15px 35px;
    background-color: var(--single_cta_button_bg_color) !important;
    color: var(--single_cta_button_text_color) !important;
    border-radius: var(--single_cta_button_border_radius) !important;
    border-width: var(--single_cta_button_border_width) !important;
    border-color: var(--single_cta_button_border_color) !important;
    border-style: solid !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 20px !important;
    transition: 0.4s !important;
    display: inline-block !important;
    text-decoration: none;
}

.laf-job-cta-button:hover {
    background-color: var(--single_cta_button_hover_bg_color) !important;
    color: var(--single_cta_button_hover_text_color) !important;
    border-color: var(--single_cta_button_hover_border_color) !important;
}

.laf-job-cta {
    text-align: center !important;
    background-color: var(--single_cta_bg_color) !important;
    padding: 45px 50px !important;
}

.laf-job-cta h3 {
    color: var(--single_cta_text_color) !important;
    font-weight: 600 !important;
    margin-bottom: 30px !important;
}

.laf-gap {
    margin-bottom: 6px !important;
}

.laf-job-bold {
    font-weight: 600 !important;
    color: var(--single_headline_color) !important;
}

.laf-job-element {
    margin-bottom: 50px;
}
.laf-job-element ul {
    margin-left: 0 !important;
}
.laf-job-border-box .laf-job-element {
    margin-bottom: 40px;
}

.laf-job-border-box {
    border: 2px solid var(--single_headline_color);
    padding: 30px;
}

.laf-job-container {
    max-width: var(--single_container_max_width);
    margin: 0 auto;
    padding: 0 30px;
}

.laf-job-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50px;
    align-items: flex-start; /* Spalten orientieren sich an ihrer eigenen Höhe */
    gap: 40px;
}

/** Spalten-Definitionen für alle Breiten (1 bis 12) **/

/* Mobile < 768px */
@media screen and (min-width: 1px) and (max-width: 767px) {
    .laf-job-col-md-1 { flex: 0 0 calc(var(--column-width) * 1 + (var(--gap) * 0)); }
    .laf-job-col-md-2 { flex: 0 0 calc(var(--column-width) * 2 + (var(--gap) * 1)); }
    .laf-job-col-md-3 { flex: 0 0 calc(var(--column-width) * 3 + (var(--gap) * 2)); }
    .laf-job-col-md-4 { flex: 0 0 calc(var(--column-width) * 4 + (var(--gap) * 3)); }
    .laf-job-col-md-5 { flex: 0 0 calc(var(--column-width) * 5 + (var(--gap) * 4)); }
    .laf-job-col-md-6 { flex: 0 0 calc(var(--column-width) * 6 + (var(--gap) * 5)); }
    .laf-job-col-md-7 { flex: 0 0 calc(var(--column-width) * 7 + (var(--gap) * 6)); }
    .laf-job-col-md-8 { flex: 0 0 calc(var(--column-width) * 8 + (var(--gap) * 7)); }
    .laf-job-col-md-9 { flex: 0 0 calc(var(--column-width) * 9 + (var(--gap) * 8)); }
    .laf-job-col-md-10 { flex: 0 0 calc(var(--column-width) * 10 + (var(--gap) * 9)); }
    .laf-job-col-md-11 { flex: 0 0 calc(var(--column-width) * 11 + (var(--gap) * 10)); }
    .laf-job-col-md-12 { flex: 0 0 calc(var(--column-width) * 12 + (var(--gap) * 11)); }
}

/* Landscape Mobile < 992px */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .laf-job-col-lg-1 { flex: 0 0 calc(var(--column-width) * 1 + (var(--gap) * 0)); }
    .laf-job-col-lg-2 { flex: 0 0 calc(var(--column-width) * 2 + (var(--gap) * 1)); }
    .laf-job-col-lg-3 { flex: 0 0 calc(var(--column-width) * 3 + (var(--gap) * 2)); }
    .laf-job-col-lg-4 { flex: 0 0 calc(var(--column-width) * 4 + (var(--gap) * 3)); }
    .laf-job-col-lg-5 { flex: 0 0 calc(var(--column-width) * 5 + (var(--gap) * 4)); }
    .laf-job-col-lg-6 { flex: 0 0 calc(var(--column-width) * 6 + (var(--gap) * 5)); }
    .laf-job-col-lg-7 { flex: 0 0 calc(var(--column-width) * 7 + (var(--gap) * 6)); }
    .laf-job-col-lg-8 { flex: 0 0 calc(var(--column-width) * 8 + (var(--gap) * 7)); }
    .laf-job-col-lg-9 { flex: 0 0 calc(var(--column-width) * 9 + (var(--gap) * 8)); }
    .laf-job-col-lg-10 { flex: 0 0 calc(var(--column-width) * 10 + (var(--gap) * 9)); }
    .laf-job-col-lg-11 { flex: 0 0 calc(var(--column-width) * 11 + (var(--gap) * 10)); }
    .laf-job-col-lg-12 { flex: 0 0 calc(var(--column-width) * 12 + (var(--gap) * 11)); }
}
/* Tablet < 1200px */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .laf-job-col-xl-1 { flex: 0 0 calc(var(--column-width) * 1 + (var(--gap) * 0)); }
    .laf-job-col-xl-2 { flex: 0 0 calc(var(--column-width) * 2 + (var(--gap) * 1)); }
    .laf-job-col-xl-3 { flex: 0 0 calc(var(--column-width) * 3 + (var(--gap) * 2)); }
    .laf-job-col-xl-4 { flex: 0 0 calc(var(--column-width) * 4 + (var(--gap) * 3)); }
    .laf-job-col-xl-5 { flex: 0 0 calc(var(--column-width) * 5 + (var(--gap) * 4)); }
    .laf-job-col-xl-6 { flex: 0 0 calc(var(--column-width) * 6 + (var(--gap) * 5)); }
    .laf-job-col-xl-7 { flex: 0 0 calc(var(--column-width) * 7 + (var(--gap) * 6)); }
    .laf-job-col-xl-8 { flex: 0 0 calc(var(--column-width) * 8 + (var(--gap) * 7)); }
    .laf-job-col-xl-9 { flex: 0 0 calc(var(--column-width) * 9 + (var(--gap) * 8)); }
    .laf-job-col-xl-10 { flex: 0 0 calc(var(--column-width) * 10 + (var(--gap) * 9)); }
    .laf-job-col-xl-11 { flex: 0 0 calc(var(--column-width) * 11 + (var(--gap) * 10)); }
    .laf-job-col-xl-12 { flex: 0 0 calc(var(--column-width) * 12 + (var(--gap) * 11)); }
}
/* Desktop > 1200 */
@media screen and (min-width: 1200px) {
    .laf-job-col-1 { flex: 0 0 calc(var(--column-width) * 1 + (var(--gap) * 0)); }
    .laf-job-col-2 { flex: 0 0 calc(var(--column-width) * 2 + (var(--gap) * 1)); }
    .laf-job-col-3 { flex: 0 0 calc(var(--column-width) * 3 + (var(--gap) * 2)); }
    .laf-job-col-4 { flex: 0 0 calc(var(--column-width) * 4 + (var(--gap) * 3)); }
    .laf-job-col-5 { flex: 0 0 calc(var(--column-width) * 5 + (var(--gap) * 4)); }
    .laf-job-col-6 { flex: 0 0 calc(var(--column-width) * 6 + (var(--gap) * 5)); }
    .laf-job-col-7 { flex: 0 0 calc(var(--column-width) * 7 + (var(--gap) * 6)); }
    .laf-job-col-8 { flex: 0 0 calc(var(--column-width) * 8 + (var(--gap) * 7)); }
    .laf-job-col-9 { flex: 0 0 calc(var(--column-width) * 9 + (var(--gap) * 8)); }
    .laf-job-col-10 { flex: 0 0 calc(var(--column-width) * 10 + (var(--gap) * 9)); }
    .laf-job-col-11 { flex: 0 0 calc(var(--column-width) * 11 + (var(--gap) * 10)); }
    .laf-job-col-12 { flex: 0 0 calc(var(--column-width) * 12 + (var(--gap) * 11)); }
}

/** Offset-Definitionen für Versatz (1 bis 3 Spalten) **/

/* Mobile < 768px */
@media screen and (min-width: 1px) and (max-width: 767px) {
    .laf-job-col-offset-md-1 { margin-left: calc(var(--column-width) * 1 + (var(--gap) * 1)); }
    .laf-job-col-offset-md-2 { margin-left: calc(var(--column-width) * 2 + (var(--gap) * 2)); }
    .laf-job-col-offset-md-3 { margin-left: calc(var(--column-width) * 3 + (var(--gap) * 3)); }
}

/* Landscape Mobile < 992px */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .laf-job-col-offset-lg-1 { margin-left: calc(var(--column-width) * 1 + (var(--gap) * 1)); }
    .laf-job-col-offset-lg-2 { margin-left: calc(var(--column-width) * 2 + (var(--gap) * 2)); }
    .laf-job-col-offset-lg-3 { margin-left: calc(var(--column-width) * 3 + (var(--gap) * 3)); }
}
/* Tablet < 1200px */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .laf-job-col-offset-xl-1 { margin-left: calc(var(--column-width) * 1 + (var(--gap) * 1)); }
    .laf-job-col-offset-xl-2 { margin-left: calc(var(--column-width) * 2 + (var(--gap) * 2)); }
    .laf-job-col-offset-xl-3 { margin-left: calc(var(--column-width) * 3 + (var(--gap) * 3)); }
}
/* Desktop > 1200 */
@media screen and (min-width: 1200px) {
    .laf-job-col-offset-1 { margin-left: calc(var(--column-width) * 1 + (var(--gap) * 1)); }
    .laf-job-col-offset-2 { margin-left: calc(var(--column-width) * 2 + (var(--gap) * 2)); }
    .laf-job-col-offset-3 { margin-left: calc(var(--column-width) * 3 + (var(--gap) * 3)); }
}





/* Stile für spezifische Inhalte */
.laf-job-header-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive Anpassungen */
/*
@media (max-width: 768px) {
    .laf-job-col {
        flex: 0 0 100%;
        margin-left: 0;
    }

    .laf-job-col-offset-1,
    .laf-job-col-offset-2,
    .laf-job-col-offset-3 {
        margin-left: 0;
    }
}
*/


/* Form CSS */
.wpcf7-submit {
    padding: 15px 35px;
    background-color: var(--single_button_bg_color) !important;
    color: var(--single_button_text_color) !important;
    border-radius: var(--single_button_border_radius) !important;
    border-width: var(--single_button_border_width)  !important;
    border-color: var(--single_button_border_color) !important;
    border-style: solid !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 20px !important;
    transition: 0.4s !important;
}
.wpcf7-submit:hover {
    background-color: var(--single_button_hover_bg_color) !important;
    color: var(--single_button_hover_text_color) !important;
    border-color: var(--single_button_hover_border_color) !important;
}
.laf-job-form input.wpcf7-text {
    width: 100% !important;
}
.laf-job-form input.wpcf7-text {
    border-width: 0px 0px 2px 0px;
    border-color: var(--single_headline_color);
    border-radius: 0;
}
[type="checkbox"] {
    margin-bottom: -6px !important;
    border-color: var(--single_headline_color) !important;
    color: var(--single_headline_color); !important
    background-color: #ffffff !important;
    box-shadow: inset 0px 0px 0px 3px #fff;
}
.wpcf7-acceptance .wpcf7-list-item {
    margin-left: 0 !important;
}
input::file-selector-button {
    padding: 8px 16px;
    background-color: var(--single_button_bg_color) !important;
    color: var(--single_button_text_color) !important;
    border-radius: var(--single_button_border_radius) !important;
    border-width: var(--single_button_border_width)  !important;
    border-color: var(--single_button_border_color) !important;
    border-style: solid !important;
    font-size: 20px !important;
    line-height: 20px !important;
    transition: 0.4s !important;
}
.wpcf7-file {
    padding-top: 10px !important;
}
.laf-job-form-heading {
    color: var(--single_headline_color) !important;
    font-weight: 600 !important;
}
.laf-job-form .laf-job-row h3 {
    margin-bottom: 0 !important;
}
.laf-job-form {
    border: 2px solid var(--single_headline_color);
    padding: 0;
    max-width: 1400px !important;
    padding-top: 80px;
    margin-top: 90px;
    margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
    .laf-job-form .laf-job-row .laf-job-col-md-12 {
        padding: 0 5px;
    }
    h1, h2 {
        font-size: 30px !important;
    }
    .laf-job-cta {
        padding: 20px 25px !important;
    }
    .laf-job-container {
        padding: 0 15px;
    }
    .laf-job-row {
        margin-bottom: 30px;
    }
    .laf-job-form {
        padding-top: 40px;
    }
    .laf-full-background {
        padding-top: 40px !important;
        padding-bottom: 10px !important;
    }
    .laf-job-element {
        margin-bottom: 30px;
    }
    .wpcf7-list-item-label {
        line-height: 1.5;
    }
    .laf-job-header-image img {
        height: 30vh !important;
        object-fit: cover !important;
        object-position: 50% !important;
    }
}