/* -----------------------------
   CLiX CSS
----------------------------- */


/* -----------------------------
   FONTS
----------------------------- */

@font-face{font-family:'Avant Garde';font-style:normal;font-display:swap;font-weight:400;src:url('../fonts/itcavantgardepro-bk.woff') format('woff')}
@font-face{font-family:'Avant Garde';font-style:normal;font-display:swap;font-weight:500;src:url('../fonts/itcavantgardepro-md.woff') format('woff')}
@font-face{font-family:'Avant Garde';font-style:normal;font-display:swap;font-weight:600;src:url('../fonts/itcavantgardepro-demi.woff') format('woff')}




/* -----------------------------
   FONTS
----------------------------- */


body, html {
  font-family: 'Avant Garde';
  font-weight: 400;
}

body {
  overflow-x: hidden;
}

 .row > * {
    padding-left: 0px;
    padding-right: 0px;
  }

body {
  overflow-x: hidden;
}

/* -----------------------------
   TYPOGRAPHY
----------------------------- */

.node h1 {
  color: #000;
  font-size: 45px;
  font-weight: 300;
}

.node h2 {
  color: #000;
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 25px;
}

.node h3 {
  color: #000;
  font-size: 24px;
  font-weight: 600;
}

.node p {
  font-size: 20px;
  font-weight: 400;
  color: #000;
}

.node li {
  font-size: 20px;
}

.node strong {
  font-weight: 600;
}

.node a {
  text-decoration: none;
}

.node a:hover {
  color: #bccf00;
}

/* -----------------------------
   TITLE & LISTS
----------------------------- */

.node .black h1,
.node .black h2,
.node .black h3,
.node .black p,
.node .black ul{
  color: #fff;
}

.node ul {
  padding-left: 20px;
}

.node ul li {
  list-style: none;
  position: relative;
  padding: 3px 0px;
  padding-right: 36px;
}

.node ul li:before {
  content: "";
  position: absolute;
  left: -20px;
  border: 3px solid #000;
  border-radius: 90%;
  width: 12px;
  height: 12px;
  top: 10px;  
}

.green ul li:before,
.zielgruppen ul li:before {
  border: 3px solid #fff;
}


.problem ul li:before {
  border: 3px solid red;
}

.black ul li:before,
.loesung ul li:before,
.preis-hersteller ul li,
#nutzen ul li:before{
  border: 3px solid #bccf00;
}

#markt ul li:before {
   content: "";
  position: absolute;
  left: -20px;
  border: 3px solid #fff;
  background-color: #fff !important;
  border-radius: 90%;
  width: 12px;
  height: 12px;
  top: 5px;
}

#markt ul ul li:before {
   content: "";
  position: absolute;
  left: -20px;
  border: 3px solid #fff;
  background-color: transparent !important;
  border-radius: 90%;
  width: 12px;
  height: 12px;
  top: 5px;
}

/* -----------------------------
   LAYOUTS
----------------------------- */

#main-wrapper {
  background: #f5f5f5 !important;
}

.site-footer {
  background: #f5f5f5 !important;
}

.field--name-field-components{
  background: #fff;
}

.paragraph--type--ept-columns {
  margin: 20px 0px;
}


/* -----------------------------
   IMAGES / CLIP-PATHS
----------------------------- */

img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.sessellift img {
  clip-path: polygon(0 0, 100% 17%, 100% 100%, 0% 100%);
}

.bergsteiger img {
  clip-path: polygon(0 17%, 100% 0, 100% 100%, 0% 100%);
}

.rucksack-stoecke img {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); 
}

.rucksack-stoecke {
  margin-left: 36px;
  margin-right: -36px;
}

.garderobe img {
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}

.garderobe {
  margin-left: 0;
}


#nutzen {
  /* clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%); */
  margin-top: -5px !important;
  margin-bottom: -5px !important;
}

/* -----------------------------
   CLAIM / HEADER
----------------------------- */

#claim.ept-paragraph {
  position: relative;
}

#claim.ept-paragraph h1{
  position: absolute;
  top: 36%;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  align-content: center;
  right: 0px;
  left: 25%;
  margin: auto;
  color: #fff;
  margin-left: 10%;
  margin-top:36px;
  margin-bottom: 15px;
  font-weight: 500;
}

