/* =========================
   SECTION WRAPPER (DARK)
========================= */

.neeb-hold-steps-sec,
.elementor .neeb-hold-steps-sec,
body .neeb-hold-steps-sec{
  position:relative;
  overflow:hidden;

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

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

  padding:110px 24px;

  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;
}

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

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

  right:-100px;
  top:50%;

  transform:translateY(-50%);

  width:min(520px, 40vw);

  opacity:.05;

  filter:brightness(0) invert(1);

  pointer-events:none;

  z-index:1;
}

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

.neeb-hold-steps-container{
  position:relative;
  z-index:2;

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

/* =========================
   HEADER
========================= */

.neeb-hold-steps-header{
  max-width:760px;

  margin:0 auto 50px;

  text-align:center;
}

.neeb-hold-steps-eyebrow{
  display:inline-flex;
  align-items:center;

  min-height:36px;

  padding:8px 14px;

  border-radius:999px;

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

  color:#ffffff;

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

  letter-spacing:.08em;
  text-transform:uppercase;

  margin-bottom:18px;
}

.neeb-hold-steps-title{
  margin:0;

  font-size:48px;
  line-height:1.03;

  font-weight:800;

  letter-spacing:-.04em;

  color:#ffffff;

  text-wrap:balance;
}

.neeb-hold-steps-title span{
  color:#c9e4ee;
}

/* =========================
   LAYOUT
========================= */

.neeb-hold-steps-layout{
  display:grid;

  grid-template-columns:minmax(340px, .9fr) minmax(0, 1.1fr);

  gap:40px;

  align-items:start;
}

/* =========================
   IMAGE
========================= */

.neeb-hold-steps-visual{
  position:sticky;

  top:120px;

  align-self:start;

  border-radius:32px;

  overflow:hidden;

  height:520px;

  box-shadow:0 30px 70px rgba(0,0,0,.25);
}

.neeb-hold-steps-visual img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}

/* =========================
   TIMELINE
========================= */

.neeb-hold-steps-timeline{
  display:flex;
  flex-direction:column;

  gap:30px;
}

.neeb-hold-steps-item{
  position:relative;

  padding-left:70px;
}

.neeb-hold-steps-line{
  position:absolute;

  left:26px;
  top:0;
  bottom:-30px;

  width:1px;

  background:rgba(255,255,255,.2);
}

.neeb-hold-steps-item:last-child .neeb-hold-steps-line{
  display:none;
}

.neeb-hold-steps-dot{
  position:absolute;

  left:0;
  top:0;

  width:52px;
  height:52px;

  border-radius:18px;

  background:#ffffff;

  color:#084863;

  font-weight:800;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 10px 22px rgba(0,0,0,.2);
}

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

.neeb-hold-steps-content h3{
  margin:0 0 8px;

  font-size:24px;
  line-height:1.15;

  color:#ffffff;

  font-weight:800;
}

.neeb-hold-steps-content p{
  margin:0;

  font-size:15px;
  line-height:1.8;

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

/* =========================
   LINKS FIX
========================= */

.neeb-hold-steps-sec a:not(.neeb-hold-steps-button){
  color:#ffffff;

  text-decoration:none;
}

.neeb-hold-steps-sec a:not(.neeb-hold-steps-button):hover{
  text-decoration:none;
}

/* =========================
   CTA
========================= */

.neeb-hold-steps-cta{
  margin-top:40px;

  text-align:center;
}

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

  min-height:54px;

  padding:0 22px;

  border-radius:14px;

  background:#ffffff;

  color:#084863 !important;

  text-decoration:none;

  font-weight:800;

  box-shadow:0 14px 28px rgba(0,0,0,.18);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

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

  box-shadow:0 18px 32px rgba(0,0,0,.22);
}

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

@media (max-width:900px){

  .neeb-hold-steps-layout{
    grid-template-columns:1fr;

    gap:24px;
  }

  .neeb-hold-steps-visual{
    position:relative;

    top:auto;

    height:300px;

    order:1;
  }

  .neeb-hold-steps-timeline{
    order:2;
  }
}

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

@media (max-width:767px){

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

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

    padding:56px 16px;
  }

  .neeb-hold-steps-header{
    margin-bottom:28px;

    text-align:left;
  }

  .neeb-hold-steps-title{
    font-size:32px;

    line-height:1.08;
  }

  .neeb-hold-steps-layout{
    gap:22px;
  }

  .neeb-hold-steps-visual{
    position:relative;

    top:auto;

    height:240px;

    border-radius:22px;

    margin-bottom:2px;
  }

  .neeb-hold-steps-item{
    padding-left:60px;
  }

  .neeb-hold-steps-dot{
    width:44px;
    height:44px;

    border-radius:14px;

    font-size:14px;
  }

  .neeb-hold-steps-line{
    left:21px;
  }

  .neeb-hold-steps-content h3{
    font-size:20px;
  }

  .neeb-hold-steps-content p{
    font-size:14px;

    line-height:1.75;
  }

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

  .neeb-hold-steps-watermark{
    width:220px;

    right:-80px;

    top:auto;
    bottom:20px;

    transform:none;
  }
}