/* ==================================================================================================
   Karriere-Seiten (Layout "Karriere", body.karriere)
   Umsetzung des Figma-Designs auf das bestehende Raster: Wrapper 45px, Inhalt 80px Innenabstand. Abstände in em (wachsen und schrumpfen mit der Schrift),
   in px bleiben Linien, Grafiken, Breiten aus dem Figma und die seitlichen Abstände des Site-Rasters.
   Wird nur im Layout "Karriere" geladen (Stellenangebot, Kurzbewerbung gesendet).
   ================================================================================================== */

.karriere {
    --job-text: #6f6f6c;
    --job-line: #d1d1ca;
    --job-dark: #2b2b2a;
    --job-red: #e3000f;
    --job-grey: #f3f3f3;
    /* Fließende Schriftgrößen: zwischen 375px und 1200px Viewport linear vom Mobil- zum Designwert */
    --job-fluid: (100vw - 375px) / 825;
    --job-fs-h1: clamp(28px, calc(28px + 16 * var(--job-fluid)), 44px);
    --job-fs-h2: clamp(24px, calc(24px + 8 * var(--job-fluid)), 32px);
    --job-fs-lead: clamp(20px, calc(20px + 4 * var(--job-fluid)), 24px);
    --job-fs-h3: clamp(18px, calc(18px + 2 * var(--job-fluid)), 20px);
    --job-fs-body: clamp(15px, calc(15px + 1 * var(--job-fluid)), 16px);
    --job-fs-step: clamp(41.6px, calc(41.6px + 10.4 * var(--job-fluid)), 52px);
    /* Abstände in den Sektions-Grids, relativ zur Schrift; Spalten wie im Design 24px */
    --job-gap-row: 2.5em;
    --job-gap-col: 1.5em;
    /* Seitlicher Innenabstand der Sektionen wie das Raster von main.css (80/50/30px), aber mit der Schrift */
    --job-side: 5em;
}

/* Sprungziele (#gruende, #bewerben): sanft scrollen und unter dem fixierten Header (gescrollt 88px) enden */
@media (prefers-reduced-motion: no-preference) {
    html:has(body.karriere) {
        scroll-behavior: smooth;
    }
}
.karriere #main .mod_article {
    scroll-margin-top: 88px;
}
/* Die Karte steht oben im Hero: so landet die Seite ganz oben, wo der Header ausgeklappt ist (128px) */
.karriere .job-apply__header {
    scroll-margin-top: 200px;
}

/* Typografie ------------------------------------------------------------------------------------- */
.karriere #Banner,
.karriere #main {
    font-size: var(--job-fs-body);
    line-height: 1.5;
}
.karriere h1 {
    margin: 0 0 0.4545em;
    font: 800 var(--job-fs-h1)/1.2 'Exo 2';
    color: var(--job-red);
    text-transform: none;
}
.karriere h2 {
    margin: 0 0 0.625em;
    font: 700 var(--job-fs-h2)/1.1875 'Exo 2';
    color: var(--job-dark);
    text-transform: none;
}
.karriere h3 {
    margin: 0 0 0.6em;
    font: 700 var(--job-fs-h3)/1.4 'Exo 2';
    color: var(--job-dark);
}
.karriere .kicker {
    margin-bottom: 1.4286em;
    font: italic 800 0.875em/1.2 'Exo 2';
    color: var(--secondary-color);
    text-transform: uppercase;
}
.karriere .intro {
    margin-bottom: 0.1667em;
    font: 700 var(--job-fs-lead)/1.3333 'Exo 2';
    color: var(--job-dark);
}
.karriere .content-text p,
.karriere .rte p {
    margin-bottom: 1.25em;
    color: var(--job-text);
}
.karriere .content-text .kicker,
.karriere .content-text .intro {
    color: inherit;
}
/* Die Absatz-Regel oben gewinnt gegen .kicker und .intro: ihr Abstand in em hängt an deren Schriftgröße, darum
   eigene Werte (20px) */
.karriere .content-text .kicker {
    margin-bottom: 1.4286em;
    color: var(--secondary-color);
}
.karriere .content-text .intro {
    margin-bottom: 0.8333em;
}