#claim.ept-paragraph .field--name-field-ept-image-caption  {
  font-weight: 500;
  color: #bccf00;
  font-size: 25px;
  position: absolute;
  top: 59%;
  left: 30%;
}

#claim h2 {
  margin-left: 20%;
  font-weight: 500;
  color: #bccf00;
  font-size: 25px;
}


#claim .text-formatted img {
  max-width: 14%;
  width: 100%;
  margin: 15px;
}

#claim .text-formatted img:nth-of-type(1) {
  margin-left: 30%;
}

/* -----------------------------
   PROBLEME / LÖSUNG
----------------------------- */

.ept-paragraph-tiles .ept-tiles-wrapper .inner,
.ept-paragraph-tiles .ept-tiles-wrapper .inner:hover{
  box-shadow: none;
  border: none;
  padding: 0px;

}

.ept-paragraph-tiles .ept-tiles-wrapper .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}


.ept-paragraph-tiles .text-formatted {
  padding-top: 0;
}

#ski, #wandern, #garderobe {
  margin: 0px 50px 0px 50px;
}


.problem img{
   clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); 
}

.loesung img {
   clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); 
}

.field--type-image img, .field--name-field-user-picture img {
  margin: 0px;
}


/* -----------------------------
   PARTNER / NUTZEN
----------------------------- */


  #highlights img {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
  width: 100%;
  height: auto !important;
}



/* -----------------------------
   PARTNER / NUTZEN
----------------------------- */

.nutzen {
  position: relative;
 overflow: hidden;
}

#nutzen {
  color: #fff;
}

#nutzen h2 {
  color: #bccf00
}

#nutzen {
  margin-top: -0px;
}

#nutzen ol li {
  font-size: 20px;
  list-style: none;
  position: relative;
  margin-bottom: 6px;
}

#nutzen ol {
  padding-left: 45px;
  padding-right: 45px;
  margin-bottom: 25px;
  margin-top: 30px;
  color: #000;
}

#nutzen ol li:last-child {
  margin-bottom: 0px;
}

#nutzen ol li:nth-child(1):before {
  content: "";
  position: absolute;
  left: 0px;
  mask-image: url(/sites/default/files/1.png);
  mask-repeat: no-repeat;
  mask-size:18px 18px;
  height: 20px;
  width: 20px;
  background-color: #000;
  top: 3px;
  left: -24px;
}

#nutzen ol li:nth-child(2):before {
  content: "";
  position: absolute;
  left: 0px;
  mask-image: url(/sites/default/files/2.png);
  mask-repeat: no-repeat;
 mask-size:18px 18px;
  height: 20px;
  width: 20px;
  background-color: #000;
  top: 3px;
  left: -24px
}

#nutzen ol li:nth-child(3):before {
  content: "";
  position: absolute;
  left: 0px;
  mask-image: url(/sites/default/files/3.png);
  mask-repeat: no-repeat;
 mask-size:18px 18px;
  height: 20px;
  width: 20px;
  background-color: #000;
  top: 3px;
  left: -24px
}

#nutzen em {
  font-size: 16px;
  line-height: 140%;
  display: inline-block;
  color: #fff;
  font-style: normal;
  
}

#video {
  z-index: 99;
  position: relative;
  padding-left: 0px;
  width: 50%;
  float: right;
  padding-right: 100px;
}

#video .ept-container {
  max-width: 100%;
  margin-left: 10px;
}

#video video {
  border: 6px solid #fff;
  margin-left: -6px;
}


.partnernutzen {
  position: relative;
 overflow: hidden;
}

.partnernutzen .produkt  {
  position: absolute;
  right: 0;
  bottom: 0 !important;
  opacity: 1;
  top: 0;
  border-bottom: 6px solid #fff;
}

#produkt img {
  max-height: 532px;
}


#produkt .green {
  height: 225px;
  align-items: center;
  display: flex;
}

#produkt .black {
  height: 260px;
  align-items: center;
  display: flex;
}

#produkt .black h2 {
  margin-bottom: 15px;
  color: #000;
}

#produkt .black p {
  color: #000;
}

#produkt .black {
  background: #fff;
}

#produkt .black img {
  height: 200px;
  float: left;
  width: auto;
  width: 80px;
  object-fit: cover;
  margin-left: -5px;
}


