*,
*:before, 
*:after {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/** /
* {
  outline: 1px dotted rgba( 0, 0, 0, .2 );
}
/**/


html {
  font-size: 62.5%;
  line-height: 1.333em;
  height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 38rem;
  @media ( width < 700px ) {
    scroll-padding-top: 9rem;
  }
}

body {
  background-color: var(--background-color);
  /* border: .5rem dashed #c00; */
  border-bottom: 0;
  border-top: 0;
  color: var(--text-color);
  font: 1.6rem/3rem 'primary-font', Arial, Helvetica, sans-serif;
  min-height: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

img {
  max-width: 100%;
  object-fit: contain;
  object-position: 0 0;
}

h1, h2, h3 {
  text-wrap: balance;
}

h1 {
  font: bold 3.6rem/3.6rem 'primary-font', Arial, Helvetica, sans-serif;
  margin-bottom: 4rem;
}

.login h1 {
  font: bold 2.6rem/3rem 'primary-font', Arial, Helvetica, sans-serif;
}

body.widget h1 {
  color: var(--text-color);
  font: bold 1.8rem/2.2rem 'primary-font', Arial, Helvetica, sans-serif;
  text-transform: uppercase;
}

h2 {
  color: var(--text-color);
  font: bold 2.0rem/2.4rem 'primary-font', Arial, Helvetica, sans-serif;
  margin-bottom: 2.5rem;
}

h3 {
  border-top: .1rem solid var(--line-color);
  margin-bottom: 1rem;
  padding-top: 1rem;
}

h1.tabs {
  
  display: flex;
  gap: 2rem;
  
  & > span {
    border-bottom: .4rem solid var(--text-color);
  }

  & > a {
    color: var(--line-color);
    &:hover {
      border-bottom: .4rem solid var(--line-color);
      text-decoration: none !important;
    }
  }
}


ul {
  list-style: none inside;
}

p {
  margin-bottom: 2rem;
}

a.btn,
button {
  background-color: var(--spot-color);
  color: var(--spot-text-color);
  cursor: pointer;
  display: inline-block;
  font: bold 2rem/2.4rem 'primary-font', Arial, Helvetica, sans-serif !important;
  margin: 2rem 0;
/*  margin-top: 2rem;*/
  padding: 1.2rem 3rem;
  text-align: center;
}

.btn:hover {
  background-color: #333;
  color: #fff;
}

a.btn.fullwidth,
.segment a.btn,
.segment button {
  width: 100%;
}

a.btn.secondary,
button.secondary {
  background-color: var(--secondary-color);
}

a.btn.red,
button.red {
  background-color: var(--hilite-color) !important;
  color: var(--background-color);
}

a.btn.red.outline,
button.red.outline {
  background-color: var(--background-color) !important;
  border: .1rem solid var(--hilite-color);
  color: var(--hilite-color);
}

a.btn.login,
button.login {
  font-size: 1.4rem !important;
  padding: .5rem;
}

button[type="submit"]:hover {
  background-color: #333;
  color: var(--spot-color);
}

a.btn.red:hover,
button[type="submit"].red:hover {
  color: var(--text-color);
}

.btn {
  background-color: #ccc;
/*  border: .1rem solid #333;*/
  color: #333;
  display: inline-block;
  font-weight: bold;
  margin-bottom: 2rem;
  text-decoration: none;
  padding: .5rem 2rem;
}

body.login .btn {
  margin-bottom: 0;
}

.btn.hilite {
  background-color: var(--spot-color);
  color: var(--spot-text-color);
}



.layout + .layout {
  margin-top: 5rem;
}

.layout-02,
.layout-03 {
  display: flex;
  justify-content: space-between;
}

.layout-02 section:first-of-type {
  width: 61rem;
}

.layout-02 section:last-of-type {
  width: 21rem;
}

.layout-03 section:first-of-type {
  width: 40rem;
}

.layout-03 section:nth-of-type(2) {
  width: 21rem;
}

.layout-03 section:last-of-type {
  width: 21rem;
}

main {
  padding-bottom: 5rem;
}

main li {
  padding-left: 2rem;
  position: relative;
}

main li:before {
  content: '–';
  display: inline-block;
  left: 0;
  position: absolute;
}

a {
  color: var(--text-color);
  text-decoration: none;
}

a:not([class]):hover,
a[class=""]:hover {
  text-decoration: underline;
}

body.new_password header,
body.password_forgotten header,
body.login header {
  position: fixed;
  top: 0;
}

body.calculator {
  display: flex;
  justify-content: space-between;
  padding: 3rem 0 4.5rem;
}

#logo {
  background-image: var(--logo);
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 10rem;
  width: 16rem;
}

body.thank-you #logo,
body.new_password #logo,
body.password_forgotten #logo,
body.login #logo {
  left: 0;
  position: absolute;
  top: 3rem;
}

#infoarea {
  display: inline-block;
  position: absolute;
  right: 4rem;
  top: 4rem;
}

body.thank-you {
  #questions {
    line-height: 1.5;
    span {
      display: inline-block;
    }
    @media ( width < 700px ) {
      line-height: 1;
      top: 4.2rem;
      span {
        display: block;
      }
    }
  }
  main {
    padding-top: 23rem !important;
    h1#hl {
      position: static;
      }
    }
}