/* Kreis-Icons als SVG-Maske in der Textfarbe (Figma: Bootstrap-Icons im Outline-Stil), Pfeil: "arrow-right-circle" */
.karriere .text-link::after,
.karriere .content-hyperlink a::after,
.karriere .job-form .submit::after,
.karriere .job-accordion .handorgel__header__button::after {
    content: '';
    width: 20px;
    height: 20px;
    flex: none;
    /* Nicht FontAwesome aus main.css (a:after): Für die Zeilenhöhe lädt der Browser sonst die 100 KB der Brands-Schrift */
    font-family: inherit;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
}

/* Textlink mit Pfeil */
.karriere .text-link {
    display: inline-flex;
    align-items: center;
    gap: 1em;
    padding: 0.5em 0;
    border-bottom: 1px solid currentColor;
    color: var(--job-dark);
    line-height: 1.5;
}
.karriere .text-link:hover {
    color: var(--job-red);
}

/* Buttons (Hyperlink-Element und Formular-Submit) */
.karriere .content-hyperlink a,
.karriere .job-form .submit {
    display: inline-flex;
    height: auto;
    align-items: center;
    justify-content: center;
    gap: 2em;
    padding: 1em 0.75em;
    border: 0;
    background-color: var(--job-red);
    font: 800 1em/1.25 'Exo 2';
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-color 0.3s ease-out,
        color 0.3s ease-out;
}
.karriere .content-hyperlink.yellow a {
    background-color: var(--primary-color);
    color: var(--job-dark);
}
.karriere .content-hyperlink a:hover,
.karriere .content-hyperlink.yellow a:hover,
.karriere .job-form .submit:hover {
    background-color: var(--job-dark);
    color: #fff;
}

/* Aufzählung mit Haken-Icons (Hero-Teaser, Stellen-Karten), Icon wie im Design: Bootstrap "check2-circle" */
.karriere .job-hero__teaser ul,
.karriere .job-card__teaser ul {
    display: grid;
    gap: 1em;
    margin: 0;
    padding: 0;
    list-style: none;
}
.karriere .job-hero__teaser li,
.karriere .job-card__teaser li {
    position: relative;
    padding-left: 1.8125em;
    color: var(--job-dark);
}
/* Der Kreis beginnt 2px innerhalb des Icons, darum steht es wie im Design 3px vor der Inhaltskante */
.karriere .job-hero__teaser li::before,
.karriere .job-card__teaser li::before {
    content: '';
    position: absolute;
    left: -0.1875em;
    top: 0;
    width: 1.5em;
    height: 1.5em;
    background-color: var(--job-red);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0'/%3E%3Cpath d='M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
}

/* Meta-Zeile "(m/w/d) | Ort | Vollzeit": Der Trenner steht in der Lücke links vom Element,
   am Zeilenanfang liegt er außerhalb und wird abgeschnitten */
.karriere .job-hero__meta,
.karriere .job-card__meta {
    --job-meta-gap: 2.0625em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em var(--job-meta-gap);
    overflow: hidden;
    color: var(--job-text);
}
.karriere .job-hero__meta span,
.karriere .job-card__meta span {
    position: relative;
}
.karriere .job-hero__meta span::before,
.karriere .job-card__meta span::before {
    content: '|';
    position: absolute;
    right: 100%;
    width: var(--job-meta-gap);
    text-align: center;
}

/* Sektionen ------------------------------------------------------------------------------------- */
.karriere #main .mod_article {
    margin-top: 0;
}
/* Der Hero ist weiß wie die Artikel, darum trennt ihn der übliche 15px-Abstand der Site vom ersten Artikel */
.karriere #main .mod_article:first-child {
    margin-top: 15px;
}
.karriere #main .mod_article > .width > .inside {
    padding: 5em var(--job-side) 6.25em;
}
.karriere #main .mod_article.divider-top > .width > .inside {
    padding-top: 0;
}
.karriere .divider-top > .width > .inside::before {
    content: '';
    display: block;
    grid-column: 1 / -1;
    height: 30px;
    /* Wie im Design 101px (6.3125em) von der Linie bis zum Inhalt, die Marke ist 30px hoch */
    margin-bottom: calc(6.3125em - 30px);
    /* Die Marke hängt wie im Design unter der Linie: Linie oben, Marke direkt darunter */
    background:
        url('/files/layout/divider-mark.svg') center 1px / 40px 29px no-repeat,
        linear-gradient(var(--job-line), var(--job-line)) center top / 100% 1px no-repeat;
}
/* In den Grid-Sektionen kommt der Zeilenabstand hinzu */
.karriere :is(.job-benefits, .job-details, .job-steps, .job-about).divider-top > .width > .inside::before {
    margin-bottom: calc(6.3125em - 30px - var(--job-gap-row));
}

