/* =========================================================
   BERGMANN – Contact Form Section (Divi)
   Structure:
   - 2 columns in a section/row
   - Left column class:  .contact-form
   - Right column class: .contact-props
   Notes:
   - Works with Divi Contact Form module or CF7 (common inputs)
   - Uses Bergmann theme variables (colors, radius, type)
   ========================================================= */

/* ---------- Section spacing / layout safety ---------- */
.contact-page-container{
  max-width: var(--berg-container-max) !important; 
  margin-left: auto !important; 
  margin-right: auto !important; 
  padding-left: var(--berg-space-base) !important; 
  padding-right: var(--berg-space-base) !important; 
}

.contact-form,
.contact-props{
  box-sizing: border-box;
}

.et_pb_section .contact-form,
.et_pb_section .contact-props{
  margin-bottom: 0 !important;
}


/* Remove Divi default module spacing inside column */
.contact-form .et_pb_module{
  margin-bottom: 0 !important;
}

/* Labels */
.contact-form label,
.contact-form .et_pb_contact_form_label{
  display: inline-block;
  margin: 0 0 8px 0 !important;
  color: var(--berg-text-muted) !important;
  font-family: var(--berg-font-primary) !important;
  font-weight: var(--berg-weight-normal) !important;
  font-size: var(--berg-text-sm) !important;
  letter-spacing: var(--berg-tracking-normal) !important;
  width: 100%;
  text-align: start;
}
.contact-form label i{
  color: var(--berg-primary) !important;
}
/* Divi field wrapper spacing */
.contact-form .et_pb_contact_field{
  margin-bottom: 22px !important;
}

/* Inputs / textarea (Divi + generic) */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form input[type="search"],
.contact-form textarea,
.contact-form select,
.contact-form .et_pb_contact_form input,
.contact-form .et_pb_contact_form textarea,
.contact-form .et_pb_contact_form select{
  width: 100% !important;
  background: var(--berg-bg-white) !important;
  border: 1px solid var(--berg-primary) !important;
  border-radius: 0 !important;
  padding: 14px 14px !important;

  color: var(--berg-text-primary);
  font-family: var(--berg-font-primary) !important;
  font-size: var(--berg-text-base) !important;
  line-height: var(--berg-leading-snug) !important;

  box-shadow: none !important;
  outline: none !important;
}

/* Textarea height like reference */
.contact-form textarea,
.contact-form .et_pb_contact_form textarea{
  min-height: 180px !important;
  resize: vertical;
}

/* Focus state */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.contact-form .et_pb_contact_form input:focus,
.contact-form .et_pb_contact_form textarea:focus,
.contact-form .et_pb_contact_form select:focus{
  border-color: var(--berg-bg-sage) !important;
}
/* .contact-form .et_pb_contact_form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_form_label, */
.contact-form .et_pb_contact_form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_options_wrapper .et_pb_contact_field_options_title{
  display: none !important;
}
.contact-form .et_pb_contact_form input::-webkit-input-placeholder,
.contact-form .contact-form .et_pb_contact_form textarea::-webkit-input-placeholder,
.contact-form .et_pb_contact_form input:-moz-placeholder,
.contact-form .et_pb_contact_form textarea:-moz-placeholder,
.contact-form .et_pb_contact_form input::placeholder {
    color: transparent !important;
}


/* 2-col grid for first rows (Firma/Email, Vorname/Nachname)
   Divi contact form fields are often 50% on desktop already.
   This helps align spacing and prevent weird wrapping. */
@media (min-width: 981px){
  .contact-form .et_pb_contact_form .et_pb_contact_field_half{
    width: calc(50% - 10px) !important;
    text-align: start;
  }
  .contact-form .et_pb_contact_form .et_pb_contact_field_half.et_pb_contact_field_last{
    margin-left: 20px !important;
    text-align: start;
  }
}

/* Required asterisk styling */
.contact-form .et_pb_contact_form_label .et_pb_contact_form_label_required{
  color: var(--berg-text-muted) !important;
  opacity: .9;
}

/* Helper text (e.g., * Pflichtfelder) */
.contact-form .et_pb_contact_form p,
.contact-form .et_pb_contact_form .et_pb_contact_field_options_title{
  color: var(--berg-text-muted) !important;
  font-size: 13px !important;
}

