/* ==========================================================
   RESPONSIVE KONTAKTFORMULAR – WPForms 1502
   Mobile Layout entsprechend der schmalen Referenz:
   - kompaktere Typografie
   - Felder untereinander
   - feste, saubere Feldhöhen
   - Senden-Button über die Formularbreite
   - reCAPTCHA darf den Viewport nicht verbreitern
   ========================================================== */

@media (max-width: 768px) {

  /* Formularbreite weiter über das vorhandene MCG-c8-Raster steuern. */
  html body #wpforms-1502 {
    width: var(--c8, 64%) !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    --form-copy-size: 18px;
    --form-copy-line-height: 1.35;
  }

  html body #wpforms-form-1502 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  /* Mobile: jedes Feld in eine eigene Zeile. */
  html body #wpforms-form-1502 .wpforms-field-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body #wpforms-form-1502 .wpforms-field,
  html body #wpforms-1502-field_1-container,
  html body #wpforms-1502-field_2-container,
  html body #wpforms-1502-field_3-container,
  html body #wpforms-1502-field_5-container,
  html body #wpforms-1502-field_6-container {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Einzeilige Felder wie in der Mobile-Referenz. */
  html body #wpforms-1502-field_1,
  html body #wpforms-1502-field_2,
  html body #wpforms-1502-field_3,
  html body #wpforms-1502-field_5 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 45px !important;
    min-height: 45px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;

    font-family: "Inter", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
  }

  /* Nachricht etwas höher, aber weiterhin proportional. */
  html body #wpforms-1502-field_6 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 134px !important;
    min-height: 134px !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;

    font-family: "Inter", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    resize: vertical !important;
  }

  html body #wpforms-form-1502 input::placeholder,
  html body #wpforms-form-1502 textarea::placeholder {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  /* Submit-Bereich darf nicht breiter als das Formular werden. */
  html body #wpforms-form-1502 .wpforms-submit-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
  }

  /* Button wie in der Referenz über die ganze Formularbreite. */
  html body #wpforms-form-1502 .wpforms-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;

    margin: 0 !important;
    padding: 0 24px !important;
    gap: 14px !important;
    box-sizing: border-box !important;

    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body #wpforms-form-1502 .wpforms-submit::after {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 30px !important;
    margin: 0 !important;
  }

  /* reCAPTCHA/WPForms-Captcha nie zum horizontalen Seiten-Overflow werden lassen. */
  html body #wpforms-form-1502 .wpforms-recaptcha-container,
  html body #wpforms-form-1502 .wpforms-field-recaptcha,
  html body #wpforms-form-1502 .g-recaptcha {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
}

/* Sehr schmale Phones: Captcha proportional verkleinern und Button kompakt halten. */
@media (max-width: 390px) {
  html body #wpforms-1502 {
    width: 64% !important;
  }

  html body #wpforms-form-1502 .wpforms-submit {
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 10px !important;
  }

  html body #wpforms-form-1502 .wpforms-submit::after {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 28px !important;
  }

  /* Google reCAPTCHA ist standardmäßig ca. 304px breit. */
  html body #wpforms-form-1502 .g-recaptcha,
  html body #wpforms-form-1502 .wpforms-recaptcha-container > div {
    transform: scale(0.63) !important;
    transform-origin: left top !important;
  }

  html body #wpforms-form-1502 .wpforms-recaptcha-container {
    min-height: 50px !important;
    height: 50px !important;
    overflow: visible !important;
  }
}


/* ==========================================================
   KONTAKTFORMULAR 1502 – MOBILE FIX V2
   Ziel: Mobile-Aufbau wie in der Referenz.
   Wichtig:
   - NICHT var(--c8) verwenden, weil --c8 im mobilen Raster
     auf 100% aufgelöst werden kann.
   - Auch die gelbe Außen-Section auf volle Viewportbreite setzen.
   ========================================================== */

