/* =========================
   LAYOUT (ONLY OEM BLOCK)
========================= */

.oem #content .oems_group > .row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  padding:0;
}

.oem #content .oems_group .oems-title,
.oem #content .oems_group .oems-subtitle{
  width:100%;
  text-align:center;
}

.oem #content .oems_group .oems-title h2{
  font-family:var(--ff-heading);
  font-weight:var(--fw-bold);
  font-size:28px;
  line-height:1.25;
  color:var(--fc-primary);
  margin:0;
}

.oem #content .oems_group .oems-subtitle{
  margin-top:12px;
}

.oem #content .oems_group .oems-subtitle .textcontent{
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.55;
  color:rgba(44,44,44,.75);
}

.oem #content .oems_group .oems-col-groupe{
  width:100%;
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  margin-left:-12px;
  margin-right:-12px;
}

.oem #content .oems_group .oems-col-groupe #filter-element{
  width:100%;
  height:1px;
}

.oem #content .oems_group .oems-col-groupe .filter_display{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:18px;
  padding:0 12px;
}

.oem #content .oems_group .button_filter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(34,34,34,.14);
  background:#fff;
  font-family:var(--ff-body);
  font-size:14px;
  color:var(--fc-primary);
  text-decoration:none;
  transition:all .2s ease;
}

.oem #content .oems_group .button_filter:hover{
  color:var(--clr-accent);
  border-color:rgba(51,153,51,.35);
}

.oem #content .oems_group .collection_list.col-propeller-oem.show{
  width:33.3333%;
  padding:0 10px;
  box-sizing:border-box;
  margin-bottom:18px;
}

.oem #content .oems_group .collection_container{
  background:#fff;
  border-radius:10px;
  box-shadow:0 0 12px rgba(0,0,0,.12);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  text-align:center;
  position:relative;
}

.oem #content .oems_group .col-propeller-oem-bild{
  height:170px;
  position:relative;
  overflow:hidden;
}

.oem #content .oems_group .col-propeller-oem-bild img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.oem #content .oems_group .col-propeller-oem-logo{
  position:absolute;
  top:85px;
  left:50%;
  transform:translate(-50%,-50%);
  width:150px;
  height:64px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  z-index:3;
}

.oem #content .oems_group .col-propeller-oem-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.oem #content .oems_group .col-propeller-oem-title{
  margin-top:18px;
  padding:0 22px;
  font-family:var(--ff-heading);
  font-weight:var(--fw-bold);
  font-size:var(--fs-news-title);
  color:var(--fc-primary);
}

.oem #content .oems_group .col-propeller-oem-title::after{
  content:"";
  display:block;
  width:56px;
  height:3px;
  background:var(--clr-accent);
  margin:12px auto 0;
  border-radius:2px;
}

.oem #content .oems_group .collection_content.col-propeller-oem{
  margin-top:12px;
  padding:0 22px;
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.55;
  color:rgba(44,44,44,.75);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  min-height:calc(1.55em * 3);
}

.oem #content .oems_group .oem-meta-row{
  margin-top:auto;
  padding:14px 22px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.2;
  color:var(--clr-accent);
}

.oem #content .oems_group .oem-meta-row .col-propeller-oem-founded,
.oem #content .oems_group .oem-meta-row .col-propeller-oem-location{
  padding:0;
  margin:0;
  color:inherit;
  font:inherit;
  display:inline-flex;
  align-items:center;
}

.oem #content .oems_group .oem-meta-row .col-propeller-oem-location::before{
  content:"•";
  opacity:.85;
  margin-right:10px;
}

.oem #content .oems_group .collection_link{
  padding:0 22px 22px;
  margin-top:0;
}

.oem #content .oems_group .collection_link .button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:var(--br-button);
  background:var(--clr-accent);
  color:#fff;
  font-family:var(--ff-body);
  font-size:14px;
  text-decoration:none;
  transition:transform .15s ease, filter .15s ease;
}

.oem #content .oems_group .collection_link .button:hover{
  transform:translateY(-1px);
  filter:brightness(.95);
}

.oem #content .oems_group .oems-col-groupe .filter_display{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  padding:0 12px;
  margin-bottom:60px;
}