/* Checkbox row (privacy consent) */
.contact-form input[type="checkbox"],
.contact-form  .et_pb_contact p input[type="checkbox"] + label i, 
.et_pb_contact p input[type="radio"] + label i {
  content: "";
  background-color: #ffffff !important;
  border: 1px solid var(--berg-primary) !important;
  width: 24px !important;
  height: 24px !important;
  accent-color: var(--berg-primary) !important;
  transform: translateY(2px);
}
.contact-form  .et_pb_contact p input[type="checkbox"] + label{
  display: flex !important;
  color: var(--berg-text-primary) !important;
  margin-top: 12px !important;
}
.contact-form  .et_pb_contact label i:first-child {
  flex: 0 0 24px; /* Do not grow, Do not shrink, Basis is 24px */
}
.contact-form  .et_pb_contact p input[type="checkbox"]:checked + label i::before {
  content: "N";
  font-family: ETmodules;
  color: var(--berg-primary);
  width: 22px;
  height: 22px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
}

.contact-form .et_pb_contact_field_options_wrapper,
.contact-form .et_pb_contact_field_options{
  color: var(--berg-text-primary) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.contact-form .et_pb_contact_field_options label{
  margin: 0 !important;
  font-size: 13px !important;
}

/* Submit button: use your theme primary button look */
.contact-form .et_pb_contact_submit,
.contact-form button[type="submit"],
.contact-form input[type="submit"]{
  background: var(--berg-primary) !important;
  color: var(--berg-text-white) !important;
  border: 2px solid var(--berg-primary) !important;

  border-radius: var(--berg-radius-full) !important;
  padding: 14px 34px !important;

  font-family: var(--berg-font-primary) !important;
  font-weight: var(--berg-weight-semibold) !important;
  font-size: 13px !important;
  letter-spacing: var(--berg-tracking-wide) !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
  transition: transform var(--berg-transition-fast), opacity var(--berg-transition-fast);
}

/* Divi adds an arrow pseudo-element sometimes */
.contact-form .et_pb_contact_submit::after{
  display: none !important;
}

.contact-form .et_pb_contact_submit:hover,
.contact-form button[type="submit"]:hover,
.contact-form input[type="submit"]:hover{
  opacity: .95;
  transform: translateY(-1px);
}

/* Center submit button like reference */
.contact-form .et_pb_contact_submit,
.contact-form button[type="submit"],
.contact-form input[type="submit"]{
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  min-width: 260px;
}

.contact-form .et_pb_contact_form{
  text-align: center; /* centers the submit */
}

/* But keep fields left-aligned */
.contact-form .et_pb_contact_form .et_pb_contact_form_fields{
  text-align: left;
}
.contact-form .et_contact_bottom_container{
  display: inline-block !important;
  margin-top: 0px !important;
}

/* ---------- Right: contact props card ---------- */
.contact-props{
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-direction: column;
  background: rgba(223, 228, 219, 0.3);
  padding: 32px !important;
  max-width: 320px;
  float: right;
}

/* The “card” can be a Text module or Blurb module inside the column */
.contact-props .et_pb_module{
  margin-bottom: 0 !important;
}

.contact-props .et_pb_text,
.contact-props .et_pb_blurb{
  /* padding: 12px !important; */
  max-width: 320px;
  width: 100%;
}

.contact-props .et_pb_main_blurb_image img{
  animation: none !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
}
.contact-props .et_pb_blurb_container{
  padding-left: 0px !important;
}
.contact-props .et_pb_blurb_container a{
  border-bottom: none !important ;
}

.et_pb_blurb_container a:hover{
  border-bottom: 1px solid rgba(0,0,0,.2) !important;
}
/* Heading inside the card (Kontakt) */
.contact-props h1,
.contact-props h2,
.contact-props h3,
.contact-props .et_pb_module_header{
  margin: 0 0 14px 0 !important;
  color: var(--berg-text-primary) !important;
  font-family: var(--berg-font-primary) !important;
  font-weight: var(--berg-weight-semibold) !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

/* Text lines */
.contact-props p,
.contact-props .et_pb_blurb_description{
  margin: 0 0 10px 0 !important;
  color: var(--berg-text-primary) !important;
  font-family: var(--berg-font-primary) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* Icon rows (if you use Blurbs) */
.contact-props .et_pb_main_blurb_image{
  margin-bottom: 0 !important;
}
.contact-props .et_pb_blurb_container{
  padding-left: 10px;
}

/* Links */
.contact-props a{
  color: var(--berg-text-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.contact-props a:hover{
  border-bottom-color: rgba(0,0,0,.45);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){

  .contact-form .et_contact_bottom_container{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    float: left !important;
  }
  .contact-form  .et_pb_contact_right{
    min-width: 100% !important;
    text-align: center!important;
  }
  .contact-props{
    justify-content: flex-start;
    margin-top: 42px !important;
    max-width: 100% !important;
  }

  .contact-props .et_pb_text,
  .contact-props .et_pb_blurb{
    max-width: 100%;
  }

  .contact-form .et_pb_contact_form{
    text-align: left;
  }

  .contact-form .et_pb_contact_submit,
  .contact-form button[type="submit"],
  .contact-form input[type="submit"]{
    min-width: 0;
    width: 100%;
  }
}