body,
html {
	margin:0px;
	padding:0px;
	font-family:"Open Sans",sans-serif;
}

.admin {
	display:none !important;
}
.hider {
	display:none;
}
.farbton {
	display:grid;
	grid-template-columns:5em 1fr 1fr 1fr 1fr 5em;
	grid-template-areas:
		"btnback Farbton Assoziationen positiv negativ btnfwd"
		"btnback Farbton Einsatzbereich Einsatzbereich Einsatzbereich btnfwd"
		"btnback colors colors colors colors btnfwd";
	grid-gap:2em;
	padding:2em;
	border-radius:0.0em;
}

.farbton > * {
	font-size:1.2vw;
}
.farbton .farbe {
	grid-area:Farbton;
}
.farbton .eigenschaft_1 {
	grid-area:Assoziationen;
}
.farbton .eigenschaft_2 {
	grid-area:positiv;
}
.farbton .eigenschaft_3 {
	grid-area:negativ;
}
.farbton .einsatzbereiche {
	grid-area:Einsatzbereich;
}
.farbton .eigenschaften,
.farbton .einsatzbereiche {
	padding:0px 1em;
}
.farbton ul,
.farbton li {
	list-style-type:none;
	margin-left:0px;
	display:block;
}
.farbon li {
	
}
.farbton .einsatzbereiche li {
	display:inline-block;
}
.farbton .einsatzbereiche li:not(:last-of-type)::after {
	content:",\00a0";
}
.farbton .back {
	grid-area:btnback;
	align-self: center;
}
.farbton .forward {
	grid-area:btnfwd;
	align-self: center;
}

.farbton .colors {
	grid-area:colors;
}

.farbton a {
	display:block;
	font-size:2rem;
	box-sizing:content-box;
	width:1em;
	aspect-ratio:1;
	border-radius:50%;
	padding:0.5em;
	border:2px solid hsla(0,0%,100%,0.5);
	background-color:hsla(0,0%,100%,0.2);
	color:inherit;
	text-decoration: none;
	cursor:pointer;
}
.farbton .property {
	display:block;
	font-size:4vw;
	margin:auto;
	margin-bottom:0.5rem;
	box-sizing:content-box;
	width:1em;
	aspect-ratio:1;
	border-radius:50%;
	padding:0.5em;
	color:inherit;
	cursor:inherit;

}

.farbton .eigenschaften ~ .eigenschaften {
	border-left:1px dotted white;
}
.farbton .eigenschaften ul,
.farbton .einsatzbereiche ul {
	column-count:2;
	column-gap:1em;
}

.farbe h1 {
	font-family:Anton;
	font-size:4rem;
}

#Importer {
	display:grid;
	grid-template-columns:minmax(auto,max-content) 1fr;
	grid-gap:2em;
}

.gal {
	display:flex;
	justify-content:flex-start;
	overflow-x: scroll;
	scroll-behavior: smooth;
}
.gal > * {
	width:100vw;
	height:100vh;
	flex-shrink:0;
	flex-grow:1;
}

.squares {
	display:flex;
	height:9em;
	gap:0.2em;
	font-size:0.6em;
	margin:0.2em;
}
.squares > * {
	height:100%;
	aspect-ratio:1;
	flex-shrink:0;
	flex-grow:0;
	border-radius:0.2em;
	border:1px solid transparent;
	color:inherit;
	padding:0.5em;
}
.farbton .compl {
	margin-top:1em;
	font-size:0.6em;
}
@media print {
	.back,
	.forward {
		display:none !important;
	}
}