/*
* =================================================================================================
* Farben
* =================================================================================================
*/

:root {
	--color-primary: #9a0000;
	--color-secondary: #2d2020;
	--color-background: #ffffff;
	--color-background-lucent: rgba( 255, 255, 255, 0.97 );
	--color-panel: #f4e6d3;
	--color-body: #f2ebe2;
	--color-link: #bd2203;
	--color-top-corners: #3e0501;
	--color-bottom-corners: #2a0a05;
	--text-primary: rgba( 0, 0, 0, 0.87 );
	--text-secondary: rgba( 0, 0, 0, 0.54 );
	--text-disabled: rgba( 0, 0, 0, 0.38 );
	--text-light-primary: rgba( 255, 255, 255, 1 );
	--text-light-secondary: rgba( 255, 255, 255, 0.7 );
	--text-light-disabled: rgba( 255, 255, 255, 0.5 );
	--menu-color: #492e11;
	--menu-background: #e5cbaa;
	--menu-active: #bd2203;
	--menu-hover: #f4e6d3;
	--heading1-color: #bd2203;
	--heading2-color: #403123;
	--heading3-color: #2c2f30;
	--heading2-background: #a49583;
	--item-color: #2d2020;
	--item-description: #473727;
	--item-background: #dccfc1;
	--item-border: #cfb79b;
	--item-highlight: #9a0000;
	--item-hint-background: #ffffff;
	--state-background: #ffffff;
	--headroom-background: #ffffff;
	--sidebar-highlight: #bd2203;
	--sidebar-background: #998975;
	--copyright-highlight: #ad1903;
	--hours-highlight: #e64a19;
	--hours-border: rgba( 0, 0, 0, 0.12 );
	--contact-label: #d7bb96;
	--contact-number: rgba( 0, 0, 0, 0.75 );
	--contact-background: #43a047;
	--delivery-icon: rgba(0, 0, 0, 0.18);
	--delivery-color: #2e1d1a;
	--delivery-background: #a49583;
	--announcement-border: #90a4ae;
	--announcement-background: #ffffff;
	--announcement-highlight: #ff5722;
}

/* -- Medium -- */

@media screen and (min-width: 767.98px) {
	:root {
		--menu-active: #f2ebe2;
	}

	body {
		background-image: url(../grafiken/light/background.png);
	}

	#header {
		background-image: url(../grafiken/light/header.png);
	}
}

/* -- Large ------------------------------------------------------------------------------------ */

@media screen and (min-width: 991.98px) {
	:root {
		--menu-active: #ffffff;
		--color-body: #867662;
		--hours-highlight: #ffca28;
		--item-background: #f2ebe2;
		--item-hint-background: #f2ebe2;
		--announcement-background:#f2ebe2;
	}
}