/* Die Sektionen ordnen ihre Elemente per Grid an, der Standard-Abstand zwischen Elementen entfällt dort */
.karriere .job-hero > .width > .inside > div + div,
.karriere .job-benefits > .width > .inside > div + div,
.karriere .job-details > .width > .inside > div + div,
.karriere .job-cta > .width > .inside > div + div,
.karriere .job-steps > .width > .inside > div + div,
.karriere .job-about > .width > .inside > div + div,
.karriere .job-success > .width > .inside > div + div,
.karriere .job-list-section > .width > .inside > div + div {
    margin-top: 0;
}
.karriere .section-header {
    grid-column: 1 / -1;
}
.karriere .section-header .rte > :last-child {
    margin-bottom: 0;
}

/* Leere Elementgruppen belegen keine Grid-Zelle */
.karriere .content-element-group:not(:has(*)) {
    display: none;
}

/* Hero ------------------------------------------------------------------------------------------- */
.karriere .job-hero {
    background-color: #fff;
}
.karriere .job-hero > .width > .inside {
    display: grid;
    /* Die Textspalte ist mindestens so breit wie ihr längstes Wort (Stellentitel), sonst läuft der Titel auf dem
       Tablet unter die Karte; schmaler wird dann die Karte */
    grid-template-columns: minmax(auto, 1fr) minmax(0, 526px);
    grid-template-rows: auto 1fr;
    column-gap: 8%;
    align-items: start;
    padding: 5em var(--job-side);
}
.karriere .job-hero__text {
    grid-row: 1 / 3;
    max-width: 636px;
}
.karriere .job-hero__intro {
    margin-bottom: 0.1667em;
    font: 700 var(--job-fs-lead)/1.3333 'Exo 2';
    color: var(--job-dark);
}
.karriere .job-hero__title {
    margin-bottom: 0.5455em;
}
.karriere .job-hero__meta {
    margin-bottom: 2.75em;
}
.karriere .job-hero__teaser ul {
    margin-bottom: 2.75em;
    padding-bottom: 2.75em;
    border-bottom: 1px solid var(--job-line);
}
.karriere .job-hero__teaser h3 {
    margin-bottom: 0.8333em;
    font-size: var(--job-fs-lead);
    line-height: 1.3333;
}
.karriere .job-hero__more {
    margin: 0;
}

/* Kurzbewerbung: Kopf (Text-Element) und Formular bilden zusammen die graue Karte */
.karriere .job-apply__header,
.karriere .job-hero .ce_form {
    grid-column: 2;
    box-sizing: border-box;
    background-color: var(--job-grey);
}
.karriere .job-apply__header {
    grid-row: 1;
    position: relative;
    /* Oben fest in px: darunter hängt die Fahne, eine Grafik in px */
    padding: 40px 2em 0;
    border-top: 4px solid var(--job-red);
}
/* Fahne hängt wie im Design unter der Linie: gedreht 23 x 27px groß, links 30px, oben 3px in der Linie */
.karriere .job-apply__header::before {
    content: '';
    position: absolute;
    left: 28.5px;
    top: 0.6px;
    width: 24.35px;
    height: 19.35px;
    background: url('/files/layout/card-flag.svg') center / 100% 100% no-repeat;
    transform: rotate(100deg);
}
.karriere .job-apply__header h2 {
    margin-bottom: 0;
    font-size: var(--job-fs-lead);
    line-height: 1.3333;
}
.karriere .job-apply__header p {
    color: var(--job-dark);
}
.karriere .job-hero .ce_form {
    grid-row: 2;
    padding: 1.25em 2em 2em;
}

