/* ============================================================
   landing.css  -  opmaak voor de plaatslandingspagina's
   ------------------------------------------------------------
   Indeling naar het voorbeeld van de conceptpagina's, maar
   volledig opgebouwd uit de eigen huisstijltokens uit tokens.css:
   Zelfde letters en kopgroottes als de rest van de site: Manrope
   voor de koppen, Montserrat voor de lopende tekst. Alleen de
   indeling, witruimte en banen zijn nieuw.

   Alleen ingeladen op de plaatspagina's, zodat de rest van de
   site ongemoeid blijft. Bevalt het, dan kan dit later naar
   components.css verhuizen.
   ============================================================ */

:root{
  --lp-max:1180px;
  --lp-band-y:clamp(56px,7vw,104px);
  --lp-wit:#FFFFFF;
}

/* ---- banen ------------------------------------------------ */
.lp-band{padding:var(--lp-band-y) 0}
.lp-band--ivoor{background:var(--warm-ivoor)}
.lp-band--wit{background:var(--lp-wit)}
.lp-band--beige{background:var(--beige)}
.lp-band--donker{background:var(--eucalyptus-dark)}
.lp-band--donker h2,.lp-band--donker h3,.lp-band--donker p{color:var(--ivoor)}
.lp-band--donker .lp-eyebrow{color:var(--champagne)}
.lp-wrap{max-width:var(--lp-max);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.lp-wrap--smal{max-width:820px}

/* ---- typografie -------------------------------------------
   Letters en groottes zijn gelijk aan de rest van de site:
   base.css regel 22 (h1-h4 in Manrope), .hp-hero h1 (28px, op
   desktop tot 50px), .detail-body h2 (20px) en body (15px).
   Alleen de indeling en de witruimte wijken af.               */
.lp-eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.09em;
  font-size:11.5px;font-weight:700;color:var(--eucalyptus-dark);margin:0 0 var(--sp-3);
  display:flex;align-items:center;gap:8px}
.lp-eyebrow svg{width:14px;height:14px;flex:none;color:var(--goud)}
.lp-eyebrow--mid{justify-content:center}

/* H1: exact de trap van .hp-hero h1 uit components.css. */
.lp-h1{font-family:var(--font-display);font-weight:800;font-size:28px;line-height:1.15;
  color:var(--antraciet);margin:0;text-wrap:balance}
@media (min-width:768px){ .lp-h1{font-size:clamp(40px, 40px + 1vw, 50px)} }
@media (min-width:768px) and (max-height:920px){ .lp-h1{font-size:clamp(40px, 38px + 0.6vw, 48px)} }
/* Geen aparte regel vanaf 1760px: die liet de hoofdkop terugvallen van 50px naar
   44px, waardoor de kop op een zeer breed scherm kleiner werd dan op een gewoon
   desktopscherm. De clamp hierboven eindigt netjes op 50px. */

/* Onderkop: iets boven de lopende tekst, verder dezelfde letter. */
.lp-lead{font-family:var(--font-body);font-weight:500;font-size:17px;line-height:1.6;
  color:var(--eucalyptus-dark);margin:14px 0 0;max-width:52ch;text-wrap:balance}

/* H2 en H3: gelijk aan .detail-body h2 en .hp-block-title. */
.lp-h2{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.2vw,28px);line-height:1.3;
  color:var(--ink);margin:0;text-wrap:balance}
.lp-h3{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.4;
  color:var(--ink);margin:0 0 8px}
.lp-body{font-size:15px;line-height:1.7;color:var(--text-2);margin:16px 0 0;max-width:68ch}
.lp-body strong{color:var(--ink);font-weight:600}
.lp-kop{text-align:center;max-width:68ch;margin:0 auto var(--sp-7)}
.lp-kop .lp-body{margin-left:auto;margin-right:auto;text-align:center}

/* ---- knoppen ---------------------------------------------- */
.lp-acties{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--sp-6)}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);
  font-weight:600;font-size:14px;letter-spacing:.01em;padding:16px 30px;border-radius:var(--radius-md);
  border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.lp-btn--primair{background:var(--eucalyptus-dark);color:var(--ivoor)}
