/* Garantiepagina (ontwerp 4 "De manen", gekozen 2026-09-30): compacte kop met beeld, de rekenmodule (stijl.css)
   en de afspraken in rijen. */

/* ---------- kop met beeld ---------- */
.gr-kop{background:var(--kalk);border-bottom:1px solid var(--lijn)}
.gr-kop-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(40px,5vw,72px)}
.gr-kop-tekst{display:grid;gap:20px;align-content:center}
.gr-kop h1{font-size:clamp(36px,4vw,56px);line-height:1.02;letter-spacing:-.018em;max-width:12ch}
.gr-kop .lead{max-width:40ch}
.gr-kop-beeld{margin:0}
.gr-kop-beeld img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:3px;background:var(--lijn-zacht)}
.gr-kop-beeld .beeldnoot{margin-top:8px;font-size:12.5px}

/* ---------- rekensectie ---------- */
.gr-reken{padding-block:clamp(48px,6vw,80px) 0;scroll-margin-top:72px}
.gr-reken-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px 48px;margin-bottom:clamp(22px,3vw,32px)}
.gr-reken-kop h2{font-size:clamp(28px,2.8vw,38px)}
.gr-reken-kop p{color:var(--lei);max-width:44ch;font-size:17px;line-height:1.5}

/* ---------- afspraken ---------- */
.gr-regels .gr-regels-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:start;border-top:1px solid var(--lijn);padding-top:clamp(36px,4vw,52px)}
.gr-regels h2{font-size:clamp(24px,2.3vw,30px);margin-bottom:16px}
.gr-lijst{margin:0;padding-left:20px;display:grid;gap:8px;font-size:16.5px;line-height:1.55}
.gr-lijst li::marker{color:var(--koper)}
.gr-niet{margin-top:16px;font-size:15.5px;line-height:1.55;color:var(--lei)}
.gr-niet b{color:var(--inkt)}
.gr-rijen{margin:0;display:grid;border-bottom:1px solid var(--lijn-zacht)}
.gr-rijen div{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--lijn-zacht)}
.gr-rijen dt{font:700 16px/1.4 var(--kop);color:var(--inkt)}
.gr-rijen dd{margin:0;font-size:16px;line-height:1.55;color:var(--lei)}
.gr-overname{margin-top:14px}

@media (max-width:860px){
  .gr-kop-raster{grid-template-columns:1fr}
  .gr-kop h1{max-width:none}
  .gr-regels .gr-regels-raster{grid-template-columns:1fr}
  .gr-rijen div{grid-template-columns:1fr;gap:2px}
}