body.new_password header #infoarea,
body.password_forgotten header #infoarea,
body.login header #infoarea {
  display: none;
}

body:not(.login,.calculator,.thank-you) header {
  padding-top: 3rem;
}

header nav {
  border-bottom: .1rem solid var(--line-color);
  font-size: 2.1rem;
  height: 4rem;
  line-height: 2.1rem;
}

header nav ul {
  display: flex;
  justify-content: flex-end;
  
}

header nav a {
  display: inline-block;
  margin: 0 0 0 3rem;
}

header nav li:first-of-type a {
  margin: 0;
}

header nav li:first-of-type a img {
  margin-top: -.3rem;
  width: 2.6rem;
}

/*header nav li:not(:first-of-type) a:before {*/
header nav li a:before {
  background-image: url(/img/pfeil-rechts.svg);
  background-repeat: no-repeat;
  background-size: .6rem;
  content: '';
  display: inline-block;
  height: 1.6rem;
  margin-right: 1.2rem;
  vertical-align: middle;
  width: .6rem;
}

#info {
  padding-top: 2rem;
  text-align: right;
}

#info .date {
  margin-left: 2rem;
}

.topbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  text-align: center;
}


.content-wrapper {
  margin: 0 auto;
  max-width: 140rem;
  padding: 0 4rem;
  position: relative;
  @media ( width < 700px ) {
    padding: 0 2rem;
  }
}

.content-center {
  text-align: center;
}

/* DEBUG * /
.content-wrapper {
  background-image: url(/img/dev-grid-930.svg);
  background-position: center center;
  background-size: 93rem 93rem;
}
/**/

form#client {
  display: grid;
  gap: 8rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "links1 rechts"
    "links2 rechts"
    "footer footer";
}

form#settings {
  display: grid;
  gap: 8rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "links1 rechts1"
    "links2 rechts2"
    "footer footer";
}

form fieldset {
/*  background-color: #eee;*/
/*  margin: 0 auto;*/
  margin-bottom: 2rem;
}

form#client fieldset { width: 100%; }

form#client fieldset:nth-of-type(1) { grid-area: links1; }
form#client fieldset:nth-of-type(2) { grid-area: links2; }
form#client fieldset:nth-of-type(3) { grid-area: rechts; }
form#client fieldset:nth-of-type(4) { grid-area: footer; text-align: center; }

form#settings fieldset:nth-of-type(1) { grid-area: links1; }
form#settings fieldset:nth-of-type(2) { grid-area: links2; }
form#settings fieldset:nth-of-type(3) { grid-area: rechts1; }
form#settings fieldset:nth-of-type(4) { grid-area: rechts2; }
form#settings fieldset:nth-of-type(5) { grid-area: footer; text-align: center; }

form legend {
  color: var(--text-color);
  font: bold 2.4rem/2.4rem 'primary-font', Arial, Helvetica, sans-serif;
  margin-bottom: 2.5rem;
}

form label:not([for]) {
  display: block;
  font: bold 1.6rem/2.0rem 'primary-font', Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: 1rem 0 .5rem 0;
}

form#client input[name="exchange_rate"] {
  width: 5rem;
}

form#client input[name="factor"] {
  margin-top: 1rem;
  width: 6rem;
}

form .help-block {
  color: var(--hilite-color);
  display: block;
  margin-bottom: .5rem;
  margin-top: -.5rem;
  line-height: 1;
}

form input.error,
form select.error {
  border-color: var(--hilite-color) !important;
}

form#profile-form {
  display: flex;
}

form#profile-form > fieldset {
  width: 33%;
}

fieldset select,
input[type="email"],
input[type="password"],
input[type="date"],
input[type="text"] {
  border: .1rem solid var(--line-color);
  display: inline-block;
  font: 1.6rem/3rem 'primary-font', Arial, Helvetica, sans-serif;
  margin-bottom: 1rem;
  padding: .5rem;
/*  width: 15rem;*/
}

fieldset select,
input[type="email"],
input[type="password"],
input[type="date"],
input[type="text"] {
  width: 100%;
}

input[type="submit"],
button[type="submit"] {
  background-color: var(--spot-color);
/*  border: .1rem solid #333;*/
  cursor: pointer;
  display: inline-block;
  font: bold 1.2rem/1.8rem 'primary-font', Arial, Helvetica, sans-serif;
  margin-bottom: 1rem;
  padding: .5rem 2rem;
}

input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  
/*  background: var(--spot-color);*/
  border-radius: 50%;
  border: 5px solid #fff;
  box-shadow: 0 0 0 2px #000;
  margin: 0 .3rem;
  &:checked {
    border-color: #000;
  }
}

select[disabled],
input[disabled] {
  background-color: var(--background-color);
  border-color: transparent !important;
  color: var(--text-color);
  display: inline-block;
  padding: .5rem 1rem .5rem 0;
/*  outline: .1rem dotted green;*/
/*  width: auto !important;*/
}

textarea {
  border: .1rem solid var(--line-color);
  display: block;
  font: 1.2rem/1.8rem 'primary-font', Arial, Helvetica, sans-serif;
  height: 20rem;
  margin-bottom: 1rem;
  padding: .5rem;
  width: 100%;
}

