#raumSection {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Mindestens so viel Luft wie zwischen Zitat und Interesse-Button (2rem) */
  margin-top: 3rem;
}

#raumBild {
  position: relative;
  width: 100%;
  height: 45vh;
  min-height: 260px;
  overflow: hidden;
}

/* Ueberhang oben und unten, damit der Parallax-Versatz nicht ins Leere laeuft */
#raumBildInner {
  position: absolute;
  left: 0;
  top: -15%;
  width: 100%;
  height: 130%;
  background-image: url(../../assets/img/Raum.jpeg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
}

#raumHinweis {
  margin: 0;
  padding: 1.25rem 1.5rem;
  text-align: center;
  text-wrap: wrap;
  font-family: "Inter";
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #9c4515;
}

@media (min-width: 576px) {
  /* Die Nachbarn arbeiten mit negativen Margins, die mit unseren kollabieren:
     .kontakt hat margin-bottom: -30rem, #emMovable margin-top: -20rem
     (+ padding-top: 20rem, #emBg bottom: 5rem, .em bottom: 40rem).
     margin-top: 40rem  -> ca. 10rem Abstand unter dem Kontakt-Block
                           (davon ~5rem durch dessen scale(120%) belegt).
     margin-bottom: -4rem -> die EM-Kreise beginnen ca. 6rem unter dem Foto.
     Das sind die beiden Stellschrauben, falls es zu eng/luftig wirkt. */
  #raumSection {
    margin-top: 40rem;
    margin-bottom: -4rem;
    z-index: 3;
  }

  #raumBild {
    height: min(70vh, 600px);
  }

  #raumBild::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to left,
      rgba(191, 85, 30, 0.92) 0%,
      rgba(191, 85, 30, 0.78) 22%,
      rgba(191, 85, 30, 0) 55%
    );
  }

  /* Gleicher Abstand nach oben, unten und rechts; der Text sitzt darin
     vertikal zentriert ueber dem sichtbaren Bildausschnitt. */
  #raumHinweis {
    position: absolute;
    top: 3rem;
    bottom: 3rem;
    right: 3rem;
    width: min(38%, 460px);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    font-size: 1.4rem;
    color: #ffe6cf;
    text-shadow: 0px 2px 12px rgba(74, 28, 8, 0.45);
    z-index: 2;
  }
}

@media (min-width: 1152px) {
  #raumHinweis {
    top: 4rem;
    bottom: 4rem;
    right: 4rem;
    font-size: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #raumBildInner {
    transform: none !important;
  }
}