.form-field{margin:12px 0;}
.cf-label{display:block;text-align:left;margin-bottom:6px;font-weight:500;}
.cf-input,.cf-textarea{display:block;width:100%;padding:10px;border:1px solid #113b5b;box-sizing:border-box;}
.cf-textarea{min-height:220px;resize:vertical;}


/* === ContactForm-Map-StackingFix (redundant for robustness) === */
.contact-form, .contact-card, .ww_form_element, .section--has-map-gap {
  position: relative;
  z-index: 20;
}
.ww_googleMaps_content, .ww_googleMaps_element, .map, #map {
  position: relative;
  z-index: 5;
}


/* === ContactForm-LayoutFix (normalize) === */
.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  overflow: visible;
}
.contact-form label,
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 90%;
  max-width: 100%;
  box-sizing: border-box;
}
.contact-form button[type="submit"],
.contact-form input[type="submit"] {
  align-self: center;
  display: inline-block;
  margin-top: 8px;
  position: static;
}



/* Ensure sufficient space below Kontakt section so the map starts afterwards */
.section--has-map-gap {
  margin-bottom: 0;
  padding-bottom: clamp(260px, 38vh, 520px);
}


/* Keep map below the blue section without overlapping */
.ww_googleMaps_content, .ww_googleMaps_element, .map, #map {
  margin-top: 0 !important;
  position: relative;
  z-index: 5;
}


/* === Fixed contact form size as requested (380x350) === */
.contact-form, .contact-card {
  width: 380px !important;
  max-width: 380px !important;
  height: 350px !important;
  max-height: 350px !important;
  box-sizing: border-box;
}
.contact-form form {
  height: 100%;
}
/* Keep fields comfortably inside the fixed height */
.contact-form textarea {
  height: 140px;
}



/* === Contact form container @425x350 and inner fit === */
#element_61_content,
.content.ww_form_element {
  width: 425px !important;
  max-width: 425px !important;
  height: 350px !important;
  min-height: 350px !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* Make card and form fill the container */
.contact-card {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.contact-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Fields fill width inside the 425px box */
.contact-form label,
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  box-sizing: border-box;
}

/* Let the textarea flex to use available vertical space */
.contact-form textarea {
  flex: 1 1 auto;
  min-height: 120px;
}

/* Keep the send button visible and centered at the bottom */
.contact-form .btn-primary,
.contact-form button[type="submit"],
.contact-form input[type="submit"] {
  align-self: center;
  margin-top: auto;
  position: static;
}



/* === Compact fit for 425x350, prevent clipping === */
#element_61_content,
.content.ww_form_element {
  overflow: visible !important; /* don't clip labels/shadows */
}

.contact-card {
  padding: 12px !important; /* tighter padding to gain space */
}

/* Grid layout so everything fits inside 350px height */
.contact-form {
  display: grid !important;
  grid-template-rows: auto auto auto 1fr auto; /* label, input, label, textarea (flex), button */
  gap: 8px !important;
  width: 100%;
  height: 100%;
  align-content: start;
}

/* Slightly smaller labels to avoid overflow */
.contact-form label {
  font-size: 1rem !important;
  line-height: 1.25 !important;
  margin: 0 0 2px 0 !important;
}

/* Inputs full width with modest height */
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100% !important;
  box-sizing: border-box !important;
}

.contact-form input {
  height: 38px !important;
  padding: 6px 10px !important;
}

/* Textarea uses remaining space but not too small */
.contact-form textarea {
  min-height: 100px !important;
  resize: vertical;
}

/* Submit button centered and always visible */
.contact-form .btn-primary,
.contact-form button[type="submit"],
.contact-form input[type="submit"] {
  justify-self: center;
  align-self: end;
  margin-top: 6px !important;
  position: static !important;
}



/* === Tight containment for kontakt form inside #element_61_content === */
#element_61_content {
  width: 425px !important;
  height: 350px !important;
  min-height: 350px !important;
  max-height: 350px !important;
  box-sizing: border-box;
  overflow: hidden !important; /* keep backgrounds inside */
  position: relative;
}

/* Kill the big gap on the section inside this element */
#element_61_content .section--has-map-gap {
  padding-bottom: 0 !important;
  margin: 0 !important;
}