.oem #content .oems_group .oems-col-groupe .button_filter_wrapper_2{
  display:flex;
}

.oem #content .oems_group .oems-col-groupe .button_filter{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:190px;
  min-height:48px;
  padding:10px 18px;
  background:#f5f7fb;
  border-radius:var(--br-keyfact);
  text-decoration:none;
  text-align:center;
  transition:all .2s ease;
}

.oem #content .oems_group .oems-col-groupe .button_filter .filter-desc{
  font-family:var(--ff-body);
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  color:var(--clr-accent);
}

.oem #content .oems_group .oems-col-groupe .button_filter .filter-opt{
  font-family:var(--ff-body);
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  margin-top:2px;
  color:rgba(51,153,51,.75);
}

.oem #content .oems_group .oems-col-groupe .button_filter:hover{
  transform:translateY(-1px);
}

.oem #content .oems_group .oems-col-groupe .button_filter.a-filter,
.oem #content .oems_group .oems-col-groupe .button_filter.active,
.oem #content .oems_group .oems-col-groupe .button_filter.is-active{
  background:var(--clr-accent);
  border-color:transparent;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}

.oem #content .oems_group .oems-col-groupe .button_filter.a-filter .filter-desc,
.oem #content .oems_group .oems-col-groupe .button_filter.active .filter-desc,
.oem #content .oems_group .oems-col-groupe .button_filter.is-active .filter-desc,
.oem #content .oems_group .oems-col-groupe .button_filter.a-filter .filter-opt,
.oem #content .oems_group .oems-col-groupe .button_filter.active .filter-opt,
.oem #content .oems_group .oems-col-groupe .button_filter.is-active .filter-opt{
  color:#fff;
}

.oem #content .oems_group .oems-col-groupe .button_filter:not(:has(.filter-desc)){
  flex-direction:row;
  font-family:var(--ff-body);
  font-size:14px;
  font-weight:600;
  color:var(--clr-accent);
}

.oem #content .oems_group .oems-col-groupe .button_filter.a-filter:not(:has(.filter-desc)),
.oem #content .oems_group .oems-col-groupe .button_filter.active:not(:has(.filter-desc)),
.oem #content .oems_group .oems-col-groupe .button_filter.is-active:not(:has(.filter-desc)){
  color:#fff;
}

@media (max-width:900px){
  .oem #content .oems_group .oems-col-groupe .filter_display{ gap:12px; }
  .oem #content .oems_group .oems-col-groupe .button_filter{ min-width:165px; }
}

@media (max-width:640px){
  .oem #content .oems_group .oems-col-groupe .filter_display{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  .oem #content .oems_group .oems-col-groupe .button_filter{
    flex:0 0 auto;
    min-width:170px;
  }
}

@media (max-width:1100px){
  .oem #content .oems_group .collection_list.col-propeller-oem.show{ width:50%; }
}

@media (max-width:640px){
  .oem #content .oems_group .collection_list.col-propeller-oem.show{ width:100%; padding:0; }
  .oem #content .oems_group .col-propeller-oem-bild{ height:190px; }
  .oem #content .oems_group .col-propeller-oem-logo{ top:95px; width:140px; height:60px; }
  .oem #content .oems_group .oem-meta-row{ padding:14px 16px 10px; font-size:15px; }
}


/* =========================================================
   OEM — Banner (detail banner)
========================================================= */

.oem #area-2.main-screen.grey{
  background: var(--clr-primary-white, #ffffff);
  padding: 1rem 0 !important;
  position: relative;
}

.oem #content{
  padding-bottom: 2rem !important;
}

.oem #area-3{
  padding-top: 2rem !important;
}

.oem > .container{
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.oem .collection_list.col-prod-det-ban{
  width: 100%;
  float: none;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
}

/* host wrapper like .col-propeller-system-banner */
.oem .col-oem-banner,
.oem .col-prod-det-ban,
.oem .collection_list.col-prod-det-ban{
  position: relative;
}

.oem .col-oem-banner{
  overflow: hidden;
}

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

/* background image */
.oem .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%)
  ) !important;
}

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

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

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

.oem .col-prod-det-ban-left{
  max-width: 620px;
}

.oem .col-prod-det-ban-right{
  flex: 0 0 auto;
}

