/* Ledgnd Lead Magnets: teeltrapport-kader en pop-up. Eén bestand voor de hele site.
   Kleuren, hoeken en lettertypen staan in variabelen; de plugin vult ze uit Teeltrapporten, Design. De waarden hieronder zijn
   de standaard: donkergroen #12331c, lime #b2d129, wit. Koppen Lexend Deca, tekst Inter. Eén ronde hoek per vlak. */

.lgb-lm {
  --lgb-donker: #12331c; --lgb-donker-rgb: 18, 51, 28;
  --lgb-accent: #b2d129; --lgb-accent-rgb: 178, 209, 41;
  --lgb-kadertekst: #ffffff; --lgb-kadertekst-rgb: 255, 255, 255;
  --lgb-pop: #ffffff;
  --lgb-hoek: 120px; --lgb-pophoek: 72px; --lgb-knoprond: 999px;
  --lgb-font-kop: "Lexend Deca", system-ui, sans-serif; --lgb-font-tekst: "Inter", system-ui, sans-serif;
}

.lgb-leadmagnet-blok { padding: 0; margin: 0; }
.lgb-lm[hidden], .lgb-lm [hidden] { display: none !important; }
.lgb-lm, .lgb-lm * { box-sizing: border-box; }

/* kader: wazige gewasfoto onder een donkere laag; de cover steekt er bovenuit */
.lgb-lm { position: relative; margin: 132px 0 56px; border-radius: 0 0 var(--lgb-hoek) 0; background: var(--lgb-donker); font-family: var(--lgb-font-tekst); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (min-width: 1000px) { html body .lgb-lm { max-width: min(820px, calc(100% - 56px)) !important; } }
.lgb-lm__achter { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.lgb-lm__achter::before { content: ""; position: absolute; inset: -40px; background-image: inherit; background-size: cover; background-position: center 35%; filter: blur(16px) saturate(1.1); }
.lgb-lm__achter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(var(--lgb-donker-rgb), .95) 0%, rgba(var(--lgb-donker-rgb), .86) 50%, rgba(var(--lgb-donker-rgb), .6) 100%); }
.lgb-lm__inhoud { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 36px; align-items: start; padding: 36px 40px 40px 44px; }
.lgb-lm__cover { order: 2; margin: -120px 0 0; }
.lgb-lm__cover img { display: block; width: 100%; height: auto; max-width: none; transform: rotate(3deg); transform-origin: 50% 100%; transition: transform .25s, opacity .2s; box-shadow: 0 18px 36px rgba(0, 0, 0, .28); }
.lgb-lm:hover .lgb-lm__cover img { transform: rotate(1.5deg) translateY(-4px); }
.lgb-lm__cover.is-wissel img { opacity: 0; }
.lgb-lm__test { margin-bottom: 14px; font-size: 13px; line-height: 1.4; }

/* label als pill */
html body .lgb-lm .lgb-lm__label { display: inline-block; padding: 9px 16px; border-radius: var(--lgb-knoprond); background: var(--lgb-kadertekst); font-family: var(--lgb-font-kop); font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--lgb-donker); }
html body .lgb-lm .lgb-lm__label--donker { background: var(--lgb-donker) !important; color: var(--lgb-pop) !important; }

.lgb-lm__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
html body .lgb-lm .lgb-lm__tab { margin: 0 !important; padding: 9px 16px !important; border: 1.5px solid rgba(var(--lgb-kadertekst-rgb), .55) !important; border-radius: var(--lgb-knoprond) !important; background: transparent !important; cursor: pointer !important; box-shadow: none !important; font-family: var(--lgb-font-kop) !important; font-weight: 500 !important; font-size: 13px !important; line-height: 1 !important; color: var(--lgb-kadertekst) !important; transition: background .15s, border-color .15s !important; }
html body .lgb-lm .lgb-lm__tab:hover { border-color: var(--lgb-kadertekst) !important; }
html body .lgb-lm .lgb-lm__tab[aria-selected="true"] { background: var(--lgb-kadertekst) !important; border-color: var(--lgb-kadertekst) !important; color: var(--lgb-donker) !important; }
.lgb-lm__kop { font-family: var(--lgb-font-kop); font-weight: 500; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; margin: 18px 0 12px; }
.lgb-lm__sub { font-size: 16.5px; line-height: 1.55; max-width: 500px; }
.lgb-lm__actie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.lgb-lm__ander { font-size: 13.5px; line-height: 1.45; max-width: 230px; }

/* knoppen */
html body .lgb-lm .lgb-lm__knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 15px 24px; border: 0; border-radius: var(--lgb-knoprond); cursor: pointer; box-shadow: none; white-space: nowrap; text-decoration: none;
  font-family: var(--lgb-font-kop); font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: 0; text-transform: none; transition: transform .15s; }
