.rg-header {
    width: 100%;
}

/* ==========================================================
   RunnersGate Design Tokens
   ========================================================== */

:root {
    --rg-color-black: #111111;
    --rg-color-text: #222222;
    --rg-color-muted: #555555;
    --rg-color-blue: #00a6d6;
    --rg-color-blue-dark: #007fa8;
    --rg-color-border: #d9d9d9;
    --rg-color-border-soft: #d8d8d8;
    --rg-color-bg-light: #f6f7f8;

    --rg-font-headline: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
    --rg-font-body: Arial, Helvetica, sans-serif;
}

/* ==========================================================
   RunnersGate Header: Brandbar, Logo, Search
   ========================================================== */

.rg-header__brandbar {
    background-image: url("../Images/runnersgate-header-bg.png");
    background-size: cover;
    background-position: center;
    border-bottom: 4px solid #35b9d6;
}

.rg-header__brandbar-inner {
    max-width: 1180px;
    min-height: 132px;
    margin: 0 auto;
    padding: 0.6rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.rg-header__logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.rg-header__logo {
    display: block;
    max-width: 220px;
    height: auto;
}

.rg-header__search {
    display: flex;
    align-items: stretch;
}

.rg-header__search-label,
.rg-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.rg-header__search-input {
    min-width: 280px;
    padding: 0.75rem 1rem;
    border: 1px solid #dddddd;
    font-size: 1rem;
}

.rg-header__search-button {
    width: 48px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 1px solid #35b9d6 !important;
    background-color: #35b9d6 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}

.rg-header__search-button span {
    display: none !important;
}

.rg-header__search-button::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background-color: #ffffff !important;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}

/* ==========================================================
   RunnersGate Header: Navigation Base
   ========================================================== */

.rg-header__navrow {
    background: #111111;
    border-top: 0;
}

.rg-header__navrow-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem;
}

.rg-header__nav-list {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rg-header__nav-list-item {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
}

.rg-header__nav-item {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}

.rg-header__nav-item:hover,
.rg-header__nav-item--active {
    color: #35b9d6;
}

/* ==========================================================
   RunnersGate Header: Desktop Navigation
   ========================================================== */

@media (min-width: 769px) {

    .rg-header__menu-button {
        display: none !important;
    }

    .rg-header__menu.header__menu {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: auto !important;
        transform: none !important;
    }

    .rg-header__navrow-inner {
        display: flex !important;
        align-items: center !important;
        min-height: 52px;
    }

    .rg-header__nav {
        display: block !important;
    }

    .rg-header__nav-list {
        display: flex !important;
        align-items: stretch !important;
        height: 52px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .rg-header__nav-list-item {
        display: flex !important;
        align-items: stretch !important;
        position: relative;
        margin: 0;
        padding: 0;
    }

    .rg-header__nav-item {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        height: 52px !important;
        padding: 0 1rem !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-weight: 700;
        line-height: 1 !important;
        white-space: nowrap;
        box-sizing: border-box !important;
    }

    .rg-header__nav-item:hover,
    .rg-header__nav-item--active {
        color: #35b9d6 !important;
    }

    .rg-header__search {
        margin-left: auto !important;
        margin-right: clamp(16rem, 22vw, 28rem) !important;
        width: 390px !important;
        max-width: 390px !important;
    }
}

/* ==========================================================
   RunnersGate Header: Desktop Home Icon
   ========================================================== */

@media (min-width: 769px) {

    .rg-header__nav-list-item--home {
        position: relative !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .rg-header__nav-list-item--home > a,
    .rg-header__nav-list-item--home > a:hover,
    .rg-header__nav-list-item--home:hover > a,
    .rg-header__nav-list-item--home > a:focus {
        width: 42px !important;
        min-width: 42px !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        position: relative !important;
        color: transparent !important;
        text-decoration: none !important;
        font-size: 0 !important;
        line-height: 1 !important;
        transform: none !important;
    }

    .rg-header__nav-list-item--home > a svg,
    .rg-header__nav-list-item--home > a i,
    .rg-header__nav-list-item--home > a .icon,
    .rg-header__nav-list-item--home > a > span:not(.rg-visually-hidden) {
        display: none !important;
    }

    .rg-header__nav-list-item--home > a::after,
    .rg-header__nav-list-item--home > a:hover::after,
    .rg-header__nav-list-item--home:hover > a::after {
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .rg-header__nav-list-item--home > a::before,
    .rg-header__nav-list-item--home > a:hover::before,
    .rg-header__nav-list-item--home:hover > a::before,
    .rg-header__nav-list-item--home > a:focus::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        background-color: #35b9d6 !important;
        transform: translate(-50%, -50%) !important;

        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H392c-22.1 0-40-17.9-40-40V360c0-13.3-10.7-24-24-24h-80c-13.3 0-24 10.7-24 24v112c0 22.1-17.9 40-40 40H104c-22.1 0-40-17.9-40-40V288H32c-18 0-32-14-32-32.1 0-9 3.7-17.6 10.3-23.7L266.4 8c12.2-10.7 30.9-10.7 43.1 0l256.2 224.2c6.6 6.1 10.3 14.7 10.3 23.3z'/%3E%3C/svg%3E") !important;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H392c-22.1 0-40-17.9-40-40V360c0-13.3-10.7-24-24-24h-80c-13.3 0-24 10.7-24 24v112c0 22.1-17.9 40-40 40H104c-22.1 0-40-17.9-40-40V288H32c-18 0-32-14-32-32.1 0-9 3.7-17.6 10.3-23.7L266.4 8c12.2-10.7 30.9-10.7 43.1 0l256.2 224.2c6.6 6.1 10.3 14.7 10.3 23.3z'/%3E%3C/svg%3E") !important;

        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
        -webkit-mask-position: center !important;
        mask-position: center !important;
        -webkit-mask-size: contain !important;
        mask-size: contain !important;
    }

    .rg-header__nav-list-item--home::after,
    .rg-header__nav-list-item--home:hover::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        bottom: 9px !important;
        width: 18px !important;
        height: 2px !important;
        margin: 0 !important;
        border: 0 !important;
        display: block !important;
        background-color: #35b9d6 !important;
        transform: translateX(-50%) !important;
    }
}

/* ==========================================================
   RunnersGate Header: Desktop Active, Hover, Arrows, Dropdown
   ========================================================== */

@media (min-width: 769px) {

    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .rg-header__nav-item--active,
    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .header__nav-item--active {
        color: #35b9d6 !important;
        text-decoration: none !important;
    }

    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .rg-header__nav-item--active::before,
    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .header__nav-item--active::before {
        content: "" !important;
        position: absolute !important;
        left: 1rem !important;
        right: 1rem !important;
        bottom: 9px !important;
        height: 2px !important;
        margin: 0 !important;
        border: 0 !important;
        display: block !important;
        background-color: #35b9d6 !important;
        transform: none !important;
    }

    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .rg-header__nav-item:not(.rg-header__nav-item--active):hover,
    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .header__nav-item:not(.header__nav-item--active):hover {
        border-bottom: 0 !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .rg-header__nav-item:not(.rg-header__nav-item--active):hover::before,
    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .rg-header__nav-item:not(.rg-header__nav-item--active):hover::after,
    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .header__nav-item:not(.header__nav-item--active):hover::before,
    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .header__nav-item:not(.header__nav-item--active):hover::after {
        display: none !important;
        content: none !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .rg-header__nav-item--has-subnav::after,
    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .header__nav-item--has-subnav::after {
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .rg-header__nav-item--has-subnav svg,
    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .header__nav-item--has-subnav svg,
    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .rg-header__nav-item--has-subnav .icon,
    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .header__nav-item--has-subnav .icon {
        display: none !important;
    }

    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .rg-header__nav-item--has-subnav,
    .rg-header__nav-list-item:not(.rg-header__nav-list-item--home) > .header__nav-item--has-subnav {
        gap: 0 !important;
        column-gap: 0 !important;
        padding-right: 1rem !important;
    }

    .rg-header__subnav.header__subnav {
        display: none !important;
        position: absolute !important;
        top: 100%;
        left: 0;
        z-index: 1000;
        min-width: 270px !important;
        margin: 0;
        padding: 0.45rem 0 !important;
        list-style: none;
        background: #222222 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .rg-header__nav-list-item:hover > .rg-header__subnav,
    .rg-header__nav-list-item:focus-within > .rg-header__subnav {
        display: block !important;
    }

    .rg-header__subnav-list-item {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .rg-header__subnav-list-item--back,
    .header__subnav-list-item--back,
    .rg-header__subnav .rg-header__subnav-list-item--back,
    .rg-header__subnav .header__subnav-list-item--back,
    .rg-header__subnav button.rg-header__subnav-item--back,
    .rg-header__subnav button.header__subnav-item--back {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .rg-header__subnav-item.header__subnav-item {
        display: block !important;
        padding: 0.55rem 1rem !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 1rem !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;
        white-space: nowrap;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .rg-header__subnav-item.header__subnav-item:hover {
        color: #35b9d6 !important;
        background: #1a1a1a !important;
    }
}

/* ==========================================================
   RunnersGate Header: Mobile Header, Search, Menu Button
   ========================================================== */

@media (max-width: 768px) {

    .rg-header__brandbar-inner {
        min-height: 0 !important;
        padding: 0.55rem 1rem 0.65rem 1rem !important;
        gap: 0.55rem !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .rg-header__logo {
        max-width: 155px !important;
        height: auto !important;
    }

    .rg-header__search {
        width: 100% !important;
        max-width: 330px !important;
    }

    .rg-header__search-input {
        min-width: 0 !important;
        width: 100% !important;
        height: 38px !important;
        padding: 0.55rem 0.85rem !important;
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
    }

    .rg-header__search-button {
        width: 42px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .rg-header__search-button::before {
        width: 16px !important;
        height: 16px !important;
    }

    .rg-header__navrow-inner {
        padding: 0 1rem !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    .rg-header__menu-button {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
    }

    .rg-header__menu-button .button,
    .rg-header__menu-button .button__content,
    .rg-header__menu-button .button__text {
        min-height: 0 !important;
        line-height: 1 !important;
    }

    .rg-header__menu-button .button {
        padding: 0.55rem 1.05rem !important;
        border-radius: 999px !important;
        font-size: 1rem !important;
    }

    .rg-header__menu-button .icon {
        width: 24px !important;
        height: 24px !important;
    }
}

/* ==========================================================
   RunnersGate Header: Mobile Offcanvas Navigation
   ========================================================== */

@media (max-width: 768px) {

    .rg-header__menu.header__menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: min(70vw, 340px) !important;
        max-width: 340px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #000000 !important;
        color: #ffffff !important;
        z-index: 9999 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    .rg-header__menu.header__menu::before,
    .rg-header__menu.header__menu::after {
        display: none !important;
        content: none !important;
    }

    .rg-header__nav.header__nav,
    .rg-header__nav-list.header__nav-list,
    .rg-header__subnav.header__subnav {
        background: #000000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .rg-header__nav.header__nav {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .rg-header__nav-list.header__nav-list {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .rg-header__nav-list-item.header__nav-list-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #000000 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
    }

    .rg-header__nav-item.header__nav-item {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0.82rem 1.15rem !important;
        margin: 0 !important;
        color: #ffffff !important;
        background: #000000 !important;
        font-size: 1.05rem !important;
        line-height: 1.22 !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    .rg-header__nav-item.header__nav-item:hover,
    .rg-header__nav-item.header__nav-item:focus {
        color: #35b9d6 !important;
        background: #000000 !important;
        text-decoration: none !important;
    }

    .rg-header__nav-item--active.header__nav-item--active {
        color: #ffffff !important;
        background: #000000 !important;
        text-decoration: none !important;
    }

    .rg-header__nav-item.header__nav-item svg,
    .rg-header__nav-item.header__nav-item .icon,
    .rg-header__nav-item.header__nav-item::before,
    .rg-header__nav-item.header__nav-item::after {
        display: none !important;
        content: none !important;
    }

    .rg-header__nav-list-item--home > .rg-header__nav-item {
        font-size: 0 !important;
        min-height: 48px !important;
        padding: 0.85rem 1.15rem !important;
    }

    .rg-header__nav-list-item--home > .rg-header__nav-item span[aria-hidden="true"] {
        display: inline-block !important;
        font-size: 1.2rem !important;
        line-height: 1 !important;
        color: #ffffff !important;
    }

    .rg-header__subnav.header__subnav {
        display: block !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        list-style: none !important;
    }

    .rg-header__subnav-list-item.header__subnav-list-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #000000 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
    }

    .rg-header__menu .header__subnav-list-item--back,
    .rg-header__menu .rg-header__subnav-list-item--back,
    .rg-header__menu li.header__subnav-list-item--back,
    .rg-header__menu button.header__subnav-item--back,
    .rg-header__menu button.rg-header__subnav-item--back,
    .rg-header__menu .JS_header-nav-back {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    .rg-header__subnav-item.header__subnav-item {
        display: block !important;
        width: 100% !important;
        padding: 0.72rem 1.15rem 0.72rem 2.05rem !important;
        margin: 0 !important;
        color: #ffffff !important;
        background: #000000 !important;
        font-size: 0.98rem !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    .rg-header__subnav-item.header__subnav-item:hover,
    .rg-header__subnav-item.header__subnav-item:focus {
        color: #35b9d6 !important;
        background: #111111 !important;
        text-decoration: none !important;
    }

    .rg-header__menu *,
    .rg-header__nav *,
    .rg-header__subnav * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================
   RunnersGate Footer
   ========================================================== */

.rg-footer {
    background-color: #111111;
    background-image: url("../Images/runnersgate-footer-bg.jpg");
    background-repeat: repeat-x;
    background-position: center top;
    background-size: auto 100%;
    color: #ffffff;
    min-height: 150px;
    font-size: 12px;
    line-height: 1.4;
    text-transform: uppercase;
}

.rg-footer__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 80px 2rem 32px;
}

.rg-footer__columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.rg-footer,
.rg-footer p,
.rg-footer div,
.rg-footer span,
.rg-footer li,
.rg-footer h1,
.rg-footer h2,
.rg-footer h3,
.rg-footer h4,
.rg-footer h5,
.rg-footer h6,
.rg-footer__col,
.rg-footer__meta {
    color: #ffffff !important;
}

.rg-footer a,
.rg-footer a:link,
.rg-footer a:visited {
    color: #ffffff !important;
    text-decoration: none;
}

.rg-footer a:hover,
.rg-footer a:focus {
    color: #35b9d6 !important;
    text-decoration: underline;
}

.rg-footer a::before,
.rg-footer a::after,
.rg-footer a svg,
.rg-footer a .icon {
    display: none !important;
    content: none !important;
}

.rg-footer__meta {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.rg-footer .frame,
.rg-footer .frame-default,
.rg-footer .frame-type-text,
.rg-footer .frame-type-textmedia,
.rg-footer [class*="frame-space-before"],
.rg-footer [class*="frame-space-after"] {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.rg-footer .frame-container,
.rg-footer .frame-inner,
.rg-footer .ce-bodytext,
.rg-footer .ce-bodytext p,
.rg-footer p {
    background: transparent !important;
    color: #ffffff !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.rg-footer .frame *,
.rg-footer .ce-bodytext *,
.rg-footer [class*="component"],
.rg-footer [class*="component"] *,
.rg-footer [class*="card"],
.rg-footer [class*="card"] * {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.rg-footer .ce-bodytext p + p {
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .rg-footer {
        min-height: auto;
        background-size: cover;
    }

    .rg-footer__inner {
        padding: 35px 20px;
    }

    .rg-footer__columns {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .rg-footer__meta {
        display: block;
    }
}

/* ============================================================
   RunnersGate Content-Element-Designsystem
   component--rg-hero, component--rg-planfinder,
   component--rg-table und component--rg-cta
   ============================================================ */

/* ------------------------------------------------------------
   RG Hero / Sofortantwort
   ------------------------------------------------------------ */

.component--rg-hero {
    max-width: 980px;
    margin: 3rem auto 1.4rem auto;
    padding: 0 1.5rem;
    font-family: var(--rg-font-body);
    color: var(--rg-color-text);
}

.component--rg-hero h1,
.component--rg-hero h2 {
    margin: 0 0 1rem 0;
    font-family: var(--rg-font-headline);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--rg-color-black);
}

.component--rg-hero h1 {
    font-size: clamp(2.2rem, 3.1vw, 3.15rem);
    max-width: 820px;
}

.component--rg-hero h2 {
    font-size: clamp(1.75rem, 2.4vw, 2.35rem);
}

.component--rg-hero p {
    max-width: 840px;
    margin: 0 0 0.8rem 0;
    font-size: 1.03rem;
    line-height: 1.58;
    color: var(--rg-color-text);
}

.component--rg-hero p:last-child {
    margin-bottom: 0;
}

.component--rg-hero strong,
.component--rg-hero b {
    font-weight: 700;
    color: var(--rg-color-black);
}

.component--rg-hero a {
    color: var(--rg-color-blue-dark);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(0, 166, 214, 0.35);
}

.component--rg-hero a:hover,
.component--rg-hero a:focus {
    color: var(--rg-color-black);
    border-bottom-color: var(--rg-color-blue);
}

/* ------------------------------------------------------------
   RG Tabellen- / Tool-Blöcke
   Einheitliche Optik für Planfinder und Zielzeit-Orientierung
   ------------------------------------------------------------ */

.component--rg-planfinder,
.component--rg-table {
    max-width: 980px;
    margin: 1.8rem auto 2.2rem auto;
    padding: 0 1.5rem;
    font-family: var(--rg-font-body);
    color: var(--rg-color-text);
}

.component--rg-hero + .component--rg-planfinder,
.component--rg-planfinder + .component--rg-table {
    margin-top: 1.2rem;
}

.component--rg-planfinder > .component__content,
.component--rg-table > .component__content {
    padding: 1.8rem 2rem;
    background: var(--rg-color-bg-light);
    border: 1px solid var(--rg-color-border-soft);
    box-shadow: none;
}

.component--rg-planfinder h2,
.component--rg-planfinder h3,
.component--rg-planfinder .headline,
.component--rg-table h2,
.component--rg-table h3,
.component--rg-table .headline {
    margin: 0 0 1rem 0;
    font-family: var(--rg-font-headline);
    font-size: clamp(1.55rem, 2vw, 1.75rem);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--rg-color-black);
}

.component--rg-planfinder h3,
.component--rg-table h3 {
    font-size: clamp(1.2rem, 1.7vw, 1.45rem);
}

.component--rg-planfinder .rich-text p,
.component--rg-table .rich-text p {
    max-width: 900px;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rg-color-text);
}

.component--rg-planfinder .rich-text p:last-child,
.component--rg-table .rich-text p:last-child {
    margin-bottom: 0;
}

.component--rg-planfinder strong,
.component--rg-planfinder b,
.component--rg-table strong,
.component--rg-table b {
    font-weight: 700;
    color: var(--rg-color-black);
}

.component--rg-planfinder ul,
.component--rg-planfinder ol,
.component--rg-table ul,
.component--rg-table ol {
    margin: 0.75rem 0 0 1.25rem;
    padding: 0;
}

.component--rg-planfinder li,
.component--rg-table li {
    margin-bottom: 0.45rem;
    line-height: 1.45;
}

/* Einheitliche Tabellenoptik */

.component--rg-planfinder figure.table,
.component--rg-table figure.table {
    width: 100%;
    margin: 1.25rem 0 0 0;
}

.component--rg-planfinder table,
.component--rg-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    background: #ffffff;
    font-size: 1rem;
    line-height: 1.45;
    table-layout: auto;
}

.component--rg-planfinder th,
.component--rg-planfinder td,
.component--rg-table th,
.component--rg-table td {
    padding: 0.8rem 0.9rem;
    vertical-align: top;
    text-align: left;
    color: var(--rg-color-text);
    border: 0;
    border-bottom: 1px solid #dfe5ea;
}

.component--rg-planfinder th,
.component--rg-table th {
    background: #e9eef2;
    font-weight: 700;
    color: var(--rg-color-black);
}

.component--rg-planfinder tr:last-child td,
.component--rg-table tr:last-child td {
    border-bottom: none;
}

.component--rg-planfinder a,
.component--rg-table a {
    color: var(--rg-color-blue-dark);
    font-weight: 700;
    text-decoration: none;
}

.component--rg-planfinder a:hover,
.component--rg-planfinder a:focus,
.component--rg-table a:hover,
.component--rg-table a:focus {
    color: var(--rg-color-black);
    text-decoration: underline;
}

.component--rg-planfinder td a,
.component--rg-planfinder td strong,
.component--rg-table td a,
.component--rg-table td strong {
    font-weight: 700;
    color: var(--rg-color-black);
    text-decoration: none;
}

.component--rg-planfinder td a:hover,
.component--rg-planfinder td a:focus,
.component--rg-table td a:hover,
.component--rg-table td a:focus {
    color: var(--rg-color-blue-dark);
    text-decoration: underline;
}

/* Buttons innerhalb von Tabellen-/Tool-Blöcken */

.component--rg-planfinder .rg-button-link,
.component--rg-planfinder a.rg-button-link,
.component--rg-table .rg-button-link,
.component--rg-table a.rg-button-link {
    display: inline-block;
    margin-top: 0.85rem;
    padding: 0.72rem 1.15rem;
    background: var(--rg-color-blue);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1;
    text-decoration: none;
    border-radius: 2px;
    border: 1px solid var(--rg-color-blue);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.component--rg-planfinder .rg-button-link:hover,
.component--rg-planfinder .rg-button-link:focus,
.component--rg-planfinder a.rg-button-link:hover,
.component--rg-planfinder a.rg-button-link:focus,
.component--rg-table .rg-button-link:hover,
.component--rg-table .rg-button-link:focus,
.component--rg-table a.rg-button-link:hover,
.component--rg-table a.rg-button-link:focus {
    background: var(--rg-color-blue-dark);
    border-color: var(--rg-color-blue-dark);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ------------------------------------------------------------
   RG CTA
   ------------------------------------------------------------ */

.component--rg-cta {
    max-width: 980px;
    margin: 1.2rem auto 2.8rem auto;
    padding: 0 1.5rem;
    font-family: var(--rg-font-body);
}

.component--rg-cta > .component__content {
    padding: 1.5rem 2rem;
    background: var(--rg-color-black);
    color: #ffffff;
    border: 0;
}

.component--rg-cta .headline,
.component--rg-cta h2,
.component--rg-cta h3,
.component--rg-cta p {
    color: #ffffff;
}

.component--rg-cta .headline,
.component--rg-cta h2,
.component--rg-cta h3 {
    margin: 0 0 0.8rem 0;
    font-family: var(--rg-font-headline);
    font-size: clamp(1.45rem, 1.9vw, 1.65rem);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.component--rg-cta .rich-text p,
.component--rg-cta p {
    max-width: 860px;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #ffffff;
}

.component--rg-cta .rich-text p:last-child,
.component--rg-cta p:last-child {
    margin-bottom: 0;
}

.component--rg-cta a,
.component--rg-cta .rg-button-link {
    display: inline-block;
    margin: 0.35rem 0.6rem 0.35rem 0;
    padding: 0.75rem 1.25rem;
    background: var(--rg-color-blue);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1;
    text-decoration: none;
    border: 1px solid var(--rg-color-blue);
    border-radius: 2px;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.component--rg-cta a:hover,
.component--rg-cta a:focus,
.component--rg-cta .rg-button-link:hover,
.component--rg-cta .rg-button-link:focus {
    background: var(--rg-color-blue-dark);
    border-color: var(--rg-color-blue-dark);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ------------------------------------------------------------
   Mobile Content-Elemente
   ------------------------------------------------------------ */

@media (max-width: 767px) {
    .component--rg-hero {
        max-width: 100%;
        margin: 1.45rem auto 1.1rem auto;
        padding: 0 1rem;
    }

    .component--rg-hero h1 {
        font-size: 1.7rem !important;
        max-width: 100%;
        line-height: 1.12 !important;
    }

    .component--rg-hero p {
        max-width: 100%;
        font-size: 0.98rem !important;
        line-height: 1.48 !important;
    }

    .component--rg-planfinder,
    .component--rg-table {
        max-width: 100%;
        margin: 1.1rem auto 1.8rem auto;
        padding: 0 1rem;
    }

    .component--rg-planfinder > .component__content,
    .component--rg-table > .component__content {
        padding: 1.15rem 1rem;
    }

    /* RG Tabelle / Tool Block:
       Der graue Hintergrund umfasst mobil die komplette Breite
       der 680px breiten Tabelle inklusive Innenabstand. */
    .component--rg-table > .component__content {
        min-width: calc(680px + 2rem);
        box-sizing: border-box;
    }

    .component--rg-planfinder .headline,
    .component--rg-planfinder h2,
    .component--rg-table .headline,
    .component--rg-table h2 {
        font-size: 1.42rem !important;
        line-height: 1.15 !important;
    }

    .component--rg-planfinder .rich-text p,
    .component--rg-table .rich-text p {
        font-size: 0.98rem !important;
        line-height: 1.48 !important;
    }

    .component--rg-planfinder figure.table,
    .component--rg-table figure.table {
        display: block;
        width: 100%;
        margin: 1rem 0 0 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .component--rg-planfinder table,
    .component--rg-table table {
        min-width: 680px;
        font-size: 0.95rem;
    }

    .component--rg-planfinder th,
    .component--rg-planfinder td,
    .component--rg-table th,
    .component--rg-table td {
        padding: 0.65rem 0.7rem;
        font-size: 0.95rem;
        line-height: 1.38;
    }

    .component--rg-cta {
        max-width: 100%;
        margin: 1.1rem auto 2.2rem auto;
        padding: 0 1rem;
    }

    .component--rg-cta > .component__content {
        padding: 1.15rem 1rem;
    }

    .component--rg-cta .headline,
    .component--rg-cta h2,
    .component--rg-cta h3 {
        font-size: 1.35rem !important;
        line-height: 1.18 !important;
    }

    .component--rg-cta .rich-text p,
    .component--rg-cta p {
        font-size: 0.98rem !important;
        line-height: 1.48 !important;
    }

    .component--rg-cta a,
    .component--rg-cta .rg-button-link {
        display: block;
        width: 100%;
        margin: 0.55rem 0 0 0;
        text-align: center;
    }
}

/* ==========================================================
   Mobile Fix: Planfinder wieder als Karten,
   Zielzeit-Tabelle bleibt Vergleichstabelle
   ========================================================== */

@media (max-width: 767px) {

    /* ------------------------------------------------------
       RG Planfinder mobil: Kartenlogik wiederherstellen
       ------------------------------------------------------ */

    .component--rg-planfinder figure.table {
        margin: 1rem 0 1.1rem 0 !important;
        overflow: visible !important;
    }

    .component--rg-planfinder table,
    .component--rg-planfinder tbody,
    .component--rg-planfinder tr,
    .component--rg-planfinder td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .component--rg-planfinder thead {
        display: none !important;
    }

    .component--rg-planfinder tr {
        margin: 0 0 0.9rem 0 !important;
        padding: 0.85rem 0.9rem !important;
        background: #ffffff !important;
        border: 1px solid var(--rg-color-border-soft) !important;
    }

    .component--rg-planfinder tr:last-child {
        margin-bottom: 0 !important;
    }

    .component--rg-planfinder td {
        padding: 0.15rem 0 0.5rem 0 !important;
        border: 0 !important;
        font-size: 0.98rem !important;
        line-height: 1.4 !important;
    }

    .component--rg-planfinder td:last-child {
        padding-bottom: 0 !important;
    }

    .component--rg-planfinder td::before {
        display: block !important;
        margin: 0 0 0.12rem 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        color: var(--rg-color-muted) !important;
    }

    .component--rg-planfinder td:nth-child(1)::before {
        content: "Ziel";
    }

    .component--rg-planfinder td:nth-child(2)::before {
        content: "Plan";
    }

    .component--rg-planfinder td:nth-child(3)::before {
        content: "Geeignet für";
    }

    .component--rg-planfinder td:nth-child(2) {
        font-weight: 700 !important;
        color: var(--rg-color-black) !important;
    }

    /* ------------------------------------------------------
       RG Zielzeit-Tabelle mobil: Vergleichstabelle behalten
       ------------------------------------------------------ */

    .component--rg-table figure.table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .component--rg-table table {
        min-width: 680px !important;
    }

    /* ------------------------------------------------------
       RG CTA mobil: Button darf nicht überlaufen
       ------------------------------------------------------ */

    .component--rg-cta a,
    .component--rg-cta .rg-button-link {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0.7rem 0 0 0 !important;
        text-align: center !important;
    }
}

/* ==========================================================
   RunnersGate: Decision Flow / Entscheidungsgrafik
   ========================================================== */

/* Plain-HTML-Element als RunnersGate-Komponenten-Container */
.component--html {
  max-width: 980px;
  margin: 1.2rem auto 2.2rem auto;
  padding: 0 1.5rem;
  font-family: var(--rg-font-body);
  color: var(--rg-color-text);
  box-sizing: border-box;
}

.component--html > .component__content {
  padding: 0;
  max-width: none;
}

/* Decision Flow / Entscheidungsgrafik */
.rg-decision-flow {
  width: 100%;
  margin: 0;
  padding: 2rem;
  background: #f4f6f8;
  border: 1px solid #d7dce0;
  box-sizing: border-box;
}

.rg-decision-flow__inner {
  max-width: 100%;
}

.rg-decision-flow__header {
  text-align: center;
  margin-bottom: 2rem;
}

.rg-decision-flow__header h2 {
  margin: 0 0 0.5rem;
  font-family: inherit;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: #050505;
}

.rg-decision-flow__header p {
  margin: 0;
  font-size: 1.05rem;
  color: #333;
}

.rg-decision-flow__steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
}

.rg-decision-flow__step {
  min-height: 210px;
  padding: 1.4rem 1rem;
  background: #fff;
  border: 1px solid #d2d7db;
  border-radius: 10px;
  text-align: center;
  box-sizing: border-box;
}

.rg-decision-flow__icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 1rem;
  border: 3px solid #00a6c8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00a6c8;
  font-weight: 800;
  font-size: 1.45rem;
}

.rg-decision-flow__step h3 {
  margin: 0 0 0.75rem;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  color: #050505;
}

.rg-decision-flow__step h3::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin: 0.7rem auto 0;
  background: #00a6c8;
}

.rg-decision-flow__step p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #222;
}

.rg-decision-flow__arrow {
  color: #00a6c8;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.rg-decision-flow__result {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #fff;
  border: 3px solid #00a6c8;
  border-radius: 10px;
  text-align: center;
}

.rg-decision-flow__result h3 {
  margin: 0 0 1.2rem;
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  color: #050505;
}

.rg-decision-flow__plans {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.rg-decision-flow__plans span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid #00a6c8;
  border-radius: 6px;
  font-weight: 800;
  color: #050505;
}

.rg-decision-flow__result p {
  margin: 0;
  font-size: 0.98rem;
  color: #222;
}

/* Mobile */
@media (max-width: 767px) {
  .rg-decision-flow {
    margin: 2rem 0;
    padding: 1.2rem;
  }

  .rg-decision-flow__header {
    text-align: left;
    margin-bottom: 1.4rem;
  }

  .rg-decision-flow__header h2 {
    font-size: 1.55rem;
  }

  .rg-decision-flow__steps {
    display: block;
  }

  .rg-decision-flow__step {
    min-height: auto;
    padding: 1.2rem;
    text-align: left;
  }

  .rg-decision-flow__icon {
    margin: 0 0 0.8rem;
    width: 46px;
    height: 46px;
    font-size: 1.15rem;
  }

  .rg-decision-flow__step h3::after {
    margin-left: 0;
    margin-right: 0;
  }

  .rg-decision-flow__arrow {
    display: block;
    text-align: center;
    transform: rotate(90deg);
    margin: 0.4rem 0;
  }

  .rg-decision-flow__result {
    padding: 1.2rem;
    text-align: left;
  }

  .rg-decision-flow__plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .rg-decision-flow__plans span {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .component--html {
    max-width: 100%;
    margin: 1.1rem auto 1.8rem auto;
    padding: 0 1rem;
  }

  .component--html > .component__content {
    padding: 0;
  }

  .rg-decision-flow {
    margin: 0;
    padding: 1.2rem;
  }
}

/* ==========================================================
   RunnersGate Spoke-Module:
   RG Kompakt, RG Info-Box, RG KPI, RG Check, RG Sprungziele
   ========================================================== */

/* ----------------------------------------------------------
   RG Kompakt
   Reduziert Abstände ohne eigene Box-Optik
   ---------------------------------------------------------- */

.component--rg-compact {
    max-width: 980px;
    margin: 0.7rem auto 1.1rem auto;
    padding: 0 1.5rem;
    font-family: var(--rg-font-body);
    color: var(--rg-color-text);
}

.component--rg-compact > .component__content {
    padding: 0;
}

.component--rg-compact h2,
.component--rg-compact h3,
.component--rg-compact .headline {
    margin: 0 0 0.65rem 0;
    font-family: var(--rg-font-headline);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.015em;
    color: var(--rg-color-black);
}

.component--rg-compact h2,
.component--rg-compact .headline {
    font-size: clamp(1.45rem, 1.9vw, 1.75rem);
}

.component--rg-compact h3 {
    font-size: clamp(1.2rem, 1.6vw, 1.4rem);
}

.component--rg-compact .rich-text p,
.component--rg-compact p {
    max-width: 880px;
    margin: 0 0 0.65rem 0;
    font-size: 1rem;
    line-height: 1.5;
}

.component--rg-compact p:last-child {
    margin-bottom: 0;
}

/* Links in RG Kompakt wie im RG Planfinder darstellen */
.component--rg-compact .rich-text a:not(.rg-button-link),
.component--rg-compact .rich-text a:not(.rg-button-link):link,
.component--rg-compact .rich-text a:not(.rg-button-link):visited {
    color: #35b9d6 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.component--rg-compact .rich-text a:not(.rg-button-link)::after {
    display: none !important;
    content: none !important;
}

.component--rg-compact .rich-text a:not(.rg-button-link):hover,
.component--rg-compact .rich-text a:not(.rg-button-link):focus {
    color: var(--rg-color-blue-dark) !important;
    text-decoration: underline !important;
}

/* ----------------------------------------------------------
   RG Info-Box
   Ruhige Hinweis-/Einordnungsbox für kurze Erklärblöcke
   ---------------------------------------------------------- */

.component--rg-info {
    max-width: 980px;
    margin: 1.2rem auto 1.8rem auto;
    padding: 0 1.5rem;
    font-family: var(--rg-font-body);
    color: var(--rg-color-text);
}

.component--rg-info > .component__content {
    padding: 1.3rem 1.6rem;
    background: #f6f7f8;
    border: 1px solid var(--rg-color-border-soft);
    box-shadow: none;
}

.component--rg-info h2,
.component--rg-info h3,
.component--rg-info .headline {
    margin: 0 0 0.7rem 0;
    font-family: var(--rg-font-headline);
    font-size: clamp(1.35rem, 1.8vw, 1.6rem);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--rg-color-black);
}

.component--rg-info .rich-text p,
.component--rg-info p {
    max-width: 880px;
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    line-height: 1.5;
}

.component--rg-info p:last-child {
    margin-bottom: 0;
}

.component--rg-info strong,
.component--rg-info b {
    color: var(--rg-color-black);
    font-weight: 700;
}

.component--rg-info a {
    color: var(--rg-color-blue-dark);
    font-weight: 700;
    text-decoration: none;
}

.component--rg-info a:hover,
.component--rg-info a:focus {
    color: var(--rg-color-black);
    text-decoration: underline;
}

/* ----------------------------------------------------------
   RG KPI / Werte-Kacheln
   Für Zielzeit-Spokes: Pace, Zielzeit, km/h, Wochenumfang usw.
   ---------------------------------------------------------- */

.component--rg-kpi {
    max-width: 980px;
    margin: 1.1rem auto 1.6rem auto;
    padding: 0 1.5rem;
    font-family: var(--rg-font-body);
    color: var(--rg-color-text);
}

.component--rg-kpi > .component__content {
    padding: 1.4rem 1.6rem;
    background: #f6f7f8;
    border: 1px solid var(--rg-color-border-soft);
    box-shadow: none;
}

.component--rg-kpi h2,
.component--rg-kpi h3,
.component--rg-kpi .headline {
    margin: 0 0 1rem 0;
    font-family: var(--rg-font-headline);
    font-size: clamp(1.45rem, 1.9vw, 1.7rem);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--rg-color-black);
}

.component--rg-kpi .rich-text p,
.component--rg-kpi p {
    max-width: 880px;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    line-height: 1.5;
}

.component--rg-kpi ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.component--rg-kpi li {
    min-height: 92px;
    margin: 0;
    padding: 0.95rem 1rem;
    background: #ffffff;
    border: 1px solid #dfe5ea;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.35;
}

.component--rg-kpi li strong,
.component--rg-kpi li b {
    display: block;
    margin: 0 0 0.3rem 0;
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rg-color-muted);
}

.component--rg-kpi li a {
    color: var(--rg-color-black);
    font-weight: 700;
    text-decoration: none;
}

.component--rg-kpi li a:hover,
.component--rg-kpi li a:focus {
    color: var(--rg-color-blue-dark);
    text-decoration: underline;
}

/* ----------------------------------------------------------
   RG Check / Realismus-Check
   Für Machbarkeit, Voraussetzungen und Grün/Gelb/Rot-Einordnung
   ---------------------------------------------------------- */

.component--rg-check {
    max-width: 980px;
    margin: 1.4rem auto 2rem auto;
    padding: 0 1.5rem;
    font-family: var(--rg-font-body);
    color: var(--rg-color-text);
}

.component--rg-check > .component__content {
    padding: 1.6rem 2rem;
    background: #f6f7f8;
    border: 1px solid var(--rg-color-border-soft);
    box-shadow: none;
}

.component--rg-check h2,
.component--rg-check h3,
.component--rg-check .headline {
    margin: 0 0 0.75rem 0;
    font-family: var(--rg-font-headline);
    font-size: clamp(1.5rem, 2vw, 1.8rem);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--rg-color-black);
}

.component--rg-check .rich-text p,
.component--rg-check p {
    max-width: 880px;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    line-height: 1.5;
}

.component--rg-check ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0 0;
    padding: 0;
    list-style: none;
}

.component--rg-check li {
    position: relative;
    margin: 0;
    padding: 0.85rem 1rem 0.85rem 2.6rem;
    background: #ffffff;
    border: 1px solid #dfe5ea;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.4;
}

.component--rg-check li::before {
    content: "✓";
    position: absolute;
    left: 0.95rem;
    top: 0.78rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--rg-color-blue);
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.2rem;
    font-weight: 700;
    text-align: center;
}

.component--rg-check strong,
.component--rg-check b {
    color: var(--rg-color-black);
    font-weight: 700;
}

.component--rg-check table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 0 0;
    background: #ffffff;
    font-size: 1rem;
    line-height: 1.45;
}

.component--rg-check th,
.component--rg-check td {
    padding: 0.8rem 0.9rem;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid #dfe5ea;
}

.component--rg-check th {
    background: #e9eef2;
    font-weight: 700;
    color: var(--rg-color-black);
}

.component--rg-check tr:last-child td {
    border-bottom: none;
}

/* ----------------------------------------------------------
   RG Sprungziele / Button-Leiste
   Kleine Above-the-fold-Navigation zu Pace, Check, Plan usw.
   ---------------------------------------------------------- */

.component--rg-jumpnav {
    max-width: 980px;
    margin: 0.8rem auto 1.6rem auto;
    padding: 0 1.5rem;
    font-family: var(--rg-font-body);
    color: var(--rg-color-text);
}

.component--rg-jumpnav > .component__content {
    padding: 1rem 1.2rem;
    background: #ffffff;
    border: 1px solid var(--rg-color-border-soft);
    box-shadow: none;
}

.component--rg-jumpnav .rich-text p,
.component--rg-jumpnav p {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
}

.component--rg-jumpnav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.component--rg-jumpnav li {
    margin: 0;
    padding: 0;
}

.component--rg-jumpnav a {
    display: inline-block;
    padding: 0.72rem 1.05rem;
    background: var(--rg-color-blue);
    color: #ffffff;
    border: 1px solid var(--rg-color-blue);
    border-radius: 2px;
    font-weight: 700;
    font-size: 0.96rem;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.component--rg-jumpnav a:hover,
.component--rg-jumpnav a:focus {
    background: var(--rg-color-blue-dark);
    border-color: var(--rg-color-blue-dark);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ----------------------------------------------------------
   Vertikale Verdichtung zwischen Spoke-Above-the-fold-Modulen
   ---------------------------------------------------------- */

.component--rg-hero + .component--rg-kpi,
.component--rg-hero + .component--rg-jumpnav,
.component--rg-kpi + .component--rg-jumpnav,
.component--rg-jumpnav + .component--rg-check,
.component--rg-kpi + .component--rg-check {
    margin-top: 0.9rem;
}

/* ----------------------------------------------------------
   Mobile: Spoke-Module
   ---------------------------------------------------------- */

@media (max-width: 767px) {
    .component--rg-compact,
    .component--rg-info,
    .component--rg-kpi,
    .component--rg-check,
    .component--rg-jumpnav {
        max-width: 100%;
        margin: 1.05rem auto 1.5rem auto;
        padding: 0 1rem;
    }

    .component--rg-info > .component__content,
    .component--rg-kpi > .component__content,
    .component--rg-check > .component__content,
    .component--rg-jumpnav > .component__content {
        padding: 1.1rem 1rem;
    }

    .component--rg-info h2,
    .component--rg-info h3,
    .component--rg-info .headline,
    .component--rg-kpi h2,
    .component--rg-kpi h3,
    .component--rg-kpi .headline,
    .component--rg-check h2,
    .component--rg-check h3,
    .component--rg-check .headline {
        font-size: 1.38rem !important;
        line-height: 1.16 !important;
    }

    .component--rg-info .rich-text p,
    .component--rg-info p,
    .component--rg-kpi .rich-text p,
    .component--rg-kpi p,
    .component--rg-check .rich-text p,
    .component--rg-check p {
        font-size: 0.98rem !important;
        line-height: 1.48 !important;
    }

    .component--rg-kpi ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .component--rg-kpi li {
        min-height: 84px;
        padding: 0.8rem 0.85rem;
        font-size: 0.98rem;
    }

    .component--rg-check ul {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .component--rg-check li {
        padding: 0.78rem 0.85rem 0.78rem 2.45rem;
        font-size: 0.98rem;
    }

    .component--rg-check li::before {
        left: 0.85rem;
        top: 0.72rem;
    }

    .component--rg-check figure.table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .component--rg-check table {
        min-width: 620px;
        font-size: 0.95rem;
    }

    .component--rg-jumpnav .rich-text p,
    .component--rg-jumpnav p,
    .component--rg-jumpnav ul {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .component--rg-jumpnav a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .component--rg-kpi ul {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------
   RG Planfinder: Plan-Links sichtbar, aber ruhig
   ------------------------------------------------------------ */

.component--rg-planfinder td:nth-child(2) a {
    color: var(--rg-color-blue-dark) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.component--rg-planfinder td:nth-child(2) a::after {
    display: none !important;
    content: none !important;
}

.component--rg-planfinder td:nth-child(2) a:hover,
.component--rg-planfinder td:nth-child(2) a:focus {
    color: var(--rg-color-blue) !important;
    text-decoration: underline !important;
    border-bottom: 0 !important;
}

/* ------------------------------------------------------------
   RG Planfinder: Plan-Links blau, ruhig, ohne Pfeil
   ------------------------------------------------------------ */

.component--rg-planfinder td:nth-child(2) a,
.component--rg-planfinder td:nth-child(2) a:link,
.component--rg-planfinder td:nth-child(2) a:visited,
.component--rg-planfinder td:nth-child(2) a strong,
.component--rg-planfinder td:nth-child(2) strong a {
    color: #35b9d6 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.component--rg-planfinder td:nth-child(2) a::after {
    display: none !important;
    content: none !important;
}

.component--rg-planfinder td:nth-child(2) a:hover,
.component--rg-planfinder td:nth-child(2) a:focus,
.component--rg-planfinder td:nth-child(2) a:hover strong,
.component--rg-planfinder td:nth-child(2) strong a:hover {
    color: #35b9d6 !important;
    text-decoration: underline !important;
    border-bottom: 0 !important;
}

/* ==========================================================
   RunnersGate Mobile Header: Menü wie Produktivseite
   Hamburger oben rechts, keine schwarze Menüleiste
   ========================================================== */

@media (max-width: 768px) {

    .rg-header {
        position: relative !important;
    }

    /* Mobile: schwarze Menüzeile unter der Suche ausblenden */
    .rg-header__navrow {
        position: absolute !important;
        top: 0.65rem !important;
        right: 0.75rem !important;
        z-index: 50 !important;
        width: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    .rg-header__navrow-inner {
        width: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Menübutton als schwarzes Quadrat oben rechts */
    .rg-header__menu-button {
        display: block !important;
        position: static !important;
        width: 48px !important;
        height: 48px !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .rg-header__menu-button .button {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #000000 !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
    }

    .rg-header__menu-button .button__content,
    .rg-header__menu-button .button__text {
        width: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 0 !important;
        line-height: 1 !important;
        color: transparent !important;
    }

    /* Text "Menu" ausblenden */
    .rg-header__menu-button .button__text {
        color: transparent !important;
        overflow: hidden !important;
    }

    /* Hamburger sichtbar */
    .rg-header__menu-button .icon--menu {
        display: block !important;
        width: 32px !important;
        height: 32px !important;
        color: #ffffff !important;
        fill: currentColor !important;
    }

    /* Close-X im Button ausblenden, damit nicht beide Icons erscheinen */
    .rg-header__menu-button .icon--close {
        display: none !important;
    }

    .rg-header__menu-button .button:hover,
    .rg-header__menu-button .button:focus {
        background: #111111 !important;
        color: #ffffff !important;
    }

    /* Brandbar rechts etwas Luft für Hamburger geben */
    .rg-header__brandbar-inner {
        position: relative !important;
        padding-top: 0.55rem !important;
        padding-right: 4.5rem !important;
    }
}

/* ==========================================================
   RunnersGate Mobile Header: Feinschliff Suche / Lupe / Linie
   ========================================================== */

@media (max-width: 768px) {

    /* blauen Strich unter der mobilen Brandbar entfernen */
    .rg-header__brandbar {
        border-bottom: 0 !important;
    }

    /* Padding wieder symmetrischer, damit Logo und Suche mittiger sitzen */
    .rg-header__brandbar-inner {
        padding: 0.55rem 1rem 0.65rem 1rem !important;
        align-items: center !important;
    }

    /* Suche mobil mittig und etwas breiter */
    .rg-header__search {
        width: min(88vw, 344px) !important;
        max-width: 344px !important;
        margin: 0.55rem auto 0 auto !important;
    }

    .rg-header__search-input {
        height: 44px !important;
        font-size: 0.98rem !important;
        padding: 0.65rem 0.9rem !important;
    }

    /* Suchbutton / Lupe größer */
    .rg-header__search-button {
        width: 50px !important;
        height: 44px !important;
        min-width: 50px !important;
        min-height: 44px !important;
    }

    .rg-header__search-button::before {
        width: 20px !important;
        height: 20px !important;
    }

    /* Hamburger bleibt oben rechts */
    .rg-header__navrow {
        top: 0.65rem !important;
        right: 0.75rem !important;
    }
}

/* ==========================================================
   RunnersGate Mobile Header: Suchfeld exakt an Lupe angleichen
   ========================================================== */

@media (max-width: 768px) {

    .rg-header__search {
        display: flex !important;
        align-items: stretch !important;
        height: 44px !important;
    }

    .rg-header__search-input {
        height: 44px !important;
        min-height: 44px !important;
        line-height: 44px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
    }

    .rg-header__search-button {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        box-sizing: border-box !important;
        align-self: stretch !important;
    }
}


/* =========================================================
   RunnersGate: Sub-4-Entscheidungsgrafik
   Einsatz: Spoke-Seite "Marathon unter 4 Stunden"
   ========================================================= */

.rg-sub4-decision {
  margin: 2.5rem 0;
  padding: 2rem;
  border: 1px solid #d4d9dd;
  background: #f4f6f7;
}

.rg-sub4-decision__header {
  max-width: 900px;
  margin-bottom: 1.75rem;
}

.rg-sub4-decision__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #009fc7;
}

.rg-sub4-decision h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.rg-sub4-decision h3 {
  margin-top: 0;
  margin-bottom: 0.35rem;
}

.rg-sub4-decision p {
  margin-top: 0;
}

.rg-sub4-decision__flow {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.rg-sub4-decision__step {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: 1rem 1rem 1rem 0.9rem;
  border: 1px solid #dce2e6;
  background: #ffffff;
}

.rg-sub4-decision__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 2.05rem;
  bottom: -0.85rem;
  width: 2px;
  height: 0.85rem;
  background: #009fc7;
}

.rg-sub4-decision__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  font-weight: 700;
  color: #ffffff;
  background: #009fc7;
  border-radius: 999px;
}

.rg-sub4-decision__step p {
  margin-bottom: 0;
}

.rg-sub4-decision__result {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.rg-sub4-decision__result-card {
  padding: 1rem;
  background: #ffffff;
  border: 1px solid #dce2e6;
  border-left-width: 0.45rem;
}

.rg-sub4-decision__result-card h3 {
  font-size: 1rem;
}

.rg-sub4-decision__result-card p {
  margin-bottom: 0;
}

.rg-sub4-decision__result-card--green {
  border-left-color: #2f8f46;
}

.rg-sub4-decision__result-card--yellow {
  border-left-color: #d7a600;
}

.rg-sub4-decision__result-card--red {
  border-left-color: #c63d32;
}

/* Mobile Optimierung */
@media (max-width: 768px) {
  .rg-sub4-decision {
    margin: 2rem 0;
    padding: 1.25rem;
  }

  .rg-sub4-decision__step {
    grid-template-columns: 2.2rem 1fr;
    gap: 0.8rem;
    padding: 0.9rem;
  }

  .rg-sub4-decision__step:not(:last-child)::after {
    left: 1.95rem;
  }

  .rg-sub4-decision__result {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   Mobile Fix: Startbereitschafts-Check läuft nicht über
   ========================================================== */

@media (max-width: 768px) {
    .rg-sub4-decision {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .rg-sub4-decision__step {
        width: 100%;
        max-width: 100%;
        grid-template-columns: 2.2rem minmax(0, 1fr);
        box-sizing: border-box;
    }

    .rg-sub4-decision__step > div,
    .rg-sub4-decision__result-card {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .rg-sub4-decision h2,
    .rg-sub4-decision h3,
    .rg-sub4-decision p {
        overflow-wrap: break-word;
    }
}

/* ==========================================================
   RunnersGate Breadcrumb
   ========================================================== */

.rg-breadcrumb {
    max-width: 1180px;
    margin: 1rem auto 0;
    padding: 0 1.5rem;
    font-family: var(--rg-font-body);
    font-size: 0.9rem;
    line-height: 1.4;
}

.rg-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rg-breadcrumb__item {
    display: flex;
    align-items: center;
    color: var(--rg-color-muted);
}

.rg-breadcrumb__home {
    display: inline-flex;
    align-items: center;
}

.rg-breadcrumb__home-icon {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
}

.rg-breadcrumb__home-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Fallback for cached/older breadcrumb markup:
 * Keep "Home" accessible, but show the house icon visually.
 */
.rg-breadcrumb__item:first-child > a:not(.rg-breadcrumb__home) {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    overflow: hidden;
    font-size: 0;
    line-height: 1;
    vertical-align: middle;
    background-color: var(--rg-color-blue-dark);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H392c-22.1 0-40-17.9-40-40V360c0-13.3-10.7-24-24-24h-80c-13.3 0-24 10.7-24 24v112c0 22.1-17.9 40-40 40H104c-22.1 0-40-17.9-40-40V288H32c-18 0-32-14-32-32.1 0-9 3.7-17.6 10.3-23.7L266.4 8c12.2-10.7 30.9-10.7 43.1 0l256.2 224.2c6.6 6.1 10.3 14.7 10.3 23.3z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H392c-22.1 0-40-17.9-40-40V360c0-13.3-10.7-24-24-24h-80c-13.3 0-24 10.7-24 24v112c0 22.1-17.9 40-40 40H104c-22.1 0-40-17.9-40-40V288H32c-18 0-32-14-32-32.1 0-9 3.7-17.6 10.3-23.7L266.4 8c12.2-10.7 30.9-10.7 43.1 0l256.2 224.2c6.6 6.1 10.3 14.7 10.3 23.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rg-breadcrumb__item:first-child > a:not(.rg-breadcrumb__home):hover,
.rg-breadcrumb__item:first-child > a:not(.rg-breadcrumb__home):focus-visible {
    background-color: var(--rg-color-black);
    text-decoration: none;
}

.rg-breadcrumb__item + .rg-breadcrumb__item::before {
    content: "/";
    margin: 0 0.5rem;
    color: #b7b7b7;
}

.rg-breadcrumb a {
    color: var(--rg-color-blue-dark);
    font-weight: 600;
    text-decoration: none;
}

.rg-breadcrumb a:hover,
.rg-breadcrumb a:focus-visible {
    color: var(--rg-color-black);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .rg-breadcrumb {
        margin-top: 0.75rem;
        padding: 0 1rem;
        font-size: 0.85rem;
    }

    .rg-breadcrumb__item + .rg-breadcrumb__item::before {
        margin: 0 0.35rem;
    }
}

.rg-breadcrumb {
    width: 100%;
    max-width: 1180px;
    box-sizing: border-box;
    margin: 1rem auto 0;
    padding: 0 1.5rem;
}

.rg-breadcrumb__list {
    max-width: none;
}