/*
 * Eichenlaub native Hero styling for nutshell-framework/hero-element 1.3.5
 * Loaded after the existing theme styles.
 */

:root {
  --eichenlaub-content-width: 1180px;
  --eichenlaub-page-gutter: clamp(1.25rem, 4vw, 4rem);
  --eichenlaub-dark: #203a39;
  --eichenlaub-green: #557f7c;
  --eichenlaub-light: #eef1ef;
}

.mod_article.hero-home,
.mod_article.page-hero {
  display: block !important;
  position: relative;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.mod_article.hero-home > .inside,
.mod_article.page-hero > .inside {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ce_hero.eichenlaub-native-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--eichenlaub-light);
  color: #202726;
}

.ce_hero.eichenlaub-native-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(241 243 241 / 96%) 0%,
    rgb(241 243 241 / 88%) 36%,
    rgb(241 243 241 / 46%) 68%,
    rgb(241 243 241 / 10%) 100%
  );
}

.ce_hero.eichenlaub-native-hero .hero__background {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.ce_hero.eichenlaub-native-hero .hero__background picture,
.ce_hero.eichenlaub-native-hero .hero__background img,
.ce_hero.eichenlaub-native-hero .hero__background video {
  display: block;
  width: 100%;
  height: 100%;
}

.ce_hero.eichenlaub-native-hero .hero__background img,
.ce_hero.eichenlaub-native-hero .hero__background video {
  object-fit: cover;
  object-position: center;
}

.ce_hero.eichenlaub-native-hero .hero__content {
  position: relative;
  z-index: 2;
  width: min(
    var(--eichenlaub-content-width),
    calc(100% - (2 * var(--eichenlaub-page-gutter)))
  );
  margin-inline: auto;
  padding-block: clamp(3.5rem, 7vw, 7rem);
}

.ce_hero.eichenlaub-native-hero--home .hero__content {
  padding-block: clamp(4.5rem, 10vw, 9rem);
}

.ce_hero.eichenlaub-native-hero--compact .hero__content {
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}

.ce_hero.eichenlaub-native-hero .hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(100%, 44rem);
  max-width: 100%;
}

.ce_hero.eichenlaub-native-hero .hero__description {
  display: contents;
}

.ce_hero.eichenlaub-native-hero .hero__eyebrow {
  order: 1;
  margin: 0 0 0.75rem;
  color: var(--eichenlaub-green);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.ce_hero.eichenlaub-native-hero .hero__eyebrow p {
  margin: 0;
}

.ce_hero.eichenlaub-native-hero .hero__headline {
  order: 2;
  max-width: 16ch;
  margin: 0;
  overflow-wrap: normal;
  hyphens: manual;
  text-wrap: balance;
}

.ce_hero.eichenlaub-native-hero--home .hero__headline {
  width: min-content;
  max-width: none;
}

.ce_hero.eichenlaub-native-hero .hero__body {
  order: 3;
  max-width: 42rem;
  margin-top: 1rem;
}

.ce_hero.eichenlaub-native-hero .hero__body-part {
  margin: 0;
}

.ce_hero.eichenlaub-native-hero .hero__body-part + .hero__body-part {
  margin-top: 0.65rem;
}

.ce_hero.eichenlaub-native-hero .hero__body-part > :first-child {
  margin-top: 0;
}

.ce_hero.eichenlaub-native-hero .hero__body-part > :last-child {
  margin-bottom: 0;
}

.ce_hero.eichenlaub-native-hero .hero__links {
  order: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.ce_hero.eichenlaub-native-hero--dark {
  color: #fff;
  background: var(--eichenlaub-dark);
}

.ce_hero.eichenlaub-native-hero--dark::after {
  background: linear-gradient(
    90deg,
    rgb(24 48 47 / 94%) 0%,
    rgb(24 48 47 / 82%) 44%,
    rgb(24 48 47 / 34%) 76%,
    rgb(24 48 47 / 8%) 100%
  );
}

.ce_hero.eichenlaub-native-hero--dark .hero__eyebrow {
  color: rgb(255 255 255 / 76%);
}

@media (max-width: 700px) {
  .ce_hero.eichenlaub-native-hero::after {
    background: rgb(241 243 241 / 84%);
  }

  .ce_hero.eichenlaub-native-hero--dark::after {
    background: rgb(24 48 47 / 80%);
  }

  .ce_hero.eichenlaub-native-hero .hero__content,
  .ce_hero.eichenlaub-native-hero--home .hero__content,
  .ce_hero.eichenlaub-native-hero--compact .hero__content {
    padding-block: clamp(2.75rem, 12vw, 4.5rem);
  }

  .ce_hero.eichenlaub-native-hero .hero__links {
    width: 100%;
    flex-direction: column;
  }

  .ce_hero.eichenlaub-native-hero .hero__links .button {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Struktur- und Overlaykorrektur v16.1
   ========================================================================== */

/*
 * Der Helligkeitsverlauf gehört zur Bildebene und niemals vor den Inhalt.
 * Der bisherige Pseudolayer des gesamten Hero-Elements wird abgeschaltet.
 */
.ce_hero.eichenlaub-native-hero::after {
  display: none !important;
  content: none !important;
}

.ce_hero.eichenlaub-native-hero .hero__background {
  isolation: isolate !important;
}

.ce_hero.eichenlaub-native-hero .hero__background::after {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  content: "" !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    rgb(241 243 241 / 88%) 0%,
    rgb(241 243 241 / 70%) 38%,
    rgb(241 243 241 / 24%) 70%,
    rgb(241 243 241 / 0%) 100%
  ) !important;
}

.ce_hero.eichenlaub-native-hero--dark .hero__background::after {
  background: linear-gradient(
    90deg,
    rgb(24 48 47 / 90%) 0%,
    rgb(24 48 47 / 72%) 44%,
    rgb(24 48 47 / 26%) 76%,
    rgb(24 48 47 / 0%) 100%
  ) !important;
}

.ce_hero.eichenlaub-native-hero .hero__content,
.ce_hero.eichenlaub-native-hero .hero__text {
  position: relative !important;
  z-index: 2 !important;
}

.ce_hero.eichenlaub-native-hero .hero__description {
  display: block !important;
}

.ce_hero.eichenlaub-native-hero .hero__eyebrow {
  order: 1;
}

.ce_hero.eichenlaub-native-hero .hero__headline {
  order: 2;
}

.ce_hero.eichenlaub-native-hero .hero__lead {
  order: 3;
  max-width: 42rem;
  margin: 1rem 0 0;
}

.ce_hero.eichenlaub-native-hero .hero__body {
  order: 4;
  max-width: 42rem;
  margin-top: 0.65rem;
}

.ce_hero.eichenlaub-native-hero .hero__body > :first-child {
  margin-top: 0;
}

.ce_hero.eichenlaub-native-hero .hero__body > :last-child {
  margin-bottom: 0;
}

.ce_hero.eichenlaub-native-hero .hero__links {
  order: 5;
}

@media (max-width: 700px) {
  .ce_hero.eichenlaub-native-hero .hero__background::after {
    background: rgb(241 243 241 / 72%) !important;
  }

  .ce_hero.eichenlaub-native-hero--dark .hero__background::after {
    background: rgb(24 48 47 / 74%) !important;
  }
}