.produktdaten .text-formatted p {
  max-width: 0px;
  max-width: 650px;
}

#produkt.ept-paragraph-columns .field--name-field-ept-columns {
  row-gap: 6px !important;
}

#produkt p {
  margin-bottom: 0px;
}

.plyr.plyr-player {
  max-width: 100%;
  height: auto;
}


.partnernutzen:after {
  content: "";
  width: 100%;
  display: block !important;
  height: 6px;
  z-index: 99;
  background: #fff;
  position: relative;
  margin-top: -6px;
}


.produkt img {
  max-height: 460px;
}


.partnernutzen:after {
  content: "";
  width: 100%;
  display: block !important;
  height: 6px;
  z-index: 99;
  background: #fff;
  position: relative;
  margin-top: -6px;
}

.produktdaten h2 {
  margin-bottom: 0px;
}

.produktdaten a {
  position: relative;
}

.produktdaten a:nth-child(1):before {
  content: "\f095";
  font-family:"Font Awesome 5 Free";
  color: #bccf00;
  margin-right: 8px;
  font-size: 18px;
  font-weight: 900;
  display: inline-block;
  transform: scaleX(-1);
  margin-left: 0;
}

.produktdaten a:nth-child(3):before {
  content: "\f0e0";
  font-family:"Font Awesome 5 Free";
  color: #bccf00;
  padding-right: 10px;
  font-size: 16px;
  font-weight: 900;
}


.produktdaten a {
  color: #bccf00;
}

.produktdaten a:hover {
  font-weight: 500;
}



.vertriebspartner {
  position: relative;
  display: flex;
}

.vertriebspartner .field__item {
  display: flex;
  padding-bottom: 6px;
}


.produktdaten {
  position: relative;
}

.paragraph-id-24 {
  padding-left: 20% !important;
}

#clix-3d {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -----------------------------
   MARKT / ZIELGRUPPEN
----------------------------- */

#markt {
  margin-top: -6px;
}

 #markt .green  {
  position: relative;
  margin-left: 50px;
  z-index: 1;
}

 #markt .green:before {
  content: "";
  position: absolute;
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
  height: 100%;
  width: 600px;
  background: #bccf00;
  transform: rotate(180deg);
  left: -200px;
   z-index: -1;
}

#markt .text-formatted  {
  position: relative;
  z-index: 10;
}

#markt .field--name-field-ept-columns .field__item:nth-child(2) .text-formatted {
  display: flex;
}

#markt img {
  margin-left: -36px;
  padding-left: 36px;
}

#markt h2 {
  padding-top: 36px;
}


/* -----------------------------
   PREISE / HERSTELLER
----------------------------- */

#preis-hersteller .hersteller li:before {
  display: none;
}

#preis-hersteller  .field--name-field-ept-columns {
  display: block;
}

#preis-hersteller .field--name-field-ept-columns .field__item:nth-child(1) {
  float: left;
  width: 50%;
  margin-right:36px;
  display: block;
  shape-outside: polygon(0 0, 70% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 70% 0, 100% 100%, 0% 100%);
}

#preis-hersteller .hersteller{
  padding-bottom: 0px !important;
}

.hersteller .text-formatted img {
  width: 12px;
  height: 12px;
}

#formular {
  position: relative;
}

#formular .field--name-field-ept-text {
  position: absolute;
  left: 50px;
  top: 20px;
}

#formular h2 {
  color: #bccf00
}

#formular .webform-submission-form {
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  padding-left: 30% !important;
  padding-right: 50px;
  padding-bottom: 36px;
  padding-top: 15px;
  background: #bccf00;
  margin-top: -10px;
}

#formular .form-control {
  border: 0;
  border-radius: 0px;
  outline: none;
}

#formular .form-control:focus {
  border: none;
  box-shadow: none;
}

#formular .form-required {
  filter: grayscale(1);
}

#formular .button {
  border-radius: 0px;
}

#formular .button:hover {
  border-color: #333333 !important;
}

#formular {
}

  #formular .webform-submission-form {
    margin-left: 12%;
  }

#formular .text-formatted a {
  color: #fff !important;
}

#formular .text-formatted {
  padding-top: 25px;
}

