body {
    --header-height: 84px;
    --header-color: #000;
    --header-bg: #fff;
    --header-divider: #e6e6e6;

    --header-menu-bg: #fff;
    --header-menu-color: #000;
    --header-menu-divider: rgb(0 0 0 / 20%);
    --header-flyout-eyebrow: #666;
}

.header {
    z-index: var(--z-header);
    position: relative;
    color: var(--header-color);
    background-color: var(--header-bg);
}

.header__bar {
    display: flex;
    align-items: center;
    gap: var(--gap-32);
    padding: 0 2rem;
    height: var(--header-height);
}

.neo-dark {
    --header-color: #fff;
    --header-bg: var(--SC-1, #040A17);
    --header-divider: rgb(255 255 255 / 16%);
    --header-menu-bg: var(--SC-1, #040A17);
    --header-menu-color: #fff;
    --header-menu-divider: rgb(255 255 255 / 20%);
    --header-flyout-eyebrow: rgb(255 255 255 / 60%);
}

.header--overlay {
    --header-color: #fff;
    --header-bg: transparent;
}

.header--menu-open {
    --header-bg: var(--header-menu-bg);
    --header-color: var(--header-menu-color);
    --header-divider: var(--header-menu-divider);
}

.header__logo a {
    display: flex;
    align-items: center;
}

.header__logo-svg {
    display: block;
    width: 51px;
    height: 51px;
}

.header__logo-svg--dark {
    display: none;
}

.neo-dark .header__logo-svg--light {
    display: none;
}

.neo-dark .header__logo-svg--dark {
    display: block;
}

.header--overlay .header__logo-svg--light {
    display: none;
}

.header--overlay .header__logo-svg--dark {
    display: block;
}

.header--menu-open .header__logo-svg--light {
    display: block;
}

.header--menu-open .header__logo-svg--dark {
    display: none;
}

.neo-dark .header--menu-open .header__logo-svg--light {
    display: none;
}

.neo-dark .header--menu-open .header__logo-svg--dark {
    display: block;
}

/* Nav: desktop */
.header__nav {
    display: flex;
    align-items: center;
    gap: var(--gap-8);
}

/* Theme Toggle */
.header__theme-toggle {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.header__theme-toggle-track {
    position: relative;
    display: flex;
    align-items: center;
    width: 64px;
    height: 32px;
    border-radius: 16px;
    background-color: var(--button-default-primary-enabled-bg);
    transition: background-color 0.3s ease;
}

.header__theme-toggle-icon {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 16px;
    transition: color 0.3s ease;
}

.header__theme-toggle-icon--light {
    left: 3px;
    color: var(--button-default-primary-enabled-bg);
}

.header__theme-toggle-icon--dark {
    right: 3px;
    color: #fff;
}


/* Library forces width/height: 24px on .BMW i.wi — override here to
   match the thumb size so flex centers the glyph correctly. */
.neo-ds.BMW i.header__theme-toggle-icon {
    width: 26px;
    height: 26px;
}

.neo-ds.BMW i.header__theme-toggle-icon--light {
    font-size: 22px;
}

.neo-ds.BMW i.header__theme-toggle-icon--dark {
    font-size: 17px;
}

.neo-ds.BMW.neo-dark i.header__theme-toggle-icon--light,
.neo-dark .neo-ds.BMW i.header__theme-toggle-icon--light {
    font-size: 17px;
    margin-top: 1px;
    /* optischer Ausgleich, da Mond-Glyph etwas höher sitzt */
}

.neo-ds.BMW.neo-dark i.header__theme-toggle-icon--dark,
.neo-dark .neo-ds.BMW i.header__theme-toggle-icon--dark {
    font-size: 22px;
}

.header__theme-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 1;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Dark mode: track wird weiß, thumb wird blau und wandert nach rechts.
   Sonne bleibt blau, Mond bleibt weiß. */
.neo-dark .header__theme-toggle-track {
    background-color: #fff;
}

.neo-dark .header__theme-toggle-thumb {
    background-color: var(--button-default-primary-enabled-bg);
    transform: translateX(32px);
}

.header__nav-footer {
    display: none;
}

.header__nav-panels {
    display: contents;
}

.main-menu__expand,
.main-menu__submenu {
    display: none;
}

.header__flyout {
    display: none;
}

/* Burger: versteckt auf Desktop */
.header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-5);
    width: 40px;
    height: 40px;
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--header-color);
}

.header__burger-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Burger-Animation: geöffnet */
.header__burger[aria-expanded="true"] .header__burger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.header__burger[aria-expanded="true"] .header__burger-bar:nth-child(2) {
    opacity: 0;
}

.header__burger[aria-expanded="true"] .header__burger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.s--financial-services,
.lg--financial-services {
    font-family: var(--general-typography-styles-font-family-body-2), sans-serif;
}

.s--financial-services {
    position: relative;
    z-index: var(--z-header);
    color: var(--header-color);
    padding: 16px 0;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
}

.lg--financial-services {
    position: relative;
    z-index: var(--z-header);
    color: var(--header-color);
    padding: 16px 0;
    display: none;
}

