/* ------------------------------------------------------------------------- */
/*  1. HERO
    2. PARTNER
    3. TEXT
    4. MARQUEE
    5. SERVICE
    6. PORTFOLIO
    7. PREFOOTER
    8. TESTIMONIALS
    9. MEDIA QUERIES
/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/* HERO
/* ------------------------------------------------------------------------- */
#hero {
  height: 100vh;
}

/* ------------------------------------------------------------------------- */
/* PARTNER
/* ------------------------------------------------------------------------- */
.partner {
    /* grid-area: partner; */
    margin: var(--margin-extra);
    border-bottom: 2px solid #eee;
}
.partner h3 {
  font-size: 2rem; 
}

.icon-gallery,
.icon-gallery .image {
  display: flex;
  align-items: center;
  column-gap: 4%;
}

.icon-gallery .image > img {
  width: 90%;
  height: auto;
}

/* ------------------------------------------------------------------------- */
/* TEXT
/* ------------------------------------------------------------------------- */
#teasertext  h1 {
  font-size: var(--fs-h1);
  width: 64vw;
  line-height: var(--line-height);
  margin: 0 auto;
  text-align: center; 
}

/* ------------------------------------------------------------------------- */
/* MARQUEE - KUNDEN LOGOS
/* ------------------------------------------------------------------------- */
#customer { padding-top: 5rem; }
.customer__marquee { margin: 5% 0 0 0;  }
.customer__marquee .wrapper:first-child { margin-top: 5%; }

.wrapper {
  margin: var(--margin-tb);
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  height: 180px;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
}

.wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

@keyframes scrollLeft {
  to {
    left: -180px;
  }
}

@keyframes scrollRight {
  to {
    right: -180px;
  }
}

.itemLeft,
.itemRight {
  width: 180px;
  height: 180px;
  border-radius: 6px;
  position: absolute;
  animation-timing-function: linear;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}
.customer__marquee .frame-type-header {
  margin: 0 5%;
}  

/* ------------------------------------------------------------------------- */
/* ANIMATION MARQUEE
/* ------------------------------------------------------------------------- */

.itemLeft { left: max(calc(180px * 11), 100%); animation-name: scrollLeft; }
.itemRight { right: max(calc(180px * 11), 100%); animation-name: scrollRight; }

.item1 { animation-delay: calc(30s / 11 * (11 - 1) * -1); }
.item2 { animation-delay: calc(30s / 11 * (11 - 2) * -1); }
.item3 { animation-delay: calc(30s / 11 * (11 - 3) * -1); }
.item4 { animation-delay: calc(30s / 11 * (11 - 4) * -1); }
.item5 { animation-delay: calc(30s / 11 * (11 - 5) * -1); }
.item6 { animation-delay: calc(30s / 11 * (11 - 6) * -1); }
.item7 { animation-delay: calc(30s / 11 * (11 - 7) * -1); }
.item8 { animation-delay: calc(30s / 11 * (11 - 8) * -1); }
.item9 { animation-delay: calc(30s / 11 * (11 - 9) * -1); }
.item10 { animation-delay: calc(30s / 11 * (11 - 10) * -1); }
.item11 { animation-delay: calc(30s / 11 * (11 - 11) * -1); }

/* ------------------------------------------------------------------------- */
/* SERVICE - LEISTUNGEN
/* ------------------------------------------------------------------------- */
.service img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
  transition: all .5s ease-in-out;
}
.service .frame-type-container {
  margin: 10em 0;
}
.service .frame-type-container > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.service #c45, .service #c89  { flex-direction: row-reverse; }
.service #c45 img { transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg); }



@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}


/* ------------------------------------------------------------------------- */
/* REFERENZEN - PORTFOLIO
/* ------------------------------------------------------------------------- */
.gallery { display:flex;}
.left { width:50%; }

.right {
	height:100vh;
	width:50%;
	display:flex;
	flex-direction:column;
	justify-content:center;
  align-items: center;
}

.desktopContent { margin:auto; width:100%; }
.desktopContentSection {
	min-height:100vh;
	display:flex;
	flex-direction:column;
	justify-content:center;
  padding: 0 4em 0 0;
}
.desktopContentSection h3 { font-size: var(--fs-lead); }

.desktopPhotos {
  width: 32vw;
  height: 29vw;
	border-radius:var(--border-radius);
	position:relative;
	overflow:hidden;
	box-shadow:4px 4px 4px rgba(0, 0, 0, 0.4);
}

