/*
 * Job list (apiJobsList snippet) - "Offene Stellen" section.
 *
 * Layout after the Figma overview page: filter column on the left, two
 * column card grid on the right; single column on mobile. Colours and fonts
 * follow the site (primary #726AC6, text #4A4A49, --primary-font for
 * headings, --secondary-font for copy). Adjust here once the final
 * typography of the career site is settled.
 */

.jobs-section {
    --jobs-accent: #726AC6;
    --jobs-text: #4A4A49;
    --jobs-muted: #7a7a79;
    --jobs-line: #d9d9d9;
    --jobs-gap: 32px;
    /* Where the filter column comes to rest: below the fixed site header
       (73px) plus a gap. */
    --jobs-sticky-top: 97px;

    display: grid;
    grid-template-columns: minmax(500px, 1fr) 1fr;
    gap: var(--jobs-gap);
    align-items: start;
    color: var(--jobs-text);
    font-family: var(--secondary-font, Tahoma, sans-serif);
}

.jobs-section--empty {
    display: block;
}

/* ---------- Filters ----------

   The filter column stays on screen while the job cards scroll past it.
   Two things are needed for that:

   - the column has to be as tall as the whole row, because a sticky child
     can only travel inside its own parent. The grid is aligned to the
     start, which would otherwise shrink it to the height of its content;
   - the list of filters is taller than a browser window even on a large
     screen (about 1550px against 945px of visible area, and the number of
     departments comes from the job system), so the block scrolls inside
     itself when it does not fit. The scrollbar only shows when needed.
*/

.jobs-filters {
    align-self: stretch;
}

.jobs-filters__form {
    position: sticky;
    top: var(--jobs-sticky-top);
    max-height: calc(100vh - var(--jobs-sticky-top) - 24px);
    overflow-y: auto;
    padding-right: 10px;
}

/* "Filtermöglichkeiten" - only part of the mobile design. */
.jobs-filters__title {
    display: none;
}

.jobs-filter {
    margin: 0 0 70px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.jobs-filter__legend {
    display: block;
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
}

/* On desktop the toggle is just a heading: no border, no pointer, and the
   +/- indicator stays hidden. It only becomes a real button on mobile. */
.jobs-filter__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
}

.jobs-filter__title {
    display: block;
    font-size: 2.25rem;
    font-weight: 500;
    letter-spacing: .02em;
}

/* The desktop design writes the group titles with a colon. */
.jobs-filter__title::after {
    content: ":";
}

.jobs-filter__indicator {
    display: none;
}

.jobs-filter__option {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 20px;
    font-size: 1.75rem;
    line-height: 1.4;
    cursor: pointer;
}

/* Small square checkbox with the brand colour, as drawn in both designs. */
.jobs-filter__option input {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 1.5px solid var(--jobs-accent);
    border-radius: 0;
    background: #fff;
    cursor: pointer;
}

.jobs-filter__option input:checked {
    background: var(--jobs-accent);
}

.jobs-filter__option input:focus-visible {
    outline: 2px solid var(--jobs-accent);
    outline-offset: 2px;
}

.jobs-filters__reset {
    display: inline-block;
    padding: 9px 0;
    background-color: transparent;
    transition: all ease .5s;
    font: 400 2.25rem/110% var(--primary-font);
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    border-top: 2px solid #4A4A49;
    border-bottom: 2px solid #4A4A49;
    position: relative;
    cursor: pointer;
}

.jobs-filters__reset::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #4A4A49;
    opacity: 0;
    transition: opacity ease .5s;
}

.jobs-filters__reset::after
{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #4A4A49;
    opacity: 0;
    transition: opacity ease .5s;
}

.jobs-filters__reset:hover::before
{
    opacity: 1;
}

.jobs-filters__reset:hover::after
{
    opacity: 1;
}

.jobs-filters__reset[hidden] {
    display: none;
}

/* ---------- Results ---------- */

.jobs-results {
    min-width: 0;
}

.jobs-results__count {
    margin: 0 0 18px;
    font-size: 1.5rem;
    color: var(--jobs-muted);
}

.jobs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px 20px;
}

.jobs-empty {
    margin: 24px 0;
    font-size: 1rem;
}

.jobs-empty[hidden] {
    display: none;
}

/* ---------- Card ---------- */

.jobs-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.jobs-card[hidden] {
    display: none;
}

.jobs-card__image {
    display: block;
    position: relative;
    aspect-ratio: 411 / 511;
    overflow: hidden;
    background: #ececec;
}

