/* eeaser – shaped hero background (photo visible beside/behind media) */

:root {
  /* Extend a right-anchored layer from a centered container to the viewport edge */
  --hero-bleed-right: max(0px, 50vw - 50%);
  --hero-mobile-photo-height: clamp(220px, 48vw, 300px);
  --hero-mobile-tabs-photo-height: clamp(200px, 44vw, 280px);
}

.hero-section {
  position: relative;
  isolation: isolate;
  background-color: var(--ee-white) !important;
  background-image: none !important;
  overflow: hidden;
}

.hero-section:has(.hero-wrap),
.hero-section:has(.section_tabs) {
  overflow: visible;
}

.hero-section .container.w-container:has(.hero-wrap),
.hero-section .container-1280px {
  overflow: visible;
}

.hero-section:has(.section_tabs) {
  background-color: var(--ee-white) !important;
}

.hero-section .header-menu {
  position: relative;
  z-index: 3;
}

.hero-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: clamp(340px, 40vw, 520px);
  container-type: inline-size;
  container-name: hero-wrap;
  overflow: visible;
  isolation: isolate;
}

/* Shaped industrial photo – right side only; diagonal keeps it off the text column */
.hero-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(50% - 50vw);
  width: calc(min(64%, 1040px) + var(--hero-bleed-right));
  background-image: url("hero-industrial.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 26% 100%);
  z-index: 0;
  pointer-events: none;
}

.hero-wrap-grid,
.hero-wrap-grid-2 {
  position: relative;
  z-index: 1;
  align-items: start;
  column-gap: clamp(12px, 2.5vw, 32px);
  min-height: inherit;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  padding-top: clamp(4px, 1.5vw, 20px);
}