.desktopPhoto {
	position:absolute;
	width:100%;
	height:100%;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.desktopPhoto .image {
  padding: var(--padding-default);
  height: 25vh;
  transform: scale(1.1) translateY(15%);
  transition: all .4s ease-in-out;
}

#portfolio .desktopPhoto img {
  width: 70%;
  height: auto;
  display: block;
  margin: 0 auto;
  transform: rotate(0deg);
}
.desktopPhoto figcaption {
  margin: var(--margin-tb);
  transform: translateY(500px);
  transition: all .4s ease-in-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.desktopPhoto figcaption h3 span {
  font-size: var(--fs-p);
  font-weight: var(--fs-weight-light);
}

.desktopPhoto figcaption {
  font-size: var(--fs-p);
  font-weight: var(--fs-weight-light);
  color: var(--text-dark);
  text-decoration: none;
}

.desktopPhoto .link-icon {
  background: var(--main-color);
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius-round);
  display: flex;
  justify-content: center;
  align-items: center;
}
.desktopPhoto .link-icon img {
  width: 30px;
  height: auto;
}
.desktopPhoto.bg {
  background-size: 77vw;
  background-position: center;
  transition: all .4s ease-in-out;
  transform: scale(1);
  background-size: cover;
}

.desktopPhoto.bg:nth-child(1) {
  background-image: url(/fileadmin/user_upload/webp/Referenzen/referenz_Nachwuchsstiftung_maschinenbau.webp);
}
.desktopPhoto.bg:nth-child(2) {
  background-image: url(/fileadmin/user_upload/webp/Referenzen/dufährst-mockup.webp);
}
.desktopPhoto.bg:nth-child(3) {
  background-image: url(/fileadmin/user_upload/webp/Referenzen/referenz_zeiterfassung.webp);
}
.desktopPhoto.bg:nth-child(4) {  
  background-image: url(/fileadmin/user_upload/webp/Referenzen/referenz_starke_hoecker.webp);
}

.referenceItem .image-embed-item { visibility: hidden;}

@media(max-width: 592px) {
  #service .mobilePhoto { background-size: cover; width: 95vw !important;}
  #service .mobilePhoto.bg:nth-child(1) {
    background-image: url(/fileadmin/user_upload/webp/Referenzen/referenz_Nachwuchsstiftung_maschinenbau.webp);
  }
  #service .mobilePhoto.bg:nth-child(2) {
    background-image: url(/fileadmin/user_upload/webp/Referenzen/dufährst-mockup.webp);
  }
  #service .mobilePhoto.bg:nth-child(3) {
    background-image: url(/fileadmin/user_upload/webp/Referenzen/referenz_zeiterfassung.webp);
  }
  #service .mobilePhoto.bg:nth-child(4) {  
    background-image: url(/fileadmin/user_upload/webp/Referenzen/referenz_starke_hoecker.webp);
  }
  #service .mobilePhoto .portfolio-element {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 2em;
    padding: 15px;
  }
  #service .mobilePhoto .portfolio__categories { margin-top: -28px; }
  #service .mobilePhoto .portfolio__categories_item {background: rgba(255, 255, 255, 0);}
}

/* ------------------------------------------------------------------------- */
/* REFERENZEN - PORTFOLIO SMALL SCREEN 
/* ------------------------------------------------------------------------- */
.mobileContent {
	display:none;
	width:80vw;
}

.mobilePhoto {
	width:80vw;
	height:80vw;
	border-radius:var(--border-radius);
}

#portfolio p {
  display: block;
  margin-bottom: 2rem;
}

/* ------------------------------------------------------------------------- */
/*  REFERENZEN - MEDIA QUERY
/* ------------------------------------------------------------------------- */
@media screen and (max-width: 599px) {
	.left { display:none; }
	.right {
		height:auto;
		width:100%;
    align-items: flex-start;
    margin: 0rem 0.7rem;
	}	
	.desktopPhotos { display:none; }
	.mobileContent { display:block; }
}

/* ------------------------------------------------------------------------- */
/* PREFOOTER - OFFCANVAS FORM
/* ------------------------------------------------------------------------- */
.prefooter__text { margin: var(--margin-tb) ; }
.prefooter__text h2 { font-size: var(--fs-headline-1); }
.prefooter__text p {
  font-size: var(--fs-lead);
  width: 80%;
  line-height: var(--line-height);
}
.prefooter__text .frame-type-container div:nth-child(2) {margin: var(--margin-tb);}
.prefooter__faq .headline_text.light {
  font-size: var(--fs-h1);
  line-height: var(--line-height);
}

