/**===Helpers===**/
/* Grundlegende Padding-Klassen */

/* Padding Top */
.pt-6, .py-6, .p-6 { padding-top: 6rem !important; }
.pt-7, .py-7, .p-7 { padding-top: 7rem !important; }
.pt-8, .py-8, .p-8 { padding-top: 8rem !important; }
.pt-9, .py-9, .p-9 { padding-top: 9rem !important; }
.pt-10, .py-10, .p-10 { padding-top: 10rem !important; }

/* Padding Bottom */
.pb-6, .py-6, .p-6 { padding-bottom: 6rem !important; }
.pb-7, .py-7, .p-7 { padding-bottom: 7rem !important; }
.pb-8, .py-8, .p-8 { padding-bottom: 8rem !important; }
.pb-9, .py-9, .p-9 { padding-bottom: 9rem !important; }
.pb-10, .py-10, .p-10 { padding-bottom: 10rem !important; }

/* Padding Left */
.pl-6, .px-6, .p-6 { padding-left: 6rem !important; }
.pl-7, .px-7, .p-7 { padding-left: 7rem !important; }
.pl-8, .px-8, .p-8 { padding-left: 8rem !important; }
.pl-9, .px-9, .p-9 { padding-left: 9rem !important; }
.pl-10, .px-10, .p-10 { padding-left: 10rem !important; }

/* Padding Right */
.pr-6, .px-6, .p-6 { padding-right: 6rem !important; }
.pr-7, .px-7, .p-7 { padding-right: 7rem !important; }
.pr-8, .px-8, .p-8 { padding-right: 8rem !important; }
.pr-9, .px-9, .p-9 { padding-right: 9rem !important; }
.pr-10, .px-10, .p-10 { padding-right: 10rem !important; }

