/* StudieBoost
   Concept: blauwe lucht boven het open boek uit het logo. Licht en vriendelijk,
   met kleurvlakken per onderdeel: warm voor de basisschool, blauw voor de
   middelbare school. Afgeronde kaarten en een zwevende menubalk. */

@font-face {
  font-family: "Jakarta";
  src: url("/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --navy: #0b1f4b;
  --tekst: #36445f;
  --zacht: #56657f;
  --blauw: #0b5fd9;
  --blauw-d: #0a47b5;
  --hemel: #e7f1ff;
  --hemel-2: #cfe3ff;
  --perzik: #fff1e6;
  --perzik-2: #ffdcc4;
  --oranje: #ff6a13;
  --knop: #ee5700;
  --knop-d: #cf4a00;
  --oranje-d: #bf4000;
  --wit: #ffffff;
  --lijn: #dde6f3;
  --schaduw: 0 10px 30px rgba(11, 31, 75, .08);
  --schaduw-l: 0 18px 48px rgba(11, 31, 75, .14);
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --font: "Jakarta", "Segoe UI", system-ui, sans-serif;
  --goot: max(20px, env(safe-area-inset-left, 0px));
  --goot-r: max(20px, env(safe-area-inset-right, 0px));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0;
  background: var(--wit);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--blauw); text-underline-offset: 3px; }
a:hover { color: var(--blauw-d); }
h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 4.9vw, 3.875rem); line-height: 1.06; letter-spacing: -.03em; }
h2 { font-size: clamp(1.75rem, 3.3vw, 2.625rem); }
h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; }

.wrap {
  width: 100%;
  max-width: 1232px;
  margin-inline: auto;
  padding-left: var(--goot);
  padding-right: var(--goot-r);
}
.overslaan {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 60;
  padding: 10px 14px;
  border-radius: var(--r-s);
  background: var(--navy);
  color: #fff;
}
.overslaan:focus { top: 12px; color: #fff; }
.ikoon { width: 1em; height: 1em; flex: none; }

/* Knoppen */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 0;
  border-radius: 14px;
  background: var(--knop);
  box-shadow: 0 8px 18px rgba(238, 87, 0, .28);
  color: #fff;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.knop:hover { background: var(--knop-d); color: #fff; transform: translateY(-1px); }
.knop--blauw { background: var(--blauw); box-shadow: 0 8px 18px rgba(11, 95, 217, .25); }
.knop--blauw:hover { background: var(--blauw-d); }
.knop--wit { background: #fff; box-shadow: none; color: var(--blauw-d); }
.knop--wit:hover { background: var(--hemel); color: var(--blauw-d); }
.knop--klein { padding: 10px 16px; border-radius: 12px; font-size: 1rem; box-shadow: none; white-space: nowrap; }
.knop--zacht { background: var(--hemel); box-shadow: none; color: var(--blauw-d); }
.knop--zacht:hover { background: var(--hemel-2); color: var(--blauw-d); }
.pijl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}
.pijl .ikoon { font-size: 1.15em; transition: transform .15s; }
.pijl:hover { color: var(--blauw); }
.pijl:hover .ikoon { transform: translateX(3px); }
.acties { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }

/* Zwevende menubalk */
.kop {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  z-index: 40;
  margin-top: 12px;
  margin-bottom: -84px;
}
.kop__balk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: 8px 12px 8px 18px;
  border-radius: 20px;
  background: var(--wit);
  box-shadow: var(--schaduw-l);
}
.kop__logo { flex: none; display: block; margin-right: auto; }
.kop__logo img { width: 158px; height: auto; }
.kop__lijst { display: flex; align-items: center; gap: 2px; }
.kop__lijst > li { display: flex; align-items: center; }
.kop__lijst > .alleen-klein { display: none; }
.kop__link {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.kop__link:hover, .heeft-mega.is-open > .kop__link { background: var(--hemel); color: var(--blauw-d); }
.kop__link[aria-current="page"] { color: var(--blauw); }
.heeft-mega > .kop__link { padding-right: 4px; }
.sub-knop {
  display: grid;
  place-items: center;
  width: 28px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--navy);
  cursor: pointer;
}
.sub-knop .ikoon { font-size: .95rem; transition: transform .15s; }
.heeft-mega.is-open .sub-knop .ikoon { transform: rotate(180deg); }
.kop__knoppen { display: flex; gap: 8px; align-items: center; }
.kop__menu {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--hemel);
  color: var(--blauw-d);
  font-weight: 700;
  cursor: pointer;
}

