/* =========================================================
   OUR COMPANY (ABOUT US) – AREA 1 + AREA 2
========================================================= */

.our-company.about-us #content .history-block-title h3,
.our-company.about-us #area-2 .our-company-block-title h3{
  font-size: var(--fs-20) !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.our-company.about-us #content .history-block-title h3::after,
.our-company.about-us #area-2 .our-company-block-title h3::after{
  content: "" !important;
  display: block !important;
  width: 80px !important;
  height: 3px !important;
  background: var(--clr-accent) !important;
  margin: 10px 0 16px !important;
  border-radius: 2px !important;
}

/* Image proportions ~ 570x366 */
.our-company.about-us #content .our-company-block-bild-left .imgcontent,
.our-company.about-us #area-2 .our-company-block-bild-right .imgcontent{
  width: 100% !important;
  aspect-ratio: 570 / 366 !important;
  overflow: hidden !important;
  border-radius: var(--br-keyfact) !important;
}

.our-company.about-us #content .our-company-block-bild-left .imgcontent img,
.our-company.about-us #area-2 .our-company-block-bild-right .imgcontent img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: var(--br-keyfact) !important;
}

/* =========================================================
   OUR COMPANY – READ MORE (only if JS adds .oc-collapsible)
========================================================= */

.our-company.about-us .oc-collapsible{
  position: relative !important;
}

/* Clamp text (default closed, 14 lines) */
.our-company.about-us .oc-collapsible > div{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 14 !important;
  overflow: hidden !important;
}

/* Open state */
.our-company.about-us .oc-collapsible.is-open > div{
  -webkit-line-clamp: initial !important;
  overflow: visible !important;
  display: block !important;
}

/* Button style */
.our-company.about-us .oc-read-more{
  margin-top: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: var(--fs-400, 14px) !important;
  font-weight: 600 !important;
  color: var(--clr-accent, #339933) !important;
  cursor: pointer !important;
  user-select: none !important;
}

/* =========================================================
   RESPONSIVE – AREA 1 + AREA 2
========================================================= */

@media (max-width: 1200px){

  /* Area 1: image margin-bottom */
  .our-company.about-us #content .our-company-block-bild-left{
    margin-bottom: 30px !important;
  }

  /* Area 2: image margin-top */
  .our-company.about-us #area-2 .our-company-block-bild-right{
    margin-top: 30px !important;
  }
}

/* =========================================================
   ABOUT US – SPACING + BACKGROUNDS (AREAS 2–5)
========================================================= */

/* Area 2: remove bottom padding */
.our-company.about-us #area-2.main-screen{
  padding-bottom: 0 !important;
}

/* Area 3: remove default padding */
.our-company.about-us #area-3.main-screen{
  padding: 0 !important;
}

/* Area 3: split background (top grey, bottom white) */
.our-company.about-us #area-3{
  background: linear-gradient(
    to bottom,
    var(--clr-primary-light) 0%,
    var(--clr-primary-light) 50%,
    var(--clr-primary-white) 50%,
    var(--clr-primary-white) 100%
  ) !important;
}

/* Area 4: remove top padding only */
.our-company.about-us #area-4.main-screen{
  padding-top: 0 !important;
}

/* Area 4: white background */
.our-company.about-us #area-4{
  background-color: #ffffff !important;
}

/* Area 5: remove default padding */
.our-company.about-us #area-5.main-screen{
  padding: 0 !important;
}

/* =========================================================
   OUR COMPANY – AREA 4 (OUR HISTORY SLIDER)
========================================================= */

.our-company.about-us #area-4{
  position: relative !important;
  overflow: visible !important;
}

/* Container anchor */
.our-company.about-us #area-4 > .container{
  position: relative !important;
}

/* Track */
.our-company.about-us #area-4 .our-history-coll{
  display: flex !important;
  gap: 11px !important;
  margin: 0 35px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.our-company.about-us #area-4 .our-history-coll::-webkit-scrollbar{
  display: none !important;
}