/* Formular */
.karriere .job-form .formbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}
.karriere .job-form .widget {
    grid-column: 1 / -1;
    margin: 0;
}
.karriere .job-form .widget.half {
    grid-column: auto;
    display: flex;
    flex-direction: column;
}
/* Bricht die Fehlermeldung nur in einer Spalte um, stehen die Eingabefelder trotzdem auf einer Linie */
.karriere .job-form .widget.half .text {
    margin-top: auto;
}
.karriere .job-form label {
    display: block;
    margin-bottom: 0.3333em;
    font-size: 0.75em;
    line-height: 1.3333;
    color: var(--job-dark);
}
.karriere .job-form label .mandatory {
    color: var(--job-red);
}
.karriere .job-form .text {
    width: 100%;
    height: 3.125em;
    margin: 0;
    padding: 0.8125em 0.75em;
    border: 1px solid var(--job-line);
    background-color: #fff;
    font: 16px/1.375 open_sansregular;
    color: var(--job-dark);
}
.karriere .job-form .text::placeholder {
    color: var(--job-text);
}
.karriere .job-form .text:hover,
.karriere .job-form .text:focus {
    border-color: var(--job-dark);
}
.karriere .job-form .text.error {
    border-color: var(--job-red);
}
.karriere .job-form p.error {
    margin: 0 0 0.3333em;
    font-size: 0.75em;
    line-height: 1.3333;
}
.karriere .job-form .widget-explanation {
    margin-top: 0.25em;
}
.karriere .job-form .widget-explanation p {
    margin: 0;
    font-size: 0.75em;
    line-height: 1.3333;
    color: var(--job-dark);
}
.karriere .job-form .widget-explanation a {
    color: inherit;
    text-decoration: underline;
}
.karriere .job-form .widget-altcha:not(:has(altcha-widget[floating])) {
    margin-top: 0.25em;
}
/* Unsichtbares ALTCHA ohne eigene Grid-Zeile, sonst verdoppelt sich die Lücke vor dem Button.
   Mit Fehlermeldung braucht es die Zeile, sonst liegt die Meldung oben links über dem Formular. */
.karriere .job-form .widget-altcha.altcha-hidden:not(.error) {
    position: absolute;
}
/* Wie im Design 20px zum Hinweistext */
.karriere .job-form .widget-submit {
    margin-top: 0.25em;
}
.karriere .job-form .submit {
    width: 100%;
    justify-content: space-between;
    gap: 0.625em;
    text-align: left;
}
/* Loader wie in der Basis-Website, statt des Pfeils und gleich groß, damit der Button nicht springt. Sendet
   von der ALTCHA-Prüfung bis zur Weiterleitung: Contao deaktiviert den Button und lässt ihn bei Erfolg deaktiviert. */
.karriere .job-form:has(.altcha[data-state='verifying']) .submit,
.karriere .job-form[data-ajax-form='loading'] .submit,
.karriere .job-form .submit:disabled {
    cursor: progress;
}
.karriere .job-form:has(.altcha[data-state='verifying']) .submit::after,
.karriere .job-form[data-ajax-form='loading'] .submit::after,
.karriere .job-form .submit:disabled::after {
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    background: none;
    mask: none;
    animation: job-submit-spin 1s infinite linear;
}
@keyframes job-submit-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Vorteile (4 Spalten) --------------------------------------------------------------------------- */
.karriere .job-benefits > .width > .inside {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--job-gap-row) var(--job-gap-col);
}
.karriere .benefit {
    padding-right: 1.25em;
    border-right: 1px solid var(--job-line);
}
.karriere .benefit:last-child {
    border-right: 0;
}
.karriere #main .benefit figure {
    width: 80px;
    height: 80px;
    margin: 0 0 0.75em;
}
.karriere .benefit img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.karriere .benefit h3 {
    margin-bottom: 0.6em;
}
.karriere .benefit p {
    margin-bottom: 0;
}

