﻿body	{	--cta:  rgba(000,153,218,1.00); /* #0099da Blue light, Call to Action */
			--acc:  rgba(000,064,117,1.00);	/* #004075 Blue dark,  Accent */ 

			/* Gray Balance Slate */
			
			--gray-50:  rgba(248 250 252 / 1.000) /* #f8fafc */;
			--gray-100: rgba(241 245 249 / 1.000) /* #f1f5f9 */;
			--gray-200: rgba(226 232 240 / 1.000) /* #e2e8f0 */;
			--gray-300: rgba(203 213 225 / 1.000) /* #cbd5e1 */;
			--gray-400: rgba(148 163 184 / 1.000) /* #94a3b8 */;
			--gray-500: rgba(100 116 139 / 1.000) /* #64748b */;
			--gray-600: rgba(071 085 105 / 1.000) /* #475569 */;
			--gray-700: rgba(051 065 085 / 1.000) /* #334155 */;
			--gray-800: rgba(030 041 059 / 1.000) /* #1e293b */;
			--gray-900: rgba(015 023 042 / 1.000) /* #0f172a */;
			--gray-950: rgba(002 006 023 / 1.000) /* #020617 */;
		}
		
*             		{ 	accent-color: var(--cta); caret-color: var(--cta); }			
a, .nob, small 		{ 	color: inherit; }

::marker 			{ 	color: var(--acc); }
::-moz-selection 	{ 	background-color: var(--acc); color: white; }
::selection      	{ 	background-color: var(--acc); color: white; }

/*	=================================
		BGs   
	================================= */
	
.btn, .content, nav, menu div, main, aside, details[open].loc, .local > div:nth-child(2) > div
	{ 	background-color: white; }
	
article:target, .action > div:nth-child(1) 	
	{ 	background-color: var(--gray-50); }
	
body, .stage > *, aside > .gross, figure > div, details.loc, .brands > a
	{ 	background-color: var(--gray-100); }

footer 
	{ 	background-color: var(--gray-200); }
	
.btn.cta, menu > div > label + div:after, .price *
	{ 	background-color: var(--cta); color: white; }

.stage header, .stor, .toplink
	{ 	background-color: var(--acc); color: white; }

/*	=================================
		TXTs
	================================= */
 
h1, h1 strong, header *, .stor *
	{ 	color: white; }

p, p span, li, figcaption, .note, footer *	
	{ 	color: var(--gray-500); }

h2, h3, strong	{ 	color: var(--gray-900); }

.btn, .link:hover, menu a:hover 
	{ 	color: var(--cta); }

.link 
	{ 	color: var(--acc); }

/*	=================================
		Borders + Shadows
	================================= */

*   	{ 	border-color: var(--gray-200); }

		{ 	box-shadow: inset 0 0 0 1px var(--gray-200); }

.btn	{ 	box-shadow: inset 0 0 0 0.1875em var(--cta); }

/*	=================================
		Deko
	================================= */

nav, menu > div:hover > label + div 	
					{	box-shadow: 0 0.75em 1.00em -1.00em var(--gray-400); } 

body:has(.stage) 	{ 	background-image: 		url(../img/bg_stadion.webp); 
						background-repeat: 		no-repeat; 
						background-position: 	center; 
						background-size: 		cover; 
						background-attachment: 	fixed; }

details.bau 		{	border-color: #c20a16; } 
details.bau *		{	color: #c20a16; } 
details.bau:before 	{	color: #c20a16; } 

/*	=================================
		END
	================================= */ 