/* Text stays in the left column – must not overlap the shaped photo */
.hero-wrap-grid > .hero-content-area,
.hero-wrap-grid-2 > .hero-content-area,
.hero-content-area {
  position: relative;
  z-index: 2;
  grid-column: 1;
  justify-self: start;
  min-width: 0;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: clamp(8px, 1.5vw, 20px) !important;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* Use the white zone up to the photo diagonal (~57% from the left at the bottom) */
.hero-wrap .hero-content-area {
  max-width: min(600px, 48vw);
}

@supports (width: 1cqw) {
  .hero-wrap .hero-content-area {
    max-width: min(52cqw, 620px);
  }
}

/* ── Homepage: headline + product tabs ── */
.section_tabs {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.section_tabs .padding-global,
.section_tabs .tabs_wrap {
  overflow: visible;
}

.section_tabs .tabs_wrap {
  position: relative;
  z-index: 1;
}

/* Industrial photo behind the homepage headline (h1 / intro) */
.section_tabs .tabs_wrap::before {
  content: "";
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  width: calc(min(58%, 820px) + var(--hero-bleed-right));
  height: clamp(260px, 34vw, 440px);
  background-image: url("hero-industrial.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 22% 100%);
  z-index: 0;
  pointer-events: none;
}

.section_tabs .tabs_h2.tabshome,
.section_tabs .tabs_paragraph.paratabhome,
.section_tabs .tabs_wrap > .image-9 {
  position: relative;
  z-index: 1;
}

.section_tabs .tabs_wrap > .image-9 {
  max-width: min(42%, 380px);
  height: auto;
}

.section_tabs .tabs_tabs-element {
  position: relative;
  z-index: 1;
  clear: both;
}

/* Homepage product tabs – avoid cqw resolving to a collapsed width in the tab layout */
.section_tabs .hero-wrap {
  container-type: normal;
}

.section_tabs .hero-wrap-grid,
.section_tabs .hero-wrap-grid-2 {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
}

.section_tabs .hero-wrap .hero-content-area {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.hero-area-title-2,
.hero-content,
.hero-area-title-2[class*="hero"] {
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
}

/* Media grid column (image wrap only – not standalone video) */
.hero-wrap-grid > .hero-image-wrap,
.hero-wrap-grid-2 > .hero-image-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: clamp(240px, 28vw, 380px);
  padding-left: clamp(56px, 12vw, 160px);
  padding-right: clamp(24px, 4vw, 56px);
}

/* Video wrap – same outer box as Abwärme / Fristenkalender */
.hero-wrap-grid > .hero-image-wrap:has(.hero-video),
.hero-wrap-grid-2 > .hero-image-wrap:has(.hero-video) {
  width: min(86%, 580px);
  max-width: 580px;
  margin: 0 0 0 auto !important;
  flex-shrink: 0;
}

/* Standalone video in grid (e.g. Umsetzungsplan) – same size as video inside hero-image-wrap */
.hero-wrap-grid > .hero-video,
.hero-wrap-grid-2 > .hero-video {
  position: relative;
  z-index: 1;
  grid-column: 2;
  justify-self: end;
  align-self: center;
  width: min(86%, 580px) !important;
  max-width: 580px !important;
  min-height: clamp(240px, 28vw, 380px);
  margin: 0 clamp(24px, 4vw, 56px) 0 auto !important;
  padding: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  flex-shrink: 0;
}

/* Image-only heroes – smaller and hug the photo zone (not the white column) */
.hero-wrap-grid > .hero-image-wrap:not(:has(.hero-video)),
.hero-wrap-grid-2 > .hero-image-wrap:not(:has(.hero-video)) {
  width: min(62%, 420px);
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Webflow variant offsets that pull media into the white zone */
.hero-video[class*="herovid"],
.hero-video.hero-video-5 {
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  position: relative !important;
}

.hero-image-wrap[class*="image-wra"],
.hero-image-wrap[class*="wra"] {
  margin: 0 !important;
  padding: 0 !important;
}

/* Nested video (e.g. Plattform Abwärme, Fristenkalender, homepage) */
.hero-image-wrap > .hero-video {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

.hero-image-wrap .video-2,
.hero-image-wrap .w-video,
.hero-image-wrap .video,
.hero-video .video-2,
.hero-video .w-video,
.hero-video .video {
  width: 100% !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(36, 35, 49, 0.18);
}

.hero-mockup-image,
.hero-mockup-image-copy,
.hero-image-wrap > img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  position: relative !important;
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(36, 35, 49, 0.18);
}

/* Nav-only hero sections (e.g. Abwärmeprojekte map) – not homepage (has .section_tabs) */
.hero-section:not(:has(.hero-wrap)):not(:has(.section_tabs))::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(50vw, 640px);
  height: 100%;
  background-image: url("hero-industrial.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
  opacity: 0.65;
  z-index: 0;
  pointer-events: none;
}

@media screen and (max-width: 991px) {
  .hero-wrap-grid,
  .hero-wrap-grid-2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .hero-wrap .hero-content-area {
    max-width: min(480px, 46vw);
  }

  @supports (width: 1cqw) {
    .hero-wrap .hero-content-area {
      max-width: min(50cqw, 520px);
    }
  }

  .section_tabs .hero-wrap .hero-content-area {
    max-width: min(50%, 520px);
  }

  .hero-wrap::before {
    width: calc(min(58%, 760px) + var(--hero-bleed-right));
    clip-path: polygon(38% 0, 100% 0, 100% 100%, 30% 100%);
  }

  .section_tabs .tabs_wrap::before {
    width: calc(min(54%, 680px) + var(--hero-bleed-right));
    height: clamp(240px, 32vw, 380px);
    clip-path: polygon(34% 0, 100% 0, 100% 100%, 26% 100%);
  }

  .hero-wrap-grid > .hero-image-wrap,
  .hero-wrap-grid-2 > .hero-image-wrap {
    padding-left: clamp(40px, 10vw, 120px);
    padding-right: clamp(16px, 3vw, 40px);
  }

  .hero-wrap-grid > .hero-image-wrap:has(.hero-video),
  .hero-wrap-grid-2 > .hero-image-wrap:has(.hero-video),
  .hero-wrap-grid > .hero-video,
  .hero-wrap-grid-2 > .hero-video {
    width: min(88%, 500px) !important;
    max-width: 500px !important;
  }


  .hero-wrap-grid > .hero-image-wrap:not(:has(.hero-video)),
  .hero-wrap-grid-2 > .hero-image-wrap:not(:has(.hero-video)) {
    width: min(68%, 380px);
  }
}

@media screen and (max-width: 767px) {
  /* Stack photo above content so text never sits on the industrial background */
  .hero-wrap {
    display: grid;
    grid-template-rows: var(--hero-mobile-photo-height) auto;
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 0 !important;
  }

  .hero-wrap::before {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: calc(50% - 50vw);
    width: 100vw;
    height: var(--hero-mobile-photo-height);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  .hero-wrap-grid,
  .hero-wrap-grid-2 {
    grid-row: 2;
    grid-column: 1;
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding-top: 0 !important;
    row-gap: 24px;
  }

  .hero-wrap .hero-content-area,
  .hero-content-area {
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-area-title-2,
  .hero-area-title-2[class*="heroa"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .hero-content,
  .hero-content.herob1,
  .hero-content.herob2,
  .hero-content[class*="hero-"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-wrap-grid > .hero-image-wrap,
  .hero-wrap-grid-2 > .hero-image-wrap,
  .hero-image-wrap[class*="image-wra"],
  .hero-image-wrap[class*="wra"] {
    min-height: auto;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hero-wrap-grid > .hero-image-wrap:has(.hero-video),
  .hero-wrap-grid-2 > .hero-image-wrap:has(.hero-video),
  .hero-wrap-grid > .hero-video,
  .hero-wrap-grid-2 > .hero-video,
  .hero-video[class*="herovid"] {
    width: min(90%, 520px) !important;
    max-width: 520px !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0;
  }

  .hero-wrap-grid > .hero-image-wrap:not(:has(.hero-video)),
  .hero-wrap-grid-2 > .hero-image-wrap:not(:has(.hero-video)) {
    width: min(82%, 400px);
  }

  .hero-mockup-image.image-mo2,
  .hero-mockup-image.image-mo3,
  .hero-mockup-image.hero-tablet-1 {
    margin-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-area-title-2 {
    font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
  }

  /* Homepage headline – reserve space above text; undo Webflow offsets */
  .section_tabs .padding-global.padding3 {
    margin-bottom: 0 !important;
  }

  .section_tabs .tabs_wrap {
    padding-top: var(--hero-mobile-tabs-photo-height);
  }

  .section_tabs .tabs_wrap::before {
    top: 0;
    right: auto;
    left: calc(50% - 50vw);
    width: 100vw;
    height: var(--hero-mobile-tabs-photo-height);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  .section_tabs .tabs_h2,
  .section_tabs .tabs_h2.tabs3,
  .section_tabs .tabs_h2.tabshome,
  .section_tabs .tabs_paragraph,
  .section_tabs .tabs_paragraph.paratabhome {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    clear: both;
  }

  .section_tabs .tabs_wrap > .image-9 {
    float: none;
    display: block;
    max-width: min(220px, 52%) !important;
    margin: 0 0 1rem;
    clear: both;
  }

  .hero-section:not(:has(.hero-wrap)):not(:has(.section_tabs))::after {
    width: 100%;
    height: 180px;
    opacity: 0.45;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}