@font-face {
	font-family: "Noto Sans";
	src: url("../fonts/NotoSans-Variable-wdth-wght.woff2") format("woff2-variations"),
		url("../fonts/NotoSans-Variable-wdth-wght.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62.5% 100%;
	font-style: normal;
	font-display: swap;
}

:root {
	--color-white: #FFFFFF;
	--color-black: #1F1F1F;
	--color-primary: #05BBFF;
	--color-primary-soft: #99E3FF;
	--color-primary-hover: #039BE7;
	--color-porcelain: #F4F4EF;
	--color-secondary: #F5E600;
	--color-secondary-hover: #E5D700;

	--font-primary: "Noto Sans", "Segoe UI", system-ui, sans-serif;

	/* 8px-Basis, bis Figma-Spacing final ist */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 48px;
	--space-6: 64px;
	--space-7: 80px;
	--space-8: 96px;

	/* Dokumentiert für Media Queries (Custom Properties gelten dort nicht):
	   sm 576px, md 768px, lg 992px, xl 1200px
	   Startseiten-Hero: unter 576px Video aus, Logo+Claim sichtbar. */
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;

	--content-width: 75rem;
	--focus-outline: 3px solid var(--color-black);
}