/* SECTION */
.featureBp{
  position: relative;
  background:#000;
  overflow:hidden;

  /* dein Wunsch: höher */
  min-height: clamp(1200px, 200vh, 1600px);

  /* Center-Zone (Text immer in der Mitte) */
  display: grid;
  grid-template-columns: 1fr minmax(0, 820px) 1fr;

  /* Luft oben/unten */
  padding: clamp(90px, 10vh, 160px) clamp(16px, 6vw, 80px) clamp(120px, 14vh, 220px);
}

/* Blueprint als Hintergrund: ganzes Bild sichtbar */
.featureBp::before{
  background-size: contain;
  content:"";
  position:absolute;
  inset: 0;

  background-image: url("/logos/home/blueprint.png");
  background-repeat: no-repeat;

  /* 🔥 ganzes Bild sichtbar */

  /* links oben starten */
  background-position: left top;

  opacity: .95;
  pointer-events: none;
}


/* Dunkler Verlauf nach rechts (damit Text lesbar bleibt) */
.featureBp::after{
  content:"";
  position:absolute;
  inset: 0;

  background: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,.9) 100%
  );
  pointer-events:none;
}

/* Text-Wrapper */
.bpText{
  position: relative;
  z-index: 2;

  grid-column: 2;          /* 🔥 Mitte */

  /* Textblock Breite wie im Design */
  width: min(520px, 100%);
  margin-inline: auto;

  text-align: center;

  /* fluid typography */
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.75;
  color: rgba(255,255,255,.9);

  /* damit es nie am Rand klebt */
  padding-inline: clamp(10px, 2vw, 20px);
}

/* oben: nahe am Anfang */
.bpText--top{
  margin-top: clamp(20px, 10vh, 80px);
}

/* unten: großer Abstand wie Screenshot */
.bpText--bottom{
  margin-top: clamp(260px, 50vh, 520px);
}

@media (max-width: 768px) and (min-width: 431px){
  .featureBp::before{
    /* Höhe = 100% der Section -> Bild wird NIE unten abgeschnitten */
    background-size: auto 100%;
    background-position: left top;
  }
}

@media (max-width: 420px){
  .featureBp{
    /* nicht zu kurz, aber auch nicht 200vh */
    min-height: clamp(900px, 210vh, 1300px);
  }

  .featureBp::before{
    /* blueprint kleiner, damit er in die Section passt */
    background-size: 70% auto;     /* probier 60–80% */
    background-position: left top; /* oder left 10% top */
    opacity: .85;
  }

  /* deinen riesigen Abstand fürs "bottom" auf Mobile entschärfen */
  .bpText--bottom{
    margin-top: clamp(120px, 18svh, 240px);
  }
}


/* Accent */
.bpText .accent{
  color:#AC0000;
  font-weight: 700;
}