.background {
  background-image: url("../../images/backgrounds/L-5-Titelbild-waswirmachen.png") !important;
  --background-dark: url("../../images/backgrounds/L-5-Titelbild-waswirmachen.png") !important;
}

.grid-layout-12col {
  display: grid;
}

.main-text {
  grid-column: 2 / 9;
  color: black !important;
  padding-top: calc(
    45vh + 4.1rem
  ); /* 45vh für den oberen Abstand, 4.1rem für die breite des blurs */
}

.small-text {
  grid-column: 9 / 13;
  color: black !important;
  padding-top: 45vh;
  position: sticky;
  top: 4rem; /* bleibt oben beim Scrollen */
  align-self: start; /* optional: ausrichten innerhalb der Zelle */
  width: 100%; /* oder max-content */
}

div.small-text p {
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 535;
  line-height: 1.625rem;
}

@media (max-width: 768px) {
  body {
    min-height: -webkit-fill-available; /* iOS fix to get background zooming issue in order */
  }

  .main-text {
    grid-column: 1 / -1;
    padding-top: 26rem;
  }

  .small-text {
    grid-column: 1 / -1;
    position: relative;
    top: auto;
    padding-top: 1.5rem;
  }
  div.small-text p {
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
}