/* =========================================================
   MEK HAUSTECHNIK – WARUM MEK
========================================================= */

#mekWhy {
  --mek-dark: #022831;
  --mek-dark-deep: #001f27;
  --mek-blue: #003a47;
  --mek-copper: #ba7c53;
  --mek-red: #75160d;

  --mek-bg: #f3f0e9;
  --mek-text: #182126;

  --mek-muted: rgba(255, 255, 255, 0.70);
  --mek-line: rgba(255, 255, 255, 0.13);

  position: relative;

  width: 100%;

  overflow: hidden;

  background: var(--mek-dark);
  color: #fff;

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


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

#mekWhy .mek-why__stage {
  display: grid;

  grid-template-columns:
    minmax(500px, 1.05fr)
    minmax(620px, 1.35fr);

  width: 100%;

  min-height: 610px;
}


/* =========================================================
   BILD LINKS
========================================================= */

#mekWhy .mek-why__visual {
  position: relative;

  min-width: 0;
  min-height: 610px;

  overflow: hidden;

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


#mekWhy .mek-why__image-wrap {
  position: absolute;

  inset: 0;

  overflow: hidden;

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

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


#mekWhy .mek-why__image {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

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

  max-width: none;

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

  transform: none;

  transition:
    filter 0.5s ease;

  will-change: filter;
}


/* =========================================================
   BILD OVERLAY
========================================================= */

#mekWhy .mek-why__image-overlay {
  position: absolute;

  z-index: 2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(2, 40, 49, 0.03) 42%,
      rgba(2, 40, 49, 0.72) 100%
    );

  transition:
    background 0.5s ease;
}


/* =========================================================
   KUPFERLINIE AM BILD
========================================================= */

#mekWhy .mek-why__image-line {
  position: absolute;

  z-index: 4;

  left: 0;
  bottom: 0;

  width: 0;
  height: 2px;

  background: var(--mek-copper);

  transition:
    width 0.6s
    cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   BILD META
========================================================= */

#mekWhy .mek-why__image-meta {
  position: absolute;

  z-index: 5;

  left: clamp(35px, 4vw, 70px);
  right: clamp(80px, 8vw, 135px);
  bottom: 32px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 25px;
}


#mekWhy .mek-why__image-meta span,
#mekWhy .mek-why__image-meta strong {
  font-size: 10px;

  line-height: 1.4;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


#mekWhy .mek-why__image-meta span {
  opacity: 0.75;

  font-weight: 600;
}


#mekWhy .mek-why__image-meta strong {
  font-weight: 700;

  text-align: right;
}


/* =========================================================
   BILD HOVER
========================================================= */

@media (hover: hover) {

  #mekWhy .mek-why__visual:hover
  .mek-why__image {
    filter:
      saturate(0.86)
      contrast(1.04);
  }


  #mekWhy .mek-why__visual:hover
  .mek-why__image-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0, 58, 71, 0.07) 30%,
        rgba(2, 40, 49, 0.8) 100%
      );
  }


  #mekWhy .mek-why__visual:hover
  .mek-why__image-line {
    width: 75%;
  }

}


/* =========================================================
   CONTENT RECHTS
========================================================= */

#mekWhy .mek-why__content {
  position: relative;

  min-width: 0;

  display: flex;
  align-items: center;

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


#mekWhy .mek-why__content-inner {
  width: 100%;

  max-width: 790px;

  padding:
    clamp(38px, 4vw, 55px)
    clamp(70px, 6vw, 110px)
    clamp(38px, 4vw, 55px)
    clamp(65px, 6vw, 105px);
}


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

#mekWhy .mek-why__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;
}


#mekWhy .mek-why__title {
  width: 100%;

  margin:
    0
    0
    16px;

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

  line-height: 1.05;

  font-weight: 800;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}


#mekWhy .mek-why__title span,
#mekWhy .mek-why__title strong {
  display: block;
}


#mekWhy .mek-why__title span {
  color: #fff;
}


#mekWhy .mek-why__title strong {
  color: var(--mek-copper);

  font-weight: 800;
}


/* =========================================================
   INTRO
========================================================= */

#mekWhy .mek-why__intro {
  max-width: 510px;

  margin:
    0
    0
    25px;

  color: var(--mek-muted);

  font-size: 16px;

  line-height: 1.6;
}


/* =========================================================
   VORTEILE GRID
========================================================= */

#mekWhy .mek-why__benefits {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border-top:
    1px solid
    var(--mek-line);
}


/* =========================================================
   EINZELNER VORTEIL
========================================================= */

#mekWhy .mek-why__benefit {
  position: relative;

  display: grid;

  grid-template-columns:
    35px
    1fr;

  align-items: start;

  gap: 14px;

  min-width: 0;

  padding:
    19px
    20px;

  border-bottom:
    1px solid
    var(--mek-line);

  transition:
    background 0.35s ease;
}


#mekWhy .mek-why__benefit:nth-child(odd) {
  padding-left: 0;

  border-right:
    1px solid
    var(--mek-line);
}


/* =========================================================
   VORTEIL HOVER-LINIE
========================================================= */

