/* ===========================================================================
   Global HubSpot Form Styling — Atlas Theme
   Portiert aus Viscom/css/elements/_forms.css. Wirkt auf alle HubSpot-Formulare,
   die im Atlas-Theme gerendert werden. Die Spalten-Anordnung (1- vs. 2-spaltig)
   ergibt sich aus der Spalten-Konfiguration des Formulars im HubSpot-Editor
   (.form-columns-2 / .form-columns-1).

   Floating-Labels:
     - Label beginnt über dem Input (absolute) und steigt nach oben
       sobald das Feld fokussiert ist oder Inhalt enthält (`.has-value`).
     - `.has-value` wird via Inline-Script in `base.hubl.html` gesetzt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset / Base
   -------------------------------------------------------------------------- */

.hs-form-field {
  position: relative;
}

.hs-form fieldset,
form.hs-form fieldset {
  max-width: 100% !important;
}

form.hs-form .input {
  margin: 0 !important;
}

/* Field description (`<legend class="hs-field-desc">`).
   Reset the browser's `<legend>` default styling (the element has weird
   intrinsic box behaviour, e.g. spanning the parent fieldset's width)
   and place it below the input like the error message. */
form.hs-form .hs-field-desc,
form.hs-form legend.hs-field-desc {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  width: 100%;
  max-width: 100%;
  margin: 4px 0 0;
  padding: 0;
  display: block;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  color: #6c757d;
  z-index: auto;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Inputs — Underline-only Style
   -------------------------------------------------------------------------- */

form.hs-form .hs-input:not([type='checkbox']):not([type='radio']) {
  height: 36px;
  width: 100% !important;
  border: 0;
  border-bottom: 1px solid var(--atlas-input-border-color, #000);
  border-radius: 0;
  background: transparent;
  padding: 0 0 9px;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s ease-in-out;
}

/* Override theme_overrides.hubl.css' default `.hs-input:focus` halo.
   Atlas's default uses a 0.25rem box-shadow in the theme-accent (yellow
   on DPSuisse), which clashes with the underline-only input style. */
form.hs-form .hs-input:not([type='checkbox']):not([type='radio']):focus,
form.hs-form .hs-input:not([type='checkbox']):not([type='radio']):focus-visible {
  outline: 0;
  box-shadow: none;
  background: transparent;
  border-color: var(--atlas-input-border-color, #000);
  border-bottom-width: 2px;
  padding-bottom: 8px; /* keep total height stable when border thickens */
}

/* Disable Chrome's yellow autofill background — keep the underline look. */
form.hs-form .hs-input:-webkit-autofill,
form.hs-form .hs-input:-webkit-autofill:hover,
form.hs-form .hs-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--atlas-body-bg, #fff) inset !important;
  -webkit-text-fill-color: inherit !important;
  caret-color: inherit;
  transition: background-color 9999s ease-out;
}

form.hs-form textarea.hs-input {
  height: auto;
  min-height: 100px;
  padding-top: 8px;
}

form.hs-form select.hs-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-position: calc(100% - 4px) center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 22px;
}

select::-ms-expand {
  display: none;
}

/* --------------------------------------------------------------------------
   Floating Labels
   -------------------------------------------------------------------------- */

/* Rest state: label sits in the input area, near the baseline, so it
   reads like a placeholder for the empty field. */
.hs-form-field > label {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 0;
  margin: 0;
  font-weight: var(--atlas-label-font-weight, 400) !important;
  color: var(--atlas-label-color, inherit);
  transition: top 0.3s, font-size 0.3s;
  pointer-events: none;
}

/* Float state: label rises out of the input area when focused or has
   content. Distance is comfortable so the small label doesn't sit
   on top of the input text. */
.hs-form-field:focus-within > label,
.hs-form-field.has-value > label,
.hs-form-field.has-placeholder > label {
  top: -18px;
}

.hs-form-field > label span {
  transition: all 0.3s;
}

.hs-form-field:focus-within > label span,
.hs-form-field.has-value > label span,
.hs-form-field.has-placeholder > label span {
  font-size: 12px !important;
}

/* Field types where the label is static (above the control) because the
   form control itself is multi-line or shows its own visible labels
   (radio groups, checkbox groups, file inputs, GDPR booleancheckbox). */
form .hs-form-field.hs-fieldtype-radio > label,
form .hs-form-field.hs-fieldtype-checkbox > label,
form .hs-form-field.hs-fieldtype-file > label,
form .hs-form-field.hs-fieldtype-booleancheckbox > label {
  position: static;
  font-size: 14px;
  line-height: 26px;
  pointer-events: auto;
}

form .hs-form-field.hs-fieldtype-radio:focus-within > label,
form .hs-form-field.hs-fieldtype-radio.has-value > label,
form .hs-form-field.hs-fieldtype-checkbox:focus-within > label,
form .hs-form-field.hs-fieldtype-checkbox.has-value > label,
form .hs-form-field.hs-fieldtype-file:focus-within > label,
form .hs-form-field.hs-fieldtype-file.has-value > label {
  top: auto;
}

form .hs-form-field.hs-fieldtype-radio:focus-within > label span,
form .hs-form-field.hs-fieldtype-radio.has-value > label span,
form .hs-form-field.hs-fieldtype-checkbox:focus-within > label span,
form .hs-form-field.hs-fieldtype-checkbox.has-value > label span {
  font-size: 14px !important;
}

/* Selects (and date-pickers) are single-line controls the same height as
   text inputs. Their label is always shown in the floated position so the
   field aligns vertically with sibling text inputs in the same row, while
   the placeholder option ("Bitte auswählen") fills the input area. */
form .hs-form-field.hs-fieldtype-select > label,
form .hs-form-field.hs-fieldtype-date > label {
  top: -18px;
}

form .hs-form-field.hs-fieldtype-select > label span,
form .hs-form-field.hs-fieldtype-date > label span {
  font-size: 12px !important;
}

/* --------------------------------------------------------------------------
   Column Layouts — driven by HubSpot's form configuration
     .form-columns-2 → 50/50 side-by-side
     .form-columns-1 → full-width stacked (default)
   -------------------------------------------------------------------------- */

form.hs-form fieldset.form-columns-2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-right: -20px;
  max-width: unset !important;
}

