/*
 * Sintlijstje: publieke site met Sint-uitstraling (plan-v5 §16-§17).
 * Tokens = stijlgids §3 (v0.2, "intocht bij dag"). Figuren komen uit figuren.js; hier staat alleen hoe ze bewegen.
 */
:root {
  --papier: #FFFDF7;
  --papier-diep: #FFF1D6;
  --kaart: #FFFFFF;
  --warmwit: #FFF8EA;
  --hemel: #DCEFFF;
  --inkt: #1E1A33;
  --inkt-zacht: #4A4560;
  --sintrood: #C8102E;
  --sintrood-hover: #B00D27;
  --mijterrood: #8E0B22;
  --goud: #F2B705;
  --goud-zacht: #FFEBAD;
  --goud-donker: #D99A00;
  --piet-geel: #FFD23F;
  --piet-groen: #3DB35A;
  --piet-groen-donker: #1C7A38;
  --piet-blauw: #3A8EE6;
  --piet-blauw-donker: #1C5DB3;
  --piet-paars: #A98BE0;
  --groen-zacht: #DDF5E2;
  --f-display: 'Fraunces', Georgia, serif;
  --f-tekst: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --r-papier: 6px;
  --r-knop: 20px;
  --sch-geplakt: 0 1px 0 rgba(30, 26, 51, .10), 0 6px 12px -6px rgba(30, 26, 51, .30);
  --focus: 0 0 0 4px var(--papier), 0 0 0 8px var(--sintrood);
  --ritme: clamp(72px, 9vw, 128px);
  --ruis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .2 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.site {
  margin: 0;
  font-family: var(--f-tekst);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  color: var(--inkt);
  background: var(--warmwit) var(--ruis);
}
.site :focus { outline: none; }
.site :focus-visible { box-shadow: var(--focus); border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site h1, .site h2, .site h3 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
}
.site h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -.01em; }
.site h3 { font-size: 22px; line-height: 1.2; }
.site p { margin: 12px 0 0; text-wrap: pretty; }
.site main a:not(.knop):not(.spelkaart) { color: var(--mijterrood); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.binnen { width: min(1160px, 100% - 40px); margin-inline: auto; }

/* knoppen: Sint-rood met een dikke mijterrode drukrand (stijlgids §3.6) */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 24px;
  font: 700 18px/1.2 var(--f-tekst); color: #fff; text-decoration: none;
  background: var(--sintrood); border: 0; border-radius: var(--r-knop);
  box-shadow: 0 5px 0 var(--mijterrood);
  cursor: pointer; transition: transform 120ms, box-shadow 120ms;
}
.knop:hover { background: var(--sintrood-hover); }
.knop:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--mijterrood); }
.knop--licht { color: var(--inkt); background: var(--piet-geel); box-shadow: 0 5px 0 var(--goud-donker); }
.knop--licht:hover { background: #FFDB66; }
.knop--licht:active { box-shadow: 0 1px 0 var(--goud-donker); }
.knop--klein { min-height: 44px; padding: 8px 18px; font-size: 16px; box-shadow: 0 4px 0 var(--mijterrood); }
.knop svg { width: 28px; height: 28px; flex: none; }

/* ---------- Hero: de intocht bij dag ---------- */
.hemel-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(700px, 92vh, 860px);
  color: var(--inkt);
  background: var(--hemel);
  --grond: var(--hemel);
}
.hemel-hero::after {
  /* gescheurde onderrand naar het warmwit (de enige op deze pagina, stijlgids §4.3) */
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 22px; z-index: 2;
  background: var(--warmwit) var(--ruis);
  clip-path: polygon(0 60%, 4% 30%, 9% 70%, 15% 25%, 21% 65%, 26% 35%, 33% 75%, 39% 30%, 45% 60%, 52% 20%, 58% 70%, 64% 35%, 71% 65%, 77% 25%, 83% 60%, 89% 30%, 95% 70%, 100% 40%, 100% 100%, 0 100%);
}
.hero__scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; cursor: pointer; touch-action: manipulation; }
.hero__tekst {
  position: relative; z-index: 1;
  width: min(1240px, 100% - 32px); margin-inline: auto;
  padding: clamp(20px, 5vh, 64px) 0 0;
  pointer-events: none;
}
.hero__tekst > * { pointer-events: auto; max-width: 560px; }
.hero__tekst h1 {
  font-size: clamp(42px, 5.6vw, 76px); line-height: 1.0; letter-spacing: -.02em;
  color: var(--inkt);
}
.hero__lead { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; color: var(--inkt-zacht); max-width: 30em; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 28px !important; }
.hero__klein { font-size: 16px; color: var(--inkt-zacht); }
.hero__tip {
  position: absolute; z-index: 1; margin: 0; pointer-events: none;
  right: clamp(16px, 22vw, 340px); top: clamp(150px, 24vh, 230px);
  font: 500 20px/1.2 var(--f-display); font-variation-settings: "SOFT" 100;
  color: var(--mijterrood); transform: rotate(-4deg);
}
.hero__tip svg { display: block; width: 54px; height: 40px; margin: 4px 0 0 30px; }
@media (max-width: 720px) {
  /* op de gsm staat de tekening onder de tekst, niet erachter */
  .hemel-hero { min-height: 0; padding-bottom: 360px; }
  .hero__scene { top: auto; bottom: 0; height: 380px; }
  .hero__tip { display: none; }
}

