:root {







	--app-font-family: "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;







	--map-background-light: #fff;







	--map-background-dark: #363636;







}















/* LIGHT MODE */







[data-theme="light"] {







	/* MAIN COLORS */







	--app-primary-color: #7a7a7a;







	--app-secondary-color: #FFED00;







	--app-tertiary-color: #262626;















	/* BUTTON COLORS */















	--button-color: #0a0a0a;







	--button-hover-background: #d9d9d9;















	/*BUTTON COLORS */







	--button-hover-color: var(--app-primary-color);







	--button-hover-border: var(--app-primary-color);















	/* FOOTER COLORS */







	--footer-primary: var(--app-primary-color);







	--footer-secondary: var(--app-secondary-color);















	/* FONT COLORS */







	--app-font-color: #212121;







	--alt-font-color: #fff;







	--hover-color: #104869;















	/* BACKGROUND COLORS */







	--background-color: #fff;







	--background-highlight-color: #f3f3f3;







	--border-color: #d9d9d9;















	/* GRAY ACCENTS */







	--gray-primary: #757171;







	--gray-secondary: #b8b8b8;







	--gray-tertiary: #f0f0f0;















	/* Sonstiges */







	--spinner-color: var(--app-primary-color);















	/* https://codepen.io/sosuke/pen/Pjoqqp */







	/* Change this one */







	--svg-filter-primary: invert(43%) sepia(0%) saturate(1076%) hue-rotate(154deg) brightness(111%) contrast(80%);







	/* Leave these */







	--svg-filter-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(159deg) brightness(104%) contrast(104%);







	--svg-filter-gray-primary: invert(43%) sepia(0%) saturate(13%) hue-rotate(168deg) brightness(87%) contrast(81%);







}







/* DARK MODE */















[data-theme="dark"] {







	/* MAIN COLORS */







	--app-primary-color: #ffed00;







	--app-secondary-color: #d9d9d9;







	--app-tertiary-color: #fff;















	/* BUTTON COLORS */







	--button-color: var(--gray-tertiary);







	--button-hover-color: white;







	--button-hover-background: var(--background-highlight-color);







	--button-hover-border: var(--gray-tertiary);















	/* FOOTER COLORS */







	--footer-primary: var(--background-highlight-color);







	--footer-secondary: var(--gray-tertiary);















	/* FONT COLORS */







	--app-font-color: #d1d1d1;







	--alt-font-color: #fff;







	--hover-color: var(--background-color);















	/* BACKGROUND COLORS */







	--background-color: #242424;







	--background-highlight-color: #313131;







	--border-color: #d9d9d9;















	/* GRAY ACCENTS */







	--gray-primary: #bdbdbd;







	--gray-secondary: #666666;







	--gray-tertiary: #454545;















	/* Sonstiges */







	--spinner-color: var(--gray-primary);















	/* https://codepen.io/sosuke/pen/Pjoqqp*/







	--svg-filter-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(159deg) brightness(104%) contrast(104%);







	--svg-filter-primary: invert(86%) sepia(77%) saturate(3909%) hue-rotate(349deg) brightness(99%) contrast(102%);







	--svg-filter-gray-primary: invert(85%) sepia(0%) saturate(57%) hue-rotate(227deg) brightness(93%) contrast(82%);







	/* --svg-filter-primary: invert(33%) sepia(70%) saturate(6726%) hue-rotate(8deg) brightness(95%) contrast(104%); */







}