:root {
    --merkur-blue: rgb(2, 38, 82);
    --merkur-light-blue: rgb(36, 75, 123);
    --merkur-blue-10: rgb(230, 233, 238);
    --merkur-blue-10-transp: rgba(230, 233, 238, 0.5);
    --merkur-blue-45: rgb(141, 157, 177);
    --merkur-blue-60: rgb(103, 125, 151);
    --merkur-blue-70: rgb(78, 103, 134);
    --merkur-darkest-blue: rgb(0, 23, 52);

    --merkur-yellow: rgb(255, 204, 0);
    --merkur-yellow-70: rgb(255, 221, 0);
    --merkur-yellow-120: rgb(249, 178, 1);

    --merkur-grey: rgb(137, 139, 142);
    --merkur-grey-30: rgb(201, 201, 201);
    --merkur-grey-30-transp: rgba(201, 201, 201, 0.3);
    --merkur-grey-120: rgb(109, 109, 109);
    --merkur-grey-120-transp: rgba(109, 109, 109, 0.2);
    --merkur-darker-grey: rgb(109, 109, 109);

    --merkur-red: rgb(235, 0, 0);
    --merkur-green: rgb(59, 193, 9);
    --merkur-white: rgb(248, 248, 248);

    --merkur-gradient-white: linear-gradient(180deg, rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 1) 100%);
    --merkur-gradient-white-opacity: 1;
    --merkur-gradient-blue: linear-gradient(180deg, rgba(0, 23, 52, 0) 0%, rgba(0, 23, 52, 0.81) 53%, rgba(0, 23, 52, 1) 100%);
    --merkur-gradient-blue-opacity: 0.63;

    --dark-background-merkur-green-on-dark: rgba(64, 175, 11, 1);
    --dark-background-merkur-grey-30-on-dark: rgba(203, 206, 208, 1);
    --dark-background-merkur-red-on-dark: rgba(199, 0, 0, 1);

    --ff-default: "Merkur Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --spacer-width: 100%;
}

