/* ==========================================================
   NEWSLETTER (WPForms 1623)
   The form on its own (as on the component page) is a row of light-yellow pills; in the
   "SEO Tipps in Ihrer Inbox" box (composite class seo-tips-inbox on the outer yellow group, which
   sets its colours and phone padding in its definition) it is drawn as below. The form's own
   submit button is hidden: the arrow (.submit-arrow) sends it (script.js). An !important is only
   where WPForms' own styles or another rule win otherwise (checked rule by rule, 2026-10-16).
   ========================================================== */

#wpforms-form-1623 {
  font-family: 'Inter', sans-serif;
}

#wpforms-form-1623 button[type="submit"] {
  display: none;
}

#wpforms-form-1623 input[type="text"], #wpforms-form-1623 input[type="email"] {
  background-color: var(--mcg-color-surface-accent);
  border-radius: 50px;
  border: 2px solid var(--mcg-color-primary);
}

#wpforms-form-1623 .wpforms-field-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

#wpforms-1623-field_2-container, #wpforms-1623-field_3-container {
  width: 48%;
}

/* ----------------------------------------------------------
   In the box
   ---------------------------------------------------------- */
/* Überschrift */
.seo-tips-inbox > .wp-block-group > .wp-block-heading {
  margin: 0 0 44px;
  color: var(--seo-tips-ink);
}

/* Zeile: Formular links, Submit-Pfeil rechts */
.seo-tips-inbox > .wp-block-group > .wp-block-group.mcg-display-flex {
  align-items: center;
  gap: var(--g1, 24px);
}

/* Formularspalte */
.seo-tips-inbox #wpforms-1623 {
  width: 100%;
  max-width: none;
  margin: 0;
}

.seo-tips-inbox #wpforms-form-1623 {
  width: 100%;
  margin: 0;
}

/* Name + E-Mail nebeneinander, Checkbox darunter */
.seo-tips-inbox #wpforms-form-1623 .wpforms-field-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--g1, 24px);
  row-gap: 0;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}

/* Name */
.seo-tips-inbox #wpforms-1623-field_2-container {
  grid-column: 1;
}

/* E-Mail */
.seo-tips-inbox #wpforms-1623-field_3-container {
  grid-column: 2;
}

/* WPForms-Feldabstände zurücksetzen */
.seo-tips-inbox #wpforms-form-1623 .wpforms-field {
  width: 100% !important;
  max-width: none;

  margin: 0;
  padding: 0 !important;
}

/* Checkbox über beide Spalten, mit Abstand unter Name/E-Mail (nach dem Reset oben) */
.seo-tips-inbox #wpforms-form-1623 #wpforms-1623-field_4-container {
  grid-column: 1 / -1 !important;
  margin-top: 38px !important;
}

/* Name + E-Mail */
.seo-tips-inbox #wpforms-1623-field_2,
.seo-tips-inbox #wpforms-1623-field_3 {
  display: block;

  width: 100%;
  max-width: none;
  height: 58px;
  min-height: 58px;

  margin: 0;
  padding: 0 26px;

  box-sizing: border-box;

  background: transparent !important;
  background-color: transparent !important;

  color: var(--seo-tips-ink);

  border: 3px solid var(--seo-tips-ink) !important;
  border-radius: 999px !important;
  box-shadow: none;
  outline: none;

  font-family: "Inter", sans-serif;
  font-size: var(--wp--preset--font-size--copy, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 1;

  appearance: none;
  -webkit-appearance: none;

  transition:
    border-color 180ms ease,
    background-color 180ms ease;
}

.seo-tips-inbox #wpforms-1623-field_2::placeholder,
.seo-tips-inbox #wpforms-1623-field_3::placeholder {
  color: var(--seo-tips-muted) !important;
  opacity: 1 !important;
}

.seo-tips-inbox #wpforms-1623-field_2:focus,
.seo-tips-inbox #wpforms-1623-field_3:focus {
  border-color: var(--seo-tips-ink) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Versteckte Labels wirklich aus dem Layout nehmen */
.seo-tips-inbox #wpforms-form-1623 .wpforms-label-hide {
  position: absolute;

  width: 1px;
  height: 1px;

  margin: -1px;
  padding: 0;

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

  white-space: nowrap;
}

/* Checkbox */
.seo-tips-inbox #wpforms-1623-field_4-container fieldset,
.seo-tips-inbox #wpforms-1623-field_4-container ul,
.seo-tips-inbox #wpforms-1623-field_4-container li {
  margin: 0;
  padding: 0;
  border: 0;
}

.seo-tips-inbox #wpforms-1623-field_4-container ul {
  list-style: none;
}

.seo-tips-inbox #wpforms-1623-field_4-container li {
  display: block;
  position: relative;
}

/* Native/alte WPForms-Checkbox komplett ausblenden */
.seo-tips-inbox #wpforms-1623-field_4_1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