/* Unter 1280px: Burger-Menü */
@media (max-width: 1279px) {
    .header__burger {
        display: flex;
        margin-left: auto;
    }

    .header__bar>.header__theme-toggle {
        display: none;
    }

    .s--financial-services {
        font-size: 16px;
    }

    .header__nav {
        display: none;
        position: fixed;
        inset: calc(var(--header-top-offset, 0px) + var(--header-height)) 0 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        background-color: var(--header-menu-bg);
        color: var(--header-menu-color);
        z-index: var(--z-header);
        overflow: hidden;
    }

    .header__nav--open {
        display: flex;
        border-top: 1px solid var(--header-divider);
    }

    .header--menu-open {
        position: fixed;
        top: var(--header-top-offset, 0);
        left: 0;
        right: 0;
    }

    .header__nav-panels {
        display: block;
        position: relative;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .header__nav-footer {
        display: flex;
        flex-shrink: 0;
        justify-content: flex-end;
        align-items: center;
        padding: 24px;
    }
}

.header-menu-open {
    overflow: hidden;
}

@media (min-width: 1280px) {
    .header__bar {
        border-bottom: 1px solid currentColor;
    }

    .s--financial-services {
        display: none;
    }

    .lg--financial-services {
        display: flex;
    }

    .header__nav {
        align-self: stretch;
    }

    .header__flyout {
        display: block;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        z-index: calc(var(--z-header) + 1);
        background-color: var(--header-menu-bg);
        color: var(--header-menu-color);
        border-top: 1px solid var(--header-menu-divider);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }

    .header__nav:hover .header__flyout,
    .header__nav:focus-within .header__flyout {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .header:has(.header__nav:hover .header__flyout),
    .header:has(.header__nav:focus-within .header__flyout) {
        --header-bg: var(--header-menu-bg);
        --header-color: var(--header-menu-color);
        --header-divider: var(--header-menu-divider);
    }

    .header:has(.header__nav:hover .header__flyout) .header__logo-svg--light,
    .header:has(.header__nav:focus-within .header__flyout) .header__logo-svg--light {
        display: block;
    }

    .header:has(.header__nav:hover .header__flyout) .header__logo-svg--dark,
    .header:has(.header__nav:focus-within .header__flyout) .header__logo-svg--dark {
        display: none;
    }

    .neo-dark .header:has(.header__nav:hover .header__flyout) .header__logo-svg--light,
    .neo-dark .header:has(.header__nav:focus-within .header__flyout) .header__logo-svg--light {
        display: none;
    }

    .neo-dark .header:has(.header__nav:hover .header__flyout) .header__logo-svg--dark,
    .neo-dark .header:has(.header__nav:focus-within .header__flyout) .header__logo-svg--dark {
        display: block;
    }

    .header__flyout-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--gap-32);
        padding-top: 50px;
        padding-bottom: 64px;
        max-height: calc(100vh - var(--header-height) - var(--header-top-offset, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .header__flyout-col {
        flex: 0 0 auto;
        width: 240px;
    }

    .header__flyout-col--wide {
        width: calc(240px * 2 + var(--gap-32));
    }

    .header__flyout-col--wide .header__flyout-list {
        columns: 2;
        column-gap: var(--gap-32);
    }

    .header .header__nav .header__flyout-eyebrow {
        display: block;
        margin-bottom: var(--gap-16);
        font-size: 12px;
        font-weight: 300;
        line-height: 16px;
        color: var(--header-flyout-eyebrow);
        text-decoration: none;
    }

    .header__flyout-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .header__flyout-item {
        break-inside: avoid;
    }

    .header .header__nav .header__flyout-item a {
        display: block;
        padding: 8px 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 26px;
        color: inherit;
        text-decoration: none;
    }

    .header .header__nav .header__flyout-item a:hover,
    .header .header__nav .header__flyout-item a:focus-visible {
        color: var(--button-default-primary-enabled-bg);
    }
}

.main-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--gap-8);
}

.header .header__nav .main-menu__item {
    padding: 16px;
}

.header .header__nav .main-menu__item a {
    color: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
}

@media (max-width: 1279px) {

    .header .header__nav .main-menu,
    .header .header__nav .main-menu__submenu {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 32px 24px;
        list-style: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var(--header-menu-bg);
    }

    .header .header__nav .main-menu {
        height: 100%;
    }

    .header .header__nav .main-menu__submenu {
        position: absolute;
        inset: 0;
        height: 100%;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0.3s ease;
    }

    .header .header__nav .main-menu__submenu.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .header .header__nav .main-menu__item {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0;
        border-bottom: 1px solid var(--header-divider);
    }

    .header .header__nav .main-menu__item>a {
        flex: 1 1 auto;
        display: block;
        padding: 24px 0;
        font-size: 16px;
        font-weight: 300;
        line-height: 26px;
    }

    .header .header__nav .main-menu__expand {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 0 24px 12px;
        font-size: 20px;
        line-height: 1;
        color: inherit;
        background: none;
        border: none;
        cursor: pointer;
    }

    .header .header__nav .main-menu__back {
        display: block;
        width: 100%;
        padding: 0;
        border-bottom: 1px solid var(--header-divider);
    }

    .header .header__nav .main-menu__back-btn {
        display: flex;
        align-items: center;
        gap: var(--gap-8);
        width: 100%;
        padding: 24px 0;
        font-size: 16px;
        font-weight: 300;
        line-height: 26px;
        color: inherit;
        text-align: left;
        background: none;
        border: none;
        cursor: pointer;
    }

    .header .header__nav .main-menu__back-btn i {
        font-size: 20px;
        line-height: 1;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {

    .header .header__nav .main-menu,
    .header .header__nav .main-menu__submenu {
        align-items: center;
    }

    .header .header__nav .main-menu>.main-menu__item,
    .header .header__nav .main-menu__submenu>.main-menu__item,
    .header .header__nav .main-menu__submenu>.main-menu__back {
        width: 100%;
        max-width: 368px;
    }
}