/*Theme Light ||-----------*/
[data-bs-theme=light] {
    --bs-body-bg: var(--merkur-white);
    --bs-body-color: var(--merkur-darkest-blue);
    --bs-heading-color: var(--merkur-darkest-blue);
    --bs-border-color: var(--merkur-blue-70);

    /*Links*/
    --merkur-link-color: var(--merkur-blue);
    --merkur-link-icon-color: var(--merkur-yellow);
    --merkur-link-color-hover: var(--merkur-light-blue);
    --merkur-link-icon-color-hover: var(--merkur-blue);
    --merkur-link-color-focus: var(--merkur-light-blue);
    --merkur-link-icon-color-focus: var(--merkur-light-blue);
    --merkur-link-border-color-focus: var(--merkur-light-blue);
    --merkur-link-color-active: var(--merkur-light-blue);
    --merkur-link-icon-color-active: var(--merkur-yellow-120);

    /*Buttons*/
    --merkur-btn-primary-color: var(--merkur-blue);
    --merkur-btn-primary-bg-color: var(--merkur-yellow);
    --merkur-btn-primary-brd-color: var(--merkur-yellow);
    --merkur-btn-primary-bg-color-hover: var(--merkur-yellow-70);
    --merkur-btn-primary-brd-color-hover: var(--merkur-yellow-70);
    --merkur-btn-primary-bg-color-focus: var(--merkur-yellow);
    --merkur-btn-primary-brd-color-focus: var(--merkur-light-blue);
    --merkur-btn-primary-bg-color-active: var(--merkur-yellow-120);
    --merkur-btn-primary-brd-color-active: var(--merkur-yellow-120);

    --merkur-btn-secondary-color: var(--merkur-blue);
    --merkur-btn-secondary-bg-color: var(--merkur-white);
    --merkur-btn-secondary-brd-color: var(--merkur-blue);
    --merkur-btn-secondary-color-hover: var(--merkur-blue);
    --merkur-btn-secondary-bg-color-hover: var(--merkur-yellow);
    --merkur-btn-secondary-brd-color-hover: var(--merkur-yellow);
    --merkur-btn-secondary-bg-color-focus: var(--merkur-white);
    --merkur-btn-secondary-brd-color-focus: var(--merkur-light-blue);
    --merkur-btn-secondary-bg-color-active: var(--merkur-white);
    --merkur-btn-secondary-brd-color-active: var(--merkur-yellow-120);

    /*Navbar*/
    --merkur-nav-bg-image: url("//styles.merkur.group/MERKURcom/medien/grey.svg");
    --merkur-btn-navbar-color: var(--merkur-blue);
    --merkur-btn-navbar-border-color: var(--merkur-blue);
    --merkur-btn-navbar-bg-color: var(--merkur-blue-10);
    --merkur-textlink-navbar-color: var(--merkur-darkest-blue);
    --merkur-textlink-navbar-hover-color: var(--merkur-darkest-blue);
    --merkur-textlink-navbar-icon-color: var(--merkur-yellow);
    --merkur-textlink-navbar-icon-hover-color: var(--merkur-yellow);

    /*Stages*/
    --merkur-stage-content: var(--merkur-gradient-white);
    --merkur-stage-content-opacity: var(--merkur-gradient-white-opacity);

    /*Slider*/
    --merkur-slider-logo-prev-background-image: linear-gradient(270deg, rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 0.81) 53%, rgba(248, 248, 248, 1) 100%);
    --merkur-slider-logo-next-background-image: linear-gradient(90deg, rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 0.81) 53%, rgba(248, 248, 248, 1) 100%);

    /*Cards*/
    --merkur-card-bg-color: var(--merkur-blue-10);
    --merkur-card-bg-color-0-alpha: rgba(230, 233, 238, 0);
    --merkur-card-bg-hover-color: var(--merkur-light-blue);
    --merkur-card-content-hover-color: var(--merkur-white);
    --merkur-card-body-blur-color: var(--merkur-blue-10-transp);

    /*Teaser*/
    --merkur-article-teaser-bg-color: var(--merkur-blue-10);
    --merkur-article-teaser-color: var(--merkur-darkest-blue);
    --merkur-article-teaser-hover-bg-color: var(--merkur-darkest-blue);
    --merkur-article-teaser-hover-color: var(--merkur-white);
    --merkur-article-teaser-info-bar-bg-color: var(--merkur-blue);
    --merkur-article-teaser-info-bar-color: var(--merkur-white);

    /*Footer*/
    --merkur-footer-bg-color: var(--merkur-blue-10);
    --merkur-footer-prevention-bg-color: var(--merkur-blue);
    --merkur-footer-prevention-color: var(--merkur-white);
    --merkur-footer-color: var(--merkur-blue);
    --merkur-footer-icon-color: var(--merkur-blue-45);

    /*Modal*/
    --merkur-modal-content-bg-color: var(--merkur-white);
    --merkur-modal-content-color: var(--merkur-blue);

    /*Linkweiche*/
    --merkur-modal-switch-background: linear-gradient(90deg, var(--merkur-blue-10) 0%, var(--merkur-blue-10) 50%, var(--merkur-white) 50%, var(--merkur-white) 100%);

    /*Highlightbox*/
    --merkur-highlightbox-bg-blue: var(--merkur-blue-10);

    /*Accordion*/
    --merkur-bs-accordion-btn-icon: url("//styles.merkur.group/MERKURcom/medien/chevron_down_yellow.svg");

    /*Table*/
    --merkur-table-bg-color: var(--merkur-yellow);

    /*DOM Editor List*/
    --merkur-del-color: var(--merkur-light-blue);
}

