.mockup-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 400px;
  margin: 3rem 0;
}

.mockup-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -999;
}

.mockup-text textPath {
  alignment-baseline: middle;
  opacity: 0.6;
  mix-blend-mode: multiply;
}

.mockup-text hr {
  border: 0.4px solid #2a26238a;
  margin: 0.3em 0.8em;
}

.product-engraving-form {
  display: grid;
  gap: .7rem;
}

.product-engraving-field {
  display: grid;
  grid-template-columns: 2fr 5fr;
  align-items: center;
}

@media screen AND (max-width: 599px) {
	.product-engraving-field {
		grid-template-columns: 1fr;
	}
}

/*Anpassung Schriftgrößen unterschiedlicher Font-Auswahlen */

.mockup-text {
  --engraving-scale: 1;
}

.mockup-text > svg[style*="font-family: 'Quicksand'"],
.mockup-text > svg[style*="font-family: Quicksand"] {
  --engraving-scale: 0.96 !important;
}
.mockup-text > svg[style*="font-family: 'Suranna'"],
.mockup-text > svg[style*="font-family: Suranna"] {
  --engraving-scale: 1.1 !important;
}
.mockup-text > svg[style*="font-family: 'Outfit'"],
.mockup-text > svg[style*="font-family: Outfit"] {
  --engraving-scale: 1 !important;
}
.mockup-text > svg[style*="font-family: 'Parisienne'"],
.mockup-text > svg[style*="font-family: Parisienne"] {
  --engraving-scale: 1.1 !important;
}
.mockup-text > svg[style*="font-family: 'Carattere'"],
.mockup-text > svg[style*="font-family: Carattere"] {
  --engraving-scale: 1.3 !important;
}

.engraving-svg {
  display: block;
  overflow: visible;
}