@media (min-width: 576px) {
    /* Padding Top */
    .pt-sm-6, .py-sm-6, .p-sm-6 { padding-top: 6rem !important; }
    .pt-sm-7, .py-sm-7, .p-sm-7 { padding-top: 7rem !important; }
    .pt-sm-8, .py-sm-8, .p-sm-8 { padding-top: 8rem !important; }
    .pt-sm-9, .py-sm-9, .p-sm-9 { padding-top: 9rem !important; }
    .pt-sm-10, .py-sm-10, .p-sm-10 { padding-top: 10rem !important; }
  
    /* Padding Bottom */
    .pb-sm-6, .py-sm-6, .p-sm-6 { padding-bottom: 6rem !important; }
    .pb-sm-7, .py-sm-7, .p-sm-7 { padding-bottom: 7rem !important; }
    .pb-sm-8, .py-sm-8, .p-sm-8 { padding-bottom: 8rem !important; }
    .pb-sm-9, .py-sm-9, .p-sm-9 { padding-bottom: 9rem !important; }
    .pb-sm-10, .py-sm-10, .p-sm-10 { padding-bottom: 10rem !important; }
  
    /* Padding Left */
    .pl-sm-6, .px-sm-6, .p-sm-6 { padding-left: 6rem !important; }
    .pl-sm-7, .px-sm-7, .p-sm-7 { padding-left: 7rem !important; }
    .pl-sm-8, .px-sm-8, .p-sm-8 { padding-left: 8rem !important; }
    .pl-sm-9, .px-sm-9, .p-sm-9 { padding-left: 9rem !important; }
    .pl-sm-10, .px-sm-10, .p-sm-10 { padding-left: 10rem !important; }
  
    /* Padding Right */
    .pr-sm-6, .px-sm-6, .p-sm-6 { padding-right: 6rem !important; }
    .pr-sm-7, .px-sm-7, .p-sm-7 { padding-right: 7rem !important; }
    .pr-sm-8, .px-sm-8, .p-sm-8 { padding-right: 8rem !important; }
    .pr-sm-9, .px-sm-9, .p-sm-9 { padding-right: 9rem !important; }
    .pr-sm-10, .px-sm-10, .p-sm-10 { padding-right: 10rem !important; }
  }


  @media (min-width: 768px) {
    /* Padding Top */
    .pt-md-6, .py-md-6, .p-md-6 { padding-top: 6rem !important; }
    .pt-md-7, .py-md-7, .p-md-7 { padding-top: 7rem !important; }
    .pt-md-8, .py-md-8, .p-md-8 { padding-top: 8rem !important; }
    .pt-md-9, .py-md-9, .p-md-9 { padding-top: 9rem !important; }
    .pt-md-10, .py-md-10, .p-md-10 { padding-top: 10rem !important; }
  
    /* Padding Bottom */
    .pb-md-6, .py-md-6, .p-md-6 { padding-bottom: 6rem !important; }
    .pb-md-7, .py-md-7, .p-md-7 { padding-bottom: 7rem !important; }
    .pb-md-8, .py-md-8, .p-md-8 { padding-bottom: 8rem !important; }
    .pb-md-9, .py-md-9, .p-md-9 { padding-bottom: 9rem !important; }
    .pb-md-10, .py-md-10, .p-md-10 { padding-bottom: 10rem !important; }
  
    /* Padding Left */
    .pl-md-6, .px-md-6, .p-md-6 { padding-left: 6rem !important; }
    .pl-md-7, .px-md-7, .p-md-7 { padding-left: 7rem !important; }
    .pl-md-8, .px-md-8, .p-md-8 { padding-left: 8rem !important; }
    .pl-md-9, .px-md-9, .p-md-9 { padding-left: 9rem !important; }
    .pl-md-10, .px-md-10, .p-md-10 { padding-left: 10rem !important; }
  
    /* Padding Right */
    .pr-md-6, .px-md-6, .p-md-6 { padding-right: 6rem !important; }
    .pr-md-7, .px-md-7, .p-md-7 { padding-right: 7rem !important; }
    .pr-md-8, .px-md-8, .p-md-8 { padding-right: 8rem !important; }
    .pr-md-9, .px-md-9, .p-md-9 { padding-right: 9rem !important; }
    .pr-md-10, .px-md-10, .p-md-10 { padding-right: 10rem !important; }
}
  
@media (min-width: 992px) {
    /* Padding Top */
    .pt-lg-6, .py-lg-6, .p-lg-6 { padding-top: 6rem !important; }
    .pt-lg-7, .py-lg-7, .p-lg-7 { padding-top: 7rem !important; }
    .pt-lg-8, .py-lg-8, .p-lg-8 { padding-top: 8rem !important; }
    .pt-lg-9, .py-lg-9, .p-lg-9 { padding-top: 9rem !important; }
    .pt-lg-10, .py-lg-10, .p-lg-10 { padding-top: 10rem !important; }
  
    /* Padding Bottom */
    .pb-lg-6, .py-lg-6, .p-lg-6 { padding-bottom: 6rem !important; }
    .pb-lg-7, .py-lg-7, .p-lg-7 { padding-bottom: 7rem !important; }
    .pb-lg-8, .py-lg-8, .p-lg-8 { padding-bottom: 8rem !important; }
    .pb-lg-9, .py-lg-9, .p-lg-9 { padding-bottom: 9rem !important; }
    .pb-lg-10, .py-lg-10, .p-lg-10 { padding-bottom: 10rem !important; }
  
    /* Padding Left */
    .pl-lg-6, .px-lg-6, .p-lg-6 { padding-left: 6rem !important; }
    .pl-lg-7, .px-lg-7, .p-lg-7 { padding-left: 7rem !important; }
    .pl-lg-8, .px-lg-8, .p-lg-8 { padding-left: 8rem !important; }
    .pl-lg-9, .px-lg-9, .p-lg-9 { padding-left: 9rem !important; }
    .pl-lg-10, .px-lg-10, .p-lg-10 { padding-left: 10rem !important; }
  
    /* Padding Right */
    .pr-lg-6, .px-lg-6, .p-lg-6 { padding-right: 6rem !important; }
    .pr-lg-7, .px-lg-7, .p-lg-7 { padding-right: 7rem !important; }
    .pr-lg-8, .px-lg-8, .p-lg-8 { padding-right: 8rem !important; }
    .pr-lg-9, .px-lg-9, .p-lg-9 { padding-right: 9rem !important; }
    .pr-lg-10, .px-lg-10, .p-lg-10 { padding-right: 10rem !important; }
  }
  