.jobs-card__image picture,
.jobs-card__image img {
    display: block;
    width: 100%;
    height: 100%;
}

.jobs-card__image img {
    object-fit: cover;
    transition: transform .6s ease !important;
}

.jobs-card:hover .jobs-card__image img {
    transform: scale(1.04);
}

.jobs-card__image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.jobs-card__body {
    padding-top: 24px;
}

.jobs-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 20px;
}

.jobs-card__badge {
    display: inline-block;
    padding: 3px 10px;
    background: var(--jobs-accent);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1.3;
    letter-spacing: .02em;
    /*white-space: nowrap;*/
}

.jobs-card__title {
    margin: 0 0 20px;
    font-family: var(--secondary-font, Arial, sans-serif);
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: .02em;
}

.jobs-card__title a {
    color: inherit;
    text-decoration: none;
}

.jobs-card__title a:hover,
.jobs-card__title a:focus-visible {
    color: var(--jobs-accent);
}

.jobs-card__title-suffix {
    font-size: 1.75rem;
    color: var(--jobs-muted);
    white-space: nowrap;
}

.jobs-card__teaser {
    margin: 0 0 12px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.jobs-card__meta {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jobs-card__meta-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 12px;
    font-size: 1.75rem;
    line-height: 1.35;
    padding: 0 !important;
}

.jobs-card__meta-item::before
{
    content: none !important;
}

.jobs-card__meta-item svg {
    flex: 0 0 auto;
    color: var(--jobs-accent);
}

.jobs-card--highlighted .jobs-card__image {
    outline: 2px solid var(--jobs-accent);
    outline-offset: -2px;
}

/* ---------- Responsive ---------- */

@media(max-width: 1500px)
{
    .jobs-section
    {
        grid-template-columns: minmax(300px, 35%) 65%;
    }

    .jobs-filter__title
    {
        font-size: 1.75rem;
    }

    .jobs-filter__option
    {
        font-size: 1.125rem;
    }

}

@media (max-width: 1025px) {
    .jobs-section {
        grid-template-columns: 1fr;
        padding-right: 48px;
    }

    /* ---------- Mobile: filter accordion (Figma "Karriereplattform
       Präsentation 3 Mobile"). "Filtermöglichkeiten" on top, then one row
       per group with a + / - toggle, dark rules between the rows, the
       first group open by default. ---------- */

    /* One column below this width: the accordion simply follows the page,
       without sticking or scrolling inside itself. */
    .jobs-filters__form {
        position: static;
        display: block;
        margin-bottom: 40px;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .jobs-filters__title {
        display: block;
        margin: 0 0 25px !important;
        font-size: 2rem;
        font-weight: 500;
        line-height: 1.3;
    }

    .jobs-filter {
        margin: 0;
    }

    .jobs-filter:last-of-type {
        border-bottom: 2px solid var(--jobs-text);
    }

    .jobs-filter__legend {
        border-top: 2px solid var(--jobs-text);
        margin: 0;
        padding: 0 17px;
    }

    .jobs-filter__toggle {
        padding: 18px 0;
        cursor: pointer;
    }

    .jobs-filter__title {
        font-size: 1.875rem;
        font-weight: 400;
        line-height: 1.4;
    }

    .jobs-filter__title::after {
        content: none;
    }

    /* + when closed, - when open. Drawn with a plain glyph, the design
       uses the same thin strokes as the text. */
    .jobs-filter__indicator {
        display: block;
        flex: 0 0 auto;
        width: 24px;
        font-size: 2.3rem;
        line-height: 1;
        text-align: right;
    }

    .jobs-filter__indicator::before {
        content: "+";
    }

    .jobs-filter__toggle[aria-expanded="true"] .jobs-filter__indicator::before {
        content: "\2212";
    }

    .jobs-filter__options {
        padding: 4px 17px 16px;
    }

    /* js/jobs.js keeps this class in step with aria-expanded. Without
       JavaScript no class is ever set and every group stays open. */
    .jobs-filter.is-collapsed .jobs-filter__options {
        display: none;
    }

    .jobs-filter__option {
        font-size: 1.5rem;
        gap: 12px;
        margin: 0 0 6px;
    }

    .jobs-filter__option:last-child {
        margin-bottom: 0;
    }

    .jobs-filter__option input {
        width: 18px;
        height: 18px;
    }

    .jobs-filters__reset {
        margin-top: 20px;
    }

    .jobs-grid
    {
        gap: 40px 20px;
    }

    .jobs-card__badge
    {
        font-size: 1.625rem;
    }

    .jobs-card__title
    {
        font-size: 1.625rem;
    }

    .jobs-card__title-suffix
    {
        font-size: 1.125rem;
    }

    .jobs-card__meta-item
    {
        font-size: 1.5rem;
    }

}

@media (max-width: 650px) {
    .jobs-section
    {
        --jobs-gap: 10px;
        padding-right: 17px;
    }

    .jobs-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .jobs-filters__title
    {
        font-size: 1.5rem;
    }

    .jobs-filter__title{
        font-size: 1.438rem;
    }

    .jobs-filter__indicator
    {
        font-size: 1.25rem;
    }

    .jobs-filter__options
    {
        padding-top: 0;
    }

    .jobs-filter__option
    {
        font-sizE: 1.25rem;
    }

    .jobs-filter__option input
    {
        width: 14px;
        height: 14px;
    }

    .jobs-results__count
    {
        font-size: 1.25rem;
    }

    .jobs-filters__reset
    {
        padding-top: 7px;
        padding-bottom: 7px;
    }

}

@media(max-width: 450px)
{
    .jobs-filters__reset
    {
        font-size: 1.5rem;
    }

}

/* ==========================================================================
   Job detail page (apiJobDetail snippet)

   The page is built from the regular content elements, so almost everything
   is already styled by content.css / responsive.css. Only the parts that do
   not exist as an element are defined here: the meta row under the title,
   the share icons and a few spacing corrections.
   ========================================================================== */
/*
.art_element.job_detail_head .art_headline h1 .job_title_suffix {
    font-size: .5em;
    letter-spacing: normal;
    white-space: nowrap;
}
*/
/* ---------- Long titles: hyphenate German compounds at syllable breaks ---------- */

.art_element.job_detail_head .art_headline h1.job_title,
.jobs-card__title {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    overflow-wrap: break-word;
}

/* ---------- Meta row (location, department, employment, entry) ---------- */

.art_element.job_detail_head ul.job_meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 50px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.art_element.job_detail_head ul.job_meta li.job_meta_item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    font: 500 2.5rem/130% var(--secondary-font);
    text-align: left;
}

.art_element.job_detail_head ul.job_meta li.job_meta_item::before {
    content: none;
}

/* ---------- Divider above the contact block ---------- */

.art_element.job_detail_divider > .art_element_c {
    height: 3px;
}

/* ---------- Further offers ---------- */

.art_element.job_detail_more .job_overview_link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- Share links ---------- */

.art_element.job_detail_share .art_social_links {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.art_element.job_detail_share .art_social_links[hidden] {
    display: none;
}

/* Shown by js/jobs.js on touch devices instead of the icon row: it opens
   the native share sheet of the phone. Carries the same icon weight as the
   three links it replaces. */
.art_element.job_detail_share .jobs-share-native {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    transition: opacity ease .3s;
}

.art_element.job_detail_share .jobs-share-native:hover,
.art_element.job_detail_share .jobs-share-native:focus-visible {
    opacity: .7;
}

.art_element.job_detail_share .jobs-share-native img {
    width: auto;
    height: 27px;
}

.art_element.job_detail_share .jobs-share-native[hidden] {
    display: none;
}

.art_element.job_detail_share .art_social_links a {
    display: inline-flex;
    transition: opacity ease .3s;
}

.art_element.job_detail_share .art_social_links a:hover,
.art_element.job_detail_share .art_social_links a:focus-visible {
    opacity: .7;
}

.art_element.job_detail_share .art_social_links img {
    width: auto;
    height: 27px;
}

/* ---------- Gallery ---------- */

/* A job with a single image is shown as a still picture instead of a
   slider, so it gets the full width rather than a grid column. */
.art_element.art_gallery.job_detail_gallery.is-single .gal_item {
    width: 100%;
}

@media (max-width: 1025px) {

    .art_element.job_detail_head ul.job_meta {
        gap: 10px 28px;
    }

    .art_element.job_detail_head ul.job_meta li.job_meta_item {
        font-size: 1.5rem;
        gap: 10px;
    }

    .art_element.job_detail_head ul.job_meta .job_meta_icon {
        width: auto;
        height: 18px;
    }

}

@media (max-width: 650px) {

    .art_element.job_detail_head ul.job_meta {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .art_element.job_detail_head ul.job_meta li.job_meta_item {
        font-size: 1.375rem;
    }

    .art_element.job_detail_share .art_social_links img {
        height: 24px;
    }

}