span[data-farbennr] {
 display: Inline-Block;
 width: 50px;
 height: 50px;
 margin: 5px;
 box-shadow: 0px 0px 4px 3px var(--color2);
 border-radius: 4px;
 cursor: Pointer;
}



:root {
 --color1: ;
 --color2: ;
 --color3: ;
 --color4: ;
 --color5: ;
}




html, body{
	margin: 0;
	padding: 0;
	border: 0;	
	background-color: var(--color1);
}

/* Head Navigation */
#headnavi {
	opacity: 2;
	width: 100%;
	height: 40px;
	background-color: #262626;
	clear: both;

}

#headnaviwrapper {
	width: 1400px;
	height: 40px;
	margin: 0 auto;
	
}

#headnavilogo {
	width: 250px;
	height: 40px;
	background-image: url("images/logo.png");
	background-repeat: no-repeat;
	float: left;
}

#headnaviright {
	
	height: 40px;
	float: right;
}

.headnavitext {
	font-family: "raleway";
	font-size: 16px;
	color: white;
	float: left;
	text-decoration: none;
	padding-top: 10px;
	margin-right: 8px;
}

/* Coffe Button */
.coffee {
	background-color:#202020;
	border-radius:35px;
	border:1px solid #474747;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	padding:10px 18px;
	text-decoration:none;
}
.coffee:hover {
	background-color:#404040;
}
.coffee:active {
	position:relative;
	top:1px;
}


/* Header */

#headerbg {
	width: 100%;
	height: 420px;
	background: var(--color2);
    background: -webkit-linear-gradient(top left, var(--color2), var(--color3));
	background: -moz-linear-gradient(top left, var(--color2), var(--color3));
	background: linear-gradient(to bottom right, var(--color2), var(--color3));
	-webkit-box-shadow: inset 0px 6px 43px -3px rgba(0,0,0,0.61);
-moz-box-shadow: inset 0px 6px 43px -3px rgba(0,0,0,0.61);
box-shadow: inset 0px 6px 43px -3px rgba(0,0,0,0.61);
}


#headertext {
	width: 670px;

	
	text-align: center;
	margin: 0 auto;
	padding-top: 150px;
	
}

.headerh1 {
	font-family:  "Yanone Kaffeesatz";
	font-weight: bold;
	font-size: 95px;
	color: white;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 0;
	text-align: center;
	
}

.headerh2 {
	font-family:  "Yanone Kaffeesatz";
	font-size: 38px;
	color: white;
	text-transform: uppercase;
	letter-spacing: 2px;	
	line-height: 20px;
}

.headerh3 {
	font-family:  "Yanone Kaffeesatz";
	font-size: 38px;
	color: white;
	text-transform: uppercase;
	letter-spacing: 2px;	
	line-height: 20px;
	position: absolute;
	margin-top: 50px;
	margin-left: -20px;
}


/* Library Button */

#librarywrapper {
	width: 400px;
	margin: 0 auto;
	text-align: center;
	margin-top: 80px;
}

.librarycolors {
	box-shadow: 0px 0px 20px -4px #050505;
	background:linear-gradient(to bottom, var(--color2) 5%, var(--color3) 100%);
	background-color:var(--color2);
	border-radius:35px;
	border:1px solid var(--color1);
	display:inline-block;
	cursor:pointer;
	color:#ececec;
	font-family:  "Yanone Kaffeesatz";
	font-size:36px;
	font-weight:500;
	padding-top:12px;
	padding-bottom:8px;
	padding-left: 39px;
	padding-right: 39px;
	text-decoration:none;
	text-shadow:0px 0px 0px var(--color1);
	text-transform: uppercase;
	letter-spacing: 1px;
}
.librarycolors:hover {
	background:linear-gradient(to bottom, var(--color3) 5%, var(--color2) 100%);
	background-color:var(--color3);
}
.librarycolors:active {
	position:relative;
	top:1px;
}

/* Balken */
#balkew1 {
	width: 100%;
	height: 100px;
	background-color: var(--color1);
}


/* Emotion */

#emotion {
	margin-top: 80px;
	width: 100%;
	height: 390px;
	background-color: var(--color4);
}

#emotionwrapper {
	width: 1400px;
	height: 390px;
	margin: 0 auto;
	clear: both;
}

#emotionleft {
	width: 760px;
	padding-top: 75px;
	
	float: left;
}

.emotiontexth1 {
	font-family: arial;
	font-size: 34px;
	font-weight: bold;
	color: var(--color1);
	margin-bottom:  40px;
}

.emotiontexth2 {
	
	font-family: arial;
	font-size: 23px;
	text-align: left;
	color: var(--color1);
	line-height: 40px;
}

#emotionright {
	width: 560px;
	height: 390px;
	
	float: right;
	padding-left: 80px;
}

#colorbalken1 {
	float: left;
	width: 100px;
	height: 390px;
	background-color: var(--color2);
-moz-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
-o-transform: skew(-28deg, 0deg);
-ms-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
}

#colorbalken2 {
	float: left;
	width: 100px;
	height: 390px;
	background-color: var(--color3);
-moz-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
-o-transform: skew(-28deg, 0deg);
-ms-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
}

#colorbalken3 {
	float: left;
	width: 100px;
	height: 390px;
	background-color: var(--color1);