.lp-btn--primair:hover{background:var(--antraciet)}
.lp-btn--rand{background:transparent;border-color:rgba(23,26,29,.22);color:var(--eucalyptus-dark)}
.lp-btn--rand:hover{border-color:var(--eucalyptus-dark);background:rgba(47,74,64,.05)}
.lp-btn--licht{background:var(--champagne);color:var(--antraciet)}
.lp-btn--licht:hover{background:#EFD59B}
.lp-btn--randlicht{background:transparent;border-color:rgba(245,248,245,.45);color:var(--ivoor)}
.lp-btn--randlicht:hover{background:rgba(245,248,245,.12)}

/* ---- hero -------------------------------------------------- */
.lp-hero{background:var(--warm-ivoor);padding:clamp(44px,6vw,84px) 0 0}
.lp-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:center}
.lp-hero-media{position:relative}
.lp-hero-media img{width:100%;height:100%;max-height:560px;object-fit:cover;border-radius:var(--radius-lg);display:block}
/* Compacte belofteregel onder de knoppen. Verving het zwevende witte kaartje
   over de foto: dat trok te veel aandacht en concurreerde met de hoofdkop en de
   twee knoppen, terwijl het alleen als ondersteunende boodschap bedoeld is. */
.lp-belofte{display:flex;align-items:center;gap:10px;margin-top:var(--sp-4);
  font-size:14px;line-height:1.5;color:var(--text-2)}
.lp-belofte svg{width:17px;height:17px;color:var(--goud);flex:none}
.lp-belofte b{color:var(--eucalyptus-dark);font-weight:600}

/* Vertrouwensregel onder de knoppen. */
.lp-trust{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:var(--sp-6);padding-top:var(--sp-5);
  border-top:1px solid var(--line-soft)}
.lp-trust span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-2)}
.lp-trust svg{width:17px;height:17px;color:var(--goud);flex:none}

/* ---- genummerde keuzeblokken ------------------------------- */
.lp-keuze{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,2.5vw,32px)}
.lp-kaart{background:var(--lp-wit);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:clamp(28px,3vw,40px);display:flex;flex-direction:column}
.lp-kaart .lp-nr{font-family:var(--font-display);font-size:14px;font-weight:800;color:var(--goud);
  letter-spacing:.1em;margin-bottom:14px}
.lp-kaart p{font-size:14.5px;line-height:1.75;color:var(--text-2);margin:0 0 var(--sp-5);flex:1}
.lp-kaart .lp-link{font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--eucalyptus-dark);
  text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.lp-kaart .lp-link:hover{color:var(--goud)}

/* ---- drie zekerheden --------------------------------------- */
.lp-drie{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,3vw,44px);text-align:center}
.lp-drie .ico{width:52px;height:52px;margin:0 auto 18px;border-radius:50%;background:var(--lp-wit);
  border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center}
.lp-drie .ico svg{width:22px;height:22px;color:var(--goud)}
.lp-drie p{font-size:14.5px;line-height:1.7;color:var(--text-2);margin:0}

/* ---- stappen ----------------------------------------------- */
.lp-stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(24px,3vw,40px);counter-reset:stap}
.lp-stap{position:relative;padding-top:var(--sp-6)}
.lp-stap::before{counter-increment:stap;content:counter(stap,decimal-leading-zero);
  font-family:var(--font-display);font-size:30px;font-weight:800;color:var(--champagne);
  position:absolute;top:-6px;left:0;line-height:1}
.lp-stap p{font-size:14.5px;line-height:1.75;color:var(--text-2);margin:0}

/* ---- situatiekaarten --------------------------------------- */
.lp-situaties{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(20px,2.4vw,28px)}
.lp-situatie{background:var(--lp-wit);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column}
.lp-situatie .lp-mini{font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--goud);margin-bottom:12px}
.lp-situatie p{font-size:14.5px;line-height:1.72;color:var(--text-2);margin:0 0 var(--sp-4);flex:1}
.lp-situatie a{font-family:var(--font-body);font-weight:600;font-size:13.5px;color:var(--eucalyptus-dark);text-decoration:none}
.lp-situatie a:hover{color:var(--goud)}

/* ---- tekstblok met tabel ----------------------------------- */
.lp-tekst h3{margin-top:var(--sp-6)}
.lp-tabel-wrap{overflow-x:auto;margin:var(--sp-6) 0}
.lp-tabel{width:100%;border-collapse:collapse;font-size:14px;min-width:600px;background:var(--lp-wit)}
.lp-tabel caption{text-align:left;color:var(--text-3);font-size:13px;padding-bottom:12px}
.lp-tabel th,.lp-tabel td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.lp-tabel thead th{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--ink);
  background:var(--warm-ivoor);border-bottom:1px solid var(--line);letter-spacing:.02em}
