/**
 * Reset
 */
@import "style-configuration.css";
html {
  font-family: var(--pageFont);
}
*, *::before, *::after {
  border: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*:focus {
  outline: 0;
}
* {
  transition: margin var(--transitionTime) ease, padding var(--transitionTime) ease;
}
body {
  background: var(--pageBackground);
  text-rendering: optimizeSpeed;
}
ol, ul {
  list-style: none;
}
input, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -moz-outline: none;
  outline: none;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  border: none;
  -webkit-text-fill-color: unset;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}
/* Change autocomplete styles in WebKit */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  border: none;
  -webkit-text-fill-color: var(--primaryBlockTextColor);
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}
/**
 * Header
 */
.checkout {
  background: var(--pageBackground);
}
@media (min-width: 40rem) {
  .checkout .header .header-wrapper .header-button {
    visibility: hidden;
  }
}
/**
 * Checkout - main
 */
.checkout .main {
  background: #FFFFFF;
}
.checkout .main .main-wrapper {
  padding: 0;
  margin: 0 auto 2.5rem;
  max-width: var(--pageMaxWidth);
}
@media (min-width: 30rem) {
  .checkout .main .main-wrapper {
    padding: 0 1.25rem;
  }
}
/**
 * Checkout - block
 */
.checkout .block {
  border-radius: var(--primaryBlockBorderRadius);
  background: var(--pageFooterBackground);
  box-shadow: var(--primaryBlockShadow);
  margin: 0;
  padding-block: 1.875rem 1.25rem;
  padding-inline: 0.875rem 1rem;
  font: var(--primaryBlockTextFont);
  color: var(--primaryBlockTextColor);
}
.checkout .block .block-main-title {
  margin-bottom: 1.5625rem;
  display: flex;
}
.checkout .block .block-main-title span {
  color: var(--primaryBlockTitleColor);
  font: var(--primaryBlockTitleFont);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.checkout .block .block-sub-title {
  display: flex;
}
.checkout .block .block-sub-title span {
  color: var(--primaryBlockSubTitleColor);
  font: var(--primaryBlockSubTitleFont);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.checkout .block .block-sub-title span strong {
  color: var(--primaryColor);
}
.checkout .block .block-sub-title span i {
  font: var(--primaryBlockSubTitleSmallFont);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.checkout .block .block-sub-title.hidden {
  display: none;
}
.checkout .block .hint.error-message {
  color: var(--formFieldErrorColor);
}
@media (min-width: 40rem) {
  .checkout .block {
    padding-inline: 2.5rem;
    padding-block: 2.5rem 1.875rem;
  }
}
/**
 * Checkout - block headline
 */
.checkout .block.block-headline {
  grid-area: block-headline;
  margin-block: clamp(0.75rem, 2.4vw, 1.875rem);
  margin-inline: 0.9375rem;
  padding-block: clamp(1.25rem, 4vw, 3rem) clamp(0.9375rem, 2.6vw, 1.9375rem);
  padding-inline: clamp(0.625rem, 4.1vw, 3.125rem);
  text-transform: uppercase;
  padding-bottom: 0;
}
.checkout .block.block-headline .headline-title {
  color: initial;
  padding: 0;
  font-size: clamp(1.5625rem, 2.5vw, 2.1875rem);
}
.checkout .block.block-headline .headline-claim {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
}
@media (min-width: 30rem) {
  .checkout .block.block-headline {
    margin-inline: 0;
    padding-bottom: 0;
  }
}
/**
 * Checkout - form
 */
.checkout .block .form {
  margin: 0;
  display: grid;
  row-gap: 1.5625rem;
  position: relative;
}
.checkout .block .form.border::after {
  content: "";
  right: 0;
  left: 0;
  top: -14px;
  position: absolute;
  border-top: 1px solid #DBDBDB;
}
@media (min-width: 30rem) {
  .checkout .block .form.col2 {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.75rem;
  }
  .checkout .block .form.col2 .form-grid.align-col2 {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .checkout .block .form.col2.fr1-2 {
    grid-template-columns: 1fr 2fr;
  }
  .checkout .block .form.col2.fr1-3 {
    grid-template-columns: 1fr 3fr;
  }
  .checkout .block .form.col2.fr2-1 {
    grid-template-columns: 2fr 1fr;
  }
  .checkout .block .form.col2.fr3-1 {
    grid-template-columns: 3fr 1fr;
  }
}
.checkout .block .form .form-grid {
  display: grid;
  row-gap: 1.5625rem;
  align-content: space-between;
}
.checkout .block .form .form-grid.col2 {
  grid-template-columns: 1fr 1fr;
}
.checkout .block .form .form-grid.align-end {
  align-content: end;
}
.checkout .block .form .form-grid.align-center {
  align-content: center;
}
.checkout .block .form .form-grid.align-baseline {
  align-content: baseline;
}
.checkout .block .form .form-grid.justify-right {
  justify-content: right;
  text-align: right;
  row-gap: 0.9375rem;
}
.checkout .block .form .form-grid.border-top {
  box-shadow: 0px -27px 0px -9px rgba(0, 0, 0, 0.25);
}
.checkout .block .form .form-grid .uppercase {
  text-transform: uppercase;
}
.checkout .block .form:nth-child(n+2 of .form) {
  margin-top: 2.5rem;
}
/**
 * Checkout - text-field, select-field
 */
.checkout .form .form-grid .text-field, .checkout .form .form-grid .select-field {
  font: var(--formFieldFont);
  width: 100%;
  display: grid;
  position: relative;
  align-items: center;
  color: var(--primaryBlockTextColor);
}
.checkout .form .form-grid .text-field .unit, .checkout .form .form-grid .select-field .unit {
  background: var(--formFieldUnitBackground);
  color: #000;
  padding: var(--formFieldPaddingInline);
  text-wrap: nowrap;
  position: absolute;
  right: 0;
  top: 0;
  height: var(--formFieldHeight);
}
.checkout .form .form-grid .text-field input {
  height: var(--formFieldHeight);
  width: 100%;
  font: inherit;
  padding-inline: var(--formFieldPaddingInline);
  color: var(--primaryBlockTextColor);
  border: var(--formFieldBorder);
  border-radius: var(--formFieldBorderRadius);
}
.checkout .form .form-grid .text-field input::placeholder {
  color: transparent;
}
.checkout .form .form-grid .select-field select {
  background: #fff url(/images/icon-selector.svg) no-repeat right 0.625rem center;
  background-size: 0.75rem 0.5rem;
  padding-inline: 0.625rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  font: inherit;
  color: var(--primaryBlockTextColor);
  height: var(--formFieldHeight);
  border: var(--formFieldBorder);
  border-radius: var(--formFieldBorderRadius);
}
.checkout .form .form-grid .select-field.hidden {
  display: none;
}
/**
 * Checkout - text-field, select-field label
 */
.checkout .form .form-grid .text-field label {
  font: var(--formFieldPlaceholderFont);
  color: var(--formFieldLabelColor);
  position: absolute;
  top: 0.5rem;
  left: var(--formFieldPaddingInline);
  pointer-events: none;
  transition: transform 250ms;
}
.checkout .form .form-grid .text-field label:has(+ input:focus), .checkout .form .form-grid .text-field label:has(+ input:not(:placeholder-shown)) {
  left: 0px;
  transform: translateY(-1.75rem);
  font: var(--formFieldLabelFont);
  top: 0.625rem;
}
.checkout .form .form-grid .text-field label:has(+ input:required):after {
  content: "*";
  position: relative;
  left: 1px;
  color: var(--primaryColor);
  font-size: 16px;
}
.checkout .form .form-grid .select-field label {
  position: absolute;
  left: 0px;
  top: -1rem;
  font: var(--formFieldLabelFont);
}
.checkout .form .form-grid .select-field.error .hint.error-message {
  position: absolute;
  top: 2.3125rem;
  left: 1px;
}
/**
 * Checkout - text-field error
 */
.checkout .form .form-grid .text-field.error input {
  border-bottom-color: var(--formFieldErrorColor);
}
.checkout .form .form-grid .text-field.error label {
  color: var(--formFieldErrorColor);
}
.checkout .form .form-grid .text-field.error label:has(+ input:required):after {
  color: var(--formFieldErrorColor);
}
.checkout .form .form-grid .text-field.error .hint.error-message {
  font: var(--formFieldLabelFont);
  color: var(--formFieldErrorColor);
  position: absolute;
  top: 2.3125rem;
  left: 1px;
}
/**
 * Checkout - radio
 */
.checkout .form .form-grid .radio-field {
  display: grid;
  row-gap: 0.9375rem;
}
.checkout .form .form-grid .radio-field input[type="radio"] {
  margin-right: 0.4375rem;
  accent-color: var(--primaryBlockTextColor);
  appearance: auto;
}
/**
 * Checkout - checkbox
 */
.checkout .form .form-grid .checkbox {
  display: grid;
  grid-template-columns: 0.875rem 1fr;
  column-gap: 0.625rem;
}
.checkout .form .form-grid .checkbox input {
  appearance: none;
  width: 0.875rem;
  height: 0.875rem;
  color: currentColor;
  border: 1px solid currentColor;
  border-radius: 1px;
  transform: translateY(0.125rem);
  display: grid;
  place-content: center;
}
.checkout .form .form-grid .checkbox input::before {
  content: "";
  width: 0.5625rem;
  height: 0.5625rem;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 0.5625rem 0.5625rem currentColor;
}
.checkout .form .form-grid .checkbox input:checked::before {
  transform: scale(1);
}
.checkout .form .form-grid .checkbox.accordion label {
  font: var(--primaryBlockSubTitleFont);
  color: var(--primaryBlockSubTitleColor);
  text-transform: uppercase;
}
.checkout .form .form-grid .checkbox.error {
  color: var(--formFieldErrorColor);
}
/**
 * Checkout - button
 */
.checkout .button {
  background: var(--primaryButtonBackgroundColor);
  color: var(--primaryButtonTextColor);
  box-shadow: var(--primaryButtonBoxShadow);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  height: 2.5rem;
  border-radius: 0.3125rem;
  padding-inline: 1.25rem;
}
.checkout .button:hover {
  background: var(--primaryButtonBackgroundColorHover);
  color: var(--primaryButtonTextColorHover);
  box-shadow: var(--primaryButtonBoxShadowHover);
}
/**
 * Checkout - next button
 */
.checkout .button.next {
  position: relative;
}
.checkout .button.next::after {
  content: "";
  mask: url(/images/icon-expand.svg);
  -webkit-mask: url(/images/icon-expand.svg);
  width: 1.5rem;
  height: 1.5rem;
  right: var(--formFieldPaddingInline);
  top: var(--formFieldPaddingInline);
  background-color: white;
  position: absolute;
}
.checkout .button.next:disabled {
  opacity: 0.5;
}
.checkout .block-wrapper:has(.form-submit) {
  margin-top: -1.375rem;
}
/**
 * Checkout - form submit
 */
.checkout .form-submit {
  box-shadow: 0px -17px 0px -16px #DBDBDB;
  border-top-left-radius: unset;
  border-top-right-radius: unset;
}
@media (min-width: 40rem) {
  .checkout .form-submit {
    box-shadow: 0px -41px 0px -40px #DBDBDB;
  }
}
.checkout .form .form-grid.buttons {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.checkout .form .form-grid.buttons .button-back {
  background: #FFF;
  color: #575654;
}
.checkout .form .form-grid.buttons .button-back:disabled {
  opacity: 0.5;
  cursor: auto;
}
.checkout .form .form-grid.buttons .button-back:hover {
  box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}
.checkout .form .form-grid.buttons .button-submit, .checkout .form .form-grid.buttons .button-next {
  padding-inline: 1.875rem;
}
.checkout .form .form-grid.buttons .button-submit:only-child, .checkout .form .form-grid.buttons .button-next:only-child {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.checkout .form .form-grid.buttons .button-submit.icon-arrow, .checkout .form .form-grid.buttons .button-next.icon-arrow {
  padding-inline: 1.875rem calc(30px + 28px + 10px);
  background: var(--primaryButtonBackgroundColor) url("/images/icon-arrow-white.svg") no-repeat right 1.875rem center;
  background-size: 1.75rem;
}
.checkout .form .form-grid.buttons .button-submit.icon-arrow:hover, .checkout .form .form-grid.buttons .button-next.icon-arrow:hover {
  background: var(--primaryButtonBackgroundColorHover) url("/images/icon-arrow-white.svg") no-repeat right 1.875rem center;
  box-shadow: var(--primaryButtonBoxShadowHover);
}
.checkout .form .form-grid.buttons .button-submit.icon-secure::before, .checkout .form .form-grid.buttons .button-next.icon-secure::before {
  content: "";
  background: var(--primaryButtonBackgroundColor) url("/images/icon-lock-white.svg") no-repeat center center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
}
.checkout .form .form-grid.buttons .button-submit:disabled, .checkout .form .form-grid.buttons .button-next:disabled {
  opacity: 0.5;
  cursor: auto;
}
@media (min-width: 30rem) {
  .checkout .form .form-grid.buttons .button-print {
    order: unset;
    margin-left: auto;
  }
}
/**
 * Checkout - modal
 */
.modal {
  width: min(100%, 50rem);
  margin: auto;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
  border: 2px solid #D9D9D9;
  border-radius: 0.625rem;
  position: fixed;
}
.modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.modal button.close-x {
  width: 1.375rem;
  height: 1.375rem;
  position: absolute;
  top: 1.8125rem;
  right: 1.8125rem;
  background: url("/images/icon-cross-round.svg") no-repeat center center;
  cursor: pointer;
}
.modal .modal-tooltip {
  padding: 2.5rem;
}
.modal hr {
  margin-inline: -2.5rem;
  border-bottom: 1px solid #D9D9D9;
  margin-block: 0.625rem;
  transform: translateY(-0.625rem);
}
/**
 * Checkout - modal form
 */
.checkout .modal .block {
  background: #fff;
}
.checkout .modal .block .form .form-grid input[type="text"] {
  background: #F2F2F2;
}
.checkout .modal .block .form .form-grid .button {
  width: fit-content;
  padding-inline: 1rem;
}
@media (min-width: 30rem) {
  .checkout .modal .block .form.col2 {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 48rem) {
  .checkout .modal .block .form.col2 {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.75rem;
  }
}
/**
 * Tooltip
 */
.tooltip {
  --tooltip-icon-width: 1.125rem;
  width: calc(var(--tooltip-icon-width) + 1.25rem);
  background: inherit;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip .tooltip-icon {
  border-radius: 50%;
  width: var(--tooltip-icon-width);
  height: var(--tooltip-icon-width);
  cursor: pointer;
  position: relative;
}
.tooltip .tooltip-icon.info-icon {
  background: url("/images/icon-tooltip.svg") no-repeat 0 0;
  background-color: var(--primaryColor);
}
.tooltip .tooltip-icon:hover .tooltip-info {
  display: block;
}
.tooltip .tooltip-icon .tooltip-info {
  z-index: 1;
  display: none;
  position: absolute;
  padding-inline: 1.3125rem;
  padding-block: 1.875rem 0.9375rem;
  width: var(--tooltipWidth);
  top: calc(var(--tooltip-icon-width) + 8px);
  left: calc(var(--tooltipWidth)/-2 + var(--tooltip-icon-width)/2);
  background: #fff;
  border: var(--tooltipBorder);
  border-radius: 0.625rem;
  text-transform: none;
}
.tooltip .tooltip-icon .tooltip-info .tooltip-title {
  font: var(--tooltipTitleColor);
  color: var(--primaryBlockTitleColor);
  text-transform: uppercase;
}
.tooltip .tooltip-icon .tooltip-info hr {
  margin-inline: -1.3125rem;
  border-bottom: 1px solid #D9D9D9;
  margin-block: 0.625rem;
}
.tooltip .tooltip-icon .tooltip-info .tooltip-text {
  font: var(--tooltipTextFont);
  color: var(--primaryTextColor);
}
.tooltip .tooltip-icon .tooltip-info .tooltip-text.line-clamp {
  display: -webkit-box;
  line-clamp: var(--tooltipLineClamp);
  -webkit-line-clamp: var(--tooltipLineClamp);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tooltip .tooltip-icon .tooltip-info .tooltip-button {
  float: right;
  padding-block: 0.3125rem;
  height: unset;
  margin-top: 0.625rem;
  padding-inline: 1.875rem;
}
.tooltip .tooltip-icon .tooltip-info:before, .tooltip .tooltip-icon .tooltip-info:after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 0 0.625rem 0.625rem 0.625rem;
  border-color: #D9D9D9 transparent;
  top: -10px;
  right: calc(50% - 0.625rem);
}
.tooltip .tooltip-icon .tooltip-info:after {
  top: -8px;
  border-bottom-color: #fff;
}
/**
 * Checkout - Tooltip in input, select, checkbox, label
 */
.checkout .form .form-grid .text-field .tooltip {
  background: #FFF;
  position: absolute;
  top: calc(var(--formFieldHeight)/2 - var(--tooltip-icon-width)/2);
  right: calc(var(--formFieldPaddingInline)*2 + var(--formFieldHeight)/2);
}
.checkout .form .form-grid .select-field .tooltip {
  background: #FFF;
  position: absolute;
  right: 1.375rem;
}
.checkout .form .form-grid .checkbox:has(.tooltip) {
  display: flex;
}
.checkout .form .form-grid .checkbox:has(.tooltip) .tooltip {
  justify-content: left;
}
/**
 * Progress bar
 */
.steps-progress-bar {
  --bullet-size: 1.5625rem;
  --progress-bar-line-height: 3px;
  --progress-bar-padding-block: 2.5rem;
  --progress-bar-padding-inline: 1.25rem;
  display: flex;
  counter-reset: step;
  padding-inline: var(--progress-bar-padding-inline);
  min-height: calc(var(--bullet-size) + var(--progress-bar-padding-block));
}
.steps-progress-bar .step {
  position: relative;
  width: 25%;
  display: flex;
  align-items: center;
  gap: calc(var(--progress-bar-line-height)*2);
}
.steps-progress-bar .step.max-4 {
  width: 32%;
}
.steps-progress-bar .step span {
  display: none;
  text-transform: uppercase;
}
.steps-progress-bar .step::before {
  content: counter(step);
  counter-increment: step;
  z-index: 1;
  width: var(--bullet-size);
  height: var(--bullet-size);
  border-radius: 50%;
  background: var(--formFieldUnitBackground);
  text-align: center;
  align-content: center;
  font-weight: 600;
  color: var(--primaryTextColor);
}
.steps-progress-bar .step::after {
  content: "";
  width: calc(100% - var(--bullet-size) - var(--progress-bar-line-height)*4);
  height: var(--progress-bar-line-height);
  background: var(--formFieldUnitBackground);
}
.steps-progress-bar .step:last-child {
  width: var(--bullet-size);
}
.steps-progress-bar .step:last-child::after {
  display: none;
  margin-bottom: 0;
}
.steps-progress-bar .step.active > span {
  color: var(--primaryBlockTitleColor);
  font-weight: 700;
}
.steps-progress-bar .step.active::before {
  background: var(--primaryColor);
  color: #FFF;
}
.steps-progress-bar .step.active::after {
  background: var(--primaryColor);
}
.steps-progress-bar .step.active:not(:nth-last-child(1 of .active))::before {
  content: "";
  background: url(/images/icon-check-white-round.svg) no-repeat;
  background-position: center;
  background-size: 70%;
  background-color: var(--primaryColor);
}
@media (min-width: 48rem) {
  .steps-progress-bar {
    --bullet-size: 2.8125rem;
    flex-direction: column;
    height: 100%;
    padding-block: var(--progress-bar-padding-block);
    padding-inline: clamp(var(--progress-bar-padding-inline), 3.3vw, var(--progress-bar-padding-block));
  }
  .steps-progress-bar .step {
    flex-direction: column;
    height: 25%;
    width: var(--bullet-size);
  }
  .steps-progress-bar .step.max-4 {
    height: 30%;
    width: var(--bullet-size);
  }
  .steps-progress-bar .step span {
    display: initial;
    position: absolute;
    left: min(7vw, calc(var(--bullet-size) + var(--progress-bar-padding-inline)));
    top: calc(var(--bullet-size)/4);
    color: var(--primaryTextColor);
  }
  .steps-progress-bar .step::after {
    width: var(--progress-bar-line-height);
    height: calc(100% - var(--bullet-size) - var(--progress-bar-line-height)*4);
  }
  .steps-progress-bar .step:last-child {
    width: var(--bullet-size);
    height: var(--bullet-size);
  }
}
/**
 * Checkout cart empty
 */
.checkout .checkout-cart-empty {
  padding-top: 2.5rem;
}
/**
 * Checkout usage - container
 */
.checkout .checkout-usage {
  display: grid;
  column-gap: min(2.5vw, 2.5rem);
  row-gap: 1.25rem;
  grid-template-columns: 1fr;
  grid-template-areas: "block-headline" "process-steps-headline" "process-steps" "usage-calculator" "placeholder" "form-submit" "block-product";
}
@media (min-width: 48rem) {
  .checkout .checkout-usage {
    grid-template-columns: min(33vw, 21.25rem) 1fr;
    grid-template-areas: "block-headline block-headline" "process-steps-headline process-steps-headline" "process-steps usage-calculator" "process-steps placeholder" "process-steps form-submit" "process-steps block-product";
  }
}
/**
 * Checkout usage - progress-steps
 */
.checkout .checkout-usage .process-steps-headline {
  grid-area: process-steps-headline;
  margin-inline: 0.9375rem;
  text-transform: uppercase;
  color: var(--primaryColor);
  font: var(--primaryBlockTitleFont);
}
@media (min-width: 30rem) {
  .checkout .checkout-usage .process-steps-headline {
    margin-inline: 0;
  }
}
/**
 * Checkout usage - progress-steps
 */
.checkout .checkout-usage .process-steps {
  grid-area: process-steps;
  box-shadow: none;
  margin-inline: 0.9375rem;
  background: var(--pageFooterBackground);
}
@media (min-width: 30rem) {
  .checkout .checkout-usage .process-steps {
    margin-inline: 0;
  }
}
@media (min-width: 48rem) {
  .checkout .checkout-usage .process-steps {
    height: 36.5rem;
  }
}
/**
 * Checkout usage - usage-calculator
 */
.checkout .checkout-usage .usage-calculator {
  grid-area: usage-calculator;
}
.checkout .checkout-usage .usage-calculator .usage-calculator-preview {
  padding-top: 2.5rem;
}
.checkout .checkout-usage .usage-calculator .usage-calculator-preview .usage-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.3125rem;
  color: var(--primaryBlockTitleColor);
  font: var(--formFieldFont);
  font-weight: 600;
  margin-top: -0.5rem;
  position: relative;
}
.checkout .checkout-usage .usage-calculator .usage-calculator-preview .usage-indicator .label {
  font-size: 1rem;
  margin-right: 0.625rem;
}
.checkout .checkout-usage .usage-calculator .usage-calculator-preview .usage-indicator .value {
  background-color: #D9D9D9;
  min-width: 2.5625rem;
  min-height: 1.3rem;
  text-align: right;
  align-self: center;
}
.checkout .checkout-usage .usage-calculator .usage-calculator-preview .usage-indicator-slider {
  position: relative;
  min-height: 2.3125rem;
}
.checkout .checkout-usage .usage-calculator .usage-calculator-preview .usage-indicator-slider .pointer {
  background: url("/images/energy-certificate/energy-scale-arrow.svg") no-repeat 0 0;
  width: 2rem;
  height: 2.3125rem;
  background-size: contain;
  position: absolute;
}
.checkout .checkout-usage .usage-calculator .usage-calculator-preview .usage-indicator-slider .pointer.primary {
  transform: rotate(180deg);
  top: calc(-20%);
}
.checkout .checkout-usage .usage-calculator .usage-calculator-preview svg {
  width: 100%;
}
.checkout .checkout-usage .usage-calculator table {
  border: 1px solid #cdcdcd;
  margin: 10px 0;
  width: 100%;
}
.checkout .checkout-usage .usage-calculator table td {
  border: 1px solid #cdcdcd;
  padding: 5px 10px;
}
.checkout .checkout-usage .usage-calculator table tr.text-center td {
  text-align: center;
}
.checkout .checkout-usage .usage-calculator table tr.text-right td {
  text-align: right;
}
/**
 * Checkout usage - building-data
 */
.checkout .checkout-usage .building-data {
  grid-area: usage-calculator;
}
/**
 * Checkout usage - usage-values
 */
.checkout .checkout-usage .usage-values {
  grid-area: placeholder;
}
/**
 * Checkout usage - heating
 */
.checkout .checkout-usage .heating {
  grid-area: placeholder;
}
/**
 * Checkout usage - hot-water
 */
.checkout .checkout-usage .hot-water {
  grid-area: placeholder;
}
/**
 * Checkout usage - vacancy
 */
.checkout .checkout-usage .vacancy-rate {
  grid-area: placeholder;
}
.checkout .checkout-usage .vacancy-rate .form {
  row-gap: 1.875rem;
}
.checkout .checkout-usage .vacancy-rate .form .form-grid .button {
  width: fit-content;
  padding-inline: 1rem;
}
/**
 * Checkout usage - vacancy calculator
 */
.checkout .checkout-usage .vacancy-calculator .text-field:nth-child(n + 3 of .text-field) input {
  background-color: var(--formFieldFillColor);
}
.checkout .checkout-usage .vacancy-calculator .text-field:nth-child(n + 3 of .text-field) .unit {
  background-color: var(--primaryColor);
}
/**
 * Checkout usage - form-submit
 */
.checkout .checkout-usage .block-wrapper:has(.form-submit) {
  grid-area: form-submit;
}
/**
 * Checkout usage - block product
 */
.checkout .checkout-demand .block-product {
  grid-area: block-product;
}
/*
 * Invalid Zip Code Modal Button
 */
.modal-button {
  background: var(--secondaryButtonBackgroundColor);
  border-radius: 3px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  color: var(--secondaryButtonTextColor);
  cursor: pointer;
  font: 600 14px/20px var(--pageFont);
  letter-spacing: 1px;
  padding: 10px 15px;
  text-transform: uppercase;
  transition: color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  margin-top: 0.5em;
}
.modal-button:hover {
  background: var(--secondaryButtonBackgroundColorHover);
  color: var(--secondaryButtonTextColorHover);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
}
/**
 * Checkout demand - container
 */
.checkout .checkout-demand {
  display: grid;
  column-gap: min(2.5vw, 2.5rem);
  row-gap: 1.25rem;
  grid-template-columns: 1fr;
  grid-template-areas: "block-headline" "process-steps-headline" "process-steps" "placeholder" "form-submit" "block-product";
}
@media (min-width: 48rem) {
  .checkout .checkout-demand {
    grid-template-columns: min(33vw, 21.25rem) 1fr;
    grid-template-areas: "block-headline block-headline" "process-steps-headline process-steps-headline" "process-steps placeholder" "process-steps form-submit" "process-steps block-product";
  }
}
/**
 * Checkout demand - progress-steps
 */
.checkout .checkout-demand .process-steps-headline {
  grid-area: process-steps-headline;
  margin-inline: 0.9375rem;
  text-transform: uppercase;
  color: var(--primaryColor);
  font: var(--primaryBlockTitleFont);
}
@media (min-width: 30rem) {
  .checkout .checkout-demand .process-steps-headline {
    margin-inline: 0;
  }
}
/**
 * Checkout demand - progress-steps
 */
.checkout .checkout-demand .process-steps {
  grid-area: process-steps;
  box-shadow: none;
  margin-inline: 0.9375rem;
  background: var(--pageFooterBackground);
}
@media (min-width: 30rem) {
  .checkout .checkout-demand .process-steps {
    margin-inline: 0;
  }
}
@media (min-width: 48rem) {
  .checkout .checkout-demand .process-steps {
    height: 36.5rem;
  }
}
/**
 * Checkout demand - building-data
 */
.checkout .checkout-demand .building-data {
  grid-area: placeholder;
}
.checkout .checkout-demand .building-data .form-grid {
  align-content: center;
}
.checkout .checkout-demand .building-data .form-grid.shape {
  justify-content: center;
  align-content: center;
  padding-bottom: 1.5625rem;
}
@media (min-width: 30rem) {
  .checkout .checkout-demand .building-data .form-grid.shape {
    padding-bottom: 0;
  }
  .checkout .checkout-demand .building-data .form-grid.shape svg {
    max-width: 100%;
  }
}
.checkout .checkout-demand .building-data .form-grid.checkbox-group p:has(.error-message) {
  grid-column: 1 / -1;
  margin-top: -1rem;
}
.checkout .checkout-demand .building-data .radio-field.direction {
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 30rem) {
  .checkout .checkout-demand .building-data .radio-field.direction {
    grid-template-columns: repeat(4, 1fr);
  }
}
.checkout .checkout-demand .building-data .radio-field.shape {
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 30rem) {
  .checkout .checkout-demand .building-data .radio-field.shape {
    grid-template-columns: repeat(4, 1fr);
  }
}
.checkout .checkout-demand .building-data .buildingshape-stroke {
  stroke: var(--primaryColor);
}
/**
 * Checkout demand - building construction
 */
.checkout .checkout-demand .building-construction {
  grid-area: placeholder;
}
/**
 * Checkout demand - building systems
 */
.checkout .checkout-demand .building-systems {
  grid-area: placeholder;
}
.checkout .checkout-demand .building-systems .form .form-grid .button {
  width: fit-content;
  padding-inline: 1rem;
}
/**
 * Checkout demand - building address
 */
.checkout .checkout-demand .building-address {
  grid-area: placeholder;
}
/**
 * Checkout demand - form-submit
 */
.checkout .checkout-demand .block-wrapper:has(.form-submit) {
  grid-area: form-submit;
}
/**
 * Checkout demand - form-submit
 */
.checkout .checkout-demand .block-product {
  grid-area: block-product;
}
/**
 * Checkout demand - container
 */
.checkout .checkout-address-cart {
  display: grid;
  column-gap: min(2.5vw, 2.5rem);
  row-gap: 1.25rem;
  padding-block: 2.5rem;
  grid-template-columns: 1fr;
  grid-template-areas: "block-cart" "block-address";
}
@media (min-width: 48rem) {
  .checkout .checkout-address-cart {
    grid-template-columns: min(33vw, 21.25rem) 1fr;
    grid-template-areas: "block-cart block-address";
  }
}
/**
 * Checkout block cart
 */
.checkout .block .form.upselling .hint.error-message {
  min-width: 200px;
}
.checkout .block-cart {
  grid-area: block-cart;
}
.checkout .block-cart .block {
  display: grid;
  padding-inline: 1rem;
  row-gap: 1.3rem;
}
.checkout .block-cart .block .block-main-title {
  padding-inline: 1rem;
}
.checkout .block-cart .block .form {
  padding-inline: 1rem;
}
.checkout .block-cart .block .form.upselling {
  margin: 0;
}
.checkout .block-cart .block .form.express {
  margin: 0;
  background-color: #FFF;
  padding-block: 1rem;
  border-radius: 0.3125rem;
  row-gap: 1rem;
}
.checkout .block-cart .block .form.express .express-icon {
  background: url(/images/energy-certificate/icon-delivery-express.svg) no-repeat 0 0;
  width: 2.6875rem;
  height: 2.5625rem;
  background-size: contain;
  width: 100%;
  background-position: right;
}
.checkout .block-cart .block .form.express .express-info {
  font-size: 0.875rem;
  padding-left: 5rem;
  position: relative;
}
.checkout .block-cart .block .form.express .express-info p {
  opacity: 0.3;
}
.checkout .block-cart .block .form.express .express-info span {
  color: #339900;
}
.checkout .block-cart .block .form.express .express-info::before {
  content: "";
  background: url(/images/energy-certificate/icon-delivery-express.svg) no-repeat 0 0;
  width: 2.6875rem;
  height: 2.5625rem;
  background-size: contain;
  position: absolute;
  left: 1.5rem;
}
.checkout .block-cart .block span.price {
  opacity: 0.3;
}
.checkout .block-cart .block span.price.price-selected {
  font-weight: 600;
  opacity: 1;
}
.checkout .block-cart .block .form .form-grid .checkbox input {
  color: var(--secondaryColor);
  border: 1px solid var(--secondaryColor);
  cursor: pointer;
}
.checkout .block-cart .block .form .form-grid .checkbox input:checked::before {
  background-color: var(--secondaryColor);
  background-image: url(/images/icon-check-white.svg);
  transform: scale(1.3);
  box-shadow: unset;
}
.checkout .block-cart .block .form .form-grid .radio-field input[type="radio"] {
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--secondaryColor);
}
.checkout .block-cart .block .form .form-grid .radio-field input[type="radio"]:checked {
  background-color: var(--secondaryColor);
  background-image: url(/images/icon-check-white.svg);
}
@media (max-width: 30rem) {
  .checkout .block-cart .block {
    padding-inline: 1rem;
  }
  .checkout .block-cart .block .form.col2 {
    grid-template-columns: 1fr 1fr;
  }
  .checkout .block-cart .block .form.express .express-info {
    display: flex;
    padding-left: 1.3rem;
    column-gap: 5px;
    width: max-content;
  }
  .checkout .block-cart .block .form.express .express-info::before {
    display: none;
  }
}
/**
 * Checkout block address demand
 */
.checkout .checkout-address-usage, .checkout .checkout-address-demand {
  grid-area: block-address;
  display: grid;
  row-gap: 1.25rem;
}
.checkout .checkout-address-usage .form:nth-child(n+2 of .form):has(div[style*="display: none;"]), .checkout .checkout-address-demand .form:nth-child(n+2 of .form):has(div[style*="display: none;"]) {
  margin-top: 0;
  row-gap: 0;
}
.checkout .checkout-address-usage .form:nth-child(n+2 of .form):has(span.hint), .checkout .checkout-address-demand .form:nth-child(n+2 of .form):has(span.hint) {
  row-gap: 0;
}
.checkout .checkout-address-usage .form-grid .form-field, .checkout .checkout-address-demand .form-grid .form-field {
  padding: 0;
}
.checkout .checkout-address-usage .form-grid:has(.radio-field), .checkout .checkout-address-demand .form-grid:has(.radio-field) {
  display: flex;
  gap: 0.9375rem;
}
.checkout .checkout-address-usage .form-grid:has(.radio-field) .radio-field, .checkout .checkout-address-demand .form-grid:has(.radio-field) .radio-field {
  display: flex;
  gap: 0.9375rem;
}
.checkout .block .form:nth-child(n+2 of .form):has(input[name="additionalField"]) {
  margin-top: 1.5rem;
}
/**
 * Checkout demand - container
 */
.checkout .checkout-payment-cart {
  display: grid;
  column-gap: min(2.5vw, 2.5rem);
  row-gap: 1.25rem;
  padding-top: 2.5rem;
  grid-template-columns: 1fr;
  grid-template-areas: "block-cart" "block-payment";
}
@media (min-width: 48rem) {
  .checkout .checkout-payment-cart {
    grid-template-columns: min(33vw, 21.25rem) 1fr;
    grid-template-areas: "block-cart block-payment";
  }
}
/**
 * Checkout block cart
 */
.checkout .block-cart {
  grid-area: block-cart;
}
/**
 * Checkout block address demand
 */
.checkout .checkout-payment-usage, .checkout .checkout-payment-demand {
  grid-area: block-payment;
  display: grid;
  row-gap: 1.25rem;
}
.checkout .checkout-payment-usage .form .form-grid .checkbox input.terms-checkbox, .checkout .checkout-payment-demand .form .form-grid .checkbox input.terms-checkbox {
  margin-right: 1rem;
}
/**
 * Checkout success
 */
.checkout .main-wrapper:has(.confirmation) {
  max-width: calc(var(--headerMaxWidth) - 20px);
}
.checkout .checkout-payment-cart:has(.confirmation) {
  grid-template-areas: "block-payment block-payment";
}
.checkout .checkout-payment-cart:has(.confirmation) .block-cart {
  display: none;
}
.checkout .checkout-payment-cart:has(.confirmation) .block {
  padding-block: 2.5rem;
  padding-inline: clamp(10px, 4vw, 50px);
}
.checkout .checkout-payment-cart:has(.confirmation) .block.block-headline {
  margin-block: 0;
}
.checkout .checkout-payment-cart:has(.confirmation) .block.block-headline .headline-claim {
  padding-bottom: 0;
}
.checkout .checkout-payment-cart:has(.confirmation) .further-steps .form.col2 {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.checkout .checkout-payment-cart:has(.confirmation) .further-steps span.doc-number {
  color: var(--primaryColor);
}
.checkout .checkout-payment-cart:has(.confirmation) .further-steps span.email {
  text-decoration: underline;
}
.checkout .checkout-payment-cart:has(.confirmation) .further-steps .block-main-title {
  margin-bottom: 0;
}
.checkout .checkout-payment-cart:has(.confirmation) .further-steps .form-grid {
  align-content: start;
  row-gap: 18px;
}
.checkout .checkout-payment-cart:has(.confirmation) .further-steps .form-grid:has(.svg-wrapper) {
  background: #FFF;
  padding: 1.25rem;
  border-radius: 0.3125rem;
}
.checkout .checkout-payment-cart:has(.confirmation) .further-steps .form-grid:has(.svg-wrapper) .svg-wrapper {
  height: 95px;
}
.checkout .checkout-payment-cart:has(.confirmation) .google-rating .google-logo {
  display: none;
}
.checkout .checkout-payment-cart:has(.confirmation) .google-rating > .form.col2 {
  grid-template-columns: 1fr;
}
.checkout .checkout-payment-cart:has(.confirmation) .google-rating .form:has(.google-rating-icons) .block-main-title {
  margin: 0;
}
.checkout .checkout-payment-cart:has(.confirmation) .google-rating .form:has(.google-rating-icons) .form-grid {
  padding-top: 1.25rem;
}
.checkout .checkout-payment-cart:has(.confirmation) .google-rating .form:has(.google-rating-icons) .google-rating-wrapper {
  align-content: center;
  display: grid;
  row-gap: 0.625rem;
}
.checkout .checkout-payment-cart:has(.confirmation) .google-rating .button {
  align-content: center;
  text-decoration: none;
  text-align: center;
}
@media (min-width: 48rem) {
  .checkout .checkout-payment-cart:has(.confirmation) .further-steps .form.col2 {
    grid-template-columns: 1fr 1fr;
  }
  .checkout .checkout-payment-cart:has(.confirmation) .google-rating > .form.col2 {
    grid-template-columns: 1fr 3.5fr;
  }
  .checkout .checkout-payment-cart:has(.confirmation) .google-rating .google-logo {
    display: initial;
  }
  .checkout .checkout-payment-cart:has(.confirmation) .google-rating .form-grid {
    display: flex;
    justify-content: space-between;
  }
  .checkout .checkout-payment-cart:has(.confirmation) .google-rating .button {
    max-width: fit-content;
    padding-inline: 3rem;
  }
  .checkout .checkout-payment-cart:has(.confirmation) .google-rating .google-rating-icons {
    padding-top: 1rem;
  }
}
/** GoogleTagManager */
.layer.layer-gtag {
  color: var(--primaryTextColor);
  box-shadow: 0px 4px 25px 0px #00000040;
  font: 400 14px/19px var(--pageFont);
  padding-inline: 40px;
  padding-block: 30px 25px;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  transform: translate(-50%, -5%);
  top: unset;
  bottom: 0%;
  width: min(93%, calc(var(--pageMaxWidth) + 10px));
  margin: 0 50%;
  background: white;
  position: fixed;
}
.layer.layer-gtag .layer-header {
  padding: 0;
}
.layer.layer-gtag .layer-header .title {
  color: var(--primaryTextColor);
  font: 700 20px/30px var(--pageFont);
  margin: 0;
}
.layer.layer-gtag .layer-information {
  display: grid;
  row-gap: 10px;
}
.layer.layer-gtag .layer-information .layer-upsell {
  padding: 0;
}
.layer.layer-gtag .layer-information .gtag-more-information a {
  color: var(--primaryTextColor);
}
.layer.layer-gtag .layer-information .gtag-more-information a:visited {
  color: var(--primaryTextColor);
}
.layer.layer-gtag .layer-content {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  transition: padding 0.2s ease;
}
.layer.layer-gtag .layer-settings {
  display: flex;
  flex-direction: column;
  transition: padding 0.2s ease;
  row-gap: 1rem;
}
.layer.layer-gtag .layer-settings .subtitle {
  font: 700 16px/24px var(--pageFont);
  text-transform: initial;
}
.layer.layer-gtag .layer-settings .form {
  width: 100%;
  margin: 0;
}
.layer.layer-gtag .layer-settings .form .layer-settings-item {
  width: 100%;
  border: 1px solid #E7E7E7;
  align-items: center;
  display: grid;
  padding: 10px 20px;
}
.layer.layer-gtag .layer-settings .form .group {
  justify-content: space-between;
}
.layer.layer-gtag .layer-settings .form .group input[type="checkbox"] {
  -webkit-appearance: none;
  position: relative;
  background-color: #797979;
  width: 60px;
  height: 30px;
  border-radius: 15px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}
.layer.layer-gtag .layer-settings .form .group input[type="checkbox"]::before {
  content: "";
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  background-color: #fff;
  border-radius: 14px;
  transform: scale(0.8);
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.layer.layer-gtag .layer-settings .form .group input[type="checkbox"]:checked::before {
  background-color: #fff;
  left: 30px;
}
.layer.layer-gtag .layer-settings .form .group input[type="checkbox"]:checked {
  background-color: var(--primaryColor);
}
.layer.layer-gtag .layer-settings .form .group input[type="checkbox"]:checked::after {
  display: none;
}
.layer.layer-gtag .layer-settings .form .group span.mandatory {
  color: #044FA8;
}
.layer.layer-gtag .layer-settings .layer-settings-buttons {
  width: 100%;
  text-align: end;
}
.layer.layer-gtag .layer-settings .layer-settings-buttons button {
  background: var(--primaryButtonBackgroundColor);
  border-radius: 3px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  color: var(--primaryButtonTextColor);
  cursor: pointer;
  display: inline-block;
  flex: 0 0 auto;
  font: 600 16px / 18px var(--pageFont);
  padding: 12px;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.layer.layer-gtag .layer-summary {
  background: none;
  justify-content: space-between;
  padding: 0;
}
.layer.layer-gtag .layer-summary .layer-summary-button {
  width: 32%;
  font: 600 13px / 20px var(--pageFont);
  letter-spacing: unset;
  text-transform: unset;
}
.layer.layer-gtag .layer-summary .layer-summary-button.secondary {
  background: #E7E7E7;
  color: var(--primaryTextColor);
}
.layer.layer-gtag.col2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  grid-template-areas: "header header" "information settings" "empty buttons";
}
.layer.layer-gtag.col2 .layer-header {
  grid-area: header;
}
.layer.layer-gtag.col2 .layer-information {
  grid-area: information;
}
.layer.layer-gtag.col2 .layer-settings {
  grid-area: settings;
}
.layer.layer-gtag.col2 .layer-summary {
  grid-area: buttons;
}
.layer.layer-gtag.col2 .layer-summary .layer-summary-button {
  width: 48%;
}
@media (max-width: 1000px) {
  .layer.layer-gtag {
    width: 90%;
  }
  .layer.layer-gtag.col2 {
    width: 90%;
    display: flex;
    flex-flow: column wrap;
  }
}
@media (max-width: 860px) {
  .layer.layer-gtag .layer-summary, .layer.layer-gtag.col2 .layer-summary {
    flex-flow: column wrap;
  }
  .layer.layer-gtag .layer-summary button, .layer.layer-gtag.col2 .layer-summary button {
    margin-bottom: 10px;
  }
  .layer.layer-gtag .layer-summary .layer-summary-button, .layer.layer-gtag.col2 .layer-summary .layer-summary-button {
    width: 100%;
    order: 1;
  }
  .layer.layer-gtag .layer-summary .layer-summary-button.secondary, .layer.layer-gtag.col2 .layer-summary .layer-summary-button.secondary {
    order: 2;
  }
}
@media (max-width: 640px) {
  .layer.layer-gtag .layer-summary {
    flex-flow: column wrap;
  }
  .layer.layer-gtag .layer-summary .layer-summary-button.secondary {
    margin: 0 0 10px 0;
  }
}
.modal {
  border-radius: 0.3125rem;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  max-width: 90%;
  border: unset;
}
.modal:has(.certificate-type) {
  width: 35.375rem;
}
.modal:has(.block.certificate-required) {
  width: 37.5rem;
}
.layer.checkout .block {
  background: var(--primaryBlockBackground);
  color: var(--primaryTextColor);
  font-family: var(--pageFont);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.40875rem;
  letter-spacing: 0.02rem;
}
.layer.checkout .block .block-main-title span {
  padding-right: 2.5rem;
}
.layer.checkout .block .block-text {
  font-size: 14px;
}
.layer.checkout .block .block-text span {
  font-weight: bold;
}
.layer.checkout .block .checkbox.bold label {
  font-weight: bold;
}
.layer.checkout .block .button-back {
  width: 100%;
  border-radius: 0.3125rem;
}
.layer.checkout .block .thermal-insulation-regulation-checklist {
  color: var(--primaryColor);
  position: relative;
  text-decoration: underline;
  padding-bottom: 0.5rem;
}
.layer.checkout .block .thermal-insulation-regulation-checklist::after {
  content: "";
  mask: url(/images/icon-expand.svg);
  -webkit-mask: url(/images/icon-expand.svg);
  width: 1.1rem;
  height: 1.1rem;
  right: 0;
  top: 0;
  background-color: var(--primaryTextColor);
  position: absolute;
  mask-size: 100%;
}
.layer.checkout .block .thermal-insulation-regulation-checklist:has(+ .certificate-box)::after {
  transform: rotate(180deg);
}
.layer.checkout .block-pricing {
  padding: 0;
}
.layer.checkout .block-pricing .price-tags-wrapper {
  padding-block: 1.5rem 2.5rem;
  column-gap: clamp(0.625rem, 3vw, 1.2rem);
  display: flex;
}
.layer.checkout .block-pricing .price-tags-wrapper .price-tag {
  flex: 0 0 48%;
}
.layer.checkout .block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper {
  padding: 1rem;
  background: #FFF;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.layer.checkout .block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper .block-sub-title {
  padding: 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 1rem;
}
.layer.checkout .block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper .price-tag-features {
  padding-block: 1.5625rem;
}
.layer.checkout .block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper .price-tag-features li {
  font-size: 14px;
}
.layer.checkout .block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper .price-tag-features li::before {
  background-color: #339900;
}
.layer.checkout .block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper .price-tag-features li.icon-cross::before {
  content: "";
  background: url(/images/icon-cross.svg) no-repeat 0 0;
}
.layer.checkout .block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper .price-tag-btn {
  font-size: 12px;
}
@media (max-width: 40rem) {
  .layer.checkout .block-pricing .price-tags-wrapper {
    flex-direction: column;
  }
}
/**
 * feedback
 */
.feedback .main {
  background: #FFFFFF;
}
.feedback .main .main-wrapper {
  padding: 0;
  margin: 0 auto 2.5rem;
  max-width: var(--pageMaxWidth);
}
@media (min-width: 30rem) {
  .feedback .main .main-wrapper {
    padding: 0 1.25rem;
  }
}
.feedback .feedback-wrapper {
  display: grid;
  column-gap: min(2.5vw, 2.5rem);
  row-gap: 1.25rem;
  padding-block: 2.5rem;
  grid-template-columns: 1fr;
  grid-template-areas: "block-feedback";
}
@media (min-width: 48rem) {
  .feedback .feedback-wrapper {
    grid-template-columns: min(33vw, 21.25rem) 1fr;
    grid-template-areas: "block-feedback block-feedback";
  }
}
.feedback .feedback-wrapper .block {
  border-radius: var(--primaryBlockBorderRadius);
  background: var(--pageFooterBackground);
  box-shadow: var(--primaryBlockShadow);
  margin: 0;
  padding-block: 1.875rem 1.25rem;
  padding-inline: 0.875rem 1rem;
  font: var(--primaryBlockTextFont);
  color: var(--primaryBlockTextColor);
}
.feedback .feedback-wrapper .block .block-main-title {
  margin-bottom: 1.5625rem;
  display: flex;
}
.feedback .feedback-wrapper .block .block-main-title span {
  color: var(--primaryBlockTitleColor);
  font: var(--primaryBlockTitleFont);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.feedback .feedback-wrapper .block .block-sub-title {
  display: flex;
}
.feedback .feedback-wrapper .block .block-sub-title span {
  color: var(--primaryBlockSubTitleColor);
  font: var(--primaryBlockSubTitleFont);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.feedback .feedback-wrapper .block .block-sub-title span strong {
  color: var(--primaryColor);
}
.feedback .feedback-wrapper .block .block-sub-title span i {
  font: var(--primaryBlockSubTitleSmallFont);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
@media (min-width: 40rem) {
  .feedback .feedback-wrapper .block {
    padding-inline: 2.5rem;
    padding-block: 2.5rem 1.875rem;
  }
}
.feedback .block-feedback {
  grid-area: block-feedback;
  display: grid;
  row-gap: 1.25rem;
}
.feedback .block-feedback .block .form {
  display: grid;
  margin: 0 -20px;
}
.feedback .block-feedback .block .form.col2 {
  grid-template-columns: 1fr 1fr;
}
.feedback .block-feedback .block .form .form-grid {
  display: grid;
  row-gap: 1.5625rem;
  align-content: space-between;
  background: #FFF;
  padding: 1.25rem;
  border-radius: 0.3125rem;
  margin: 1.25rem;
}
.feedback .block-feedback .block .form .form-grid .text-field {
  font: var(--formFieldFont);
  width: 100%;
  display: grid;
  position: relative;
  align-items: center;
  color: var(--primaryBlockTextColor);
}
.feedback .block-feedback .block .form .form-grid .text-field label {
  color: var(--primaryBlockTitleColor);
  font: var(--primaryBlockTitleFont);
  font-size: 16px;
}
.feedback .block-feedback .block .form .form-grid .text-field .additional-information {
  opacity: 0.75;
  font-size: 14px;
}
.feedback .block-feedback .block .form .form-grid .text-field .dropzone .preview {
  justify-content: space-between;
}
.feedback .block-feedback .block .form .form-grid .text-field input {
  height: var(--formFieldHeight);
  width: 100%;
  font: inherit;
  padding-inline: var(--formFieldPaddingInline);
  color: var(--primaryBlockTextColor);
  border: var(--formFieldBorder);
  border-radius: var(--formFieldBorderRadius);
}
.feedback .block-feedback .block .form .form-grid .text-field textarea {
  width: 100%;
  font: inherit;
  padding-inline: var(--formFieldPaddingInline);
  color: var(--primaryBlockTextColor);
  border: var(--formFieldBorder);
  border-radius: var(--formFieldBorderRadius);
}
.feedback .block-feedback .block .form .form-grid .text-field.feedback-upload-building-image-file input {
  border: none;
  margin: 10px 0 0 -10px;
}
.feedback .block-actions button {
  flex: 1 1 100%;
  font: 600 18px/26px var(--pageFont);
  padding: 12px 30px;
  width: 100%;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  margin: 10px 0;
  cursor: pointer;
}
.feedback .feedback-wrapper .modal:has(.feedback-requesting) {
  width: min(100%, 34rem);
}
.feedback .feedback-wrapper .modal:has(.feedback-requesting) .block.feedback-requesting {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
}
.feedback .feedback-wrapper .modal:has(.feedback-requesting) .block.feedback-requesting .spinner.loading::before {
  width: 2.1875rem;
  height: 2.1875rem;
  border-width: 0.25rem;
  border-color: transparent var(--primaryColor) var(--primaryColor);
}
/**
 * Customer center - service
 */
.service .main {
  background: #FFFFFF;
  padding: 40px 0px;
}
.service .main .main-wrapper {
  padding: 0 20px;
  margin: 0 0 2.5rem;
  max-width: var(--pageMaxWidth);
}
.service .main .main-wrapper .customer-support-image img {
  max-width: 100%;
  height: auto;
}
@media (min-width: 40rem) {
  .service .main {
    padding: 40px 50px;
  }
  .service .main .main-wrapper {
    padding: 0 1.25rem;
    margin: 0 auto 2.5rem;
  }
}
.service .search-order .support-order-form form {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -10px -16px -10px;
}
.service .search-order .support-order-form form .text-field {
  flex: 0 0 100%;
  padding: 0 10px 16px 10px;
}
.service .search-order .support-order-form form .text-field label {
  color: var(--primaryTextColor);
  display: block;
  font: 600 14px / 20px var(--pageFont);
  padding: 4px 0 6px 0;
}
.service .search-order .support-order-form form .text-field input, .service .search-order .support-order-form form .text-field input[type="text"], .service .search-order .support-order-form form .text-field input[type="password"], .service .search-order .support-order-form form .text-field .input[type="email"], .service .search-order .support-order-form form .text-field input[type="tel"], .service .search-order .support-order-form form .text-field select {
  background: #fff;
  border: 2px solid #d9d9d9;
  border-radius: 3px;
  box-sizing: border-box;
  color: var(--primaryTextColor);
  display: block;
  font: 400 14px / 28px var(--pageFont);
  height: 40px;
  padding: 0 10px;
  transition: border 0.2s ease;
  width: 100%;
}
.service .search-order .delivery .block-main-title {
  color: var(--primaryTextColor);
  font: 700 24px / 28px var(--pageFont);
  margin: 0 0 16px 0;
  height: 28px;
  padding-bottom: 2.5em;
}
.service .search-order .delivery .delivery-wrapper .delivery-form {
  background: unset;
  margin: 10px 0;
  border: unset;
  width: 100%;
}
.service .search-order .delivery .delivery-wrapper .delivery-form form {
  display: grid;
}
.service .search-order .delivery .delivery-wrapper .delivery-form div.form:nth-child(n+2 of .form) {
  margin-top: 2.5rem;
}
.service .search-order .delivery .delivery-wrapper .delivery-form div.form {
  margin: 0;
  display: grid;
  row-gap: 1.5625rem;
  position: relative;
}
.service .search-order .delivery .delivery-wrapper .delivery-form div.form.col2 {
  grid-template-columns: 1fr 1fr;
  column-gap: 0.75rem;
}
.service .search-order .delivery .delivery-wrapper .delivery-form div.form .form-grid {
  display: grid;
  row-gap: 1.5625rem;
  align-content: space-between;
}
.service .search-order .delivery .delivery-wrapper .delivery-form div.form .form-grid .select-field select {
  background: #fff url(/images/icon-selector.svg) no-repeat right 0.625rem center;
  background-size: 0.75rem 0.5rem;
  padding-inline: 0.625rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  font: inherit;
  color: var(--primaryBlockTextColor);
  height: var(--formFieldHeight);
  border: var(--formFieldBorder);
  border-radius: var(--formFieldBorderRadius);
}
.service .search-order .delivery .delivery-wrapper .delivery-form div.form .form-grid .radio-field {
  display: grid;
  row-gap: 0.9375rem;
}
.service .search-order .delivery .delivery-wrapper .delivery-form div.form .form-grid .radio-field label {
  color: var(--formFieldLabelColor);
}
.service .search-order .delivery .delivery-wrapper .delivery-form div.form .form-grid .radio-field input {
  margin-right: 0.4375rem;
  accent-color: var(--primaryBlockTextColor);
  appearance: auto;
}
.service .search-order .delivery .delivery-wrapper .delivery-form div.form .form-grid .radio-field.gender {
  grid-template-columns: repeat(4, 1fr);
}
.service .search-order .delivery .delivery-wrapper .delivery-form div.form .form-grid .text-field input {
  height: var(--formFieldHeight);
  width: 100%;
  font: inherit;
  padding-inline: var(--formFieldPaddingInline);
  color: var(--primaryBlockTextColor);
  border: var(--formFieldBorder);
  border-radius: var(--formFieldBorderRadius);
}
.service .search-order .delivery .delivery-wrapper .delivery-form div.form .form-grid .text-field label {
  font: var(--formFieldPlaceholderFont);
  color: var(--formFieldLabelColor);
  position: absolute;
  top: 0.5rem;
  pointer-events: none;
  transition: transform 250ms;
}
.service .search-order .delivery .delivery-wrapper .delivery-form div.form .form-grid .text-field label:has(+ input:focus), .service .search-order .delivery .delivery-wrapper .delivery-form div.form .form-grid .text-field label:has(+ input:not(:placeholder-shown)) {
  transform: translateY(-1.75rem);
  font: var(--formFieldLabelFont);
  top: 0.625rem;
}
.service .search-order .delivery .delivery-wrapper .delivery-form div.form .form-grid .text-field label:has(+ input:required):after {
  content: "*";
  position: relative;
  left: 1px;
  color: var(--primaryColor);
  font-size: 16px;
}
.service .search-order .delivery .delivery-wrapper .delivery-form div.form .form-grid .select-field label {
  position: absolute;
  left: 0;
  top: -1rem;
  font: var(--formFieldLabelFont);
}
.service .search-order .invoice .block-main-title {
  color: var(--primaryTextColor);
  font: 700 24px / 28px var(--pageFont);
  margin: 0 0 16px 0;
  height: 28px;
  padding-bottom: 2.5em;
}
.service .search-order .invoice .invoice-wrapper .invoice-form {
  background: unset;
  margin: 10px 0;
  border: unset;
  width: 100%;
}
.service .search-order .invoice .invoice-wrapper .invoice-form form {
  display: grid;
}
.service .search-order .invoice .invoice-wrapper .invoice-form div.form:nth-child(n+2 of .form) {
  margin-top: 2.5rem;
}
.service .search-order .invoice .invoice-wrapper .invoice-form div.form {
  margin: 0;
  display: grid;
  row-gap: 1.5625rem;
  position: relative;
}
.service .search-order .invoice .invoice-wrapper .invoice-form div.form.col2 {
  grid-template-columns: 1fr 1fr;
  column-gap: 0.75rem;
}
.service .search-order .invoice .invoice-wrapper .invoice-form div.form .form-grid {
  display: grid;
  row-gap: 1.5625rem;
  align-content: space-between;
}
.service .search-order .invoice .invoice-wrapper .invoice-form div.form .form-grid .select-field select {
  background: #fff url(/images/icon-selector.svg) no-repeat right 0.625rem center;
  background-size: 0.75rem 0.5rem;
  padding-inline: 0.625rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  font: inherit;
  color: var(--primaryBlockTextColor);
  height: var(--formFieldHeight);
  border: var(--formFieldBorder);
  border-radius: var(--formFieldBorderRadius);
}
.service .search-order .invoice .invoice-wrapper .invoice-form div.form .form-grid .radio-field {
  display: grid;
  row-gap: 0.9375rem;
}
.service .search-order .invoice .invoice-wrapper .invoice-form div.form .form-grid .radio-field label {
  color: var(--formFieldLabelColor);
}
.service .search-order .invoice .invoice-wrapper .invoice-form div.form .form-grid .radio-field input {
  margin-right: 0.4375rem;
  accent-color: var(--primaryBlockTextColor);
  appearance: auto;
}
.service .search-order .invoice .invoice-wrapper .invoice-form div.form .form-grid .radio-field.gender {
  grid-template-columns: repeat(4, 1fr);
}
.service .search-order .invoice .invoice-wrapper .invoice-form div.form .form-grid .text-field input {
  height: var(--formFieldHeight);
  width: 100%;
  font: inherit;
  padding-inline: var(--formFieldPaddingInline);
  color: var(--primaryBlockTextColor);
  border: var(--formFieldBorder);
  border-radius: var(--formFieldBorderRadius);
}
.service .search-order .invoice .invoice-wrapper .invoice-form div.form .form-grid .text-field label {
  font: var(--formFieldPlaceholderFont);
  color: var(--formFieldLabelColor);
  position: absolute;
  top: 0.5rem;
  pointer-events: none;
  transition: transform 250ms;
}
.service .search-order .invoice .invoice-wrapper .invoice-form div.form .form-grid .text-field label:has(+ input:focus), .service .search-order .invoice .invoice-wrapper .invoice-form div.form .form-grid .text-field label:has(+ input:not(:placeholder-shown)) {
  transform: translateY(-1.75rem);
  font: var(--formFieldLabelFont);
  top: 0.625rem;
}
.service .search-order .invoice .invoice-wrapper .invoice-form div.form .form-grid .text-field label:has(+ input:required):after {
  content: "*";
  position: relative;
  left: 1px;
  color: var(--primaryColor);
  font-size: 16px;
}
.service .search-order .invoice .invoice-wrapper .invoice-form div.form .form-grid .select-field label {
  position: absolute;
  left: 0;
  top: -1rem;
  font: var(--formFieldLabelFont);
}
/**
 * Animations
 */
@keyframes iconSwitch {
  40% {
    background-image: url(/images/icon-trust.png);
    background-image: url(/images/icon-trust.webp);
  }
  50% {
    background-image: url(/images/icon-din.png);
    background-image: url(/images/icon-din.webp);
  }
  90% {
    background-image: url(/images/icon-din.png);
    background-image: url(/images/icon-din.webp);
  }
  100% {
    background-image: url(/images/icon-trust.png);
    background-image: url(/images/icon-trust.webp);
  }
}
/**
 Apple Pay Button
 */
apple-pay-button {
  width: 100%;
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 35px;
  --apple-pay-button-border-radius: 5px;
  --apple-pay-button-padding: 5px 0px;
}
/**
 * Main
 */
/**
 * Progressbar
 */
.progressbar {
  display: flex;
  flex-flow: row nowrap;
  margin: 0 auto 40px auto;
  max-width: 800px;
  position: relative;
}
.progressbar .item {
  flex: 0 0 33.33%;
  overflow: hidden;
  position: relative;
}
.progressbar .item .icon {
  background: #d9d9d9;
  border-radius: 50%;
  color: var(--secondaryTextColor);
  display: block;
  font: 800 15px/30px var(--pageFont);
  height: 30px;
  left: 50%;
  margin-left: -15px;
  position: absolute;
  text-align: center;
  width: 30px;
  z-index: 2000;
}
.progressbar .item .label {
  color: var(--secondaryTextColor);
  display: block;
  font: 600 14px/16px var(--pageFont);
  letter-spacing: 1px;
  padding-top: 40px;
  text-align: center;
  text-transform: uppercase;
}
.progressbar .item::before {
  background: #d9d9d9;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  top: 14px;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1000;
}
.progressbar .item::after {
  background: #d9d9d9;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  top: 14px;
  transform: translateX(50%);
  width: 100%;
  z-index: 1000;
}
.progressbar .item.active .icon {
  color: #fff;
  background: #888888;
}
.progressbar .item.active .label {
  color: var(--primaryTextColor);
}
.progressbar .item.active::before {
  background: #888888;
}
.progressbar .item.active::after {
  background: #d9d9d9;
}
.progressbar .item.success .icon {
  color: #fff;
  background: var(--secondaryColor);
}
.progressbar .item.success .icon::before {
  background: url(/images/icon-check.svg) no-repeat center center;
  background-size: 14px 14px;
  content: "";
  display: block;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(3deg) brightness(100%) contrast(104%);
  height: 30px;
  width: 30px;
}
.progressbar .item.success .icon span {
  display: none;
}
.progressbar .item.success .label {
  color: var(--primaryTextColor);
}
.progressbar .item.success::before {
  background: var(--secondaryColor);
}
.progressbar .item.success::after {
  background: var(--secondaryColor);
}
@media (max-width: 1000px) {
  .progressbar {
    margin: 0 auto 30px auto;
  }
}
@media (max-width: 767px) {
  .progressbar {
    display: none;
  }
}
/**
 * Block
 */
.block {
  background: var(--primaryBlockBackground);
  border: var(--primaryBlockBorder);
  border-radius: var(--primaryBlockBorderRadius);
  box-shadow: var(--primaryBlockShadow);
  padding: 35px 40px;
  margin: 0 0 40px 0;
}
.block.secondary {
  background: var(--secondaryBlockBackground);
  border: var(--secondaryBlockBorder);
  border-radius: var(--secondaryBlockBorderRadius);
  box-shadow: var(--secondaryBlockShadow);
}
.block .block-headline {
  font-size: 20px;
}
.block .block-headline h1 {
  color: var(--primaryColor);
  font: 700 2em/1em var(--pageFont);
  margin: 0 0 0.2em 0;
  text-transform: uppercase;
  transition: font 0.2s ease;
}
.block .block-headline h2 {
  color: var(--primaryTextColor);
  font: 600 1.2em/1.1em var(--pageFont);
  text-transform: uppercase;
  transition: font 0.2s ease;
}
.block .block-title {
  color: var(--primaryTextColor);
  font: 700 24px/28px var(--pageFont);
  margin: 0 0 16px 0;
  height: 28px;
  padding-bottom: 2.5em;
}
.block .block-title.block-title-center {
  text-align: center;
}
.block .block-title.asterisk::after {
  color: var(--primaryColor);
  content: " *";
}
.block .block-more {
  color: var(--secondaryTextColor);
  border: 2px solid #eeeeee;
  border-radius: 3px;
  display: block;
  font: 400 14px/28px var(--pageFont);
  margin: 20px 0 0 0;
  padding: 4px 15px 4px 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.block .block-more:hover {
  color: var(--primaryTextColor);
}
.block .hint {
  color: var(--secondaryTextColor);
  font-size: 0.8em;
}
.block .hint.error-message {
  color: #bc0000;
}
@media (max-width: 1000px) {
  .block {
    padding: 25px 30px;
    margin: 0 0 30px 0;
  }
}
@media (max-width: 767px) {
  .block {
    border-radius: 0;
    padding: 20px;
    margin: 0 0 20px 0;
  }
  .block.secondary {
    background: none;
    border: 0;
  }
}
@media (max-width: 600px) {
  .block .block-headline {
    font-size: 18px;
  }
}
@media (max-width: 500px) {
  .block .block-headline {
    font-size: 16px;
  }
}
@media (max-width: 413px) {
  .block .block-headline {
    font-size: 14px;
  }
}
@media (max-width: 374px) {
  .block .block-headline {
    font-size: 12px;
  }
}
.block-product {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}
.block-summary {
  padding: 25px 30px;
}
@media (max-width: 1000px) {
  .block-summary {
    padding: 20px 25px;
  }
}
@media (max-width: 767px) {
  .block-summary {
    padding: 0 20px 20px 20px;
  }
}
/**
 * Content
*/
.content {
  margin: 0 0 -20px 0;
}
.content a {
  color: var(--primaryTextColor);
  text-decoration: underline;
  cursor: pointer;
}
.content a:hover {
  text-decoration: none;
}
.content strong, .content b {
  font-weight: 600;
  color: var(--primaryTextColor);
}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
  color: var(--primaryTextColor);
  margin: 0 0 20px 0;
}
.content h1 {
  font: 400 24px/28px var(--pageFont);
}
.content h2 {
  font: 400 22px/26px var(--pageFont);
}
.content h3 {
  font: 400 20px/24px var(--pageFont);
}
.content h4 {
  font: 400 18px/22px var(--pageFont);
}
.content h5 {
  font: 400 16px/20px var(--pageFont);
}
.content h6 {
  font: 400 14px/20px var(--pageFont);
}
.content p {
  color: var(--primaryTextColor);
  font: 400 14px/20px var(--pageFont);
  margin: 0 0 20px 0;
}
.content ul, .content ol {
  color: var(--primaryTextColor);
  font: 400 14px/20px var(--pageFont);
  margin: 0 0 20px 20px;
}
.content ul li, .content ol li {
  margin: 0 0 5px 0;
}
.content ul li.disabled, .content ol li.disabled {
  opacity: 0.4;
}
.content ul {
  list-style-type: square;
}
.content ol {
  list-style-type: decimal;
}
.content ol[type="a"] {
  list-style-type: lower-latin;
}
.content ol[type="I"] {
  list-style-type: upper-roman;
}
.content .style-type-check {
  list-style: none;
  margin: 0 0 20px 0;
}
.content .style-type-check li::before {
  background: url(/images/icon-check.svg) no-repeat 0 0;
  background-size: 14px 14px;
  content: "";
  display: block;
  filter: var(--primaryColorFilter);
  float: left;
  height: 14px;
  margin: 3px 6px 3px 0;
  width: 14px;
}
.content .content-gallery {
  margin-bottom: 20px;
}
.content .content-gallery .content-images {
  padding: 1em 1em 0.25em;
  box-shadow: var(--primaryBlockShadow);
  border-radius: var(--primaryBlockBorderRadius);
}
.content .content-gallery .content-images img {
  width: 100%;
}
.content .content-gallery .content-gallery-controls {
  display: flex;
  justify-content: center;
}
.content .content-gallery .content-gallery-controls button {
  margin: 1em;
  background: var(--primaryColor);
  width: 16px;
  height: 10px;
  cursor: pointer;
  -webkit-mask-image: url(/images/icon-faq-question.svg);
  mask-image: url(/images/icon-faq-question.svg);
  background-size: 16px;
  transform: rotate(-90deg);
}
.content .content-gallery .content-gallery-controls button.gallery-backwards {
  transform: rotate(90deg);
}
.content .content-gallery .content-gallery-controls button.disabled {
  opacity: 0.5;
}
/**
 * Form
 */
.form {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -10px -16px -10px;
}
.form .form-wrapper {
  display: block;
  width: 100%;
}
.form .form-group {
  display: flex;
  flex: 0 0 100%;
  flex-flow: row wrap;
}
.form .form-summary {
  display: flex;
  padding: 16px 10px 0 10px;
}
.form .form-field {
  flex: 0 0 100%;
  padding: 0 10px 16px 10px;
}
.form .form-field.w25 {
  flex: 0 0 25%;
}
.form .form-field.w50 {
  flex: 0 0 50%;
}
.form .form-field.w75 {
  flex: 0 0 75%;
}
.form .form-field.w33 {
  flex: 0 0 33.33%;
}
.form .form-field.w66 {
  flex: 0 0 66.66%;
}
.form .form-field.w70 {
  flex: 0 0 70%;
}
.form .form-field.w30 {
  flex: 0 0 30%;
}
.form .form-field.wauto {
  flex: 0 0 auto;
}
.form .form-field.show-more {
  display: flex;
}
.form .form-field.show-more label {
  cursor: pointer;
}
.form .form-field label {
  color: var(--primaryTextColor);
  display: block;
  font: 600 14px/20px var(--pageFont);
  padding: 4px 0 6px 0;
}
.form .form-field label a {
  color: var(--primaryTextColor);
  text-decoration: underline;
}
.form .form-field label a:hover {
  text-decoration: none;
}
.form .form-field label.optional-field {
  color: #666;
}
.form .form-field label.optional-field:hover {
  color: #444;
}
.form .form-field.required label::after {
  color: var(--primaryColor);
  content: " *";
}
.form .form-field .hint {
  color: var(--secondaryTextColor);
  display: block;
  font: 400 12px/16px var(--pageFont);
  padding: 4px 0 0 0;
}
.form .form-field .hint.error-message {
  color: #bc0000;
}
.form .form-field .select-wrapper {
  width: 100%;
}
.form .form-field input[type="text"], .form .form-field input[type="password"], .form .form-field input[type="email"], .form .form-field input[type="tel"], .form .form-field select {
  background: #fff;
  border: 2px solid #d9d9d9;
  border-radius: 3px;
  box-sizing: border-box;
  color: var(--primaryTextColor);
  display: block;
  font: 400 14px/28px var(--pageFont);
  height: 40px;
  padding: 0 10px;
  transition: border 0.2s ease;
  width: 100%;
}
.form .form-field input[type="text"]:hover, .form .form-field input[type="password"]:hover, .form .form-field input[type="email"]:hover, .form .form-field input[type="tel"]:hover, .form .form-field select:hover {
  border-color: #888;
}
.form .form-field input[type="text"]:focus, .form .form-field input[type="password"]:focus, .form .form-field input[type="email"]:focus, .form .form-field input[type="tel"]:focus, .form .form-field select:focus {
  border-color: var(--primaryColor);
}
.form .form-field select {
  background: #fff url(/images/icon-select.svg) no-repeat right center;
  background-size: 36px 36px;
  padding: 0 36px 0 10px;
  position: relative;
  overflow: hidden;
}
.form .form-field button {
  background: var(--secondaryButtonBackgroundColor);
  border-radius: 3px;
  color: var(--secondaryButtonTextColor);
  cursor: pointer;
  display: flex;
  font: 600 14px/20px var(--pageFont);
  letter-spacing: 1px;
  margin: 0 0 0 auto;
  padding: 10px 15px;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.form .form-field button:hover {
  background: var(--secondaryButtonBackgroundColorHover);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  color: var(--secondaryButtonTextColorHover);
}
.form .form-field button.gray {
  background-color: #888;
}
.form .form-field button.gray:hover {
  background-color: #666;
}
.form .form-field p {
  margin-top: 0.5em;
}
.form .form-field .group {
  display: flex;
  flex-flow: row nowrap;
}
.form .form-field .group.bordertop {
  border-top: 2px solid #eeeeee;
  margin-top: 4px;
  padding-top: 20px;
}
.form .form-field .group.borderbottom {
  border-bottom: 2px solid #eeeeee;
  margin-bottom: 4px;
}
.form .form-field .group.carbon-upgrade {
  background: #eeeeee url(../images/carbon-upgrade.png) no-repeat left center;
  background: #eeeeee url(../images/carbon-upgrade.webp) no-repeat left center;
  background-size: contain;
  border-radius: 3px;
  padding: 12px 20px 12px 100px;
  width: 100%;
}
.form .form-field .group .item {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  margin: 0 20px 0 0;
}
.form .form-field .group .item.disabled label {
  color: #888;
}
.form .form-field .group .item.full {
  flex: 1 1 auto;
}
.form .form-field .group .item:last-child {
  margin: 0;
}
.form .form-field input[type="checkbox"], .form .form-field input[type="radio"] {
  background: #fff;
  border: 2px solid #d9d9d9;
  border-radius: 3px;
  box-sizing: border-box;
  display: block;
  flex: 0 0 auto;
  font-size: inherit;
  height: 26px;
  margin: 0 10px 0 0;
  transition: border 0.2s ease;
  width: 26px;
}
.form .form-field input[type="checkbox"].disabled:hover, .form .form-field input[type="radio"].disabled:hover {
  border: 2px solid #d9d9d9;
}
.form .form-field input[type="checkbox"]:hover, .form .form-field input[type="radio"]:hover {
  border: 2px solid #888;
}
.form .form-field input[type="checkbox"]::after, .form .form-field input[type="radio"]::after {
  background: var(--primaryColor);
  border: 3px solid #fff;
  border-radius: 2px;
  box-sizing: border-box;
  content: "";
  display: none;
  height: 100%;
  width: 100%;
}
.form .form-field input[type="checkbox"]:checked::after, .form .form-field input[type="radio"]:checked::after {
  display: block;
}
.form .form-field input[type="radio"] {
  border-radius: 50%;
}
.form .form-field input[type="radio"]::after {
  border-radius: 50%;
}
.form .form-field input[type="checkbox"] + label, .form .form-field input[type="radio"] + label {
  flex: 1 1 auto;
  padding: 3px 0;
}
.form .form-field.error input[type="text"], .form .form-field.error input[type="password"], .form .form-field.error input[type="email"], .form .form-field.error input[type="tel"], .form .form-field.error select, .form .form-field.error input[type="checkbox"], .form .form-field.error textarea, .form .form-field.error input[type="radio"] {
  border: 2px solid #bc0000;
}
.form .form-field.error label, .form .form-field.error a {
  color: #bc0000;
}
.form .form-hints {
  border-top: 2px solid #eeeeee;
  color: #888;
  font: 400 12px/16px var(--pageFont);
  margin: 0 10px;
  padding: 16px 0;
}
.form .form-time {
  flex: 1 1 auto;
  padding: 0 10px 16px 10px;
}
.form .form-upselling {
  flex: 0 0 100%;
  padding: 0 10px 16px 10px;
}
.form .form-availability {
  align-self: center;
  flex: 1 1 auto;
  padding: 0 10px 20px 10px;
}
.form .form-price {
  align-self: center;
  flex: 0 0 auto;
  padding: 0 10px 20px 10px;
}
@media (max-width: 767px) {
  .form .form-field.w33 {
    flex: 0 0 100%;
  }
  .form .form-field.w66 {
    flex: 0 0 100%;
  }
}
/**
 * Summary
 */
.summary {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.summary .summary-price {
  color: var(--primaryTextColor);
  font: 400 16px/24px var(--pageFont);
  flex: 1 1 auto;
}
.summary .summary-price small {
  color: var(--secondaryTextColor);
  font: 400 12px/18px var(--pageFont);
  display: block;
}
.summary .summary-price small .emphasize {
  color: #29aa5d;
  font-weight: bold;
}
.summary .summary-trust {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
}
.summary .summary-trust::before {
  background: url(/images/icon-trust.png) no-repeat 0 0;
  background: url(/images/icon-trust.webp) no-repeat 0 0;
  background-size: contain;
  content: "";
  display: block;
  flex: 0 0 auto;
  height: 50px;
  margin: 0 15px 0 0;
  width: 50px;
}
.summary .summary-trust .summary-trust-wrapper {
  flex: 1 1 auto;
}
.summary .summary-trust .summary-trust-wrapper .summary-trust-name {
  color: var(--primaryTextColor);
  font: 600 16px/24px var(--pageFont);
}
.summary .summary-trust .summary-trust-wrapper .summary-trust-rating {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
}
.summary .summary-trust .summary-trust-wrapper .summary-trust-rating .summary-trust-rating-grade {
  color: var(--primaryTextColor);
  flex: 0 0 auto;
  font: 400 12px/18px var(--pageFont);
}
.summary .summary-trust .summary-trust-wrapper .summary-trust-rating .summary-trust-rating-stars {
  font-size: 12px;
  flex: 0 0 auto;
  margin: 0 0 0 4px;
}
.summary .summary-button-wrapper a {
  display: none;
}
.summary .summary-button {
  background: var(--primaryButtonBackgroundColor);
  border-radius: 3px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  color: var(--primaryButtonTextColor);
  cursor: pointer;
  display: inline-block;
  flex: 0 0 auto;
  font: 600 18px/26px var(--pageFont);
  letter-spacing: 2px;
  padding: 12px 30px;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.summary .summary-button:hover {
  background: var(--primaryButtonBackgroundColorHover);
  color: var(--primaryButtonTextColorHover);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
}
.summary .summary-button.loading {
  background-color: #bdbdbd;
}
.summary .paypal-button {
  width: 45%;
}
.icon-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.icon-button::before {
  display: block;
  content: "";
  background: url(/images/icon-lock-white.svg) no-repeat center center;
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  margin-right: 0.5em;
}
.icon-button.secure::before {
  background-image: url(/images/icon-lock-white.svg);
}
.icon-button.customer-service-button::before {
  background-image: url(/images/icon-support.svg);
}
@media (max-width: 767px) {
  .summary .summary-button-wrapper a {
    display: block;
  }
}
/**
 * Numberplate
 */
/**
 * Footer
 */
.footer {
  background: var(--pageFooterBackground);
  padding: 10px 20px;
  width: 100%;
  /** border-top: 0.625rem solid var(--secondaryTextColor); */
}
.footer .footer-wrapper {
  margin: 0 auto;
  max-width: var(--pageMaxWidth);
}
.footer .footer-wrapper .footer-links {
  columns: 2;
  column-width: 80px;
  column-gap: 1em;
}
.footer .footer-wrapper .footer-links li {
  color: var(--primaryTextColor);
  font: 400 14px/28px var(--pageFont);
}
.footer .footer-wrapper .footer-links li a {
  color: var(--primaryTextColor);
  text-decoration: none;
}
.footer .footer-wrapper .footer-infos {
  display: flex;
  justify-content: space-between;
}
.footer .footer-wrapper .footer-info {
  margin: 0 1em 0.5em;
}
.footer .footer-wrapper .footer-info .footer-info-title {
  font: 600 20px/32px var(--pageFont);
  margin: 0.7em 0;
}
.footer .footer-wrapper .footer-info .footer-icons {
  display: flex;
  flex-flow: row wrap;
  max-width: 28em;
}
.footer .footer-wrapper .footer-info .footer-icons span {
  background: #FFFFFF;
  width: 6em;
  height: 3em;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--primaryBlockShadow);
  margin: 0 1em 1em 0;
}
.footer .footer-wrapper .footer-info .footer-icons span img {
  width: 70%;
  max-height: 60%;
}
.footer .footer-wrapper .footer-info.payment-info {
  margin-right: 1em;
}
.footer .footer-wrapper .footer-info.shipping-info .footer-icons {
  flex-flow: column;
}
.footer .footer-wrapper .customer-service-button {
  background: var(--secondaryButtonBackgroundColor);
  border-radius: 3px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  color: var(--secondaryButtonTextColor);
  cursor: pointer;
  font: 600 14px/20px var(--pageFont);
  letter-spacing: 1px;
  padding: 10px 15px;
  text-transform: uppercase;
  transition: color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  margin-top: 0.5em;
}
.footer .footer-wrapper .customer-service-button:hover {
  background: var(--secondaryButtonBackgroundColorHover);
  color: var(--secondaryButtonTextColorHover);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
}
@media (max-width: 767px) {
  .footer .footer-wrapper .footer-infos {
    flex-direction: column;
  }
  .footer .footer-wrapper .footer-info {
    margin: 0;
  }
  .footer .footer-wrapper .footer-info.payment-info .footer-icons {
    margin-right: -1em;
  }
  .footer .footer-wrapper .footer-info.shipping-info .footer-icons {
    flex-flow: row wrap;
  }
}
/*
 * Header
 */
/*
 * Features
 */
.overview-features, .landingpage-features {
  padding: 0 0 10px 0;
}
.overview-features ul li, .landingpage-features ul li {
  border-top: 2px solid #d9d9d9;
  padding: 6px 20px;
  color: var(--primaryTextColor);
  font: 600 14px/24px var(--pageFont);
}
.overview-features ul li::before, .landingpage-features ul li::before {
  background: url(/images/icon-check.svg) no-repeat 0 0;
  background-size: 14px 14px;
  content: "";
  display: block;
  filter: var(--primaryColorFilter);
  float: left;
  height: 14px;
  margin: 5px 12px 5px 0;
  width: 14px;
}
.overview-features ul li.trust, .landingpage-features ul li.trust {
  display: flex;
}
.overview-features ul li.trust > *, .landingpage-features ul li.trust > * {
  display: flex;
  justify-content: center;
  align-items: center;
}
.overview-features ul li.trust .trust-rating-text, .landingpage-features ul li.trust .trust-rating-text {
  flex: 0 0 auto;
}
.overview-features ul li.trust .trust-rating-stars, .landingpage-features ul li.trust .trust-rating-stars {
  flex: 0 0 auto;
  margin: 0 6px;
}
.overview-features ul li.trust .trust-rating-grade, .landingpage-features ul li.trust .trust-rating-grade {
  flex: 0 0 auto;
  font-weight: 400;
}
.overview-features ul li.trust .trust-show-details, .landingpage-features ul li.trust .trust-show-details {
  background: url(/images/icon-select.svg?v=transparent) no-repeat center center;
  background-size: 25px 25px;
  height: 20px;
  width: 15px;
  margin-left: 0.3em;
  transition: transform 0.3s ease;
}
.overview-features ul li.trust::before, .landingpage-features ul li.trust::before {
  display: none;
}
.overview-features ul li.trust a, .landingpage-features ul li.trust a {
  text-decoration: none;
  color: var(--primaryTextColor);
}
.overview-features ul li.trust a::before, .landingpage-features ul li.trust a::before {
  content: "";
  background: url(/images/icon-trust.png) no-repeat 0 0;
  background: url(/images/icon-trust.webp) no-repeat 0 0;
  background-size: 20px 20px;
  height: 20px;
  margin: 4px 8px 4px -2px;
  width: 20px;
}
.overview-features ul li.trust.show-details .trust-show-details, .landingpage-features ul li.trust.show-details .trust-show-details {
  transform: rotate(180deg);
}
.overview-features ul li.trust.trust-expandable, .landingpage-features ul li.trust.trust-expandable {
  cursor: pointer;
}
/**
  Trust Details
 */
.trust-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease, visibility 0.3s ease, box-shadow 0.3s ease, margin 0.3s ease;
}
.trust-details.visible {
  height: 7em;
}
.trust-details .trust-score {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.2em;
}
.trust-details .trust-score .trust-score-stars, .trust-details .trust-score .trust-score-percentage {
  width: 4em;
  font: 400 12px/18px var(--pageFont);
  color: var(--primaryTextColor);
}
.trust-details .trust-score .trust-score-percentage {
  width: 3em;
  text-align: end;
}
.trust-details .trust-score .trust-score-bar {
  width: 60%;
  border-radius: 3px;
  height: 1em;
  margin: 0.1em 0;
  background: var(--pageMainBackground);
}
.trust-details .trust-score .trust-score-bar .trust-score-bar-fill {
  height: 100%;
  background: #FFCC00;
  border-radius: 3px;
}
@media (max-width: 767px) {
  .trust-details {
    margin: 0 20px;
  }
  .trust-details .trust-score {
    justify-content: space-between;
    margin: 0 10px 0 26px;
  }
  .trust-details .trust-score .trust-score-bar {
    flex-grow: 1;
  }
  .trust-details.visible {
    margin-bottom: 1em;
  }
}
.features .item.trust .trust-details {
  height: unset;
}
.features .item.deliverytime .deliverytime-details {
  width: 32em;
}
@media (max-width: 1000px) {
  .features .item.deliverytime .deliverytime-details {
    transform: translateX(-80%);
  }
}
/**
 * Info Tooltips
 */
.checkout-3 .main .main-wrapper.checkout-wrapper {
  max-width: 950px !important;
}
/*
 * Checkout-Rating
 */
.checkout-success .confirmation {
  padding: 0 185px 30px;
  text-align: center;
}
.checkout-success .progress {
  padding: 0px 60px;
  display: flex;
  justify-content: space-between;
  visibility: visible;
  height: auto;
}
.checkout-success .progress .step {
  flex: 0 30%;
  text-align: center;
}
.checkout-success .progress .step .step-icon {
  display: inline-block;
}
.checkout-success .progress .step .step-icon::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  margin-bottom: -10px;
  width: 121px;
  height: 100px;
  margin-bottom: 5px;
  background-color: var(--primaryButtonBackgroundColor);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.checkout-success .progress .step .step-icon.email::before {
  -webkit-mask-image: url(/images/icon-confirm.svg);
  mask-image: url(/images/icon-confirm.svg);
}
.checkout-success .progress .step .step-icon.shipping::before {
  -webkit-mask-image: url(/images/icon-delivery.svg);
  mask-image: url(/images/icon-delivery.svg);
}
.checkout-success .progress .step .step-icon.delivery::before {
  -webkit-mask-image: url(/images/icon-joy.svg);
  mask-image: url(/images/icon-joy.svg);
}
.checkout-success .progress .step .step-title {
  color: var(--primaryTextColor);
  font: 601 14px/24px var(--pageFont);
  margin-top: -15px;
}
.checkout-success .progress .step .step-description {
  color: var(--primaryTextColor);
  font: 400 12px/20px var(--pageFont);
  margin-top: 5px;
}
.checkout-success .checkout-rating {
  display: flex;
  align-items: center;
  border: 2px solid #d9d9d9;
  border-radius: 4px;
  padding: 16px;
  margin: 18px 0;
}
.checkout-success .checkout-rating .trustpilot-rating-title {
  color: #2A9F57;
  font: 601 16px/20px var(--pageFont);
}
.checkout-success .checkout-rating .trustpilot-rating-logo {
  display: flex;
  margin: 0 0.75em 0 0;
}
.checkout-success .checkout-rating .trustpilot-rating-logo::before {
  content: "";
  background: url(/images/trustpilot.png) no-repeat 0 0;
  background-size: contain;
  min-height: 50px;
  width: 323px;
}
.checkout-success .checkout-rating .button {
  margin: 0 0 0 0.75em;
}
.checkout-success .checkout-rating p {
  margin: 0;
  font: 400 14px/20px var(--pageFont);
}
@media (max-width: 767px) {
  .checkout-success {
    margin: 15px 18px 15px 17px;
    border-radius: 12px;
  }
  .checkout-success .confirmation {
    padding: 0;
  }
  .checkout-success .progress {
    visibility: hidden;
    height: 0px;
  }
  .checkout-success .checkout-rating .trustpilot-rating-logo {
    margin: 0 0 0.75em 0;
  }
  .checkout-success .checkout-rating .button {
    margin: 0.75em 0 0 0;
  }
  .checkout-success .progress {
    flex-direction: column;
  }
  .checkout-success .progress .step {
    padding-top: 40px;
  }
}
.checkout-promotion {
  padding: 0;
  box-shadow: none;
}
.checkout-promotion .promotion-board {
  display: flex;
  justify-content: space-between;
  background: var(--pageMainBackground);
}
.checkout-promotion .promotion-board .promotion {
  flex: 0 32%;
  text-align: center;
  background: var(--primaryBlockBackground);
  box-shadow: var(--primaryBlockShadow);
  overflow: hidden;
  position: relative;
}
.checkout-promotion .promotion-board .promotion.big {
  flex: 0 100%;
}
.checkout-promotion .promotion-board .promotion.middle {
  flex: 0 48%;
}
.checkout-promotion .promotion-board .promotion .promotion-title {
  color: var(--primaryTextColor);
  font: 600 18px/26px var(--pageFont);
  display: flex;
  align-items: center;
  height: 86px;
}
.checkout-promotion .promotion-board .promotion .promotion-title .promotion-badge::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 86px;
  height: 86px;
  margin: -40px -20px 0px -20px;
}
.checkout-promotion .promotion-board .promotion .promotion-title .promotion-badge.new::before {
  background: url(/images/badge-neu.svg) no-repeat 0 0;
  background-size: 86px 86px;
}
.checkout-promotion .promotion-board .promotion .promotion-title .promotion-badge.hint::before {
  background: url(/images/badge-tipp.svg) no-repeat 0 0;
  background-size: 86px 86px;
}
.checkout-promotion .promotion-board .promotion .promotion-title .promotion-badge.important::before {
  background: url(/images/badge-wichtig.svg) no-repeat 0 0;
  background-size: 86px 86px;
}
.checkout-promotion .promotion-board .promotion .promotion-title span {
  padding-right: 20px;
}
.checkout-promotion .promotion-board .promotion .promotion-images {
  position: relative;
}
.checkout-promotion .promotion-board .promotion .promotion-images img {
  width: 100%;
  height: auto;
}
.checkout-promotion .promotion-board .promotion .promotion-images .over-image {
  width: 103px;
  height: auto;
  position: absolute;
  left: 5%;
  top: 20%;
}
.checkout-promotion .promotion-board .promotion .promotion-images .over-image.special {
  width: 130px;
}
.checkout-promotion .promotion-board .promotion .promotion-description {
  color: var(--primaryTextColor);
  font: 400 14px/20px var(--pageFont);
  padding: 18px;
  min-height: 100px;
}
.checkout-promotion .promotion-board .promotion .promotion-button {
  display: block;
}
.checkout-promotion .promotion-board .promotion .button {
  margin: 0 0 30px 0;
  text-transform: uppercase;
  padding: 8px 25px;
  font: 602 14px/24px var(--pageFont);
  letter-spacing: 1px;
}
@media (max-width: 767px) {
  .checkout-promotion .promotion-board {
    flex-direction: column;
  }
  .checkout-promotion .promotion-board .promotion {
    margin: 5px 18px 15px 17px;
    border-radius: 12px;
  }
  .checkout-promotion .promotion-board .promotion .button {
    width: 60%;
  }
}
/**
 * Contentpage
 */
.contentpage .main .main-wrapper .block.maintenance {
  margin: 40px auto;
  max-width: 800px;
}
.contentpage .main .go-back-button-block {
  display: none;
}
.contentpage .main .go-back-button-block.sticky .go-back-button-wrapper {
  position: fixed;
  z-index: 9900;
  background-color: #ffffff;
  padding-top: 5px;
}
.contentpage .main .go-back-button-block .go-back-button-wrapper {
  transition: background-color 0.2s ease;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px 20px 20px;
}
.contentpage .main .go-back-button-block .go-back-button-wrapper .go-back-button {
  background: #888888;
  border-radius: 3px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  color: var(--primaryButtonTextColor);
  cursor: pointer;
  font: 600 18px/26px var(--pageFont);
  letter-spacing: 2px;
  padding: 12px 30px;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  width: 100%;
}
.contentpage .contentpage-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.contentpage .contentpage-button {
  background: var(--primaryButtonBackgroundColor);
  border-radius: 3px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  color: var(--primaryButtonTextColor);
  cursor: pointer;
  display: inline-block;
  flex: 0 0 auto;
  font: 600 18px/26px var(--pageFont);
  letter-spacing: 2px;
  padding: 12px 30px;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  flex-basis: 50%;
}
.contentpage .contentpage-button.contentpage-button-support {
  /*flex-basis: 32%;*/
  letter-spacing: 1px;
}
.contentpage .contentpage-button.contentpage-button-support-invoice {
  background: var(--secondaryButtonBackgroundColor);
}
.contentpage .contentpage-button.contentpage-button-support-invoice:hover {
  background: var(--secondaryButtonBackgroundColorHover);
  color: var(--secondaryButtonTextColorHover);
}
.contentpage .contentpage-button:hover {
  background: var(--primaryButtonBackgroundColorHover);
  color: var(--primaryButtonTextColorHover);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
}
.contentpage .contentpage-button.loading {
  background-color: #bdbdbd;
}
.contentpage .contentpage-button.secondary {
  background: transparent;
  box-shadow: none;
  color: #888;
  padding: 12px 0;
}
.contentpage .contentpage-button.secondary:hover {
  background: transparent;
  color: #888;
  box-shadow: none;
}
.contentpage .contentpage-button.secondary.loading {
  background-color: transparent;
}
.contentpage .contentpage-button.tertiary {
  font: 600 14px/20px var(--pageFont);
  background: var(--secondaryButtonBackgroundColor);
  color: var(--secondaryButtonTextColor);
  letter-spacing: 1px;
  padding: 10px 15px;
  text-transform: none;
}
.contentpage .contentpage-button.tertiary:hover {
  background: var(--secondaryButtonBackgroundColorHover);
  color: var(--secondaryButtonTextColorHover);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
}
.contentpage .contentpage-button.button-block {
  display: block;
  margin-top: 1em;
}
@media (max-width: 767px) {
  .contentpage .contentpage-buttons {
    flex-direction: column;
    gap: 0.5em;
  }
}
/**
 * Customer Support
 */
.customer-support .content {
  margin-bottom: 0;
}
.customer-support .customer-support-block {
  background: none;
  box-shadow: none;
  padding: 0;
}
.customer-support .customer-support-header {
  text-align: center;
}
.support-form textarea {
  width: 100%;
  background: #fff;
  border: 2px solid #d9d9d9;
  border-radius: 3px;
  box-sizing: border-box;
  color: #000;
  display: block;
  font: 400 14px/28px var(--pageFont);
  padding: 0 10px;
  transition: border 0.2s ease;
  resize: none;
}
.support-form textarea:hover {
  border-color: #888;
}
.support-form textarea:focus {
  border-color: var(--primaryColor);
}
.support-form .form .form-field .group .item {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row nowrap;
}
.faq-block-title {
  font: 700 24px/28px var(--pageFont);
  margin: 1.5em 0 1em 0;
  color: var(--primaryTextColor);
  text-align: center;
  padding: 0 20px;
}
.faq {
  align-items: center;
  transition: padding 0.2s ease;
}
.faq .faq-contents {
  margin-top: 1.5em;
}
.faq .faq-question {
  border-bottom: 2px solid #eeeeee;
  display: block;
}
.faq .faq-question:last-child {
  border-bottom: none;
}
.faq .faq-question.open .faq-text {
  margin: 0 0 1em 22px;
  display: block;
}
.faq .faq-question.open .faq-text a {
  color: var(--primaryTextColor);
  text-decoration: underline;
}
.faq .faq-question.open .faq-text a:hover {
  text-decoration: none;
}
.faq .faq-question.open .faq-text p {
  color: var(--primaryTextColor);
  font: 400 16px/24px var(--pageFont);
  margin: 0 0 20px 0;
}
.faq .faq-question.open .faq-title::before {
  transform: rotate(0);
  background-color: var(--primaryColor);
}
.faq .faq-question .faq-title {
  display: flex;
  align-items: center;
  margin: 0.8em 0;
  font: 600 18px/22px var(--pageFont);
}
.faq .faq-question .faq-title::before {
  content: "";
  background-color: #888;
  -webkit-mask-image: url(/images/icon-faq-question.svg);
  mask-image: url(/images/icon-faq-question.svg);
  background-size: 12px;
  width: 12px;
  height: 8px;
  transform: rotate(-90deg);
  transition: transform 0.3s ease, background-color 0.3s ease;
  margin-right: 10px;
  flex-shrink: 0;
}
.faq .faq-question:last-child .faq-text {
  margin-bottom: 0;
}
.faq .faq-question:last-child .faq-text p:last-child {
  margin-bottom: 0;
}
.faq select {
  font-weight: 600;
}
.faq .faq-category:last-child {
  margin-bottom: 0;
}
.faq .faq-category:first-child {
  margin-top: 0;
}
.faq .faq-category:first-child .block-title {
  margin-top: 0px;
}
.faq .faq-category .block-title {
  margin-top: 30px;
}
.support-order-form {
  margin-top: 1.5em;
  margin-bottom: 0;
}
.support-order-form .form {
  margin-bottom: 0;
}
.support-order-form .support-form {
  display: none;
}
.support-topic label {
  border-radius: 3px;
  color: var(--primaryTextColor);
  font: 600 16px/20px var(--pageFont);
  cursor: pointer;
}
.support-topic input[type="checkbox"], .support-topic input[type="radio"] {
  background: #fff;
  border: 2px solid #d9d9d9;
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  flex: 0 0 auto;
  font-size: inherit;
  height: 26px;
  margin: 0 10px 0 0;
  transition: border 0.2s ease;
  width: 26px;
  cursor: pointer;
}
.support-topic input[type="checkbox"]:hover, .support-topic input[type="radio"]:hover {
  border: 2px solid #888;
}
.support-topic input[type="checkbox"]::after, .support-topic input[type="radio"]::after {
  background: var(--primaryColor);
  border: 3px solid #fff;
  border-radius: 2px;
  box-sizing: border-box;
  content: "";
  display: none;
  height: 100%;
  width: 100%;
}
.support-topic input[type="checkbox"]:checked::after, .support-topic input[type="radio"]:checked::after {
  display: block;
}
.support-topic input[type="checkbox"]::after, .support-topic input[type="radio"]::after {
  border-radius: 50%;
}
.support-topic .support-topic-title {
  display: flex;
  align-items: center;
  margin: 0.8em 0;
  font: 600 18px/22px var(--pageFont);
}
.support-topic .support-topic-title::before {
  transform: unset;
  background-color: var(--primaryColor);
}
.support-topic:last-child .support-topic-title {
  margin-bottom: 0;
}
.support-topic a {
  color: var(--primaryTextColor);
  text-decoration: underline;
}
.support-topic a:hover {
  text-decoration: none;
}
.dropzone .drop {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  border-width: 2px;
  border-radius: 3px;
  border-color: #d9d9d9;
  border-style: dashed;
  background-color: #fafafa;
  outline: none;
  margin: 10px 0;
  transition: border 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  color: #888;
}
.dropzone .drop.dragging {
  color: var(--primaryTextColor);
  border-color: var(--primaryColor);
}
.dropzone .preview {
  display: flex;
  flex-wrap: wrap;
  padding-top: 1em;
}
.dropzone .preview .icon-button-bar {
  margin-top: 0.5em;
}
.dropzone .preview img, .dropzone .preview canvas {
  border: 2px solid #cdcdcd;
  padding: 0.5em;
  cursor: pointer;
  max-width: 100%;
  /*height: fit-content; Does not work in Safari */
}
.dropzone .preview .remove-button {
  margin: 0;
  background: grey;
  display: block;
  width: 25px;
  height: 25px;
  -webkit-mask-image: url(/images/trash.svg);
  mask-image: url(/images/trash.svg);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: background-color 0.2s ease;
}
.dropzone .preview .remove-button:hover {
  background-color: #2f2f2f;
}
.image-preview .icon-button-bar, .dropzone .icon-button-bar {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  align-items: center;
  gap: 0.5em;
}
.image-preview .icon-button-bar .icon-button, .dropzone .icon-button-bar .icon-button {
  margin: 0;
}
.image-preview .icon-button-bar .icon-button::before, .dropzone .icon-button-bar .icon-button::before {
  background-image: url(/images/rotate-cw.svg);
  margin-right: 10px;
}
.image-preview .icon-button-bar .icon-button.left::before, .dropzone .icon-button-bar .icon-button.left::before {
  background-image: url(/images/rotate-ccw.svg);
  margin-right: 10px;
}
@media (max-width: 767px) {
  .customer-support-block {
    margin-top: 1em;
  }
}
/**
 * Feedback
 */
.feedback .content {
  margin-bottom: 0;
}
/**
 * Spinner
 */
.spinner.loading {
  padding: 50px;
  position: relative;
  text-align: center;
}
.spinner.loading:before {
  content: "";
  height: 30px;
  width: 30px;
  margin: -15px auto auto -15px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-width: 8px;
  border-style: solid;
  border-color: #2180c0 #ccc #ccc;
  border-radius: 100%;
  animation: rotation 0.7s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
/**
 * Rating
 */
.rating {
  background: url(/images/rating-sprite.svg) no-repeat 0 0;
  background-size: 5em auto;
  display: block;
  height: 1em;
  width: 5em;
}
.rating span {
  background: url(/images/rating-sprite.svg) no-repeat 0 -1em;
  background-size: 5em auto;
  display: block;
  height: 1em;
}
/**
 * Cart
 */
.cart .item {
  border-bottom: 2px solid #eeeeee;
  margin: 20px 0 20px 0;
  padding: 0 0 20px 0;
}
.cart .item .item-wrapper {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.cart .item .item-wrapper.alternative {
  display: flex;
  flex-flow: column;
}
.cart .item .item-wrapper.alternative label {
  font: 600 16px/24px "Titillium Web", sans-serif;
  margin-top: 1em;
}
.cart .item .item-thumb {
  flex: 0 0 auto;
  font-size: 4px;
  margin: 0 auto 0 5px;
  display: flex;
}
.cart .item .item-thumb.alternative {
  display: flex;
  flex-flow: column;
  width: 52em;
}
.cart .item .item-qty {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
}
.cart .item .item-qty .item-qty-field {
  background: #fff url(/images/icon-select.svg) no-repeat right center;
  background-size: 36px 36px;
  border: 2px solid #d9d9d9;
  border-radius: 3px;
  box-sizing: border-box;
  color: var(--primaryTextColor);
  display: block;
  flex: 0 0 auto;
  font: 400 14px/28px var(--pageFont);
  height: 40px;
  padding: 0 20px 0 10px;
  position: relative;
  transition: border 0.2s ease;
  width: 55px;
}
.cart .item .item-qty .item-qty-field:not(:disabled):hover {
  border-color: #888;
}
.cart .item .item-qty .item-qty-field:not(:disabled):focus {
  border-color: var(--primaryColor);
}
.cart .item .item-qty .item-qty-field:disabled {
  background: none;
  width: auto;
  height: auto;
  padding: 0 10px;
  opacity: 1;
}
.cart .item .item-qty .item-remove {
  background: transparent;
  flex: 0 0 auto;
  height: 15px;
  margin: 0 0 0 5px;
  position: relative;
  width: 15px;
}
.cart .item .item-qty .item-remove::before {
  background: #bfbfbf;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: rotate(-45deg);
  width: 100%;
  height: 2px;
}
.cart .item .item-qty .item-remove::after {
  background: #bfbfbf;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  width: 100%;
  height: 2px;
}
.cart .item .item-price {
  flex: 0 0 auto;
  flex-flow: column nowrap;
}
.cart .item .item-price .strike {
  align-self: flex-end;
  flex: 0 0 auto;
  order: 2;
}
.cart .item .item-price .sale {
  align-self: flex-end;
  flex: 0 0 auto;
  margin: 0;
  order: 1;
}
.cart .item .item-name {
  color: var(--primaryTextColor);
  flex: 0 0 100%;
  font: 700 18px/22px var(--pageFont);
  margin: 15px 0 10px 0;
}
.cart .item .item-availability {
  flex: 0 0 auto;
  margin: 0 0 15px 0;
}
.cart .item .item-edit {
  background: transparent;
  color: #888888;
  flex: 0 0 auto;
  font: 400 12px/16px var(--pageFont);
  margin: 0 0 15px 0;
  cursor: pointer;
}
.cart .item .item-upselling {
  flex: 0 0 100%;
}
.cart .item .item-upselling .item {
  border-bottom: 0;
  padding: 8px 10px 8px 15px;
}
.cart .item .item-upselling .item .item-wrapper .item-name {
  font: 700 14px/20px var(--pageFont);
  margin: 0;
}
.cart .item .item-upselling .item .item-wrapper .item-price {
  font: 400 12px/18px var(--pageFont);
  margin: 0;
}
.cart .item .item-upselling .item .item-add {
  font: 600 12px/20px var(--pageFont);
  margin: 0 0 0 15px;
  padding: 5px 0;
  width: 105px;
}
.cart .item .item-upselling .item.selected .item-add {
  padding: 3px 0;
}
.cart .buymore-button {
  background: var(--secondaryButtonBackgroundColor);
  border-radius: 3px;
  color: var(--secondaryButtonTextColor);
  cursor: pointer;
  display: flex;
  font: 600 14px/20px var(--pageFont);
  letter-spacing: 1px;
  margin: 0 0 0 auto;
  padding: 10px 15px;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
}
.cart .buymore-button:hover {
  background: var(--secondaryButtonBackgroundColorHover);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
  color: var(--secondaryButtonTextColorHover);
}
.cart .buttongrid {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.cart .buttongrid .stripe-button {
  height: 45px;
  margin-bottom: 5px;
}
.cart .buttongrid .buttongrid-1 {
  flex: 0 0 100%;
  text-align: center;
}
.cart .buttongrid .buttongrid-1 #paypal-button div {
  display: none;
}
.cart .buttongrid .buttongrid-1 #paypal-button div:first-child {
  display: inline-block;
}
.cart .buttongrid .buttongrid-1 .error-message {
  color: #bc0000;
}
.cart .buttongrid .buttongrid-seperator {
  color: var(--secondaryTextColor);
  font: 600 14px/20px var(--pageFont);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex: 0 0 100%;
  text-align: center;
  padding-bottom: 5px;
}
.cart .buttongrid .buttongrid-2 {
  flex: 0 0 100%;
}
.cart .buttongrid .button {
  background: var(--primaryButtonBackgroundColor);
  border-radius: 3px;
  color: var(--primaryButtonTextColor);
  cursor: pointer;
  display: block;
  font: 600 14px/20px var(--pageFont);
  letter-spacing: 1px;
  margin: 0 0 0 auto;
  padding: 10px 15px;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
}
.cart .buttongrid .button:hover {
  background: var(--primaryButtonBackgroundColorHover);
  color: var(--primaryButtonTextColorHover);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
}
@media (max-width: 767px) {
  .cart .item .item-thumb .thumb-numberplate {
    font-size: 3.5px;
  }
}
@media (max-width: 374px) {
  .cart .item .item-thumb .thumb-numberplate {
    font-size: 3px;
  }
}
/**
 * Availability
 */
.availability {
  font: 400 12px/16px var(--pageFont);
}
.availability::before {
  border-radius: 50%;
  content: "";
  display: block;
  float: left;
  height: 10px;
  margin: 3px 5px 3px 0;
  width: 10px;
}
.availability.red {
  color: #a52019;
}
.availability.red::before {
  background: #a52019;
}
.availability.yellow {
  color: #e5be01;
}
.availability.yellow::before {
  background: #e5be01;
}
.availability.green {
  color: #29aa5d;
}
.availability.green::before {
  background: #29aa5d;
}
/**
 * Price
 */
.price {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.price .price-text-wrapper {
  display: flex;
}
.price .sale {
  color: var(--primaryTextColor);
  flex: 0 0 auto;
  font: 700 16px/20px var(--pageFont);
  margin: 0 0 0 6px;
}
.price .strike {
  color: var(--primaryTextColor);
  flex: 0 0 auto;
  font: 400 12px/16px var(--pageFont);
  position: relative;
  margin-left: auto;
}
.price .strike::before {
  background: #bb1616;
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  top: 8px;
  transform: rotate(-10deg);
}
/**
 * Upselling
 */
.upselling .item {
  align-items: center;
  background: #eeeeee;
  border-radius: 3px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 0 0 10px 0;
  padding: 10px 15px 10px 10px;
  position: relative;
}
.upselling .item:last-child {
  margin-bottom: 0;
}
.upselling .item .item-wrapper {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-flow: row nowrap;
  justify-content: flex-start;
}
.upselling .item .item-wrapper .item-group {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column wrap;
}
.upselling .item .item-wrapper .item-thumb {
  background: #fff;
  border-radius: 2px;
  flex: 0 0 auto;
  height: 60px;
  margin: 0 20px 0 0;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: end;
  text-align: center;
}
.upselling .item .item-wrapper .item-thumb img {
  width: 80%;
}
.upselling .item .item-wrapper .item-name {
  color: var(--primaryTextColor);
  flex: 1 1 auto;
  font: 700 16px/24px var(--pageFont);
}
.upselling .item .item-wrapper .item-name .item-qty-field {
  background: transparent;
  border: 2px solid #D9D9D9;
  border-radius: 3px;
  font: 700 14px/20px var(--pageFont);
  margin: 0;
  padding: 0 4px;
  width: auto;
}
.upselling .item .item-wrapper .item-price {
  color: var(--primaryTextColor);
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  font: 400 14px/20px var(--pageFont);
}
.upselling .item .item-wrapper .item-price .item-info {
  flex: 0 0 auto;
  margin: 3px 0 3px 8px;
}
.upselling .item .item-wrapper .item-price .item-info .item-info-icon {
  cursor: pointer;
  background: #888;
  border-radius: 3px;
  color: #fff;
  font: 700 11px/14px var(--pageFont);
  height: 14px;
  text-align: center;
  width: 14px;
}
.upselling .item .item-wrapper .item-price .item-info .item-info-layer {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  color: var(--primaryTextColor);
  display: flex;
  align-items: center;
  font: 400 12px/18px var(--pageFont);
  left: 0;
  margin: 20px 10px 0 80px;
  padding: 0px 15px;
  position: absolute;
  right: 0;
  z-index: 5000;
}
.upselling .item .item-wrapper .item-price .item-info .item-info-layer img {
  height: 80px;
  margin: 10px 10px 10px 0;
}
.upselling .item .item-wrapper .item-price .item-info .item-info-layer .item-info-layer-content {
  margin: 10px 0;
}
.upselling .item .item-wrapper .item-price .item-info .item-info-layer-wrapper {
  display: none;
}
.upselling .item .item-wrapper .item-price .item-info .item-info-layer-wrapper::before {
  background: #fff;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  content: "";
  display: block;
  height: 14px;
  margin: 12px 0 0 0;
  position: absolute;
  width: 14px;
  z-index: 5500;
  transform: rotate(-45deg);
}
.upselling .item .item-wrapper .item-price .item-info .item-info-layer-wrapper::after {
  background: #fff;
  content: "";
  display: block;
  height: 10px;
  margin: 20px 0 0 -10px;
  position: absolute;
  width: 30px;
  z-index: 5500;
}
.upselling .item .item-add {
  background: var(--secondaryButtonBackgroundColor);
  border-radius: 3px;
  color: var(--secondaryButtonTextColor);
  cursor: pointer;
  display: inline-block;
  flex: 0 0 auto;
  font: 600 14px/20px var(--pageFont);
  letter-spacing: 1px;
  margin: 0 0 0 15px;
  padding: 10px 0;
  text-align: center;
  width: 125px;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.upselling .item .item-add:hover {
  background: var(--secondaryButtonBackgroundColorHover);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  color: var(--secondaryButtonTextColorHover);
}
.upselling .item.selected .item-add {
  color: #888;
  background: #eee;
  border: 2px solid #888;
  padding: 8px 0;
}
@media (max-width: 767px) {
  .upselling .item {
    padding: 6px 10px 6px 6px;
  }
  .upselling .item .item-wrapper {
    margin: 0;
  }
  .upselling .item .item-wrapper .item-thumb {
    height: 42px;
    margin: 0 10px 0 0;
    width: 42px;
  }
  .upselling .item .item-wrapper .item-name {
    font: 700 14px/20px var(--pageFont);
  }
  .upselling .item .item-wrapper .item-price {
    font: 400 12px/18px var(--pageFont);
    margin: 0;
  }
  .upselling .item .item-wrapper .item-price .item-info {
    margin: 2px 0 2px 6px;
  }
  .upselling .item .item-wrapper .item-price .item-info .item-info-layer {
    margin: 20px 6px 0 54px;
  }
  .upselling .item .item-add {
    font: 600 12px/20px var(--pageFont);
    margin: 0 0 0 15px;
    padding: 5px 0;
    width: 105px;
  }
  .form-upselling .item.selected .item-wrapper .item-name .item-qty-field {
    border-color: #c6c6c6;
  }
  .form-upselling .item.selected .item-add {
    background: #e1e1e1;
    padding: 3px 0;
  }
}
/**
 * Payment
 */
.payment {
  margin: -10px 0 -10px 0;
}
.payment .item {
  align-items: center;
  border-bottom: 2px solid #eeeeee;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 10px 0;
}
.payment .item .payment-icon {
  height: 32px;
  cursor: pointer;
}
.payment .item .item-name {
  align-items: center;
  color: var(--primaryTextColor);
  display: flex;
  font: 600 14px/28px var(--pageFont);
  flex: 1 1 auto;
  flex-flow: row nowrap;
}
.payment .item .item-name input[type="radio"] {
  background: #fff;
  border: 2px solid #d9d9d9;
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  flex: 0 0 auto;
  font-size: inherit;
  height: 26px;
  margin: 0 8px 0 0;
  transition: border 0.2s ease;
  width: 26px;
}
.payment .item .item-name input[type="radio"]:hover {
  border: 2px solid #888;
}
.payment .item .item-name input[type="radio"]::after {
  background: var(--primaryColor);
  border: 3px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  display: none;
  height: 100%;
  width: 100%;
}
.payment .item .item-name input[type="radio"]:checked::after {
  display: block;
}
.payment .item .item-name label {
  flex: 1 1 auto;
}
.payment .item .item-logo {
  background: #eeeeee;
  border-radius: 2px;
  flex: 0 0 80px;
  height: 32px;
  width: 80px;
}
.payment .item .item-description {
  color: var(--secondaryTextColor);
  display: none;
  flex: 1 0 100%;
  font: 400 12px/18px var(--pageFont);
  padding: 10px 0 10px 34px;
}
.payment .item .item-description .credit-card-description {
  box-shadow: none;
  border: 1px solid gray;
  width: 100%;
  border-radius: 4px;
  height: 44px;
  padding: 12px;
}
.payment .item.active .item-description {
  display: block;
}
.payment .item-disabled {
  pointer-events: none;
}
.payment .item-disabled .item-name {
  color: #D9D9D9;
}
.payment .item-disabled .item-name input[type="radio"]:hover {
  border: 2px solid #D9D9D9;
}
.payment .item-disabled .payment-icon {
  opacity: 0.3;
}
@media (min-width: 641px) {
  .payment .item:last-child {
    border-bottom: 0;
  }
}
/**
 * Carbon
 */
.carbon-pattern:not(.placeholder) {
  background-image: url(/images/carbon-pattern.png);
  background-size: 0.125em;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  text-fill-color: transparent;
}
.carbon-info {
  height: 27em;
  margin: 0 auto 1.75em auto;
  position: relative;
  width: 27em;
}
.carbon-info::before {
  background: var(--primaryColor);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  content: "";
  display: block;
  height: 5em;
  left: 50%;
  position: absolute;
  bottom: -4.5em;
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  width: 5em;
}
.carbon-info::after {
  background-image: url(/images/carbon-pattern.png);
  background-size: 10px;
  border: 2px solid var(--primaryColor);
  border-radius: 50%;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  content: "";
  display: block;
  height: 27em;
  position: absolute;
  width: 27em;
}
/**
 * Invoice
 */
.block-invoices {
  padding-bottom: 20px;
}
.invoice .invoice-wrapper {
  border-bottom: 2px solid #eeeeee;
  margin: 20px 0 20px 0;
  padding: 0 0 20px 0;
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.invoice .invoice-wrapper:last-child {
  border-bottom: none;
  padding: 0;
}
.invoice .invoice-wrapper .invoice-name {
  color: #000;
  flex: 0 0 40%;
  font: 700 18px/22px var(--pageFont);
  margin: 15px 0 10px 0;
}
.invoice .invoice-wrapper .invoice-status {
  color: #cdcdcd;
  font: 600 14px/16px var(--pageFont);
  margin: 15px 0 10px 0;
  flex: auto;
}
.invoice .invoice-wrapper .invoice-form {
  background: #efefef;
  margin: 10px 0;
  border: 1px solid #cdcdcd;
}
.invoice .invoice-wrapper .invoice-form form {
  margin: 15px 0 10px 0;
}
.invoice .invoice-wrapper .invoice-form form .block-title {
  margin: 0 0 30px 15px;
  font: 700 18px/22px var(--pageFont);
}
.delivery-actions, .invoice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-left: auto;
}
.delivery-actions button, .invoice-actions button {
  background: var(--primaryButtonBackgroundColor);
  border-radius: 3px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  color: var(--primaryButtonTextColor);
  cursor: pointer;
  display: inline-block;
  flex: 0 0 auto;
  font: 600 14px/16px var(--pageFont);
  letter-spacing: 1px;
  padding: 12px 15px;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.delivery-actions button:not(:disabled):hover, .invoice-actions button:not(:disabled):hover {
  background: var(--primaryButtonBackgroundColorHover);
  color: var(--primaryButtonTextColorHover);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
}
.delivery-actions button:disabled, .invoice-actions button:disabled {
  background-color: #808080;
}
.delivery-actions button.secondary, .invoice-actions button.secondary {
  background: var(--secondaryButtonBackgroundColor);
  color: var(--secondaryButtonTextColor);
}
.delivery-actions button.secondary:hover, .invoice-actions button.secondary:hover {
  background: var(--secondaryButtonBackgroundColorHover);
  color: var(--secondaryButtonTextColorHover);
}
.delivery-actions .hint, .invoice-actions .hint {
  color: #a1a1a1;
  font: 600 14px/16px "Titillium Web", sans-serif;
  margin-top: 0.25em;
  min-width: 8em;
  flex: auto;
  max-width: 170px;
}
@media (max-width: 756px) {
  .invoice .invoice-wrapper .invoice-name {
    flex: 0 0 100%;
  }
  .invoice .invoice-wrapper .invoice-actions {
    width: 100%;
  }
  .invoice .invoice-wrapper .invoice-actions .button-wrapper {
    width: 94vw;
    position: relative;
    margin-left: -48vw;
    left: 52%;
  }
  .invoice .invoice-wrapper .invoice-actions .button-wrapper button {
    width: 100%;
  }
}
/**
 * Delivery
 */
.block-deliveries {
  padding-bottom: 20px;
}
.delivery .delivery-wrapper {
  border-bottom: 2px solid #eeeeee;
  margin: 20px 0 20px 0;
  padding: 0 0 0.5em 0;
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.delivery .delivery-wrapper:last-child {
  border-bottom: none;
  padding: 0;
}
.delivery .delivery-wrapper .delivery-info {
  display: block;
  margin: 1em 1em 1em 0;
}
.delivery .delivery-wrapper .delivery-name {
  color: #000;
  font: 700 18px/22px var(--pageFont);
}
.delivery .delivery-wrapper .delivery-status {
  color: #a1a1a1;
  font: 600 14px/16px var(--pageFont);
  margin-top: 0.25em;
  min-width: 8em;
  flex: auto;
}
.delivery .delivery-wrapper .delivery-form {
  background: #efefef;
  margin: 10px 0;
  border: 1px solid #cdcdcd;
}
.delivery .delivery-wrapper .delivery-form form {
  margin: 15px 0 10px 0;
}
.delivery .delivery-wrapper .delivery-form form .block-title {
  margin: 0 0 30px 15px;
  font: 700 18px/22px var(--pageFont);
}
.delivery .delivery-wrapper .delivery-items {
  flex-flow: row wrap;
  display: flex;
  width: 100%;
  background: #efefef;
  margin: 10px 0;
  border: 1px solid #cdcdcd;
}
.delivery .delivery-wrapper .delivery-items .delivery-item-wrapper {
  border-bottom: 2px solid #eeeeee;
  margin: 10px;
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}
.delivery .delivery-wrapper .delivery-items .delivery-item-wrapper .delivery-item-name {
  flex: 0 0 70%;
}
.delivery .delivery-wrapper .delivery-items .delivery-item-wrapper .delivery-license-plate {
  width: 100%;
}
.delivery .delivery-wrapper .delivery-items .delivery-item-wrapper .delivery-numberplate-wrapper {
  width: 100%;
}
.delivery .delivery-wrapper .delivery-items .delivery-item-wrapper .delivery-numberplate-wrapper .contentpage-buttons {
  margin-top: 15px;
}
.delivery .delivery-wrapper .delivery-items .delivery-item-wrapper .delivery-numberplate-wrapper .contentpage-buttons button {
  margin-left: auto;
}
.delivery .delivery-wrapper .delivery-items .numberplate {
  font-size: min(11px, 1.3vw);
}
.delivery .delivery-wrapper .delivery-error {
  color: #bb1616;
  width: 100%;
  text-align: center;
}
@media (max-width: 551px) {
  .delivery .delivery-wrapper .delivery-items .delivery-item-wrapper .delivery-item-name {
    flex: 0 0 100%;
  }
  .delivery .delivery-wrapper .delivery-items .delivery-item-wrapper .delivery-numberplate-wrapper .contentpage-buttons button {
    margin-left: unset;
  }
  .delivery .delivery-wrapper .delivery-actions {
    width: 100%;
  }
  .delivery .delivery-wrapper .delivery-actions .hint {
    max-width: unset;
  }
  .delivery .delivery-wrapper .delivery-actions .button-wrapper {
    width: 94vw;
    position: relative;
    margin-left: -48vw;
    left: 52%;
  }
  .delivery .delivery-wrapper .delivery-actions .button-wrapper button {
    width: 100%;
  }
  .delivery .delivery-wrapper .revocation-list {
    padding-top: 20px;
  }
}
.disclaimer {
  border: solid 1px #D65151;
  padding: 12px;
  margin-bottom: 20px;
}
.disclaimer p {
  margin: 0px;
}
.disclaimer span {
  font-weight: bold;
}
/**
 * Support Center Animation
 */
.delivery-loading {
  width: 100%;
  padding: 2em 0;
}
.delivery-loading .loading-truck {
  width: 12em;
  position: relative;
  animation: moving-truck 6s ease-in infinite;
}
.delivery-loading .shake {
  animation: shake 0.2s ease-in-out infinite alternate;
}
.delivery-loading .speedline {
  stroke-dasharray: 22;
  animation: line 2s ease-in-out infinite;
  animation-fill-mode: both;
}
.delivery-loading .speedline:nth-child(1) {
  animation-delay: 0.4s;
}
.delivery-loading .speedline:nth-child(2) {
  animation-delay: 0.8s;
}
.delivery-loading .speedline:nth-child(3) {
  animation-delay: 1.2s;
}
@keyframes line {
  0% {
    stroke-dashoffset: 22;
  }
  25% {
    stroke-dashoffset: 22;
  }
  50% {
    stroke-dashoffset: 0;
  }
  51% {
    stroke-dashoffset: 0;
  }
  80% {
    stroke-dashoffset: -22;
  }
  100% {
    stroke-dashoffset: -22;
  }
}
@keyframes shake {
  0% {
    transform: translateY(-1%);
  }
  100% {
    transform: translateY(1%);
  }
}
@keyframes moving-truck {
  0% {
    left: -40%;
  }
  95% {
    left: 110%;
  }
  100% {
    left: 110%;
  }
}
/**
 Voucher
 */
.voucher-field {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
}
.voucher-field .form-field {
  flex-basis: unset;
}
.voucher-field .form-field.voucher-input {
  flex-grow: 1;
}
.voucher-field .form-field.voucher-input input.success {
  border-color: #29aa5d;
}
.voucher-field .form-field.voucher-input input.error {
  border-color: #bc0000;
}
.voucher-field .voucher-button {
  display: flex;
  margin-left: auto;
}
.voucher-field .voucher-button button {
  margin-top: auto;
}
.voucher-field .voucher-button button.loading {
  background-color: #bdbdbd;
  opacity: 0.2;
}
.voucher-field .voucher-button button.error {
  position: relative;
  top: -20px;
}
.voucher-form {
  margin-top: 2em;
}
#voucher-activated-label label {
  display: flex;
  flex-wrap: wrap;
}
#voucher-activated-label span {
  margin-left: 1em;
  color: #29aa5d;
}
#voucher-activated-label a {
  flex-basis: 100%;
  margin-top: 0.25em;
}
@media (min-width: 768px) {
  #voucher-activated-label a {
    flex-basis: unset;
    margin-left: auto;
  }
}
/**
 * Utility Classes
 */
@media (max-width: 767px) {
  .mobile-hidden {
    display: none;
  }
}
@media (min-width: 768px) {
  .mobile-visible {
    display: none;
  }
}
:root {
  --primaryButtonBoxShadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.15);
  --primaryButtonBoxShadowHover: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.05);
  --primaryBlockTitleColor: var(--secondaryTextColor);
  --primaryBlockTitleFont: 600 1.25rem/1.4rem var(--pageFont);
  --primaryBlockSubTitleColor: var(--primaryColor);
  --primaryBlockSubTitleFont: 600 1rem/1.17rem var(--pageFont);
  --primaryBlockSubTitleSmallFont: 400 0.75rem/1.4rem var(--pageFont);
  --primaryBlockTextColor: var(--primaryTextColor);
  --primaryBlockTextFont: 400 1rem/1.17rem var(--pageFont);
  --pagePadding: 1.25rem;
  --headerMaxWidth: calc(var(--pageMaxWidth) + 2 * var(--pagePadding) + 2 * 3.75rem);
  --formFieldHeight: 2.3125rem;
  --formFieldFont: 400 0.875rem/1.2rem var(--pageFont);
  --formFieldUnitBackground: #D9D9D9;
  --formFieldBorder: 1px solid var(--formFieldUnitBackground);
  --formFieldBorderRadius: 2px;
  --formFieldPaddingInline: 0.5rem;
  --formFieldFillColor: color-mix(in srgb, var(--primaryColor) 12%, transparent);
  --formFieldLabelFont: 400 0.6875rem/0.875rem var(--pageFont);
  --formFieldLabelColor: var(--primaryTextColor);
  --formFieldPlaceholderFont: var(--formFieldFont);
  --formFieldErrorColor: #E31C1F;
  --tooltipWidth: 28.125rem;
  --tooltipLineClamp: 3;
  --tooltipBorder: 2px solid var(--formFieldUnitBackground);
  --tooltipTitleFont: 600 0.875rem/1rem var(--pageFont);
  --tooltipTextFont: 400 0.82rem/1.225rem var(--pageFont);
}
a, a:hover, a:visited {
  color: inherit;
}
/**
 * Header
 */
.header {
  background: var(--pageHeaderBackground);
  transition: padding 0.2s ease, transform 0.2s ease;
  border-bottom: 0.625rem solid var(--primaryTextColor);
}
.header .header-teaser {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #000;
  background: var(--primaryTextColor);
  text-transform: uppercase;
  color: #fff;
  font-size: clamp(0.3125rem, 1.3vw, 0.875rem);
  line-height: clamp(0.375rem, 1.1rem, 1.0625rem);
  letter-spacing: clamp(0.35px, 0.1em, 0.1rem);
  gap: clamp(0.75rem, 1.4em, 1.25rem);
  padding-top: clamp(0.3125rem, 1em, 0.5rem);
  padding-bottom: clamp(0.3125rem, 1em, 0.5rem);
  position: fixed;
  z-index: 1000;
  width: 100%;
  top: 0;
}
.header .header-teaser span {
  text-align: center;
}
.header .header-teaser span::before {
  content: "";
  background: url(/images/icon-check-white-round.svg) no-repeat 0 0;
  width: clamp(9px, 1em, 0.9375rem);
  height: clamp(9px, 1em, 0.9375rem);
  background-size: cover;
  float: left;
  flex-shrink: 0;
  margin-right: clamp(0.1875rem, 0.4em, 0.375rem);
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: var(--primaryColor);
}
.header .header-wrapper {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--headerMaxWidth);
  height: clamp(2.875rem, 6vw, 5rem);
  padding-inline: 0.75rem;
  margin-top: 2.1875rem;
}
.header .header-wrapper .header-logo-wrapper {
  height: 95%;
  align-content: center;
}
.header .header-wrapper .header-logo-wrapper .header-logo {
  flex: 0 0 auto;
  text-decoration: none;
  transition: height 0.2s ease;
}
.header .header-wrapper .header-logo-wrapper .header-logo img {
  height: 100%;
  width: auto;
  transition: height 0.2s ease;
}
.header .header-wrapper .header-features-wrapper {
  margin-left: auto;
}
.header .header-wrapper .header-features-wrapper .header-features {
  display: none;
  margin-left: auto;
  gap: clamp(0.5625rem, 1.3vw, 0.75rem);
}
.header .header-wrapper .header-features-wrapper .header-features li {
  color: var(--primaryTextColor);
  font-size: clamp(0.4375rem, 1.2vw, 0.9375rem);
  line-height: clamp(0.625rem, 1.1rem, 1.1875rem);
  letter-spacing: clamp(0.025rem, 0.5vw, 0.05rem);
  font-weight: 700;
  text-transform: capitalize;
}
@media (min-width: 40rem) {
  .header .header-wrapper .header-features-wrapper .header-features {
    display: flex;
  }
}
.header .header-wrapper .header-button {
  display: none;
  margin-left: 3rem;
  border-radius: 5px;
  background: var(--primaryButtonBackgroundColor);
  box-shadow: var(--primaryButtonBoxShadow);
  color: var(--primaryButtonTextColor);
  font-size: clamp(0.4375rem, 1.2vw, 1rem);
  line-height: clamp(0.625rem, 1.1rem, 1.1875rem);
  letter-spacing: clamp(0.025rem, 0.5vw, 0.05rem);
  font-weight: 700;
  text-transform: uppercase;
  width: min(25vw, 310px);
  height: min(3vw, 40px);
  padding-inline: clamp(0.3125rem, 1.5vw, 1.1875rem);
  cursor: pointer;
}
@media (min-width: 40rem) {
  .header .header-wrapper .header-button {
    display: initial;
  }
}
.header .header-wrapper .header-button:hover {
  background: var(--primaryButtonBackgroundColorHover);
  color: var(--primaryButtonTextColorHover);
  box-shadow: var(--primaryButtonBoxShadowHover);
}
.header .header-wrapper a {
  text-decoration: inherit;
}
@media (max-width: 40rem) {
  .header .header-teaser {
    min-height: 2rem;
    font-size: 0.75rem;
  }
  .header .header-teaser span {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
  }
  .header .header-teaser span::before {
    position: absolute;
    top: 1px;
    transform: translateX(calc(-50% - 12px));
  }
  .header .header-teaser span:nth-of-type(1) {
    animation: fade-text-in 15s 0s forwards infinite;
  }
  .header .header-teaser span:nth-of-type(2) {
    animation: fade-text-in 15s 5s forwards infinite;
  }
  .header .header-teaser span:nth-of-type(3) {
    animation: fade-text-in 15s 10s forwards infinite;
  }
  @keyframes fade-text-in {
    0% {
      opacity: 0;
    }
    2% {
      opacity: 1;
    }
    28% {
      opacity: 1;
    }
    36%, 100% {
      opacity: 0;
    }
  }
}
.block-headline {
  text-transform: uppercase;
  border-bottom: 1px solid #dbdbdb;
}
.block-headline .headline-title {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(0.625rem, 0.4em, 1rem);
  font-size: clamp(1.5625rem, 3.4vw, 2.5rem);
  line-height: clamp(2.125rem, 1.2em, 3.5rem);
  letter-spacing: clamp(0.09375rem, 0.1em, 0.125rem);
  padding-top: clamp(2.1875rem, 6.5vw, 4.8125rem);
}
.block-headline .headline-title .headline-title-bold {
  font-weight: 700;
}
.block-headline .headline-title .headline-title-normal {
  font-weight: 300;
}
.block-headline .headline-claim {
  font-weight: 600;
  color: var(--primaryTextColor);
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: clamp(1.9375rem, 1.1rem, 2.25rem);
  letter-spacing: clamp(0.06875rem, 0.1em, 0.1rem);
  padding-top: 1.25rem;
  padding-bottom: clamp(1.25rem, 1.1em, 2.3125rem);
}
@media (min-width: 40rem) {
  .block-headline .headline-claim {
    padding-top: 0.625rem;
  }
}
/**
 * Landingpage
 */
.landingpage {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(color-mix(in srgb, var(--primaryColor) 10%, transparent) 30%, #ffffff) no-repeat;
}
.landingpage .main .main-wrapper {
  padding: 0 1.25rem;
  margin: 0 auto;
  max-width: var(--pageMaxWidth);
  display: flex;
  flex-direction: column;
}
/**
 * Landingpage - certificate select
 */
.block-certificate-select {
  display: flex;
  flex-direction: column;
  padding-block: clamp(1.25rem, 3.5vw, 2.5rem);
  row-gap: clamp(1.25rem, 2.6vw, 2rem);
}
.block-certificate-select .certificate-title {
  font-size: clamp(1.125rem, 1.7vw, 1.25rem);
  line-height: 1.5625rem;
  letter-spacing: clamp(0.05625rem, 1px, 0.0625rem);
  font-weight: 600;
  color: var(--primaryTextColor);
  text-transform: uppercase;
}
.block-certificate-select .certificate-select {
  display: flex;
  flex-direction: column;
  column-gap: 1.25rem;
  row-gap: 0.625rem;
  align-items: center;
}
.block-certificate-select .certificate-select button {
  border-radius: 5px;
  background: var(--primaryButtonBackgroundColor);
  box-shadow: var(--primaryButtonBoxShadow);
  color: var(--primaryButtonTextColor);
  font-size: clamp(0.75rem, 1.2vw, 1rem);
  line-height: clamp(0.625rem, 1.1rem, 1.1875rem);
  letter-spacing: clamp(0.025rem, 0.5vw, 0.05rem);
  font-weight: 700;
  width: 100%;
  height: 2.5rem;
  text-transform: uppercase;
  padding-inline: clamp(1.25rem, 1.4em, 1.875rem);
  cursor: pointer;
}
.block-certificate-select .certificate-select button:hover {
  background: var(--primaryButtonBackgroundColorHover);
  color: var(--primaryButtonTextColorHover);
  box-shadow: var(--primaryButtonBoxShadowHover);
}
@media (min-width: 40rem) {
  .block-certificate-select .certificate-select {
    flex-direction: row;
  }
  .block-certificate-select .certificate-select button {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    width: inherit;
  }
}
/**
 * Landingpage - certificate scale
 */
.block-certificate-scale {
  display: none;
}
.block-certificate-scale .certificate-scale_svg__stroke {
  stroke: var(--primaryColor);
}
.block-certificate-scale .certificate-scale_svg__fill {
  fill: var(--primaryColor);
}
@media (min-width: 40rem) {
  .block-certificate-scale {
    display: block;
    margin: 0 auto;
    width: clamp(37.5rem, 60vw, 44.625rem);
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0, 0, 0, 0)));
    mask-image: linear-gradient(to bottom, black 80%, rgba(0, 0, 0, 0));
    padding-block: 2.5rem;
  }
}
/**
 * Landingpage - befenit list
 */
.block-benefit {
  display: flex;
  flex-direction: column;
  margin-top: clamp(2.5rem, 6.7vw, 5rem);
  column-gap: 2rem;
  row-gap: 2.5rem;
}
.block-benefit .block-title {
  color: var(--primaryTextColor);
  font-family: var(--pageFont);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-style: normal;
  font-weight: 700;
  line-height: clamp(1.54125rem, 0.6em, 2.101875rem);
  letter-spacing: clamp(0.06875rem, 0.5em, 0.09375rem);
  text-transform: uppercase;
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  font-weight: 400;
  line-height: clamp(1.54125rem, 3.5vw, 2.101875rem);
  padding-block: 0.625rem 1.25rem;
}
.block-benefit .block-title strong {
  font-weight: 700;
}
.block-benefit .block-sub-title {
  color: var(--primaryTextColor);
  font-family: var(--pageFont);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-style: normal;
  font-weight: 500;
  line-height: clamp(1.125rem, 0.6em, 1.40125rem);
  letter-spacing: clamp(0.05rem, 0.5em, 0.0625rem);
  text-transform: uppercase;
  padding-top: 0;
  font-size: clamp(1rem, 1.9vw, 1.25rem);
}
.block-benefit .benefit-teaser {
  color: var(--primaryTextColor);
  font-family: var(--pageFont);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.40875rem;
  letter-spacing: 0.02rem;
}
.block-benefit .benefit-item-wrapper {
  display: flex;
  flex-direction: column;
}
.block-benefit .benefit-item-wrapper .benefit-item {
  background: var(--pageFooterBackground);
  padding: 1.25rem;
  margin-bottom: clamp(0.625rem, 1.6vw, 1.25rem);
}
.block-benefit .benefit-item-wrapper .benefit-item-title {
  color: var(--primaryTextColor);
  font-family: var(--pageFont);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-style: normal;
  font-weight: 500;
  line-height: clamp(1.125rem, 0.6em, 1.40125rem);
  letter-spacing: clamp(0.05rem, 0.5em, 0.0625rem);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1rem, 1.9vw, 1.125rem);
  padding-bottom: 0.625rem;
}
.block-benefit .benefit-item-wrapper .benefit-item:nth-of-type(n+3) {
  display: none;
}
.block-benefit .benefit-item-wrapper .benefit-item-content {
  color: var(--primaryTextColor);
  font-family: var(--pageFont);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.40875rem;
  letter-spacing: 0.02rem;
}
.block-benefit .benefit-item-wrapper label {
  border-radius: 5px;
  background: var(--primaryButtonBackgroundColor);
  box-shadow: var(--primaryButtonBoxShadow);
  color: var(--primaryButtonTextColor);
  font-size: clamp(0.75rem, 1.2vw, 1rem);
  line-height: clamp(0.625rem, 1.1rem, 1.1875rem);
  letter-spacing: clamp(0.025rem, 0.5vw, 0.05rem);
  font-weight: 700;
  width: 100%;
  height: 2.5rem;
  text-transform: uppercase;
  padding-inline: clamp(1.25rem, 1.4em, 1.875rem);
  cursor: pointer;
  align-content: center;
  text-align: center;
  position: relative;
}
.block-benefit .benefit-item-wrapper label:hover {
  background: var(--primaryButtonBackgroundColorHover);
  color: var(--primaryButtonTextColorHover);
  box-shadow: var(--primaryButtonBoxShadowHover);
}
.block-benefit .benefit-item-wrapper label span.toggle-close {
  display: none;
}
.block-benefit .benefit-item-wrapper label::before {
  content: "";
  mask: url(/images/icon-expand.svg);
  -webkit-mask: url(/images/icon-expand.svg);
  width: 1.5rem;
  height: 1.5rem;
  right: 1rem;
  top: 0.5rem;
  background-color: white;
  position: absolute;
}
.block-benefit .benefit-item-toggle:checked ~ .benefit-item {
  display: initial;
}
.block-benefit .benefit-item-toggle:checked ~ label span.toggle-close {
  display: initial;
}
.block-benefit .benefit-item-toggle:checked ~ label span.toggle-open {
  display: none;
}
.block-benefit .benefit-item-toggle:checked ~ label::before {
  transform: rotate(180deg);
}
@media (min-width: 40rem) {
  .block-benefit {
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
  }
  .block-benefit .benefit-teaser {
    flex: 1 1 43%;
  }
  .block-benefit .benefit-item-wrapper {
    flex: 1 1 51%;
  }
}
/**
 * Landingpage - price list
 */
.block-pricing {
  text-align: center;
  padding-block: clamp(3.125rem, 6vw, 5rem);
}
.block-pricing .block-title {
  color: var(--primaryTextColor);
  font-family: var(--pageFont);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-style: normal;
  font-weight: 700;
  line-height: clamp(1.54125rem, 0.6em, 2.101875rem);
  letter-spacing: clamp(0.06875rem, 0.5em, 0.09375rem);
  text-transform: uppercase;
  padding-top: 1.125rem;
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
}
.block-pricing .block-sub-title {
  color: var(--primaryTextColor);
  font-family: var(--pageFont);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-style: normal;
  font-weight: 500;
  line-height: clamp(1.125rem, 0.6em, 1.40125rem);
  letter-spacing: clamp(0.05rem, 0.5em, 0.0625rem);
  text-transform: uppercase;
  padding-top: 1.375rem;
  font-size: clamp(1rem, 1.9vw, 1.25rem);
}
.block-pricing .price-tags-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  column-gap: clamp(0.625rem, 3.3vw, 2.5rem);
  padding-top: clamp(1.875rem, 4.2vw, 3.125rem);
}
.block-pricing .price-tags-wrapper::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar for Chrome, Safari and Opera */
}
@media (min-width: 40rem) {
  .block-pricing .price-tags-wrapper {
    grid-auto-columns: 48%;
  }
}
@media (min-width: 58rem) {
  .block-pricing .price-tags-wrapper.fr3 {
    grid-auto-columns: 30%;
    justify-content: space-around;
  }
}
.block-pricing .price-tags-wrapper .price-tag {
  margin: 0 auto;
  width: 100%;
  scroll-snap-align: start;
  display: flex;
  flex-flow: column;
  row-gap: 0.625rem;
}
.block-pricing .price-tags-wrapper .price-tag .price-tag-recommend {
  height: 2.375rem;
  pointer-events: none;
}
.block-pricing .price-tags-wrapper .price-tag .price-tag-recommend.enabled {
  border-radius: 5px;
  background: var(--primaryButtonBackgroundColor);
  box-shadow: var(--primaryButtonBoxShadow);
  color: var(--primaryButtonTextColor);
  font-size: clamp(0.75rem, 1.2vw, 1rem);
  line-height: clamp(0.625rem, 1.1rem, 1.1875rem);
  letter-spacing: clamp(0.025rem, 0.5vw, 0.05rem);
  font-weight: 700;
  width: 100%;
  height: 2.5rem;
  text-transform: uppercase;
  padding-inline: clamp(1.25rem, 1.4em, 1.875rem);
  font-size: clamp(0.75rem, 1.2vw, 1rem);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: initial;
}
.block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper {
  text-align: left;
  background: var(--pageFooterBackground);
  border-radius: 0.3125rem;
  padding: 60px 1.125rem 1.25rem 1.25rem;
}
.block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper img {
  display: none;
}
.block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper .price-tag-features {
  padding-block: 1.875rem;
}
.block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper .price-tag-features li {
  color: var(--primaryTextColor);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 117.193%;
  letter-spacing: 0.1rem;
  padding-block: 0.375rem;
  display: flex;
  column-gap: 0.625rem;
}
.block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper .price-tag-features li::before {
  content: "";
  background: url(/images/icon-check-white-round.svg) no-repeat 0 0;
  width: 0.9375rem;
  height: 0.9375rem;
  float: left;
  border-radius: 50%;
  background-color: var(--primaryColor);
  flex: 0 0 auto;
}
.block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper .price-tag-features li.icon-cross::before {
  content: "";
  background: url(/images/icon-cross.svg) no-repeat 0 0;
}
.block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper button {
  border-radius: 5px;
  background: var(--primaryButtonBackgroundColor);
  box-shadow: var(--primaryButtonBoxShadow);
  color: var(--primaryButtonTextColor);
  font-size: clamp(0.75rem, 1.2vw, 1rem);
  line-height: clamp(0.625rem, 1.1rem, 1.1875rem);
  letter-spacing: clamp(0.025rem, 0.5vw, 0.05rem);
  font-weight: 700;
  width: 100%;
  height: 2.5rem;
  text-transform: uppercase;
  padding-inline: clamp(1.25rem, 1.4em, 1.875rem);
  cursor: pointer;
}
.block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper button:hover {
  background: var(--primaryButtonBackgroundColorHover);
  color: var(--primaryButtonTextColorHover);
  box-shadow: var(--primaryButtonBoxShadowHover);
}
@media (min-width: 40rem) {
  .block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper {
    padding: 2rem 1.75rem 1.125rem 1.875rem;
  }
  .block-pricing .price-tags-wrapper .price-tag .price-tag-wrapper img {
    display: block;
  }
}
.block-pricing .price-tags-nav {
  height: 1.25rem;
  width: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 1em;
  padding-top: 1.25rem;
}
.block-pricing .price-tags-nav .price-tag-nav {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  height: 0.5rem;
  width: 0.5rem;
}
.block-pricing .price-tags-nav .price-tag-nav.active {
  background-color: rgba(0, 0, 0, 0.75);
}
.block-pricing .price-tags-nav:has(> li:not(.active)) {
  display: flex;
}
/**
 * Landingpage - footer
 */
.footer {
  margin-top: auto;
  padding-top: clamp(0.625rem, 2.5vw, 1.875rem);
  padding-bottom: 3.125rem;
}
.footer .footer-wrapper .footer-info .footer-info-title {
  color: var(--primaryTextColor);
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.125rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  padding-block: 1.25rem 0.3125rem;
}
.footer .footer-wrapper .footer-info .footer-links {
  column-gap: 0;
  column-width: 6.875rem;
}
.footer .footer-wrapper .footer-info .footer-icons span {
  box-shadow: unset;
  margin: 0 0.625rem 0.625rem 0;
}
.footer .footer-wrapper .customer-service-button {
  border-radius: 5px;
  background: var(--primaryButtonBackgroundColor);
  box-shadow: var(--primaryButtonBoxShadow);
  color: var(--primaryButtonTextColor);
  font-size: clamp(0.75rem, 1.2vw, 1rem);
  line-height: clamp(0.625rem, 1.1rem, 1.1875rem);
  letter-spacing: clamp(0.025rem, 0.5vw, 0.05rem);
  font-weight: 700;
  width: 100%;
  height: 2.5rem;
  text-transform: uppercase;
  padding-inline: clamp(1.25rem, 1.4em, 1.875rem);
  cursor: pointer;
  background: var(--secondaryButtonBackgroundColor);
  color: var(--secondaryButtonTextColor);
  width: fit-content;
}
.footer .footer-wrapper .customer-service-button:hover {
  background: var(--secondaryButtonBackgroundColorHover);
  color: var(--secondaryButtonTextColorHover);
  box-shadow: var(--primaryButtonBoxShadowHover);
}
/**
 * Contentpage
 */
.contentpage .block {
  margin: 0;
}
.contentpage .level1 {
  list-style-type: none;
  counter-reset: level1;
}
.contentpage .level1 li::before {
  content: counter(level1) ".";
  counter-increment: level1;
  padding-right: 0.3125rem;
}
.contentpage .level1 .level2 {
  list-style-type: none;
  counter-reset: level2;
}
.contentpage .level1 .level2 li::before {
  content: counter(level1) "." counter(level2,lower-latin) ".";
  counter-increment: level2;
  padding-right: 0.3125rem;
}