@media (min-width: 1200px) {
    /* Padding Top */
    .pt-xl-6, .py-xl-6, .p-xl-6 { padding-top: 6rem !important; }
    .pt-xl-7, .py-xl-7, .p-xl-7 { padding-top: 7rem !important; }
    .pt-xl-8, .py-xl-8, .p-xl-8 { padding-top: 8rem !important; }
    .pt-xl-9, .py-xl-9, .p-xl-9 { padding-top: 9rem !important; }
    .pt-xl-10, .py-xl-10, .p-xl-10 { padding-top: 10rem !important; }
  
    /* Padding Bottom */
    .pb-xl-6, .py-xl-6, .p-xl-6 { padding-bottom: 6rem !important; }
    .pb-xl-7, .py-xl-7, .p-xl-7 { padding-bottom: 7rem !important; }
    .pb-xl-8, .py-xl-8, .p-xl-8 { padding-bottom: 8rem !important; }
    .pb-xl-9, .py-xl-9, .p-xl-9 { padding-bottom: 9rem !important; }
    .pb-xl-10, .py-xl-10, .p-xl-10 { padding-bottom: 10rem !important; }
  
    /* Padding Left */
    .pl-xl-6, .px-xl-6, .p-xl-6 { padding-left: 6rem !important; }
    .pl-xl-7, .px-xl-7, .p-xl-7 { padding-left: 7rem !important; }
    .pl-xl-8, .px-xl-8, .p-xl-8 { padding-left: 8rem !important; }
    .pl-xl-9, .px-xl-9, .p-xl-9 { padding-left: 9rem !important; }
    .pl-xl-10, .px-xl-10, .p-xl-10 { padding-left: 10rem !important; }
  
    /* Padding Right */
    .pr-xl-6, .px-xl-6, .p-xl-6 { padding-right: 6rem !important; }
    .pr-xl-7, .px-xl-7, .p-xl-7 { padding-right: 7rem !important; }
    .pr-xl-8, .px-xl-8, .p-xl-8 { padding-right: 8rem !important; }
    .pr-xl-9, .px-xl-9, .p-xl-9 { padding-right: 9rem !important; }
    .pr-xl-10, .px-xl-10, .p-xl-10 { padding-right: 10rem !important; }
}
  
/* Margin Top */
.mt-6, .my-6, .m-6 { margin-top: 6rem !important; }
.mt-7, .my-7, .m-7 { margin-top: 7rem !important; }
.mt-8, .my-8, .m-8 { margin-top: 8rem !important; }
.mt-9, .my-9, .m-9 { margin-top: 9rem !important; }
.mt-10, .my-10, .m-10 { margin-top: 10rem !important; }

/* Margin Bottom */
.mb-6, .my-6, .m-6 { margin-bottom: 6rem !important; }
.mb-7, .my-7, .m-7 { margin-bottom: 7rem !important; }
.mb-8, .my-8, .m-8 { margin-bottom: 8rem !important; }
.mb-9, .my-9, .m-9 { margin-bottom: 9rem !important; }
.mb-10, .my-10, .m-10 { margin-bottom: 10rem !important; }

