@font-face {
  font-family: "KalkhoffTTNormsPro";
  src: url("https://26545664.fs1.hubspotusercontent-eu1.net/hubfs/26545664/LP/Fonts/Kalkhoff_TT_Norms_Pro_Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "KalkhoffTTNormsPro";
  src: url("https://26545664.fs1.hubspotusercontent-eu1.net/hubfs/26545664/LP/Fonts/Kalkhoff_TT_Norms_Pro_Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.hs-form {
  padding-bottom: 4vw;
}

/* ===== hs-form-html ===== */

.hs-form-html legend,
.hs-form-html p {
  font-family: 'NeueDIN','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.hs-form-html h1 {
  font-family: 'NeueDIN','Helvetica Neue',Helvetica,Arial,sans-serif;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.4px;
  padding: 0;
  font-size: 24px;
  font-weight: 600;
  padding-top: 60px;
  padding-bottom: 20px;
}

.hs-form-html h2 {
  margin-top: 25px;
}

.hs-form-html label > span > p {
  font-size: 14px;
}

.hs-form-html label > span {
  line-height: normal;
  font-size: 14px;
}

.hsfc-FieldLabel {
  text-transform: uppercase;
  font-weight: normal !important;
  font-family: 'NeueDIN','Helvetica Neue',Helvetica,Arial,sans-serif !important;
  font-size: 14px !important;
  color: rgba(14, 21, 20, 1) !important;
}

.hsfc-TextInput {
  height: auto;
  font-family: 'NeueDIN','Helvetica Neue',Helvetica,Arial,sans-serif !important;
  color: rgb(14, 21, 20) !important;
  background-color: white !important;
  border-color: #c2c4c4 !important;
  border-style: solid;
  border-radius: 1px !important;
  padding: 1rem 1.25rem !important;
  font-size: 14px !important;
  width: 100%;
}

.hs-form-html select {
  -webkit-appearance: none;
  background-image:
    -webkit-gradient(linear, left top, right bottom, color-stop(50%, rgba(16, 16, 16, 0.5)), color-stop(50%, transparent)),
    -webkit-gradient(linear, right top, left bottom, color-stop(50%, rgba(16, 16, 16, 0.5)), color-stop(50%, transparent));
  background-image: linear-gradient(to right bottom, rgba(16, 16, 16, 0.5) 50%, transparent 50%), linear-gradient(to left bottom, rgba(16, 16, 16, 0.5) 50%, transparent 50%);
  background-size:
    0.3rem 0.3rem,
    0.3rem 0.3rem;
  background-repeat: no-repeat;
  background-position:
    top 50% right 1rem,
    top 50% right calc(1.3rem - 1px);
}

.hs-form-html fieldset {
  max-width: none;
}

.hs-custom-style > div input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.hs-custom-style fieldset input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.hs-form-html input[type="color"],
.hs-form-html input[type="password"],
.hs-form-html select,
.hs-form-html input[type="date"],
.hs-form-html input[type="datetime-local"],
.hs-form-html input[type="email"],
.hs-form-html input[type="file"],
.hs-form-html input[type="image"],
.hs-form-html input[type="month"],
.hs-form-html input[type="number"],
.hs-form-html input[type="search"],
.hs-form-html input[type="tel"],
.hs-form-html input[type="text"],
.hs-form-html input[type="time"],
.hs-form-html input[type="url"],
.hs-form-html input[type="week"],
.hs-form-html textarea {
  font-family: 'NeueDIN','Helvetica Neue',Helvetica,Arial,sans-serif;
  height: auto;
  line-height: 1.5rem;
  font-size: 1rem;
  border-radius: 0;
  padding: 1rem 1.25rem;
  width: 100%;
  caret-color: rgba(16, 16, 16, 0.5);
  /* -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  /*-moz-box-sizing: content-box; /* Firefox, other Gecko */
  /*box-sizing: content-box; /* Opera/IE 8+ */
}

.hs-form-html input[type="submit"] {
  background: #d1d6ce;
  border: 0;
  border-radius: 999px !important;
  box-shadow: 0 0 0 0 #1a1b1a inset;
  color: #101010;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 3vw;
  height: auto;
  line-height: 1;
  padding: 1.125rem 1.5rem;
  transition:
    box-shadow 0.2s,
    color 0.2s 0.1s,
    -webkit-box-shadow 0.2s;
  width: auto;
}

/* ===== hs-custom-form ===== */

.hs-custom-form legend,
.hs-custom-form p {
  font-family: 'NeueDIN','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.hs-custom-form h1 {
  font-family: 'NeueDIN','Helvetica Neue',Helvetica,Arial,sans-serif;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.4px;
  padding: 0;
  font-size: 24px;
  font-weight: 600;
  padding-top: 60px;
  padding-bottom: 20px;
}

.hs-custom-form h2 {
  margin-top: 25px;
}

.hs-custom-form label,
.hs-custom-form h1 > span {
  font-family: 'NeueDIN','Helvetica Neue',Helvetica,Arial,sans-serif !important;
}

.hs-custom-form label > span > p {
  font-size: 1.1rem;
}

.hs-custom-form label > span {
  line-height: normal;
  font-size: 1.1rem;
}

.hs-custom-form select {
  -webkit-appearance: none;
  background-image:
    -webkit-gradient(linear, left top, right bottom, color-stop(50%, rgba(16, 16, 16, 0.5)), color-stop(50%, transparent)),
    -webkit-gradient(linear, right top, left bottom, color-stop(50%, rgba(16, 16, 16, 0.5)), color-stop(50%, transparent));
  background-image: linear-gradient(to right bottom, rgba(16, 16, 16, 0.5) 50%, transparent 50%), linear-gradient(to left bottom, rgba(16, 16, 16, 0.5) 50%, transparent 50%);
  background-size:
    0.3rem 0.3rem,
    0.3rem 0.3rem;
  background-repeat: no-repeat;
  background-position:
    top 50% right 1rem,
    top 50% right calc(1.3rem - 1px);
}

.hs-custom-form fieldset {
  max-width: none;
}

.hs-custom-style > div input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.hs-custom-style fieldset input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.hs-custom-form input[type="color"],
.hs-custom-form input[type="password"],
.hs-custom-form select,
.hs-custom-form input[type="date"],
.hs-custom-form input[type="datetime-local"],
.hs-custom-form input[type="email"],
.hs-custom-form input[type="file"],
.hs-custom-form input[type="image"],
.hs-custom-form input[type="month"],
.hs-custom-form input[type="number"],
.hs-custom-form input[type="search"],
.hs-custom-form input[type="tel"],
.hs-custom-form input[type="text"],
.hs-custom-form input[type="time"],
.hs-custom-form input[type="url"],
.hs-custom-form input[type="week"],
.hs-custom-form textarea {
  font-family: 'NeueDIN','Helvetica Neue',Helvetica,Arial,sans-serif;
  height: 100%;
  line-height: 1.5rem;
  font-size: 1rem;
  border-radius: 0;
  padding: 1rem 1.25rem;
  font-weight: 500;
  width: 100%;
  caret-color: rgba(16, 16, 16, 0.5);
  /* -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  /*-moz-box-sizing: content-box; /* Firefox, other Gecko */
  /*box-sizing: content-box; /* Opera/IE 8+ */
}

.hs-custom-form input[type="submit"] {
  background: #d1d6ce;
  border: 0;
  border-radius: 999px !important;
  box-shadow: 0 0 0 0 #1a1b1a inset;
  color: #101010;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 3vw;
  height: auto;
  line-height: 1;
  padding: 1.125rem 1.5rem;
  transition:
    box-shadow 0.2s,
    color 0.2s 0.1s,
    -webkit-box-shadow 0.2s;
  width: auto;
}

/* ===== hs-form-private ===== */

.hs-form-private legend,
.hs-form-private p {
  font-family: 'NeueDIN','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.hs-form-private h1 {
  font-family: 'NeueDIN','Helvetica Neue',Helvetica,Arial,sans-serif;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.4px;
  padding: 0;
  font-size: 24px;
  font-weight: 600;
  padding-top: 60px;
  padding-bottom: 20px;
}

.hs-form-private h2 {
  margin-top: 25px;
}

.hs-form-private label,
.hs-form-private h1 > span {
  font-family: "KalkhoffTTNormsPro", Arial, sans-serif !important;
}

.hs-form-private label > span > p {
  font-size: 1.1rem;
}

.hs-form-private label > span {
  line-height: normal;
  font-size: 1.1rem;
}

.hs-form-private select {
  -webkit-appearance: none;
  background-image:
    -webkit-gradient(linear, left top, right bottom, color-stop(50%, rgba(16, 16, 16, 0.5)), color-stop(50%, transparent)),
    -webkit-gradient(linear, right top, left bottom, color-stop(50%, rgba(16, 16, 16, 0.5)), color-stop(50%, transparent));
  background-image: linear-gradient(to right bottom, rgba(16, 16, 16, 0.5) 50%, transparent 50%), linear-gradient(to left bottom, rgba(16, 16, 16, 0.5) 50%, transparent 50%);
  background-size:
    0.3rem 0.3rem,
    0.3rem 0.3rem;
  background-repeat: no-repeat;
  background-position:
    top 50% right 1rem,
    top 50% right calc(1.3rem - 1px);
}

.hs-form-private fieldset {
  max-width: none;
}

.hs-custom-style > div input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.hs-custom-style fieldset input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.hs-form-private input[type="color"],
.hs-form-private input[type="password"],
.hs-form-private select,
.hs-form-private input[type="date"],
.hs-form-private input[type="datetime-local"],
.hs-form-private input[type="email"],
.hs-form-private input[type="file"],
.hs-form-private input[type="image"],
.hs-form-private input[type="month"],
.hs-form-private input[type="number"],
.hs-form-private input[type="search"],
.hs-form-private input[type="tel"],
.hs-form-private input[type="text"],
.hs-form-private input[type="time"],
.hs-form-private input[type="url"],
.hs-form-private input[type="week"],
.hs-form-private textarea {
  font-family: 'NeueDIN','Helvetica Neue',Helvetica,Arial,sans-serif;
  height: 100%;
  line-height: 1.5rem;
  font-size: 1rem;
  border-radius: 0;
  padding: 1rem 1.25rem;
  font-weight: 500;
  width: 100%;
  caret-color: rgba(16, 16, 16, 0.5);
  /* -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  /*-moz-box-sizing: content-box; /* Firefox, other Gecko */
  /*box-sizing: content-box; /* Opera/IE 8+ */
}

.hs-form-private input[type="submit"] {
  background: #d1d6ce;
  border: 0;
  border-radius: 999px !important;
  box-shadow: 0 0 0 0 #1a1b1a inset;
  color: #101010;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 3vw;
  height: auto;
  line-height: 1;
  padding: 1.125rem 1.5rem;
  transition:
    box-shadow 0.2s,
    color 0.2s 0.1s,
    -webkit-box-shadow 0.2s;
  width: auto;
}

/* ===== Form fields ===== */

.hs-form-field {
  margin-top: 10px;
}

.hs-form-field > label {
  color: inherit;
  flex-shrink: 0;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.25px;
  line-height: 1.5rem;
  margin: 0;
  margin-bottom: 10px;
  text-align: left;
}

.hs-form-field > legend {
  grid-area: legend;
  padding-bottom: 0.7rem;
  padding-top: 0.4rem;
}

.hs-error-msgs,
.error-message {
  grid-area: error;
  color: red;
  font-size: 1rem !important;
  padding-left: 0;
}

.custom-error {
  list-style-type: none;
  padding-left: 0;
}

.hs-error-msgs > li > label {
  font-size: 1rem !important;
  line-height: 1em;
}

.input {
  width: 100%;
  max-width: 70vw;
}

/* ===== Date picker ===== */
[data-hsfc-id=Renderer] .hsfc-DateInput.hsfc-DateInput--placeholder {
  color: rgba(90,90,90,0.64) !important;
}

.pika-lendar {
  font-family: 'NeueDIN','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.pika-table > tbody > tr > td > button.pika-button:hover {
  background: #d1d6ce !important;
  color: black !important;
}

.fn-date-picker .is-selected .pika-button {
  background-color: #d1d6ce !important;
  color: black !important;
}

.fn-date-picker .is-today .pika-button {
  color: black !important;
  font-weight: bold !important;
}

/* ===== Radio & Checkbox ===== */

input[type="radio"] + span,
input[type="checkbox"] + span {
  font-weight: normal !important;
  text-transform: none !important;
}

.hs-form-radio input[type="radio"],
.hs-form-booleancheckbox input[type="checkbox"] {
  webkit-appearance: auto;
  appearance: auto;
  transform: scale(1.2);
}

.hs-form-booleancheckbox input[type="checkbox"] {
  margin-top: 5px;
}

.hs-form-radio input[type="radio"] {
  margin-right: 10px;
}

.hs-form-booleancheckbox {
  padding-bottom: 0.7rem;
}

/* ===== Legal consent ===== */

.legal-consent-container {
  padding-top: 1rem;
}

.legal-consent-container > div > p {
  margin-top: 1rem;
  font-size: 1rem;
}

/* ===== Rich text image ===== */

.hs-richtext.hs-main-font-element img {
  grid-area: image;
  max-width: 100%;
  height: auto;
}

/* ===== Phone number ===== */

.hs_phone.hs-phone.hs-fieldtype-phonenumber.field.hs-form-field .hs-input.hs-fieldtype-intl-phone {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 5px;
}

/* Select (prefix) */
.hs_phone.hs-phone.hs-fieldtype-phonenumber.field.hs-form-field select {
  width: 100% !important;
}

/* Input (number) */
.hs_phone.hs-phone.hs-fieldtype-phonenumber.field.hs-form-field input {
  width: 100% !important;
}

/* ===== Dropdown component ===== */

.c-dropdown {
  font-family: 'NeueDIN','Helvetica Neue',Helvetica,Arial,sans-serif;
  grid-column: 1 / -1;
  line-height: 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  display: none;
  flex-direction: column;
  background-color: white;
  max-height: 0;
  overflow-y: auto;
  transition: max-height 300ms ease;
  border: solid #000 1px;

  &.open {
    display: flex;
    max-height: 140px;
  }
}

.c-dropdown__button {
  margin: 0;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  text-align: start;
  cursor: pointer;
  transition: background-color 150ms ease;

  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }

  &.disabled {
    cursor: default;

    &:hover {
      background-color: transparent;
    }
  }
}

.hsfc-ErrorAlert {
  font-size: 14px !important;
  font-weight: 500;
}

.c-dropdown__loading,
.c-dropdown__no-results {
  padding: 1rem 1.25rem;
  color: #516383;
  font-size: 0.9em;
}

.c-search-again {
  margin-bottom: 8px;
  background: none;
  border: none;
  color: #516383;
  font-size: 0.875em;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  display: block;
  grid-column: 1 / -1;
  justify-self: self-start;

  &:hover {
    color: #21293a;
  }
}

/* ===== Misc ===== */

.product-image {
  max-width: 300px;
}

/* Mobile - no margin */
img[alt="KH_Typenschild_neu"] {
  margin-left: 0;
}

.hsfc-TextField label,
.hs-error-msg {
  grid-column: 1 / -1 !important;
}

.hs-form .hs-dateinput:before,
.hs-form .hs-fieldtype-select .input:after {
  display: none !important;
}

/* ===== Media queries ===== */

@media (max-device-width: 480px) and (min-device-width: 320px), (max-width: 400px) {
  .hs-form-html .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input {
    grid-template-columns: auto !important;
  }

  .hs-form-html .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input > select.hs-input {
    width: 100% !important;
  }

  .hs-form-html .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input > input.hs-input {
    width: 100% !important;
  }

  .hs-custom-form .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input {
    grid-template-columns: auto !important;
  }

  .hs-custom-form .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input > select.hs-input {
    width: 100% !important;
  }

  .hs-custom-form .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input > input.hs-input {
    width: 100% !important;
  }

  .hs-form-private .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input {
    grid-template-columns: auto !important;
  }

  .hs-form-private .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input > select.hs-input {
    width: 100% !important;
  }

  .hs-form-private .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input > input.hs-input {
    width: 100% !important;
  }
}

@media screen and (max-width: 768px) {
  div .hs-form-field {
    grid-template-areas: "label" "input" "legend" "error";
    grid-template-columns: 1fr;
  }

  .hs-form-field > label {
    min-width: max-content;
  }

  .hs-richtext.hs-main-font-element:has(img) {
    grid-template-columns: 0vw auto;
  }
}

/* Tablet: between 769px and 1199px */
@media screen and (min-width: 769px) and (max-width: 1199px) {
  img[alt="KH_Typenschild_neu"] {
    margin-left: calc(18vw + 9px);
  }
}

/* Desktop: more than 1200px */
@media screen and (min-width: 1200px) {
  img[alt="KH_Typenschild_neu"] {
    margin-left: calc(18vw + 11px);
  }
}