.input-field {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "links rechts"
    "- footer";
  
  label { grid-area: links; font-weight: normal !important;}
  input { grid-area: rechts; }
  span  { grid-area: footer; padding-bottom: 1rem; }
}

span.hilite {
  color: var(--hilite-color);
}

.msg {
  color: #900;
  margin: 2rem 0;
}

#send-data {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4rem;
  & > :nth-of-type(3n+1) {
    width: calc( 20% - 4rem );
  }
  & > :nth-of-type(3n+2) {
    width: calc( 50% - 4rem );
  }
  & > :nth-of-type(3n+3) {
    width: calc( 30% - 4rem );
  }
  @media ( width < 1200px ) {
    & > :nth-of-type(3n+1) {
      display: none;
    }
    & > :nth-of-type(3n+2) {
      width: calc( 60% - 4rem );
    }
    & > :nth-of-type(3n+3) {
      width: calc( 40% - 4rem );
    }
  }
  @media ( width < 700px ) {
    & > :nth-of-type(3n+2) {
      width: 100%;
    }
    & > :nth-of-type(3n+3) {
      width: 100%;
    }
  }
}

/* BEGIN LOGIN */

body.new_password,
body.password_forgotten,
body.login {
  background-image: var(--background-image);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

body.new_password main,
body.password_forgotten main,
body.login main {
  align-items: center;
  display: flex;
  height: calc( 100vh - 4.5rem );
  justify-content: center;
}

body:not(.login) main {
  min-height: calc( 100vh - 22rem );
  margin-top: 4rem;
}

body.thank-you main {
  min-height: calc( 100vh - 6rem );
}

body.new_password .form-wrapper,
body.password_forgotten .form-wrapper,
body.login #login {
  background-color: rgba( 255, 255, 255, .8 );
  border-radius: .4rem;
  width: 29rem;
  margin: 0 auto;
  padding: 3rem 2rem;
}

@supports ( ( -webkit-backdrop-filter: blur(10px) ) or ( backdrop-filter: blur(10px) ) ) {
  body.new_password .form-wrapper,
  body.password_forgotten .form-wrapper,
  body.login #login {
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
  }
}

body.new_password .form-wrapper h1,
body.password_forgotten .form-wrapper h1,
body.login #login h1 {
  margin-bottom: 4rem;
  text-align: center;
}

body.new_password .form-wrapper input[type="password"],
body.new_password .form-wrapper input[type="date"],
body.password_forgotten .form-wrapper input[type="email"],
body.login #login input[type="email"],
body.login #login input[type="date"],
body.login #login input[type="password"] {
  width: 100%;
}

.buttonbar {
  display: flex;
  justify-content: space-between;
}

body.new_password fieldset button[type="submit"],
body.password_forgotten fieldset button[type="submit"],
body.login fieldset button[type="submit"] {
  margin-bottom: 0;
}

/* END LOGIN */

/* BEGIN PROFILE */

body.profile .content-wrapper form {
/*  max-width: 48rem;*/
}

label.input-wrapper {
  display: flex;
}

label.input-wrapper span {
  display: block;
  font-weight: bold;
  padding: .5rem 0;
  /* width: 20rem; */
/*  width: 15rem;*/
}

label.input-wrapper span:after {
  content: ':';
}

label.input-wrapper select,
label.input-wrapper input {
/*  width: calc( 100% - 15rem );*/
}

/* END SETTINGS */

/* BEGIN ADMIN */

#date-filter,
#table-filter {
  border-bottom: .1rem solid var(--line-color);
  color: var(--text-color);
  display: flex;
}

#date-filter > span,
#table-filter > span {
  background-color: var(--secondary-color);
  display: inline-block;
  height: 3rem;
  line-height: 3rem;
  padding: 0 2.5rem;
}

#table-filter > span {
  cursor: pointer;
}

#date-filter > span {
  background-color: transparent;
  color: var(--hilite-color);
  line-height: 3rem;
}

#date-filter > span a {
  color: var(--hilite-color);
}

#table-filter > span.selected {
/*  border-color: rgba( 0, 0, 0, .25 );*/
  font-weight: bold;
}

#table-filter > span.pending {
  background-color: var(--pending-color);
}

#table-filter > span.done {
  background-color: var(--done-color);
}

.table-wrapper {
  max-height: calc( 100vh - 36.9rem );
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
}

table {
  
}

table thead {
/*  outline: .1rem solid var(--line-color);*/
/*  border-top: .1rem solid var(--line-color);*/
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

table tr th {
  background-color: var(--background-color);
  color: var(--text-color);
}

table tr.state td {
  border-top: .1rem solid var(--line-color);
}

tr.state > td:last-of-type {
  border-right: .1rem solid var(--line-color);
}

tr.state:last-of-type > td {
  border-bottom: .1rem solid var(--line-color);
}

tr.state > td:first-of-type {
  width: 1rem;
}

tr.state.done > td:first-of-type {
  background-color: var(--done-color);
}

tr.state.pending > td:first-of-type {
  background-color: var(--pending-color);
}

table.pending tr.done,
table.done tr.pending {
  display: none;
}

.dimmed {
  color: #ccc;
  white-space: nowrap;
}

table#client-list {
  border-collapse: collapse;
  width: 100%;
}