@media (max-width: 768px) {

  /* Die gelbe Kontakt-Section darf auf Mobile nicht auf einer
     Desktop-/Tablet-Breite stehen bleiben. */
  html body :is(
    .has-yellow-background-color,
    .has-amber-background-color
  ):has(#wpforms-form-1502) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Kontakt-Überschrift auf Mobile kompakter und an derselben
     linken Achse wie das Formular. */
  html body :is(
    .has-yellow-background-color,
    .has-amber-background-color
  ):has(#wpforms-form-1502) .wp-block-heading {
    width: 64% !important;
    max-width: 64% !important;
    margin-left: 15% !important;
    margin-right: 0 !important;
    font-size: 30px !important;
    line-height: 1.1 !important;
  }

  /* Formular bewusst prozentuell zur Section – nicht über --c8. */
  html body #wpforms-1502 {
    width: 64% !important;
    max-width: 64% !important;
    margin-left: 15% !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;

    --form-copy-size: 18px !important;
    --form-copy-line-height: 1.35 !important;
  }

  html body #wpforms-form-1502 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  html body #wpforms-form-1502 .wpforms-field-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #wpforms-form-1502 .wpforms-field,
  html body #wpforms-1502-field_1-container,
  html body #wpforms-1502-field_2-container,
  html body #wpforms-1502-field_3-container,
  html body #wpforms-1502-field_5-container,
  html body #wpforms-1502-field_6-container {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    box-sizing: border-box !important;
  }

  /* Name, E-Mail, Website, Telefonnummer */
  html body #wpforms-1502-field_1,
  html body #wpforms-1502-field_2,
  html body #wpforms-1502-field_3,
  html body #wpforms-1502-field_5 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 45px !important;
    min-height: 45px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;

    font-family: "Inter", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Nachricht */
  html body #wpforms-1502-field_6 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 134px !important;
    min-height: 134px !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;

    font-family: "Inter", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    resize: vertical !important;
  }

  html body #wpforms-form-1502 input::placeholder,
  html body #wpforms-form-1502 textarea::placeholder {
    font-size: 18px !important;
    line-height: 1.35 !important;
    opacity: 1 !important;
  }

  /* Submit-Container */
  html body #wpforms-form-1502 .wpforms-submit-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
  }

  /* Wie in der schmalen Referenz:
     Button = komplette Formularbreite.
     Text darf bei sehr schmaler Breite umbrechen. */
  html body #wpforms-form-1502 .wpforms-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;

    margin: 0 !important;
    padding: 0 38px !important;
    gap: 26px !important;
    box-sizing: border-box !important;

    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body #wpforms-form-1502 .wpforms-submit::after {
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 34px !important;
    margin: 0 !important;
  }

  /* Captcha-Wrapper darf die Seite selbst nicht verbreitern. */
  html body #wpforms-form-1502 .wpforms-recaptcha-container,
  html body #wpforms-form-1502 .wpforms-field-recaptcha {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
}

/* Sehr schmale Phones: echtes Google-reCAPTCHA auf Formularbreite skalieren. */
@media (max-width: 390px) {
  html body #wpforms-form-1502 .g-recaptcha,
  html body #wpforms-form-1502 .wpforms-recaptcha-container > div {
    transform: scale(0.63) !important;
    transform-origin: left top !important;
  }

  html body #wpforms-form-1502 .wpforms-recaptcha-container {
    height: 50px !important;
    min-height: 50px !important;
  }
}


/* ==========================================================
   KONTAKTFORMULAR 1502 – MOBILE FIX V3
   Korrektur:
   Der bestehende Gutenberg-Wrapper .mcg-width-c8 hat mobil bereits
   die richtige Breite. Das Formular darf darin NICHT nochmals auf
   64 % verkleinert werden.
   ========================================================== */

@media (max-width: 768px) {

  /* Formular füllt den bereits korrekt dimensionierten c8-Wrapper komplett aus. */
  html body #wpforms-1502 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  html body #wpforms-form-1502,
  html body #wpforms-form-1502 .wpforms-field-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body #wpforms-1502-field_1-container,
  html body #wpforms-1502-field_2-container,
  html body #wpforms-1502-field_3-container,
  html body #wpforms-1502-field_5-container,
  html body #wpforms-1502-field_6-container,
  html body #wpforms-1502-field_1,
  html body #wpforms-1502-field_2,
  html body #wpforms-1502-field_3,
  html body #wpforms-1502-field_5,
  html body #wpforms-1502-field_6 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Button genauso breit wie die Eingabefelder. */
  html body #wpforms-form-1502 .wpforms-submit-container,
  html body #wpforms-form-1502 .wpforms-submit {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Das vorige Scaling war falsch:
   Es hat bei ungültigem reCAPTCHA-Key sogar die Fehlermeldung mit skaliert.
   In der Referenz bleibt reCAPTCHA in Originalbreite und läuft rechts aus
   dem schmaleren Formularbereich heraus. */
@media (max-width: 390px) {
  html body #wpforms-form-1502 .g-recaptcha,
  html body #wpforms-form-1502 .wpforms-recaptcha-container > div {
    transform: none !important;
    transform-origin: initial !important;
  }

  html body #wpforms-form-1502 .wpforms-recaptcha-container {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* Moved from the Site Editor's "Additional CSS" */
/* =========================================================
   WPForms 1502 – Kontaktformular
   4 + g1 + 4 Spalten
   Nachricht: 8 Spalten
   ========================================================= */

#wpforms-1502 {
  /* Typografie „Copy“ */
  --form-copy-size: var(--wp--preset--font-size--copy, 18px);
  --form-copy-line-height: 1.45;

  width: var(--c8, 100%);
  max-width: 100%;
  margin: 0;
}

/* Copy-Typografie für das Formular */
#wpforms-form-1502 {
  font-family: "Inter", sans-serif;
  font-size: var(--form-copy-size);
  font-weight: 400;
  line-height: var(--form-copy-line-height);
}

/* ---------------------------------------------------------
   MCG-Raster: c4 + g1 + c4
   --------------------------------------------------------- */

#wpforms-form-1502 .wpforms-field-container {
  display: grid !important;

  grid-template-columns:
    var(
      --c4,
      calc((100% - var(--g1, 20px)) / 2)
    )
    var(
      --c4,
      calc((100% - var(--g1, 20px)) / 2)
    );

  column-gap: var(--g1, 20px) !important;
  row-gap: var(--g1, 20px) !important;

  width: var(--c8, 100%);
  max-width: 100%;
}

