/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2023/2024 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->													                            6.00/00 - 28-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;}
  .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: 70vh; /* 500px; */}
  .hero-overlay     {margin-top: 0;}
  .jump4next        {right:16px;} /* from design.css */
}

@media only screen and (min-width: 1170px) {
  .cd-hero__slider  {height: calc(100vh - 186px - 60px);} /* 256px <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/bretz-hufer-unternehmen_m.webp');}*/
.cd-hero__slide:nth-of-type(1)  {background-image:url('../content/images/image-slider/bretz-hufer-unternehmen_m.webp');}
.cd-hero__slide:nth-of-type(2)  {background-image:url('../content/images/image-slider/bretz-hufer-jobs_m.webp');}
.cd-hero__slide:nth-of-type(3)  {background-image:url('../content/images/image-slider/bretz-hufer-team_m.webp');}
.cd-hero__slide:nth-of-type(4)  {background-image:url('../content/images/image-slider/bretz-hufer-technik_m.webp');}
.cd-hero__slide:nth-of-type(5)  {background-image:url('../content/images/image-slider/bretz-hufer-montage_m.webp');}
.cd-hero__slide:nth-of-type(6)  {background-image:url('../content/images/image-slider/bretz-hufer-sulzbach.webp');background-position:top center;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 */
/* Standard-Stil für .hero-overlay (unterhalb des Headers) */
.hero-overlay {
  width: 100%;
  margin: 2rem auto;
  margin-top:0;
  margin-right:0;
  margin-left:0;
  padding:.8rem;
  border:0px solid red;
  background:rgb(255,255,255,.8);
  text-align: center; /* Horizontal zentrieren auf normalen Desktops */
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Spezialstil für .hero-overlay auf Geräten mit einer Breite von mindestens 1024px (z. B. iPad) */
@media (min-width: 1024px) {
  .hero-overlay {
    text-align: center; /* Horizontal zentrieren auf Geräten mit einer Breite von mindestens 1024px */
  }
}

@media (max-width: 768px) {
  .hero-overlay {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    bottom: 0;
    max-height: none; /* Zurücksetzen der max-height */
    height: calc(100% + 42px); /* Das Overlay um 32px nach oben und unten vergrößern */
    padding: 10px 0 4px 0; /* Zusätzlichen Raum oben und unten hinzufügen */
    border: 0px solid orange;
    z-index: 999;
    text-align: center; /* Text horizontal zentrieren */
  }
}


/* background-image full screen */
.cd-hero__slide:nth-of-type(6) .hero-overlay {
  position: absolute;
  top: 10%; /* Passen Sie den Wert an, um das Overlay höher zu positionieren */
  left:50%; /* Links ausrichten */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 65ch;
  margin-left: 0;
  background: rgb(255,255,255,.8);
  border: 1px solid rgb(0,84,149,.8);
  border-radius: var(--img-bdr-rnd);
  transform: translate(-50%);
}

@media (max-width: 768px) {
  .cd-hero__slide:nth-of-type(6) .hero-overlay {
    display: none;
  }
}

@media (max-width: 1024px) {
  .cd-hero__slide:nth-of-type(6) .hero-overlay {
    text-align: center; /* Horizontal zentrieren auf dem iPad */
    top:10%;
    left:45%;
  }
}

.cd-hero__content h2, .cd-hero__content p {
  /*max-width: 460px;*/
  min-width: 100%;
  margin: 0 auto .5rem;
  line-height: 1;
  /*hyphens: none;*/
  color:var(--color-primary);     /* #005495; */ /* blue-dark */ /* self #ffffff; */
}

.cd-hero__content h2  {font-size: 2rem;text-transform:uppercase;text-shadow:var(--txt-shadow);  /* 0 1px 3px rgba(0,0,0,.2); */ /* black-light */}
.cd-hero__content p   {font-size: 1rem;line-height: 1.2;}

.cd-hero__btn {
  display: inline-block;
  padding: .4em .8em;
  margin-top: .8em;
  background-color: rgba(204, 0, 0, 1);
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 1px;
  color: #ffffff;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.cd-hero__btn.cd-hero__btn--secondary       {background: 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(3,61,126,.6);color:#fff; /* rgb(204,0,0,1); */}

@media only screen and (min-width: 768px) {
  .cd-hero__slide:nth-of-type(1),
  .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:500px; /*520px;*/}
  .cd-hero__content h2                                          {font-size: 2.2em;font-weight: 200;}
  .cd-hero__btn                                                 {font-size: 1.2rem;padding:.4em .8em; !important;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: 0px 0 1px 0;
  background:rgb(255,255,255,.4); /* self rgb(0,1,1,.5); */
  color:red;
  /*z-index:0;*/
  z-index:-9999;
}

.cd-hero__nav {
  position:absolute;
  width:100%;
  /*height: 72px;*/
  bottom:8px;
  text-align:center;
  text-decoration:none;
  /*z-index:0; /* self 2; */
  background:#fff;
  /* BRETZ-HUFER ONLY -1 !!! */
  z-index:-1; 
}

.cd-hero__nav nav, .cd-hero__nav ul, .cd-hero__nav li, .cd-hero__nav a {height:100%;color:none;/*background:orange;*/}
.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;z-index:-9999;}
.cd-hero__nav li                    {display:inline-block;width:60px;float:left;}
.cd-hero__nav .cd-selected a        {color:none; /* #013C80; */ /* rgb(255,255,255,.4); /* self #2c343b; */}
.cd-hero__nav .cd-selected a:hover  {color:none; /* #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:none; /* #013C80; *//*#fff; /* self #a8b4be; */
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
  text-decoration:none;
}
.cd-hero__nav a:hover {color:none; /* #fff; */}
.cd-hero__nav a::before {
  content:'';
  position:absolute;
  top:-2px; /* self 8px; */
  right:auto;
  left:50%;
  width:24px;
  height:24px;
  transform: translateX(-50%);
  /* Bretz-hufer -> must be deactivated !!! */
  /*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 */	
/* ------------------------------------------------------------------------------ */