/* Margin Left */
.ml-6, .mx-6, .m-6 { margin-left: 6rem !important; }
.ml-7, .mx-7, .m-7 { margin-left: 7rem !important; }
.ml-8, .mx-8, .m-8 { margin-left: 8rem !important; }
.ml-9, .mx-9, .m-9 { margin-left: 9rem !important; }
.ml-10, .mx-10, .m-10 { margin-left: 10rem !important; }

/* Margin Right */
.mr-6, .mx-6, .m-6 { margin-right: 6rem !important; }
.mr-7, .mx-7, .m-7 { margin-right: 7rem !important; }
.mr-8, .mx-8, .m-8 { margin-right: 8rem !important; }
.mr-9, .mx-9, .m-9 { margin-right: 9rem !important; }
.mr-10, .mx-10, .m-10 { margin-right: 10rem !important; }

@media (min-width: 576px) {
     /* Margin Top */
    .mt-sm-6, .my-sm-6, .m-sm-6 { margin-top: 6rem !important; }
    .mt-sm-7, .my-sm-7, .m-sm-7 { margin-top: 7rem !important; }
    .mt-sm-8, .my-sm-8, .m-sm-8 { margin-top: 8rem !important; }
    .mt-sm-9, .my-sm-9, .m-sm-9 { margin-top: 9rem !important; }
    .mt-sm-10, .my-sm-10, .m-sm-10 { margin-top: 10rem !important; }

    /* Margin Bottom */
    .mb-sm-6, .my-sm-6, .m-sm-6 { margin-bottom: 6rem !important; }
    .mb-sm-7, .my-sm-7, .m-sm-7 { margin-bottom: 7rem !important; }
    .mb-sm-8, .my-sm-8, .m-sm-8 { margin-bottom: 8rem !important; }
    .mb-sm-9, .my-sm-9, .m-sm-9 { margin-bottom: 9rem !important; }
    .mb-sm-10, .my-sm-10, .m-sm-10 { margin-bottom: 10rem !important; }

    /* Margin Left */
    .ml-sm-6, .mx-sm-6, .m-sm-6 { margin-left: 6rem !important; }
    .ml-sm-7, .mx-sm-7, .m-sm-7 { margin-left: 7rem !important; }
    .ml-sm-8, .mx-sm-8, .m-sm-8 { margin-left: 8rem !important; }
    .ml-sm-9, .mx-sm-9, .m-sm-9 { margin-left: 9rem !important; }
    .ml-sm-10, .mx-sm-10, .m-sm-10 { margin-left: 10rem !important; }

    /* Margin Right */
    .mr-sm-6, .mx-sm-6, .m-sm-6 { margin-right: 6rem !important; }
    .mr-sm-7, .mx-sm-7, .m-sm-7 { margin-right: 7rem !important; }
    .mr-sm-8, .mx-sm-8, .m-sm-8 { margin-right: 8rem !important; }
    .mr-sm-9, .mx-sm-9, .m-sm-9 { margin-right: 9rem !important; }
    .mr-sm-10, .mx-sm-10, .m-sm-10 { margin-right: 10rem !important; }
}
@media (min-width: 768px) {
    /* Margin Top */
    .mt-md-6, .my-md-6, .m-md-6 { margin-top: 6rem !important; }
    .mt-md-7, .my-md-7, .m-md-7 { margin-top: 7rem !important; }
    .mt-md-8, .my-md-8, .m-md-8 { margin-top: 8rem !important; }
    .mt-md-9, .my-md-9, .m-md-9 { margin-top: 9rem !important; }
    .mt-md-10, .my-md-10, .m-md-10 { margin-top: 10rem !important; }

    /* Margin Bottom */
    .mb-md-6, .my-md-6, .m-md-6 { margin-bottom: 6rem !important; }
    .mb-md-7, .my-md-7, .m-md-7 { margin-bottom: 7rem !important; }
    .mb-md-8, .my-md-8, .m-md-8 { margin-bottom: 8rem !important; }
    .mb-md-9, .my-md-9, .m-md-9 { margin-bottom: 9rem !important; }
    .mb-md-10, .my-md-10, .m-md-10 { margin-bottom: 10rem !important; }

    /* Margin Left */
    .ml-md-6, .mx-md-6, .m-md-6 { margin-left: 6rem !important; }
    .ml-md-7, .mx-md-7, .m-md-7 { margin-left: 7rem !important; }
    .ml-md-8, .mx-md-8, .m-md-8 { margin-left: 8rem !important; }
    .ml-md-9, .mx-md-9, .m-md-9 { margin-left: 9rem !important; }
    .ml-md-10, .mx-md-10, .m-md-10 { margin-left: 10rem !important; }

    /* Margin Right */
    .mr-md-6, .mx-md-6, .m-md-6 { margin-right: 6rem !important; }
    .mr-md-7, .mx-md-7, .m-md-7 { margin-right: 7rem !important; }
    .mr-md-8, .mx-md-8, .m-md-8 { margin-right: 8rem !important; }
    .mr-md-9, .mx-md-9, .m-md-9 { margin-right: 9rem !important; }
    .mr-md-10, .mx-md-10, .m-md-10 { margin-right: 10rem !important; }
}
@media (min-width: 992px) {
    /* Margin Top */
    .mt-lg-6, .my-lg-6, .m-lg-6 { margin-top: 6rem !important; }
    .mt-lg-7, .my-lg-7, .m-lg-7 { margin-top: 7rem !important; }
    .mt-lg-8, .my-lg-8, .m-lg-8 { margin-top: 8rem !important; }
    .mt-lg-9, .my-lg-9, .m-lg-9 { margin-top: 9rem !important; }
    .mt-lg-10, .my-lg-10, .m-lg-10 { margin-top: 10rem !important; }
  
    /* Margin Bottom */
    .mb-lg-6, .my-lg-6, .m-lg-6 { margin-bottom: 6rem !important; }
    .mb-lg-7, .my-lg-7, .m-lg-7 { margin-bottom: 7rem !important; }
    .mb-lg-8, .my-lg-8, .m-lg-8 { margin-bottom: 8rem !important; }
    .mb-lg-9, .my-lg-9, .m-lg-9 { margin-bottom: 9rem !important; }
    .mb-lg-10, .my-lg-10, .m-lg-10 { margin-bottom: 10rem !important; }
  
    /* Margin Left */
    .ml-lg-6, .mx-lg-6, .m-lg-6 { margin-left: 6rem !important; }
    .ml-lg-7, .mx-lg-7, .m-lg-7 { margin-left: 7rem !important; }
    .ml-lg-8, .mx-lg-8, .m-lg-8 { margin-left: 8rem !important; }
    .ml-lg-9, .mx-lg-9, .m-lg-9 { margin-left: 9rem !important; }
    .ml-lg-10, .mx-lg-10, .m-lg-10 { margin-left: 10rem !important; }
  
    /* Margin Right */
    .mr-lg-6, .mx-lg-6, .m-lg-6 { margin-right: 6rem !important; }
    .mr-lg-7, .mx-lg-7, .m-lg-7 { margin-right: 7rem !important; }
    .mr-lg-8, .mx-lg-8, .m-lg-8 { margin-right: 8rem !important; }
    .mr-lg-9, .mx-lg-9, .m-lg-9 { margin-right: 9rem !important; }
    .mr-lg-10, .mx-lg-10, .m-lg-10 { margin-right: 10rem !important; }
  }
  
