/* =========================================================
   GLOBAL CONTACT FORM
   Scope: any .contactformular
========================================================= */

/* Form layout */
.contactformular form{
  margin: 22px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Default form groups – 2 columns */
.contactformular .form-group{
  width: calc(50% - 8px);
  margin: 0;
  padding: 0;
}

/* Textarea row – full width */
.contactformular .form-group:has(textarea){
  width: 100%;
}

.contactformular .form-group textarea{
  width: 100%;
  min-height: 140px;
  resize: vertical;
}

/* Inputs & textarea */
.contactformular .form-control{
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--br-keyfact);
  border: 1px solid #e6e6e6;
  background: var(--clr-primary-white);
  font-family: var(--ff-primary);
  font-size: 16px;
  color: var(--footer-text);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.contactformular .form-control::placeholder{
  color: #777;
}

.contactformular .form-control:focus{
  outline: none;
  border-color: var(--clr-accent);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

/* Submit button wrapper */
.contactformular #submit_button{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* Submit button */
.contactformular #button.button{
  background: var(--clr-accent);
  color: var(--fc-white);
  border: none;
  border-radius: var(--br-keyfact);
  padding: 8px 24px;
  font-family: var(--ff-primary);
  font-weight: var(--fw-regular);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.contactformular #button.button:hover{
  filter: brightness(0.95);
}

/* Responsive */
@media (max-width: 768px){
  .contactformular .form-group{
    width: 100%;
  }
}