#mekWhy .mek-why__benefit::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -1px;

  width: 0;
  height: 1px;

  background: var(--mek-copper);

  transition:
    width 0.45s
    cubic-bezier(.22, 1, .36, 1);
}


@media (hover: hover) {

  #mekWhy .mek-why__benefit:hover {
    background:
      rgba(255, 255, 255, 0.018);
  }


  #mekWhy .mek-why__benefit:hover::after {
    width: 100%;
  }

}


/* =========================================================
   ICONS
========================================================= */

#mekWhy .mek-why__icon {
  display: flex;

  align-items: flex-start;
  justify-content: flex-start;

  padding-top: 3px;

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


#mekWhy .mek-why__icon svg {
  width: 24px;
  height: 24px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.5;

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


/* =========================================================
   VORTEIL LABEL
========================================================= */

#mekWhy .mek-why__label {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(186, 124, 83, 0.9);

  font-size: 10px;

  line-height: 1.3;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


/* =========================================================
   VORTEIL HEADLINE
========================================================= */

#mekWhy .mek-why__benefit h3 {
  margin:
    0
    0
    5px;

  color: #fff;

  font-size: 16px;

  line-height: 1.22;

  font-weight: 700;
}


/* =========================================================
   VORTEIL FLIESSTEXT
========================================================= */

#mekWhy .mek-why__benefit p {
  max-width: 290px;

  margin: 0;

  color: var(--mek-muted);

  font-size: 14px;

  line-height: 1.55;
}


/* =========================================================
   MEHR ERFAHREN
   Elementor-Button-Styles vollständig überschreiben
========================================================= */

#mekWhy button.mek-why__more {
  appearance: none !important;
  -webkit-appearance: none !important;

  position: relative !important;

  display: inline-flex !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: flex-start !important;

  gap: 12px !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;

  margin:
    20px
    0
    0
    0 !important;

  padding:
    7px
    0 !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  outline:
    0 !important;

  background:
    transparent !important;

  background-color:
    transparent !important;

  background-image:
    none !important;

  box-shadow:
    none !important;

  color:
    #ffffff !important;

  -webkit-text-fill-color:
    #ffffff !important;

  font-family:
    Inter,
    Arial,
    sans-serif !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    0.035em !important;

  text-transform:
    uppercase !important;

  text-decoration:
    none !important;

  opacity:
    1 !important;

  visibility:
    visible !important;

  cursor:
    pointer !important;
}


/* Elementor Hover / Focus / Active */

#mekWhy button.mek-why__more:hover,
#mekWhy button.mek-why__more:focus,
#mekWhy button.mek-why__more:focus-visible,
#mekWhy button.mek-why__more:active {
  border:
    0 !important;

  outline:
    0 !important;

  background:
    transparent !important;

  background-color:
    transparent !important;

  background-image:
    none !important;

  box-shadow:
    none !important;

  color:
    #ffffff !important;

  -webkit-text-fill-color:
    #ffffff !important;
}


/* =========================================================
   MEHR ERFAHREN TEXT
========================================================= */

#mekWhy button.mek-why__more
.mek-why__more-text {
  position: relative !important;

  display:
    inline-block !important;

  flex:
    0 0 auto !important;

  width:
    auto !important;

  height:
    auto !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  color:
    #ffffff !important;

  -webkit-text-fill-color:
    #ffffff !important;

  font-family:
    Inter,
    Arial,
    sans-serif !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    0.035em !important;

  text-transform:
    uppercase !important;

  text-decoration:
    none !important;

  opacity:
    1 !important;

  visibility:
    visible !important;

  overflow:
    visible !important;
}


/* =========================================================
   MEHR ERFAHREN UNTERSTRICH
========================================================= */

#mekWhy button.mek-why__more
.mek-why__more-text::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -4px;

  width: 100%;
  height: 1px;

  background:
    rgba(255, 255, 255, 0.82);

  transform:
    scaleX(1);

  transform-origin:
    right;

  transition:
    transform 0.35s ease;
}


#mekWhy button.mek-why__more:hover
.mek-why__more-text::after {
  transform:
    scaleX(0.45);
}


/* =========================================================
   PLUS
========================================================= */

#mekWhy button.mek-why__more
.mek-why__plus {
  position:
    relative !important;

  display:
    inline-block !important;

  flex:
    0 0 16px !important;

  width:
    16px !important;

  height:
    16px !important;

  min-width:
    16px !important;

  min-height:
    16px !important;

  max-width:
    16px !important;

  max-height:
    16px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  vertical-align:
    middle !important;

  transform:
    none;

  transition:
    transform
    0.4s
    cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   PLUS LINIEN
========================================================= */

#mekWhy button.mek-why__more
.mek-why__plus i {
  position:
    absolute !important;

  display:
    block !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    var(--mek-copper) !important;

  opacity:
    1;

  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}


/* horizontale Linie */

#mekWhy button.mek-why__more
.mek-why__plus i:first-child {
  left:
    1px !important;

  top:
    7.5px !important;

  width:
    14px !important;

  height:
    1px !important;
}


/* vertikale Linie */

#mekWhy button.mek-why__more
.mek-why__plus i:last-child {
  left:
    7.5px !important;

  top:
    1px !important;

  width:
    1px !important;

  height:
    14px !important;
}


/* =========================================================
   PLUS GEÖFFNET
========================================================= */

#mekWhy.is-expanded
button.mek-why__more
.mek-why__plus {
  transform:
    rotate(180deg);
}


#mekWhy.is-expanded
button.mek-why__more
.mek-why__plus i:last-child {
  transform:
    scaleY(0);

  opacity:
    0;
}


/* =========================================================
   DETAILS
========================================================= */

#mekWhy .mek-why__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);
}