/* scène-onderdelen */
.scene .twinkel { animation: twinkel 3s ease-in-out infinite; }
.scene .golf { animation: golf 6s linear infinite; }
@keyframes golf { to { transform: translateX(-80px); } }
.scene .wolk { animation: wolk 14s ease-in-out infinite alternate; }
@keyframes wolk { to { transform: translateX(-36px); } }
.scene .binnenvaren { animation: binnenvaren 7s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes binnenvaren { from { transform: translateX(-620px); } }
.scene .ronde { animation: ronde 26s linear infinite; }
@keyframes ronde {
  0% { transform: translate(944px, 167px); }
  44% { transform: translate(1018px, 167px); }
  50% { transform: translate(1018px, 167px); }
  94% { transform: translate(944px, 167px); }
  100% { transform: translate(944px, 167px); }
}
.scene .omdraai { transform-box: fill-box; transform-origin: 50% 50%; animation: omdraai 26s steps(1) infinite; }
@keyframes omdraai { 0%, 47% { transform: scaleX(1); } 47.01%, 97% { transform: scaleX(-1); } 97.01%, 100% { transform: scaleX(1); } }
.scene .piet-schouw { transition: transform .5s cubic-bezier(.34, 1.5, .64, 1); }
.scene .piet-schouw.op { transform: translateY(-88px); }
.scene .klik { cursor: pointer; }

/* spelkaarten: kleine lussen */
.kaart-boog { animation: kaart-boog 2.4s ease-in-out infinite; }
@keyframes kaart-boog { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 60% { transform: translate(-150px, -150px); opacity: 1; } 70%, 100% { transform: translate(-150px, -150px); opacity: 0; } }
.kaart-val { animation: kaart-val 2.4s ease-in infinite; }
@keyframes kaart-val { from { transform: translateY(-90px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(60px); opacity: 0; } }
.kaart-plof { animation: kaart-plof 3s ease-out infinite; }
@keyframes kaart-plof { 0% { transform: translateY(-60px); opacity: 0; } 25%, 85% { transform: translateY(0); opacity: 1; } 100% { opacity: 0; } }

/* ---------- Secties op warmwit ---------- */
.site .pagina-titel { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.04; }
.sectie { padding-block: var(--ritme) 0; }
.sectie:last-of-type { padding-bottom: 0; }
.sectie__kop { max-width: 34em; }
.sectie__kop p { font-size: 20px; color: var(--inkt-zacht); }

/* papieren blad met plakband */
.blad {
  position: relative;
  background: var(--papier) var(--ruis);
  border-radius: var(--r-papier);
  box-shadow: var(--sch-geplakt), 0 18px 36px -24px rgba(30, 26, 51, .45);
  padding: 32px 28px 28px;
}
.plakband {
  position: absolute; top: -13px; left: 50%; width: 96px; height: 26px;
  translate: -50% 0; rotate: var(--pr, -4deg);
  background: var(--pb, rgba(255, 235, 173, .9));
  clip-path: polygon(0 10%, 5% 0, 10% 12%, 15% 0, 20% 10%, 80% 10%, 85% 0, 90% 12%, 95% 0, 100% 10%, 100% 90%, 95% 100%, 90% 88%, 85% 100%, 80% 90%, 20% 90%, 15% 100%, 10% 88%, 5% 100%, 0 90%);
}

/* twee kanten van het boek */
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; margin-top: 48px; align-items: start; }
.twee .blad:first-child { rotate: -1deg; }
.twee .blad:last-child { rotate: .8deg; margin-top: 40px; }
.twee h3 { font-size: 26px; }
.twee ul { margin: 14px 0 0; padding-left: 0; list-style: none; }
.twee ul > li { position: relative; padding-left: 30px; margin-top: 8px; }
.twee ul > li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 12px; height: 12px; border: 3px solid var(--inkt); border-radius: 50%; background: var(--piet-geel); }
.twee ul > li:nth-child(4n+2)::before { background: var(--piet-groen); }
.twee ul > li:nth-child(4n+3)::before { background: var(--piet-blauw); }
.twee ul > li:nth-child(4n)::before { background: var(--sintrood); }
@media (max-width: 860px) { .twee { grid-template-columns: 1fr; } .twee .blad:last-child { margin-top: 0; } }