/* Die Stelle: Einleitung links, Akkordeon rechts ------------------------------------------------- */
.karriere .job-details > .width > .inside {
    display: grid;
    grid-template-columns: minmax(0, 526fr) minmax(0, 746fr);
    gap: var(--job-gap-row) var(--job-gap-col);
    align-items: start;
}
.karriere .job-details__intro .rte > :last-child {
    margin-bottom: 0;
}
.karriere .job-accordion.content-accordion {
    border-bottom: 1px solid var(--job-line);
}
.karriere .job-accordion .handorgel__header {
    margin: 0;
}
.karriere .job-accordion .handorgel__header:not(:first-child) {
    border-top: 1px solid var(--job-line);
}
.karriere .job-accordion .handorgel__header__button {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6em;
    padding: 1.4em 0;
    border: 0;
    background: none;
    font: 700 var(--job-fs-h3)/1.4 'Exo 2';
    color: var(--job-dark);
    /* Gleicher Verlauf wie die Höhe des Inhalts, sonst springt die Gesamthöhe beim Öffnen */
    transition: padding-bottom 0.4s ease;
}
/* Titel zu Text 20px wie im Design. aria-expanded wechselt sofort, --open beim Schließen erst nach der Animation */
.karriere .job-accordion .handorgel__header__button[aria-expanded='true'] {
    padding-bottom: 1em;
}
/* Kreis und Plus in einer Maske, nicht als Rahmen mit Verläufen: Den Rahmen rundet der Browser auf Gerätepixel,
   Verläufe nicht, bei 125 % oder 150 % Skalierung saß das Plus dann neben der Mitte */
.karriere .job-accordion .handorgel__header__button::after {
    margin-top: 4px;
    background-color: var(--job-red);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='10' cy='10' r='9.25'/%3E%3Cpath d='M10 5.5v9M5.5 10h9'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
    transition: transform 0.4s ease-out;
}
.karriere .job-accordion .handorgel__header--open .handorgel__header__button::after {
    transform: rotate(45deg);
}
.karriere .job-accordion .handorgel__content,
.karriere .job-accordion .handorgel__content--open {
    border: 0;
    background: none;
    /* Öffnen und Schließen gleich lang und ohne Verzögerung, sonst springt die Gesamthöhe beim Wechsel */
    transition: height 0.4s ease;
}
.karriere .job-accordion .handorgel__content__inner {
    padding: 0 0 1.75em;
    color: var(--job-text);
}
.karriere .job-accordion .handorgel__content__inner ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Kleiner Punkt wie im Design statt der Standard-Aufzählung: Punkt 10px, Text 24px eingerückt (bei 16px Schrift) */
.karriere .job-accordion .handorgel__content__inner li {
    position: relative;
    padding-left: 1.5em;
}
.karriere .job-accordion .handorgel__content__inner li::before {
    content: '';
    position: absolute;
    left: 0.625em;
    top: 0.5625em;
    width: 0.25em;
    height: 0.25em;
    border-radius: 50%;
    background-color: currentColor;
}
.karriere .job-accordion .handorgel__content__inner li + li {
    margin-top: 0.25em;
}
.karriere .job-accordion .handorgel__content__inner > :last-child {
    margin-bottom: 0;
}

/* Band: Bild links, dunkle Fläche mit Text und Button rechts ------------------------------------- */
/* Mit #main, sonst gewinnt der Artikel-Innenabstand der Site (#main .mod_article .inside) */
.karriere #main .job-cta > .width > .inside {
    display: grid;
    grid-template-columns: 49fr 51fr;
    /* Die leeren Rahmenzeilen nehmen die Höhe auf, die das Bild vorgibt: Text und Button stehen vertikal mittig */
    grid-template-rows: 1fr auto auto 1fr;
    padding: 0;
    background-color: var(--job-dark);
}
.karriere .job-cta__image {
    grid-row: 1 / -1;
    grid-column: 1;
}
.karriere #main .job-cta__image figure,
.karriere #main .job-cta__image picture,
.karriere #main .job-cta__image img {
    height: 100%;
    margin: 0;
}
.karriere .job-cta__image img {
    width: 100%;
    object-fit: cover;
}
.karriere .job-cta__text {
    grid-row: 2;
    grid-column: 2;
    padding: 3.75em 3.75em 0 6.875em;
}
.karriere .job-cta__text .text-wrapper {
    max-width: 526px;
}
.karriere .job-cta__text .kicker {
    color: var(--primary-color);
}
.karriere .job-cta__text h2,
.karriere .job-cta__text p {
    color: #fff;
}
.karriere .job-cta .content-hyperlink {
    grid-row: 3;
    grid-column: 2;
    padding: 3.1875em 3.75em 3.75em 6.875em;
}
/* Auf der dunklen Fläche verschwände der dunkle Hover der Buttons, darum hier grün */
.karriere .job-cta .content-hyperlink a:hover {
    background-color: var(--secondary-color);
}