/* Alte WPForms-Float-Spalten komplett zurücksetzen */
#wpforms-form-1502 .wpforms-field {
  float: none !important;
  clear: none !important;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box;
}

/* Name, E-Mail, Website und Telefonnummer: jeweils c4 */
#wpforms-1502-field_1-container,
#wpforms-1502-field_2-container,
#wpforms-1502-field_3-container,
#wpforms-1502-field_5-container {
  grid-column: auto;
  width: 100% !important;
}

/* Nachrichtenfeld: c8 */
#wpforms-1502-field_6-container {
  grid-column: 1 / -1;
  width: 100% !important;
}

/* ---------------------------------------------------------
   Eingabefelder
   --------------------------------------------------------- */

#wpforms-1502-field_1,
#wpforms-1502-field_2,
#wpforms-1502-field_3,
#wpforms-1502-field_5,
#wpforms-1502-field_6 {
  display: block;

  width: 100% !important;
  max-width: none !important;

  box-sizing: border-box !important;

  /* Copy-Typografie */
  font-family: "Inter", sans-serif !important;
  font-size: var(--form-copy-size) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: var(--form-copy-line-height) !important;

  color: #444444 !important;

  /* Keine Umrandung */
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;

  /* Keine abgerundeten Ecken */
  border-radius: 0 !important;

  /* Keine WPForms-Schatten */
  box-shadow: none !important;

  /* Browser-Standarddarstellung zurücksetzen */
  appearance: none;
  -webkit-appearance: none;
}

/* Auch bei Fokus keine WPForms-Umrandung */
#wpforms-1502-field_1:focus,
#wpforms-1502-field_2:focus,
#wpforms-1502-field_3:focus,
#wpforms-1502-field_5:focus,
#wpforms-1502-field_6:focus {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Placeholder ebenfalls in Copy und #444444 */
#wpforms-form-1502 input::placeholder,
#wpforms-form-1502 textarea::placeholder {
  font-family: "Inter", sans-serif !important;
  font-size: var(--form-copy-size) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: var(--form-copy-line-height) !important;

  color: #444444 !important;
  opacity: 1 !important;
}

/* Höhe des Nachrichtenfeldes */
#wpforms-1502-field_6 {
  min-height: 126px;
  resize: vertical;
}

/* Labels visuell ausblenden – Platzhalter bleiben sichtbar */
#wpforms-form-1502 .wpforms-field-label {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------------------------------------------------------
   Mobil: alle Felder untereinander
   --------------------------------------------------------- */

@media (max-width: 768px) {
  #wpforms-1502 {
    width: 100%;
  }

  #wpforms-form-1502 .wpforms-field-container {
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  #wpforms-1502-field_1-container,
  #wpforms-1502-field_2-container,
  #wpforms-1502-field_3-container,
  #wpforms-1502-field_5-container,
  #wpforms-1502-field_6-container {
    grid-column: 1 !important;
    width: 100% !important;
  }
}

/* WPForms 1502 – Senden-Button */
#wpforms-form-1502 .wpforms-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 26px !important;

  min-height: 64px !important;
  margin: 15px 0 0 !important;
  padding: 0 38px !important;

  background-color: #0F172A !important;
  color: #FFD380 !important;

  border: 2px solid #0F172A !important;
  border-radius: 999px !important;
  box-shadow: none !important;

  font: inherit !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  cursor: pointer;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

/* Dünner, großer Pfeil */
#wpforms-form-1502 .wpforms-submit::after {
  content: "" !important;
  display: block !important;
  flex: 0 0 54px !important;

  width: 54px !important;
  height: 34px !important;

  background-color: currentColor !important;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 36'%3E%3Cpath d='M2 18H49M37 6L49 18L37 30' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 36'%3E%3Cpath d='M2 18H49M37 6L49 18L37 30' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;

  transition: transform 0.25s ease;
}

/* Hover und Tastaturfokus */
#wpforms-form-1502 .wpforms-submit:hover,
#wpforms-form-1502 .wpforms-submit:focus,
#wpforms-form-1502 .wpforms-submit:active {
  background: #FFD380 !important;
  background-color: #FFD380 !important;
  background-image: none !important;

  color: #0F172A !important;
  border-color: #0F172A !important;

  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Mögliche WPForms-Überlagerung abschalten */
#wpforms-form-1502 .wpforms-submit::before {
  content: none !important;
  display: none !important;
}

/* Pfeil beim Hover */
#wpforms-form-1502 .wpforms-submit:hover::after,
#wpforms-form-1502 .wpforms-submit:focus::after,
#wpforms-form-1502 .wpforms-submit:active::after {
  background-color: #0F172A !important;
  transform: translateX(5px);
}

/* Pfeil beim Hover leicht nach rechts */
#wpforms-form-1502 .wpforms-submit:hover::after,
#wpforms-form-1502 .wpforms-submit:focus::after {
  transform: translateX(5px);
}