/* mini-plakboek (wat het kind ziet) */
.mini-boek {
  position: relative; aspect-ratio: 4 / 3; margin-bottom: 22px;
  background: var(--kaart); border: 2px solid var(--inkt); border-radius: 6px;
  box-shadow: 3px 3px 0 var(--sintrood), 0 20px 36px -22px rgba(30, 26, 51, .4);
  overflow: hidden;
}
.mini-boek > * { position: absolute; }
.mini-kaart {
  width: 26%; padding: 8px 6px 6px; text-align: center;
  background: var(--papier); border-radius: 6px; box-shadow: var(--sch-geplakt);
  font: 700 14px/1.1 var(--f-tekst);
}
.mini-kaart svg { display: block; width: 72%; height: auto; margin: 0 auto 4px; }
.mini-boek .figuur { height: auto; }

/* mail (wat de ouder krijgt) */
.mail {
  margin-bottom: 22px; border: 2px solid var(--inkt); border-radius: 6px; background: #fff;
  box-shadow: 3px 3px 0 var(--piet-blauw), 0 20px 36px -22px rgba(30, 26, 51, .4); font-size: 16px; overflow: hidden;
}
.mail__kop { padding: 12px 16px; border-bottom: 2px solid var(--inkt); background: var(--goud-zacht); }
.mail__kop strong { display: block; font-size: 17px; }
.mail__kop span { color: var(--inkt-zacht); }
.mail ol { margin: 0; padding: 8px 16px 12px 40px; }
.mail li { padding: 8px 0; border-bottom: 2px dashed #F0D99A; }
.mail li:last-child { border-bottom: 0; }
.mail .winkels { display: block; font-size: 15px; color: var(--inkt-zacht); }
.mail .winkels u { color: var(--sintrood); text-decoration-thickness: 2px; font-weight: 700; }
.mail .nieuw { margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: var(--piet-geel); font-size: 13px; font-weight: 700; }

/* spelletjes */
.spel-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 52px; }
@media (max-width: 960px) { .spel-rij { grid-template-columns: 1fr; max-width: 520px; } }
.spelkaart {
  position: relative; display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  background: var(--papier) var(--ruis); border-radius: var(--r-papier);
  box-shadow: var(--sch-geplakt), 0 18px 36px -24px rgba(30, 26, 51, .45);
  transition: transform 240ms cubic-bezier(.34, 1.5, .64, 1);
}
.spelkaart:nth-child(1) { rotate: -1.5deg; }
.spelkaart:nth-child(2) { rotate: 1deg; translate: 0 18px; }
.spelkaart:nth-child(3) { rotate: -.6deg; }
.spelkaart:hover { transform: translateY(-6px) rotate(.6deg); }
.spelkaart__beeld { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--hemel); border-radius: var(--r-papier) var(--r-papier) 0 0; --grond: var(--hemel); }
.spelkaart__tekst { padding: 18px 22px 24px; }
.spelkaart__tekst p { margin-top: 6px; color: var(--inkt-zacht); }
.spelkaart__beeldvak { position: relative; display: block; }
.spelkaart__speel {
  position: absolute; right: 18px; bottom: -34px;
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: var(--sintrood); box-shadow: 0 5px 0 var(--mijterrood);
}
.spelkaart:nth-child(2) .spelkaart__speel { background: var(--piet-groen-donker); box-shadow: 0 5px 0 #145A29; }
.spelkaart:nth-child(3) .spelkaart__speel { background: var(--piet-blauw-donker); box-shadow: 0 5px 0 #134283; }
.spelkaart__speel svg { width: 34px; height: 34px; }
.ouder-noot { margin-top: 72px; max-width: 40em; }

/* delen met oma */
.delen { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .delen { grid-template-columns: 1fr; } }
.delen ul { margin: 20px 0 0; padding: 0; list-style: none; }
.delen li { display: flex; gap: 14px; margin-top: 14px; }
.delen li svg { flex: none; width: 40px; height: 40px; }
.gsm {
  width: min(340px, 100%); margin-inline: auto; padding: 18px 14px 26px;
  background: var(--piet-blauw-donker); border: 2px solid var(--inkt); border-radius: 38px; box-shadow: 6px 7px 0 var(--piet-geel), 0 30px 48px -26px rgba(30, 26, 51, .45); rotate: 2deg;
}
.gsm__scherm { padding: 16px 12px 28px; border-radius: 26px; background: #F3EEE3; }
.gsm__naam { margin: 0 0 14px; text-align: center; font: 700 15px/1.2 var(--f-tekst); color: var(--inkt-zacht); }
.bubbel { max-width: 88%; margin: 10px 0 0 auto; padding: 8px 10px 10px; border-radius: 14px 14px 4px 14px; background: #D8F0C9; font-size: 15px; line-height: 1.35; box-shadow: 0 1px 0 rgba(30, 26, 51, .15); }
.bubbel--in { margin: 12px auto 0 0; border-radius: 14px 14px 14px 4px; background: #fff; }
.preview { overflow: hidden; margin-bottom: 8px; border-radius: 8px; background: rgba(255, 255, 255, .7); }
.preview img { display: block; width: 100%; height: auto; }
.preview p { margin: 0 !important; padding: 6px 8px 8px; font-size: 13px; line-height: 1.3; }
.preview strong { display: block; font-size: 14px; }
.preview span { color: var(--inkt-zacht); }

/* stappen (echt een volgorde): Sint-rood, Piet-blauw, Piet-groen */
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: stap; }
@media (max-width: 860px) { .stappen { grid-template-columns: 1fr; } }
.stappen li { counter-increment: stap; }
.stappen li::before {
  content: counter(stap); display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px;
  font: 600 30px/1 var(--f-display); color: #fff; background: var(--sintrood); border-radius: 50%;
  box-shadow: 3px 3px 0 var(--inkt); rotate: -6deg;
}
.stappen li:nth-child(2)::before { background: var(--piet-blauw-donker); rotate: 4deg; }
.stappen li:nth-child(3)::before { background: var(--piet-groen-donker); }
.stappen p { color: var(--inkt-zacht); }

/* vragen */
/* Vragen met een gezette schoen ernaast (alleen breed genoeg) */
.vragen-blok { display: grid; grid-template-columns: minmax(0, 760px) 1fr; gap: 48px; align-items: end; }
.schoen-gezet { position: relative; height: 220px; max-width: 320px; }
.schoen-gezet .figuur { position: absolute; height: auto; }
.schoen-gezet__schoen { left: 6%; bottom: 0; width: 72%; rotate: -3deg; }
.schoen-gezet__wortel { left: 52%; bottom: 46%; width: 34%; rotate: 18deg; }
.schoen-gezet__noot { width: 9%; }
.schoen-gezet__noot--1 { left: 0; bottom: 2%; }
.schoen-gezet__noot--2 { left: 82%; bottom: 4%; width: 8%; }
.schoen-gezet__noot--3 { left: 90%; bottom: 14%; width: 7%; }
@media (max-width: 960px) { .vragen-blok { grid-template-columns: 1fr; } .schoen-gezet { display: none; } }
.vragen { max-width: 760px; margin-top: 36px; }
.vragen details { border-top: 3px dashed var(--goud-donker); padding: 6px 0; }
.vragen details:last-child { border-bottom: 3px dashed var(--goud-donker); }
.vragen summary { display: flex; align-items: center; min-height: 60px; cursor: pointer; font: 600 21px/1.3 var(--f-display); font-variation-settings: "SOFT" 100; list-style: none; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; margin-left: auto; padding-left: 16px; font: 700 28px/1 var(--f-tekst); color: var(--sintrood); }
.vragen details[open] summary::after { content: "–"; }
.vragen details p { margin: 0 0 16px; max-width: 40em; }

/* ---------- Rustig: geen lussen, alles staat stil (stijlgids §3.7) ---------- */
@media (prefers-reduced-motion: reduce) {
  .scene *, .spelkaart { animation: none !important; transition: none !important; }
  .scene .ronde { transform: translate(980px, 167px); }
}

/* ---------- Wervende accenten (v2): kicker, grote knop, zekerheden, slotband ---------- */
.hero__kicker, .sectie__kicker {
  margin: 0 0 12px !important; font: 700 14px/1.2 var(--f-tekst); letter-spacing: .12em; text-transform: uppercase; color: var(--mijterrood);
}
.knop--groot { min-height: 64px; padding: 14px 30px; font-size: 20px; }
.knop--groot svg { width: 24px; height: 24px; transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.knop--groot:hover svg { transform: translateX(4px); }
.hero__knoppen { align-items: center; }
.site .hero__tweede { font-weight: 700; color: var(--inkt); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--goud-donker); }
.site .hero__tweede:hover { color: var(--mijterrood); }
.hero__zeker { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 16px; font-weight: 600; color: var(--inkt-zacht); }
.hero__zeker li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255, 253, 247, .92); box-shadow: 0 0 0 1.5px rgba(30, 26, 51, .18); color: var(--inkt); }
.hero__zeker li::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--piet-groen) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 L4.8 9 L10 3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 1.5px var(--inkt);
}
.hoe-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 40px !important; }
.hoe-cta span { font-size: 16px; color: var(--inkt-zacht); }