/* -----------------------------
   FOOTER
----------------------------- */

.site-footer a, .site-footer p {
  color: #333 !important;
  text-decoration: none;
  font-family:'Avant Garde';
  margin-bottom: 0px;
  
}

.site-footer__bottom {
  margin: 0px;
  padding: 0px;
}

.site-footer {
  background: none;
  padding: 0px !important;
  margin-top: -12px !important;
}

.site-footer__bottom .region {
  margin-top: 0px;
}


/* -----------------------------
   MEDIA QUERIES
----------------------------- */


@media (min-width: 991px) {
  
    
  #claim.ept-paragraph h1 {
    font-size: 32px;
  } 
  
    #claim.ept-paragraph .field--name-field-ept-image-caption h2 {
    font-size: 19px;
  } 
  
  #claim .field--name-field-ept-text {
    display: none;
  }

}


@media (min-width: 1200px) {
  
  #claim.ept-paragraph  h1 {
    font-size: 36px;
  } 
  
    #claim.ept-paragraph .field--name-field-ept-image-caption h2 {
    font-size: 21px;
  } 
  
  .vertriebspartner:after {
  width: 42%;
}
  
  .produktdaten:after {
    width: 40%
  }
 }

@media (min-width: 1400px) {
  
    #claim.ept-paragraph h1 {
    font-size: 45px;
  } 
  
   *:lang(en)  #claim.ept-paragraph h1 {
    font-size: 42px;
  } 
  
    #claim.ept-paragraph .field--name-field-ept-image-caption h2 {
    font-size: 26px;
  } 

}






@media (max-width: 1200px) {
  
  .vertriebspartner h2 {
    padding-right: 0px;
  }
  
   :lang(en) .vertriebspartner h2 {
    padding-right: 10%;
  }
  
  .black.produktdaten .text-formatted{
    padding-right: 33% !important;
  }
  
  .black.produktdaten .text-formatted br {
    display: none;
  }
  
  
  .produktdaten .text-formatted p {
  max-width: 0px;
  max-width: 480px;
}
 
    .black.produktdaten .text-formatted {
    padding-right: 0% !important;
  }
  
}


@media (max-width: 990px) {
  
  html {
    overflow-x: hidden;
  }
  
  .site-footer {
    background: #fff !important;
    padding-top: 15px !important;
  }
  
  .container {
    max-width: 100%;
  }
  
    .green.vertriebspartner h2{
      hyphens: auto;
      max-width: 380px;
  }
  
  .green.vertriebspartner h2 br {
    display: none;
  }
  
    
  .produktdaten .text-formatted p {
  max-width: 0px;
  max-width: 100%;
}
 
    .black.produktdaten .text-formatted {
    padding-right: 0% !important;
  }

  
  #produkt img {
    max-height: auto !important;
    aspect-ratio: none !important;
    max-height: 100% !important;
  }
  
  #claim.ept-paragraph h1{
  display: none;
}
  #claim .field--name-field-ept-text {
    display: flex;
    position: absolute;
    top: 24%;
    left: 42%;
    aspect-ratio: 400 / 340;
    align-items: center;
  }
  
    *:lang(en) #claim .field--name-field-ept-text {
    top: 19%;
  }
  
  
  #claim .field--name-field-ept-text p {
    color: #fff;
    font-weight: 500;
    font-size: 5vw;
    line-height: 120%;
    margin-bottom: 0px;
  }

#claim.ept-paragraph .field--name-field-ept-image-caption {
  color: #fff;
  margin-left: 20%;
  font-weight: 500;
  color: #bccf00;
  font-size: 25px;
  position: relative;
  top: 0%;
  left: 0%;
  margin-top: 25px;
  margin-left: 0px !important;
  text-align: center;
}
  
#claim.ept-paragraph .field--name-field-ept-image-caption h2 {
  left: 0%;
  margin-left: 0px !important;
  padding: 0px 21px;
  font-size: 24px !important;
  position: relative;
  }
  
  #claim .text-formatted img {
    max-width: 15%;
  }
  
  #claim .text-formatted img:nth-of-type(1) {
    margin-left: 0px;
  }
  
  #markt .green {
    margin-left: 0px;
    padding-left: 50px;
  }
  
  
  #markt .green:before  {
    display: none;
  }
  
  .ept-paragraph-tiles .ept-tiles-wrapper .inner {
  display: block;
}
  
  .ept-paragraph-tiles .ept-tiles-wrapper .inner img {
    margin-bottom: 25px;
  }
 
  
}
  
