* {
	box-sizing: border-box;
}

html {
	max-width: 50em;
	margin: auto;
	font-family: sans-serif;
}

body {
	margin: 0 0.5em;
}

input[type=radio], label {
	cursor: pointer;
}

#chocotype {
	
}
.chocotype-opt label {
	display: inline-block;
	width: calc(100% - 2em);
	margin: .25em 0;
}

form {
	margin: 2em;
}

.form-row {
	margin-bottom: 1em;
}

.form-row button {
	padding: .5em 1em;
}
.form-row > input:focus {
	box-shadow: 0px 0 3px 5px #ccffaa;
}

.form-row > input, .form-row > fieldset {
	width: 14em;
	display: inline-block;
	margin: 0;
	border: 1px solid grey;
	padding: .5em 1em;
}

.form-row > label {
	display: inline-block;
	min-width: 14em;
	margin-bottom: .5em;
	vertical-align: top;
}

@media screen and (max-width: 34em) {
	form {
		margin: 0.5em;
	}
	.form-row > input, .form-row > fieldset {
		width: 100%;
	}
	.form-row > label {
		display: block;
	}
	.form-row button {
		width: 100%;
		text-align: center;
	}
}

.result p {
	font-weight: bold;
	font-size: 125%;
}

.ampel_wrapper {
--size: 3em;
width: calc(var(--size) + 2em);
height: calc(var(--size) * 3 + 4em);
margin: 1em;
float: right;
}

div.ampel {
display: inline-block;
position: relative;
width: calc(100% - 1em);
height: calc(100% - 1em);
box-shadow: 0 0 0 0.5em rgba(0,0,0,.8);
margin: .5em;
padding: .25em;
list-style-type: none;
border: 0.25em double grey;
background: black;
background: linear-gradient( -90deg, #45484d 0%, #000000 100%);
border-radius: 2em;
}
.ampel .light {
position: relative;
display: block;
width: 100%;
height: calc((100% - 2em)/3);
margin: .5em 0;
border-radius: 50%;
background: lightgrey;
background: linear-gradient(to top, rgba(187,187,187,1) 0%, rgba(119,119,119,1) 99%);
box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),
inset -2px -1px 40px rgba(0,0,0,0.4), inset 0 0 1px #000;
}
.ampel .light:after {
content: "";
width: 60%;
height: 30%;
position: absolute;
left: 20%;
top: 10%;
box-shadow: 0 0 0.5em 1em rgba(20,20,20,.1);
border-radius: 30% / 15%;
}

.ampel .light:nth-of-type(1) {
background: rgba(255,0,0,0.2);
}
.ampel .light:nth-of-type(2) {
background: rgba(255,255,0,0.2);
}
.ampel .light:nth-of-type(3) {
background: rgba(204,255,170,0.2);
}

.ampel.red .light:nth-of-type(1) {
background: #ff0000;
box-shadow: inset 0 -5px 1em rgba(255,255,255,0.4),
inset -2px -1px 5px rgba(0,0,0,0.4), 0 0 5px 5px rgba(255,0,0,0.3);
}
.ampel.yellow .light:nth-of-type(2) {
background: #fefe00;
box-shadow: inset 0 -5px 1em rgba(255,255,255,0.4),
inset -2px -1px 5px rgba(0,0,0,0.4), 0 0 5px 5px rgba(255,255,0,0.3);
}
.ampel.green .light:nth-of-type(3) {
background: #ccffaa;
box-shadow: inset 0 -5px 1em rgba(255,255,255,0.4),
inset -2px -1px 5px rgba(0,0,0,0.4), 0 0 5px 5px rgba(204,255,170,0.3);
}