@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
html {
  scroll-snap-type: y mandatory;
}

.traingle {
  width: 0;
  height: 0;
  position: absolute;
  right: 0;
}
.traingle.right {
  border-top: 750px solid transparent;
  border-bottom: 750px solid transparent;
  border-right: 400px solid #243f52;
}

.one-block-at-the-time {
  scroll-snap-align: center;
  margin: 50px 0;
}
.one-block-at-the-time.small {
  margin: 0 0 400px 0;
}

.steps {
  padding: 25px;
}
.steps .line {
  border-bottom: 1px solid #243f52;
  width: 100%;
}
.steps .step-block {
  padding: 0 25px;
}
.steps .step-block h3 {
  text-wrap-mode: nowrap;
}
.steps .step-block h3.current, .steps .step-block h3.done {
  color: #fbb904;
  font-weight: bold;
}
.steps .step-block h3.current {
  color: #243f52;
  text-decoration: underline;
}
.steps .step-block #deliveryDateinput[type=date]::-webkit-datetime-edit-day-field, .steps .step-block #deliveryDateinput[type=date]::-webkit-datetime-edit-month-field, .steps .step-block #deliveryDateinput[type=date]::-webkit-datetime-edit-year-field {
  opacity: var(--field-opacity, 0);
}
.steps .step-block #deliveryDateinput[type=date].has-value {
  --field-opacity: 1;
}

.content-container .content-teaser {
  width: 75%;
}
.content-container .content-teaser .teaser-form {
  width: 100%;
}
.content-container .content-teaser .teaser-form .input-field-box, .content-container .content-teaser .teaser-form .explanation-box {
  padding: 25px;
}
.content-container .content-teaser .teaser-form .explanation-box .ver-line {
  border-right: 1px solid #243f52;
  height: 75%;
  margin: 0 50px;
}
.content-container .content-teaser .teaser-form .form-part {
  height: 400px;
  padding: 25px;
}
.content-container .content-teaser .teaser-form .form-part .input-div {
  margin: 25px;
}
.content-container .content-teaser .teaser-form .form-part a:not(.button) {
  text-decoration: underline;
  font-weight: bold;
}
.content-container .content-teaser .teaser-form .form-part label {
  padding-bottom: 10px;
  font-weight: bold;
  color: #243f52;
}
.content-container .content-teaser .teaser-form .form-part input:not([type=submit]) {
  color: #243f52;
  max-width: 40%;
}
.content-container .content-teaser .teaser-form .form-part input:not([type=submit]):disabled {
  border-color: rgba(118, 118, 118, 0.3);
  color: rgba(118, 118, 118, 0.521);
}
.content-container .content-teaser .teaser-form .form-part input:not([type=submit])::-moz-placeholder {
  opacity: 0.7;
}
.content-container .content-teaser .teaser-form .form-part input:not([type=submit])::placeholder {
  opacity: 0.7;
}
.content-container .content-teaser .teaser-form .form-part input:not([type=submit])::-moz-placeholder {
  opacity: 0.7;
}
.content-container .content-teaser .teaser-form .form-part select {
  max-width: 75%;
}

.arrow-down-big {
  font-size: 86px;
}

.page-title {
  font-size: 42px;
}

.error-message {
  color: red;
  min-height: 25px;
}

.content-holder-default {
  align-items: start !important;
}

.full-width {
  margin: 0 50px;
}

.result.reminder-form input[type=email] {
  margin-right: 25px;
}
.result h1 {
  font-size: 58px;
  margin: 0;
  padding: 0;
}
.result .button-holder {
  margin-top: 50px;
}
.result .button-holder a {
  font-weight: bold;
}
.result .calculator-result {
  width: 100%;
  font-size: 18px;
}
.result .calculator-result .block-container {
  width: 100%;
}
.result .calculator-result .block-container.small-wdith {
  width: 75%;
}
.result .calculator-result .block-container h2 {
  font-size: 32px;
}
.result .calculator-result .block-container .percentage-block {
  width: 35%;
  padding: 15px;
  background-color: white;
}
.result .calculator-result .block-container .block {
  width: 100%;
  margin: 50px 50px;
  padding: 15px;
  border: 3px solid #243f52;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1607843137);
  border-color: #307da7;
  background-color: #307da7;
  color: white;
  flex: 1 1 0;
  min-width: 0;
}
.result .calculator-result .block-container .block p {
  font-weight: bold;
}
.result .disclaimer {
  display: flex;
  justify-content: center;
}
.result .disclaimer p {
  width: 75%;
}

.watcher {
  width: 100%;
}

