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

.neeb-hold-types,
.elementor .neeb-hold-types,
body .neeb-hold-types{
  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-types-watermark{
  position:absolute;

  right:-90px;
  top:50%;

  transform:translateY(-50%);

  width:min(540px, 40vw);

  opacity:.05;

  filter:brightness(0) invert(1);

  pointer-events:none;

  z-index:1;
}

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

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

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

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

.neeb-hold-types-header{
  max-width:860px;

  margin:0 auto 40px;

  text-align:center;
}

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

  min-height:36px;

  padding:8px 14px;

  margin-bottom:18px;

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

.neeb-hold-types-title{
  margin:0 0 14px;

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

  font-weight:800;

  letter-spacing:-.04em;

  color:#ffffff;

  text-wrap:balance;
}

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

.neeb-hold-types-intro{
  max-width:760px;

  margin:0 auto;

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

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

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

.neeb-hold-types-grid{
  display:grid;

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

  gap:20px;
}

/* =========================
   CARD
========================= */

.neeb-hold-types-card{
  display:grid;

  grid-template-columns:58px 1fr;

  gap:18px;

  align-items:start;

  padding:24px 24px 22px;

  border-radius:26px;

  background:rgba(255,255,255,.08);

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

  backdrop-filter:blur(10px);

  box-shadow:0 18px 40px rgba(0,0,0,.12);

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.neeb-hold-types-card:hover{
  transform:translateY(-4px);

  background:rgba(255,255,255,.10);

  border-color:rgba(255,255,255,.18);

  box-shadow:0 24px 50px rgba(0,0,0,.16);
}

.neeb-hold-types-card.is-wide{
  grid-column:1 / -1;
}

/* =========================
   NUMBER
========================= */

.neeb-hold-types-no{
  display:flex;
  align-items:center;
  justify-content:center;

  width:58px;
  height:58px;

  border-radius:18px;

  background:#ffffff;

  color:#084863;

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

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

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

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

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

  color:#ffffff;

  font-weight:800;

  letter-spacing:-.02em;
}

.neeb-hold-types-card-content p{
  margin:0;

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

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

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

.neeb-hold-types-cta{
  margin-top:30px;

  text-align:center;
}

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

  min-height:54px;

  padding:0 22px;

  border-radius:14px;

  background:#ffffff;

  color:#084863;

  text-decoration:none;

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

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

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

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

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

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

@media (max-width:767px){

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

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

    padding:56px 16px;
  }

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

    text-align:left;
  }

  .neeb-hold-types-title{
    font-size:32px;
    line-height:1.08;
  }

  .neeb-hold-types-intro{
    margin:0;

    font-size:15px;
    line-height:1.75;
  }

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

    gap:16px;
  }

  .neeb-hold-types-card,
  .neeb-hold-types-card.is-wide{
    grid-column:auto;

    grid-template-columns:50px 1fr;

    gap:14px;

    padding:20px 18px 18px;

    border-radius:20px;
  }

  .neeb-hold-types-no{
    width:50px;
    height:50px;

    border-radius:14px;

    font-size:14px;
  }

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

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

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

    right:-80px;

    top:auto;
    bottom:20px;

    transform:none;
  }
}