/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;400;900'); */
/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-v22-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lato'),
       url('../fonts/lato-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v22-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-v22-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Lato'),
       url('../fonts/lato-v22-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v22-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v22-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v22-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v22-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-900 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/lato-v22-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Lato'),
       url('../fonts/lato-v22-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v22-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v22-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v22-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v22-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-900italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/lato-v22-latin-900italic.eot'); /* IE9 Compat Modes */
  src: local('Lato'),
       url('../fonts/lato-v22-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v22-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v22-latin-900italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v22-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v22-latin-900italic.svg#Lato') format('svg'); /* Legacy iOS */
}

:root {
--gesamtbreite : 32rem;
/* --drittel_input : 12em;
--viertel_input : 9em; */
--drittel_input : 32%;
--viertel_input : 24%;

--main_front : #333;
--main_toned : #bbb;
--main_mute : #eee;
--main_back : #fff;
--main_accent: royalblue;
--fast : ease-in-out 0.1s all;}

body {
  font-family: 'Lato', sans-serif;
  text-align:justify;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 900;
  color: var(--main_accent);
  font-size: 120%;
  margin-top: 0.5em;
  }

h1 {text-align: center}

.euro {
  text-align: right;
}

.header {
  font-weight: 900;
}

.invisible{
  display: none;
}

.summe {
  font-weight: 900;
  border-top: solid 1px var(--main_toned);
}


form {
  /* border: solid 1px var(--main_front); */
  max-width: calc(var(--gesamtbreite) + 2em);
  padding: 5px;
  box-sizing: border-box;
}

form span input{
}

form span input[type="number"],
form span input[type="text"],
form span select {
  width: calc(100% - 2em);
  position:absolute;
  background: transparent;
  border: solid 1px var(--main_mute);
  padding: 0.3em;
  bottom:0.5em;
  right: 1em;
  left: 0.8em;
}

form span input[type="checkbox"] {
  display:none;
}

form span input[type="checkbox"] + label {
  background: var(--main_mute);
  text-align: center;
}
form span input[type="checkbox"]:checked + label {
  background: var(--main_toned);
}

form span label {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em 0em;
  transition: var(--fast);
  position: absolute;
  top: 0.2em;
  left: 1em;
}

fieldset {
  display:grid;
  grid-auto-rows: 5em;
  box-sizing: border-box;
  column-gap: 1%;
  border: none;
}

fieldset span {
  position: relative;
}

fieldset#feld_streitwert {
  grid-template-columns: 100%;
  }


fieldset#feld_anzahl {
  grid-template-columns: repeat(4, var(--viertel_input));
}

fieldset#feld_schritte {
  grid-template-columns: repeat(4, var(--viertel_input));
}

#feld_schritte input[type="checkbox"] + label {
  border: solid 1px #fff;
  left: 0px;
}

#feld_anzahl input[type="checkbox"] + label {
  top:2em;
  bottom: 0.2em;
  left:0px
}

.block p {
  margin: 0.1em;
  height: 1.1em;
  line-height: 1.2em;
  width:100%;
  max-width: var(--gesamtbreite);
  font-size: 90%;
}

.block p span {
  display: inline-block;
  width: var(--viertel_input);
  min-width: 7em;
}

.block p span:first-child {
  min-width: 7em;
}

.header p {
  margin-top: 1em;
}

.block .container {
  padding: 0.1em;
}