/* ==================================================================
   WAM landing page (logged-out front page) – 2026 redesign
   Loaded only for the landing_page.php template (see header.php).

   Tokens
     red     #be1622   Mauer-Rot (logo)      – text accents, buttons
     orange  #f39200   Glut (logo)           – decorative only
     gold    #f9b233   Ernte (logo)          – decorative, on dark only
     ink     #221b1d   warm near-black       – type, dark band
     mist    #efedf7   lavender from hero    – section tint
   Type
     Bricolage Grotesque – display (headlines, names, numbers)
     Nunito              – body (rounded ends echo the logo stroke)
   ================================================================== */

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/wl/bricolage-grotesque-latin.woff2") format("woff2");
    font-weight: 500 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("../fonts/wl/nunito-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("../fonts/wl/nunito-italic-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

.wl-page,
.wl {
    --wl-red: #be1622;
    --wl-red-deep: #9e111b;
    --wl-orange: #f39200;
    --wl-gold: #f9b233;
    --wl-ink: #221b1d;
    --wl-ink-soft: #4a4045;
    --wl-mist: #efedf7;
    --wl-line: #e4e0ec;
    --wl-display: "Bricolage Grotesque", "Nunito", system-ui, sans-serif;
    --wl-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wl-gradient: linear-gradient(90deg, #be1622 0%, #f39200 45%, #f9b233 100%);
}

/* ------------------------------------------------------------------
   Shell: content starts under the floating navbar
   ------------------------------------------------------------------ */

.wl-page .mdl-layout__content {
    margin-top: 0 !important;
    background: #fff !important;
    scroll-behavior: smooth;
}

.wl-page #content {
    padding: 0 !important;
}

/* ------------------------------------------------------------------
   Navbar: transparent over the hero, frosted glass once scrolled
   ------------------------------------------------------------------ */

.wl-page .mdl-layout__header {
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* No fade on the way back: the bar would flash full-width while the pill resets */
    transition: none;
}

/* Scrolled: the bar shrinks into a compact floating pill, centred at the top */
.wl-page.wl-scrolled .mdl-layout__header {
    top: 14px !important;
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    height: 52px !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: translateX(-50%);
    border-radius: 999px !important;
    background-color: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 10px 30px -10px rgba(34, 27, 29, 0.22), 0 0 0 1px rgba(34, 27, 29, 0.05) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    animation: wl-pill-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes wl-pill-in {
    from { opacity: 0; transform: translate(-50%, -14px) scale(0.96); }
    to { opacity: 1; transform: translateX(-50%); }
}

.wl-page.wl-scrolled .mdl-layout__header-row {
    width: auto !important;
    height: 50px !important;
    padding: 0 5px 0 18px !important;
    align-items: center;
}

.wl-page.wl-scrolled .mdl-layout__header .logo_home {
    position: static !important;
    order: -1;
    flex: 0 0 auto;
    width: 0 !important;
    height: 24px !important;
    margin: 0 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    transition: opacity 0.35s ease, width 0.35s ease, margin 0.35s ease;
}

.wl-page.wl-scrolled.wl-past-hero .mdl-layout__header .logo_home {
    width: 66px !important;
    margin-right: 10px !important;
}

.wl-page.wl-scrolled .mdl-layout__header .mdl-layout-spacer,
.wl-page.wl-scrolled .mdl-layout__header .mdl-layout-title {
    display: none !important;
}

/* Menu links: compact pills, active page as a soft tint instead of the old underline.
   Desktop only - below 1025px the links live in the drawer. */
@media screen and (min-width: 1025px) {
    .wl-page .mdl-layout__header nav,
    .wl-page .mdl-layout__header nav ul {
        display: flex !important;
        align-items: center;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 2px;
    }
}

.wl-page .mdl-layout__header .menu-item {
    height: auto !important;
    border: none !important;
}

/* The old theme adds a 4px orange underline to menu items on hover / for the current page */
body.wl-page .mdl-layout__header nav li.menu-item,
body.wl-page .mdl-layout__header nav li.menu-item:hover,
body.wl-page .mdl-layout__header nav li.menu-item:focus-within,
body.wl-page .mdl-layout__header nav li.current-menu-item {
    border: none !important;
    box-shadow: none !important;
}

.wl-page .mdl-layout__header .menu-item::before,
.wl-page .mdl-layout__header .menu-item::after {
    display: none !important;
}

.wl-page .mdl-layout__header .menu-item > a {
    display: block !important;
    height: 40px !important;
    padding: 0 16px !important;
    line-height: 40px !important;
    font-size: 15px !important;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wl-page .mdl-layout__header .menu-item > a:hover {
    background-color: rgba(34, 27, 29, 0.06);
}

.wl-page .mdl-layout__header .current-menu-item > a {
    color: var(--wl-red) !important;
    background-color: rgba(190, 22, 34, 0.08);
}

/* Last item (Anmelden) as the primary action */
.wl-page .mdl-layout__header .menu-item:last-child > a {
    margin-left: 6px;
    color: #fff !important;
    background-color: var(--wl-red);
}

.wl-page .mdl-layout__header .menu-item:last-child > a:hover {
    background-color: var(--wl-red-deep);
}

/* Mobile: a small pill with the menu button, the logo slides in after the hero */
@media screen and (max-width: 1024px) {
    .wl-page.wl-scrolled .mdl-layout__header {
        top: 10px !important;
        width: 52px !important;
        transition: width 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
    }
    .wl-page.wl-scrolled.wl-past-hero .mdl-layout__header {
        width: 150px !important;
    }
    .wl-page.wl-scrolled .mdl-layout__header-row {
        padding: 0 !important;
    }
    .wl-page.wl-scrolled .mdl-layout__header .mdl-layout__drawer-button {
        left: 1px !important;
        margin: 0 !important;
    }
    .wl-page.wl-scrolled .mdl-layout__header .logo_home {
        position: absolute !important;
        left: 58px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .wl-page.wl-scrolled.wl-past-hero .mdl-layout__header .logo_home {
        width: 72px !important;
        height: 26px !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
    }
}

/* ------------------------------------------------------------------
   Mobile drawer: solid sheet instead of the old ~8% glass, which let the
   page and the navbar pill show through blurred
   ------------------------------------------------------------------ */

@media screen and (max-width: 1024px) {
    .wl-page .mdl-layout__drawer {
        width: 272px !important;
        transform: translateX(-292px);
        padding: 22px 14px !important;
        box-sizing: border-box;
        background: #fff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 28px 28px 0 !important;
        box-shadow: none !important;
        /* old theme adds a 60px drop-shadow filter that bleeds in from the left edge while closed */
        filter: none !important;
        font-family: var(--wl-body);
    }
    .wl-page .mdl-layout__drawer.is-visible {
        transform: translateX(0);
        box-shadow: 0 0 60px rgba(34, 27, 29, 0.25) !important;
    }
    .wl-page .mdl-layout__obfuscator.is-visible {
        background-color: rgba(34, 27, 29, 0.4) !important;
    }

    /* Hide the floating pill while the drawer is open */
    .wl-page:has(.mdl-layout__drawer.is-visible) .mdl-layout__header {
        opacity: 0;
        pointer-events: none;
    }

    /* Guest drawer has no cover / avatar - drop those empty blocks */
    .wl-page .mdl-layout__drawer .demo-drawer-header,
    .wl-page .mdl-layout__drawer .demo-avatar,
    .wl-page .mdl-layout__drawer .demo-avatar-dropdown {
        display: none !important;
    }

    .wl-page .mdl-layout__drawer nav,
    .wl-page .mdl-layout__drawer nav ul {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        z-index: auto !important;
        gap: 4px;
    }

    /* Logo at the top of the sheet */
    .wl-page .mdl-layout__drawer nav.demo-navigation > nav::before {
        content: "";
        display: block;
        width: 84px;
        height: 30px;
        margin: 4px 0 26px 14px;
        background: url("../img/logo_solo.svg") left center / contain no-repeat;
    }

    .wl-page .mdl-layout__drawer .menu-item {
        position: relative;
        height: auto !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 14px;
    }

    .wl-page .mdl-layout__drawer .menu-item > a {
        display: block !important;
        padding: 14px 16px 14px 52px !important;
        font-family: var(--wl-body) !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 22px !important;
        color: var(--wl-ink) !important;
        text-decoration: none !important;
        border-radius: 14px;
        transform: none !important;
    }

    .wl-page .mdl-layout__drawer .menu-item > a:active {
        background-color: rgba(34, 27, 29, 0.06);
    }

    /* One icon set for all items, vertically centred next to the label */
    .wl-page .mdl-layout__drawer .menu-item::before {
        content: "\f015";
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        margin: 0 !important;
        transform: translateY(-50%);
        width: 22px;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-size: 18px !important;
        line-height: 1 !important;
        text-align: center;
        color: var(--wl-ink-soft) !important;
        pointer-events: none;
    }
    .wl-page .mdl-layout__drawer .menu-item.news::before {
        content: "\f1ea";
    }

    .wl-page .mdl-layout__drawer .current-menu-item > a {
        color: var(--wl-red) !important;
        background-color: rgba(190, 22, 34, 0.08);
    }
    .wl-page .mdl-layout__drawer .current-menu-item::before {
        color: var(--wl-red) !important;
    }

    /* Anmelden: the primary action, as a full-width red button */
    .wl-page .mdl-layout__drawer .menu-item:last-child {
        margin-top: 18px !important;
    }
    .wl-page .mdl-layout__drawer .menu-item:last-child::before {
        content: "\f2f6";
        color: #fff !important;
    }
    .wl-page .mdl-layout__drawer .menu-item:last-child > a {
        color: #fff !important;
        background-color: var(--wl-red);
        border-radius: 999px;
        box-shadow: 0 10px 22px -10px rgba(190, 22, 34, 0.6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wl-page.wl-scrolled .mdl-layout__header {
        animation: none;
    }
}

/* The big hero mark is the logo; the small navbar logo appears once it has scrolled away */
.wl-page .mdl-layout__header .logo_home {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.wl-page.wl-past-hero .mdl-layout__header .logo_home {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.wl-page .mdl-layout__header .menu-item a {
    font-family: var(--wl-body);
    font-weight: 700;
    color: var(--wl-ink) !important;
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */

.wl {
    font-family: var(--wl-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--wl-ink-soft);
    -webkit-font-smoothing: antialiased;
}

.wl p {
    color: inherit;
    margin: 0 0 1em;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: 0;
}

.wl ul,
.wl ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wl a,
.wl p a {
    color: var(--wl-red);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.wl a:hover,
.wl p a:hover {
    color: var(--wl-red-deep);
}

.wl a:focus-visible,
.wl input:focus-visible,
.wl-page .mdl-layout__header a:focus-visible {
    outline: 3px solid var(--wl-red);
    outline-offset: 3px;
    border-radius: 6px;
}

.wl-wrap {
    width: min(1200px, 100% - 48px);
    margin-inline: auto;
}

.wl .wl-eyebrow {
    margin: 0 0 14px;
    font-family: var(--wl-body);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wl-red);
}

.wl .wl-h2 {
    margin: 0 0 20px;
    font-family: var(--wl-display);
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.028em;
    color: var(--wl-ink);
    text-transform: none;
}

.wl .wl-h2--sm {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.wl .wl-h3 {
    margin: 0 0 8px;
    font-family: var(--wl-display);
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--wl-ink);
}

.wl .wl-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.65;
    color: var(--wl-ink-soft);
}

.wl-section {
    padding: clamp(72px, 10vw, 128px) 0;
}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */

.wl .wl-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    font-family: var(--wl-body);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wl .wl-btn--primary {
    background: var(--wl-red);
    color: #fff;
    box-shadow: 0 14px 28px -14px rgba(190, 22, 34, 0.75);
}

.wl .wl-btn--primary:hover {
    background: var(--wl-red-deep);
    color: #fff;
    transform: translateY(-1px);
}

.wl .wl-btn--ghost {
    background: rgba(255, 255, 255, 0.7);
    color: var(--wl-ink);
    border: 1px solid rgba(34, 27, 29, 0.16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.wl .wl-btn--ghost:hover {
    color: var(--wl-ink);
    border-color: var(--wl-ink);
    background: #fff;
}

.wl .wl-btn__meta {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------
   Hero – the logo stroke continues and is "released" into a free line
   ------------------------------------------------------------------ */

.wl-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 112px 0 80px;
    overflow: hidden;
    background:
        linear-gradient(100deg, rgba(248, 247, 252, 0.94) 0%, rgba(248, 247, 252, 0.8) 36%, rgba(248, 247, 252, 0.2) 68%, rgba(248, 247, 252, 0) 100%),
        var(--wl-hero-img) center / cover no-repeat;
}

.wl-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 -2px 0;
    height: 160px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 92%);
    pointer-events: none;
}

.wl-hero__inner {
    position: relative;
    z-index: 1;
    width: min(1200px, 100% - 48px);
    margin-inline: auto;
}

.wl .wl-mark {
    --wl-logo: clamp(200px, 32vw, 440px);
    display: block;
    width: calc(var(--wl-logo) * 2.192);
    max-width: none;
    height: auto;
    margin: 4px 0 28px -4px;
    overflow: visible;
}

.wl-mark__logo {
    animation: wl-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.wl-mark__free {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: wl-draw 2.4s cubic-bezier(0.65, 0.05, 0.25, 1) 0.55s forwards;
}

.wl .wl-hero__title {
    margin: 0 0 22px;
    max-width: 11ch;
    font-family: var(--wl-display);
    font-size: clamp(2.6rem, 5.6vw, 5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--wl-ink);
    animation: wl-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
}

.wl .wl-hero__lede {
    max-width: 50ch;
    margin-bottom: 32px;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    color: #3a3135;
    animation: wl-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both;
}

.wl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    animation: wl-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both;
}

.wl .wl-hero__note {
    margin: 22px 0 0;
    font-size: 15px;
    color: var(--wl-ink-soft);
    animation: wl-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both;
}

.wl .wl-hero__note strong {
    font-family: var(--wl-display);
    font-weight: 800;
    color: var(--wl-red);
}

/* ------------------------------------------------------------------
   About
   ------------------------------------------------------------------ */

.wl-about__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
}

.wl-about__intro {
    position: sticky;
    top: 110px;
}

.wl-about__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.wl .wl-card {
    padding: 28px 26px 22px;
    border-radius: 22px;
    background: var(--wl-mist);
}

.wl .wl-card p {
    margin: 0;
    font-size: 16px;
}

/* ------------------------------------------------------------------
   Board
   ------------------------------------------------------------------ */

.wl-board {
    background: var(--wl-mist);
}

.wl-board__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 32px 20px;
    margin-top: 44px !important;
}

.wl-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.wl .wl-person__img {
    width: 120px;
    height: 120px;
    margin-bottom: 16px;
    border-radius: 50%;
    object-fit: cover;
    background: #e6e3ec;
    box-shadow: 0 0 0 5px #fff, 0 16px 30px -16px rgba(34, 27, 29, 0.45);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wl-person:hover .wl-person__img {
    transform: translateY(-3px) scale(1.03);
}

.wl-person__name {
    font-family: var(--wl-display);
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.25;
    color: var(--wl-ink);
}

.wl-person__role {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--wl-ink-soft);
}

/* ------------------------------------------------------------------
   Join – a real sequence, so the steps are numbered
   ------------------------------------------------------------------ */

.wl-join {
    text-align: center;
}

.wl .wl-join__lede {
    max-width: 46ch;
    margin: 0 auto;
}

.wl-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin: 56px 0 0 !important;
}

.wl-steps::before {
    content: "";
    position: absolute;
    top: 30px;
    left: calc(100% / 6);
    right: calc(100% / 6);
    height: 4px;
    border-radius: 4px;
    background: var(--wl-gradient);
}

.wl-step {
    position: relative;
    padding: 0 8px;
}

.wl .wl-step__num {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    border-radius: 50%;
    font-family: var(--wl-display);
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    background: var(--wl-red);
    box-shadow: 0 0 0 8px #fff;
}

.wl-step:nth-child(2) .wl-step__num {
    background: var(--wl-orange);
    color: var(--wl-ink);
}

.wl-step:nth-child(3) .wl-step__num {
    background: var(--wl-gold);
    color: var(--wl-ink);
}

.wl .wl-step p {
    max-width: 30ch;
    margin: 0 auto;
    font-size: 16px;
}

.wl .wl-join__cta {
    margin: 52px 0 0;
}

/* ------------------------------------------------------------------
   Newsletter + contact (dark band)
   ------------------------------------------------------------------ */

.wl-stay {
    background: var(--wl-ink);
    color: rgba(255, 255, 255, 0.78);
}

.wl-stay__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 7vw, 96px);
}

.wl-stay__col + .wl-stay__col {
    padding-left: clamp(40px, 7vw, 96px);
    margin-left: calc(clamp(40px, 7vw, 96px) * -1);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.wl .wl-stay .wl-h2 {
    color: #fff;
}

.wl .wl-stay p {
    color: rgba(255, 255, 255, 0.78);
}

.wl .wl-newsletter .mc4wp-form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.wl .wl-newsletter .mc4wp-form-fields p {
    margin: 0;
}

.wl .wl-newsletter .mc4wp-form-fields p:first-child {
    flex: 1 1 240px;
}

.wl .wl-newsletter label {
    display: none;
}

.wl .wl-newsletter input[type=email] {
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-family: var(--wl-body);
    font-size: 16px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wl .wl-newsletter input[type=email]::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.wl .wl-newsletter input[type=email]:focus {
    outline: none;
    border-color: var(--wl-gold) !important;
    background: rgba(255, 255, 255, 0.12);
}

.wl .wl-newsletter input[type=submit] {
    width: auto !important;
    height: 52px;
    padding: 0 26px !important;
    border: none !important;
    border-radius: 999px !important;
    background: var(--wl-gold) !important;
    color: var(--wl-ink) !important;
    font-family: var(--wl-body);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.wl .wl-newsletter input[type=submit]:hover {
    background: #ffc54f !important;
    transform: translateY(-1px);
}

.wl .wl-newsletter input[type=submit]:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.wl .wl-newsletter .mc4wp-response p {
    margin-top: 12px;
    color: #fff;
}

.wl .wl-mail {
    display: inline-block;
    margin-top: 4px;
    padding-bottom: 6px;
    font-family: var(--wl-display);
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
    background: var(--wl-gradient) left bottom / 100% 4px no-repeat;
    transition: background-size 0.3s ease;
}

.wl .wl-mail:hover {
    color: #fff;
    background-size: 100% 100%;
    background-image: linear-gradient(90deg, rgba(190, 22, 34, 0.35), rgba(249, 178, 51, 0.35)), var(--wl-gradient);
    background-size: 100% 100%, 100% 4px;
    background-position: left bottom, left bottom;
}

.wl .wl-mail:focus-visible {
    outline-color: var(--wl-gold);
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */

.wl-footer {
    position: relative;
    padding: 36px 0 40px;
    background: #fff;
}

.wl-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--wl-gradient);
}

.wl-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

.wl .wl-footer__copy {
    margin: 0 auto 0 0;
    font-size: 14px;
    color: var(--wl-ink-soft);
}

.wl-footer__links {
    display: flex;
    gap: 24px;
}

.wl .wl-footer__links a {
    font-size: 14px;
    color: var(--wl-ink);
    text-decoration: none;
}

.wl .wl-footer__links a:hover {
    color: var(--wl-red);
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------ */

@keyframes wl-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes wl-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.wl-js .wl [data-wl-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--wl-delay, 0s);
}

.wl-js .wl [data-wl-reveal].is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .wl-page .mdl-layout__content {
        scroll-behavior: auto;
    }
    .wl-mark__logo,
    .wl .wl-hero__title,
    .wl .wl-hero__lede,
    .wl-hero__actions,
    .wl .wl-hero__note {
        animation: none;
    }
    .wl-mark__free {
        animation: none;
        stroke-dashoffset: 0;
    }
    .wl-js .wl [data-wl-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .wl .wl-btn,
    .wl .wl-person__img {
        transition: none;
    }
}

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

@media screen and (max-width: 1024px) {
    .wl-board__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 860px) {
    .wl-about__grid,
    .wl-stay__grid {
        grid-template-columns: 1fr;
    }
    .wl-about__intro {
        position: static;
    }
    .wl-stay__col + .wl-stay__col {
        padding: 40px 0 0;
        margin: 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .wl-hero {
        background:
            linear-gradient(180deg, rgba(248, 247, 252, 0.84) 0%, rgba(248, 247, 252, 0.7) 55%, rgba(248, 247, 252, 0.35) 100%),
            var(--wl-hero-img) center / cover no-repeat;
    }
}

@media screen and (max-width: 680px) {
    .wl {
        font-size: 16px;
    }
    .wl-hero {
        min-height: 0;
        padding: 104px 0 72px;
    }
    .wl .wl-mark {
        --wl-logo: min(62vw, 260px);
        margin-bottom: 26px;
    }
    .wl-about__list {
        grid-template-columns: 1fr;
    }
    .wl .wl-person__img {
        width: 92px;
        height: 92px;
    }
    .wl-board__grid {
        gap: 28px 12px;
    }
    .wl-person__role {
        font-size: 13px;
    }

    /* Steps become a vertical timeline */
    .wl-join {
        text-align: left;
    }
    .wl .wl-join__lede {
        margin: 0;
    }
    .wl-steps {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .wl-steps::before {
        display: none;
    }
    /* One connector per step, so the line ends exactly at the last number */
    .wl-step:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 26px;
        top: 56px;
        bottom: -28px;
        width: 4px;
        border-radius: 4px;
        background: linear-gradient(180deg, #be1622, #f39200);
    }
    .wl-step:nth-child(2)::before {
        background: linear-gradient(180deg, #f39200, #f9b233);
    }
    .wl-step {
        padding: 4px 0 0 80px;
        min-height: 56px;
    }
    .wl .wl-step__num {
        position: absolute;
        top: 0;
        left: 0;
        width: 56px;
        height: 56px;
        margin: 0;
        font-size: 22px;
        box-shadow: 0 0 0 6px #fff;
    }
    .wl .wl-step p {
        margin: 0;
        max-width: none;
    }
    .wl .wl-join__cta {
        margin-top: 40px;
    }
    .wl .wl-join__cta .wl-btn {
        width: 100%;
        justify-content: center;
        padding: 0 18px;
        font-size: 15px;
        white-space: nowrap;
    }
    .wl-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media screen and (max-width: 420px) {
    .wl-board__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ------------------------------------------------------------------
   Login / password screens (Theme My Login): one centred card on a
   soft brand backdrop, same type and controls as the landing page
   ------------------------------------------------------------------ */

/* body + main: must outrank the old ".page-id-293.ms-guest main.mdl-layout__content" orange gradient */
body.wl-page.wl-auth main.mdl-layout__content {
    background: linear-gradient(155deg, #f8ede4 0%, var(--wl-mist) 42%, var(--wl-mist) 62%, #f3e4ec 100%) !important;
    /* old theme pads the scroller by 40px, which made the full-height page scroll */
    padding-bottom: 0 !important;
}

.wl-auth #content,
.wl-auth #primary,
.wl-auth #main {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    min-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.wl-auth #content {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 96px 16px 48px !important;
    box-sizing: border-box;
}

.wl-auth #main > .mdl-card {
    width: 100% !important;
    max-width: 440px;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 40px 36px 32px !important;
    box-sizing: border-box;
    background: #fff !important;
    border-radius: 28px !important;
    box-shadow: 0 30px 60px -30px rgba(34, 27, 29, 0.35), 0 0 0 1px rgba(34, 27, 29, 0.04) !important;
    overflow: visible !important;
    animation: none !important;
    font-family: var(--wl-body);
    color: var(--wl-ink-soft);
}

.wl-auth #main > .mdl-card article {
    width: 100%;
}

/* Drop the page banner image and the page-builder spacer columns */
.wl-auth .mdl-card__media,
.wl-auth .vc_row > .vc_col-sm-3 {
    display: none !important;
}

.wl-auth .vc_row,
.wl-auth .vc_column-inner,
.wl-auth .wpb_wrapper,
.wl-auth .wpb_text_column,
.wl-auth .entry-content,
.wl-auth .mdl-card__supporting-text {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.wl-auth .vc_row > .wpb_column {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.wl-auth .wpb_wrapper > p:empty {
    display: none;
}

/* Title */
.wl-auth article > div:has(> h3) {
    padding: 0 !important;
    margin-bottom: 28px;
}

.wl-auth article h3 {
    display: block !important;
    margin: 0 !important;
    font-family: var(--wl-display) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    color: var(--wl-ink) !important;
}

.wl-auth article h3::after {
    content: "";
    display: block;
    width: 56px;
    height: 5px;
    margin-top: 14px;
    border-radius: 5px;
    background: var(--wl-gradient);
}

/* Form */
.wl-auth .tml {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--wl-body);
}

.wl-auth .tml form {
    margin: 0;
}

.wl-auth .tml-field-wrap {
    margin: 0 0 18px !important;
}

.wl-auth .tml .tml-label {
    display: block;
    margin: 0 0 8px !important;
    font-family: var(--wl-body) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--wl-ink) !important;
    text-align: left;
}

.wl-auth .tml input.tml-field {
    display: block;
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box;
    font-family: var(--wl-body) !important;
    font-size: 16px !important; /* 16px keeps iOS from zooming in on focus */
    color: var(--wl-ink) !important;
    background: #faf9fd !important;
    border: 1.5px solid var(--wl-line) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.wl-auth .tml input.tml-field::placeholder {
    color: #9a929c;
    opacity: 1;
}

.wl-auth .tml input.tml-field:focus {
    background: #fff !important;
    border-color: var(--wl-red) !important;
    box-shadow: 0 0 0 4px rgba(190, 22, 34, 0.12) !important;
}

.wl-auth .tml-pwd {
    position: relative;
}

.wl-auth .tml-pwd input.tml-field {
    padding-right: 52px !important;
}

.wl-auth .tml-toggle-pwd {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    border-radius: 10px;
    color: #8a8290 !important;
    cursor: pointer;
}

.wl-auth .tml-toggle-pwd:hover {
    color: var(--wl-ink) !important;
    background: rgba(34, 27, 29, 0.05) !important;
}

/* Checkbox: native control in brand red, label beside it */
.wl-auth .tml-rememberme-wrap {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px !important;
}

.wl-auth .tml-rememberme-wrap .tml-checkbox {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    position: static !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
    accent-color: var(--wl-red);
    opacity: 1 !important;
    visibility: visible !important;
}

.wl-auth .tml-rememberme-wrap .tml-checkbox::before,
.wl-auth .tml-rememberme-wrap .tml-checkbox::after {
    display: none !important;
}

.wl-auth .tml-rememberme-wrap .tml-label {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    cursor: pointer;
}

.wl-auth .tml-submit-wrap {
    margin-bottom: 0 !important;
}

.wl-auth .tml .tml-button {
    display: block;
    width: 100% !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    font-family: var(--wl-body) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 54px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #fff !important;
    background: var(--wl-red) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: 0 14px 28px -14px rgba(190, 22, 34, 0.7) !important;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.wl-auth .tml .tml-button:hover {
    background: var(--wl-red-deep) !important;
}

.wl-auth .tml .tml-button:active {
    transform: translateY(1px);
}

.wl-auth .tml .tml-button:focus-visible,
.wl-auth .tml-toggle-pwd:focus-visible,
.wl-auth .tml-links a:focus-visible {
    outline: 3px solid var(--wl-red);
    outline-offset: 3px;
}

/* Errors / notices */
.wl-auth .tml-alerts:not(:empty) {
    margin-bottom: 20px;
}

.wl-auth .tml-alerts .tml-error,
.wl-auth .tml-alerts .tml-message,
.wl-auth .tml-alerts .tml-success {
    margin: 0 0 8px;
    padding: 12px 16px;
    font-size: 15px;
    border: none;
    border-radius: 12px;
    background: rgba(190, 22, 34, 0.08);
    color: var(--wl-red-deep);
}

.wl-auth .tml-alerts .tml-message,
.wl-auth .tml-alerts .tml-success {
    background: rgba(249, 178, 51, 0.16);
    color: var(--wl-ink);
}

/* Intro text inside forms (e.g. "Passwort vergessen") */
.wl-auth .tml .tml-message-wrap .tml-message {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--wl-body) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    color: var(--wl-ink-soft) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Links below the form */
.wl-auth .tml-links {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.wl-auth .tml-links li {
    margin: 0 !important;
    padding: 0 !important;
}

.wl-auth .tml-links li::before {
    display: none !important;
}

.wl-auth .tml-links a {
    font-family: var(--wl-body) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--wl-red) !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

@media screen and (max-width: 480px) {
    .wl-auth #content {
        align-items: flex-start;
        padding: 84px 12px 32px !important;
    }
    .wl-auth #main > .mdl-card {
        padding: 32px 22px 26px !important;
        border-radius: 24px !important;
    }
    .wl-auth article h3 {
        font-size: 30px !important;
    }
}

/* ------------------------------------------------------------------
   Guest content pages (logged out): legal pages, news list, articles.
   Body class wl-content; markup from content-page.php / archive.php.
   ------------------------------------------------------------------ */

.wl-content #primary,
.wl-content #main,
.wl-content #content,
.wl-member #primary,
.wl-member #main,
.wl-member #content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: none !important;
    box-shadow: none !important;
}

.wl-wrap--narrow {
    width: min(760px, 100% - 48px);
}

/* #primary is reset above (old theme spacing), so the top offset needs the id too */
.wl-content #primary.wl-doc-wrap,
.wl-doc-wrap {
    padding-top: 128px !important;
}

/* The old theme turns every <header> into a two-column flex row (and, in the member area, gives it a background) */
.wl .wl-doc__head {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    display: block;
    height: auto;
    margin-bottom: 44px;
}

.wl .wl-doc__head .wl-eyebrow a {
    color: inherit;
    text-decoration: none;
}

.wl .wl-doc__title {
    margin: 0;
    font-family: var(--wl-display);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--wl-ink);
    overflow-wrap: anywhere;
}

.wl .wl-doc__title::after {
    content: "";
    display: block;
    width: 64px;
    height: 5px;
    margin-top: 20px;
    border-radius: 5px;
    background: var(--wl-gradient);
}

.wl .wl-doc__head .wl-lead {
    margin: 22px 0 0;
    max-width: 640px;
}

.wl-doc__media {
    margin: 0 auto 52px;
}

.wl-doc__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: cover;
    border-radius: 28px;
}

/* Long-form text */
.wl .wl-prose {
    font-size: 17px;
    line-height: 1.75;
    color: var(--wl-ink-soft);
    overflow-wrap: break-word;
}

.wl .wl-prose > :first-child {
    margin-top: 0;
}

.wl .wl-prose h2,
.wl .wl-prose h3,
.wl .wl-prose h4 {
    font-family: var(--wl-display);
    color: var(--wl-ink);
    letter-spacing: -0.015em;
}

.wl .wl-prose h2 {
    margin: 52px 0 14px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
}

.wl .wl-prose h3 {
    margin: 36px 0 10px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

/* h4 is used for interview questions and intros (often italic): body font reads better than the display face */
.wl .wl-prose h4 {
    margin: 32px 0 10px;
    font-family: var(--wl-body);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0;
}

.wl .wl-prose p {
    margin: 0 0 1.15em;
}

.wl .wl-prose ul,
.wl .wl-prose ol {
    margin: 0 0 1.15em;
    padding-left: 1.4em;
    list-style: disc;
}

.wl .wl-prose ol {
    list-style: decimal;
}

.wl .wl-prose li {
    margin: 0 0 0.4em;
}

.wl .wl-prose strong {
    color: var(--wl-ink);
}

.wl .wl-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
}

.wl .wl-prose blockquote {
    margin: 32px 0;
    padding: 4px 0 4px 24px;
    border-left: 4px solid var(--wl-orange);
    font-size: 20px;
    font-style: italic;
    color: var(--wl-ink);
}

.wl .wl-prose hr {
    margin: 40px 0;
    border: none;
    border-top: 1px solid var(--wl-line);
}

.wl .wl-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.wl .wl-prose th,
.wl .wl-prose td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--wl-line);
    text-align: left;
}

.wl .wl-doc__back {
    margin-top: 56px;
}

.wl .wl-doc__back a {
    text-decoration: none;
}

.wl-doc-wrap .wl-footer {
    margin-top: 112px;
}

/* News list: first post large, the rest as a card grid */
.wl .wl-news {
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

.wl-news__item {
    display: flex;
}

.wl .wl-news__card {
    display: flex;
    flex-direction: column;
    align-items: stretch !important; /* an inherited align-items:center collapsed the image and centred short titles */
    width: 100%;
    overflow: hidden;
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--wl-line);
    border-radius: 24px;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.wl .wl-news__card:hover {
    color: inherit;
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 24px 48px -24px rgba(34, 27, 29, 0.3);
}

.wl .wl-news__card:focus-visible {
    outline: 3px solid var(--wl-red);
    outline-offset: 3px;
}

.wl-news__media {
    position: relative;
    width: 100%;
    flex: 0 0 auto; /* without this the column flexbox squashes the 16:10 box to 0 */
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--wl-mist);
}

.wl-news__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wl-news__card:hover .wl-news__img {
    transform: scale(1.04);
}

.wl-news__img--logo {
    object-fit: contain;
    padding: 18%;
    box-sizing: border-box;
}

.wl-news__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 22px 24px 24px;
}

/* an old theme rule centres spans with auto side margins */
.wl .wl-news__body > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.wl-news__date {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-red);
}

.wl-news__title {
    margin-bottom: 10px;
    font-family: var(--wl-display);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--wl-ink);
}

