@font-face {
font-family: "robocond";
src: url("fonts/robocond.woff") format("woff"),
	url("fonts/robocond.woff2") format("woff2");
}

@font-face {
font-family: "robocondbold";
src: url("fonts/robocondbold.woff") format("woff"),
	url("fonts/robocondbold.woff2") format("woff2");
}

@font-face {
font-family: "roboslab";
src: url("fonts/roboslab.woff") format("woff"),
	url("fonts/roboslab.woff2") format("woff2");
}

a:link, a:visited, a:hover, a:active
{
color: #444444;
text-decoration: none;
}

#teaser
{
margin: 3vw auto;
max-width: 550px;
text-align: left;
display: block;
font-size: 15px;
font-family: roboslab;
line-height: 1.5em;
}

#headline
{
font-size: 24px;
margin-bottom: 2vw;
}

#container {
	width: 97vw;
	position: relative;
	margin: 0 auto;
	/*font-family: fira;*/
	font-size: 12px;
	color: #444444;
}

.outer {
	width: 100vw;
	height: 100vh;
	position: fixed;
	margin: 0px auto;
	top: 1em;
	background-color: #e3e2d4;
	font-family: robocond;
}

.legend {
	width: 200px;
	height: 230px;
	position: fixed;
	font-size: 11px;
	visibility: hidden;
	text-anchor: end;
	background-color: rgba(246, 246, 246, 0.6);
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
	font-family: robocond;
}

.legend line {
	stroke-width: 2px;
}

.subhead {
	text-align: right;
	font-style: italic;
	padding: 4px;
}

svg {
	width: 100%;
	height: 100%;
}

svg text {
	fill: #444444;
}

#sections {
	width: auto;
	position: relative;
	margin: 0px auto;
	padding-top: 400px;
	font-size: 14px;
	font-family: roboslab;
}

#sections div {
	background-color: rgba(255, 255, 255, 0.8);
	padding: 10px;
	border-top: 1px solid #444444;
	border-bottom: 1px solid #444444;
	margin-bottom: 90vh;
	opacity: 0.1;
	line-height: 1.5em;
}

#sections > div:first-child {
	margin-top: 0;
}

#sections > div:last-child {
	opacity: 1;
	margin-bottom: 30px;
}

#sections > div.graph-scroll-active {
	opacity: 1;
}

.buttons {
	display: flex;
	flex-flow: row;
	justify-content: space-evenly;
	margin-top: 0.7em;
}

.button {
	padding: 0.2em 0.3em;
	cursor: pointer;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
}

.button:hover, .button.clicked {
	border-bottom-width: 2px;
	border-bottom-style: solid;
}

.button.clicked {
	pointer-events: none;
}

.underlined.spoe {
	border-bottom-color: #eeeeee;
}

.underlined.oevp {
	border-bottom-color: #25252a;
}

.underlined.fpoe {
	border-bottom-color: #5491c8;
}

.underlined.gruene {
	border-bottom-color: #929e31;
}

.underlined.kpoe {
	border-bottom-color: #962c2e;
}

.underlined.sonst {
	border-bottom-color: #aaaaaa;
}

.bar {
	fill-opacity: 1;
	rx: 0;
	ry: 0;
	display: block;
}

.others {
	visibility: hidden;
	stroke: #574f7d;
	/*stroke-opacity: 0.3;*/
	fill: none;
}

.main, .eligible_now {
	visibility: hidden;
	stroke: #574f7d;
	stroke-width: 3px;
	stroke-opacity: 1;
	fill: none;
	filter: none;
}

.eligible_now {
	stroke: #ff5601;
}

.eligible_now.straight {
	stroke-width: 5px;
	visibility: hidden;
	stroke: #99b19c;
}

.numbers {
	font-size: 14px;
	text-anchor: middle;
	display: none;
}

.parts {
	stroke-width: 5px;
	stroke-opacity: 1;
	stroke: #99b19c;
	fill: none;
	fill-opacity: 1;
	display: none;
}

.grid {
	stroke: #ffffff;
	display: none;
}

.dots {
	fill: #99b19c;
	stroke: none;
	display: block;
}

.dots2 {
	display: none;
	stroke: none;
}

.connector {
	display: none;
	stroke: black;
}

.bracket {
	stroke: #ff5601;
	display: none;
}

.brackett {
	text-anchor: middle;
	display: none;
}

.brackett.t{
	font-size: 9px;
}

.diff {
	text-anchor: middle;
	display: none;
}

.wk {
	fill: none;
	stroke: #99b19c;
	stroke-opacity: 0;
}

.values, .heading, .pres , .label, .pointer {
	display: none;
}

.pointer {
	fill: #99b19c;
	fill-opacity: 1;
}

.label, .heading {
	text-anchor: middle;
	pointer-events: none;
}

.heading {
	font-family: roboslab;
}

.label.bottom {
	fill: #444444;
}

.label.bottom.bg {
	visibility: visible;
	fill: none;
}

.label.top.bg, .label.bottom.bg {
	stroke-width: 2px;
	stroke: #e3e2d4;
}

.wbts.fg {
	fill: #aaaaaa;
	display: none;
}

.wbts.bg {
	fill: none;
	stroke: #aaaaaa;
	stroke-opacity: 0.2;
	display: none;
}

.gruma.bar.fg {
	fill: #d65a31;
	display: none;
}

.gruma.bar.bg {
	fill: none;
	stroke: #d65a31;
	stroke-opacity: 0.2;
	display: none;
}

.gruma.line {
	stroke-opacity: 1;
}

.axis {
	font-family: robocond;
	font-size: 11px;
	display: none;
}

.axis path, line {
	stroke: #f6f6f6;
}

.highlight {
	fill: none;
	stroke: #ff5601;
	stroke-width: 3px;
}

.gemname, .gemgr {
	font-size: 20px;
	display: none;
	text-anchor: middle;
	pointer-events: none;
}

.gemgr {
	font-size: 14px;
}

.gemname.bg, .gemgr.bg {
	stroke-width: 3px;
	stroke: #e3e2d4;
}

.res15 {
	text-anchor: middle;
	font-size: 14px;
	display: none;
	fill: #e3e2d4;
}

.stmk {
	font-family: robocondbold;
	font-weight: 700;
}

.large {
	display: none;
}


@media screen and (min-width: 768px) {
	.res15 {
		font-size: 15px;
	}
}

@media screen and (min-width: 1024px) {
	#container {
		font-size: 14px;
	}
	
	.outer {
		margin: 0 0 0 10px;
		position: fixed;
		top: 0;
		right: 0;
		float: right;
	}

	#sections 	{
		margin: 0;
		width: 260px;
		padding-top: 150px;
	}

	#sections > div {
		border: none;
		margin-bottom: 50vh; /*mehr*/
	}

	#sections > div:first-child {
		margin-top: 0;
	}

	#sections > div:last-child {
		margin-bottom: 5px; /*mehr*/
	}
	
	.numbers {
		font-size: 18px;
	}
	
	.axis {
		font-size: 12px;
	}
	
	.label.bottom {
		fill: #f6f6f6;
	}
	
	.label.bottom.bg {
		visibility: hidden;
	}
}

@media screen and (min-width: 1200px) {
	.legend {
		font-size: 12px;
	}
	
	#container, #sections {
		font-size: 15px;
	}
	
	.outer {
		margin: 0 0 0 20px;
	}
	
	#sections {
		width: 340px;
	}
	
	.heading {
		font-size: 1.2em;
	}
	
	.large {
		display: inline;
	}
}

@media screen and (min-width: 1200px) and (min-height: 600px) {
	.res15 {
		font-size: 20px;
	}
}