@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");

/*
 * DOM element rendering detection
 * https://davidwalsh.name/detect-node-insertion
 */
@keyframes chartjs-render-animation {
	from { opacity: 0.99; }
	to { opacity: 1; }
}

.chartjs-render-monitor {
	animation: chartjs-render-animation 0.001s;
}

/*
 * DOM element resizing detection
 * https://github.com/marcj/css-element-queries
 */
.chartjs-size-monitor,
.chartjs-size-monitor-expand,
.chartjs-size-monitor-shrink {
	position: absolute;
	direction: ltr;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
	z-index: -1;
}

.chartjs-size-monitor-expand > div {
	position: absolute;
	width: 1000000px;
	height: 1000000px;
	left: 0;
	top: 0;
}

.chartjs-size-monitor-shrink > div {
	position: absolute;
	width: 200%;
	height: 200%;
	left: 0;
	top: 0;
}








.selectdiv label {
	position: relative;
	display: inline-block;
	padding: 0px 4px;
  }
  .selectdiv label:before {
	content: "";
	height: 31px;
	position: absolute;
	right: 7px;
	top: 3px;
	width: 22px;
	background: #fff;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	pointer-events: none;
	display: block;
  }
  .selectdiv label:after {
	content: " ";
	position: absolute;
	right: 15px;
	top: 46%;
	margin-top: -3px;
	z-index: 2;
	pointer-events: none;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6.9px 4px 0 4px;
	border-color: #aaa transparent transparent transparent;
	pointer-events: none;
  }
  .selectdiv label select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0 30px 0 10px;
	border: 1px solid #e0e0e0;
	border-radius: 3px;
	line-height: 36px;
	height: 36px;
	background: #fff;
	margin: 0 5px 5px 0;
  }
  
  .selectdiv select::-ms-expand {
	display: none;
  }
  
  
  
  .quantity {
	position: relative;
	display: inline-block;
	margin: 0 10px -17px;
  }
  
  
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button
  {
	-webkit-appearance: none;
	margin: 0;
  }
  
  input[type=number]
  {
	-moz-appearance: textfield;
  }
  
  .quantity input {
	width: 65px;
	height: 42px;
	line-height: 1.65;
	float: left;
	display: block;
	display: inline;
	padding: 0;
	margin: 0;
	padding-left: 15px;
	border: 1px solid #eee;
  }
  
  .quantity input.wide {
	width: 80px;
  }
  
  .quantity input:focus {
	outline: 0;
  }
  
  .quantity-nav {
	float: left;
	position: relative;
	height: 42px;
  }
  
  .quantity-button {
	position: relative;
	cursor: pointer;
	border-left: 1px solid #eee;
	width: 20px;
	text-align: center;
	color: #333;
	font-size: 13px;
	font-family: "Trebuchet MS", Helvetica, sans-serif !important;
	line-height: 1.7;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
  }
  
  .quantity-button.quantity-up {
	position: absolute;
	height: 50%;
	top: 0;
	border-bottom: 1px solid #eee;
  }
  
  .quantity-button.quantity-down {
	position: absolute;
	bottom: -1px;
	height: 50%;
  }

  .quantity input.falsch{
	border: 1px solid #fa3d54;
	color: #fa3d54;
}
.quantity input.richtig{
	border: 2px solid #00a126;
	color: #00a126;
}


  *, *:before, *:after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  }
  
  html, body {
	height: 100%;
  }
  
  body {
	font: 14px/1 'Open Sans', sans-serif;
	color: #555;
	background: #eee;
  }
  
  h1 {
	padding: 50px 0;
	font-weight: 400;
	text-align: center;
  }
  
  
  
  .button-7 {
	background-color: #0095ff;
	border: 1px solid transparent;
	border-radius: 3px;
	box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.15385;
	margin: 0;
	outline: none;
	padding: 8px .8em;
	position: relative;
	text-align: center;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	vertical-align: baseline;
	white-space: nowrap;
  }
  
  .button-7:hover,
  .button-7:focus {
	background-color: #07c;
  }
  
  .button-7:focus {
	box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
  }
  
  .button-7:active {
	background-color: #0064bd;
	box-shadow: none;
  }
  
  p {
	margin: 0 0 20px;
	line-height: 1.5;
  }
  
  .subsection{
   margin: 0 0 20px;
	  
  }
  
  .stats{
	font: 10px/1 'Open Sans', sans-serif;
  }
  
  main {
	min-width: 320px;	
	padding: 50px;
	margin: 0 auto;
	background: #fff;
  }
  
  section {
	display: none;
	padding: 20px 0 0;
	border-top: 1px solid #ddd;
  }
  
  input {
	display: none;
  }
  
  label {
	display: inline-block;
	margin: 0 0 -1px;
	padding: 15px 25px;
	font-weight: 600;
	text-align: center;
	color: #bbb;
	border: 1px solid transparent;
  }
  
  label:before {
	font-family: fontawesome;
	font-weight: normal;
	margin-right: 10px;
  }
  
  label[for*='1']:before {
	content: '\f1cb';
  }
  
  label[for*='2']:before {
	content: '\f02d';
  }
  
  label[for*='3']:before {
	content: '\f02e';
  }
  
  label[for*='4']:before {
	content: '\f02b';
  }
  
  label:hover {
	color: #888;
	cursor: pointer;
  }
  
  input:checked + label {
	color: #555;
	border: 1px solid #ddd;
	border-top: 2px solid orange;
	border-bottom: 1px solid #fff;
  }
  
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2,
  #tab3:checked ~ #content3,
  #tab4:checked ~ #content4 {
	display: block;
  }
  
  @media screen and (max-width: 650px) {
	label {
	  font-size: 0;
	}
  
	label:before {
	  margin: 0;
	  font-size: 18px;
	}
  }
  @media screen and (max-width: 400px) {
	label {
	  padding: 15px;
	}
  }