section.contact {
  overflow: hidden;
}
section.contact .container {
  display: flex;
  flex-direction: row;
  gap: 2em;
}

section.contact .forms-main-container {
  position: relative;
  width: 100%;
  height: fit-content;
  overflow: hidden;
  background-color: #fff;
  color: #DF0073;
  border-radius: 20px;
  z-index: 1;
}

section.contact .form-columns {
  display: flex;
  flex-direction: row;
  width: 400%;
  transform: translateX(0%);

  transition: transform 0.3s ease-in;
}

section.contact .contact-form-container.show-0 .form-columns {
  transform: translateX(0%);
}
section.contact .contact-form-container.show-1 .form-columns {
  transform: translateX(-25%);
}
section.contact .contact-form-container.show-2 .form-columns {
  transform: translateX(-50%);
}
section.contact .contact-form-container.show-3 .form-columns {
  transform: translateX(-75%);
}
section.contact .contact-form-container.show-0 #form-button-prev {
  display: none;
}
section.contact .contact-form-container.show-3 #form-button-next {
  display: none;
}
section.contact .contact-form-container #form-button-send {
  display: none;
}
section.contact .contact-form-container.show-3 #form-button-send {
  display: block;
}

section.contact .form-column {
  width: 100%;
  padding: 0 2em;
}

section.contact .forms-main-container .buttons {
  display: flex;
  margin: 2em 2em;
}
section.contact .forms-main-container .buttons.dis {
  visibility: hidden;
}




.form-field {
  margin: 2em 0;
  position: relative;
}
.form-column > .form-field:first-child {
  margin-top: 0;
}
.form-field .form-label span.required,
.form-field .form-data label span.required {
  display: none;
}
.form-field.inside-label .form-label {
  position: absolute;
  margin: 10px 10px 0;
}


.form-field.hide-label .form-label {
  display: none;
}

.form-display-wrapper.large {
  text-transform: uppercase;
  font-weight: 600;
}

.form-field.form-status {
  width: fit-content;
  height: fit-content;
  margin: 2em auto 0;
}
.form-field.form-status {
  border-radius: 50%;
  overflow: hidden;
}
.form-field.form-status p {
  margin: 0;
}