@media (min-width: 1200px) {
    /* Margin Top */
    .mt-xl-6, .my-xl-6, .m-xl-6 { margin-top: 6rem !important; }
    .mt-xl-7, .my-xl-7, .m-xl-7 { margin-top: 7rem !important; }
    .mt-xl-8, .my-xl-8, .m-xl-8 { margin-top: 8rem !important; }
    .mt-xl-9, .my-xl-9, .m-xl-9 { margin-top: 9rem !important; }
    .mt-xl-10, .my-xl-10, .m-xl-10 { margin-top: 10rem !important; }
  
    /* Margin Bottom */
    .mb-xl-6, .my-xl-6, .m-xl-6 { margin-bottom: 6rem !important; }
    .mb-xl-7, .my-xl-7, .m-xl-7 { margin-bottom: 7rem !important; }
    .mb-xl-8, .my-xl-8, .m-xl-8 { margin-bottom: 8rem !important; }
    .mb-xl-9, .my-xl-9, .m-xl-9 { margin-bottom: 9rem !important; }
    .mb-xl-10, .my-xl-10, .m-xl-10 { margin-bottom: 10rem !important; }
  
    /* Margin Left */
    .ml-xl-6, .mx-xl-6, .m-xl-6 { margin-left: 6rem !important; }
    .ml-xl-7, .mx-xl-7, .m-xl-7 { margin-left: 7rem !important; }
    .ml-xl-8, .mx-xl-8, .m-xl-8 { margin-left: 8rem !important; }
    .ml-xl-9, .mx-xl-9, .m-xl-9 { margin-left: 9rem !important; }
    .ml-xl-10, .mx-xl-10, .m-xl-10 { margin-left: 10rem !important; }
  
    /* Margin Right */
    .mr-xl-6, .mx-xl-6, .m-xl-6 { margin-right: 6rem !important; }
    .mr-xl-7, .mx-xl-7, .m-xl-7 { margin-right: 7rem !important; }
    .mr-xl-8, .mx-xl-8, .m-xl-8 { margin-right: 8rem !important; }
    .mr-xl-9, .mx-xl-9, .m-xl-9 { margin-right: 9rem !important; }
    .mr-xl-10, .mx-xl-10, .m-xl-10 { margin-right: 10rem !important; }
  }
  
