:root {
--color-0:  hsl(0, 0%, 0%);  			/* --- schwarz --- */
--color-0t: hsla(0, 0%, 0%, 0.5);		/* --- schwarz transp --- */
--color-01: hsl(0, 0%, 15%);			/* --- anthrazit --- */
--color-04: hsl(0, 0%, 25%);			/* --- grau dunkel --- */
--color-05: hsl(0, 0%, 36%);			/* --- grau f Text --- */	
--color-06: hsl(0, 0%, 50%);			/* --- grau mittel --- */		
--color-08: hsl(0, 0%, 97%);			/* --- grau hell--- */	
--color-09: hsl(0, 0%, 100%);			/* --- weiss --- */	
--color-09t: hsla(0, 0%, 100%, 0.5);	/* --- weiss transp --- */	

--color-10: hsl(188, 100%, 25%); 		/* --- blau-gruen dunkel --- */	
--color-12: hsl(188, 61%, 49%); 		/* --- blau-gruen mittel --- */
--color-15: hsl(197, 100%, 41%); 		/* --- blau logo --- */
--color-17: hsl(176, 58%, 86%); 		/* --- blau-gruen hell --- */	
--color-19: hsl(197, 100%, 90%); 		/* --- blau hell --- */		
	
--color-20: hsl(4, 69%, 30%); 			/* --- orange dunkel --- */
--color-25: hsl(4, 50%, 45%);	 		/* --- orange rot --- */
--color-27: hsl(42, 48%, 95%); 			/* --- beige hell --- */

--body-bg: rgb(251, 254, 255);  		/* --- global Website BG --- */	

/* ---- beige zu beige verlauf ------ */	
--color-170: linear-gradient(160deg, hsl(40, 45%, 91%), hsl(32, 57%, 95%) ); 
	
/* ---- beige zu hellgruen verlauf ------ */
--color-180: linear-gradient(160deg, hsl(32, 100%, 94%), hsl(145, 84%, 80%) );	

/* ---- gruen_warm zu gruen_kalt verlauf ------ */
--color-210: linear-gradient(160deg, hsl(84, 68%, 38%), hsl(145, 95%, 23%) );
	
/* ---- gelb zu gruen verlauf für Text ------ */
--color-250: linear-gradient(170deg, hsl(197, 100%, 41%), hsl(188, 61%, 49%) );	


/* ---- Test abgeleitete Farben ------ */
--button-bg-color: var(--color-19);
			
}


/* ---- Background Colors ------ */

.test-bg {background-color: #8f3535}

.test-txt {color: #13bd68}


 .bg-0 {background-color: var(--color-0);  color: var(--color-09);}
.bg-01 {background-color: var(--color-01); color: var(--color-09);}
.bg-04 {background-color: var(--color-04); }
.bg-08 {background-color: var(--color-08); }
.bg-09 {background-color: var(--color-09); }
.bg-09t {background-color: var(--color-09t); }

.bg-10 {background-color: var(--color-10); color: var(--color-09);}
.bg-15 {background-color: var(--color-15); color: var(--color-09);}
.bg-17 {background-color: var(--color-17);}
.bg-19 {background-color: var(--color-19);}

.bg-20 {background-color: var(--color-20); color: var(--color-09);}
.bg-25 {background-color: var(--color-25); color: var(--color-09);}
.bg-27 {background-color: var(--color-27);}
.bg-28test {background-color: var(--color-27);}


/* ---- Background Colors Gradient ------ */

.bg-170 {background: var(--color-170);}

.bg-180 {background: var(--color-180);}

.bg-210 {background: var(--color-210); color: var(--color-09);}


/* ---- Colors f Text ------------------------------------- */

 .c-0 {color: var(--color-0); }
.c-01 {color: var(--color-01); }
.c-04 {color: var(--color-04); }
.c-06 {color: var(--color-06); }
.c-08 {color: var(--color-08); }
.c-09 {color: var(--color-09) !important; }

.c-10 {color: var(--color-10); }
.c-12 {color: var(--color-12); }
.c-15 {color: var(--color-15); }
.c-17 {color: var(--color-17); }
.c-19 {color: var(--color-19); }

.c-20 {color: var(--color-20); }
.c-25 {color: var(--color-25); }
.c-27 {color: var(--color-27); }


/* ---- verlauf fur Text ------ */
.c-250 {
	display: inline-block;
	background: var(--color-250);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	color: #dd9933;
}