@font-face { font-family: Raleway; font-style: normal; font-weight: 200; src: url('../fonts/Raleway-ExtraLight.woff2') format('woff2'), url('../fonts/Raleway-ExtraLight.woff') format('woff') }
@font-face { font-family: Raleway; font-style: normal; font-weight: 400; src: url('../fonts/Raleway-Regular.woff2') format('woff2'), url('../fonts/Raleway-Regular.woff') format('woff') }
@font-face { font-family: Raleway; font-style: normal; font-weight: 700; src: url('../fonts/Raleway-SemiBold.woff2') format('woff2'), url('../fonts/Raleway-SemiBold.woff') format('woff') }
@font-face { font-family: Raleway; font-style: normal; font-weight: 900; src: url('../fonts/Raleway-ExtraBold.woff2') format('woff2'), url('../fonts/Raleway-ExtraBold.woff') format('woff') }
::-moz-selection { background: #b3d4fc; text-shadow: none }
::selection { background: #b3d4fc; text-shadow: none }
/* GREEN: #cd1; BLUE: #2ad; GREY[LIGHT-DARK]: #e6e6e6; #b2aaaa; #cac5c5; #9a8f8f; #857777; #635555; #524444; #413333; */
html { font: normal 400 14px/1.56261 Raleway, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; background-color: #fdfdfd; color: #635555; margin: 2%; }
html[lang=de] .en { display: none; }
html[lang=en] .de { display: none; }
header, main, footer { width: 100%; max-width: 1200px; margin: 0 auto; }
header:after { content: ''; clear: both; display: block; visibility: hidden; height: 0; }
header img { width: 10rem; }
footer { text-align: center; margin-bottom: 10rem; }

/* language toggle */
.language-toggle { float: right; width: 10rem; background-color: #e6e6e6; border-radius: 1rem; }
.language-toggle label { position: relative; display: inline-block; width: 5rem; text-align: center; float: left; }
.language-toggle label input { opacity: 0; position: absolute; top: 0; left: 0; }
.language-toggle label span { position: relative; display: block; height: 2rem; line-height: 2rem; color: #524444; user-select: none; }
.language-toggle label span strong { z-index: 2; position: relative; font-weight: 400; }
.language-toggle label:first-child input + span:before { content: ''; z-index: 1; position: absolute; top: 0; left: 5rem; display: block; width: 5rem; height: 2rem; background: #2ad; border-radius: 1rem; transition: left 200ms; }
.language-toggle label input:checked + span strong { color: #fdfdfd; transition: color 200ms; }
.language-toggle label:first-child input:checked + span:before { left: 0; }

/* calculator */
.calculator-settings { position: relative; margin-top: 2rem; }
.calculator-settings:after { content: ''; clear: both; display: block; visibility: hidden; height: 0; }
.calculator-settings h2 { clear: both; font-size: 200%; font-weight: 400; color: #857777; text-align: center; padding-top: 2em; }
.calculator-settings div.row { float: left; width: calc(25% - 2rem); min-height: 12.5rem; border: 1px solid #e6e6e6; padding: 0 .5rem; margin-left: 1rem; margin-bottom: 1rem; }
.calculator-settings div.row:first-child { margin-left: 0; }
@media only screen and (max-width:768px) {
	.calculator-settings div.row { width: calc(50% - 2rem); }
	.calculator-settings div.row:nth-child(2n + 1) { margin-left: 0; }
}
@media only screen and (max-width:480px) {
	.calculator-settings div.row { width: calc(100% - 1.25rem); margin-left: 0; margin-bottom: 1rem; }
}
.calculator-settings div.row h3 { font-size: 125%; font-weight: 200; margin: .25em 0 0 .125em; }
.calculator-settings fieldset { border: none; padding: 0; }
.calculator-settings fieldset label { position: relative; display: block; padding-top: .5rem; margin: 0 0 .5rem 0; }
.calculator-settings fieldset label > span { padding-right: .5em; }
.calculator-settings fieldset input { display: inline; padding-right: .5em; max-width: 3rem; }
.calculator-settings select,
.calculator-settings input[type='number'] { display: block; width: 100%; padding: .5em; -moz-appearance: none; -webkit-appearance: none; appearance: none; font-family: Raleway, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; border: 1px solid #b2aaaa; border-radius: 2px; }
.calculator-settings select:focus::-ms-value { background-color: transparent; }
.calculator-settings select { cursor: pointer; }
.calculator-settings label .select:after { content: ''; position: absolute; right: 1rem; bottom: .95rem; display: block; width: .5rem; height: .5rem; border: .1rem solid #635555; border-top: none; border-left: none; border-radius: 2px; transform: rotate(45deg); }
.calculator-settings select,
.calculator-settings input[type='number'],
.calculator-settings input[type='checkbox'] + span:before { border: 1px solid #b2aaaa; border-radius: 2px; }
.calculator-settings input[type='checkbox'] { display: block; width: 0; height: 0; opacity: 0; }
.calculator-settings input[type='checkbox'] + span { position: relative; padding: 0 0 0 2rem; }
.calculator-settings input[type='checkbox'] + span:before { content: ''; position: absolute; left: 0; top: -.25rem; display: inline-block; width: 1.5rem; height: 1.5rem; }
.calculator-settings input[type='checkbox'] + span:after { content: '\00d7'; position: absolute; left: 0; top: 0; display: inline-block; width: 1.666rem; font-size: 2rem; font-weight: 200; line-height: .85rem; text-align: center; opacity: 0; transition: opacity 200ms ease-in-out; }
.calculator-settings input[type='checkbox']:checked + span:after { opacity: 1; }
.calculator-chart { position: relative; margin-bottom: 5rem; }
.calculator-chart > div { position: absolute; left: 50px; bottom: 0; display: block; width: calc(100% - 53px); height: calc(100% - 10px); pointer-events: none; }
.calculator-chart > div .marker { position: absolute; left: 0; top: -1.5rem; display: block; width: calc(20% - 6px); height: calc(100% - 3.5rem); border: 6px solid  rgba(204,221,17,.5); border-radius: 4px; padding-top: 1rem; transition: left 400ms ease-in-out; }
.calculator-chart > div .marker div { position: relative; display: block; width: 70%; background-color: rgba(255,255,255,.5); box-shadow: 0 2px 8px rgba(80,80,80,.15); border-radius: 50%; margin: 0 auto 1rem; opacity: 0; max-height: 0; transition: opacity 400ms ease-in-out, max-height 400ms ease-in-out; }
.calculator-chart > div .marker div > img { display: block; width: 100%; padding: 10% 0; }
.calculator-chart > div .marker div > span { position: absolute; top: 50%; left: 0; display: block; width: 100%; font-weight: 900; font-size: 125%; padding: .8rem; }
.calculator-chart > div .marker.mobility div.mobility { opacity: 1; max-height: 20rem; }
.calculator-chart > div .marker.heating div.heating { opacity: 1; max-height: 20rem; }
.calculator-chart > div .marker.electricity div.electricity { opacity: 1; max-height: 20rem; }
.calculator-chart > div.shadow .marker { left: -3px; }
.calculator-chart > div.calm .marker { left: calc(20% - 3px); }
.calculator-chart > div.breeze .marker { left: calc(40% - 3px); }
.calculator-chart > div.windy .marker { left: calc(60% - 3px); }
.calculator-chart > div.stormy .marker { left: calc(80% - 3px); }
.calculator-chart > div ul.labels { position: absolute; bottom: 4rem; width: 100%; padding: 0; margin: 0; }
.calculator-chart > div ul.labels > li { display: inline-block; width: 20%; font-size: 14px; font-weight: 400; text-align: center; margin: 0; }