/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2023/2024 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->													                            6.00/00 - 11-09-23
/* layout	-> startpage only                           													  */
/* file 	-> design/start-slider.css				                    								  */
/* info	  -> https://codyhouse.co/gem/hero-slider		          									  */
/* ------------------------------------------------------------------------------ */
/* START-SLIDER */
img, video        {position:relative;max-width:100%;height:auto;z-index:0;}
.cd-hero          {position:relative;}
.cd-hero__slider  {position:relative;top:0;height:36vh; /* self 360px; */width:100%;overflow:hidden;border:0px solid red;}
.cd-hero__slide {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transform:translateZ(0px);
  will-change:transform;
  transform:translateX(100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* this is the visible slide */
.cd-hero__slide.cd-hero__slide--selected  {transform:translateX(0);}
/* slide hidden on the left */
.cd-hero__slide.cd-hero__slide--move-left {transform:translateX(-100%);}
/* the cd-hero__slide--is-moving class is assigned to the slide which is moving outside the viewport */
.cd-hero__slide.cd-hero__slide--is-moving,
.cd-hero__slide.cd-hero__slide--selected  {-webkit-transition:-webkit-transform 0.5s;transition:-webkit-transform 0.5s;transition:transform 0.5s;transition:transform 0.5s,-webkit-transform 0.5s;}

/* NAV4SLIDER */
@media only screen and (max-width: 767px) { 
  .hero-overlay {margin-top:0;} /* self 1%; */
  .cd-hero__nav {display:none;}
  .js-cd-nav    {display:none;}

  .jump4next    {display:none;} /* from design.css */
}

@media only screen and (min-width: 768px) {
  /* NEW */
  img               {max-width:100%; height:auto;}
  .cd-hero__slider  {height: 100vh;}/* 65vh; /* 500px; */
  .hero-overlay     {margin-top: 10%;}
  .jump4next        {right:16px;} /* from design.css */
}

@media only screen and (min-width: 1170px) {
  .cd-hero__slider  {height: calc(100vh - 256px - 60px);} /* 256px 186px <header> + 60px <nav> + 4px shadow*/
}

/* ------------------------------------------------------------------------------ */
/* slide style */
.cd-hero__slide                 {background:rgb(242,242,242,.2);background-position:center center;background-size:cover;background-repeat:no-repeat;}
.cd-hero__slide:first-of-type   {/*background-image:url('../content/images/image-slider/technik-1m.webp');*/}
.cd-hero__slide:nth-of-type(2)  {background-image:url('../content/images/image-slider/technik-2m.webp');}
.cd-hero__slide:nth-of-type(3)  {background-image:url('../content/images/image-slider/technik-3m.webp');}
.cd-hero__slide:nth-of-type(4)  {background-image:url('../content/images/image-slider/technik-4m.webp');}
.cd-hero__slide:nth-of-type(5)  {background-image:url('../content/images/image-slider/technik-5m.webp');}
/* 6th IMAGE AS FULL BACKGROUND ONLY !!! */
.cd-hero__slide:nth-of-type(6)  {background-image:url('../content/images/image-slider/technik-6.webp');background-position:bottom center;background-size:cover;background-repeat:no-repeat;/*background-size:100vw;*/}

.cd-hero__content.cd-hero__content--full-width,
.cd-hero__content.cd-hero__content--half-width {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  /* this padding is used to align the text */
  padding-top: 32px; /* 100px; */
  text-align:center;
  transform:translateZ(0);
  will-change:transform;
  z-index:1;
}

.cd-hero__content h2, .cd-hero__content p, .cd-hero__btn, .cd-hero__content--img img {
  transform:translateZ(0);
  will-change:transform;
  /*background:rgb(255,255,255,.2);*/
}

/* hide image on mobile device */
.cd-hero__content.cd-hero__content--img {display:none;}
.cd-hero__content--img img {
  position:absolute;
  left:50%;
  top: 45%; /* self 50%; */
  bottom:auto;
  right:auto;
  /*border: 1px solid rgb(255,255,255,.8);*/
  transform:translateX(-50%) translateY(-50%);
}
/* hide video on mobile device */
.cd-hero__content.cd-hero__content--bg-video {
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
/* you won't see this element in the html, but it will be injected using javascript */
.cd-hero__content--bg-video video {
  display:block;
  min-height:100%;
  min-width:100%;
  max-width:none;
  height:auto;
  width:auto;
  position:absolute;
  left:50%;
  top:50%;
  bottom:auto;
  right:auto;
  transform:translateX(-50%) translateY(-50%);
}
/* ------------------------------------------------------------------------------ */
/* hero - headline */
.hero-overlay {
  /*max-width: 80vw;*/
  margin: 2rem auto;
  margin-top: 20%;
  margin-right: 0rem;
  margin-left: 0rem;
  padding:.8rem;
  border: 0px solid red;
/* background:rgb(255,255,255,.2); */
}
/* specials for each slide - ie the hero-overlay */
.cd-hero__slide:nth-of-type(6) .hero-overlay {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  margin-top: .4%;
  margin-left: 4%;
  max-width:55ch; /* 40%; */
  background:rgb(255,255,255,.8);
  border:1px solid rgb(0,84,149,.8);
  border-radius:var(--img-bdr-rnd); /* 1rem; */
}

.cd-hero__content h2, .cd-hero__content p {
  /*max-width: 460px;*/
  min-width: 100%;
  margin: 0 auto 1rem;
  line-height: 1.2;
  hyphens: none;
}

.cd-hero__content h2  {font-size: 2.4rem;text-transform:uppercase;text-shadow:var(--txt-shadow);color:var(--main-col-h1);}
.cd-hero__content p   {font-size: 1.2rem;line-height: 1.4;color:var(--main-col-h2);}

.cd-hero__btn {
  display:inline-block;
  padding:.4em .8em;
  margin-top: .8em;
  letter-spacing: 1px;
  font-family:var(--font-body);
  font-size: 1.3rem;
  font-weight: 400;
  text-decoration:none;
  background: rgb(204,0,0,1);
  color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,.2);
  /*-webkit-transition: background-color 0.2s;*/
  transition: background-color 0.4s;
}

.cd-hero__btn.cd-hero__btn--secondary       {background:rgb(0,0,0,.3);} /* rgb(3,61,126,1); */
.cd-hero__btn:nth-of-type(2)                {margin-left:1em;}
.cd-hero__btn:hover                         {background: rgb(204,0,0,.6);color:#fff; /* rgb(3,61,126,1); */}
.cd-hero__btn.cd-hero__btn--secondary:hover {background:rgb(0,0,0,.6); color:#fff; /* rgb(3,61,126,.6);rgb(204,0,0,1); */}

@media only screen and (min-width: 768px) {
  .cd-hero__slide:nth-of-type(2),
  .cd-hero__slide:nth-of-type(3),
  .cd-hero__slide:nth-of-type(4), 
  .cd-hero__slide:nth-of-type(5)
  /*.cd-hero__slide:nth-of-type(6)*/ {
    background-image:none;
  }
  .cd-hero__content.cd-hero__content--full-width,
  .cd-hero__content.cd-hero__content--half-width {
    padding-top: 8%; /* self 150px; */
  }
  .cd-hero__content.cd-hero__content--bg-video                  {display:block;}
  .cd-hero__content.cd-hero__content--half-width                {width:45%;}
  .cd-hero__content.cd-hero__content--half-width:first-of-type  {left:5%;}
  .cd-hero__content.cd-hero__content--half-width:nth-of-type(2) {right:5%;left:auto;}
  .cd-hero__content.cd-hero__content--img                       {display:block;}
  .cd-hero__content h2, .cd-hero__content p                     {max-width:520px;}
  .cd-hero__content h2                                          {font-size: 2.4em;font-weight: 300;}
  .cd-hero__btn                                                 {font-size: 1.4rem;border:var(--btn-bdr-rnd);}
}

@media only screen and (min-width: 1170px) {
  .cd-hero__content.cd-hero__content--full-width,
  .cd-hero__content.cd-hero__content--half-width {
    padding-top: 0%; /* self 8% OR 220px; */
  }
  .cd-hero__content h2, .cd-hero__content p                     {margin-bottom: 20px;}
  .cd-hero__content h2                                          {font-size: 3.2em;}
  .cd-hero__content p                                           {font-size: 1.6rem;}
}

/* image-overlay for copyright */

.hero-caption {
  position:absolute;
  bottom: 225px;
  right: 1px;
  padding:.6em .8em;
  line-height:1.2;
  font-size:.8rem;
  font-weight:300;
  text-align:right;
  background:rgb(255,255,255,.8);
  color: rgb(0,0,0,1);
  border: 1px solid rgb(255,255,255,.9);
  border-width: 1px 0 0 1px;
  opacity:0;
  transition:opacity 0.6s ease-in-out;
  pointer-events:none;
}
/* make the caption visible to mouse events */
.hero-slide:hover .hero-caption {opacity:1;pointer-events:auto;}

@media only screen and (max-width: 1024px) {.hero-caption {display:none;}}


/* ------------------------------------------------------------------------------ */
/* single slide animation */
@media only screen and (min-width: 768px) {
  .cd-hero__content.cd-hero__content--half-width {
    opacity:0;
    transform:translateX(40px);
  }
  .cd-hero__slide--move-left .cd-hero__content.cd-hero__content--half-width {
    transform:translateX(-40px);
  }
  .cd-hero__slide--selected .cd-hero__content.cd-hero__content--half-width {
    /* this is the visible slide */
    opacity:1;
    transform:translateX(0);
  }
  .cd-hero__slide--is-moving .cd-hero__content.cd-hero__content--half-width {
    /* this is the slide moving outside the viewport wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
    -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
    transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
    transition: opacity 0s 0.5s, transform 0s 0.5s;
    transition: opacity 0s 0.5s, transform 0s 0.5s, -webkit-transform 0s 0.5s;
  }
  .cd-hero__slide--from-left.cd-hero__slide--selected .cd-hero__content.cd-hero__content--half-width:nth-of-type(2),
  .cd-hero__slide--from-right.cd-hero__slide--selected .cd-hero__content.cd-hero__content--half-width:first-of-type {
    /* this is the selected slide - different animation if it's entering from left or right */
    -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
    transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
    transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
    transition: opacity 0.4s 0.2s, transform 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
  }
  .cd-hero__slide--from-left.cd-hero__slide--selected .cd-hero__content.cd-hero__content--half-width:first-of-type,
  .cd-hero__slide--from-right.cd-hero__slide--selected .cd-hero__content.cd-hero__content--half-width:nth-of-type(2) {
    /* this is the selected slide - different animation if it's entering from left or right */
    -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
    transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
    transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
    transition: opacity 0.4s 0.4s, transform 0.5s 0.4s, -webkit-transform 0.5s 0.4s;
  }
  .cd-hero__content--full-width h2,
  .cd-hero__content--full-width p,
  .cd-hero__content--full-width .cd-hero__btn {
    transform: translateX(100px);
  }
  .cd-hero__slide--move-left .cd-hero__content--full-width h2,
  .cd-hero__slide--move-left .cd-hero__content--full-width p,
  .cd-hero__slide--move-left .cd-hero__content--full-width .cd-hero__btn {
    transform: translateX(-100px);
  }
  .cd-hero__slide--selected .cd-hero__content--full-width h2,
  .cd-hero__slide--selected .cd-hero__content--full-width p,
  .cd-hero__slide--selected .cd-hero__content--full-width .cd-hero__btn {
    /* this is the visible slide */
    transform: translateX(0);
  }
  .cd-hero__slide--is-moving .cd-hero__content--full-width h2,
  .cd-hero__slide--is-moving .cd-hero__content--full-width p,
  .cd-hero__slide--is-moving .cd-hero__content--full-width .cd-hero__btn {
    /* this is the slide moving outside the viewport wait for the end of the transition on the li parent before set translate to 100px/-100px */
    -webkit-transition: -webkit-transform 0s 0.5s;
    transition: -webkit-transform 0s 0.5s;
    transition: transform 0s 0.5s;
    transition: transform 0s 0.5s, -webkit-transform 0s 0.5s;
  }
  .cd-hero__slide--selected h2 {
    -webkit-transition: -webkit-transform 0.5s 0.2s;
    transition: -webkit-transform 0.5s 0.2s;
    transition: transform 0.5s 0.2s;
    transition: transform 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
  }
  .cd-hero__slide--selected p {
    -webkit-transition: -webkit-transform 0.5s 0.3s;
    transition: -webkit-transform 0.5s 0.3s;
    transition: transform 0.5s 0.3s;
    transition: transform 0.5s 0.3s, -webkit-transform 0.5s 0.3s;
  }
  .cd-hero__slide--selected .cd-hero__btn {
    -webkit-transition: background-color 0.2s 0s, -webkit-transform 0.5s 0.4s;
    transition: background-color 0.2s 0s, -webkit-transform 0.5s 0.4s;
    transition: transform 0.5s 0.4s, background-color 0.2s 0s;
    transition: transform 0.5s 0.4s, background-color 0.2s 0s, -webkit-transform 0.5s 0.4s;
  }
}

/* ------------------------------------------------------------------------------ */
/* slider navigation */
.nav-slider {
  display:flex;
  height: 74px;
  justify-content:center;
  align-items:center;
  box-shadow:var(--nav-shadow); 
  border: 1px solid #ccc;
  border-width: 1px 0;
  background: rgb(255,255,255,.4); /* self rgb(0,1,1,.5); */
  z-index:0;
}

.cd-hero__nav {
  position:absolute;
  width:100%;
  /*height: 72px;*/
  bottom:48px; /* self 8px; */
  font-family:var(--font-body);
  text-align:center;
  text-decoration:none;
  z-index:0; /* self 2; */
}

.cd-hero__nav nav, .cd-hero__nav ul, .cd-hero__nav li, .cd-hero__nav a {height:100%;}
.cd-hero__nav nav {display:inline-block;position:relative;}

/* MARKER DEACTIVATED - DO NOT DELETE IN SCRIPT */
/*
.cd-hero__marker {
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:100%;
  color:#023D82;
  background: rgb(255,255,255,.2);
  -webkit-box-shadow: inset 0 2px 0 currentColor;
          box-shadow: inset 0 2px 0 currentColor;
  -webkit-transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
  transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
}
.cd-hero__marker.cd-hero__marker--item-2 {transform:translateX(100%);}
.cd-hero__marker.cd-hero__marker--item-3 {transform:translateX(200%);}
.cd-hero__marker.cd-hero__marker--item-4 {transform:translateX(300%);}
.cd-hero__marker.cd-hero__marker--item-5 {transform:translateX(400%);}
*/

.cd-hero__nav ul::after             {clear:both;content:'';display:table;}
.cd-hero__nav li                    {display:inline-block;width:60px;float:left;}
.cd-hero__nav .cd-selected a        {color:var(--color-primary);}     /* #013C80; /* rgb(255,255,255,.4); /* self #2c343b; */
.cd-hero__nav .cd-selected a:hover  {color:var(--color-light);}       /* #013C80;background:transparent;

/* nav-text */
.cd-hero__nav a {
  display:block;
  position:relative;
  top:0;
  height:72px;
  /*padding-top:0; /* self 35px; */
  font-size:1rem;
  font-weight:400;
  color:var(--color-primary); /* #013C80; /*#fff; /* self #a8b4be; */
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
  text-decoration:none;
}
.cd-hero__nav a:hover {color:var(--color-light);} /* #fff; */
.cd-hero__nav a::before {
  content:'';
  position:absolute;
  top:-2px; /* self 8px; */
  right:auto;
  left:50%;
  width:24px;
  height:24px;
  transform: translateX(-50%);
  background: url('../content/images/image-slider/cd-icon-navigation.svg') no-repeat 0 0;
}

.cd-hero__nav a:hover                                 {background:var(--color-primary); /* rgb(2,61,130,1); /* rgba(0, 1, 1, 0.5); */ }
.cd-hero__nav li:first-of-type a::before              {background-position:0 0;}
.cd-hero__nav li.cd-selected:first-of-type a::before  {background-position:0 -24px;}
.cd-hero__nav li:nth-of-type(2) a::before             {background-position:-24px 0;}
.cd-hero__nav li.cd-selected:nth-of-type(2) a::before {background-position:-24px -24px;}
.cd-hero__nav li:nth-of-type(3) a::before             {background-position:-48px 0;}
.cd-hero__nav li.cd-selected:nth-of-type(3) a::before {background-position:-48px -24px;}
.cd-hero__nav li:nth-of-type(4) a::before             {background-position:-72px 0;}
.cd-hero__nav li.cd-selected:nth-of-type(4) a::before {background-position:-72px -24px;}
.cd-hero__nav li:nth-of-type(5) a::before             {background-position:-96px 0;}
.cd-hero__nav li.cd-selected:nth-of-type(5) a::before {background-position:-96px -24px;}
.cd-hero__nav li:nth-of-type(6) a::before             {background-position:-120px 0;}
.cd-hero__nav li.cd-selected:nth-of-type(5) a::before {background-position:-120px -24px;}

@media only screen and (min-width: 768px) {
  .cd-hero__nav {
    height: 80px;
  }
  .cd-hero__marker,
  .cd-hero__nav li {
    width: 95px;
  }
  .cd-hero__nav a {
    padding-top: 48px;
    font-size: 1.1rem;
    /* text-transform: uppercase; */
  }
  .cd-hero__nav a::before {top: 18px;}
}

/* ------------------------------------------------------------------------------ */
/* javascript disabled */
.no-js .cd-hero__slide {display:none;}
.no-js .cd-hero__slide.cd-hero__slide--selected {display:block;}
.no-js .cd-hero__nav {display:none;}
/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */