/* =========================================================
   MEK HAUSTECHNIK – LEISTUNGEN
========================================================= */

#mekServices {
  --mek-dark: #022831;
  --mek-blue: #003a47;
  --mek-copper: #ba7c53;
  --mek-red: #75160d;

  --mek-bg: #f3f0e9;
  --mek-bg-light: #f7f4ed;

  --mek-text: #182126;
  --mek-muted: #596166;

  position: relative;
  width: 100%;

  background: var(--mek-bg);
  color: var(--mek-text);

  overflow: hidden;

  font-family: Inter, Arial, sans-serif;
}


/* =========================================================
   STAGE
========================================================= */

#mekServices .mek-services__stage {
  display: grid;

  grid-template-columns:
    minmax(420px, 1.25fr)
    minmax(500px, 1.15fr)
    minmax(250px, 0.65fr);

  width: 100%;
  min-height: 610px;
}


/* =========================================================
   LINKER CONTENT-BEREICH
========================================================= */

#mekServices .mek-services__content {
   position: relative;
  z-index: 10;

  min-width: 0;

  padding:
    clamp(48px, 5vw, 85px)
    clamp(70px, 6vw, 110px)
    clamp(48px, 5vw, 85px)
    clamp(120px, 13vw, 230px);

  background: var(--mek-bg);
}


#mekServices .mek-services__content::before {
  content: "";

  position: absolute;

  left: clamp(70px, 9vw, 165px);

  top: 48px;
  bottom: 48px;

  width: 1px;

  background: rgba(2, 40, 49, 0.15);
}


#mekServices .mek-services__content-inner {
  position: relative;

  width: 100%;
  max-width: 450px;

  min-width: 0;
}


#mekServices .mek-services__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 25px;
  color: var(--mek-text);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

#mekServices .mek-services__eyebrow-symbol {
  display: inline-block;
  flex: 0 0 auto;
  color: var(--mek-copper);
  font-family: Arial, sans-serif;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0;
}





#mekServices .mek-services__number-wrap {
  height: clamp(90px, 8vw, 125px);

  overflow: hidden;
}


#mekServices .mek-services__number {
  font-size: clamp(80px, 8vw, 125px);

  line-height: 0.85;

  font-weight: 800;

  letter-spacing: -0.075em;

  color: rgba(2, 40, 49, 0.09);
}


#mekServices .mek-services__copy h2 {
  width: 100%;
  max-width: 100%;

  margin:
    2px
    0
    16px;

  font-size: clamp(25px, 2.15vw, 37px);

  line-height: 1.05;

  font-weight: 800;

  letter-spacing: -0.035em;

  text-transform: uppercase;

  color: var(--mek-text);

  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}


#mekServices .mek-services__intro {
  max-width: 355px;

  margin:
    0
    0
    25px;

  font-size: 15px;

  line-height: 1.6;

  color: var(--mek-muted);
}


#mekServices .mek-services__more {
  appearance: none;

  border: 0;

  padding: 7px 0;

  background: transparent;

  display: inline-flex;
  align-items: center;

  gap: 13px;

  color: var(--mek-dark);

  font-family: inherit;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.035em;

  text-transform: uppercase;

  cursor: pointer;
}


#mekServices .mek-services__more span {
  position: relative;
}


#mekServices .mek-services__more span::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -4px;

  width: 100%;
  height: 1px;

  background: var(--mek-dark);

  transform-origin: right;

  transition: transform 0.35s ease;
}


#mekServices .mek-services__more:hover span::after {
  transform: scaleX(0.45);
}


#mekServices .mek-services__more svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    transform 0.4s cubic-bezier(.2, .8, .2, 1);
}


#mekServices .mek-services__more:hover svg {
  transform: translateX(5px);
}


#mekServices.is-expanded .mek-services__more svg {
  transform: rotate(90deg);
}


#mekServices .mek-services__details {
  display: grid;

  grid-template-rows: 0fr;

  opacity: 0;

  margin-top: 0;

  transition:
    grid-template-rows 0.65s cubic-bezier(.22, 1, .36, 1),
    opacity 0.4s ease,
    margin 0.65s cubic-bezier(.22, 1, .36, 1);
}


#mekServices .mek-services__details-inner {
  min-height: 0;

  overflow: hidden;
}


#mekServices.is-expanded .mek-services__details {
  grid-template-rows: 1fr;

  opacity: 1;

  margin-top: 26px;
}


#mekServices .mek-services__details-line {
  width: 40px;
  height: 2px;

  margin-bottom: 17px;

  background: var(--mek-copper);
}


#mekServices .mek-services__details p {
  max-width: 410px;

  margin:
    0
    0
    20px;

  color: #4c565b;

  font-size: 14px;

  line-height: 1.65;
}


#mekServices .mek-services__detail-images {
  display: grid;

  grid-template-columns:
    1.2fr
    0.8fr;

  gap: 8px;

  max-width: 420px;
}


#mekServices .mek-services__detail-images figure {
  margin: 0;

  height: 105px;

  overflow: hidden;

  background: #ddd;
}


#mekServices .mek-services__detail-images figure:first-child {
  border-radius:
    2px
    2px
    2px
    18px;
}


#mekServices .mek-services__detail-images figure:last-child {
  border-radius:
    2px
    18px
    2px
    2px;
}


#mekServices .mek-services__detail-images img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}



#mekServices .mek-services__visual {
  position: relative;

  min-width: 0;

  overflow: hidden;

  background: var(--mek-dark);
}



#mekServices .mek-services__brand-shape {
    position: absolute;
  z-index: 5;

  left: 0;
  top: 0;
  bottom: 0;


  width: 30%;

  background: var(--mek-blue);


  clip-path: none;
}


#mekServices .mek-services__brand-shape::before,
#mekServices .mek-services__brand-shape::after {
  content: none !important;
  display: none !important;
}


#mekServices .mek-services__claim {
  position: absolute;

  z-index: 6;

  left: 16%;
  bottom: 14%;

  width: 135px;

  display: flex;
  flex-direction: column;

  color: #fff;

  font-size: 11px;

  line-height: 1.5;

  letter-spacing: 0.04em;
}


#mekServices .mek-services__claim span {
  opacity: 0.68;
}


#mekServices .mek-services__claim strong {
  font-weight: 700;
}



#mekServices .mek-services__image-wrap {
   position: absolute;

  top: 0;
  right: 0;
  bottom: 0;


  left: 30%;

  width: auto;
  height: 100%;

  overflow: hidden;

  background: var(--mek-dark);

  z-index: 3;
}


#mekServices .mek-services__image-wrap
.mek-services__image {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  object-fit: cover !important;
  object-position: center center;

  opacity: 0;

  transform: none;

  transition: opacity 0.8s ease;

  will-change: opacity;
}


#mekServices .mek-services__image-wrap
.mek-services__image.is-active {
  opacity: 1;
}


#mekServices .mek-services__image-wrap::before,
#mekServices .mek-services__image-wrap::after {
  content: none !important;
  display: none !important;
}


#mekServices .mek-services__image-overlay {
  position: absolute;

  z-index: 4;

  inset: 0;

  pointer-events: none;

  background: rgba(2, 40, 49, 0.04);
}


#mekServices .mek-services__nav {
  position: relative;

  z-index: 20;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    40px
    clamp(24px, 3vw, 55px);

  background: var(--mek-bg-light);
}


#mekServices .mek-services__nav-item {
  position: relative;

  appearance: none;

  width: 100%;

  display: grid;

  grid-template-columns:
    32px
    1fr;

  align-items: center;

  gap: 10px;

  padding: 17px 0;

  border: 0;

  background: transparent;

  text-align: left;

  color: #3e464a;

  font-family: inherit;

  cursor: pointer;
}


#mekServices .mek-services__nav-number {
  font-size: 13px;

  font-weight: 700;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}


#mekServices .mek-services__nav-label {
  font-size: 12px;

  font-weight: 600;

  text-transform: uppercase;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}


#mekServices .mek-services__nav-line {
  position: absolute;

  left: 42px;
  bottom: 7px;

  width: calc(100% - 42px);

  height: 1px;

  background: rgba(2, 40, 49, 0.16);

  overflow: hidden;
}


#mekServices .mek-services__nav-line::after {
  content: "";

  position: absolute;

  inset: 0;

  background: var(--mek-copper);

  transform: scaleX(0);

  transform-origin: left;
}


#mekServices
.mek-services__nav-item.is-active
.mek-services__nav-number,

#mekServices
.mek-services__nav-item.is-active
.mek-services__nav-label {
  color: var(--mek-blue);

  transform: translateX(3px);
}