html body .lgb-lm .lgb-lm__knop:hover { transform: translateX(2px) !important; }
html body .lgb-lm .lgb-lm__knop[disabled] { opacity: .6 !important; cursor: default !important; transform: none !important; }
.lgb-lm .lgb-lm__knop svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .lgb-lm .lgb-lm__knop--lime, html body .lgb-lm .lgb-lm__knop--lime span { background-color: var(--lgb-accent) !important; color: var(--lgb-donker) !important; }
html body .lgb-lm .lgb-lm__knop--lime span { background: none !important; }
html body .lgb-lm .lgb-lm__knop--dg, html body .lgb-lm .lgb-lm__knop--dg span { background-color: var(--lgb-donker) !important; color: var(--lgb-pop) !important; }
html body .lgb-lm .lgb-lm__knop--dg span { background: none !important; }

/* pop-up */
.lgb-lm__pop { width: min(520px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); margin: auto; padding: 34px 36px 34px; border: 0; border-radius: 0 0 var(--lgb-pophoek) 0; background: var(--lgb-pop); overflow: auto; color: var(--lgb-donker); font-family: var(--lgb-font-tekst); }
.lgb-lm__pop:not([open]) { display: none; }
.lgb-lm__pop.is-los { position: fixed; inset: 0; z-index: 100000; }
.lgb-lm__pop::backdrop { background: rgba(18, 51, 28, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.lgb-lm__scherm { position: fixed; inset: 0; z-index: 99999; background: rgba(18, 51, 28, .62); }
html body .lgb-lm .lgb-lm__sluit { position: absolute !important; top: 14px !important; right: 14px !important; display: grid !important; place-items: center !important; width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(var(--lgb-donker-rgb), .07) !important; cursor: pointer !important; box-shadow: none !important; }
.lgb-lm .lgb-lm__sluit svg { width: 18px; height: 18px; stroke: var(--lgb-donker); fill: none; stroke-width: 2; stroke-linecap: round; }
html body .lgb-lm .lgb-lm__sluit:hover { background: rgba(var(--lgb-donker-rgb), .14) !important; }
.lgb-lm__popkop { font-family: var(--lgb-font-kop); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; margin: 16px 40px 4px 0; }
html body .lgb-lm .lgb-lm__gewas, html body .lgb-lm .lgb-lm__taal { margin: 18px 0 0 !important; padding: 0 !important; border: 0 !important; min-width: 0 !important; }
.lgb-lm__veld { display: block; margin: 16px 0 0; }
html body .lgb-lm .lgb-lm__veld > span, html body .lgb-lm .lgb-lm__gewas legend, html body .lgb-lm .lgb-lm__taal legend { display: block !important; float: none !important; width: auto !important; margin: 0 0 7px !important; padding: 0 !important; font-family: var(--lgb-font-kop) !important; font-weight: 500 !important; font-size: 14px !important; line-height: 1.3 !important; color: var(--lgb-donker) !important; }
html body .lgb-lm input[type="text"], html body .lgb-lm input[type="email"] { display: block !important; width: 100% !important; height: 50px !important; margin: 0 !important; padding: 0 16px !important; border: 1.5px solid rgba(var(--lgb-donker-rgb), .25) !important; border-radius: 0 !important; background: var(--lgb-pop) !important; box-shadow: none !important; font-family: var(--lgb-font-tekst) !important; font-size: 16px !important; line-height: 1 !important; color: var(--lgb-donker) !important; }
html body .lgb-lm input[type="text"]:focus, html body .lgb-lm input[type="email"]:focus { outline: 0 !important; border-color: var(--lgb-donker) !important; }
html body .lgb-lm input.is-fout { border-color: var(--lgb-donker) !important; box-shadow: inset 0 0 0 1px var(--lgb-donker) !important; }
.lgb-lm__keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.lgb-lm__keuzes label { position: relative; margin: 0; cursor: pointer; }
.lgb-lm__keuzes input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
html body .lgb-lm .lgb-lm__keuzes label span, html body .lgb-lm .lgb-lm__keuzes--rol button { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 10px 15px !important; border: 1.5px solid var(--lgb-donker) !important; border-radius: var(--lgb-knoprond) !important; background: transparent !important; box-shadow: none !important; font-family: var(--lgb-font-kop) !important; font-weight: 500 !important; font-size: 14px !important; line-height: 1 !important; color: var(--lgb-donker) !important; cursor: pointer !important; transition: background .15s !important; }
html body .lgb-lm .lgb-lm__keuzes label:hover span, html body .lgb-lm .lgb-lm__keuzes--rol button:hover { background: rgba(var(--lgb-accent-rgb), .3) !important; }
html body .lgb-lm .lgb-lm__keuzes input:checked + span, html body .lgb-lm .lgb-lm__keuzes--rol button.is-gekozen { background: var(--lgb-donker) !important; color: var(--lgb-pop) !important; }
.lgb-lm__keuzes input:focus-visible + span { outline: 2px solid var(--lgb-donker); outline-offset: 3px; }
.lgb-lm__wachtlijst { margin-top: 12px; padding: 12px 16px; background: rgba(var(--lgb-accent-rgb), .28); font-size: 14px; line-height: 1.5; }
.lgb-lm__vink { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin: 18px 0 0; cursor: pointer; font-size: 14px; line-height: 1.5; }
html body .lgb-lm .lgb-lm__vink input { width: 20px !important; height: 20px !important; margin: 1px 0 0 !important; accent-color: var(--lgb-donker) !important; }
.lgb-lm__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lgb-lm__turnstile:not(:empty) { margin-top: 16px; }
html body .lgb-lm .lgb-lm__verstuur { width: 100% !important; margin-top: 22px !important; }
.lgb-lm__fout { margin-top: 12px; padding: 10px 14px; background: var(--lgb-donker); font-size: 14px; line-height: 1.45; }
.lgb-lm__klaar { outline: 0; padding-top: 6px; }
.lgb-lm__klaartekst { margin-top: 8px; font-size: 16px; line-height: 1.55; }
.lgb-lm__rol { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(var(--lgb-donker-rgb), .14); }
.lgb-lm__rolvraag { margin-bottom: 12px; font-family: var(--lgb-font-kop); font-weight: 500; font-size: 15px; line-height: 1.4; }
.lgb-lm__roldank { margin-top: 12px; font-size: 14px; }
.lgb-lm__vink + .lgb-lm__vink { margin-top: 12px; }
.lgb-lm__vink--extra { padding: 14px 16px; background: rgba(var(--lgb-accent-rgb), .28); }
.lgb-lm__extrakop { display: block; margin-bottom: 2px; font-family: var(--lgb-font-kop); font-weight: 600; font-size: 15px; }
.lgb-lm__vink.is-fout span { text-decoration: underline wavy var(--lgb-accent); text-underline-offset: 4px; }
.lgb-lm__meer { margin-top: 20px; padding: 16px 18px; background: rgba(var(--lgb-accent-rgb), .28); }
.lgb-lm__meerkop { font-family: var(--lgb-font-kop); font-weight: 600; font-size: 16px; line-height: 1.35; }
.lgb-lm__meertekst { margin-top: 4px; font-size: 14px; line-height: 1.5; }
html body .lgb-lm .lgb-lm__meerknop { width: 100% !important; margin-top: 14px !important; }
.lgb-lm__meerdank { margin-top: 10px; font-size: 14px; font-weight: 500; }

/* kleuren vastzetten tegen het thema: kadertekst op het kader, donker in de pop-up */
html body .lgb-lm .lgb-lm__kop, html body .lgb-lm .lgb-lm__test { color: var(--lgb-kadertekst); }
html body .lgb-lm .lgb-lm__sub, html body .lgb-lm .lgb-lm__ander { color: rgba(var(--lgb-kadertekst-rgb), .86) !important; }
html body .lgb-lm .lgb-lm__pop, html body .lgb-lm .lgb-lm__popkop, html body .lgb-lm .lgb-lm__vink span, html body .lgb-lm .lgb-lm__wachtlijst,
html body .lgb-lm .lgb-lm__klaartekst, html body .lgb-lm .lgb-lm__rolvraag, html body .lgb-lm .lgb-lm__roldank,
html body .lgb-lm .lgb-lm__meerkop, html body .lgb-lm .lgb-lm__meertekst, html body .lgb-lm .lgb-lm__meerdank { color: var(--lgb-donker) !important; }
html body .lgb-lm .lgb-lm__fout { color: var(--lgb-pop) !important; }
html body .lgb-lm .lgb-lm__vink a { color: var(--lgb-donker) !important; font-weight: 500 !important; text-decoration: underline !important; text-decoration-color: var(--lgb-accent) !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; }

@media (max-width: 690px) {
  .lgb-lm { margin-top: 96px; border-radius: 0 0 calc(var(--lgb-hoek) * .54) 0; }
  .lgb-lm__inhoud { display: flow-root; padding: 26px 22px 32px; }
  .lgb-lm__cover { float: right; width: 124px; margin: -84px -6px 10px 16px; }
  .lgb-lm__kop { font-size: 25px; }
  .lgb-lm__sub { font-size: 15.5px; clear: right; }
  html body .lgb-lm .lgb-lm__open { width: 100% !important; white-space: normal !important; }
  .lgb-lm__ander { max-width: none; }
  .lgb-lm__pop { padding: 26px 22px 24px; border-radius: 0 0 calc(var(--lgb-pophoek) * .6) 0; }
  .lgb-lm__popkop { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .lgb-lm__cover img, .lgb-lm .lgb-lm__knop { transition: none; }
}