/*
 * Berufsfelder - graue Boxen aus Titel, Bild (225:150) und Text, versetzt
 * angeordnet wie die Alumni Stimmen. Unter Tablet-Breite steht das Bild
 * ueber dem Text und jede Box nimmt die volle Breite.
 */

.career-fields {
    display: grid;
    gap: 29px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.career-fields__item {
    padding: 24px 20px;
    background-color: #F6F6F6;
}

/* Groesse wie h3, aber normal statt halbfett. */
.career-fields__title {
    margin: 0 0 12px;
    /* 20px -> 25px */
    font-size: clamp(1.25rem, 1.136rem + 0.488vw, 1.5625rem);
    font-weight: 400;
    line-height: 1.32;
}

.career-fields__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Ausgeliefert in 580px fuer hochaufloesende Displays, dargestellt in 225px. */
.career-fields__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 225 / 150;
    object-fit: cover;
}

.career-fields__text {
    min-width: 0;
}

.career-fields__text p {
    margin-bottom: 0.5rem;
}

.career-fields__text > :last-child {
    margin-bottom: 0;
}

/* Versetzt: jede Box ist 88% breit, jede zweite um die fehlenden 12% nach
   rechts eingerueckt. */
@media (min-width: 768px) {
    .career-fields__item {
        width: 88%;
    }

    .career-fields__item:nth-child(even) {
        margin-left: 12%;
    }

    .career-fields__body {
        flex-direction: row;
        align-items: flex-start;
    }

    .career-fields__image {
        flex: 0 0 auto;
        width: 225px;
    }

    /* Erste Textzeile buendig mit der Bildoberkante statt um den halben
       Zeilenabstand darunter. */
    .career-fields__text {
        flex: 1;
        margin-top: -0.3em;
    }
}