table#client-list thead {
  outline: .1rem solid var(--line-color);
/*  border-top: .1rem solid var(--line-color);*/
  
}

table#client-list tr th {
  height: 3.9rem;
  line-height: 1.8rem;
}

table#client-list tr td {
  height: 3.4rem;
  line-height: 1.8rem;
  vertical-align: middle;
}

table#client-list tr > *:nth-of-type(n+2) {
  padding: 0 1rem;
  text-align: left;
}

table#client-list tr > *:nth-of-type(1) {
  width: 1rem;
}

table#client-list tr > *:nth-of-type(2) {
  font-weight: bold;
  width: 20rem;
}

table#client-list tr > *:nth-of-type(3) {
  width: 14rem;
}

table#client-list tr > *:nth-of-type(4) {
  width: 13rem;
}

table#client-list tr > *:nth-of-type(5) {
  width: 13rem;
}

/*
table#client-list tr > *:nth-of-type(6) {
  width: 20%;
}
*/

#client-list-reset {
  cursor: pointer;
/*
  display: inline-block;
  background: url(/img/plus.svg) no-repeat;
  background-size: contain;
  height: 1.2rem;
  width: 1.2rem;
*/
}



body.admin table tr > *:first-of-type {
  text-align: right;
}

body.admin table tr > *:nth-of-type(2) {
  font-weight: bold;
}

.list-functions {
  margin-bottom: 2rem;
}

/* END ADMIN */

.colgrp {
  display: flex;
  margin-bottom: 2rem;
}

.colgrp > div {
  width: 50%;
}

.colgrp > div:last-of-type input {
  width: 21rem;
}

span.label {
  display: inline-block;
  width: 30%;
}

.boxed.state {
  color: var(--background-color);
  display: inline-block;
  font-weight: bold;
  padding: .5rem 2rem;
  width: 100%;
}

.boxed.state.done {
  background-color: #090;
}

.boxed.state.pending {
  background-color: #900;
}

#delete-client {
  display: inline-block;
  float: right;
}

#delete-client button {
  background-color: var(--background-color);
  background-image: url(/img/papierkorb.svg);
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  height: 2.5rem;
  margin-left: 1rem;
  padding: 0;
  width: 2.5rem;
}

.inplace-edit {
  background-image: url(/img/stift.svg);
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  display: inline-block;
  float: right;
  height: 2.5rem;
  width: 2.5rem;
}

.inplace-edit.activated {
  background-image: url(/img/checkmark.svg);
}

span.inplace-button,
button.inplace-area-button,
button.inplace-button,
#profile-wrapper button[type=submit] {
  display: none;
}

form.activated button.inplace-area-button,
.inplace-edit.activated ~ .inplace-form span.inplace-button,
.inplace-edit.activated ~ .inplace-form button.inplace-button,
.inplace-edit.activated ~ #profile-wrapper button[type=submit] {
  display: inline-block;
}


h2 span.state {
  border-radius: 50%;
  display: inline-block;
  height: 2.5rem;
  margin-left: 1rem;
  margin-top: -.2rem;
  position: absolute;
  width: 2.5rem;
}

h2 span.state.pending {
  background-color: var(--pending-color);
}

h2 span.state.done {
  background-color: var(--done-color);
}


/* BEGIN SLOTS */

#slots {
  border-collapse: collapse;
}

#slots td {
  height: 3rem;
/*  display: inline-block;*/
  position: relative;
  width: 3rem;
}

#slots input {
  display: none;
}

#slots label {
  cursor: pointer;
/*  position: absolute;*/
}

#slots label span {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

#slots label.off input:checked ~ span {
  background-color: var(--background-color);
  z-index: 1;
}

#slots label.on input:checked ~ span {
  background-color: var(--spot-color);
  z-index: 1;
}

/* END SLOTS */

/* BEGIN EXCLUSIONS */

.past {
  color: #ccc;
}

.today {
  outline: .1rem solid var(--hilite-color);
}

#exclusions {
  border-collapse: collapse;
}

#exclusions td span {
  cursor: pointer;
  display: inline-block;
  padding: .2rem .5rem;
/*  text-align: right;*/
/*  width: 100%;*/
}

#exclusions input {
  display: none;
}

#exclusions label input:checked ~ span {
  background-color: var(--blocked-color);
}

/*
#exclusions label input:checked ~ span.today {
  background-color: #900;
  color: #fff !important;
}

#exclusions label input:checked ~ span.past {
  background-color: #ccc;
  color: #fff;
}
*/

/* END EXCLUSIONS */

footer {
  background-color: var(--secondary-color);
  height: 4.5rem;
  font-size: 1.6rem;
  line-height: 4.5rem;
  text-align: center;
}

footer a {
  display: inline-block;
  margin: 0 1rem;
}

footer a:before {
  background-image: url(/img/pfeil-rechts.svg);
  background-repeat: no-repeat;
  background-size: .6rem;
  content: '';
  display: inline-block;
  height: 1.6rem;
  margin-right: 1rem;
  vertical-align: middle;
  width: .6rem;
}

footer span {
  display: inline-block;
  margin-left: 4rem;
}

