@import url(https://fonts.bunny.net/css?family=montserrat:300,300i,400,400i,500,500i,600,600i);

:root {
    --bs-color-main: #004AAD;
    --bs-color-second: #e8b840;

    --bs-font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --bs-font-main-color: #484851;
    --bs-font-text-headers-main-color: #01316f;

    --bs-border-radius: 3px;
	--bs-box-shadow: 5px 3px 22px -3px rgba(0, 0, 0, 0.135);

	--bs-button-background: #e8b840;
    --bs-button-hover-background: #cc9d26;

	--bs-footer-background: #01316f;

	--bs-criteria-color: var(--bs-font-main-color);
	--bs-criteria-background: #fff;
	--bs-benefits-color: var(--bs-font-main-color);
	--bs-benefits-background: #fff;

	--bs-swiper-background-odd: inherit;
	--bs-swiper-background-even: inherit;
	--bs-swiper-highlight-color: var(--bs-color-main);
	--bs-swiper-button-color: var(--bs-color-main);

    --bs-link-color: #01316f;
    --bs-link-hover-color: var(--bs-color-main);
    --bs-link-text-decoration: none;

	--bs-hero-image-filter: brightness(85%);

    --logo-width: clamp(3em, 8%, 5em);
    --logo-width-mobile: 4rem;
}

.heroText {
	@media (min-width: 0px) and (max-width: 305px) {
		top: calc((25em / 2 + (-3em)) - 4.8rem);
	}

	@media (min-width: 306px) and (max-width: 415px) {
		top: calc((25em / 2 + (-3em)) - 2.4rem);
	}

	h1 {
		font-size: calc(var(--bs-h1-font-size) * 1.2);
		line-height: calc(var(--bs-h1-line-height) * 1.1);
	}
}

.content-container.boxes {
	.criteria {
		#unsere-auswahlkriterien-für-fonds-und-etfs {
			color: var(--bs-color-main);
		}

		ul li .markdown-inline-svg {
			background-color: var(--bs-font-text-headers-main-color);
		}
	}

	.benefits {
		#diese-vorteile-bieten-wir-dir {
			color: #226aca;
		}

		ul li .markdown-inline-svg {
			background-color: #226aca;
		}
	}

}