.groupe-banner-mt-propeller {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.groupe-banner-mt-propeller .row {
    position: relative;
    width: 100%;
    margin: 0;
    min-height: var(--banner-min-height);
}

.bild-hintergrund {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
    clip-path: var(--banner-clip-path);
}

.bild-hintergrund .imgcontent,
.bild-hintergrund img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.bild-hintergrund::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-dark);
    clip-path: inherit;
}

.banner-inner-wrapper {
    position: relative;
    z-index: var(--z-1);
    max-width: var(--banner-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: var(--banner-padding-top) var(--banner-padding-x) var(--banner-padding-bottom);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.groupe-banner-text,
.groupe-banner-video {
    color: var(--fc-white);
    display: flex;
    align-items: center;
}

.groupe-banner-text .textcontent,
.groupe-banner-video .textcontent {
    width: 100%;
}

.groupe-banner-video video {
    width: 100%;
    display: block;
    border-radius: var(--br-video);
}

.groupe-banner-col-key {
    width: 100%;
    display: flex;
    gap: 8px;
    margin-top: -20px;
}

.groupe-banner-col-key .collection_list.col-key-facts {
    width: 33.33%;
    float: left;
    padding: 5px !important;
}

.groupe-banner-col-key .collection_container {
    border: 2px solid var(--clr-keyfact-border);
    border-radius: var(--br-keyfact);
    padding: 16px 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
}

.col-key-facts-number {
    font-size: var(--fs-keyfact-number);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    color: var(--fc-white);
    margin-bottom: 12px;
}

.col-key-facts-text {
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular);
    line-height: var(--lh-1-3);
    color: var(--fc-white);
}

.home #area-3.main-screen {
    background-color: var(--clr-primary-white);
}

.home #area-3.main-screen {
    padding: 0 !important;
    position: relative;
    float: left;
    width: 100%;
}



/* ===============================
   AREA 6 – CAREERS BANNER (LEFT)
================================ */
.groupe-banner-left {
    position: relative;
    padding: 0 !important;
    overflow: hidden;
}

.groupe-banner-left .row {
    position: relative;
    width: 100%;
    min-height: 444px;
    margin: 0;
}


.banner-hintergrund-left {
    position: absolute;
    inset: 0;
    z-index: 0;
    clip-path: polygon(
        0 10%,
        100% 0,
        100% 90%,
        0 100%
    );
}

.banner-hintergrund-left .imgcontent,
.banner-hintergrund-left img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.banner-hintergrund-left::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-dark);
}

.banner-left-wrapper {
    position: relative;
    z-index: 1;
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
    padding: 160px 20px 90px;
    display: flex;
    height: 444px;
    flex-direction: column;
    align-items: flex-start;
}

.banner-title-left {
    position: relative;
    margin-bottom: 28px;
}

.banner-title-left h3 {
    font-size: 38px;
    line-height: 1.2;
    font-weight: var(--fw-bold);
    color: var(--fc-white);
    margin: 0;
}

.banner-title-left::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    background: #ffffff;
    margin-top: 18px;
}

.banner-text-left .textcontent {
    font-size: var(--fs-16);
    line-height: var(--lh-1-6);
    color: var(--fc-white);
    opacity: 0.9;
    max-width: 750px;
    margin-bottom: 32px;
}

.banner-button-left .textcontent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 50px;
    background: #ffffff;
    color: #339933;
    font-size: var(--fs-14);
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--trans-medium);
}


.banner-button-left .textcontent:hover {
    background: #f2f2f2;
}


.banner-button-left .textcontent a {
    color: #339933;
    text-decoration: none;
    font-size: var(--fs-14);
    font-weight: 500;
}




.home #area-6.main-screen.grey {
    background: linear-gradient(
        var(--clr-primary-light) 0 50%,
        var(--clr-primary-white) 50% 100%
    );
}



.home #area-6.main-screen {
    padding: 0 !important;
    position: relative;
    float: left;
    width: 100%;
}


@media (max-width: 991px) {
    .banner-title-left h3 {
        font-size: 30px;
    }

    .banner-left-wrapper {
        padding: 137px 20px 80px;
    }
}

@media (max-width: 576px) {
    .banner-title-left h3 {
        font-size: var(--fs-26);
    }

    .banner-left-wrapper {
        padding: 88px 16px 70px;
    }
}