form.hs-form fieldset.form-columns-2 > * {
  width: calc(100% / 2 - 20px) !important;
  margin-right: 20px;
}

form.hs-form fieldset.form-columns-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-right: -20px;
  max-width: unset !important;
}

form.hs-form fieldset.form-columns-3 > * {
  width: calc(100% / 3 - 20px) !important;
  margin-right: 20px;
}

/* --------------------------------------------------------------------------
   Field spacing between rows
   -------------------------------------------------------------------------- */

/* Field margin needs to clear the absolutely-positioned error message
   (~20 px tall single-line) plus visual breathing room to the next row. */
form.hs-form .hs-form-field {
  margin-bottom: 40px;
}

/* When the field has a description AND a potential error, reserve more
   bottom margin so the stacked elements clear the next row. */
form.hs-form .hs-form-field:has(.hs-field-desc) {
  margin-bottom: 56px;
}

/* --------------------------------------------------------------------------
   Radio / Checkbox — Custom Marker
   -------------------------------------------------------------------------- */

form .inputs-list,
form ul.inputs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inputs-list > li {
  display: block;
  margin: 0.7rem 0;
  padding: 0;
  width: 100%;
}

ul.inputs-list.multi-container > li {
  position: relative;
  line-height: inherit;
  margin: 0 0 12px;
}

ul.inputs-list.multi-container > li > label,
.hs-form-booleancheckbox > label {
  display: flex;
  align-items: flex-start;
}

/* Custom radio + checkbox marker.
   IMPORTANT: theme_overrides.hubl.css applies its own `:checked` styles
   (yellow background-image + accent border) on `input[type="radio"|"checkbox"]`.
   We override every property — height/width/background/border/padding —
   with `!important` because the cascade alone isn't reliable once HubSpot's
   own form CSS gets injected at runtime. */

form.hs-form input[type='radio'],
form.hs-form input[type='checkbox'] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px;
  min-height: 19px;
  box-sizing: border-box !important;
  border: 1px solid #000 !important;
  border-radius: 50% !important;
  margin: 4px 15px 0 0 !important;
  padding: 0 !important;
  background: transparent none !important;
  background-image: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  vertical-align: top;
}

form.hs-form input[type='checkbox'] {
  width: 21px !important;
  height: 21px !important;
  min-width: 21px;
  min-height: 21px;
  border-radius: 0 !important;
}

/* Drop the theme-accent focus halo. */
form.hs-form input[type='radio']:focus,
form.hs-form input[type='radio']:focus-visible,
form.hs-form input[type='checkbox']:focus,
form.hs-form input[type='checkbox']:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
  border-color: #000 !important;
}

/* Drop theme_overrides' yellow `:checked` background / SVG dot. */
form.hs-form input[type='radio']:checked,
form.hs-form input[type='checkbox']:checked {
  background: transparent none !important;
  background-image: none !important;
  border-color: #000 !important;
}

form.hs-form input[type='radio'] + span,
form.hs-form input[type='checkbox'] + span {
  position: relative;
  max-width: calc(100% - 34px);
}