#mekServices:not(.is-expanded)
.mek-services__nav-item.is-active
.mek-services__nav-line::after {
  animation:
    mekProgress
    5.5s
    linear
    forwards;
}


@keyframes mekProgress {

  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }

}


#mekServices .mek-is-changing {
  animation:
    mekContentOut
    0.27s
    ease
    forwards;
}


@keyframes mekContentOut {

  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-8px);
  }

}


#mekServices .mek-is-entering {
  animation:
    mekContentIn
    0.55s
    cubic-bezier(.22, 1, .36, 1)
    forwards;
}


@keyframes mekContentIn {

  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


@media (max-width: 1180px) {

  #mekServices .mek-services__stage {
    grid-template-columns:
      minmax(310px, 0.95fr)
      minmax(420px, 1.25fr);

    min-height: 590px;
  }


  #mekServices .mek-services__content {
    padding:
      50px
      clamp(40px, 5vw, 65px);
  }


  #mekServices .mek-services__copy h2 {
    font-size: clamp(24px, 3vw, 34px);
  }


  #mekServices .mek-services__brand-shape {
    width: 40%;
  }


  #mekServices .mek-services__image-wrap {
    left: 36%;
  }


  #mekServices .mek-services__nav {
    grid-column: 1 / -1;

    flex-direction: row;

    justify-content: flex-start;

    padding: 0 25px;

    overflow-x: auto;

    scrollbar-width: none;

    border-top:
      1px solid
      rgba(2, 40, 49, 0.1);
  }


  #mekServices .mek-services__nav::-webkit-scrollbar {
    display: none;
  }


  #mekServices .mek-services__nav-item {
    flex: 0 0 auto;

    width: auto;

    min-width: 165px;

    grid-template-columns:
      28px
      auto;

    padding:
      20px
      15px;
  }


  #mekServices .mek-services__nav-line {
    left: 43px;

    width:
      calc(100% - 58px);

    bottom: 10px;
  }

}


@media (max-width: 767px) {

  #mekServices .mek-services__stage {
    display: flex;

    flex-direction: column;

    min-height: 0;
  }


  #mekServices .mek-services__nav {
    order: 1;

    padding:
      0
      12px;
  }


  #mekServices .mek-services__nav-item {
    min-width: 145px;

    padding:
      17px
      9px;

    grid-template-columns:
      24px
      auto;

    gap: 5px;
  }


  #mekServices .mek-services__nav-number {
    font-size: 11px;
  }


  #mekServices .mek-services__nav-label {
    font-size: 10px;

    white-space: nowrap;
  }


  #mekServices .mek-services__nav-line {
    left: 33px;

    width:
      calc(100% - 43px);

    bottom: 8px;
  }


  /* Visual */
  #mekServices .mek-services__visual {
    order: 2;

    min-height: 330px;
  }



  #mekServices .mek-services__brand-shape {
    width: 36%;

    clip-path: polygon(
      48% 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }


  #mekServices .mek-services__image-wrap {
    left: 31%;
  }


  #mekServices .mek-services__claim {
    left: 13px;
    bottom: 25px;

    width: 90px;

    font-size: 9px;
  }


  /* Content */
  #mekServices .mek-services__content {
    order: 3;

    padding:
      38px
      28px
      48px;
  }


  #mekServices .mek-services__content::before {
    display: none;
  }


  #mekServices .mek-services__content-inner {
    max-width: 100%;
  }


  #mekServices .mek-services__number-wrap {
    height: 72px;
  }


  #mekServices .mek-services__number {
    font-size: 76px;
  }


  #mekServices .mek-services__copy h2 {
    font-size: clamp(26px, 8vw, 36px);

    line-height: 1.05;

    letter-spacing: -0.03em;
  }


  #mekServices .mek-services__intro {
    max-width: 100%;
  }


  #mekServices .mek-services__detail-images {
    max-width: 100%;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  #mekServices .mek-services__visual {
    min-height: 285px;
  }


  #mekServices .mek-services__brand-shape {
    width: 34%;
  }


  #mekServices .mek-services__image-wrap {
    left: 29%;
  }


  #mekServices .mek-services__copy h2 {
    font-size: clamp(24px, 7.5vw, 32px);
  }


  #mekServices .mek-services__detail-images {
    grid-template-columns:
      1fr
      1fr;
  }


  #mekServices .mek-services__detail-images figure {
    height: 90px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #mekServices *,
  #mekServices *::before,
  #mekServices *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}