/* Florale Muster im Stil der Visitenkarte. Die Zeichnungen in assets/ornaments/
   entstehen mit scripts/build-ornaments.mjs. */

/* Kleiner Trenner zwischen Abschnitten: <hr class="divider"> */
.divider {
  width: 420px;
  max-width: calc(100% - 2 * var(--gutter));
  height: 68px;
  margin: 0 auto;
  border: 0;
  background: url("../assets/ornaments/trenner.svg") center / contain no-repeat;
}

.divider + .section {
  padding-top: calc(var(--space-section) * 0.5);
}

/* Im Fließtext etwas enger */
.prose .divider {
  margin-block: 2.5rem;
}

/* Blumen hängen im Kontaktbereich von oben herab */
.section--corner {
  position: relative;
  overflow: hidden;
}

.section--corner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(130px, 24vw, 270px);
  aspect-ratio: 270 / 230;
  background: url("../assets/ornaments/ecke.svg") right top / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

/* Inhalt liegt immer über den Ornamenten */
.section--corner > .container {
  position: relative;
  z-index: 1;
}

/* Die Blumen sollen im Kontaktbereich nicht hinter dem Text liegen */
@media (max-width: 899px) {
  .section.section--corner {
    padding-top: calc(var(--space-section) + 4.5rem);
  }
}