section.contact .contact-form-container.show-1 .form-field.form-status img {
  background: conic-gradient(#DF0073 0% 25%, #b4b4b4 25% 100%);
}
section.contact .contact-form-container.show-2 .form-field.form-status img {
  background: conic-gradient(#DF0073 0% 50%, #b4b4b4 50% 100%);
}
section.contact .contact-form-container.show-3 .form-field.form-status img {
  background: conic-gradient(#DF0073 0% 75%, #b4b4b4 75% 100%);
}
section.contact .contact-form-container.show-3:has(.notices.success) .form-field.form-status img {
  background: #DF0073;
}

.form-field.form-status .form-label {
  display: none;
}
.form-field.form-status img {
  height: 100px;
  background: #b4b4b4;
  transition: background 0.4s ease-in;
}

.form-field .form-input,
.form-field .form-textarea {
  width: 100%;
  font-size: 18px;
  padding: 45px 8px 15px;
  border-radius: 10px;
}
.form-field .form-input:focus-visible,
.form-field .form-textarea:focus-visible {
  outline: none;
  border: 2px solid #DF0073;
}
.form-field .form-checkbox {
  accent-color: #DF0073;
}



.form-field.myradio-bs .form-label {
  display: none;
}
.form-field.myradio-bs .form-data {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1em, 2vw, 2em);
}
.form-field.myradio-bs .form-data .radio {
  margin: 0;
  height: fit-content;
  height: 100%;
}
.form-field.myradio-bs .form-data .radio label {
  display: flex !important;
  flex-direction: column;
  padding: clamp(1em, 2vw, 2em);
  border: 1px solid gray;
  height: 100%;
  gap: 1em;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  border-radius: 20px;
  transition: all 0.3s ease-in;
  hyphens: auto;
}
.form-field.myradio-bs .form-data .radio label img {
  height: 70px;
}



.form-field.myradio-bs .form-data .radio label::before {
  content: url(../images/question.svg);
  /*width: 70px;*/
  height: 70px;
  margin: 0 auto;
  position: relative;
  display: inline-flex;
  justify-content: center;
  aspect-ratio: 1;
  display: block;
}
.form-field.myradio-bs .form-data .radio:nth-child(1) label::before {
  content: url(../images/Icon_Firma.svg);
}
.form-field.myradio-bs .form-data .radio:nth-child(2) label::before {
  content: url(../images/Icon_Wohnung.svg);
}
.form-field.myradio-bs .form-data .radio:nth-child(3) label::before {
  content: url(../images/Icon_Haus.svg);
}
.form-field.myradio-bs .form-data .radio:nth-child(4) label::before {
  content: url(../images/Icon_Fragezeichen.svg);
}



input[type="radio"]:checked + label {
  font-weight: 600;
  border: 2px solid #DF0073 !important;
  background-color: #DF00731A;
}
input[type="radio"] {
  appearance: none;
  margin: 0;
  display: none;
}


section.contact .intro-block {
  position: relative;
  display: flex;
  flex-direction: column;
}
section.contact .images figure {
/*  display: none;*/
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in;
}
section.contact .intro-block > * {
  position: relative;
}
section.contact .images {
  position: absolute;
  width: 100%;
  height: 80%;
  bottom: 0;
  flex: 1;
}
section.contact .images figure {
  position: absolute;
  height: 100%;
  right: 0;
}
section.contact .images figure.bobby {
  height: 120%;
  bottom: -5em;
  transform: translate(4em);
  transform: translate(calc(16em - clamp(3em, 11vw, 11em)));
}
section.contact .images figure.einbrecher {
  height: 110%;
  bottom: -2em;
  transform: translate(calc(22em - clamp(0em, 11vw, 11em)));
}
section.contact .images figure.haus {
  height: 60%;
  bottom: -1em;
}
section.contact .images figure.installateur {
  height: 120%;
  bottom: -5em;
  transform: translate(calc(12em - clamp(3em, 11vw, 10em)));
}

section.contact:has(.contact-form-container.show-0) .images figure:nth-child(1) {
	display: block;
  opacity: 1;
  visibility: visible;
}
section.contact:has(.contact-form-container.show-1) .images figure:nth-child(2) {
	display: block;
  opacity: 1;
  visibility: visible;
}
section.contact:has(.contact-form-container.show-2) .images figure:nth-child(3) {
	display: block;
  opacity: 1;
  visibility: visible;
}
section.contact:has(.contact-form-container.show-3) .images figure:nth-child(4) {
	display: block;
  opacity: 1;
  visibility: visible;
}


#succ {
  padding: 0 2em;
  margin: 3em 0;
  text-align: center;
}
.form-field.succ {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: fit-content;
  display: none;
}
.form-field.succ:has(.show) {
  display: block;
}

@media (max-width: 800px) {
	section.contact .container {
		flex-direction: column;
	}
	.form-field.myradio-bs .form-data .radio {
		min-width: 100px;
	}
	.form-field.myradio-bs .form-data {
		gap: 0.5em;
	}
	.form-field.myradio-bs .form-data .radio label img,
	.form-field.myradio-bs .form-data .radio label::before {
		height: 30px;
	}
	.form-field.myradio-bs .form-data .radio label {
		padding: 0.5em;
		gap: 0.5em;
	}
	.form-field.form-status img {
		height: 60px;
	}
	.form-field.form-status {
		margin: 1em auto 0;
	}
	.form-field {
		margin: 1em 0;
	}
	.form-field .form-input, .form-field .form-textarea {
		padding: 35px 8px 15px;
	}

	section.contact .images {
		position: relative;
		min-height: 140px;
	}
	section.contact .images figure.bobby {
		height: 210%;
		bottom: -2em;
		transform: translate(2em);
	}
	section.contact .images figure.einbrecher {
		height: 250%;
		transform: translate(3em);
		bottom: -2em;
	}
	section.contact .images figure.haus {
		height: 125%;
		bottom: -1em;
	}
	section.contact .images figure.installateur {
		height: 210%;
		bottom: -2em;
		transform: translate(0);
	}
	section.contact .images figure {
	}
}