/* ==========================================================
   FRISURENSCHMIEDE – JOBSEITE
   css-pages/job.css
   ========================================================== */


/* ==========================================================
   GRUNDLAYOUT
   ========================================================== */

.job-page {
    width: 100%;
}

.job-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 42px;
    align-items: start;
}

.job-main {
    min-width: 0;
}


/* ==========================================================
   INTRO
   ========================================================== */

.job-intro {
    margin-bottom: 38px;
}

.job-kicker {
    display: block;
    margin-bottom: 8px;

    color: #797a59;

    font-size: 0.9rem;
    font-weight: 600;
}

.job-intro h1 {
    margin: 0 0 8px;
}

.job-subline {
    margin: 0 0 22px;

    font-size: 1.1rem;
    font-weight: 600;
}

.job-lead {
    max-width: 760px;
    margin: 0;

    font-size: 1.08rem;
    line-height: 1.65;
}


/* ==========================================================
   ABSCHNITTE
   ========================================================== */

.job-section {
    margin: 0 0 42px;
}

.job-section h2 {
    margin: 0 0 20px;
}

.job-section p {
    line-height: 1.65;
}


/* ==========================================================
   VORTEILE
   ========================================================== */

.job-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.job-benefit {
    padding: 18px 20px;

    background: #f7f7f5;

    border: 1px solid #e2e2de;
    border-radius: 4px;
}

.job-benefit strong {
    display: block;

    margin-bottom: 5px;

    font-size: 1rem;
}

.job-benefit span {
    display: block;

    font-size: 0.94rem;
    line-height: 1.5;
}


/* ==========================================================
   ZWEI SPALTEN
   ========================================================== */

.job-two-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 46px;
    align-items: start;

    margin-bottom: 42px;
}

.job-two-cols .job-section {
    margin-bottom: 0;
}

.job-experience {
    margin: 22px 0 0;

    line-height: 1.65;
}


/* ==========================================================
   LISTEN
   ========================================================== */

.job-list {
    margin: 0;
    padding-left: 22px;
}

.job-list li {
    margin-bottom: 8px;

    line-height: 1.5;
}


/* ==========================================================
   SEITENLEISTE
   ========================================================== */

.job-sidebar {
    width: 100%;
}

.job-photo {
    overflow: hidden;

    margin-bottom: 16px;

    border-radius: 4px;
}

.job-photo img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 5;

    object-fit: cover;
    object-position: center;
}

.job-sidecard {
    margin-bottom: 16px;
    padding: 20px;

    background: #f7f7f5;

    border: 1px solid #e0e0dc;
    border-radius: 4px;
}

.job-sidecard h3 {
    margin: 0 0 14px;

    font-size: 1.1rem;
}

.job-sidecard ul {
    margin: 0;
    padding-left: 19px;
}

.job-sidecard li {
    margin-bottom: 7px;

    line-height: 1.4;
}

.job-sidecard li:last-child {
    margin-bottom: 0;
}

.job-sidecard-small {
    display: flex;
    flex-direction: column;

    gap: 3px;

    font-size: 0.92rem;
}

.job-sidecard-small strong {
    margin-bottom: 5px;
}


/* ==========================================================
   BEWERBUNGSBEREICH
   ========================================================== */

/*
 * Code2 liegt außerhalb des job-layout.
 *
 * 290px Seitenleiste
 * + 42px Abstand
 * = 332px
 */

.job-cta,
.job-application-form {
    width: calc(100% - 332px);

    box-sizing: border-box;
}

.job-cta {
    margin-top: 8px;
    padding: 26px 28px;

    background: #f5f2ed;

    border: 1px solid #ded8d1;
    border-radius: 4px;
}

.job-cta h2 {
    margin: 0 0 10px;
}

.job-cta p {
    max-width: 720px;

    margin: 0 0 20px;

    line-height: 1.6;
}


/* ==========================================================
   BEWERBUNGSBUTTON
   ========================================================== */

.job-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 0 24px;

    border: 0;
    border-radius: 3px;

    background: var(--fs-button);
    color: #fff;

    font: inherit;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.job-button:hover,
.job-button:focus-visible {
    background: var(--fs-button-hover);
    color: #fff;

    text-decoration: none;

    opacity: 1;
}

.job-button:active {
    transform: translateY(1px);
}

.job-button:focus-visible {
    outline: 2px solid #797a59;
    outline-offset: 3px;
}


/* ==========================================================
   FORMULAR
   ========================================================== */

.job-application-form {
    margin-top: 28px;

    scroll-margin-top: 110px;
}

.job-application-form[hidden],
.job-es-form[hidden],
.job-consent-notice[hidden] {
    display: none !important;
}


/* ==========================================================
   COOKIE-HINWEIS
   ========================================================== */

.job-consent-notice {
    padding: 24px 26px;

    background: #f7f7f5;

    border: 1px solid #ded8d1;
    border-radius: 4px;
}

.job-consent-notice strong {
    display: block;

    margin-bottom: 8px;

    font-size: 1.05rem;
}

.job-consent-notice p {
    margin: 0 0 16px;

    line-height: 1.6;
}

.job-consent-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 18px;

    border: 1px solid var(--fs-button);
    border-radius: 3px;

    color: var(--fs-button);

    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.job-consent-button:hover,
.job-consent-button:focus-visible {
    background: var(--fs-button-soft);
    border-color: var(--fs-button-hover);
    color: var(--fs-button-hover);

    text-decoration: none;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .job-layout {
        grid-template-columns: 1fr;

        gap: 32px;
    }

    .job-sidebar {
        display: grid;

        grid-template-columns: minmax(180px, 280px) 1fr;

        gap: 18px;
        align-items: start;
    }

    .job-photo {
        margin-bottom: 0;
    }

    .job-sidecard {
        margin-bottom: 0;
    }

    .job-sidecard-small {
        grid-column: 2;
    }

    .job-cta,
    .job-application-form {
        width: 100%;
    }
}


/* ==========================================================
   ZWEISPALTIG → EINSPALTIG
   ========================================================== */

@media (max-width: 750px) {

    .job-two-cols {
        grid-template-columns: 1fr;

        gap: 34px;
    }
}


/* ==========================================================
   MOBIL
   ========================================================== */

@media (max-width: 650px) {

    .job-intro {
        margin-bottom: 32px;
    }

    .job-section {
        margin-bottom: 34px;
    }

    .job-benefits {
        grid-template-columns: 1fr;
    }

    .job-benefit {
        padding: 16px 17px;
    }

    .job-sidebar {
        display: block;
    }

    .job-photo {
        margin-bottom: 16px;
    }

    .job-photo img {
        width: 100%;

        aspect-ratio: 4 / 3;

        object-position: center 32%;
    }

    .job-sidecard {
        margin-bottom: 16px;
    }

    .job-cta {
        width: 100%;

        padding: 22px 18px;
    }

    .job-application-form {
        width: 100%;

        margin-top: 22px;
    }

    .job-button,
    .job-consent-button {
        width: 100%;

        box-sizing: border-box;
    }
}
.job-inactive .job-button {
    background: transparent;
    border: 1px solid var(--fs-button);
    color: var(--fs-button) !important;
}

.job-inactive .job-button:hover,
.job-inactive .job-button:focus-visible {
    background: var(--fs-button-soft);
    border-color: var(--fs-button-hover);
    color: var(--fs-button-hover) !important;
}