/*
 * Typography scale rollout.
 *
 * Scale ported from the Customizer "Additional CSS" solution that was
 * piloted on the Tecan landing pages (ritter-medical, page IDs 3993/4275):
 *
 *   xs   14px / 17px
 *   s    18px / 27px   (body text)
 *   m    22px / 26px
 *   l    26px / 35px
 *   xl   40px / 48px
 *   xxl  54px / 68px   (40px / 48px below 667px)
 *
 * Each section below belongs to one scope. A scope is only active where
 * functions/typography.php enqueues this file and adds the matching
 * `ri-typo-<scope>` body class — so styles never leak to other pages.
 */

/* ==========================================================================
   Scope: career (Karriere 2026 page + job detail pages)
   ========================================================================== */

.ri-typo-career article,
.ri-typo-career article p,
.ri-typo-career article ul,
.ri-typo-career article ol,
.ri-typo-career article h6,
.ri-typo-career article h5 {
    font-size: 18px;
    line-height: 27px;
}

.ri-typo-career article h4 {
    font-size: 22px;
    line-height: 26px;
}

.ri-typo-career article h3 {
    font-size: 26px;
    line-height: 35px;
}

.ri-typo-career article h2 {
    font-size: 40px;
    line-height: 48px;
}

.ri-typo-career article h1 {
    font-size: 54px;
    line-height: 68px;
    margin-top: 0;
}

.ri-typo-career article h1,
.ri-typo-career article h2,
.ri-typo-career article h3,
.ri-typo-career article h4,
.ri-typo-career article h5 {
    margin-block-start: 0;
}

/* Keep the alt-header title (blue banner, white text) at its own size */
.ri-typo-career article .alt-header-element h1 {
    font-size: 60px;
    line-height: 67px;
}

/* Keep the highlight/intro text prominent instead of body size */
.ri-typo-career article .ri-highlight-text {
    font-size: 26px;
    line-height: 35px;
}

@media (max-width: 667px) {
    .ri-typo-career article h1 {
        font-size: 40px;
        line-height: 48px;
    }
}