button.playsong {
  background-color: #f16b31;
  position: absolute;
  top: 32px;
  right: 24px;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 12px 24px;
  margin-top: 4px;
  margin-right: 8px;
  cursor: pointer;
  white-space: nowrap;
}
h2:has(+ .headlineAppointments) {
  background-image: url(/wp-content/themes/sonnenschule/assets/images/icons_sb.png);
  background-position: bottom left;
  background-size: auto calc(100% - 8px);
  background-repeat: no-repeat;

  background-color: rgba(var(--gelbRGB), .8);
  margin-top: -32px;
  padding: 32px 12px 24px 12px;
  text-align: center;

  position: relative;
}

@media screen and (max-width: 1580px) {
  h2:has(+ .headlineAppointments) {
    font-size: 2rem;
  }
}

@media screen and (max-width: 1420px) {
  h2:has(+ .headlineAppointments) {
    font-size: 1.6rem;
  }

  button.playsong {
    top: 24px;
  }
}

@media screen and (max-width: 1220px) {
  h2:has(+ .headlineAppointments) {
    background-image: none;
  }
}

@media screen and (max-width: 1024px) {
  h2:has(+ .headlineAppointments) {
    height: 132px;
  }

  button.playsong {
    top: auto;
    bottom: 12px;
    height: auto;
    right: 50%;
    transform: translateX(50%);
  }
}

@media screen and (max-width: 560px) {
  h2:has(+ .headlineAppointments) {
    height: 148px;
  }
}


.hero .sdz {
  display: none!important;
}

.wp-block-group .swiper {
  margin: 24px 0!important;
}

/* Genau 2 Elemente */
.block__imagetiles--wrapper:has(> :nth-child(2):last-child) > :first-child {
  grid-column: 2;
}

/* Genau 1 Element */
.block__imagetiles--wrapper:has(> :first-child:last-child) > :first-child {
  grid-column: 2;
  transform: translateX(calc(50% + 12px));
}

.hero .swiper-button-prev,
.hero .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 54px;
  height: 54px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  border-radius: 50%;
}

.hero .swiper-button-prev {
  left: 20px;
}

.hero .swiper-button-next {
  right: 20px;
}

.hero .swiper-button-prev,
.hero .swiper-button-next {
  color: #fff;
  --swiper-navigation-size: 20px;
}

.hero .swiper-button-prev {
  left: 20px;
}

.hero .swiper-button-next {
  right: 20px;
}

.hero .swiper-button-prev svg,
.hero .swiper-button-next svg {
  display: none !important;
}

.hero .swiper-button-prev::after,
.hero .swiper-button-next::after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-size: 32px;
}

.hero .swiper-button-prev::after {
  content: "\f053";
}

.hero .swiper-button-next::after {
  content: "\f054";
}