.slotband { margin-top: var(--ritme); padding-block: clamp(48px, 7vw, 88px); background: var(--sintrood); color: #fff; position: relative; }
.slotband::before {
  /* gekartelde rand, als een afgescheurd stuk inpakpapier */
  content: ""; position: absolute; inset: -14px 0 auto 0; height: 15px; background: var(--sintrood);
  clip-path: polygon(0 100%, 2% 20%, 4% 100%, 6% 30%, 8% 100%, 10% 10%, 12% 100%, 14% 35%, 16% 100%, 18% 15%, 20% 100%, 22% 30%, 24% 100%, 26% 20%, 28% 100%, 30% 10%, 32% 100%, 34% 30%, 36% 100%, 38% 15%, 40% 100%, 42% 25%, 44% 100%, 46% 10%, 48% 100%, 50% 30%, 52% 100%, 54% 20%, 56% 100%, 58% 10%, 60% 100%, 62% 30%, 64% 100%, 66% 15%, 68% 100%, 70% 25%, 72% 100%, 74% 10%, 76% 100%, 78% 30%, 80% 100%, 82% 20%, 84% 100%, 86% 10%, 88% 100%, 90% 30%, 92% 100%, 94% 15%, 96% 100%, 98% 25%, 100% 100%);
}
.slotband__binnen { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 24px 48px; align-items: center; }
.site .slotband h2 { color: #fff; font-size: clamp(32px, 4.4vw, 54px); }
.slotband p { color: rgba(255, 255, 255, .9); font-size: 19px; }
.slotband__actie { display: grid; gap: 10px; justify-items: start; margin: 0 !important; }
.slotband__actie span { font-size: 15px; color: rgba(255, 255, 255, .85); }
.slotband .knop { color: var(--inkt); background: var(--piet-geel); box-shadow: 0 5px 0 var(--goud-donker); }
.slotband .knop:hover { background: #FFDB66; }
.slotband .knop:focus-visible { box-shadow: 0 0 0 4px var(--sintrood), 0 0 0 8px #fff; }
@media (max-width: 860px) {
  .slotband__binnen { grid-template-columns: 1fr; }
  .slotband .knop { width: 100%; }
  .slotband__actie { justify-items: stretch; }
}
@media (max-width: 720px) {
  .hero__knoppen .knop--groot { width: 100%; }
  .hero__zeker { font-size: 15px; }
}
@media (min-width: 721px) {
  /* v2: tekstblok compacter, zodat knop en zekerheden boven het water blijven */
  .hemel-hero { min-height: clamp(760px, 98vh, 900px); }
  .hero__tekst h1 { font-size: clamp(42px, 5vw, 68px); }
  .hero__tekst > .hero__lead { max-width: 600px; }
  .hero__tekst > .hero__zeker { max-width: 780px; }
  .site .hero__tweede { padding: 6px 12px; border-radius: 999px; background: rgba(255, 253, 247, .92); }
}