/*Theme Dark ||-----------*/
[data-bs-theme=dark] {
    --bs-body-bg: var(--merkur-darkest-blue);
    --bs-body-color: var(--merkur-white);
    --bs-heading-color: var(--merkur-white);
    --bs-border-color: var(--merkur-blue-70);

    /*Links*/
    --merkur-link-color: var(--merkur-yellow);
    --merkur-link-icon-color: var(--merkur-yellow);
    --merkur-link-color-hover: var(--merkur-white);
    --merkur-link-icon-color-hover: var(--merkur-white);
    --merkur-link-color-focus: var(--merkur-white);
    --merkur-link-icon-color-focus: var(--merkur-white);
    --merkur-link-border-color-focus: var(--merkur-light-blue);
    --merkur-link-color-active: var(--merkur-yellow-120);
    --merkur-link-icon-color-active: var(--merkur-yellow-120);

    /*Buttons*/
    --merkur-btn-primary-color: var(--merkur-blue);
    --merkur-btn-primary-bg-color: var(--merkur-yellow);
    --merkur-btn-primary-brd-color: var(--merkur-yellow);
    --merkur-btn-primary-bg-color-hover: var(--merkur-yellow-70);
    --merkur-btn-primary-brd-color-hover: var(--merkur-yellow-70);
    --merkur-btn-primary-bg-color-focus: var(--merkur-yellow);
    --merkur-btn-primary-brd-color-focus: var(--merkur-light-blue);
    --merkur-btn-primary-bg-color-active: var(--merkur-yellow-120);
    --merkur-btn-primary-brd-color-active: var(--merkur-yellow-120);

    --merkur-btn-secondary-color: var(--merkur-white);
    --merkur-btn-secondary-bg-color: var(--merkur-blue);
    --merkur-btn-secondary-brd-color: var(--merkur-white);
    --merkur-btn-secondary-color-hover: var(--merkur-blue);
    --merkur-btn-secondary-bg-color-hover: var(--merkur-yellow);
    --merkur-btn-secondary-brd-color-hover: var(--merkur-yellow);
    --merkur-btn-secondary-bg-color-focus: var(--merkur-blue);
    --merkur-btn-secondary-brd-color-focus: var(--merkur-light-blue);
    --merkur-btn-secondary-bg-color-active: var(--merkur-blue);
    --merkur-btn-secondary-brd-color-active: var(--merkur-yellow-120);

    /*Navbar*/
    --merkur-nav-bg-image: url("//styles.merkur.group/MERKURcom/medien/blue.svg");
    --merkur-btn-navbar-color: var(--merkur-white);
    --merkur-btn-navbar-border-color: var(--merkur-white);
    --merkur-btn-navbar-bg-color: var(--merkur-blue);
    --merkur-textlink-navbar-color: var(--merkur-white);
    --merkur-textlink-navbar-hover-color: var(--merkur-yellow);
    --merkur-textlink-navbar-icon-color: var(--merkur-white);
    --merkur-textlink-navbar-icon-hover-color: var(--merkur-yellow);

    /*Stages*/
    --merkur-stage-content: var(--merkur-gradient-blue);
    --merkur-stage-content-opacity: var(--merkur-gradient-blue-opacity);

    /*Slider*/
    --merkur-slider-logo-prev-background-image: linear-gradient(270deg, rgba(0, 23, 52, 0) 0%, rgba(0, 23, 52, 0.81) 53%, rgba(0, 23, 52, 1) 100%);
    --merkur-slider-logo-next-background-image: linear-gradient(90deg, rgba(0, 23, 52, 0) 0%, rgba(0, 23, 52, 0.81) 53%, rgba(0, 23, 52, 1) 100%);

    /*Cards*/
    --merkur-card-bg-color: var(--merkur-blue);
    --merkur-card-bg-color-0-alpha: rgba(2, 38, 8, 0);
    --merkur-card-bg-hover-color: var(--merkur-white);
    --merkur-card-content-hover-color: var(--merkur-blue);
    --merkur-card-body-blur-color: var(--merkur-grey-120-transp);

    /*Teaser*/
    --merkur-article-teaser-bg-color: var(--merkur-blue);
    --merkur-article-teaser-color: var(--merkur-white);
    --merkur-article-teaser-hover-bg-color: var(--merkur-white);
    --merkur-article-teaser-hover-color: var(--merkur-blue);
    --merkur-article-teaser-info-bar-bg-color: var(--merkur-blue);
    --merkur-article-teaser-info-bar-color: var(--merkur-white);

    /*Footer*/
    --merkur-footer-bg-color: var(--merkur-darkest-blue);
    --merkur-footer-prevention-bg-color: var(--merkur-blue);
    --merkur-footer-prevention-color: var(--merkur-white);
    --merkur-footer-color: var(--merkur-white);
    --merkur-footer-icon-color: var(--merkur-blue-70);

    /*Modal*/
    --merkur-modal-content-bg-color: var(--merkur-blue);
    --merkur-modal-content-color: var(--merkur-white);

    /*Linkweiche*/
    --merkur-modal-switch-background: linear-gradient(90deg, var(--merkur-blue) 0%, var(--merkur-blue) 50%, var(--merkur-darkest-blue) 50%, var(--merkur-darkest-blue) 100%);

    /*Highlightbox*/
    --merkur-highlightbox-bg-blue: var(--merkur-blue);

    /*Accordion*/
    --merkur-bs-accordion-btn-icon: url("//styles.merkur.group/MERKURcom/medien/chevron_down_yellow.svg");

    /*Table*/
    --merkur-table-bg-color: var(--merkur-blue);

    /*DOM Editor List*/
    --merkur-del-color: var(--merkur-yellow);
}