#rechner {

	--clr-primary: #777777;
	--clr-primary2: #000;
	--clr-background: #fff;
	--font-size-small: 1rem;
	--font-size-large-1: 1.5rem;



	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;

	.option-wrapper {
		grid-column: span 1;

		label {
			strong {
				display: block;
			}
		}
	}

	label {
		display: block;
		margin-bottom: 1rem;
	}

	.select-wrapper {
		position: relative;
		width: min(100%, max-content);
		max-width: 100%;

		&::after {
			content: ">";
			display: flex;
			width: 1rem;
			height: 100%;
			top: 0;
			bottom: 0;
			right: 1rem;
			align-items: center;
			position: absolute;
			color: var(--clr-primary);
			pointer-events: none;
			rotate: 90deg;
		}
		select {
			appearance: none;
			display: block;
			width: 100%;
			padding: 0.5rem 1rem;
			padding-right: 4rem;
			background-color: var(--clr-background);
			color: var(--clr-primary);
			border: 2px solid var(--clr-primary);
			outline: 0;
		}
	}

	.range-wrapper {
		width: 100%;
		margin-bottom: 2rem;
		grid-column: span 3;

		div.legends {
			display: block;
			display: flex;
			flex-flow: row;

			justify-content: space-between;

			span {
				display: block;
				font-size: var(--font-size-small);
				font-style: italic;

				/*
				&::after {
					content: '\20AC';
					display: inline-block;
					margin-left: 0.5rem;
				}*/
			}

			#display_current {
				font-weight: bold;
				font-size: var(--font-size-large-1);
				color: var(--clr-primary);
			}
		}

		input[type=range] {
			-webkit-appearance: none;
			margin: 18px 0;
			width: 100%;
		  }
		  input[type=range]:focus {
			outline: none;
		  }
		  input[type=range]::-webkit-slider-runnable-track {
			width: 100%;
			height: 0.25rem;
			cursor: pointer;
			animate: 0.2s;
			background: var(--clr-primary);
		  }
		  input[type=range]::-webkit-slider-thumb {
			border: 0.25rem solid var(--clr-primary);
			height: 1.5rem;
			width: 1.5rem;
			background: #ffffff;
			cursor: pointer;
			-webkit-appearance: none;
			margin-top: -0.6rem;
			border-radius: 4rem;
		  }
		  input[type=range]:focus::-webkit-slider-runnable-track {
			background: var(--clr-primary);
		  }
		  input[type=range]::-moz-range-track {
			width: 100%;
			height: 0.25rem;
			cursor: pointer;
			animate: 0.2s;
			background: var(--clr-primary);
		  }
		  input[type=range]::-moz-range-thumb {
			border: 0.25rem solid var(--clr-primary);
			border-radius: 0;
			height: 1.5rem;
			width: 1.5rem;
			background: #ffffff;
			cursor: pointer;
			border-radius: 4rem;
		  }
		  input[type=range]::-ms-track {
			width: 100%;
			height: 0.25rem;
			cursor: pointer;
			animate: 0.2s;
			background: transparent;
			border-color: transparent;
			border-width: 0.25rem 0;
			color: transparent;
		  }
		  input[type=range]::-ms-fill-lower {
			background: var(--clr-primary);
		  }
		  input[type=range]::-ms-fill-upper {
			background: var(--clr-primary2);
		  }
		  input[type=range]::-ms-thumb {
			border: 0.25rem solid var(--clr-primary);
			height: 1.5rem;
			width: 1.5rem;
			border-radius: 4rem;
			background: #ffffff;
			cursor: pointer;
		  }
		  input[type=range]:focus::-ms-fill-lower {
			background: var(--clr-primary);
		  }
		  input[type=range]:focus::-ms-fill-upper {
			background: var(--clr-primary2);
		  }
	}

	.response-wrapper {
		grid-column: span 3;
		p {
			font-size: var(--font-size-large-1);

			span.hi {
				color: var(--clr-primary);
				font-style: italic;
			}

			span.res_otp {
				font-weight: bold;
			}
		}
	}
}

@media (width <= 900px) {
	#rechner {
		grid-template-columns: 1fr;

		.range-wrapper {
			grid-column: span 1;
		}

		.response-wrapper {
			grid-column: span 1;
		}
	}
}