/* ═══════════════════════════════════════════
   Ebook-landingspagina /slimme-meid
   Gebouwd op nieuwe-stijl.css (kleuren, knoppen, secties). Eerst mobiel.
═══════════════════════════════════════════ */
.sm-kop { background: var(--lav-bg); padding: 18px 20px 0; display: flex; justify-content: center; }
.sm-kop img { height: 64px; width: auto; }

.sm-hero { background: var(--lav-bg); padding: 28px 20px 40px; text-align: center; }
.sm-hero-binnen { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sm-hero h1.nk-h1 { font-size: clamp(33px, 8.6vw, 62px); line-height: 1.08; }
.sm-hero-onder { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(21px, 5.4vw, 30px); line-height: 1.25; color: var(--diepzee); }

.sm-form { background: var(--lav-bg); padding: 0 20px clamp(48px, 8vw, 96px); }
.sm-kaart { max-width: 980px; margin: 0 auto; background: var(--wit); border-radius: 36px; padding: 28px 22px 32px; display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
.sm-omslag { margin: 0 auto; width: 100%; max-width: 168px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.sm-omslag img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 18px 44px rgba(30, 22, 40, 0.22); }
.sm-formtekst { display: flex; flex-direction: column; gap: 14px; text-align: center; }
.sm-formtekst h2 { font-size: clamp(27px, 6.6vw, 40px); line-height: 1.12; }
.sm-formtekst p { font-size: 17px; }
.sm-klein { font-size: 14px !important; color: var(--zacht); line-height: 1.55; }
.sm-klein a { color: var(--zacht); text-decoration: underline; text-underline-offset: 3px; }

/* Laposta-widget laten aansluiten bij de site (inhoud en velden staan in Laposta) */
#laposta-ebook-form { width: 100%; max-width: 420px; min-height: 287px; margin: 4px auto 0; text-align: left; }
#laposta-ebook-form .eprov-widget { display: block !important; width: 100% !important; max-width: 420px !important; margin: 0 auto !important; background: transparent !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
#laposta-ebook-form .eprov-widget .eprov-wrap,
#laposta-ebook-form .eprov-widget .wrap { display: block !important; width: 100% !important; max-width: 100% !important; background: transparent !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
#laposta-ebook-form .eprov-widget .text,
#laposta-ebook-form .eprov-widget .image,
#laposta-ebook-form .eprov-widget .title,
#laposta-ebook-form .eprov-widget .bread { display: none !important; }
#laposta-ebook-form .eprov-widget,
#laposta-ebook-form .eprov-widget * { font-family: 'DM Sans', sans-serif !important; box-sizing: border-box; }
#laposta-ebook-form .eprov-widget .form { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }
#laposta-ebook-form .eprov-widget .fields { display: flex !important; flex-direction: column; gap: 14px; }
#laposta-ebook-form .eprov-widget #field-bUwTtADqnu { order: -2; }
#laposta-ebook-form .eprov-widget #field-FxV2UMg2Ck { order: -1; }
#laposta-ebook-form .eprov-widget #field-mxDnDmq2VN { display: none !important; }
#laposta-ebook-form .eprov-widget .field-text label { display: block; font-size: 15px !important; color: var(--zacht) !important; margin: 0 0 6px 4px !important; font-weight: 400 !important; }
#laposta-ebook-form .eprov-widget .input-element input[type="text"],
#laposta-ebook-form .eprov-widget .input-element input[type="email"] {
  width: 100% !important; min-height: 54px; height: 54px; padding: 14px 22px !important; border: 1.5px solid var(--nk-lijn) !important; border-radius: 999px !important;
  font-size: 16px !important; color: var(--tekst) !important; background: var(--lav-bg) !important; outline: none; box-shadow: none !important;
}
#laposta-ebook-form .eprov-widget .input-element input:focus { border-color: var(--diepzee) !important; background: #fff !important; }
#laposta-ebook-form .eprov-widget .button { order: 5; margin-top: 6px !important; text-align: center; }
#laposta-ebook-form .eprov-widget .button button {
  width: 100% !important; min-height: 56px; border: 0 !important; cursor: pointer; border-radius: 999px !important; padding: 16px 30px !important;
  font-size: 17px !important; font-weight: 500 !important; background: var(--aarde) !important; color: var(--wit) !important; transition: background 0.25s;
}
#laposta-ebook-form .eprov-widget .button button:hover { background: var(--diepzee) !important; }
#laposta-ebook-form .eprov-widget .thanks { font-family: 'Cormorant Garamond', serif !important; font-style: italic; font-size: 24px !important; line-height: 1.3; color: var(--tekst) !important; text-align: center; padding: 10px 0; }

.sm-sectie { padding: clamp(56px, 9vw, 112px) 20px; }
.sm-smal { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; font-size: 19px; line-height: 1.8; }
.sm-smal h2 { font-size: clamp(32px, 7vw, 50px); line-height: 1.1; }

.sm-einde { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; counter-reset: sm; }
.sm-einde li { counter-increment: sm; position: relative; padding: 4px 0 4px 54px; font-size: 19px; line-height: 1.6; }
.sm-einde li::before { content: counter(sm); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--lav-bg); color: var(--diepzee); font-family: 'Cormorant Garamond', serif; font-size: 26px; line-height: 38px; text-align: center; }