/* So geht es weiter (3 nummerierte Schritte) ---------------------------------------------------- */
.karriere .job-steps > .width > .inside {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--job-gap-row) var(--job-gap-col);
    counter-reset: step;
}
.karriere .step {
    padding-right: 1.25em;
    border-right: 1px solid var(--job-line);
    counter-increment: step;
}
.karriere .step:last-child {
    border-right: 0;
}
.karriere .step::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    /* Wie im Design mittig in einem 80px-Quadrat (mobil 64px), so groß wie die Icons der Vorteile */
    width: 1.5385em;
    height: 1.5385em;
    box-sizing: border-box;
    margin-bottom: 0.2308em;
    padding-top: 0.1154em;
    font: 700 var(--job-fs-step)/1.3077 'Exo 2';
    text-align: center;
    color: var(--job-red);
}
.karriere .step p {
    margin-bottom: 0;
}

/* Was wir bewegen: Text links, Bild rechts ------------------------------------------------------- */
.karriere .job-about > .width > .inside,
.karriere .job-success > .width > .inside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--job-gap-row) var(--job-gap-col);
    align-items: start;
}
.karriere .job-about__text .rte > :last-child,
.karriere .job-success__text .rte > :last-child {
    margin-bottom: 0;
}
.karriere #main .job-about__image figure,
.karriere #main .job-success__image figure {
    margin: 0;
}
.karriere .job-about__image img,
.karriere .job-success__image img {
    width: 100%;
}

/* Stellen-Liste (Karriere-Übersicht) ------------------------------------------------------------- */
.karriere .job-list-section > .width > .inside {
    display: grid;
    gap: var(--job-gap-row);
}
.karriere .job-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--job-gap-col);
}
.karriere .job-list .rte {
    grid-column: 1 / -1;
}
.karriere .job-card {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    padding: 2em;
    border: 1px solid var(--job-line);
    border-top: 4px solid var(--job-red);
    background-color: #fff;
}
.karriere .job-card__title {
    margin: 0;
    font: 700 var(--job-fs-lead)/1.3333 'Exo 2';
}
.karriere .job-card__title a {
    color: var(--job-dark);
}
.karriere .job-card__title a:hover {
    color: var(--job-red);
}
.karriere .job-card__meta,
.karriere .job-card__link {
    margin: 0;
}
.karriere .job-card__link {
    margin-top: auto;
}

/* Kurzbewerbung gesendet ------------------------------------------------------------------------- */
/* Wie im Design Text 526px und Bild 636px breit, die Lücke dazwischen (bei 1296px Inhalt 134px) wächst mit */
.karriere .job-success > .width > .inside {
    grid-template-columns: minmax(0, 526px) minmax(0, 636px);
    justify-content: space-between;
    align-items: center;
}
.karriere .job-success__text h1 {
    margin-bottom: 0.5455em;
}
.karriere .job-success__text p {
    color: var(--job-dark);
}

/* Inhaltsbreite --------------------------------------------------------------------------------- */
/* Inhalt so schmal wie in den Figma-Frames: 1296 von 1520px, d. h. 112px statt 80px Rand, auf breiteren
   Bildschirmen bleibt er 1296px breit. Die Navigation zieht mit, der Footer behält die Breite der Site. */
@media screen and (min-width: 1201px) {
    .karriere #main-nav,
    .karriere .job-hero > .width > .inside,
    .karriere #main .mod_article:not(.job-cta) > .width > .inside {
        padding-right: max(var(--job-side), (100% - 1296px) / 2);
        padding-left: max(var(--job-side), (100% - 1296px) / 2);
    }
    /* Logo wie im Design 32px innerhalb der Inhaltskante, gescrollt bündig (Site: 113px bzw. 80px) */
    .karriere #logo {
        right: calc(max(80px, (100% - 1296px) / 2) + 32px);
    }
    .karriere #header.smaller #logo {
        right: max(80px, (100% - 1296px) / 2);
    }
}