#mekWhy .mek-why__details-inner {
  min-height:
    0;

  overflow:
    hidden;
}


#mekWhy.is-expanded
.mek-why__details {
  grid-template-rows:
    1fr;

  opacity:
    1;

  margin-top:
    25px;
}


/* =========================================================
   DETAILS KUPFERLINIE
========================================================= */

#mekWhy .mek-why__details-line {
  width:
    40px;

  height:
    2px;

  margin-bottom:
    17px;

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


/* =========================================================
   DETAILS GRID
========================================================= */

#mekWhy .mek-why__details-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    35px;
}


/* =========================================================
   DETAILS LABEL
========================================================= */

#mekWhy .mek-why__details-grid span {
  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--mek-copper);

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.3;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


/* =========================================================
   DETAILS FLIESSTEXT
========================================================= */

#mekWhy .mek-why__details-grid p {
  max-width:
    320px;

  margin:
    0;

  color:
    var(--mek-muted);

  font-size:
    14px;

  line-height:
    1.65;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {

  #mekWhy .mek-why__stage {
    grid-template-columns:
      minmax(340px, 0.9fr)
      minmax(480px, 1.1fr);

    min-height:
      590px;
  }


  #mekWhy .mek-why__visual {
    min-height:
      590px;
  }


  #mekWhy .mek-why__content-inner {
    padding:
      50px
      clamp(40px, 5vw, 65px);
  }


  #mekWhy .mek-why__title {
    font-size:
      clamp(24px, 3vw, 34px);
  }


  #mekWhy .mek-why__benefits {
    grid-template-columns:
      1fr;
  }


  #mekWhy .mek-why__benefit,
  #mekWhy .mek-why__benefit:nth-child(odd) {
    padding:
      16px
      0;

    border-right:
      0;
  }


  #mekWhy .mek-why__benefit p {
    max-width:
      100%;
  }

}


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

@media (max-width: 767px) {

  #mekWhy .mek-why__stage {
    display:
      flex;

    flex-direction:
      column;

    min-height:
      0;
  }


  /* Bild */

  #mekWhy .mek-why__visual {
    min-height:
      330px;

    order:
      1;
  }


  #mekWhy .mek-why__image-wrap {
    clip-path:
      polygon(
        0 0,
        100% 0,
        100% 88%,
        0 100%
      );
  }


  #mekWhy .mek-why__image-meta {
    left:
      28px;

    right:
      28px;

    bottom:
      42px;
  }


  /* Content */

  #mekWhy .mek-why__content {
    order:
      2;

    display:
      block;
  }


  #mekWhy .mek-why__content-inner {
    max-width:
      100%;

    padding:
      38px
      28px
      48px;
  }


  #mekWhy .mek-why__eyebrow {
    margin-bottom:
      20px;
  }


  #mekWhy .mek-why__title {
    font-size:
      clamp(26px, 8vw, 36px);

    line-height:
      1.05;

    letter-spacing:
      -0.03em;
  }


  #mekWhy .mek-why__intro {
    max-width:
      100%;

    margin-bottom:
      28px;

    font-size:
      16px;
  }


  #mekWhy .mek-why__benefits {
    grid-template-columns:
      1fr;
  }


  #mekWhy .mek-why__benefit,
  #mekWhy .mek-why__benefit:nth-child(odd) {
    grid-template-columns:
      35px
      1fr;

    gap:
      14px;

    padding:
      20px
      0;

    border-right:
      0;
  }


  #mekWhy .mek-why__benefit h3 {
    font-size:
      16px;
  }


  #mekWhy .mek-why__benefit p {
    max-width:
      100%;

    font-size:
      14px;
  }


  #mekWhy button.mek-why__more {
    margin-top:
      24px !important;

    font-size:
      13px !important;
  }


  #mekWhy .mek-why__details-grid {
    grid-template-columns:
      1fr;

    gap:
      22px;
  }


  #mekWhy .mek-why__details-grid p {
    max-width:
      100%;

    font-size:
      14px;
  }

}


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

@media (max-width: 480px) {

  #mekWhy .mek-why__visual {
    min-height:
      285px;
  }


  #mekWhy .mek-why__image-meta {
    left:
      22px;

    right:
      22px;

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      4px;
  }


  #mekWhy .mek-why__image-meta strong {
    text-align:
      left;
  }


  #mekWhy .mek-why__title {
    font-size:
      clamp(24px, 7.5vw, 32px);
  }

}


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

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

  #mekWhy *,
  #mekWhy *::before,
  #mekWhy *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}