/**===Slick===**/
.slick-track {
    display: flex
}

.slick-list {
    overflow: hidden;
}

.slick-dots {
    display: flex;
    padding-left: 0;
    justify-content: center;
}

.slick-dots li {
    display: inline-block
}

.slick-dots li button {
    font-size: 0;
    width: 18px;
    height: 18px;
    border-radius: 20px;
    border: none;
    outline: none;
    margin: 0 5px;
    transition: transform 0.3s ease-in-out,
     background-color 0.3s ease-in-out;
    cursor: pointer;
    background: #666;
}

.slick-dots li.slick-active button {
    background: #888;
    transform: scale(1.2);
}
/**===Navbar===**/
navbar {
  background: #c03;
  height: 60px;
  position: fixed;
  width: 100%;
  z-index: 1000;
  transition: top 0.4s;
  top: 0;
}

navbar .logo img {
  height: 60px;
}

/**===GDPR Disclaimer===**/
/* Allgemeine Regeln für .gdpr-disclaimer */
.gdpr-disclaimer {
  background-color: rgba(24,24,24,0.9);
  color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  font-size: 16px;
  text-align: center;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  line-height: 1.3em;
}
.gdpr-disclaimer p {
  margin-bottom: 0;
}

/* Media Query für Bildschirmbreiten ab 768px */
@media (min-width: 768px) {
  .gdpr-disclaimer {
      flex-direction: row;
      align-items: center;
  }
}

/* Media Query für Bildschirmbreiten ab 1200px */
@media (min-width: 1200px) {
  .gdpr-disclaimer {
      background-color: rgba(24,24,24,0.5);
      bottom: 20px;
      right: 20px;
      left: auto;
      max-width: 748px;
      backdrop-filter: blur(10px);
      gap: 20px;
  }
}
/**===Header===**/
header {
    position: relative;
    width: 100%;
    height: 100vh;
}

header h1 {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    width: 100%;
}

header img.cloppe-anim {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    max-width: 1280px;
}

.header-text {
    font-size: 3rem;
    padding: 0 10px;
}

