div.bns-raw-clip-path,
div.bns-clip-path {
  /* clip-path: polygon(0 0, 100% 0, 87.22% 100%, 0% 100%); */
  inset: 0;
  overflow: hidden;
  position: relative;
  transform: skewX(-11.74deg); /* immer gleicher Winkel */
  transform-origin: top right;
}

div.bns-clip-path::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 79 48.6' preserveAspectRatio='none'><polygon points='79,48.6 74.5,48.6 74.5,0 79,0' fill='%230097F0'/><polygon points='79,48.6 76,48.6 76,0 79,0' fill='%230072B6'/><polygon points='79,48.6 77.5,48.6 77.5,0 79,0' fill='%23004E7C'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* Hintergrund gerade halten (Gegen-Skew) */
div.bns-clip-path::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: skewX(11.74deg); /* hebt den Skew des Containers auf */
  transform-origin: top right;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

.bns-cut-corner {
  clip-path: polygon(2rem 0, 100% 0, 100% 100%, 0 100%, 0 2rem);
  position: relative;
}
.bns-cut-corner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  border-top: 2rem solid #ffffff; /* Hintergrundfarbe */
  border-right: 2rem solid transparent;
}