@media (max-width: 1200px) {

  .groupe-banner-mt-propeller .banner-inner-wrapper {
    padding: 155px 20px 90px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  .groupe-banner-text {
    flex: 0 0 60% !important;
    max-width: 60% !important;
    font-size: var(--fs-14) !important;
    line-height: var(--lh-1-45) !important;
  }

  .groupe-banner-video {
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }

  .groupe-banner-col-key {
    margin-top: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 10px !important;
  }

  .groupe-banner-col-key .collection_list.col-key-facts {
    width: 100% !important;
    padding: 0 !important;
  }

  .groupe-banner-col-key .collection_container {
    padding: 10px 12px !important;
  }

  .col-key-facts-number {
    font-size: var(--fs-20) !important;
    margin-bottom: 6px !important;
  }

  .col-key-facts-text {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

}


@media (max-width: 720px) {

  .groupe-banner-mt-propeller .banner-inner-wrapper {
    padding: 80px 16px 50px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  .groupe-banner-text {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    font-size: var(--fs-14) !important;
    line-height: var(--lh-1-45) !important;
    order: 1 !important;
  }

  .groupe-banner-video {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: 2 !important;
    margin-top: 16px !important;
  }

  .groupe-banner-video .textcontent {
    max-width: 100% !important;
  }

  .groupe-banner-video video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }

  .groupe-banner-col-key {
    width: 100% !important;
    margin-top: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    order: 3 !important;
  }

  .groupe-banner-col-key .collection_list.col-key-facts {
    width: 100% !important;
    padding: 0 !important;
  }

  /* .groupe-banner-col-key .collection_list.col-key-facts:last-child {
    grid-column: 1 / -1 !important;
  } */

  .groupe-banner-col-key .collection_container {
    padding: 12px 14px !important;
  }

  .col-key-facts-number {
    font-size: 22px !important;
    margin-bottom: 6px !important;
  }

  .col-key-facts-text {
    font-size: 12px !important;
    line-height: var(--lh-1-25) !important;
  }

  .groupe-banner-mt-propeller .bild-hintergrund {
    clip-path: none !important;
  }

  .groupe-banner-mt-propeller .bild-hintergrund::after {
    clip-path: none !important;
  }

  .home #area-3.main-screen {
    padding: 5rem 0 !important;
    position: relative;
    float: left;
    width: 100%;
  }

}

/* Center CTA banner */

/* #area-4.main-screen.grey{
  background-color: var(--clr-primary-white);
} */



.groupe-banner-center{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.groupe-banner-center .row{
  position: relative;
  width: 100%;
  margin: 0;
  min-height: 390px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 110px 20px;
}

.groupe-banner-center .banner-hintergrund-left{
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}

.groupe-banner-center .banner-hintergrund-left .imgcontent,
.groupe-banner-center .banner-hintergrund-left img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.groupe-banner-center .banner-hintergrund-left::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
}

.groupe-banner-center .banner-title-center,
.groupe-banner-center .banner-text-center,
.groupe-banner-center .banner-button-left{
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
}

.groupe-banner-center .banner-title-center h3{
  margin: 0;
  color: var(--fc-white);
  font-family: var(--ff-heading);
  font-weight: var(--fw-bold);
  font-size: 30px;
  line-height: 1.2;
}

.groupe-banner-center .banner-title-center h3::after{
  content: "";
  display: block;
  width: var(--size-title-line-width, 80px);
  height: var(--size-title-line-height, 4px);
  background: var(--clr-accent);
  margin: 18px auto 0;
}

.groupe-banner-center .banner-text-center{
  margin-top: 18px;
}

.groupe-banner-center .banner-text-center .textcontent,
.groupe-banner-center .banner-text-center .textcontent div,
.groupe-banner-center .banner-text-center .textcontent p{
  margin: 0;
  color: var(--fc-white);
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-1-5);
  opacity: 0.9;
}

.groupe-banner-center .banner-button-left{
  width: auto;
  margin-top: 34px;
  padding: 0 12px;
}

.groupe-banner-center .banner-button-left .textcontent{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 40px;
  background: var(--clr-primary-white);
  color: var(--clr-accent);
  font-family: var(--ff-body);
  font-size: var(--fs-14);
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}

.groupe-banner-center .banner-button-left:nth-of-type(1){
  margin-right: 8px;
}

.groupe-banner-center .banner-button-left:nth-of-type(2){
  margin-left: 8px;
}


/* .products #area-4{
  padding: 0;
} */

.products #area-9{
  padding-top: 3rem;
}

.products #area-3{
  padding-bottom: 3rem;
}