.sm-verhaal { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 34px; }
.sm-verhaal-foto { width: 100%; max-width: 420px; margin: 0 auto; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 38% 50%; border-radius: 210px 210px 32px 32px; }
.sm-verhaal-tekst { display: flex; flex-direction: column; gap: 20px; font-size: 18px; line-height: 1.8; max-width: 640px; margin: 0 auto; }
.sm-verhaal-tekst h2 { font-size: clamp(36px, 8vw, 58px); line-height: 1.08; }
.sm-verhaal-tekst h3 { font-size: clamp(27px, 5.6vw, 36px); line-height: 1.15; margin-top: 18px; }
.sm-citaat { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(28px, 6vw, 40px); line-height: 1.15; color: var(--aarde); margin-top: 6px; }

.sm-sluit { background: var(--diepzee); color: var(--wit); text-align: center; padding: clamp(56px, 9vw, 104px) 20px; }
.sm-sluit-binnen { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.sm-sluit p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(30px, 7vw, 50px); line-height: 1.12; color: var(--wit); }
.sm-sluit .nk-knop { background: var(--wit); color: var(--diepzee); }
.sm-sluit .nk-knop:hover { background: var(--aarde-bg); color: var(--tekst); }

.sm-gesprek { background: var(--aarde-bg); text-align: center; padding: clamp(44px, 7vw, 80px) 20px; }
.sm-gesprek-binnen { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; font-size: 18px; }

.sm-voet { background: var(--diepzee); color: var(--nk-licht); text-align: center; padding: 26px 20px; font-size: 14px; }
.sm-voet a { color: var(--nk-licht); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 820px) {
  .sm-hero { padding: 44px 40px 52px; }
  .sm-kop img { height: 78px; }
  .sm-kaart { grid-template-columns: 0.62fr 1fr; gap: clamp(32px, 5vw, 64px); padding: 48px 48px 52px; border-radius: 48px; }
  .sm-omslag { max-width: 280px; }
    .sm-formtekst { text-align: left; }
  .sm-verhaal { grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
  .sm-verhaal-foto { position: sticky; top: 40px; max-width: 440px; }
  .sm-verhaal-tekst { margin: 0; }
}

.sm-smal p, .sm-verhaal-tekst p { font-size: 18px; line-height: 1.8; margin: 0; color: inherit; }
.sm-smal p { font-size: 19px; }
.sm-formtekst p { font-size: 17px; line-height: 1.65; }
.sm-formtekst .sm-klein { font-size: 14px; }
.sm-hero-onder, .sm-sluit p { margin: 0; }
.sm-gesprek p { font-size: 18px; margin: 0; }
.sm-citaat { font-size: clamp(28px, 6vw, 40px) !important; line-height: 1.15 !important; }
@media (min-width: 820px) {
  #laposta-ebook-form { margin-left: 0; margin-right: 0; }
  #laposta-ebook-form .eprov-widget { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Alleen mobiel (tot 600 px): formulier sneller in beeld. Omslag onder het formulier, kleiner logo, compactere kop en alinea. */
@media (max-width: 600px) {
  .sm-kop { padding: 10px 20px 0; }
  .sm-kop img { height: 44px; }
  .sm-hero { padding: 10px 20px 16px; }
  .sm-hero-binnen { gap: 8px; }
  .sm-hero h1.nk-h1 { font-size: 26px; line-height: 1.12; }
  .sm-hero-onder { font-size: 19px; line-height: 1.2; }
  .sm-form { padding: 0 14px 36px; }
  .sm-kaart { padding: 18px 18px 22px; gap: 12px; border-radius: 28px; }
  .sm-formtekst { gap: 8px; }
  .sm-formtekst h2 { font-size: 22px; line-height: 1.15; }
  .sm-formtekst p { font-size: 15px; line-height: 1.5; }
  .sm-formtekst .sm-klein { font-size: 13px; }
  #laposta-ebook-form { margin-top: 2px; min-height: 245px; }
  #laposta-ebook-form .eprov-widget .fields { gap: 8px; }
  #laposta-ebook-form .eprov-widget .field-text label { font-size: 14px !important; margin: 0 0 3px 4px !important; }
  #laposta-ebook-form .eprov-widget .input-element input[type="text"],
  #laposta-ebook-form .eprov-widget .input-element input[type="email"] { min-height: 48px; height: 48px; padding: 10px 20px !important; }
  #laposta-ebook-form .eprov-widget .button { margin-top: 2px !important; }
  #laposta-ebook-form .eprov-widget .button button { min-height: 50px; padding: 12px 24px !important; font-size: 16px !important; }
  .sm-omslag { order: 2; max-width: 150px; margin: 10px auto 0; }
}

.sm-hero-klein { margin: 0; font-size: 15px; letter-spacing: 0.04em; color: var(--zacht); }
@media (max-width: 600px) { .sm-hero-klein { font-size: 13.5px; line-height: 1.3; } }
.sm-hero .nk-oog { color: #6F5836; }