/* Cards wrapper */
.our-company.about-us #area-4 .collection_list.col-our-history{
  flex: 0 0 calc((100% - (10px * 3)) / 4) !important;
  scroll-snap-align: start !important;
}

/* Card design */
.our-company.about-us #area-4 .collection_container{
  position: relative !important;
  width: 100% !important;
  min-height: 150px !important;
  background: #fff !important;
  border-radius: var(--br-keyfact) !important;
  box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,0.10)) !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  overflow: hidden !important;
}

/* Year */
.our-company.about-us #area-4 .col-our-history-year{
  position: absolute !important;
  left: 6px !important;
  top: -6px !important;
  font-size: 82px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: rgba(51,153,51,0.12) !important;
  pointer-events: none !important;
}

/* Title */
.our-company.about-us #area-4 .col-our-history-title{
  font-size: var(--fs-16) !important;
  font-weight: 700 !important;
  color: var(--fc-primary, #222) !important;
}

/* Text */
.our-company.about-us #area-4 .col-our-history-text{
  font-size: 14px !important;
  color: var(--fc-secondary, #5a5a5a) !important;
  margin-top: 6px !important;
}

/* Arrows */
.our-company.about-us #area-4 .oh-nav{
  position: absolute !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  z-index: 50 !important;
  padding: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 10px !important;
  transform-origin: center !important;
}

.our-company.about-us #area-4 .oh-prev{
  transform: translateY(-50%) rotate(90deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='10' viewBox='0 0 22 10'%3E%3Cpath d='M1 1l10 8 10-8' fill='none' stroke='%23339933' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.our-company.about-us #area-4 .oh-next{
  transform: translateY(-50%) rotate(270deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='10' viewBox='0 0 22 10'%3E%3Cpath d='M1 1l10 8 10-8' fill='none' stroke='%23339933' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.our-company.about-us #area-4 .oh-nav span{
  display: none !important;
}

/* Arrow focus/interaction reset */
.oh-nav,
.oh-nav:focus,
.oh-nav:active,
.oh-nav:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

.oh-nav{
  -webkit-tap-highlight-color: transparent !important;
  -webkit-focus-ring-color: transparent !important;
}

/* Responsive */
@media (max-width: 1200px){
  .our-company.about-us #area-4 .collection_list.col-our-history{
    flex: 0 0 calc((100% - (10px * 2)) / 3) !important;
  }
}

@media (max-width: 900px){
  .our-company.about-us #area-4 .collection_list.col-our-history{
    flex: 0 0 calc((100% - 10px) / 2) !important;
  }
}

@media (max-width: 560px){
  .our-company.about-us #area-4 .collection_list.col-our-history{
    flex: 0 0 100% !important;
  }
}

/* =========================================================
   OUR COMPANY – AREA 6 (RECENT NEWS GRID)
========================================================= */

body.mt.our-company.about-us #area-6 > .container{
  max-width: var(--banner-max-width, 1380px) !important;
  width: 100% !important;
}

/* Title underline */
body.mt.our-company.about-us #area-6 .line-title-center::after{
  content: "" !important;
  display: block !important;
  width: var(--size-title-line-width, 80px) !important;
  height: var(--size-title-line-height, 4px) !important;
  background: var(--clr-accent, #339933) !important;
  margin: var(--space-title-line-top, 12px) auto var(--space-title-line-bottom, 0px) !important;
  border-radius: var(--br-keyfact) !important;
}

/* Grid */
body.mt.our-company.about-us #area-6 .col-news-more-news{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 420px !important;
  gap: 24px !important;
  margin-top: 20px !important;
}

/* Reset items */
body.mt.our-company.about-us #area-6 .collection_list.col_news{
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card container */
body.mt.our-company.about-us #area-6 .collection_list.col_news .collection_container{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  height: 100% !important;
  background: transparent !important;
  border-radius: var(--br-keyfact) !important;
  overflow: hidden !important;
}

/* Image */
body.mt.our-company.about-us #area-6 .col-news-bild{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