/* ------------------------------------------------------------------------- */
/* TESTIMONIALS
/* ------------------------------------------------------------------------- */
#testimonials .ce-bodytext h2 {
  font-size: var(--fs-h2);
  text-align: center;
  width: 60%;
  margin: 0 auto 3rem auto
}


/* ------------------------------------------------------------------------- */
/* MEDIA QUERY - > 2000
/* ------------------------------------------------------------------------- */

@media(min-width: 2000px) {
  .desktopPhotos {
    width: 24vw;
  }
  .testimonial_item p {
    font-size: 1.5rem;
  }
}

/* ------------------------------------------------------------------------- */
/* MEDIA QUERY - < 1377
/* ------------------------------------------------------------------------- */
@media(min-width: 1180px) and (max-width: 1377px) {
  .service .frame-type-container {
    margin: 8em 0;
  }
  #testimonials .ce-bodytext h2 {
    width: 70vw;
    line-height: 1;
  }
}

/* ------------------------------------------------------------------------- */
/* MEDIA QUERY - < 1179
/* ------------------------------------------------------------------------- */
@media(min-width: 768px) and (max-width: 1179px) {
  #service .frame-type-container { margin: 3em 0; }
  #portfolio .frame-type-container { margin: 5em 0 0 0; }
  #teasertext h1 {
    width: 90vw;
  }
  #testimonials .ce-bodytext h2 {
    width: 90vw;
    line-height: 1;
  }
  .desktopPhotos {
    width: 43vw;
    height: 37vw;
  }
   .desktopContentSection {
    padding: 0 2em 0 0;
  }
  #portfolio p {
    line-height: 1.2;
    font-weight: 100;
    font-size: 1rem;
  }
}

/* ------------------------------------------------------------------------- */
/* MEDIA QUERY - < 767
/* ------------------------------------------------------------------------- */
@media(min-width: 592px) and (max-width: 767px) {
  .wrapper { width: 100%; }
  .itemLeft { left: max(calc(200px* 9), 100%); }
  .itemRight { right: max(calc(200px* 9), calc(100% + 200px));}
  .itemLeft, .itemRight { width: 200px;}
  #service .frame-type-container { margin: var(--margin-tb); }
  #service img, #service figure { display: none; }
  .desktopContentSection {
    padding: 0 2em 0 0;
  }
  #portfolio p {
    line-height: 1.2;
    font-weight: 100;
    font-size: 1rem;
  }
}

/* ------------------------------------------------------------------------- */
/* MEDIA QUERY - < 591
/* ------------------------------------------------------------------------- */
@media(max-width: 591px) {
  .padding-tb { padding: 3em 0; }
  #hero {
    height: 80vh;
  }
  .partner { margin: var(--margin-tb-big); }
  #teasertext h1 {
    font-size: 2.2rem;
    margin-bottom: 3rem;
    width: 85vw;
  }
  
  .wrapper { width: 100%; }
  .wrapper img { width: 80%;}
  .itemLeft { left: max(calc(200px* 9), 100%); }
  .itemRight { right: max(calc(200px* 9), calc(100% + 200px));}
  .itemLeft, .itemRight { width: 200px;}

  #service .frame-type-container { margin: 0; }
  #service img, #service figure { display: none; }

  #portfolio { margin-top: 4rem; }  
  .mobilePhoto {
    /* width: 87vw; */
    height: auto;
    margin-top: 4em;
    border-radius: var(--border-radius);
  }

  #testimonials h2 {
    width: 70%;
    margin: 5rem auto 3rem auto;
  }
  #testimonials .ce-bodytext h2 {
    font-size: 2rem;
    width: 95%;
  }
  
  form { margin: var(--margin-tb); }
  .badge-border {
    font-size: var(--fs-badge);
    padding: var(--padding-default);
  }
  
  form .form-label {
    margin: 0 1em 0 0;
    font-size: var(--fs-labels);
  }
  form .form-group {
    display: flex;
    align-content: center;
    align-items: flex-start;
    padding-bottom: 1em;
    flex-direction: column;
  }
  .menu-link-bg { display: none;}
}


/* ------------------------------------------------------------------------- */
/* MEDIA QUERY - < 399
/* ------------------------------------------------------------------------- */
@media(max-width: 399px) {
  #testimonials .ce-bodytext h2 {
    width: 100%;
    margin: 7rem auto 3rem auto;
  }
  form input[type="text"], form input[type="email"], form select {
    min-width: 350px;
  }
  #portfolio .ce-bodytext h2 {
    margin-bottom: 4rem;
  }
  #testimonials .margin-lr-large {
    margin: 0 1rem;
  }
  .margin-lr-large { margin: 0;}
}