@media (max-width: 720px){
  .groupe-banner-center .row{
    min-height: 360px;
    padding: 90px 16px;
  }

  .groupe-banner-center .banner-title-center h3{
    font-size: var(--fs-26);
  }

  .groupe-banner-center .banner-text-center .textcontent,
  .groupe-banner-center .banner-text-center .textcontent div,
  .groupe-banner-center .banner-text-center .textcontent p{
    font-size: var(--fs-16);
  }

  .groupe-banner-center .banner-button-left{
    width: 100%;
    margin-top: 18px;
  }

  .groupe-banner-center .banner-button-left:nth-of-type(1),
  .groupe-banner-center .banner-button-left:nth-of-type(2){
    margin-left: 0;
    margin-right: 0;
  }

  .groupe-banner-center .banner-button-left .textcontent{
    width: 100%;
    max-width: 320px;
  }
}








/* =========================================================
   GLOBAL — Detail Banner Component
========================================================= */

.main-screen .collection_list.col-prod-det-ban{
  width: 100%;
  float: none;
  padding: 0;
  margin: 0;
  display: block;
  position: relative;
}

.main-screen .collection_list.col-prod-det-ban .collection_container{
  position: relative;
  width: 100%;
  min-height: 260px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* background image */
.main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-bild{
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: var(
    --banner-clip-path,
    polygon(0 10%, 100% 0, 100% 90%, 0 100%)
  );
}

.main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-bild img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-bild::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-dark, rgba(0,0,0,.65));
}

/* wrapper (content layout) */
.main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-wrapper{
  position: relative;
  z-index: 1;
  max-width: var(--banner-max-width, 1380px);
  margin: 0 auto;
  padding: 120px 20px 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-left{
  max-width: 620px;
}

.main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-right{
  flex: 0 0 auto;
}

/* title */
.main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-title{
  margin: 0 0 18px 0;
  color: var(--fc-white, #fff);
  font-family: var(--ff-heading, 'Raleway', sans-serif);
  font-size: 34px;
  line-height: 1.2;
  font-weight: var(--fw-bold, 700);
}

.main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-title::after{
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--clr-accent, #339933);
  margin-top: 14px;
}

/* text */
.main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-text{
  margin: 0;
  color: var(--fc-white, #fff);
  opacity: .9;
  font-family: var(--ff-body, 'Raleway', sans-serif);
  font-size: var(--fs-16);
  line-height: var(--lh-1-6);
}

/* button/link */
.main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-link a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: var(--p-button, 10px 15px);
  background: var(--clr-primary-white, #fff);
  color: var(--clr-accent, #339933);
  font-size: var(--fs-400, 14px);
  font-weight: 500;
  border-radius: var(--br-keyfact);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--trans-medium);
}

.main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-link a:hover{
  background: #f2f2f2;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px){
  .main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-wrapper{
    padding: 70px 20px 55px;
    flex-direction: column;
    align-items: flex-start;
  }

  .main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-title{
    font-size: 28px;
  }
}

@media (max-width: 640px){
  .main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-wrapper{
    padding: 60px 14px 42px;
  }

  .main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-link{
    width: 100%;
    margin-top: 10px;
  }

  .main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-link a{
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 576px){
  .main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-wrapper{
    padding: 65px 16px 50px;
  }

  .main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-title{
    font-size: 26px;
  }

  .main-screen .collection_list.col-prod-det-ban .col-prod-det-ban-bild{
    clip-path: none;
  }
}



/* =========================================================
   MOD — Detail Banner: banner-left
========================================================= */


.banner-left .collection_list.col-prod-det-ban .col-prod-det-ban-wrapper{
  justify-content: flex-start;
  align-items: flex-start;
  gap: 18px;
}

.banner-left .collection_list.col-prod-det-ban .col-prod-det-ban-right{
  width: 100%;
  flex: 0 0 100%;
}

.banner-left .collection_list.col-prod-det-ban .col-prod-det-ban-left{
  max-width: none;
  width: 100%;
}

.banner-left .collection_list.col-prod-det-ban .col-prod-det-ban-title::after{
  background: #ffffff;
  height: 4px;
  border-radius: 999px;
}

.banner-left .collection_list.col-prod-det-ban .col-prod-det-ban-link{
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.banner-left .collection_list.col-prod-det-ban .col-prod-det-ban-link a{
  min-width: 220px;
}
.banner-left .collection_list.col-prod-det-ban .col-prod-det-ban-link{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
}

.banner-left .collection_list.col-prod-det-ban .col-prod-det-ban-wrapper{
  padding: 140px 20px 60px;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 18px;
}


@media (min-width: 992px){
  .banner-left .collection_list.col-prod-det-ban .col-prod-det-ban-wrapper{
    flex-direction: column;
  }
}