/* LerenLand — huisstijl van de app, overgezet naar het web.
   Kleuren en schaduw komen uit src/theme.ts; lettertype is Nunito, lokaal geladen. */

@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:url(nunito-400.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url(nunito-700.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url(nunito-800.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:900;font-display:swap;src:url(nunito-900.woff2) format("woff2")}

:root{
  --lucht-1:#4FC3F7; --lucht-2:#81D4FA; --lucht-3:#B3E5FC; --lucht-4:#E1F5FE;
  --gras-1:#66BB6A; --gras-2:#388E3C;
  --goud:#FFD700; --goud-donker:#F0A500;
  --inkt:#1A1A2E; --grijs:#5E6471;
  --wit:#fff; --room:#FBEFD0; --room-tekst:#8A6516;
  --hout:#8B5A2B; --hout-donker:#5F3C1B;
  --paars:#5C7CFA; --groen:#0F847B;
  --rand:#E3EDF3;
  --hard:0 6px 0;
  --hoek:20px;
}

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

body{
  margin:0;
  font-family:Nunito,"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:17px; line-height:1.78; color:var(--inkt);
  background:var(--lucht-4);
  -webkit-font-smoothing:antialiased;
}

.binnen{max-width:880px;margin:0 auto;padding-left:22px;padding-right:22px}

/* ---------- lucht en gras ---------- */
.hemel{
  position:relative;
  background:linear-gradient(180deg,var(--lucht-1) 0%,var(--lucht-2) 42%,var(--lucht-3) 78%,var(--lucht-4) 100%);
  padding:46px 0 0;
  overflow:hidden;
}
.hemel .wolken{position:absolute;inset:0 0 auto;width:100%;height:230px;pointer-events:none}
.heuvels{display:block;width:100%;height:auto;margin-bottom:-1px}

/* ---------- hero ---------- */
.bordje{
  display:inline-block;background:var(--room);color:var(--room-tekst);
  font-weight:900;font-size:clamp(34px,7vw,54px);line-height:1.1;
  padding:12px 30px;border-radius:var(--hoek);
  box-shadow:var(--hard) rgba(138,101,22,.22);
  margin:0;
}
.hero{position:relative;text-align:center;padding-bottom:44px}
.hero .leus{
  font-weight:800;font-size:clamp(19px,3.4vw,25px);
  color:var(--inkt);margin:20px auto 12px;max-width:30ch;text-wrap:balance;
}
.hero .uitleg{
  font-size:18px;line-height:1.72;color:#26405c;margin:0 auto;max-width:50ch;
}
.merkjes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:32px 0 6px}
.merkje{
  background:var(--wit);border-radius:50px;padding:8px 17px;
  font-weight:800;font-size:14.5px;color:var(--inkt);
  box-shadow:0 3px 0 rgba(26,26,46,.12);
}
.merkje.goud{background:var(--goud);box-shadow:0 3px 0 var(--goud-donker)}

/* ---------- secties ---------- */
main{background:var(--lucht-4);padding-bottom:10px}
section{padding:78px 0 10px}
/* Zit de kop in een gekleurd blok, dan geeft dat blok al 40px lucht. */
section.inblok{padding-top:40px}
h2{
  font-weight:900;font-size:clamp(25px,4.4vw,33px);line-height:1.2;
  margin:56px 0 14px;text-wrap:balance;
}
h3{margin-top:40px}
/* Staat een kop bovenaan een sectie of blok, dan geeft de padding al lucht. */
h2:first-child, h3:first-child, .kop h2{margin-top:0}
.inleiding{color:var(--grijs);font-size:17px;margin:0 0 34px;max-width:56ch}
h3{font-weight:800;font-size:20px;margin-bottom:10px}
p{margin:0 0 22px;max-width:58ch}

/* ---------- kaarten ---------- */
.kaart{
  background:var(--wit);border-radius:var(--hoek);padding:30px 32px;
  box-shadow:var(--hard) rgba(26,26,46,.10);
}
.rooster{display:grid;gap:16px}
.rooster.drie{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rooster.twee{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* spelkaarten — gradients letterlijk uit src/theme.ts */
.spellen{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.spel{
  border-radius:var(--hoek);padding:24px 26px;color:var(--wit);
  box-shadow:var(--hard) rgba(26,26,46,.18);
  display:flex;flex-direction:column;
}
.spel h3{color:var(--wit);font-weight:900;font-size:21px;margin-bottom:4px}
.spel p{color:rgba(255,255,255,.96);margin:0 0 20px;font-size:15.5px;line-height:1.62}
.spel .groepen{
  align-self:flex-start;margin-top:auto;
  background:rgba(255,255,255,.22);
  border-radius:50px;padding:4px 13px;font-weight:800;font-size:13px;
}
.spel.reken{background:linear-gradient(135deg,#FF5C5C,#FF610E)}
.spel.tafels{background:linear-gradient(135deg,#506BE7,#764BA2)}
.spel.spelling{background:linear-gradient(135deg,#11998E,#0EA948)}
.spel.woorden{background:linear-gradient(135deg,#E751F9,#F5576C)}
.spel.avontuur{background:linear-gradient(135deg,#DA7D08,#B09100)}
@media (min-width:820px){ .spel.avontuur{grid-column:span 2} }

/* ---------- wezen ---------- */
.wezen{
  background:linear-gradient(160deg,#FFF6DA,#FFEDBE);
  border-radius:var(--hoek);padding:40px 36px 36px;
  box-shadow:var(--hard) var(--goud-donker);
}
.stadia{display:flex;flex-wrap:wrap;gap:11px;margin:22px 0 6px;padding:0;list-style:none}
.stadia li{
  background:var(--wit);border-radius:50px;padding:9px 18px;
  font-weight:800;font-size:14.5px;box-shadow:0 3px 0 rgba(240,165,0,.35);
}
.stadia li span{color:var(--room-tekst);font-weight:700}

/* ---------- schermen ---------- */
.schermen{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:start}
.scherm{margin:0;text-align:center}
.scherm img{
  width:100%;height:auto;display:block;border-radius:22px;
  border:5px solid var(--wit);
  box-shadow:var(--hard) rgba(26,26,46,.16);
}
.scherm figcaption{
  margin-top:11px;font-weight:800;font-size:15px;color:var(--inkt);
}
.scherm .bij{display:block;font-weight:400;font-size:14px;color:var(--grijs);margin-top:1px}
/* rij met de winkelvisuals: op de telefoon zijwaarts schuiven (5 nov 2026) */
.schermen.rij{grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:640px){
  .schermen.rij{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:0 18px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .schermen.rij::-webkit-scrollbar{display:none}
  .schermen.rij .scherm{flex:0 0 min(64%,280px);scroll-snap-align:center}
}

/* ---------- lijsten ---------- */
ul.punten{list-style:none;padding:0;margin:0}
ul.punten li{
  position:relative;padding-left:32px;margin-bottom:18px;max-width:58ch;
}
ul.punten li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:13px;height:13px;border-radius:50%;
  background:var(--gras-1);box-shadow:0 2px 0 var(--gras-2);
}
ul.punten.blauw li::before{background:var(--lucht-1);box-shadow:0 2px 0 #0288D1}

/* ---------- ouders ---------- */
.ouders{background:var(--wit);border-radius:var(--hoek);padding:40px 36px 36px;box-shadow:var(--hard) rgba(26,26,46,.10)}
.ouders .kop{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.slot{
  flex:none;width:38px;height:38px;border-radius:12px;background:var(--paars);
  display:grid;place-items:center;box-shadow:0 3px 0 #3D5BD9;
}
.slot svg{width:19px;height:19px}

/* ---------- contact ---------- */
.contact{text-align:center;padding:70px 0 8px}
a{color:#0277BD;font-weight:700}
a:hover{color:#01579B}
a:focus-visible{outline:3px solid var(--goud-donker);outline-offset:3px;border-radius:4px}
.mailknop{
  display:inline-block;background:var(--hout);color:var(--wit);text-decoration:none;
  font-weight:900;font-size:17px;padding:14px 28px;border-radius:16px;
  box-shadow:var(--hard) var(--hout-donker);
}
.mailknop:hover{color:var(--wit);filter:brightness(1.06)}

/* ---------- voet ---------- */
footer.voet{
  background:linear-gradient(180deg,var(--gras-1),var(--gras-2));
  color:#fff;padding:26px 0 30px;margin-top:34px;text-align:center;font-size:15px;
}
footer.voet a{color:#fff;text-decoration:underline}
footer.voet p{margin:0 auto;max-width:60ch}

/* ---------- documentpagina (privacy) ---------- */
.doc{background:var(--wit);border-radius:var(--hoek);padding:38px 40px;margin:40px 0;
     box-shadow:var(--hard) rgba(26,26,46,.10)}
.doc h2{font-size:22px;margin:52px 0 12px}
.doc h2:first-of-type{margin-top:34px}
.doc .datum{color:var(--grijs);font-weight:700;font-size:15px;margin-bottom:18px}
.terug{display:inline-block;margin:0 0 4px;font-weight:800;text-decoration:none}

@media (max-width:640px){
  body{font-size:16.5px}
  .binnen{padding-left:18px;padding-right:18px}
  .doc{padding:26px 22px}
  section{padding:56px 0 8px}
  section.inblok{padding-top:26px}
  .kaart,.ouders,.wezen{padding:24px 22px}
}