.wl-news__excerpt {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--wl-ink-soft);
}

.wl-news__more {
    margin-top: auto;
    font-size: 15px;
    font-weight: 800;
    color: var(--wl-red);
}

@media screen and (min-width: 900px) {
    .wl-news__item:first-child {
        grid-column: 1 / -1;
    }
    .wl-news__item:first-child .wl-news__card {
        flex-direction: row;
    }
    .wl-news__item:first-child .wl-news__media {
        flex: 0 0 58%;
        width: auto;
        aspect-ratio: auto;
        min-height: 380px;
    }
    .wl-news__item:first-child .wl-news__body {
        justify-content: center;
        padding: 40px 44px;
    }
    .wl-news__item:first-child .wl-news__title {
        font-size: 32px;
        line-height: 1.15;
    }
    .wl-news__item:first-child .wl-news__excerpt {
        font-size: 17px;
    }
    .wl-news__item:first-child .wl-news__more {
        margin-top: 8px;
    }
}

/* Pagination */
.wl-pager {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 56px;
}

.wl .wl-pager .page-numbers {
    margin: 0 !important;
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    box-sizing: border-box;
    font-weight: 700;
    color: var(--wl-ink);
    text-decoration: none;
    border: 1.5px solid var(--wl-line);
    border-radius: 999px;
}

