body.single-jobs [data-personio-item] { background: #eeeee7; }

body.single-jobs .jtl-jobs-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}
@media (max-width: 991px) {
    body.single-jobs .jtl-jobs-grid { grid-template-columns: 1fr; gap: 2rem; }
    body.single-jobs .jtl-jobs-aside { position: static; }
}

body.single-jobs .jtl-jobs-head { margin-bottom: 2.5rem; }
body.single-jobs .jtl-jobs-overline {
    display: block;
    /* Match the current display face used by the page's headings. The eyebrow is
     * rendered as a <span class="h4">, so the .h4 utility maps it to the legacy
     * Inter heading stack while the real h1-h6 elements already use the current
     * face — leaving this one label on the wrong font. Pin it to the same stack
     * as the section/CTA headings so the header reads as one unit. */
    font-family: 'Museo', 'Kurdis', sans-serif;
    color: #2722f8;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}
body.single-jobs .jtl-jobs-title {
    color: #0b1b45;
    font-weight: 800;
    font-size: clamp(32px, 4vw, 40px);
    line-height: 1.15;
    letter-spacing: 0;
    margin: 0 0 1.75rem;
}

body.single-jobs .jtl-jobs-title::after { display: none !important; }
body.single-jobs .jtl-jobs-overline .headline-link,
body.single-jobs .jtl-jobs-title .headline-link { display: none; }

/* The three job CTAs (grid apply pill, infobox link, bottom CTA) now use the
 * reusable button widget — class product-button-group__button--with-icon plus a
 * variant (has-wawi-gradient = primary, is-secondary-neg). Their fill, border,
 * label colour and hover come from the widget stylesheet (single source of
 * truth), so no button appearance is declared here — only per-page layout below.
 * The grid apply pill is a <button>, which shrink-wraps to its content width even
 * as the widget's flex box (form controls size to content on width:auto), so it
 * stays a content-width pill with no width constraint needed here. */

body.single-jobs .jtl-jobs-main h2,
body.single-jobs .jtl-jobs-main h3 {
    color: #0b1b45;
    font-family: 'Museo', 'Kurdis', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 46px;
    letter-spacing: 0.64px;
    margin-top: 2.5rem;
}
body.single-jobs .jtl-jobs-main h2::after,
body.single-jobs .jtl-jobs-main h3::after { display: none !important; }

body.single-jobs .jtl-jobs-main,
body.single-jobs .jtl-jobs-main p,
body.single-jobs .jtl-jobs-main li { color: #0b1b45; }
body.single-jobs .jtl-jobs-main > section > *:first-child,
body.single-jobs .jtl-jobs-main > *:first-child { margin-top: 0; }
body.single-jobs .jtl-jobs-main ul { list-style: none; padding-left: 0; }
body.single-jobs .jtl-jobs-main li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 0.85rem;
    line-height: 28px;
}

body.single-jobs .jtl-jobs-main li::before {
    content: "\2192";
    position: absolute;
    left: 0;
    top: -1px;
    color: #2722f8;
    font-weight: 700;
    font-size: 20px;
}

body.single-jobs .jtl-jobs-aside {
    position: sticky;
    top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
body.single-jobs .jtl-job-card {
    background: #fff;
    border-radius: 32px;
    padding: 2.25rem;
    box-shadow: 0 2px 24px rgba(11, 27, 69, 0.06);
}
body.single-jobs .jtl-job-card__title,
body.single-jobs .jtl-job-card > h3:first-child {
    color: #0b1b45;
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    margin: 0 0 1.5rem;
}

body.single-jobs .jtl-job-card [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
body.single-jobs .jtl-job-card .jtl-card-src-heading { display: none; }

body.single-jobs .jtl-info-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
body.single-jobs .jtl-info-row {
    display: flex;
    gap: 1.3rem;
    align-items: flex-start;
}
body.single-jobs .jtl-info-ic {
    flex: 0 0 32px;
    width: 32px;
    font-size: 24px;
    line-height: 28px;
    color: #0b1b45;
    text-align: center;
}
body.single-jobs .jtl-info-tc {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
body.single-jobs .jtl-info-label {
    color: #0b1b45;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
}
body.single-jobs .jtl-info-val {
    color: #0b1b45;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
}

body.single-jobs .jtl-job-card--benefits .jtl-info-list { gap: 1.15rem; }
body.single-jobs .jtl-job-card--benefits .jtl-info-row { align-items: center; }

body.single-jobs .jtl-job-card--fragen { background: #89d2ff; box-shadow: none; }

body.single-jobs .jtl-job-card--fragen,
body.single-jobs .jtl-job-card--fragen p,
body.single-jobs .jtl-job-card--fragen strong { color: #0b1b45; }
body.single-jobs .jtl-job-card--fragen h3 {
    color: #0b1b45;
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    margin: 0 0 1rem;
}
body.single-jobs .jtl-job-card--fragen a { color: #0b1b45; font-weight: 700; }

body.single-jobs .jtl-jobs-infobox {
    background: #eeeee7;
    padding: 4rem 1.5rem;
}
body.single-jobs .jtl-jobs-infobox__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    gap: 2rem;
    align-items: stretch;
}
body.single-jobs .jtl-jobs-infobox__box {
    flex: 1 1 0;
    min-width: 0;
    background: #0b1b45;
    border-radius: 32px;
    padding: 2.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
}
body.single-jobs .jtl-jobs-infobox__box h3 {
    color: #fff;
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    margin: 0;
}
body.single-jobs .jtl-jobs-infobox__box p {
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    margin: 0;
    max-width: 594px;
}
/* Infobox link: layout only (kept left-aligned in the flex column, small gap
 * above). Appearance = is-secondary-neg widget variant. */
body.single-jobs .jtl-jobs-infobox__btn {
    align-self: flex-start;
    margin-top: 0.5rem;
}
body.single-jobs .jtl-jobs-infobox__img {
    flex: 0 0 416px;
    border-radius: 32px;
    overflow: hidden;
    background-image: url("jp-jobs-infobox.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
body.single-jobs .jtl-jobs-infobox__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 991px) {
    body.single-jobs .jtl-jobs-infobox { padding: 2.5rem 1.5rem; }
    body.single-jobs .jtl-jobs-infobox__inner { flex-direction: column; }
    body.single-jobs .jtl-jobs-infobox__img { flex-basis: auto; height: 260px; }
}

body.single-jobs .jtl-jobs-cta { background: #eeeee7; }
body.single-jobs .jtl-jobs-cta .row { justify-content: center; }
body.single-jobs .jtl-jobs-cta [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.single-jobs .jtl-jobs-cta .col-lg-6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
    max-width: 900px !important;
    margin: 0 auto;
    padding: 2.75rem 1rem !important;
}
body.single-jobs .jtl-jobs-cta .jtl-cta-overline {
    color: #2722f8;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    margin: 0;
}
body.single-jobs .jtl-jobs-cta h4 {
    color: #0b1b45;
    font-family: 'Museo', 'Kurdis', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 46px;
    letter-spacing: 0.64px;
    margin: 0;
}
body.single-jobs .jtl-jobs-cta h4::after { display: none !important; }
body.single-jobs .jtl-jobs-cta .headline-link { display: none; }
body.single-jobs .jtl-jobs-cta p:not(.jtl-cta-overline) {
    color: #0b1b45;
    font-size: 18px;
    line-height: 24px;
    margin: 0;
    max-width: 640px;
}

body.single-jobs .jtl-jobs-cta ul.list-icons {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

body.single-jobs .jtl-jobs-cta ul.list-icons li {
    background: #fff;
    border-radius: 69px;
    box-sizing: border-box;
    height: 56px;
    padding: 0 16px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #0b1b45;
    font-size: 18px;
    line-height: 28px;
}

body.single-jobs .jtl-jobs-cta ul.list-icons li .list-icon {
    position: static !important;
    left: auto !important;
    margin: 0 !important;
    width: auto !important;
    flex: 0 0 auto;
    color: #2722f8 !important;
    font-size: 18px;
}

/* Bottom CTA button: layout only (top gap + wider min-width for this section).
 * Appearance = has-wawi-gradient (primary) widget variant. */
body.single-jobs .jtl-jobs-cta .jtl-cta-apply {
    margin-top: 0.75rem;
    min-width: 320px;
}

body.single-jobs .jtl-jobs-cta .jtl-cta-privacy {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #0b1b45;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.28px;
    text-transform: uppercase;

    text-decoration: none;
}
body.single-jobs .jtl-jobs-cta .jtl-cta-privacy .jtl-cta-privacy__label {
    text-decoration: underline;
}
body.single-jobs .jtl-jobs-cta .jtl-cta-privacy i { font-size: 18px; }

body.single-jobs #header {
    background-color: #eeeee7 !important;
}
body.single-jobs #header::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    margin-left: -50vw !important;
    width: 100vw !important;
    background-color: #eeeee7 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

body.single-jobs .blog-nav {
    background-color: #eeeee7 !important;
}