.lp-tabel td{color:var(--text-2)}
.lp-tabel td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}

/* ---- sfeerfoto over de volle breedte ----------------------- */
.lp-figuur{margin:0}
.lp-figuur img{width:100%;height:clamp(240px,34vw,440px);object-fit:cover;display:block;border-radius:var(--radius-lg)}
.lp-figuur figcaption{margin-top:12px;font-size:13px;color:var(--text-3);text-align:center}
/* Panoramavariant: behoudt de eigen verhouding in plaats van een vaste hoogte,
   zodat een brede compositie niet aan de zijkanten wordt afgesneden. Alleen
   actief op figuren die deze klasse expliciet meekrijgen, dus zonder gevolgen
   voor bestaande pagina's. */
.lp-figuur--panorama img{height:auto}

/* ---- checklist --------------------------------------------- */
.lp-lijst{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px 32px}
.lp-lijst li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.7;color:var(--text-2)}
.lp-lijst li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border:1.5px solid var(--champagne);border-radius:50%}

/* ---- vragen ------------------------------------------------ */
.lp-vragen{border-top:1px solid var(--line-soft)}
.lp-vragen details{border-bottom:1px solid var(--line-soft)}
.lp-vragen summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink);line-height:1.45}
.lp-vragen summary::-webkit-details-marker{display:none}
.lp-vragen summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--goud);line-height:1}
.lp-vragen details[open] summary::after{content:"\2013"}
.lp-vragen p{margin:0 0 22px;font-size:14.5px;line-height:1.7;color:var(--text-2);max-width:70ch}

/* ---- afsluitende oproep ------------------------------------ */
.lp-slot{text-align:center}
.lp-slot .lp-acties{justify-content:center}

/* ---- verwante links ---------------------------------------- */
.lp-verwant{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;font-size:13.5px}
.lp-verwant span{color:var(--text-3)}
.lp-verwant a{color:var(--eucalyptus-dark);text-decoration:none;border-bottom:1px solid var(--line)}
.lp-verwant a:hover{border-bottom-color:var(--goud)}

/* ---- adresformulier ---------------------------------------- */
.lp-formulier{max-width:520px;margin:var(--sp-6) auto 0;background:var(--lp-wit);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:clamp(24px,3vw,36px)}
.lp-formulier .row{display:flex;gap:12px}
.lp-formulier .flex-1{flex:1}

/* ---- meelopende balk onderaan ------------------------------ */
.lp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:14px;align-items:center;
  justify-content:space-between;padding:12px 18px;background:var(--eucalyptus-dark);color:var(--ivoor);
  font-size:13.5px}
.lp-sticky .lp-btn{padding:11px 20px;font-size:13px}


/* ---- wijkentabel op een smal scherm --------------------------------
   Horizontaal schuiven binnen een tabel wordt op een telefoon vaak niet
   opgemerkt. Onder 700px wordt elke rij daarom een blok met kolomlabels.
   De weergave op desktop blijft ongewijzigd.                            */
@media (max-width:700px){
  .lp-tabel-wrap{overflow-x:visible;margin:var(--sp-5) 0}
  .lp-tabel{display:block;min-width:0;background:transparent;font-size:14.5px}
  .lp-tabel caption{display:block;width:auto;text-align:left;padding-bottom:14px}
  .lp-tabel thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lp-tabel tbody,.lp-tabel tr,.lp-tabel td{display:block}
  .lp-tabel tr{background:var(--lp-wit);border:1px solid var(--line-soft);
    border-radius:var(--radius-md);padding:18px 20px;margin-bottom:14px}
  .lp-tabel tr:hover td{background:transparent}
  .lp-tabel td{border:0;padding:0 0 12px;white-space:normal}
  .lp-tabel td:last-child{padding-bottom:0}
  .lp-tabel td:first-child{font-size:16px;line-height:1.35;margin-bottom:4px}
  .lp-tabel td[data-kolom]:not(:first-child)::before{content:attr(data-kolom);display:block;
    font-family:var(--font-body);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--goud);font-weight:700;margin-bottom:4px}
}

/* ---- responsief -------------------------------------------- */
@media (max-width:900px){
  .lp-hero-grid{grid-template-columns:1fr}
  /* Op smalle schermen eerst de tekst, daarna de foto, net als in het voorbeeld. */
}
@media (max-width:700px){
  .lp-sticky{display:flex}
  body{padding-bottom:72px}
  .lp-btn{width:100%}
  .lp-sticky .lp-btn{width:auto}
}