#slot_selection {
  min-height: 3.7rem;
}

#cal,
#calendar_widget {
  width: 21rem;
}

.calendar-header {
  
}

.calendar-header {
  font-weight: bold;
  margin: 1rem auto 1rem;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  width: 13rem;
}

.calendar-header a {
  display: inline-block;
  height: 1.2rem;
  position: absolute;
  top: .2rem;
  width: 1.2rem;
}

.calendar-header a:first-of-type {
  left: 0;
}
.calendar-header a:last-of-type {
  right: 0;
}

#consultant-calendar-wrapper {
  border: .1rem solid var(--line-color);
}

.calendar-wrapper {
  margin-bottom: 2rem;
}

.calendar-container {
  border: .1rem solid var(--line-color);
  margin-bottom: 1rem;
}

#consultant-calendar {
  border-collapse: collapse;
}

#consultant-calendar tr td span {
  background-color: var(--secondary-color);
}

#consultant-calendar tr td span.slot {
  background-color: var(--spot-color);
  color: var(--spot-text-color);
}

#consultant-calendar tr td span.done {
  background-color: var(--done-color);
  color: var(--text-color);
  cursor: pointer;
}

#consultant-calendar tr td span.pending {
  background-color: var(--pending-color);
  color: var(--text-color);
  cursor: pointer;
}

#consultant-calendar tr td span.pending.done {
  background: linear-gradient(135deg, var(--done-color) 50%, var(--pending-color) 50%);
}

table.calendar {
  border-collapse: collapse;
}

table.calendar thead tr th {
  background-color: transparent;
}

table.calendar tbody tr th,
table.calendar tr td {
  border: .1rem solid var(--line-color);
}

table#slots tr th {
  width: 6rem;
}

table.calendar tr td span {
  color: #000;
}

table.calendar tbody tr th,
table.calendar tr td:first-of-type {
  border-left: 0;
}

table.calendar tr td:last-of-type {
  border-right: 0;
}

table.calendar tbody tr:last-of-type th,
table.calendar tr:last-of-type td {
  border-bottom: 0;
}

.cal-nav img,
.calendar-nav img {
  height: 1.2rem;
}

#calendar-legend {
  margin: 1rem 0 2rem;
}

.legend {
  display: flex;
  flex-wrap: wrap;
}

.legend > span {
  margin: 0 0 1rem 0;
  width: 50%;
}

.legend > span > span {
  background-color: var(--secondary-color);
  display: inline-block;
  height: 3rem;
  margin-right: .5rem;
  vertical-align: middle;
  width: 3rem;
}

.legend > span.done    > span { background-color: var(--done-color); }
.legend > span.pending > span { background-color: var(--pending-color); }
.legend > span.slot    > span { background-color: var(--spot-color); }

.validation-error {
  color: var(--hilite-color);
}

.underline {
  border-bottom: .1rem solid var(--line-color);
  padding-bottom: 1rem;
}

.hidden {
  display: none !important;
}

.loading {
  position: relative;
}

.loading:after {
  background-color: rgba( 255, 255, 255, .75 );
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

#main-form {
  margin-top: 2rem;
}

body.widget .content-wrapper {
  margin: 0 auto;
  width: 21rem;
}

body.widget .content-wrapper input {
  width: 100%;
}

body.widget .content-wrapper input.one-third {
  width: calc( 33% - .5rem );
}

body.widget .content-wrapper input.two-third {
  width: calc( 66% - .5rem );
}

label.date {
  display: block;
  position: relative;
}

label.date > span.label {
  display: block;
  height: 2rem;
  width: 100%;
}

#date-selector-icon {
  background: var(--background-color) url(../img/icon-calendar.svg) no-repeat center center;
  background-size: cover;
  cursor: pointer;
  height: 2.8rem;
  position: absolute;
  right: .1rem;
  top: 2.1rem;
  width: 2.8rem;
}

label.checkbox {
  display: block;
  margin-bottom: 2rem;
  padding-left: 2.4rem;
  position: relative;
}

label.checkbox input[type="checkbox"] {
  left: 0;
  position: absolute;
  top: .3rem;
}

#calendar_widget td span.past,
#cal td span.past {
  background-color: #efefef;
}

select {
  background: var(--background-color) url(../img/pfeil-unten.svg) no-repeat right center;
  background-size: 1.2rem auto;
  border: .1rem solid var(--line-color);
  border-radius: 0;
  font: 1.2rem/1.8rem 'primary-font', Arial, Helvetica, sans-serif;
  margin: .25rem 0 1rem;
  padding: 0.2rem .5rem;
  position: relative;
  -webkit-appearance: none;
  width: 50%;
}

select[disabled] {
  border: .1rem solid #efefef;
}

.row {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.hide {
  display: none !important;
}

.pale {
  opacity: .25;
}

.live-rotation {
  float: right;
}

.live-rotation i {
  background-color: var(--spot-color);
  color: var(--spot-text-color);
  border-radius: .4rem;
  cursor: pointer;
  padding: .5rem;
  
  -webkit-user-select: none; 
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#videoremote1 video {
  transition: transform .1s ease-in-out;
}

#curres1,
#curbitrate1 {
  background-color: rgba( 255, 255, 255, .5 );
  border-radius: .2rem;
  padding: .2rem .4rem;
  width: auto;
}