/* Stellenangebot (Seitenklasse "stellenangebot") ------------------------------------------------ */
/* Hero grau wie im Design, die Karte darin weiß mit grauen Feldern */
.stellenangebot .job-hero {
    background: linear-gradient(90deg, #fafafa 0%, var(--job-grey) 50%, #fafafa 100%), var(--job-grey);
}
.stellenangebot .job-apply__header,
.stellenangebot .job-hero .ce_form {
    background-color: #fff;
}
.stellenangebot .job-hero .job-form .text {
    background-color: var(--job-grey);
}
/* Ohne den 15px-Abstand, sonst wächst der graue Hero optisch um den Seitenhintergrund */
.stellenangebot #main .mod_article:first-child {
    margin-top: 0;
}
/* Band: Text rechtsbündig an der Inhaltskante, Bild füllt den Rest (Figma: 748 | 134 | 526 | 112) */
@media screen and (min-width: 1501px) {
    .stellenangebot #main .job-cta > .width > .inside {
        grid-template-columns: minmax(0, 1fr) minmax(0, 526px);
        column-gap: 134px;
        padding-right: max(var(--job-side), (100% - 1296px) / 2);
    }
    .stellenangebot .job-cta__text {
        padding-right: 0;
        padding-left: 0;
    }
    .stellenangebot .job-cta .content-hyperlink {
        padding-right: 0;
        padding-left: 0;
    }
}