@media (max-width: 900px) {
      .partnernutzen .produkt  {
  position: relative;
  right: 0;
  bottom: 0px !important;
  opacity: 1;
  top: 0;
  border-bottom: 6px solid #fff;
}
  
    #formular .webform-submission-form {
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
      clip-path: none;
 padding-left:50px !important;
  padding-top: 50px;
  margin: 0px;
      margin-top: -10px;
}
  
  #formular {
      background-position:  center -70px;
    background-size: 400px !important;
  }
  
  #formular .form-control {
    margin-bottom: 10px;
  }
  
}



  
  @media (max-width: 640px) {
   
    p, li {
      font-size: 17px !important;
    }
    
    
    .container {
      max-width: 100%;
    }
    
    
    #video {
  z-index: 99;
  position: relative;
  padding-left: 0px;
  width: 100%;
  float: none;
  padding-right: 36px;
  padding-left: 36px;
}

    
    #preis-hersteller .field--name-field-ept-columns .field__item:nth-child(1) {
  width: 100%;
  margin-right:0px;
  clip-path: polygon(0 0, 70% 0, 100% 100%, 0% 100%);
      padding-bottom: 50px;
}
    
    #claim .field--name-field-ept-text {
    top: 23%;
    left: 48%;
    align-items: center;
    height: 34%;
  }
    
     *:lang(en) #claim .field--name-field-ept-text {
    top: 21%;
    left: 45%;
    align-items: center;
    height: 34%;
  }
    
    #claim .field--name-field-ept-text p {
      font-size: 24px !important;
    }
    
       *:lang(en) #claim .field--name-field-ept-text p {
      font-size: 20px !important;
         white-space: nowrap;
    }
 
    #highlights img {
      clip-path: none;
    }
    
}


@media (max-width: 520px) {

     #claim .field--name-field-ept-text {
    top: 22%;
    left: 48%;
    align-items: center;
    height: 34%;
  }
  
  #claim .field--name-field-ept-text p {
    font-size: 21px !important;
  }
  
  .produktdaten p {
    margin-left: 75px;
    hyphens: auto;
  }
  
  .produktdaten img {
    position: absolute;
    margin-top: 90px;
    margin-left: -10px !important;
  }
 
  .produktdaten h2 {
    font-size: 31px !important;
  }
  
}


@media (max-width: 480px) {
    .ept-paragraph-tiles.ept-tiles-two_columns .ept-tiles-wrapper {
    grid-template-columns: 1fr;
      margin-bottom: 25px;
  }
  
  .ept-paragraph-tiles img {
    margin-bottom: 0px !important;
  }
  
     #claim .field--name-field-ept-text {
    top: 18%;
    height: 32%;
    left: 48%;
  }
  
       :lang(en) #claim .field--name-field-ept-text {
    top: 19%;
    height: 32%;
    left: 44%;
  }
  
   #claim .field--name-field-ept-text p {
    font-size: 18px !important;
  }
    
  .node h2 {
  color: #000;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 12px;
}
  
}

@media (max-width: 440px) {
      #claim .field--name-field-ept-text {
    top: 18%;
        height: 30%;
        left: 47%;
  }
  
        *:lang(en) #claim .field--name-field-ept-text {
    top: 18%;
        height: 30%;
        left: 42%;
  }
  
  :lang(en) #claim .field--name-field-ept-text p {
    font-size: 18px !important;
  }
  
}


@media (max-width: 390px) {
      #claim .field--name-field-ept-text {
    top: 17%;
   height: 30%;
   left: 46%;
  }
  
         :lang(en) #claim .field--name-field-ept-text {
    top: 16.5%;
   height: 30%;
   left: 42%;
  }
  
    #claim .field--name-field-ept-text p {
    font-size: 21px;
  }

  
}


@media (max-width: 375px) {
      #claim .field--name-field-ept-text {
    top: 17%;
        left: 45%;
        height: 30%;
  }
  
    #claim .field--name-field-ept-text p {
    font-size: 21px;
  }
  
}