/* PARTNERFARBEN DEFINIEREN */

:root {

  /* TOYOTA */
  --color-toyota-100:#FF0022;
  --color-toyota-130:#B20A20;
  --color-toyota-10:#FEF1F3;


  /* COMDIRECT */
  --color-comdirect-100: #FFF500;


  /* DKB */
  --color-dkb-100: #208FE7;

}




/* PARTNERFARBEN Schrift */

.showcase.toyota {
  color: var(--color-toyota-100);
}

.toyota .current130 {
  color: var(--color-toyota-130);
}



.showcase.comdirect {
  color: var(--color-comdirect-100);
}

.showcase.dkb {
  color: var(--color-dkb-100);
}




/* PARTNERFARBEN Hintergründe */

.showcase .toyotabg {
  background-color: var(--color-toyota-100);
}

.showcase .toyotabg-10 {
  background-color: var(--color-toyota-10);
}

.showcase .comdirectbg {
  background-color: var(--color-comdirect-100);
}

.showcase .dkbbg {
  background-color: var(--color-dkb-100);
}




/* PARTNERFARBEN fill SVG */

svg.fill-toyota path {
  fill: var(--color-toyota-100);
}

svg.fill-dkb path {
  fill: var(--color-dkb-100);
}

svg.fill-comdirect path {
  fill: var(--color-comdirect-100);
}




/* SHOWCASE */



.patnercard-container {
  background-color: var(--white-color);
}


.partnercard-info-headline {
  font-size: 1em;
  font-weight: 700;
  border-bottom: 2px solid currentColor;
}


.partnercard-info-text p {
  font-size: 1.15em;
}


.partner-insights-container {
  color: var(--white-color);
}


.partner-insights-left {
  font-size: 1.25em;
  letter-spacing: 1px;
}

.partner-insights-left span {
  font-weight: 700;
}


.partner-insights-right-text {
  font-size: 1.05em;
  letter-spacing: 1px;
  line-height: 1.25;
  font-weight: 300;
}

.partner-insights-right-text strong {
  font-weight: 700;
}

.partner-insights-right-number {
  font-size: 5.5em;
  font-weight: 700;
  line-height: 1;
}



.partner-success-headline-text p {
  font-size: 1.55em;
  color: var(--main-color);
  opacity: 0.5;
}

.partner-success-headline-text p strong {
  text-transform: uppercase;
  font-weight: 700;
}


.partner-success-container .partner-success-info-headline {
  text-transform: uppercase;
  color: var(--main-color);
  opacity: 0.5;
  font-size: 1.25em;
  font-weight: 600;
  letter-spacing: 1px;
}


.partner-success-info-text {
  line-height: 1;
}


.step1 .partner-success-info-text {
  font-size: 4em;
  font-weight: 700;
}

.step2 .partner-success-info-faktor {
  font-size: 8.5em;
  font-weight: 700;
  line-height: 1;
}

.step3 .partner-success-info-text {
  font-size: 12.4em;
  font-weight: 800;
  white-space: nowrap;
}





.showcase-contact-quote {
  font-size: 2em;
  color: var(--accent1-color);
  font-style: italic;
  line-height: 1.15;
  font-weight: 600;
}

.showcase-contact-details {
  border-left:  2px solid var(--main-color);
}

.showcase-contact-name,
.showcase-contact-position {
  color: var(--main-color);
  line-height: 1.35;
}

.showcase-contact-name {
  font-size: 1.5em;
  font-weight: 700;
}

.showcase-contact-position {
  font-size: 1.15em;
}



.showcase .overlap-quote {
  font-size: .80em;
  hyphens: auto;
  font-style: italic;
}



/* height */
.showcase-slider-container::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 5px !important;
}

/* button */
.showcase-slider-container::-webkit-scrollbar-button {
    background: var(--main-25-color) !important;
}

/* Handle */
.showcase-slider-container::-webkit-scrollbar-thumb {
  border-left: 10px solid var(--white-color) !important;
  border-right: 10px solid var(--white-color) !!important;
  background-clip: padding-box;
}


/* Handle Custom */
.toyota .showcase-slider-container::-webkit-scrollbar-thumb {
  background: var(--color-toyota-100);
}

/* Handle on hover */
.showcase-slider-container::-webkit-scrollbar-thumb:hover {
    background: var(--main-color);
}

/* Track */
.showcase-slider-container::-webkit-scrollbar-track {
    background: var(--main-10-color) !important;
}

/* The track NOT covered by the handle.*/
.showcase-slider-container::-webkit-scrollbar-track-piece {
    background: var(--main-10-color);
}

/* Corner */
.showcase-slider-container::-webkit-scrollbar-corner {
    background: var(--white-color);
}

/* Resizer */
.showcase-slider-container::-webkit-resizer {
    background: var(--white-color);
}



.showcase-external-link a {
  font-size: 1.25em;
}







/* Tablet Portrait */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

  .showcase-contact-name {
    font-size: 1.85em;
  }

  .showcase-contact-position {
    font-size: 14px;
  }

}


/* Tablet Landscape */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}


/* Mobile Portrait */
@media only screen and (max-width: 767px) {

  .showcase .partnercard-info-headline {
    font-size: 10px;
    font-weight: 700;
    border-bottom: 1px solid currentColor;
  }


  .showcase .partnercard-info-text p {
    font-size: 14px;
    line-height: 1.5;
  }

  .showcase .partner-insights-left {
    font-size: 16px;
    letter-spacing: 1px;
  }

  .partner-insights-right-text {
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 1.25;
  }

  .showcase .partner-success-headline-text p {
    font-size: 16px;
  }

  .showcase .partner-success-container .partner-success-info-headline {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
  }

  .showcase .step1 .partner-success-info-text {
    font-size: 6em;
  }

  .showcase .step2 .partner-success-info-faktor,
  .showcase .step3 .partner-success-info-text {
    font-size: 8.4em;
  }

  .showcase .bulletpointsbox .headline-c {
    hyphens: auto;
    font-size: 16px;
    line-height: 1.25;
  }

  .showcase .bulletpointsbox-inner::before,
  .showcase .bulletpointsbox-inner::after  {
    border: 2px solid currentColor;
  }

  .showcase .showcase-contact-quote {
    font-size: 21px;
    text-align: center;
  }

  .showcase .showcase-contact-name {
    font-size: 18px;
    font-weight: 600;
  }

  .showcase .showcase-contact-details {
    border-top: 1px solid var(--main-color);
  }

  .showcase-contact-name, .showcase-contact-position {
    font-size: 14px;
    line-height: 1.35;
  }

  .showcase .showcase-external-link a {
    font-size: 16px;
  }


  .showcase .overlap-quote,
  .showcase .overlap-quote p {
    font-size: 21px;
  }



  .showcase-slider-container::-webkit-scrollbar {
    -webkit-appearance: touch;
  }



  

  

}