/* Make section + card fill the container exactly */
#element_61_content .contact-section {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
#element_61_content .contact-card {
  width: 100% !important;
  height: 100% !important;
  padding: 14px !important;
  box-sizing: border-box;
  display: flex;
}
#element_61_content .contact-form {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

/* Fit fields neatly */
#element_61_content .contact-form label {
  font-size: 1rem !important;
  line-height: 1.25 !important;
  margin: 0 0 2px 0 !important;
}
#element_61_content .contact-form input,
#element_61_content .contact-form textarea,
#element_61_content .contact-form select {
  width: 100% !important;
  box-sizing: border-box !important;
}
#element_61_content .contact-form input {
  height: 38px !important;
  padding: 6px 10px !important;
}
#element_61_content .contact-form textarea {
  flex: 1 1 auto;
  min-height: 110px !important;
  resize: vertical;
}

/* Button centered at bottom */
#element_61_content .contact-form .btn-primary,
#element_61_content .contact-form button[type="submit"],
#element_61_content .contact-form input[type="submit"] {
  align-self: center;
  margin-top: 6px !important;
  position: static !important;
}



/* === Keep the submit button fully inside the card === */
#element_61_content .contact-card {
  padding: 16px 16px 28px !important; /* extra bottom padding for the button */
}

#element_61_content .contact-form {
  display: grid !important;
  grid-template-rows: auto auto auto 1fr auto;
  height: 100% !important;
  gap: 10px !important;
  align-content: start;
  min-height: 0;
}

#element_61_content .contact-form textarea {
  min-height: 90px !important; /* free a bit more vertical space */
}

#element_61_content .contact-form .btn-primary,
#element_61_content .contact-form button[type="submit"],
#element_61_content .contact-form input[type="submit"] {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  align-self: end !important;
  justify-self: center !important;
  position: static !important;
}



/* === Button below the card, fully inside the outer box === */
#element_61_content {
  width: 425px !important;
  height: 420px !important;   /* was 350 – add room for the button */
  min-height: 420px !important;
  max-height: 420px !important;
  position: relative;         /* anchor for absolute-positioned button */
  overflow: hidden !important;
}

/* The inner card leaves space at the bottom for the button */
#element_61_content .contact-card {
  padding: 14px 16px 74px !important;  /* extra bottom space (~button height + gap) */
  box-sizing: border-box;
}

/* Place the submit button centered under the card */
#element_61_content .contact-form .btn-primary,
#element_61_content .contact-form button[type="submit"],
#element_61_content .contact-form input[type="submit"] {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 16px !important;
  margin: 0 !important;
}

/* Keep inputs tidy */
#element_61_content .contact-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  height: 100% !important;
}
#element_61_content .contact-form textarea { min-height: 110px !important; }



/* === V9: Button inside #element_61_content at the bottom, no overlap === */
#element_61_content {
  width: 425px !important;
  height: 470px !important;      /* more space so the button fits below the textarea */
  min-height: 470px !important;
  max-height: 470px !important;
  overflow: visible !important;  /* avoid visual clipping */
  position: relative;
  box-sizing: border-box;
}

/* No extra gap from section when nested here */
#element_61_content .section--has-map-gap {
  padding-bottom: 0 !important;
  margin: 0 !important;
}

/* Card + form fill the box */
#element_61_content .contact-card {
  width: 100% !important;
  height: 100% !important;
  padding: 16px !important;          /* standard padding all around */
  box-sizing: border-box;
  display: flex;
}
#element_61_content .contact-form {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Comfortable fields */
#element_61_content .contact-form input {
  height: 38px !important;
  padding: 6px 10px !important;
  box-sizing: border-box !important;
}
#element_61_content .contact-form textarea {
  flex: 1 1 auto !important;         /* take remaining space */
  min-height: 130px !important;      /* but allow room for the button */
  box-sizing: border-box !important;
}

/* Place button in normal flow at the bottom */
#element_61_content .contact-form .btn-primary,
#element_61_content .contact-form button[type="submit"],
#element_61_content .contact-form input[type="submit"] {
  position: static !important;       /* undo previous absolute */
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
  align-self: center !important;
  margin-top: auto !important;       /* pushes to bottom of flex column */
  margin-bottom: 0 !important;
}