/* ============================================================================
  ND26 / EQS Newsletter Form Module CSS (Header aligned)
  Ziel: exakt "Logo -> Contact us" Breite – unabhängig vom HubSpot Parent
  + Inset Padding im Frame (damit Form nicht am Rand klebt)
============================================================================ */

/* =========================
   0) BREAKOUT (wichtig!)
========================= */
.nd-eqs-form-module{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  overflow-x: clip;
}
@supports not (overflow: clip){
  .nd-eqs-form-module{ overflow-x: hidden; }
}

/* =========================
   1) TOKENS / SETTINGS
========================= */
.nd-eqs-form-module{
  /* ✅ Desktop Breite (Logo -> Contact us) */
  --nd-eqs-container-max: 1870px;

  /* ✅ horizontales Padding */
  --nd-eqs-pad-sm: 20px;
  --nd-eqs-pad-md: 55px;
  --nd-eqs-pad-lg: 125px;

  /* ✅ Inset im Frame */
  --nd-eqs-frame-inset: clamp(16px, 2vw, 25px);

  /* Vertical rhythm */
  --nd-eqs-py-sm: 32px;
  --nd-eqs-py-md: 48px;

  /* Frame */
  --nd-eqs-radius: 16px;
  --nd-eqs-surface: var(--color-surface-muted, #f3f4f6);
}

/* =========================
   2) SECTION SPACING
========================= */
.nd-eqs-form-module .nd-eqs-section{
  padding-top: var(--nd-eqs-py-sm);
  padding-bottom: var(--nd-eqs-py-sm);
}
@media (min-width: 768px){
  .nd-eqs-form-module .nd-eqs-section{
    padding-top: var(--nd-eqs-py-md);
    padding-bottom: var(--nd-eqs-py-md);
  }
}

/* =========================
   3) HEADER-ALIGNED CONTAINER
========================= */
.nd-eqs-form-module .nd-eqs-container{
  width: 100%;
  max-width: var(--nd-eqs-container-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;

  padding-left: var(--nd-eqs-pad-sm);
  padding-right: var(--nd-eqs-pad-sm);
}
@media (min-width: 768px){
  .nd-eqs-form-module .nd-eqs-container{
    padding-left: var(--nd-eqs-pad-md);
    padding-right: var(--nd-eqs-pad-md);
  }
}
@media (min-width: 1024px){
  .nd-eqs-form-module .nd-eqs-container{
    padding-left: var(--nd-eqs-pad-lg);
    padding-right: var(--nd-eqs-pad-lg);
  }
}

/* =========================
   4) HEADER
========================= */
.nd-eqs-form-module .nd-eqs-header{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.nd-eqs-form-module .nd-eqs-header h2{
  margin: 0;
}

/* =========================
   5) FRAME + INSET
========================= */
.nd-eqs-form-module .nd-eqs-frame{
  width: 100%;
  border-radius: var(--nd-eqs-radius);
  overflow: hidden;
  background: var(--nd-eqs-surface);

  padding: var(--nd-eqs-frame-inset);
  box-sizing: border-box;

  margin-top: 16px;

  box-shadow:
    0 10px 15px -3px rgba(0,0,0,0.08),
    0 4px 6px -4px rgba(0,0,0,0.04);
}

/* Defensive: falls EQS ein iFrame nutzt */
.nd-eqs-form-module .nd-eqs-frame iframe{
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  border: 0;
}

.nd-eqs-form-module #eqs-cms-irtools-contactform{
  width: 100%;
}

.nd-eqs-form-module .nd-eqs-fallback{
  margin-top: 12px;
}