@import "~@highdigital/sharedt/styles/helpers/breakpoints";
@import "~@highdigital/vuet/styles";

.medium,
h1 div,
h2 div,
h3 div,
h4 div {
  font-family: var(--font-family--secondary);
}
#home {
  padding-top: 56px;
  @include for-desktop {
    padding-top: 124px;
  }
}
.regular {
  font-family: var(--font-family--primary);
}
.fullwidth-bg {
  background: #cc0000;
  width: 100%;
}
:root {
  --map-height:
}
.map-wrapper {
  width: 100%;
  z-index: -1;
  position: relative;
  margin-top: -200px;
  background-color: var(--c-light);
  @include for-desktop {
    position: absolute;
    top: 0;
    margin-top: 0;
  }
}
.map-section {
  z-index: 1;
  background-color: var(--c-light);
  @include for-desktop {
    height: calc((1410 / 2100) * 85vw);
    background-color: transparent;
    // height: 91.428571429vw;
  }
}
.map {
  @include for-desktop {
    float: right;
    max-width: 90vw;
    width: 100%;
  }
}
.section {
  position: relative;
}
.offset-y {
  position: relative;

  @include for-desktop {
    top: 20px;
  }
}

.cl-accent {
  color: var(--c-primary);
}
.text-xl {
  font-size: var(--font-size--lg);
  @include for-desktop {
    font-size: var(--font-size--lg);
  }
}
.qa-list,
.preise-list {
  padding: 0;
  &__item {
    padding: var(--spacer-base) 0;
    border-bottom: 1px solid var(--list-border, #fff);
    & > * {
      max-width: 40ch;
    }
  }
}
.preise-list__item {
  --list-border: var(--c-gray);
  .title {
    padding-right: var(--spacer-base);
  }
}
.qa-list {

  li {
    font-size: var(--font-size--md);
    @include for-mobile {
      //font-size: var(--font-size--lg);
    }
  }
}


.icon-list {
  --list-icon-size: var(--icon-size-base);
  --list-line-height: 1;
  --list-icon-margin-right: var(--spacer-sm); // gap between icon and text
  --list-icon-margin-top: var(--spacer-xs); // gap between icon and text
  --list-offset: calc(var(--list-icon-size) + var(--list-icon-margin-right));
  padding: 0;
  li {
    //font-size: var(--font-size--md);
    display: flex;
    align-items: flex-start;
    &:before {
      width: var(--list-icon-size);
      height: var(--list-icon-size);
      margin-right: var(--list-icon-margin-right);
      position: relative;
      flex-shrink: 0;
    }
    p {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
  &--features li:before {
    content: url("~@highdigital/vuet/public/assets/storybook/icons/icon_plus.svg");
  }
  &--checked li:before {
    content: url("~@highdigital/vuet/public/assets/storybook/icons/icon_checkmark_large.svg");
  }
  &--minus li:before {
    content: url("~@highdigital/vuet/public/assets/storybook/icons/icon_minus.svg");
  }
  &--checked.vertical-center {
    li {
      align-items: center;
    }
  }
  &--benefits {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacer-xl);
    marg- li {
      align-items: center;
    }
    @include for-tablet {
      flex-direction: row;
      justify-content: center;
    }
    & > * + * {
      @include for-tablet {
        margin-left: var(--spacer-xl);
      }
    }
  }
}

li.no-icon {
  margin-right: 0;
}
li.no-icon:before {
  content: '';
  display: none;
}
.oss-banner {
  background: #061B3E;
  border-radius: 20px;
  display: flex;
  padding: var(--spacer-base) var(--list-offset);
  max-width: 42ch;
  @include for-mobile {
    max-width: 100%;
  }
  @include for-desktop {
    justify-content: left;
  }
}
.oss-banner img {
  align-items: center;
  max-width: 100%;
  @include for-mobile {
    width: 200px;
  }
  @include for-tablet {
    width: 240px;
  }
  @include for-desktop {
    width: 100%;
  }
}

.steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.steps--horizontal {
  @include for-desktop {
    flex-direction: row;
    align-items: baseline;
  }
  .step {
    @include for-desktop {
      text-align: center;
      flex-direction: column;
      width: 20%;
    }
  }
  .steps__arrow {
    @include for-desktop {
      margin: 0 var(--spacer-sm);
      height: 4px;
      width: auto;
      flex-direction: row;
      &:after {
        content: url("~@highdigital/vuet/public/assets/storybook/icons/icon_arrowhead-right.svg");
        position: absolute;
        right: -2px;
        left: auto;
        top: 50%;
        margin-top: -16px;
      }
    }
  }
  .step__number {
    @include for-desktop {
      margin-bottom: var(--spacer-base);
      margin-right: 0;
      width: var(--circle-radius-lg);
      height: var(--circle-radius-lg);
      font-size: var(--font-size--lg);
    }
  }
}
.step {
  display: flex;
  align-items: center;
}
.step__number {
  align-items: center;
  border: 4px solid;
  border-color: var(--c-primary);
  border-radius: 50%;
  display: flex;
  font-family: var(--font-family--secondary);
  font-size: var(--font-size--sm);
  justify-content: center;
  margin-right: var(--spacer-base);
  width: var(--circle-radius);
  height: var(--circle-radius);
  flex-shrink: 0;
}
.step__number--active {
  background-color: var(--c-primary);
}
.step__label {
  font-family: var(--font-family--secondary);
  font-size: var(--font-size--md);
}
.steps__arrow {
  margin-top: var(--spacer-sm);
  margin-bottom: var(--spacer-sm);
  margin-left: 33px;
  margin-right: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 4px;
  height: 5em;
  background-color: var(--c-primary);
  align-items: center;
  &:after {
    content: url("~@highdigital/vuet/public/assets/storybook/icons/icon_arrowhead-down.svg");
    position: absolute;
    bottom: -12px;
    left: 50%;
    margin-left: -16px;
  }
}
.tile {
  border-radius: 16px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  img {
    display: block;
  }
}
.section-padding-y {
  padding: 4.8rem 0;
  @include for-desktop {
    padding: 6.6666666rem 0;
  }
}
.section-padding-top {
  padding: 4.8rem 0;
  @include for-desktop {
    margin-bottom: 6.6666666rem;
    padding: 0;
    .container {
      position: relative;
      top: 6.6666666rem;
    }
  }
}
.header-section{
  @include for-desktop {
    padding-top: 10rem;
  }
}
.testimonial {
  --testimonial-height: 600px;
  --testimonial-width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: calc(var(--testimonial-height) + var(--section-padding-bottom));
  @include for-desktop {
    --testimonial-height: 720px;
    --testimonial-width: 50vw;
    padding-top: var(--section-padding-top);
    padding-left: var(--container-margin-left);
  }
}
.testimonial__header {
  padding: 0 0;
  order: 0;
  @include for-desktop {
    margin-top: 0;
    padding: 0;
  }
}

.qa-list {
  &__item {
    :first-child {
      font-size: var(--font-size--base);
      @include for-desktop {
        font-size: var(--font-size--sm);
      }
    }
  }
}
.qanda {
  --testimonial-height: 600px;
  --testimonial-width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: calc(var(--testimonial-height) + var(--spacer-2xl));
  @include for-desktop {
    --testimonial-height: 600px;
    --testimonial-width: 43vw;
    padding-top: 6.666666rem;
    padding-left: var(--container-margin-left);
  }
}
.qanda__header {
  padding: 0 var(--spacer-base);
  order: 0;
  @include for-desktop {
    margin-top: 0;
  }
}
.qanda__text {
  padding: var(--spacer-base);
  padding-top: var(--spacer-2xl);
  order: 2;
  a {
    margin-top: var(--spacer-2xl);
  }
}
@media only screen and (min-width: 1438px) {
  .qanda {
    --testimonial-width: 50vw;
  }
  .qanda__header{
    padding: 0;
  }
  .qanda__text {
    padding: 0;
    padding-top: var(--spacer-2xl);
  }
}
.qanda__img {
  order: 1;
  background: url("https://eclear.com/wp-content/uploads/Annett-1024x705-1.jpg");
  overflow: hidden;
  width: var(--testimonial-width);
  height: var(--testimonial-height);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  @include for-desktop {
    position: absolute;
    right: 0;
    top: 6.666666rem;
    border-radius: 9999999px 0 0 9999999px;
  }
}
.formular {
  padding-bottom: var(--section-padding-bottom);
}
#anmelden {
  padding-bottom: 0 !important;
}
.rounded-img-container img {
  height: auto;
  width: 100%;
}

.comparison {
  --step-border: var(--circle-border);
  --icon-size: 1.5em;
  --header-size: 4em;
  position: relative;
  .icon-x {
    background: url("~@highdigital/vuet/public/assets/storybook/icons/icon_x.svg")
    no-repeat;
    background-size: 80%;
    width: var(--icon-size);
    height: calc(1.3 * 1em);
    display: block;
  }
  .icon-checkmark-sm {
    background: url("~@highdigital/vuet/public/assets/storybook/icons/icon_checkmark-small.svg")
    no-repeat;
    background-size: 80%;
    width: var(--icon-size);
    height: calc(1.3 * 1em);
    display: block;
  }
}
.comparison__header {
  display: grid;
  text-align: center;
  grid-template-columns:
    48px 1fr var(--header-size)
    var(--header-size);
  font-size: var(--font-size--xs);
  @include for-desktop {
    font-size: var(--font-size--md);
    grid-template-columns:
      76px 1fr var(--header-size)
      var(--header-size);
  }
}
.comparison__oss {
  grid-column: 3;
}

.comparison__row {
  position: relative;
  display: grid;
  grid-template-columns:
    48px 1fr var(--icon-size)
    var(--icon-size);
  @include for-desktop {
    grid-template-columns:
      76px 1fr var(--header-size)
      var(--header-size);
  }
  &:before {
    @include for-mobile {
      border: none;
    }
    border-left: 3px solid var(--c-primary);
    content: "";
    display: block;
    position: absolute;
    left: calc(
            (var(--circle-radius-sm) + var(--circle-border) + var(--circle-border)) /
            2
    );
    top: 0;
    bottom: 0;
    z-index: 0;
  }
  &:nth-child(2):before {
    top: 2rem;
    @include for-desktop {
      top: 50%;
    }
  }
  &:last-child:before {
    bottom: calc(100% - 2rem);
    @include for-desktop {
      bottom: 50%;
    }
  }
}
.comparison__info,
.comparison__icon {
  border-bottom: 1px solid var(--c-gray);
  padding: var(--spacer-base) 0;
}
.comparison__icon > * {
  margin: auto;
}
.comparison__info {
  @include for-desktop {
    padding: var(--spacer-base);
  }
}
.comparison__step {
  padding: var(--spacer-base) 0;
  span {
    position: relative;
    width: var(--circle-radius-sm);
    height: var(--circle-radius-sm);
    border: var(--circle-border) solid var(--c-primary);
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--c-primary);
    font-size: var(--font-size--sm);
    @include for-desktop {
      background-color: #fff;
    }
  }
}
.plugins__headline {
  font-size: var(--font-size--md);
  margin-top: var(--spacer-lg);
  @include for-desktop {
    font-size: var(--font-size--md);
  }
}
.plugins__info {
  font-size: var(--font-size--xs);
  margin-top: var(--spacer-base);
}
.margin-bottom-2xl {
  margin-bottom: var(--spacer-2xl);
}
.margin-bottom-3xl {
  margin-bottom: var(--spacer-3xl);
}
.margin-bottom-4xl {
  margin-bottom: var(--spacer-4xl);
}