/* Radio inner dot — solid black circle, centered. */
form.hs-form input[type='radio'] + span::before {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  background-color: #000;
  border-radius: 50%;
  /* radio is 19px wide; 15px right-margin; so dot sits at left -19-15+5 = -29 */
  left: -29px;
  top: 9px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

/* Checkbox check mark — black SVG. */
form.hs-form input[type='checkbox'] + span::before {
  content: '';
  position: absolute;
  width: 13px;
  height: 10px;
  /* checkbox 21px wide + 15 margin → mark inset ~ -31px */
  left: -31px;
  top: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l4 4 7-8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 13px 10px;
}

form.hs-form input[type='radio']:checked + span::before,
form.hs-form input[type='checkbox']:checked + span::before {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   Required Asterisk / GDPR
   -------------------------------------------------------------------------- */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Validation
   -------------------------------------------------------------------------- */

/* Error messages are pulled out of normal flow so they don't change
   the field's flow height. Keeps the input underlines in a `form-columns-2`
   row visually aligned even when only one of the two fields has an error. */
form.hs-form .hs-error-msgs {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

/* When a description (.hs-field-desc) is present in the same field,
   push the error message below it so they don't overlap. */
form.hs-form .hs-form-field .hs-field-desc ~ .hs-error-msgs {
  margin-top: 24px;
}

form.hs-form .hs-error-msgs.inputs-list > li {
  margin: 0;
  padding: 0;
}

/* Red error text — theme_overrides applies `color: var(--atlas-label-color)`
   to every `<label>` inside `.hs-form-field`, and HubSpot renders error
   messages as `<label class="hs-error-msg">`. Bump specificity + !important
   to win that override. */
form.hs-form .hs-error-msg,
form.hs-form label.hs-error-msg,
form.hs-form .hs-error-msgs label,
form.hs-form .hs-form-field .hs-error-msg {
  color: #f2545b !important;
  font-size: 14px;
  font-weight: 400 !important;
  line-height: 1.4;
}

form.hs-form .hs_error_rollup {
  display: none;
}

form.hs-form .form-input-error {
  border: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #f2545b !important;
}

/* --------------------------------------------------------------------------
   Rich-Text Headings inside forms
   -------------------------------------------------------------------------- */

form .hs-richtext img {
  max-width: 100% !important;
}

form .header {
  background-color: transparent;
  border: none;
}

form .hs-richtext h2 {
  font-size: 25px;
  line-height: 27px;
  margin: 0 0 43px;
}

form.hs-form .hs-richtext h3 {
  font-size: 25px;
  line-height: 27px;
  margin: 0 0 43px;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Submit
   atlas's global .hs-button / input[type=submit] styling already covers
   the button look (siehe theme_overrides.hubl.css). Hier nur Spacing.
   -------------------------------------------------------------------------- */

form .hs-submit {
  margin-top: 32px;
}

form .hs-button,
form input[type='submit'] {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Submitted Confirmation Message
   -------------------------------------------------------------------------- */

.submitted-message {
  border: 1px solid;
  border-radius: 20px;
  padding: 20px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Captcha
   -------------------------------------------------------------------------- */

.grecaptcha-badge {
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Mobile (≤ 767 px)
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  form.hs-form .hs-input {
    font-size: 16px; /* prevent iOS zoom on focus */
  }

  form.hs-form select.hs-input {
    background-size: 14px 9px;
  }

  /* Columns collapse to 1 on mobile */
  form.hs-form fieldset.form-columns-2,
  form.hs-form fieldset.form-columns-3 {
    margin-right: 0;
  }

  form.hs-form fieldset.form-columns-2 > *,
  form.hs-form fieldset.form-columns-3 > * {
    width: 100% !important;
    margin-right: 0;
  }

  form.hs-form input[type='radio'] {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px;
    min-height: 15px;
    margin-right: 10px !important;
  }

  form.hs-form input[type='radio'] + span {
    max-width: calc(100% - 25px);
  }

  form.hs-form input[type='radio'] + span::before {
    width: 7px;
    height: 7px;
    left: -22px;
    top: 8px;
  }

  form.hs-form input[type='checkbox'] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    min-height: 18px;
    margin: 2px 10px 0 0 !important;
  }

  form.hs-form input[type='checkbox'] + span {
    max-width: calc(100% - 28px);
  }

  form.hs-form input[type='checkbox'] + span::before {
    width: 11px;
    height: 9px;
    left: -26px;
    top: 6px;
    background-size: 11px 9px;
  }

  form.hs-form .hs-richtext h3 {
    font-size: 20px;
    line-height: 24px;
    margin: 0 0 30px;
  }
}