/* Nur noch EIN sichtbares Kästchen – am Label selbst */
.seo-tips-inbox #wpforms-1623-field_4-container .wpforms-field-label-inline {
  position: relative;
  display: block;

  margin: 0;
  padding-left: 48px;

  color: var(--seo-tips-ink);

  font-family: "Inter", sans-serif;
  font-size: var(--wp--preset--font-size--copy, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;

  cursor: pointer;
}

.seo-tips-inbox #wpforms-1623-field_4-container .wpforms-field-label-inline::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0.05em;

  width: 30px;
  height: 30px;
  box-sizing: border-box;

  background: transparent;
  border: 2px solid var(--seo-tips-ink);
  border-radius: 3px;
}

/* Checked-Zustand */
.seo-tips-inbox #wpforms-1623-field_4_1:checked
+ .wpforms-field-label-inline::before {
  background-color: var(--seo-tips-ink) !important;
}

.seo-tips-inbox #wpforms-1623-field_4_1:checked
+ .wpforms-field-label-inline::after {
  content: "" !important;

  position: absolute !important;
  left: 10px !important;
  top: 6px !important;

  width: 8px !important;
  height: 14px !important;

  border-right: 3px solid var(--seo-tips-yellow) !important;
  border-bottom: 3px solid var(--seo-tips-yellow) !important;

  transform: rotate(45deg) !important;
}

/* Der echte WPForms-Submit bleibt unsichtbar:
   der bestehende .submit-arrow löst ihn bereits per JS aus. */
.seo-tips-inbox #wpforms-form-1623 .wpforms-submit-container {
  position: absolute;

  width: 1px;
  height: 1px;

  margin: 0;
  padding: 0;

  overflow: hidden;
  clip-path: inset(50%);
}

/* Submit-Pfeil */
.seo-tips-inbox .submit-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;

  width: 116px;
  height: auto;

  margin: 0;

  cursor: pointer;

  transition: transform 180ms ease;
}

.seo-tips-inbox .submit-arrow img {
  display: block;

  width: 116px;
  max-width: none;
  height: auto;

  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .seo-tips-inbox .submit-arrow:hover {
    transform: translateX(6px) !important;
  }
}


/* ==========================================================
   MOBILE
   MCG verwendet für kleine Layouts u. a.
   mcg-sm-flex-direction-column / mcg-sm-width-c12.
   Hier wird dasselbe Verhalten über die Komponentenklasse
   erzwungen, damit im Gutenberg-Block nur EINE Klasse nötig ist.
   ========================================================== */

@media (max-width: 768px) {

  .seo-tips-inbox > .wp-block-group {
    width: 100%;
    max-width: 100%;
  }

  .seo-tips-inbox > .wp-block-group > .wp-block-heading {
    margin-bottom: 28px !important;
  }

  /* Entspricht funktional mcg-sm-flex-direction-column */
  .seo-tips-inbox > .wp-block-group > .wp-block-group.mcg-display-flex {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch !important;
    justify-content: flex-start;

    width: 100%;

    gap: 24px !important;
  }

  /* Entspricht funktional mcg-sm-width-c12 */
  .seo-tips-inbox
  > .wp-block-group
  > .wp-block-group.mcg-display-flex
  > .wp-block-group {
    width: 100%;
    max-width: 100%;
  }

  .seo-tips-inbox #wpforms-form-1623 .wpforms-field-container {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 16px !important;
  }

  .seo-tips-inbox #wpforms-1623-field_2-container,
  .seo-tips-inbox #wpforms-1623-field_3-container,
  .seo-tips-inbox #wpforms-1623-field_4-container {
    grid-column: 1 !important;
  }

  .seo-tips-inbox #wpforms-1623-field_2,
  .seo-tips-inbox #wpforms-1623-field_3 {
    height: 52px !important;
    min-height: 52px !important;

    padding-inline: 20px !important;

    border-width: 2px !important;

    font-size: var(--wp--preset--font-size--copy, 18px) !important;
  }

  .seo-tips-inbox #wpforms-form-1623 #wpforms-1623-field_4-container {
    margin-top: 20px !important;
  }

  .seo-tips-inbox #wpforms-1623-field_4-container .wpforms-field-label-inline {
    padding-left: 42px !important;
    font-size: var(--wp--preset--font-size--copy, 18px) !important;
  }

  .seo-tips-inbox #wpforms-1623-field_4-container .wpforms-field-label-inline::before {
    width: 26px !important;
    height: 26px !important;
  }

  .seo-tips-inbox #wpforms-1623-field_4_1:checked
  + .wpforms-field-label-inline::after {
    left: 9px !important;
    top: 5px !important;
    width: 7px !important;
    height: 12px !important;
  }

  .seo-tips-inbox .submit-arrow {
    align-self: flex-end;

    width: 82px !important;

    margin-top: 2px !important;
  }

  .seo-tips-inbox .submit-arrow img {
    width: 82px !important;
  }
}