.hero-jojo {
  background-image: url("/images/jojo/jojo-armchair-edited.jpg");
  width: 100%;
  height: 2500px;
  background-size: cover;
}

.header-block {
  padding-top: 39%;
  padding-left: 5rem;
  width: 50%;
}

.header-block p {
  color: #fff;
  font-family: nohemi-light;
  font-size: clamp(1rem, 0.7vw + 1rem, 5rem);
  margin-bottom: 10rem;
}

.header-block h1 {
  color: #fff;
  font-family: nohemi-light;
  font-size: clamp(1rem, 12vw + 1rem, 15rem);
  margin-bottom: 10rem;
}



.section1-jojo {
  background-color: #d6d3af;
  width: 100%;
  height: 6000px;
}

.jojo-header-wrapper {
  position: relative;
  padding: 5%;
}

.section1-jojo-header {
  color: black;
  opacity: 0;
  will-change: opacity, transform;
}

.section1-jojo-header h1 {
  font-size: clamp(3rem, 10vw + 1rem, 15rem);
  font-family: nohemi-reg;
  line-height: 1; /* passt zur 1.05em-Maske */
}

.section1-jojo-images {
  position: relative;
  display: grid;
  align-items: start;
  gap: 0;
}

.img1-wrapper, .img2-wrapper, .img3-wrapper {
  grid-area: 1 / 1;
}

.img1 {
  z-index: 1;
  transform: translate(35%, -10%);
  width: 30%;
}
.img2 {
  z-index: 2;
  transform: translate(170%, 30%);
  width: 20%;
}
.img3 {
  z-index: 3;
  transform: translate(300%, 100%);
  width: 20%;
}

.section1-jojo-p {
  font-family: nohemi-light;
  font-size: clamp(1rem, 2.8vw + 1rem, 5rem);
  padding: 5%;
  color: #fff;
  letter-spacing: 1px;
  position: relative;
  transform-origin: center center;
  will-change: transform, opacity;
}

.big-img-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rem 0;          /* Abstand zum Text */
  width: 100%;
}

.big-img-wrapper img {
  height: auto;
  width: 20%;
  max-width: 100%;
  transform-origin: center center;
  will-change: width;
}

.section1-jojo-text {
  display: flex;
  flex-direction: column;
}

.p2, .p3, .p4, .p5 {
  font-size: clamp(1rem, 1vw + 1rem, 10rem);
}


.p1 {
  padding-top: 20%;
  width: 60%;
}