#poster-list {
  max-height: 74.7rem;
  overflow-x: hidden;
  overflow-y: scroll;
}

.poster-wrapper {
  cursor: pointer;
  position: relative;
}

.poster-wrapper .poster-date {
  background-color: rgba( 255, 255, 255, .5 );
  border-radius: .2rem;
  bottom: 0;
  display: inline-block;
  left: 0;
  margin: 1rem;
  padding: .2rem .4rem;
  position: absolute;
  z-index: 30;
}

.poster-wrapper .poster-play {
  background: url(/img/play-button.svg) no-repeat center center;
  background-size: 5rem;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 20;
}

#video {
  transition: transform .1s ease-in-out;
}

#video-overlay {
  align-items: center;
  background-color: rgba( 0, 0, 0, .9 );
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}

#video-overlay-close {
  background-color: var(--background-color);
  border-radius: 50%;
  color: var(--text-color);
  cursor: pointer;
  font-size: 3rem;
  font-weight: bold;
  line-height: 3rem;
  height: 3rem;
  position: fixed;
  right: 2rem;
  text-align: center;
  top: 2rem;
  width: 3rem;
}

#video-stage {}

#video-wrapper video {
  border: .3rem solid rgba( 255, 255, 255, .1 );
  border-radius: .4rem;
}

#video-time {
  display: block;
  text-align: center;
}

#video-controls-wrapper {
  bottom: 2rem;
  left: 0;
  position: fixed;
  width: 100%;
}

#video-controls {
  background-color: var(--background-color);
  border-radius: .4rem;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  max-width: 40rem;
  z-index: 80;
}

#video-control-buttons {
  display: flex;
  justify-content: space-between;
  margin: 1rem -.2rem 0 -.2rem;
}

#video-controls button {
  background-color: var(--spot-color);
  border-radius: .4rem;
  height: 3rem;
  line-height: 3rem;
  margin: 0 .2rem;
  padding: .2rem;
  width: 3rem;
}

#video-controls input[type="range"] {
  background-color: var(--background-color);
  padding: .2rem;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    -webkit-appearance: none;
    background-color: var(--spot-color);
    border-radius: .4rem;
    overflow: hidden;
    width: 10rem;
  }

  input[type='range']::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    color: #9f0;
    height: 1.6rem;
    margin: 0;
  }

  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #666;
    box-shadow: -10rem 0 0 10rem #ccc;
    cursor: ew-resize;
    height: 1.6rem;
    width: .3rem;
  }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #ccc; 
}
input[type="range"]::-moz-range-track {  
  background-color: #eee;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #ccc; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #eee;
}

/* BEGIN CONFIRM */

.modal-backdrop,
.c-overlay {
  align-items: center;
  background-color: rgba( 0, 0, 0, .5 );
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 40;
}

.bootbox.modal,
#c-stage {
  background-color: var(--background-color);
  color: var(--text-color);
  display: inline-block;
  border-radius: .2rem;
  left: calc( 50% - 12rem );
  max-height: 66vh;
  min-height: 12rem;
  padding: 3rem 3rem 1rem 3rem;
  position: fixed;
  text-align: center;
  width: 24rem;
  top: calc( 50% - 12rem );
  z-index: 41;
}

#c-stage h2 {
  text-transform: uppercase;
}

#c-stage p {
  font: 1.5rem/1.8rem 'primary-font', Arial, Helvetica, sans-serif;
}

.bootbox button,
#c-stage button {
  background-color: var(--spot-color);
  display: inline-block;
  margin: 1rem;
  padding: .5rem;
  text-transform: uppercase;
  width: 6rem;
}

.bootbox button.bootbox-close-button {
  position: absolute;
  right: 0;
  top: 0;
}

/* END CONFIRM */

#progress-bar {
  background-color: #eee;
  border-radius: .4rem;
  display: block;
  height: 1rem;
  margin: .5rem 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

#progress-bar > span {
  background-color: #ccc;
  border-right: .1rem solid #999;
  display: block;
  height: 1rem;
  left: 0;
  position: absolute;
  top: 0;
}

.segment {
  margin-top: 1rem;
}

.segment.line {
  border-top: .1rem solid var(--line-color);
  margin-top: 1rem;
  padding-top: 2rem;
}

#send-video-link-indicator {
  padding-left: 1rem;
}

#send-video-link-indicator.success {
  color: #090;
}

#overlink-overlay {
  align-items: center;
  background-color: rgba( 0, 0, 0, .9 );
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}

#overlink-overlay-close {
  background-color: var(--background-color);
  border-radius: 50%;
  color: var(--text-color);
  cursor: pointer;
  font-size: 3rem;
  font-weight: bold;
  line-height: 3rem;
  height: 3rem;
  position: fixed;
  right: 2rem;
  text-align: center;
  top: 2rem;
  width: 3rem;
}

#overlink-area {
  background-color: var(--background-color);
  padding: 2rem;
}


@media ( max-width: 414px ) {}



.grey {
  color: #999;
}

.green {
  color: #090;
}

.red {
  color: #900;
}