header .red-dot {
  position: absolute;
  bottom: 20px;
  left: 20px;
  max-width: 250px;
  width: 50%;
}

@media(min-width: 576px) {
    .header-text {
        font-size: 4.5rem;
        padding: 0 20px
    }
}
@media(min-width: 768px) {
  header .red-dot {
    left: 40px;
    bottom: 40px;
  }
}
@media(min-width: 1200px) {
    .header-text {
        font-size: 5.5rem;
        padding: 0 40px
    }
}


/** Overlay **/
.comparison-container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
}

.overlap-container {
    color: #fff;
}

.overlap-left .wireframe-element,
.overlap-left .render-element {
    background-position:  center center;
    background-size: 100vw;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.overlap-right .wireframe-element,
.overlap-right .render-element {
    background-position: center center;
    background-size: 100vw;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (min-width: 992px) {
    .overlap-left .wireframe-element,
    .overlap-left .render-element {
        background-position: left 10% center;
        background-size: 60vh;
    }

    .overlap-right .wireframe-element,
    .overlap-right .render-element {
        background-position: right 10% center;
        background-size: 60vh;
    }
}

@media (min-width: 1360px) {
  .overlap-left .wireframe-element,
    .overlap-left .render-element {
        background-position: left 25% center;
    }

    .overlap-right .wireframe-element,
    .overlap-right .render-element {
        background-position: right 25% center;
    }
}

.wireframe-element {
    padding-bottom: 150%;
    width: 100%;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    box-sizing: border-box;
}


.render-element {
    padding-bottom: 150%;
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

@media (min-width: 992px) {
    .render-element {
        padding-bottom: 100%;
    }
    .wireframe-element {
        padding-bottom: 100%;
    }
}
  


.wireframe-element h3 {
    position: fixed;
    top: 10%;
    z-index: 2;
}

.overlap-right .wireframe-element h3 {
    left: 50%;
    transform: translateX(-50%);
}

.overlap-left .wireframe-element h3 {
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 992px) {
  .overlap-right .wireframe-element h3 {
      left: auto;
      right: 22%;
      transform: translateX(-50%);
  }

  .overlap-left .wireframe-element h3 {
      left: 30%;
      transform: translateX(-50%);
  }
}
@media (min-width: 1360px) {
  .overlap-right .wireframe-element h3 {
      left: auto;
      right: 28%;
      transform: translateX(-50%);
  }

  .overlap-left .wireframe-element h3 {
      left: 32%;
      transform: translateX(-50%);
  }
}

.legend {
  color: #aaa;
  position: absolute;
  bottom: 40px;
}

.cl-width {
  position: fixed;
  top: 130vw;
  left: 50%;
  transform: translateX(-50%);
  font-size: .9rem;
  z-index: 2;
}

.cl-height {
  position: fixed;
  top: 45%;
  left: 12%;
  transform: translateX(-50%);
  font-size: .9rem;
  z-index: 2;
}
/**===Channel Teaser===**/
.channel-teaser {
    display: flex;
    align-items: center;
  }
  
  .channel-teaser .channel-icon {
    margin-right: 20px
  }
  
  .channel-teaser .channel-icon img {
    height:100px
  }
  
/**===Slider Community Progress===**/

.slider-community-progress .progress-icon {
    height: 60px;
    margin-bottom: 1.25rem;
  }
  .slider-community-progress .progress-slide {
    text-align: center
  }
  
  .slider-community-progress .slick-list.draggable {
    overflow: hidden;
  }
  
  .slider-community-progress ul.progress-steps {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0 auto;
    justify-content: center;
  }
  .slider-community-progress ul.progress-steps button{
    border: 0;
    background: #222;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow:visible;
    transition: .1s ease-out;
    z-index: 2;
    position: relative;
  }
  
  .slider-community-progress ul.progress-steps button:focus{
    outline: none
  }
  .slider-community-progress ul.progress-steps li {
    margin-right: 10px;
    position: relative;
  }
  
  .slider-community-progress ul.progress-steps li.slick-active button {
    background: #9c3
  }
  
  .slider-community-progress ul.progress-steps li:before {
    content: " ";
     width: 30px;
     height: 7px;
     background: #222;
     position: absolute;
     top: 50%;
     left: -50%;
     transform: translateY(-50%);
     z-index: 1;
  }
  
  .slider-community-progress ul.progress-steps li:nth-child(1)::before {
    display: none;
  }
  
  .slider-community-progress ul.progress-steps li button .progress-step-icon {
    width: 90%;
  }
  
  @media (min-width: 375px) {
    .slider-community-progress ul.progress-steps button{
       width: 40px;
       height: 40px;
    }
  
    .slider-community-progress ul.progress-steps li button .progress-step-icon {
      width: 22px;
    }
  }
  @media (min-width: 768px) {
    .slider-community-progress ul.progress-steps li {
       margin-right: 20px;
    }
  
    .slider-community-progress ul.progress-steps button{
       width: 50px;
       height: 50px;
    }
  }
  

/** Manual Download **/
.manual-download {
    display: flex;
    align-items: center;
    gap: 10px
}

.manual-download .manual-icon {
    height: 70px;
}

.manual-download .icon-download {
    height: 1.25rem;
    margin-right: 5px;
}

.manual-download-cta a {
  display: flex;
  align-items: center;
}
/** Testimonials **/
.testimonial .slick-track {
    display: flex;
}

/** Flexikon Links **/
.flexikon-link {
    text-align: center;
    margin: 0px auto;
    transition: 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 300px;
    color: #fff;
    cursor: pointer;
    padding: 10px 0;
}

.flexikon-link:hover {
    text-decoration: none;
    max-width: 320px;
}

.flexikon-link span {
    font-size: 1.5rem;
}

.flexikon-link svg {
    fill: #fff;
    height: 1.5rem;
    transition: fill 0.3s ease-in-out;
}

.flexikon-link:hover svg {
    fill: var(--primary);
}

/** Preisbox **/
.product-box {
    padding: 0 10px;
    text-align: center;
}

.product-info {
    text-align: left;
    height: 340px;
}

@media(min-width: 576px) {
    .product-info {
        height: 400px;
    }
}

.product-info .card-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.product-box img {
    max-width: 225px;
    width: 100%;
    margin: 0 auto;
}
.product-pricing .brutto {
    font-weight: 700;
    display: block;
}

.product-pricing .netto {
    color: #aaa;
    display: block;
}

.product-box-slider .slick-dots {
  padding-top: 20px;
}
.product-box-slider .slick-list {
  padding-right: 20vw;
}

@media (min-width: 768px) {
  .product-box {
    padding: 0 30px;
  }
  .product-box-slider .slick-list {
    padding-right: 0;
  }
}
  
/**===FOOTER===**/
footer .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

footer nav ul {
  list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

footer nav ul li {
  display: inline-block;
  margin: 0 10px;
  padding: 5px 0;
}

footer nav ul li a {
  color: #fff
}
@media (min-width: 570px) {
  footer nav ul {
    flex-direction: row;
  }
}

/**===Language Selector===**/
.language-selector button {
  background: transparent;
  border: none;
  color: #fff;
  outline: none;
}

.language-selector button:focus {
  border: none;
  outline: none;
}

.language-selector .selected {
  display: flex;
  align-items: center
}



.country-flag {
  height:40px;
  width: 40px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
  margin-right: 10px;
}
.flag-de {
  background-image: url(../img/flag_germany.svg);
}

.flag-uk {
  background-image: url(../img/flag_uk.svg);
}

.bg-r {
  background-image: radial-gradient(100% 70% at right center, #111 -50%,#000 75%);
}

.bg-l {
  background-image: radial-gradient(100% 70% at left center, #111 -50%,#000 75%)
}