/*
  De beeldplekken op deze pagina lazen nog --grm-foto-over-hero en
  --grm-foto-over-band. Die namen komen uit de tijd dat alle foto's samen in een
  :root-blok stonden. GRMF_Fotoplekken zet ze sinds de overstap naar bijna
  honderd plekken per element neer, onder de naam --grm-fp-bg. Een beheerder kon
  hier dus wel een foto kiezen en opslaan, maar er verscheen nooit iets: de hero
  las een variabele die niemand meer schrijft. Dezelfde reden waarom de
  overlaykleur hier niets deed; die komt binnen als --grm-fp-t1 tot t3 voor de
  laag over de foto en --grm-fp-b1 tot b3 voor het verloop eronder.
*/
.grm-over__hero{
  position:relative;overflow:hidden;color:#fff;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw;
  padding:92px 22px 88px;
  background:linear-gradient(135deg,var(--grm-fp-b1,#041E42) 0%,var(--grm-fp-b2,#103A63) 60%,var(--grm-fp-b3,var(--grm-success,#103a63)) 100%);
}
.grm-over__hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, var(--grm-fp-t3,rgba(4,30,66,.62)) 0%, var(--grm-fp-t1,rgba(4,30,66,.78)) 100%),
    var(--grm-fp-bg, none);
  background-size:auto,cover;
  background-position:center,center 42%;
  background-repeat:no-repeat;
}
.grm-over__hero-in{position:relative;z-index:2;max-width:880px;margin:0 auto;text-align:center}
.grm-over__eyebrow{
  display:inline-block;margin-bottom:16px;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.grm-over__hero h1{
  font-family:var(--grm-font-display,inherit);
  font-size:clamp(30px,4.6vw,52px);line-height:1.08;
  letter-spacing:var(--grm-tracking-tight,-.02em);
  color:#fff;margin:0 0 18px;
}
.grm-over__lead{font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:rgba(255,255,255,.9);margin:0 auto 28px;max-width:660px}
.grm-over__hero-acties{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.grm-btn--wit{background:#fff;color:var(--grm-brand,#103A63);border:1px solid #fff}
.grm-btn--wit:hover{background:#EDF2F8;color:var(--grm-brand,#103A63)}
.grm-btn--rand{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.grm-btn--rand:hover{background:rgba(255,255,255,.12);color:#fff}

.grm-over__split{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.grm-over__kop-eyebrow{
  display:block;margin-bottom:10px;
  font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--grm-accent,#1668C7);
}
.grm-over__tekst h2{
  font-family:var(--grm-font-display,inherit);
  font-size:clamp(24px,3vw,36px);line-height:1.15;
  letter-spacing:var(--grm-tracking-tight,-.02em);
  margin:0 0 18px;color:var(--grm-ink,#041E42);
}
.grm-over__tekst p{color:var(--grm-ink-500,#55636E);line-height:1.7;margin:0 0 14px}
.grm-over__tekst .lead{font-size:17.5px;color:var(--grm-ink,#041E42);font-weight:500}
/*
  De beeldplek dwong hier een staand vlak af van 4 bij 5, met object-fit:cover
  erin. Bij een staande foto gaat dat goed, maar upload je een liggende balk dan
  snijdt cover links en rechts alles weg om die hoogte te halen: je ziet een
  smalle strook uit het midden en de rest van de foto is er niet meer.

  Zodra er een foto staat volgt het vlak daarom de verhouding van de foto zelf.
  Is er nog geen foto, dan houdt het lege vlak zijn staande maat, anders klapt
  de plek dicht tot een streep en zie je niet meer waar je moet klikken.
*/
/* Geen eigen verhouding- of pasregels meer: die lieten de foto zijn eigen
   formaat houden, waardoor een liggende foto het vlak maar half vulde. De
   basisregel geldt weer: het vlak houdt de verhouding van de plek en de foto
   dekt hem volledig af. */
.grm-over__beeld .grm-fotoplek{box-shadow:0 24px 60px -24px rgba(4,30,66,.4)}

.grm-over__band{
  position:relative;overflow:hidden;color:#fff;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw;
  padding:86px 22px;
  background:linear-gradient(135deg,var(--grm-fp-b1,var(--grm-success-text,#0b2a49)) 0%,var(--grm-fp-b2,#103A63) 100%);
}
.grm-over__band-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, var(--grm-fp-t3,rgba(4,30,66,.70)) 0%, var(--grm-fp-t1,rgba(4,30,66,.82)) 100%),
    var(--grm-fp-bg, none);
  background-size:auto,cover;background-position:center,center;background-repeat:no-repeat;
}
.grm-over__band-in{position:relative;z-index:2;max-width:900px;margin:0 auto;text-align:center}
/*
  De golf hoort binnen de donkere band en niet erachter. Achter de band staat de
  paginakleur, en de tekening is boven het pad doorzichtig: een golf in
  paginakleur op paginakleur is onzichtbaar. Binnen de band, tegen de onderrand,
  loopt het donker wel echt over in het vlak eronder.
*/
.grm-over__band .grm-golf{position:absolute;left:0;right:0;bottom:-1px;z-index:3;pointer-events:none}
.grm-over__quote{
  font-family:var(--grm-font-display,inherit);
  font-size:clamp(20px,2.6vw,31px);line-height:1.35;font-weight:600;
  letter-spacing:var(--grm-tracking-tight,-.02em);margin:0;color:#fff;
}

.grm-over__kanten{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.grm-over__kant{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--grm-line,#D7DEE7);border-radius:var(--grm-r-md,16px);
  background:var(--grm-paper,#fff);
}
.grm-over__kant .grm-fotoplek{border-radius:0}
.grm-over__kant--betaald{border-color:var(--grm-brand,#103A63);box-shadow:0 18px 44px -22px rgba(4,30,66,.42)}
.grm-over__kant-in{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1 1 auto}
.grm-over__prijs{
  display:inline-flex;align-items:baseline;gap:7px;align-self:flex-start;
  font-family:var(--grm-font-display,inherit);font-size:34px;font-weight:800;
  letter-spacing:var(--grm-tracking-tight,-.02em);color:var(--grm-brand,#103A63);
  line-height:1;margin-bottom:10px;
}
.grm-over__prijs small{font-size:13px;font-weight:600;color:var(--grm-ink-500,#55636E);letter-spacing:0}
.grm-over__prijs--gratis{color:var(--grm-success,#103A63)}
.grm-over__kant h3{font-size:20px;margin:0 0 10px;color:var(--grm-ink,#041E42)}
.grm-over__kant p{color:var(--grm-ink-500,#55636E);line-height:1.65;margin:0 0 16px}
.grm-over__lijst{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:9px}
.grm-over__lijst li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--grm-ink,#041E42);line-height:1.45}
.grm-over__lijst .material-symbols-rounded{font-size:19px;color:var(--grm-success,#103A63);flex:0 0 auto}
.grm-over__kant .grm-btn{margin-top:auto;align-self:flex-start}

.grm-over__beloftes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grm-over__belofte{
  display:flex;gap:13px;align-items:flex-start;
  padding:18px 18px 19px;border:1px solid var(--grm-line,#D7DEE7);
  border-radius:var(--grm-r-md,16px);background:var(--grm-paper,#fff);
}
.grm-over__belofte .material-symbols-rounded{font-size:22px;color:var(--grm-brand,#103A63);flex:0 0 auto}
.grm-over__belofte strong{display:block;font-size:15px;color:var(--grm-ink,#041E42);margin-bottom:3px}
.grm-over__belofte span{display:block;font-size:14px;color:var(--grm-ink-500,#55636E);line-height:1.5}

/*
  Zo werkt het: vier stappen met een eigen lijnfiguur. Deze pagina was tot hier
  alleen tekst, alinea's en pictogrammen uit de lettertypeset, en las daardoor
  als een handleiding. De figuren komen uit GRMF_Figuren, dezelfde set die de
  leverancierspagina's gebruiken, zodat een stap die daar hetzelfde bedoelt hier
  ook hetzelfde oogt.
*/
.grm-over__hoe{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grm-over__hoestap{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:24px 20px 22px;border:1px solid var(--grm-line,#D7DEE7);
  border-radius:var(--grm-r-md,16px);background:var(--grm-paper,#fff);
}
.grm-over__hoefig{display:flex;justify-content:center;align-items:flex-end;min-height:78px}
.grm-over__hoefig .grm-fig{max-width:104px}
.grm-over__hoenr{
  position:absolute;top:14px;left:16px;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63);
  font-size:12px;font-weight:800;line-height:1;
}
.grm-over__hoestap h3{font-size:16.5px;margin:0;color:var(--grm-ink,#041E42)}
.grm-over__hoestap p{font-size:14px;line-height:1.55;color:var(--grm-ink-500,#55636E);margin:0}

.grm-over__faq{max-width:760px;margin:0 auto}
.grm-over__faq .grm-faq2__item summary{font-size:15.5px}
.grm-over__faq-noot{
  margin:18px auto 0;max-width:760px;text-align:center;
  font-size:14px;line-height:1.6;color:var(--grm-ink-500,#55636E);
}

/*
  Het slot was een witte sectie met gecentreerde tekst, en dat las als het
  restje van de pagina in plaats van als afsluiting. Nu dezelfde volle band als
  de hero en de quote, met een eigen beeldplek, zodat de pagina eindigt zoals
  hij begint.
*/
.grm-over__slot{
  position:relative;overflow:hidden;text-align:center;color:#fff;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw;
  padding:78px 22px 82px;
  background:linear-gradient(135deg,var(--grm-fp-b1,#041E42) 0%,var(--grm-fp-b2,#103A63) 100%);
}
.grm-over__slot-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, var(--grm-fp-t3,rgba(4,30,66,.66)) 0%, var(--grm-fp-t1,rgba(4,30,66,.80)) 100%),
    var(--grm-fp-bg, none);
  background-size:auto,cover;background-position:center,center 45%;background-repeat:no-repeat;
}
.grm-over__slot .grm-container{position:relative;z-index:2}
.grm-over__slot h2{font-family:var(--grm-font-display,inherit);font-size:clamp(23px,3vw,34px);margin:0 0 12px;color:#fff}
.grm-over__slot p{color:rgba(255,255,255,.88);margin:0 0 22px;line-height:1.6}

@media(max-width:980px){
  .grm-over__split{grid-template-columns:1fr;gap:34px}
  .grm-over__beeld{order:-1}
  .grm-over__beloftes{grid-template-columns:1fr 1fr}
  .grm-over__hoe{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .grm-over__hero{padding:64px 20px 60px}
  .grm-over__band{padding:60px 20px}
  .grm-over__slot{padding:58px 20px 62px}
  .grm-over__kanten{grid-template-columns:1fr}
  .grm-over__beloftes{grid-template-columns:1fr}
  .grm-over__hero-acties{flex-direction:column;align-items:stretch}
  .grm-over__hero-acties .grm-btn{width:100%;justify-content:center}
  .grm-over__kant .grm-btn{align-self:stretch;justify-content:center}
}
@media(max-width:520px){
  .grm-over__hoe{grid-template-columns:1fr}
  .grm-over__hoefig{min-height:0}
  .grm-over__hoefig .grm-fig{max-width:86px}
}