/* Uitklapmenu */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  padding-top: 8px;
}
.heeft-mega.is-open > .mega { display: block; }
/* Zonder JavaScript opent het menu met gewoon zweven; met JavaScript regelt site.js dat. */
@media (hover: hover) and (min-width: 1081px) {
  html:not(.js) .heeft-mega:hover > .mega { display: block; }
}
/* De zweefzone loopt door tot de onderrand van de balk, zodat de muis het paneel haalt. */
@media (min-width: 1081px) {
  .kop__nav, .kop__lijst { align-self: stretch; }
  .kop__nav { display: flex; }
  .kop__lijst { align-items: stretch; }
  .heeft-mega { margin-block: -8px; padding-block: 8px; }
}
.mega__binnen {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 26px;
  padding: 22px;
  border-radius: 20px;
  background: var(--wit);
  box-shadow: var(--schaduw-l);
}
.mega__label {
  margin-bottom: 10px;
  color: var(--zacht);
  font-size: .875rem;
  font-weight: 700;
}
.mega__diensten { display: grid; gap: 10px; align-content: start; }
.mega__dienst {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: var(--hemel);
  color: var(--navy);
  text-decoration: none;
}
.mega__dienst:hover { background: var(--hemel-2); color: var(--navy); }
.mega__dienst .vakikoon { grid-row: span 2; }
.mega__dienst b { font-weight: 700; line-height: 1.25; }
.mega__dienst span.mega__sub { color: var(--zacht); font-size: .875rem; line-height: 1.3; }
.mega__kolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.mega__kolommen--bo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__vak {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 12px;
  color: var(--navy);
  font-size: .9688rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.mega__vak:hover { background: var(--hemel); color: var(--blauw-d); }
.mega__vak .vakikoon { width: 34px; height: 34px; border-radius: 10px; font-size: 1.25rem; }
.mega__vak .vakikoon--taal { font-size: .75rem; }
.mega__vakken { display: grid; gap: 2px; }
.mega__kolommen--bo .mega__vakken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__kolom--breed { grid-column: 1 / -1; }

.vakikoon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--wit);
  color: var(--blauw);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}