/* Responsive ------------------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    /* Auf dem Tablet rücken die Spalten sonst zu nah zusammen */
    .karriere {
        --job-gap-col: 5em;
        --job-side: 3.125em;
    }
    /* "Was wir bewegen" bricht um, sonst wird der Text viel höher als das Bild: Bild oben im Format des Bands */
    .karriere .job-about > .width > .inside {
        grid-template-columns: minmax(0, 1fr);
    }
    .karriere .job-about__image {
        order: -1;
    }
    /* Die Trennlinie ist ein Grid-Element und muss vor dem nach oben geholten Bild bleiben */
    .karriere .job-about > .width > .inside::before {
        order: -2;
    }
    .karriere .job-about__image img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
    /* Die Trennlinie steht am rechten Rand der Spalte: halber Abstand davor, halber dahinter, so sitzt sie mittig */
    .karriere :is(.job-benefits, .job-steps) > .width > .inside {
        column-gap: calc(var(--job-gap-col) / 2);
    }
    .karriere .benefit,
    .karriere .step {
        padding-right: calc(var(--job-gap-col) / 2);
    }
    .karriere .job-hero > .width > .inside {
        column-gap: var(--job-gap-col);
        padding: 3.75em var(--job-side);
    }
    .karriere .job-cta__text {
        padding: 3.125em var(--job-side) 0 3.75em;
    }
    .karriere .job-cta .content-hyperlink {
        padding: 2.5em var(--job-side) 3.125em 3.75em;
    }
    .karriere .job-benefits > .width > .inside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .karriere .benefit:nth-child(odd) {
        padding-right: 0;
        border-right: 0;
    }
}
@media screen and (max-width: 1000px) {
    .karriere .job-hero > .width > .inside,
    .karriere .job-details > .width > .inside,
    .karriere #main .job-cta > .width > .inside,
    .karriere .job-steps > .width > .inside,
    .karriere .job-success > .width > .inside {
        grid-template-columns: minmax(0, 1fr);
    }
    .karriere .job-apply__header,
    .karriere .job-hero .ce_form,
    .karriere .job-cta__text,
    .karriere .job-cta .content-hyperlink {
        grid-column: 1;
    }
    /* Unter dem Bild steht der Text des Bands bündig mit den anderen Sektionen */
    .karriere .job-cta__text,
    .karriere .job-cta .content-hyperlink {
        padding-left: var(--job-side);
    }
    .karriere .job-hero__text,
    .karriere .job-apply__header,
    .karriere .job-hero .ce_form {
        grid-row: auto;
    }
    .karriere .job-hero > .width > .inside > div + .job-apply__header {
        margin-top: 2.5em;
    }
    /* Untereinander braucht es die Rahmenzeilen nicht, als 1fr würden sie so hoch wie das Bild */
    .karriere #main .job-cta > .width > .inside {
        grid-template-rows: none;
    }
    .karriere .job-cta__image {
        grid-row: 1;
        aspect-ratio: 16 / 9;
    }
    .karriere .step {
        padding-right: 0;
        border-right: 0;
    }
    /* Untereinander trennt eine Linie die Schritte. Darunter weniger Abstand, weil die Ziffer in ihrer Box oben
       schon rund 20px Luft hat: so wirkt die Linie mittig */
    .karriere .step + .step {
        padding-top: 1.5em;
        border-top: 1px solid var(--job-line);
    }
    .karriere .job-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Der Header ist hier nicht fixiert, die Karte steht unter dem Text */
    .karriere #main .mod_article,
    .karriere .job-apply__header {
        scroll-margin-top: 0;
    }
}
@media screen and (max-width: 600px) {
    /* Die zweispaltigen Vorteile brauchen den Platz */
    .karriere {
        --job-gap-col: 1.5em;
    }
    .karriere h1 {
        margin-bottom: 0.7143em;
        overflow-wrap: anywhere;
    }
    /* Der Fließtext wird mobil nur 1px kleiner, die Sektionen sollen deutlicher zusammenrücken. Das Band hat keinen
       Innenabstand, bei den Sektionen mit Trennlinie steht die Linie oben ohne Abstand */
    .karriere #main .mod_article:not(.job-cta, .divider-top) > .width > .inside {
        padding-top: 4em;
    }
    .karriere #main .mod_article:not(.job-cta) > .width > .inside {
        padding-bottom: 5em;
    }
    /* Mehr Abstand zum Header, unter dem das Logo herausragt */
    .karriere .job-hero > .width > .inside {
        padding: 4em var(--job-side);
    }
    .karriere .job-list {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Vorteile bleiben zweispaltig, ohne Trennlinie für mehr Platz; lange Wörter wie "Zusatzkrankenversicherung"
       werden getrennt */
    .karriere .job-benefits > .width > .inside {
        column-gap: var(--job-gap-col);
    }
    .karriere .benefit {
        padding-right: 0;
        border-right: 0;
        hyphens: auto;
        hyphenate-limit-chars: 10 4 4;
    }
    .karriere #main .benefit figure {
        width: 64px;
        height: 64px;
    }
    /* Kurzbewerbung als eigener Block über die ganze Artikelbreite, Inhalt bündig mit dem Hero-Text.
       width: auto, sonst verschiebt der negative Rand die Formular-Box nur (main.css: .ce_form 100 %) */
    .karriere .job-apply__header,
    .karriere .job-hero .ce_form {
        width: auto;
        margin-right: calc(-1 * var(--job-side));
        margin-left: calc(-1 * var(--job-side));
    }
    .karriere .job-hero > .width > .inside > div + .job-apply__header {
        margin-top: 4em;
    }
    /* Die Karte schließt den Hero unten ab, darunter scheint wie sonst auf der Site 15px Seitenhintergrund durch */
    .stellenangebot .job-hero > .width > .inside {
        padding-bottom: 0;
    }
    .stellenangebot #main .mod_article:first-child {
        margin-top: 15px;
    }
    .karriere .job-apply__header {
        padding: 40px var(--job-side) 0;
    }
    .karriere .job-hero .ce_form {
        padding: 1.25em var(--job-side) 1.875em;
    }
    .karriere .job-form .widget.half {
        grid-column: 1 / -1;
    }
    .karriere .job-cta__text {
        padding: 2.5em var(--job-side) 0;
    }
    .karriere .job-cta .content-hyperlink {
        padding: 2em var(--job-side) 2.5em;
    }
    .karriere .job-card {
        padding: 1.5em;
    }
}
@media screen and (max-width: 500px) {
    .karriere {
        --job-side: 2em;
    }
}
/* Unter der schmalsten üblichen Handybreite werden die zwei Vorteil-Spalten zu eng */
@media screen and (max-width: 359px) {
    .karriere .job-benefits > .width > .inside {
        grid-template-columns: minmax(0, 1fr);
    }
}