.oem .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);
}

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

.oem .col-prod-det-ban-text{
  margin: 0;
  color: var(--fc-white, #fff);
  opacity: .9;
  font-family: var(--ff-body, 'Raleway', sans-serif);
  font-size: 16px;
  line-height: 1.6;
}

.oem .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) !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s ease;
}

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


.oem #area-9{
  display: none !important;
}





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

@media (max-width: 900px){
  .oem .col-prod-det-ban-wrapper{
    padding: 70px 18px 50px;
    gap: 20px;
  }

  .oem .col-prod-det-ban-title{
    font-size: 28px;
  }

  .oem .col-prod-det-ban-link a{
    min-width: 200px;
  }
}

@media (max-width: 640px){
  .oem .col-prod-det-ban-wrapper{
    padding: 60px 14px 42px;
    flex-direction: column;
    align-items: flex-start;
  }

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

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


@media (max-width: 576px){
  .oem #area-2 .col-prod-det-ban-wrapper{
    padding: 65px 16px 50px;
  }

  .oem #area-2 .col-prod-det-ban-title{
    font-size: 26px;
  }

  .oem #area-2 .col-prod-det-ban-bild{
    clip-path: none !important;
  }
}

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

  .oem #area-2 .col-prod-det-ban-title{
    font-size: 28px;
  }
}


@media (max-width: 340px){
  .oem #content .oems_group .oem-meta-row{
    flex-direction: column;
    gap: 6px;
    justify-content: center;
  }

  /* remove dot separator */
  .oem #content .oems_group .oem-meta-row .col-propeller-oem-location::before{
    content: "" !important;
    margin: 0 !important;
  }
}




/* =========================================================
   OEM — FULL PREVIEW (SUBPAGE CLEANUP)
   Hide parent-only sections and filter elements
========================================================= */

/* Hide full-width areas not needed on subpage */
body.mt.oem.full_preview #area-2,
body.mt.oem.full_preview #area-3,
body.mt.oem.full_preview .oems-title.line-title-center,
body.mt.oem.full_preview .oems-subtitle{
  display: none !important;
}

/* Hide OEM filter (anchor + buttons) */
body.mt.oem.full_preview .oems_group .oems-col-groupe .filter_display,
body.mt.oem.full_preview .oems_group .oems-col-groupe #filter-element{
  display: none !important;
}



/* =========================================================
   OEM FULL PREVIEW — LAYOUT (FINAL + LOGO BELOW IMAGE)
========================================================= */

body.mt.oem.full_preview #content
.collection_full.col-propeller-oem.show{
  width: 100%;
  padding: 0;
  margin: 0;
}

body.mt.oem.full_preview #content
.collection_full.col-propeller-oem.show
.collection_container{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
  background: transparent;
  box-shadow: none;
  padding: 0;
  height: auto;
  text-align: left;
}

/* =========================================================
   LEFT COLUMN
========================================================= */

body.mt.oem.full_preview #content .oem-detail-left{
  display: flex;
  flex-direction: column;
}

body.mt.oem.full_preview #content .col-propeller-oem-title{
  margin: 0 0 10px;
  padding: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--fc-primary);
}

body.mt.oem.full_preview #content .col-propeller-oem-title::after{
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: var(--clr-accent);
  margin: 10px 0 0;
  border-radius: 2px;
}

/* =========================================================
   META ROW (AFTER TITLE)
========================================================= */

body.mt.oem.full_preview #content .oem-meta-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  margin: 10px 0 18px;
  padding: 0 !important;
}

body.mt.oem.full_preview #content .oem-meta-row .col-propeller-oem-founded,
body.mt.oem.full_preview #content .oem-meta-row .col-propeller-oem-location{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-size: 16px !important;
  color: var(--clr-accent);
  line-height: 1.2;
}

/* icons 20x20 */
body.mt.oem.full_preview #content .oem-meta-row .col-propeller-oem-founded::before{
  content: "";
  width: 20px !important;
  height: 20px !important;
  background: url("/userdata/02_Kollektionen/Icons/document.svg") no-repeat center;
  background-size: 20px 20px !important;
  display: inline-block;
}

