
/* =========================
   HERO WRAPPER
========================= */

.neeb-hold-hero,
.elementor .neeb-hold-hero,
body .neeb-hold-hero,
section.neeb-hold-hero{
  position:relative;
  overflow:hidden;

  width:100vw;
  max-width:100vw;

  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  margin-top:-70px;

  padding:180px 24px 110px;

  background:

    /* schräge Linien */
    repeating-linear-gradient(
      -35deg,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.035) 2px,
      transparent 2px,
      transparent 26px
    ),

    /* Lichtspots */
    radial-gradient(
      circle at 12% 18%,
      rgba(255,255,255,.06),
      transparent 30%
    ),

    radial-gradient(
      circle at 88% 82%,
      rgba(8,72,99,.25),
      transparent 40%
    ),

    /* dunkler Verlauf */
    linear-gradient(
      135deg,
      #02131c 0%,
      #062f40 45%,
      #084863 100%
    );

  background-color:#02131c;
  background-blend-mode:soft-light, normal, normal, normal;
}

/* sanfter Übergang */

.neeb-hold-hero::before{
  content:"";

  position:absolute;

  top:-140px;
  left:0;
  right:0;

  height:220px;

  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(8,72,99,.12) 40%,
    rgba(8,72,99,.38) 75%,
    rgba(8,72,99,0)
  );

  z-index:1;
  pointer-events:none;
}

/* =========================
   CONTAINER
========================= */

.neeb-hold-hero-container{
  position:relative;
  z-index:3;

  max-width:1180px;
  margin:0 auto;

  text-align:center;
}

/* =========================
   WATERMARK
========================= */

.neeb-hold-hero-watermark{
  position:absolute;

  right:-80px;
  top:50%;

  transform:translateY(-50%);

  width:min(640px, 44vw);

  opacity:.04;

  filter:brightness(0) invert(1);

  pointer-events:none;

  z-index:2;
}

/* =========================
   BREADCRUMB
========================= */

.neeb-hold-breadcrumb-wrap{
  position:absolute;

  top:120px;
  left:0;

  width:100%;

  z-index:4;
}

.neeb-hold-breadcrumb{
  margin-left:40px;

  font-size:13px;
  line-height:1.6;

  color:rgba(255,255,255,.75);
}

.neeb-hold-breadcrumb .rank-math-breadcrumb,
.neeb-hold-breadcrumb p{
  margin:0;
}

.neeb-hold-breadcrumb a{
  color:#ffffff !important;

  text-decoration:none;

  border-bottom:1px solid rgba(255,255,255,.35);
}

.neeb-hold-breadcrumb a:hover{
  border-bottom-color:#ffffff;
}

.neeb-hold-breadcrumb span,
.neeb-hold-breadcrumb .separator{
  color:rgba(255,255,255,.6);
}

/* =========================
   TITLE
========================= */

.neeb-hold-hero-title{
  max-width:900px;

  margin:0 auto 18px !important;

  text-align:center;

  font-size:64px;
  line-height:1.0;

  letter-spacing:-.05em;
  font-weight:800;

  color:#ffffff;
}

.neeb-hold-hero-title span{
  color:#d3e8f0;
}

/* =========================
   TEXT
========================= */

.neeb-hold-hero-text{
  max-width:860px;

  margin:0 auto 30px;

  text-align:center;

  font-size:20px;
  line-height:1.85;

  color:rgba(255,255,255,.88);
}

/* Glossar Links */

.neeb-hold-hero-text a,
.neeb-hold-hero .glossary-link{
  color:#ffffff !important;

  text-decoration:none;

  border-bottom:1px solid rgba(255,255,255,.35);
}

.neeb-hold-hero-text a:hover{
  border-bottom-color:#ffffff;
}

/* =========================
   BUTTON
========================= */

.neeb-hold-hero-actions{
  display:flex;
  flex-direction:column;
  align-items:center;

  gap:14px;

  margin-bottom:36px;
}

.neeb-hold-hero-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:58px;
  padding:0 28px;

  border-radius:16px;

  background:#ffffff;

  color:#084863 !important;

  text-decoration:none !important;

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

  box-shadow:0 18px 34px rgba(0,0,0,.16);

  transition:transform .2s ease;
}

.neeb-hold-hero-button:hover{
  transform:translateY(-2px);
}

/* =========================
   NOTE
========================= */

.neeb-hold-hero-note{
  font-size:14px;
  color:rgba(255,255,255,.72);
}

/* =========================
   BENEFITS
========================= */

.neeb-hold-hero-benefits{
  display:grid;
  grid-template-columns:repeat(3, 1fr);

  gap:18px;

  max-width:980px;
  margin:0 auto;
}

.neeb-hold-hero-benefit{
  padding:20px 18px;

  border-radius:22px;

  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);

  backdrop-filter:blur(12px);

  text-align:left;
}

.neeb-hold-hero-benefit strong{
  display:block;

  margin-bottom:6px;

  font-size:18px;

  color:#ffffff;
}

.neeb-hold-hero-benefit span{
  font-size:14px;
  color:rgba(255,255,255,.78);
}

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

@media (max-width:767px){

  .neeb-hold-hero{
    width:100%;
    max-width:none;

    margin-left:0;
    margin-right:0;

    margin-top:-40px;

    padding:20px 16px 64px;
  }

  .neeb-hold-breadcrumb-wrap{
    position:relative;

    top:auto;
    left:auto;

    width:100%;

    margin-bottom:14px;
  }

  .neeb-hold-breadcrumb{
    margin-left:0;

    font-size:12px;
    line-height:1.5;

    padding:0;
  }

  .neeb-hold-hero-container{
    text-align:left;
  }

  .neeb-hold-hero-eyebrow{
    margin-bottom:14px;
  }

  .neeb-hold-hero-title{
    font-size:38px;

    text-align:left;

    margin:0 0 16px !important;
  }

  .neeb-hold-hero-text{
    font-size:15px;

    text-align:left;

    margin:0 0 24px;
  }

  .neeb-hold-hero-actions{
    align-items:stretch;
    margin-bottom:24px;
  }

  .neeb-hold-hero-button{
    width:100%;
  }

  .neeb-hold-hero-benefits{
    grid-template-columns:1fr;
    gap:14px;
  }

  .neeb-hold-hero-watermark{
    width:230px;

    right:-78px;
    top:auto;
    bottom:18px;

    transform:none;
  }
}