body.mt.our-company.about-us #area-6 .col-news-bild img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Gradient overlay */
body.mt.our-company.about-us #area-6 .collection_list.col_news .collection_container::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    var(--overlay-dark) 0%,
    var(--overlay-mid) 40%,
    var(--overlay-light) 70%,
    transparent 100%
  ) !important;
  z-index: 2 !important;
}

/* Text above overlay */
body.mt.our-company.about-us #area-6 .col-news-title,
body.mt.our-company.about-us #area-6 .col-news-text,
body.mt.our-company.about-us #area-6 .col-news-text a,
body.mt.our-company.about-us #area-6 .col-news-text .textcontent{
  position: relative !important;
  z-index: 3 !important;
  color: var(--fc-white) !important;
}

/* Title */
body.mt.our-company.about-us #area-6 .col-news-title{
  font-family: var(--ff-primary) !important;
  font-weight: var(--fw-bold) !important;
  font-size: var(--fs-news-title) !important;
  line-height: 1.3 !important;
  padding: 0 var(--p-news-right) 0 var(--p-news-left) !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  max-height: calc(1.3em * 2) !important;
  overflow: hidden !important;
  margin-bottom: var(--space-title-text) !important;
}

/* Text preview */
body.mt.our-company.about-us #area-6 .col-news-text{
  display: block !important;
  font-size: var(--fs-body) !important;
  line-height: 1.5 !important;
  padding: 0 var(--p-news-right) var(--p-news-bottom) var(--p-news-left) !important;
}

body.mt.our-company.about-us #area-6 .col-news-text .textcontent{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  max-height: calc(1.5em * 2) !important;
  overflow: hidden !important;
}

/* Make whole card clickable */
body.mt.our-company.about-us #area-6 .collection_link a.button{
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  text-indent: -9999px !important;
  background: transparent !important;
  border: 0 !important;
}

/* Arrow */
body.mt.our-company.about-us #area-6 .collection_container::after{
  content: "" !important;
  position: absolute !important;
  right: var(--space-arrow-right) !important;
  bottom: var(--space-arrow-bottom) !important;
  width: var(--size-arrow) !important;
  height: var(--size-arrow) !important;
  z-index: 4 !important;
  transform: rotate(-90deg) !important;
  background-color: var(--clr-accent) !important;
  -webkit-mask: url(/userdata/02_Kollektionen/Vector-g.svg) center / contain no-repeat !important;
  mask: url(/userdata/02_Kollektionen/Vector-g.svg) center / contain no-repeat !important;
}

/* Background */
body.mt.our-company.about-us #area-6.main-screen.grey{
  background-color: var(--clr-primary-white) !important;
}

/* Remove underline in Area 6 */
body.mt.our-company.about-us #area-6 a{
  text-decoration: none !important;
}

body.mt.our-company.about-us #area-6 a:hover{
  text-decoration: none !important;
}


.contact-block-title h3::after {
    content: "" !important;
    width: 80px !important;
    height: 3px !important;
    background: var(--clr-accent) !important;
    margin: 10px 0 16px !important;
    border-radius: 2px !important;
}

#content .contact-block-title h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}


/* Responsive */
@media (max-width: 994px){
  body.mt.our-company.about-us #area-6 .col-news-more-news{
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 420px !important;
  }
}

@media (max-width: 640px){
  body.mt.our-company.about-us #area-6 .col-news-more-news{
    grid-template-columns: 1fr !important;
    grid-auto-rows: 360px !important;
  }
}

/* =========================================================
   OUR COMPANY – MISC
========================================================= */

/* Hide Area 9 */
body.mt.our-company.about-us #area-9{
  display: none !important;
}


/* =========================================================
   ABOUT US – Restore spacing on small screens
========================================================= */

@media (max-width: 720px){

  /* Area 3: restore bottom padding */
  .our-company.about-us #area-2.main-screen{
    padding-bottom: 5rem !important;
  }

  /* Area 4: restore top padding */
  .our-company.about-us #area-4.main-screen{
    padding-top: 5rem !important;
  }

}



body.mt.about-us.our-company #area-6 .filter_display,
body.mt.about-us.our-company #area-6 #filter-element {
  display: none !important;
}

.gallery-caption {
  padding: 10px;
}