-moz-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
-o-transform: skew(-28deg, 0deg);
-ms-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
}

#colorbalken4 {
	float: left;
	width: 100px;
	height: 390px;
	background-color: var(--color5);
-moz-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
-o-transform: skew(-28deg, 0deg);
-ms-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
}

#hexcodebalken {
	width: 100%;
	height: 60px;
}

#hexcodebalkenwrapper {
	width: 500px;
	clear: both;
	margin-left: -103px;
	font-family: arial;
	font-size: 19px;
	font-weight: bold;
	text-align: center;
	
}

#hexcodebalken1 {
	width: 100px;
	height: 40px;
	background-color: var(--color2);
	float: left;
	margin-top: -1px;
	color: white;
	padding-top: 20px;
}

#hexcodebalken2 {
	margin-top: -1px;
	width: 100px;
	height: 40px;
	background-color: var(--color3);
	float: left;
	color: white;
	padding-top: 20px;
}

#hexcodebalken3 {
	margin-top: -1px;
	width: 100px;
	height: 40px;
	background-color: var(--color1);
	float: left;
	color: white;
	padding-top: 20px;
}

#hexcodebalken4 {
	margin-top: -1px;
	width: 100px;
	height: 40px;
	background-color: var(--color5);
	float: left;
	color: white;
	padding-top: 20px;
}

#hexcodebalken5 {
	margin-top: -1px;
	width: 100px;
	height: 40px;
	background-color: var(--color4);
	float: left;
	color: White;
	padding-top: 20px;
}


/* Text über Kreise */
#textuk {
	width: 1200px;

	text-align: center;
	margin: 0 auto;
	margin-top: 70px;
}

.textuekh1 {
	
	font-family: arial;
	font-size: 23px;
	text-align: left;
	color: var(--color4);
	line-height: 40px;
}

/* Kreise */
#kreise {
	width: 100%;
	height: 240px;
	margin-top: 100px;
}

#kreisewrapper {
	width: 1200px;
	height: 250px;
	margin: 0 auto;
	
}

#kreis1 {
    width: 220px;
    height: 130px;
    border-radius: 200px;
    background-color: var(--color2);
	float: left;
	
}

#kreis2 {
    width: 220px;
    height: 130px;
    border-radius: 200px;
    background-color: var(--color3);
	float: left;
	margin-left: 20px;
}

#kreis3 {
    width: 220px;
    height: 130px;
    border-radius: 200px;
    background-color: var(--color1);
	float: left;
	border: 1px solid var(--color5);
	margin-left: 20px;
}

#kreis4 {
    width: 220px;
    height: 130px;
    border-radius: 200px;
    background-color: var(--color5);
	float: left;
	margin-left: 20px;
}

#kreis5 {
    width: 220px;
    height: 130px;
    border-radius: 200px;
    background-color: var(--color4);
	float: left;
	margin-left: 20px;
}

.kreistext {
	color: white;
	font-family: arial;
	font-size: 19px;
	font-weight: bold;
	text-align: center;
	padding-top: 90px;
}

.kreistext2 {
	color: white;
	font-family: arial;
	font-size: 19px;
	font-weight: bold;
	text-align: center;
	padding-top: 90px;
}

/* Lastbalken */
#lastbalken {
	width: 100%;
	height: 330px;
	background: var(--color5);
	margin-top: 100px;
background: -webkit-linear-gradient(top left, var(--color5), var(--color3));
background: -moz-linear-gradient(top left, var(--color5), var(--color3));
background: linear-gradient(to bottom right, var(--color5), var(--color3));
}

#lastbalkenwrapper {
	width: 1300px;
	margin: 0 auto;
	clear: both;
}

#lastbalkenleft {
	width: 500px;
	height: 130px;
	float: left;
		padding-top: 130px;
}

#lastbalkenright {
	width: 800px;
	height: 130px;
	float: right;
		padding-top: 110px;
}

.lastbalkentext {
	font-family: arial;
	font-size: 23px;
	color: var(--color1);
	line-height: 40px;
	text-align: right;
}

#lastbalkenfarbe1 {
	width: 80px;
	height: 80px;
	float: left;
	background-color: var(--color2);
}

#lastbalkenfarbe2 {
	width: 80px;
	height: 80px;
	float: left;
	background-color: var(--color3);
}

#lastbalkenfarbe3 {
	width: 80px;
	height: 80px;
	float: left;
	background-color: var(--color1);
}

#lastbalkenfarbe4 {
	width: 80px;
	height: 80px;
	float: left;
	background-color: var(--color5);
}

#lastbalkenfarbe5 {
	width: 80px;
	height: 80px;
	float: left;
	background-color: var(--color4);
}



/* Textuf */
#textuf {
	width: 100%;
	text-align: center;
	clear: both;
	margin-top: 80px;
}


.textufh1 {
	font-family: arial;
	font-size: 23px;
	color: var(--color4);
	line-height: 40px;
	text-align: center;
}


/* Footer */
#footer {
	width: 100%;
	height: 100px;
	background-color: #262626;
	margin-top: 80px;
	text-align: center;
}

#footerwrapper {
	padding-top: 40px;
	margin: 0 auto;
		text-align: center;
}