.group {
  input[type=checkbox] {
    display: none;
  }
  h2 {
    background-color: var(--spot-color);
    label {
      cursor: pointer;
      display: block;
      padding: .8rem .8rem .8rem 3rem;
      position: relative;
      -webkit-user-select: none;
      user-select: none;
      &:before {
        content: '+';
        left: 1rem;
        position: absolute;
      }
    }
  }
}

input:checked ~ h2 > label:before {
  content: '–'
}

.items {
  display: flex;
/*  display: none;*/
  gap: 0 5rem;
  flex-wrap: wrap;
  height: 0;
  justify-content: flex-start;
  overflow: hidden;
  transition: height .25s ease-in-out;
  width: 100%;
  .item {
    border-top: .1rem solid var(--text-color);
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-top: 1rem;
    position: relative;
    width: calc( 33% - 3rem );
    @media ( width < 1100px ) {
      width: calc( 50% - 3rem );
    }
    @media ( width < 700px ) {
      width: 100%;
    }
    .item-icon {
      display: block;
      height: 4.5rem;
      width: 4.5rem;
      &.missing {
        border: .1rem solid red;
      }
    }
    .item-title {
      display: block;
      width: calc( 100% - 15rem );
      @media ( width < 1100px ) {
        font-size: 1.4rem;
        line-height: 2.4rem;
      }
      pre.missing {
        color: red;
        font-size: .7rem;
      }
    }
    .item-count {
      display: flex;
      position: absolute;
      right: 0;
      top: 1rem;
      input {
        border-radius: 0;
        border-bottom: .1rem solid var(--text-color);
        border-top: .1rem solid var(--text-color);
        font-family: 'primary-font', Arial, Helvetica, sans-serif;
        font-size: 1.6rem;
        height: 2.6rem;
        line-height: 1;
        padding: .3rem 0;
        text-align: center;
        width: 3rem;
        -moz-appearance: textfield;
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
      }
      button {
        border: .1rem solid var(--text-color);
        background-color: white;
        display: inline-block;
        font-size: 1.4rem !important;
        font-weight: bold;
        height: 2.6rem;
        line-height: 1;
        margin: 0;
        padding: .1rem 1rem;
        &:first-of-type {
          border-bottom-left-radius: .6rem;
          border-top-left-radius: .6rem;
        }
        &:last-of-type {
          border-bottom-right-radius: .6rem;
          border-top-right-radius: .6rem;
        }
      }
    }
  }
}

input:checked ~ div.items {
  height: auto;
  height: calc-size(auto, size);
  margin-bottom: 1.5rem;
}

h1#app-head {
  position: relative;
  /*
  &:after {
    content: attr(data-total) ' m³';
    display: inline-block;
    position: absolute;
    right: 0;
  }
  */
  @media ( width < 700px ) {
    padding-bottom: 4rem;
  }
  span {
    display: inline-block;
    font-size: 2rem;
    font-weight: normal;
    position: absolute;
    right: .5rem;
    top: .4rem;
    @media ( width < 700px ) {
      top: 8rem;
    }
  }
}

h2[id^='head--'] {
  position: relative;
  /*
  &:after {
    content: attr(data-group-total) ' m³';
    display: inline-block;
    position: absolute;
    right: .5rem;
    top: .2rem;
  }
  */
  span {
    display: inline-block;
    font-weight: normal;
    position: absolute;
    right: .5rem;
    top: .8rem;
  }
}

h1#hl {
  left: 20rem;
  position: absolute;
  top: 5.4rem;
  @media ( width < 700px ) {
    display: none;
  }
}

p#questions {
  line-height: 2.4rem;
  position: absolute;
  right: 0;
  top: 5.4rem;
  @media ( width < 700px ) {
    font-size: 1.4rem;
    top: 5.7rem;
  }
  b {
    @media ( width < 700px ) {
      display: none;
    }
  }
  span {
    color: var(--hilite-color);
    display: block;
    a {
      color: var(--hilite-color);
    }
  }
}

#calc-header {
/*  margin: 0 auto;*/
  padding: 20rem 0 4rem;
  width: 70rem;
  h1 {
    color: var(--line-color);
    margin: .7rem 0;
    span {
      color: var(--hilite-color);
    }
  }
  @media ( width < 700px ) {
    display: none;
  }
}

#mobile-price {
  background-color: var(--hilite-color);
  color: #fff;
  display: block;
  font-size: 2.2rem;
  font-weight: bold;
  left: 0;
  line-height: 3rem;
  padding: 1rem 2rem;
  position: fixed;
  right: 0rem;
  top: 12rem;
  z-index: 10;
  @media ( width >= 700px ) {
    display: none;
  }
}

body.client:not(.consultants) {
  header {
    background-color: var(--background-color);
    border-bottom: .1rem solid var(--line-color);
    padding-bottom: 0;
    padding-top: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    @media ( width < 700px ) {
      background-color: var(--spot-color);
      border: none;
      &:before {
        background-color: var(--spot-color);
        content: '';
        display: block;
        height: 12rem;
        left: -2rem;
        position: absolute;
        right: -2rem;
        top: 0;
        z-index: -1;
      }
    }
    #logo {
      position: absolute;
      top: 3rem;
      @media ( width < 700px ) {
        left: -1rem;
        top: 1rem;
      }
    }
  }
  main {
    margin: 0 auto;
    padding: 10rem 0 0 0;
  }
}

