:root {
  --pink: #E8047C;
  --gray-light: #DBD6D1;
  font-family: sans-serif;
}

* {
  margin: 0;
  padding: 0;
}

.btn-primary{
  background-color: var(--pink);
  border-color: var(--pink);
  margin-top: 0.5em;
}

.btn-primary:hover{
  background-color: var(--pink);
  border-color: white;
}

input[type='submit']{
  background-color: var(--pink);
  border-color: var(--pink);
  color: white;
  border-radius: 5px;
  margin-top: 1em;
  padding: 0.5em;
  font-weight: 400;
}

input[type='submit']:hover{
  background-color: #454545;
  border-color: #454545;
  color: white;
  border-radius: 5px;
  padding: 0.5em;
  font-weight: 400;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.container{
  margin-top: 7%;
}

.form-container{
  margin-left: 2em;
  padding: 2em;
}

.card{
  background-color: var(--gray-light);
  border-radius: 20px;
  padding: 0 2em 0 0;
  display: flex;
}

img{
  width: 400px;
  overflow: hidden;
  border-radius: 20px 0 0 20px;
}

input[type='radio'] {
  margin-right: 0.5em;
  margin-left: 1.5em;
}

input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: white;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid white;
}

input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: var(--pink);
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid var(--pink);
}

#herr {
  margin-left: -0.1em;
}

input[type='text'], input[type='date'], select{
  border:none;
  border-bottom: 1px solid var(--pink);
  background-color: var(--gray-light);
  padding: 5px 10px;
  outline: none;
  margin-top: -1em;
}

#plz {
  border: none;
  border-bottom: 1px solid var(--pink);
  background-color: var(--gray-light);
  padding: 5px 10px;
  outline: none;
  margin-top: -1em;
}

input[type='email'], select{
  border:none;
  border-bottom: 1px solid var(--pink);
  background-color: var(--gray-light);
  padding: 5px 10px;
  outline: none;
  margin-top: -1em;
}

input[type='tel'], select{
  border:none;
  border-bottom: 1px solid var(--pink);
  background-color: var(--gray-light);
  padding: 5px 10px;
  outline: none;
  margin-top: -1em;
}

#input {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
}

[placeholder]:focus::-webkit-input-placeholder {
  transition: text-indent 0.4s 0.4s ease; 
  text-indent: -100%;
  opacity: 1;
}

label {
  display: inline-block;
  max-width: 100%;
  margin-top: 2em;
  font-weight: 700;
}

p {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

@media screen and (max-width: 992px) {
  .card-left-img {
    display: none;
  }
}