.vakikoon--taal { font-size: .9375rem; }
.vakikoon--warm { color: var(--oranje-d); }
.mega__vak .vakikoon { background: var(--hemel); }
.mega__vak .vakikoon--warm { background: var(--perzik); }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 112px;
  background: linear-gradient(180deg, #c9e0ff 0%, #e4f0ff 52%, #fff4ea 100%);
}
.hero__rij {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 24px;
  align-items: center;
  padding-block: clamp(20px, 3.5vw, 46px) 150px;
}
.hero__tekst { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: start; min-width: 0; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--wit);
  color: var(--oranje-d);
  font-size: .9375rem;
  font-weight: 700;
}
.badge .ikoon { font-size: 1.1rem; }
.hero__lead { max-width: 33em; color: var(--navy); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; }
.hero__beeld { position: relative; min-width: 0; max-width: 370px; margin-inline: auto; width: 100%; pointer-events: none; }
.hero__zon {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 96%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 44%, rgba(255, 255, 255, .55) 45% 68%, rgba(255, 255, 255, .25) 69% 100%);
  transform: translate(-50%, -50%);
}
.hero__merk { position: relative; width: 74%; margin-inline: auto; }
.zweef {
  position: absolute;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--wit);
  box-shadow: var(--schaduw);
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.zweef--1 { left: 0; top: 16%; transform: rotate(-5deg); }
.zweef--2 { right: 0; top: 7%; transform: rotate(4deg); color: var(--blauw); }
.zweef--3 { left: -3%; top: 56%; transform: rotate(3deg); color: var(--oranje-d); }
.zweef--4 { right: -2%; top: 47%; transform: rotate(-4deg); }
.wolk { position: absolute; width: 190px; color: #fff; opacity: .85; pointer-events: none; }
.wolk--1 { left: 41%; top: 96px; width: 170px; }
.wolk--2 { right: 2%; top: 292px; width: 240px; opacity: .6; }

/* Kaarten over de hero heen */
.startkaarten {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: -112px;
}
.startkaart {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
  border-radius: var(--r-m);
  background: var(--blauw);
  color: #fff;
  text-decoration: none;
  transition: transform .15s, background-color .15s;
}
.startkaart:hover { transform: translateY(-3px); background: var(--blauw-d); color: #fff; }
.startkaart--warm { background: var(--knop-d); }
.startkaart--warm:hover { background: var(--oranje-d); }
.startkaart__kop { display: flex; align-items: center; gap: 10px; }
.startkaart h2 { color: #fff; font-size: 1.125rem; line-height: 1.2; letter-spacing: -.01em; }
.startkaart p { font-size: 1rem; line-height: 1.45; }
.startkaart .vakikoon--warm { color: var(--oranje-d); }

/* Secties en kleurvlakken */
.band { padding-block: clamp(52px, 7vw, 92px); }
.band--hemel { background: var(--hemel); }
.band--hemel h2 { color: var(--blauw-d); }
.band--perzik { background: var(--perzik); }
.band--perzik h2 { color: var(--oranje-d); }
.band--blauw { background: var(--blauw-d); color: #e4eeff; }
.band--blauw h2, .band--blauw .kaart h3 { color: #fff; }
.band--na-kaarten { padding-top: clamp(70px, 8vw, 100px); }
.band--plek { padding-bottom: 0; }
.titel + .band--hemel { padding-top: 0; }
.kopblok { display: grid; gap: 12px; max-width: 44em; margin-bottom: clamp(28px, 4vw, 44px); }
.kopblok--midden { margin-inline: auto; justify-items: center; text-align: center; }
.kopblok p { font-size: 1.125rem; }

.drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.kaart {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  padding: 26px;
  border-radius: var(--r-l);
  background: var(--wit);
  box-shadow: var(--schaduw);
}
.kaart--plat { box-shadow: none; }
.kaart--blauw { background: rgba(255, 255, 255, .1); box-shadow: none; }
.kaart .vakikoon { background: var(--hemel); }
.kaart--blauw .vakikoon { background: #fff; }
.band--perzik .kaart .vakikoon { background: var(--perzik); color: var(--oranje-d); }

/* Twee grote doelgroepkaarten */
.doelgroep {
  display: grid;
  gap: 16px;
  align-content: start;
  justify-items: start;
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: var(--r-l);
}
.doelgroep--bo { background: var(--perzik); }
.doelgroep--vo { background: var(--hemel); }
.doelgroep h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.doelgroep--bo h3 { color: var(--oranje-d); }
.doelgroep--vo h3 { color: var(--blauw-d); }
.band--perzik .doelgroep { background: var(--wit); box-shadow: var(--schaduw); }
.band--perzik .doelgroep--bo .pil { background: var(--perzik); }
.band--perzik .doelgroep--vo .pil { background: var(--hemel); }
.label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
}
.pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.pil {
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--wit);
  color: var(--navy);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
a.pil:hover { background: var(--navy); color: #fff; }

/* Vaktegels */
.tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tegels--kolom { grid-template-columns: minmax(0, 1fr); }
.tegel {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 2px 14px;
  align-items: start;
  padding: 18px;
  border-radius: var(--r-m);
  background: var(--wit);
  box-shadow: var(--schaduw);
  color: var(--tekst);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.tegel:hover { transform: translateY(-2px); box-shadow: var(--schaduw-l); color: var(--tekst); }
.tegel .vakikoon { grid-row: span 2; width: 46px; height: 46px; background: var(--hemel); }
.tegel .vakikoon--warm { background: var(--perzik); }
.tegel b { color: var(--navy); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.tegel span.tegel__kort { font-size: .9688rem; line-height: 1.45; }
.vakgroepen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 14px; align-items: start; }
.vakgroepen__kolom { display: grid; gap: 12px; min-width: 0; }
.vakgroep { font-size: 1.25rem; }

/* Stappen: oplopende kaarten */
.baan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.baan__stap {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 22px;
  border-radius: var(--r-m);
  background: var(--wit);
  box-shadow: var(--schaduw);
}
.baan__stap:nth-child(1) { margin-top: 96px; }
.baan__stap:nth-child(2) { margin-top: 64px; }
.baan__stap:nth-child(3) { margin-top: 32px; }
.baan__nr {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blauw);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 800;
}
.baan__stap:nth-child(4) .baan__nr { background: var(--knop); }
.baan__raket { position: absolute; right: 18px; top: 18px; color: var(--oranje); font-size: 2rem; }

/* Prijzen */
.prijzen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.prijs {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 26px;
  border-radius: var(--r-l);
  background: var(--wit);
  box-shadow: var(--schaduw);
}
.prijs h2, .prijs h3 { font-size: 1.5rem; }
.prijs__duur { display: flex; align-items: center; gap: 8px; color: var(--zacht); font-weight: 600; }
.prijs__duur .ikoon { font-size: 1.25rem; color: var(--blauw); }
.prijs--warm .prijs__duur .ikoon { color: var(--oranje-d); }
.prijs__rij {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--hemel);
  color: var(--navy);
}
.prijs--warm .prijs__rij { background: var(--perzik); }
.prijs__soort { font-weight: 700; }
.prijs__bedrag { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.prijs__bedrag small { color: var(--tekst); font-size: .9375rem; font-weight: 600; letter-spacing: 0; }
.prijs__totaal { width: 100%; color: var(--tekst); font-size: .9375rem; text-align: right; }

/* Veelgestelde vragen */
.vragen { display: grid; gap: 10px; }
.vraag { border-radius: var(--r-m); background: var(--wit); box-shadow: var(--schaduw); }
.vraag summary {
  position: relative;
  padding: 16px 52px 16px 20px;
  color: var(--navy);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 10px;
  color: var(--blauw);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
}
.vraag[open] summary::after { content: "\2212"; }
.vraag p { padding: 0 20px 18px; }
.smal { max-width: 860px; margin-inline: auto; }

/* Afsluiter */
.afsluiter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px 40px;
  align-items: center;
  padding: clamp(28px, 4.5vw, 52px);
  border-radius: var(--r-l);
  background: var(--blauw-d);
  color: #e4eeff;
}
.afsluiter h2 { color: #fff; }
.afsluiter__tekst { display: grid; gap: 8px; }

/* Paginakop */
.titel { padding-top: 108px; }
.titel--hemel { background: linear-gradient(180deg, #d6e7ff 0%, var(--hemel) 100%); }
.titel--perzik { background: linear-gradient(180deg, #ffe6d5 0%, var(--perzik) 100%); }
.titel__rij { display: grid; gap: 16px; justify-items: start; padding-block: clamp(26px, 4vw, 50px) clamp(38px, 5vw, 62px); max-width: 46em; }
.titel p.titel__lead { font-size: clamp(1.125rem, 1.6vw, 1.25rem); line-height: 1.5; color: var(--navy); }
.kruimel { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--zacht); font-size: .9375rem; }
.kruimel a { color: var(--zacht); text-decoration: none; }
.kruimel a:hover { color: var(--blauw); text-decoration: underline; }
.kruimel li + li::before { content: "/"; margin-right: 8px; }
.kruimel [aria-current] { color: var(--navy); font-weight: 600; }

/* Vakpagina */
.vakkop { padding-top: 108px; }
.vakkop--bo { background: linear-gradient(180deg, #ffe6d5 0%, var(--perzik) 100%); }
.vakkop--vo { background: linear-gradient(180deg, #d6e7ff 0%, var(--hemel) 100%); }
.vakkop__rij {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(26px, 4vw, 48px) clamp(44px, 6vw, 72px);
}
.vakkop__tekst { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.vakkop--bo h1 { color: var(--oranje-d); }
.vakkop--vo h1 { color: var(--blauw-d); }
.vakkop__tekst p { max-width: 36em; font-size: 1.125rem; }
.vakkop .acties { margin-top: 8px; }

.voorbeeld {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 26px;
  border-radius: var(--r-l);
  background: var(--wit);
  box-shadow: var(--schaduw-l);
  transform: rotate(1.2deg);
}
.voorbeeld figcaption { display: flex; align-items: center; gap: 12px; color: var(--zacht); font-size: .9375rem; font-weight: 700; }
.voorbeeld figcaption .vakikoon { background: var(--hemel); }
.voorbeeld figcaption .vakikoon--warm { background: var(--perzik); }
.voorbeeld__vraag { color: var(--navy); font-size: 1.25rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.voorbeeld__stappen { display: grid; gap: 8px; counter-reset: stap; }
.voorbeeld__stappen li { position: relative; padding-left: 34px; line-height: 1.45; }
.voorbeeld__stappen li::before {
  counter-increment: stap;
  content: counter(stap);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hemel);
  color: var(--blauw-d);
  font-size: .8125rem;
  font-weight: 800;
}
.voorbeeld--bo .voorbeeld__stappen li::before { background: var(--perzik); color: var(--oranje-d); }
.voorbeeld__uitkomst { padding: 12px 16px; border-radius: 14px; background: var(--hemel); color: var(--navy); font-weight: 700; line-height: 1.4; }
.voorbeeld--bo .voorbeeld__uitkomst { background: var(--perzik); }
.voorbeeld__uitkomst small { display: block; color: var(--zacht); font-size: .8125rem; font-weight: 700; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 70px); align-items: center; }
.split__tekst { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.split__tekst p { font-size: 1.125rem; }
.lijstkaart { display: grid; gap: 18px; min-width: 0; padding: 26px; border-radius: var(--r-l); background: var(--hemel); }
.lijstkaart--bo { background: var(--perzik); }
.lijstkaart h2, .lijstkaart h3 { font-size: 1.375rem; }
.vinklijst { display: grid; gap: 14px; }
.vinklijst li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 10px; }
.vinklijst .ikoon { grid-row: span 2; margin-top: 3px; color: var(--blauw); font-size: 1.5rem; }
.lijstkaart--bo .vinklijst .ikoon { color: var(--oranje-d); }
.vinklijst b { color: var(--navy); font-weight: 700; line-height: 1.35; }
.vinklijst li.kort { align-items: start; }

.onderaan { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px 48px; align-items: start; }
.onderaan__kop { margin-bottom: 18px; }

/* Locatie */
.plek {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  justify-content: space-between;
  padding: clamp(24px, 3.4vw, 38px);
  border-radius: var(--r-l);
  background: var(--hemel);
}
.plek__tekst { display: grid; gap: 6px; }
.plek__tekst h2 { color: var(--blauw-d); }
.plek__adres { color: var(--navy); font-size: 1.1875rem; font-weight: 700; }

/* Inschrijven */
.inschrijf { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.form {
  display: grid;
  gap: 30px;
  min-width: 0;
  padding: clamp(22px, 3.4vw, 38px);
  border-radius: var(--r-l);
  background: var(--wit);
  box-shadow: var(--schaduw);
}
.form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.form__deel { display: grid; gap: 18px; }
.form__kop {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  padding: 0;
  color: var(--navy);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.form__kop span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blauw);
  color: #fff;
  font-size: 1rem;
}
.veld-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.veld { display: grid; gap: 6px; min-width: 0; }
.veld label, .pakketten legend { color: var(--navy); font-weight: 700; }
.veld input, .veld textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid #9fb0c9;
  border-radius: var(--r-s);
  background: #fff;
}
.veld textarea { min-height: 130px; resize: vertical; }
.veld input:focus, .veld textarea:focus { border-color: var(--blauw); outline: 3px solid var(--hemel-2); outline-offset: 0; }
.pakketten { display: grid; gap: 8px; }
.pakketten legend { margin-bottom: 8px; padding: 0; }
.pakket { position: relative; display: block; }
.pakket input { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin: -10px 0 0; accent-color: var(--blauw); }
.pakket span {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  justify-content: space-between;
  padding: 12px 14px 12px 46px;
  border: 1.5px solid #9fb0c9;
  border-radius: var(--r-s);
  cursor: pointer;
}
.pakket b { color: var(--navy); font-weight: 700; }
.pakket i { color: var(--zacht); font-style: normal; }
.pakket input:checked + span { background: var(--hemel); border-color: var(--blauw); box-shadow: inset 0 0 0 1.5px var(--blauw); }
.pakket input:focus-visible + span { outline: 3px solid var(--blauw); outline-offset: 2px; }
.form__voet { display: grid; gap: 14px; justify-items: start; }
.form__klein { color: var(--zacht); font-size: .9375rem; }
.form__melding { padding: 14px 16px; border-radius: var(--r-s); background: var(--perzik); color: var(--navy); }
.vangnet { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zijkant { position: sticky; top: 104px; display: grid; gap: 14px; padding: 26px; border-radius: var(--r-l); background: var(--blauw-d); color: #e4eeff; }
.zijkant h2 { color: #fff; font-size: 1.5rem; }
.zijkant a { color: #fff; white-space: nowrap; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; }
.contact__kaart { display: grid; gap: 22px; justify-items: start; min-width: 0; padding: clamp(24px, 3.4vw, 36px); border-radius: var(--r-l); background: var(--wit); box-shadow: var(--schaduw); }
.contact__lijst { display: grid; gap: 18px; width: 100%; }
.contact__regel { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 14px; align-items: center; }
.contact__regel .vakikoon { grid-row: span 2; background: var(--hemel); }
.contact__label { color: var(--zacht); font-size: .9375rem; line-height: 1.3; }
.contact__waarde { color: var(--navy); font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.contact__regel a { color: inherit; text-decoration: none; }
.contact__regel a:hover { color: var(--blauw); text-decoration: underline; }
.contact__qr { display: grid; gap: 10px; justify-items: center; align-content: center; padding: 26px; border-radius: var(--r-l); background: var(--hemel); color: var(--navy); font-weight: 700; text-align: center; text-decoration: none; }
.contact__qr img { width: 180px; padding: 10px; border-radius: var(--r-s); background: #fff; }

/* Tekstpagina */
.lees { display: grid; gap: 14px; max-width: 42em; }
.lees h2 { margin-top: 18px; font-size: 1.5rem; }
.lees ul { display: grid; gap: 6px; padding-left: 1.2em; list-style: disc; }
.midden { display: grid; gap: 18px; justify-items: start; max-width: 38em; }

/* Voettekst */
.golf { display: block; width: 100%; height: clamp(46px, 7vw, 92px); margin-bottom: -1px; }
.voet { background: var(--navy); color: #b9cdf0; }
.voet a { color: #fff; text-decoration: none; }
.voet a:hover { color: #ffb587; text-decoration: underline; }
.voet__rij {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .7fr) minmax(0, 1.4fr) minmax(0, .8fr);
  gap: 34px 40px;
  padding-block: 40px 30px;
}
.voet__kolom { display: grid; gap: 6px; align-content: start; font-size: 1rem; }
.voet__kop { margin-bottom: 4px; color: #b9cdf0; font-size: .9375rem; font-weight: 700; }
.voet__tel { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.voet__links { display: grid; gap: 4px; }
.voet__dubbel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.voet__qr { display: grid; gap: 8px; justify-items: start; margin-top: 10px; }
.voet__qr img { width: 96px; padding: 6px; border-radius: 10px; background: #fff; }
.voet__onder {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  padding-block: 16px 22px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .9375rem;
}

@media (max-width: 1280px) {
  .startkaart__kop { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 1080px) {
  .startkaart__kop { flex-direction: row; align-items: center; }
  .kop__menu { display: inline-flex; }
  .kop__balk { flex-wrap: wrap; gap: 8px; min-height: 64px; }
  .kop__logo { order: 0; }
  .kop__knoppen { order: 1; }
  .kop__menu { order: 2; }
  .kop__nav { display: none; order: 3; width: 100%; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; padding-bottom: 6px; }
  .kop__nav.is-open { display: block; }
  .kop__lijst { display: grid; gap: 0; }
  .kop__lijst > li { flex-wrap: wrap; justify-content: space-between; border-top: 1px solid var(--lijn); }
  .kop__lijst > .alleen-klein { display: flex; }
  .kop__link { flex: 1; padding: 12px 4px; font-size: 1.0625rem; }
  .heeft-mega > .kop__link { padding-right: 4px; }
  .sub-knop { width: 44px; height: 44px; }
  .mega { position: static; flex-basis: 100%; padding-top: 0; }
  .mega__binnen { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 4px 4px 14px; box-shadow: none; }
  .mega__kolommen, .mega__kolommen--bo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .startkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inschrijf { grid-template-columns: minmax(0, 1fr); }
  .zijkant { position: static; }
  .baan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baan__stap:nth-child(1), .baan__stap:nth-child(2), .baan__stap:nth-child(3) { margin-top: 0; }
  .vakgroepen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .hero__rij { grid-template-columns: minmax(0, 1fr); padding-bottom: 136px; }
  .hero__beeld { max-width: 290px; margin-top: 44px; }
  .wolk { display: none; }
  .vakkop__rij, .split, .onderaan, .contact, .prijzen, .twee { grid-template-columns: minmax(0, 1fr); }
  .drie { grid-template-columns: minmax(0, 1fr); }
  .voorbeeld { transform: none; }
  .afsluiter { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .kop__logo img { width: 112px; }
  .kop__balk { padding: 8px 8px 8px 12px; }
  .kop__knoppen .knop--zacht { display: none; }
  .knop--klein { padding: 9px 12px; font-size: .9375rem; }
  .kop__menu { padding: 9px 10px; font-size: .9375rem; }
  .acties .knop { width: 100%; }
  .acties .pijl { margin-inline: auto; }
  .startkaarten, .vier, .tegels, .vakgroepen, .baan, .veld-rij { grid-template-columns: minmax(0, 1fr); }
  .startkaarten { margin-top: -96px; }
  .zweef { font-size: .875rem; padding: 6px 10px; }
  .zweef--4 { display: none; }
  .mega__kolommen--bo .mega__vakken, .mega__kolommen { grid-template-columns: minmax(0, 1fr); }
  .form .knop { width: 100%; }
  .form__voet { justify-items: stretch; }
  .voet__rij { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  .kop__logo img { width: 96px; }
  .kop__balk { gap: 6px; }
  .knop--klein { padding: 8px 10px; font-size: .875rem; }
  .kop__menu { padding: 8px 9px; font-size: .875rem; gap: 4px; }
}

@media (max-width: 340px) {
  .kop__menu-tekst { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media print {
  .kop, .voet, .golf, .knop { display: none; }
}