@media only screen and (max-width: 1000px) {
  .teaser-form div input[type=number] {
    width: 100%;
  }
}
/* Special rules for special people */
@media only screen and (min-width: 700px) and (max-width: 1600px) and (min-height: 650px) {
  .background-triangle {
    width: 23vw;
    height: 47vh;
  }
}
/* Small desktop / laptop */
@media only screen and (min-width: 700px) and (max-width: 1600px) and (max-height: 700px) {
  .background-triangle {
    width: 30vw;
    height: 55vh;
  }
  .page-title {
    margin-top: 25px;
    font-size: 32px;
  }
  .content-container .content-teaser {
    width: 100%;
  }
  .content-container .content-teaser .teaser-form .input-field-box {
    padding: 15px 0 0 0;
  }
  .content-container .content-teaser .input-div input,
  .content-container .content-teaser .input-div select {
    font-size: 20px;
  }
}
@media only screen and (min-width: 700px) and (max-width: 1600px) and (min-height: 700px) {
  .page-title {
    margin-top: 25px;
    font-size: 32px;
    margin-bottom: 0;
  }
  .steps {
    padding-bottom: 0;
  }
  #form-part-3 .input-field-box {
    padding: 0;
  }
  #form-part-3 .input-div {
    margin: 15px 25px;
  }
  .content-container .content-teaser {
    width: 100%;
  }
  .content-container .content-teaser .teaser-form .input-field-box {
    padding: 15px 0 0 0;
  }
  .content-container .content-teaser .input-div input, .content-container .content-teaser .input-div select {
    font-size: 20px;
  }
  .result h1 {
    font-size: 38px;
  }
  .result .button-holder {
    margin-top: 25px;
  }
  .result .button-holder .button {
    padding: 15px 49px;
  }
  .result .calculator-result .button.big {
    padding: 12px 30px;
    font-size: 30px;
  }
  .result .calculator-result .block-container h2 {
    margin-top: 0;
  }
  .result .calculator-result .block-container .percentage-block {
    padding: 0;
  }
  .result .calculator-result .block-container .block {
    margin: 15px 25px;
  }
  .result .calculator-result .block-container .block h2 {
    font-size: 32px;
  }
}
@media only screen and (max-width: 768px) {
  .page-title {
    margin-top: 25px;
    font-size: 21px;
    margin-bottom: 0;
  }
  .full-width {
    margin: 0 10px;
  }
  .content-container .content-teaser {
    width: 100%;
  }
  .content-container .content-teaser .teaser-form #form-part-3 input[type=submit] {
    font-size: 18px;
  }
  .content-container .content-teaser .teaser-form .form-part {
    height: unset;
  }
  .content-container .content-teaser .teaser-form .form-part .input-field-box {
    padding: 5px;
  }
  .content-container .content-teaser .teaser-form .form-part .input-field-box input:not([type=submit]) {
    max-width: unset;
  }
  .content-container .content-teaser .teaser-form .form-part .input-field-box select {
    font-size: 16px;
    max-width: 100%;
  }
  .content-container .content-teaser .teaser-form .form-part .input-field-box .input-div {
    margin: 5px;
  }
  .content-container .content-teaser .teaser-form .form-part .explanation-box {
    padding: 5px;
  }
  .content-container .content-teaser .teaser-form .form-part .explanation-box h3 {
    margin: 5px 0;
  }
  .content-container .content-teaser .teaser-form .steps {
    padding: 5px;
  }
  .content-container .content-teaser .teaser-form .steps .step-block {
    padding: 0 5px;
  }
  .content-container .content-teaser .teaser-form .steps .line {
    display: none;
  }
  .content-container .result {
    scroll-snap-align: start;
  }
  .content-container .result #result h1 {
    font-size: 21px;
  }
  .content-container .result .calculator-result .block-container {
    width: 100%;
    align-items: center !important;
  }
  .content-container .result .calculator-result .block-container .block {
    margin: 10px;
  }
  .content-container .result .disclaimer p {
    width: 100%;
    font-size: 12px;
  }
  .content-container .result.reminder-form form input[type=email] {
    margin-bottom: 10px;
  }
  .content-container .result.reminder-form form a {
    max-width: 90%;
  }
  .one-block-at-the-time {
    scroll-snap-align: start;
    padding: 100px 0 100px 0 !important;
  }
}
/* Mobile devices (portrait) */
@media screen and (max-width: 599px) {
  /* Mobile-specific styles here */
}
/* Tablets (portrait) */
@media screen and (min-width: 600px) and (max-width: 799px) {
  /* Tablet-specific styles here */
}
/* Tablets and small desktops (landscape) */
@media screen and (min-width: 800px) and (max-width: 1199px) {
  /* Tablet/Small Desktop-specific styles here */
}
/* Desktops and large screens */
@media screen and (min-width: 1200px) {
  /* Desktop-specific styles here */
}