.wl .wl-pager a.page-numbers:hover {
    color: var(--wl-red);
    border-color: var(--wl-red);
}

.wl .wl-pager .page-numbers.current {
    color: #fff;
    background: var(--wl-red);
    border-color: var(--wl-red);
}

@media screen and (max-width: 680px) {
    .wl-content #primary.wl-doc-wrap,
    .wl-doc-wrap {
        padding-top: 100px !important;
    }
    .wl .wl-prose {
        font-size: 16px;
    }
    .wl .wl-prose h2 {
        font-size: 25px;
    }
    .wl-doc__img {
        border-radius: 20px;
    }
    .wl-doc-wrap .wl-footer {
        margin-top: 72px;
    }
}


/* ------------------------------------------------------------------
   Members area: the same news / article markup inside the member layout
   (body.wl-member). The top bar offset comes from member.css, so only a
   small top gap here, and no public footer.
   ------------------------------------------------------------------ */

.wl-member #primary.wl-doc-wrap,
.wl-member .wl-doc-wrap {
    padding-top: 8px !important;
    padding-bottom: 72px !important;
}

.wl-member .wl .wl-wrap {
    width: min(1100px, 100% - 48px);
}

.wl-member .wl .wl-wrap--narrow {
    width: min(760px, 100% - 48px);
}

.wl-member .wl {
    font-family: var(--wl-body);
    color: var(--wl-ink-soft);
}

@media screen and (max-width: 600px) {
    .wl-member .wl .wl-wrap,
    .wl-member .wl .wl-wrap--narrow {
        width: calc(100% - 24px);
    }
}