body.import {
  section {
    &:not(:last-of-type) {
      border-bottom: .1rem solid var(--line-color);
      margin-bottom: 4rem;
    }
    a {
      color: var(--hilite-color);
      float: right;
    }
  }
}

.table-preview {
  margin-bottom: 4rem;
  table {
    display: none;
    margin-top: 2rem;
    width: auto;
    tr {
      &:nth-child(odd) {
        background-color: #eee;
      }
      th {
        border-bottom: .1rem solid var(--line-color);
        text-align: left;
        padding: .1rem .5rem;
      } 
      td {
        padding: .1rem .5rem;
        &:first-of-type {
          font-weight: bold;
        }
      }
    }
  }
  label {
    background-color: var(--spot-color);
    cursor: pointer;
    display: block;
    font-size: 1.6rem; 
    font-weight: bold;
    padding: .3rem .5rem .3rem 3rem;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    &:before {
      content: '+';
      left: 1rem;
      position: absolute;
    }
    &:has(:checked) {
      &:before {
        content: '–';
      }
      & + table {
        display: block;
      }
    }
    span {
      color: #0006;
      float: right;
      font-weight: normal;
    }
    input {
      display: none;
    }
  }
}

.page {
  padding-bottom: 10rem;
  h2 {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
  p {
    font-size: 1.8rem;
  }
}

#intro {
  display: flex;
  gap: 12rem;
  @media ( width < 700px ) {
    padding-top: 16rem;
  }
  & > div {
    width: 80%;
    h2, p {
      max-width: 60rem;
    }
    @media ( width < 700px ) {
      width: 100%;
    }
  }
  & > img {
    max-width: 22rem;
    @media ( width < 700px ) {
      display: none;
    }
  }
}

details {
  margin-bottom: 2rem;
  summary { 
    cursor: pointer;
    background-color: var(--spot-color);
    display: block;
    font-size: 2rem;
    font-weight: bold;
    list-style-type: none;
    padding: .8rem .8rem .8rem 3rem;
    position: relative;
    text-wrap: balance;
    -webkit-user-select: none; 
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    &::-webkit-details-marker {
      display:none;
    }
    &:before {
      content: '+';
      display: inline-block;
      left: 1rem;
      position: absolute;
    }
  }
  span {
    display: inline-block;
    font-size: 1.4rem;
    padding: 1rem 3rem;
    max-width: 50rem;
  }
}

details[open] {
  summary {
    &:before {
      content: '–';
    }
  }
} 

#faq {
  background-color: #fff;
  display: none;
  max-width: 114rem;
  overscroll-behavior: contain;
  padding: 2rem;
  position: fixed;
  overflow: scroll;
  margin: 0 auto;
  max-height: 80vh;
  top: 16rem;
  width: 100%;
  z-index: 50;
  @media ( width < 1220px ) {
    max-width: calc( 100vw - 8rem );
  }
  @media ( width < 700px ) {
    max-width: calc( 100vw - 4rem );
    top: 2rem;
    max-height: calc( 100vh - 4rem );
  }
}

input#faq-open {
  display: none;
}

input#faq-open:checked ~ #faq--backdrop,
input#faq-open:checked ~ #faq {
  display: block;
}

#faq--backdrop {
  background-color: #59636b;
  bottom: 0;
  content: '';
  display: none;
  left: 0;
  opacity: .7;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 49;
}

#faq--close {
  cursor: pointer;
  float: right;
  @media ( width < 700px ) {
    width: 2rem;
  }
}

#info-link {
  background-color: var(--spot-color);
  cursor: pointer;
  display: inline-block;
  display: none;
  font-weight: bold;
  padding-left: 2rem;
  position: absolute;
  text-transform: uppercase;
  z-index: 10;
  @media ( width >= 700px ) {
    border-radius: 10rem;
    font-size: 2.4rem;
    height: 10rem;
    line-height: 10rem;
    right: 0;
    text-align: center;
    top: 21rem;
    transform: rotate(15deg);
    transition: .1s transform ease-in-out;
    width: 10rem;
    &:hover {
      text-decoration: none;
      transform: rotate(15deg) scale(1.1);
    }
  }
  @media ( width < 700px ) {
    font-size: 1.6rem;
    right: 1rem;
    top: 2rem;
    width: 15.5rem;
  }
  &:before {
    content: '〉';
    font-size: 1.6rem;
    left: 1rem;
    display: inline-block;
    position: absolute;
  }
  
}

.steps {
  display: flex;
  gap: 2rem;
  padding-top: 1.3rem;
  & > a {
    background-color: var(--blocked-color);
    display: inline-block;
    padding: 0 0 0 1rem;
    position: relative;
    &:hover,
    &.active {
      color: var(--hilite-color);
      text-decoration: none;
    }
    &:after {
      border-bottom: 1.5rem solid transparent;
      border-left: 1.5rem solid var(--blocked-color);
      border-top: 1.5rem solid transparent;
      content: '';
      display: block;
      position: absolute;
      right: -1.5rem;
      top: 0;
    }
  }
}