body.mt.oem.full_preview #content .oem-meta-row .col-propeller-oem-location::before{
  content: "";
  width: 20px !important;
  height: 20px !important;
  background: url("/userdata/02_Kollektionen/Icons/location.svg") no-repeat center;
  background-size: 20px 20px !important;
  display: inline-block;
}

/* remove dot separator from overview styles on full preview */
body.mt.oem.full_preview #content .oem-meta-row .col-propeller-oem-location::before{
  margin: 0 !important;
  opacity: 1 !important;
}

/* hide short teaser text on full preview */
body.mt.oem.full_preview #content .collection_content.col-propeller-oem{
  display: none !important;
}

/* =========================================================
   TEXT CONTENT (LONG)
========================================================= */

body.mt.oem.full_preview #content .col-propeller-oem-text-b{
  padding: 0;
  margin-bottom: 26px;
}

body.mt.oem.full_preview #content .col-propeller-oem-text-b .textcontent{
  font-size: 15px;
  line-height: 1.6;
  color: rgba(34,34,34,.75);
}

/* =========================================================
   LINK BUTTON
========================================================= */

body.mt.oem.full_preview #content .col-propeller-oem-link{
  padding: 0;
}

body.mt.oem.full_preview #content .col-propeller-oem-link a{
  display: inline-flex;
  padding: 8px 18px;
  background: var(--clr-accent);
  color: #fff;
  border-radius: var(--br-button);
  font-size: 14px;
  text-decoration: none;
}

/* =========================================================
   RIGHT COLUMN
   - force image ratio ~690x333 (override overview height:170px)
   - logo BELOW image (overlapping), like mockup
========================================================= */

body.mt.oem.full_preview #content .oem-detail-right{
  position: relative;
  padding-bottom: 44px; /* space for logo below image */
}

/* IMPORTANT: override overview fixed height */
body.mt.oem.full_preview #content .oems_group .col-propeller-oem-bild,
body.mt.oem.full_preview #content .col-propeller-oem-bild{
  position: relative;
  width: 100%;
  height: auto !important;
  aspect-ratio: 690 / 333 !important;
  border-radius: var(--br-keyfact) !important;
  overflow: hidden !important;
}

body.mt.oem.full_preview #content .oems_group .col-propeller-oem-bild img,
body.mt.oem.full_preview #content .col-propeller-oem-bild img{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover !important;
}

body.mt.oem.full_preview #content .col-propeller-oem-logo{
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 24px !important;
  bottom: 0 !important;
  transform: translateY(0px) !important;
  z-index: 10 !important;
  width: 220px !important;
  height: 96px !important;
  background: #fff !important;
  border-radius: var(--br-keyfact) !important;
  box-shadow: 0 0 12px rgba(0,0,0,.16) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.oem.full_preview #content {
    padding-bottom: 5rem !important;
}

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

@media (max-width: 900px){
  body.mt.oem.full_preview #content
  .collection_full.col-propeller-oem.show
  .collection_container{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  body.mt.oem.full_preview #content .oem-detail-right{
    padding-bottom: 40px;
  }

  body.mt.oem.full_preview #content .col-propeller-oem-logo{
    right: 16px;
    width: 140px;
    height: 56px;
    transform: translateY(16px);
  }
}

@media (max-width: 366px){

  /* meta row: smaller + left aligned */
  body.mt.oem.full_preview #content .oem-meta-row{
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 8px 0 14px !important;
  }

  body.mt.oem.full_preview #content
  .oem-meta-row
  .col-propeller-oem-founded,
  body.mt.oem.full_preview #content
  .oem-meta-row
  .col-propeller-oem-location{
    font-size: 14px !important;
    gap: 6px !important;
  }

  /* icons smaller */
  body.mt.oem.full_preview #content
  .oem-meta-row
  .col-propeller-oem-founded::before,
  body.mt.oem.full_preview #content
  .oem-meta-row
  .col-propeller-oem-location::before{
    width: 16px !important;
    height: 16px !important;
    background-size: 16px 16px !important;
  }

  /* logo smaller on very small screens */
  body.mt.oem.full_preview #content .col-propeller-oem-logo{
    width: 180px !important;
    height: 78px !important;
    right: 12px !important;
    transform: translateY(-10px) !important;
  }
}