section.jointeam { padding: 120px 0; position: relative; overflow: hidden; }
section.jointeam .title-content .main-title h4 { color: var(--primarycolor); margin: 0 0 30px 0; }

/* Bild + Text nebeneinander, Bild in der Pill-Form der Buttons aufgegriffen */
section.jointeam .jointeam-main { display: var(--flex); gap: 70px; align-items: var(--aligncenter); margin: 0 0 90px 0; }
section.jointeam .jointeam-main .jointeam-image { flex: 0 0 46%; max-width: 46%; }
section.jointeam .jointeam-main .jointeam-image .jointeam-image-inner { position: var(--relative); border-radius: 300px 300px 0 0; overflow: hidden; aspect-ratio: 2 / 3; }
section.jointeam .jointeam-main .jointeam-image .jointeam-image-inner img { height: 100%; object-position: center 58%; }
section.jointeam .jointeam-main .jointeam-image .jointeam-image-inner:after { content: ''; position: absolute; inset: 0; border: 2px solid var(--primarycolor); border-radius: 300px 300px 0 0; pointer-events: none; }
section.jointeam .jointeam-main .jointeam-details { flex: 1 1 auto; }
section.jointeam .jointeam-main .jointeam-details .content { margin: 0 0 45px 0; }

/* Was wir bieten: Liste mit gesetztem Punkt in der Akzentfarbe */
section.jointeam .benefits-listing { list-style: none; margin: 0; padding: 0; display: var(--flex); flex-direction: var(--flexdirectioncolumn); gap: 25px; }
section.jointeam .benefits-listing .benefits-list { position: var(--relative); padding: 0 0 0 40px; }
section.jointeam .benefits-listing .benefits-list:before { content: ''; position: absolute; left: 0; top: 10px; width: 12px; height: 12px; border: 2px solid var(--primarycolor); background-color: var(--primarycolor); border-radius: 50px; transition: var(--transition400ms); }
section.jointeam .benefits-listing .benefits-list:hover:before { background-color: transparent; }
section.jointeam .benefits-listing .benefits-list .benefits-list-title { font-size: 20px; line-height: 1.4; color: var(--secondarycolor); margin: 0 0 6px 0; }
section.jointeam .benefits-listing .benefits-list .benefits-list-text { font-size: var(--bodysmallfontsize); line-height: var(--bodysmallfontlineheight); }

/* Offene Stellen als Karten */
section.jointeam .jointeam-positions { margin: 0 0 70px 0; }
section.jointeam .jointeam-positions .title-content .main-title h4 { margin: 0 0 45px 0; }
section.jointeam .jointeam-positions .listing { display: var(--flex); flex-flow: var(--flexflowrowwrap); gap: 30px; justify-content: var(--justifycenter); }
section.jointeam .jointeam-positions .listing .list { flex: 1 1 300px; max-width: 380px; }
section.jointeam .jointeam-positions .listing .list .list-inner { height: 100%; padding: 40px 35px; border: 2px solid rgba(255, 223, 201, 0.35); border-radius: 30px; transition: var(--transition400ms); }
section.jointeam .jointeam-positions .listing .list .list-inner:hover { border-color: var(--primarycolor); transform: translateY(-6px); }
section.jointeam .jointeam-positions .listing .list .list-type { display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 2px; color: var(--tertiarycolor); background-color: var(--primarycolor); border-radius: 50px; padding: 9px 18px 10px 18px; margin: 0 0 20px 0; }
section.jointeam .jointeam-positions .listing .list .main-title h5 { color: var(--secondarycolor); margin: 0 0 15px 0; }
section.jointeam .jointeam-positions .listing .list .list-text { font-size: var(--bodysmallfontsize); line-height: var(--bodysmallfontlineheight); }

/* Abschluss-CTA */
section.jointeam .jointeam-cta .jointeam-note { max-width: 620px; margin: 0 auto 35px auto; color: var(--primarycolor); letter-spacing: 1px; }

@media screen and (max-width:1429px) {
    section.jointeam { padding: 90px 0; }
    section.jointeam .jointeam-main { gap: 45px; margin: 0 0 60px 0; }
}

@media screen and (max-width:1199px) {
    /* In der Spaltenansicht muessen die Kinder volle Breite behalten - sonst
       schrumpft align-items:center sie auf ihre Inhaltsbreite und der Text laeuft raus. */
    section.jointeam .jointeam-main { flex-direction: var(--flexdirectioncolumn); align-items: stretch; }
    section.jointeam .jointeam-main .jointeam-details { width: 100%; }
    section.jointeam .jointeam-main .jointeam-image { flex: 0 0 100%; max-width: 100%; }
    section.jointeam .jointeam-main .jointeam-image .jointeam-image-inner { aspect-ratio: 16 / 10; border-radius: 200px 200px 0 0; }
    section.jointeam .jointeam-main .jointeam-image .jointeam-image-inner:after { border-radius: 200px 200px 0 0; }
    section.jointeam .jointeam-main .jointeam-details .content { margin: 0 0 35px 0; }
}

@media screen and (max-width:767px) {
    section.jointeam { padding: 60px 0; }
    section.jointeam .jointeam-positions { margin: 0 0 45px 0; }
    section.jointeam .jointeam-positions .listing { gap: 20px; }
    section.jointeam .jointeam-positions .listing .list { flex: 1 1 100%; max-width: 100%; }
    section.jointeam .jointeam-positions .listing .list .list-inner { padding: 30px 25px; }
    section.jointeam .benefits-listing .benefits-list .benefits-list-title { font-size: 18px; }
}