/* ============================================================
   SpeurtochtMaker.nl — homepage
   ============================================================ */

/* ---------- Lettertypes (lokaal gehost, geen Google-CDN) ---------- */
@font-face {
  font-family: 'Fredoka';
  src: url('/static/fonts/fredoka-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  src: url('/static/fonts/fredoka-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  src: url('/static/fonts/nunito-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  src: url('/static/fonts/nunito-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Ontwerptokens ---------- */
:root {
  --navy:        #16386E;
  --roze:        #D8156F;
  --roze-diep:   #B60F5B;
  --roze-zacht:  #FDE9F2;
  --creme:       #FBF1DC;
  --creme-diep:  #F5E5C4;
  --perkament:   #F6E7C6;
  --wit:         #FFFFFF;
  --inkt:        #33302B;
  --inkt-zacht:  #6B6459;
  --rand:        #EADFC7;

  --blauw:       #22688B;
  --groen:       #2F7A43;
  --oranje:      #A65D08;
  --paars:       #7B4BB8;

  --straal:      16px;
  --straal-groot:24px;
  --schaduw:     0 2px 4px rgba(90, 68, 30, .06), 0 10px 26px -12px rgba(90, 68, 30, .22);
  --schaduw-op:  0 3px 8px rgba(90, 68, 30, .09), 0 20px 44px -16px rgba(90, 68, 30, .3);

  --breed:       1240px;
  --kop-font:    'Fredoka', 'Segoe UI', system-ui, sans-serif;
  --tekst-font:  'Nunito', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  /* Behang met een motief uit elk thema: kroon, anker, palmblad,
     dinopoot, hoefijzer, plus kaartkruisjes en stippelroutes. */
  background-color: var(--creme);
  background-image: url('/static/img/patroon.svg');
  background-size: 300px 300px;
  color: var(--inkt);
  font-family: var(--tekst-font);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--kop-font); font-weight: 600; line-height: 1.16; margin: 0; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.omhulsel { width: min(100% - 2.5rem, var(--breed)); margin-inline: auto; }
.omhulsel--smal { width: min(100% - 2.5rem, 820px); }

.fijn { font-size: .82rem; color: var(--inkt-zacht); line-height: 1.45; }

.vw { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Een klasse met een eigen display (.knop is inline-flex) wint het van de
   [hidden] uit de browser zelf. Dan blijft een verborgen knop toch staan.
   Daarom hier één keer hard gezet. */
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 12px 0; }
.skip:focus { left: 0; }

:where(a, button, input, summary):focus-visible { outline: 3px solid var(--roze); outline-offset: 3px; border-radius: 6px; }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--kop-font); font-weight: 600; font-size: 1rem;
  padding: .78rem 1.5rem; border-radius: 999px; border: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.knop--roze {
  background: var(--roze); color: #fff;
  /* De gloed onder de knop volgt de knopkleur, zodat hij op een themapagina
     niet roze blijft nagloeien. */
  box-shadow: 0 3px 0 var(--roze-diep),
              0 12px 24px -14px color-mix(in srgb, var(--roze-diep) 90%, transparent);
}
.knop--roze:hover { background: var(--roze-diep); transform: translateY(-2px); }
.knop--roze:active { transform: translateY(1px); box-shadow: 0 0 0 var(--roze-diep); }
.knop--groot { font-size: 1.14rem; padding: .95rem 1.9rem; }
.knop__ster { font-size: 1.05em; line-height: 1; }

.knop--omlijnd {
  background: var(--wit); color: var(--navy);
  border: 2.5px solid var(--rand);
}
.knop--omlijnd:hover { border-color: var(--roze); color: var(--roze); transform: translateY(-2px); }
.knop--omlijnd svg { margin-top: 1px; }

/* ---------- Header ---------- */
.kop {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--rand), 0 4px 18px -12px rgba(90, 68, 30, .5);
}
/* De balk kleurt mee met het thema in de carousel. Het wit eronder blijft
   staan, zodat de tekst en de knop altijd goed leesbaar blijven. */
.kop::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--thema-tint, transparent);
  opacity: .62;
  transition: background-color .7s ease;
}
.kop__binnen { position: relative; display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }

.merk { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; flex: none; }
/* Het logo is rond en vierkant aangeleverd; vandaar gelijke breedte en hoogte.
   Op 56 pixels is de tekening nog te herkennen; kleiner wordt het een vlekje. */
.merk__teken { width: 56px; height: 56px; flex: none; }
.merk__naam { font-family: var(--kop-font); font-weight: 700; font-size: 1.5rem; color: var(--navy); letter-spacing: -.02em; }
.merk__naam em { font-style: normal; color: var(--roze); }
.merk__naam small { font-size: .58em; font-weight: 600; color: var(--inkt-zacht); }

/* De tussenruimte is 1.7rem geweest en daarna 1.25rem. Met het zevende item
   (Seizoenstochten) paste de kopregel opnieuw niet: gemeten in de browser had
   hij 1347 pixels nodig terwijl het menu al vanaf 1180 werd getoond. Nu 1rem,
   en het eerste item heet "Speurtochten" in plaats van "Alle speurtochten" --
   samen scheelt dat 56 pixels. */
.nav { display: flex; gap: 1rem; margin-inline: auto; font-weight: 700; font-size: .95rem; }
/* Zonder nowrap breekt 'Alle speurtochten' bij een smal venster in losse
   woorden onder elkaar, en dan wordt de hele kopregel vier regels hoog. */
.nav a { text-decoration: none; color: var(--navy); padding: .35rem 0;
         border-bottom: 2.5px solid transparent; white-space: nowrap; }
.nav a:hover { border-bottom-color: var(--roze); }

.kop__knop { flex: none; padding: .68rem 1.3rem; font-size: .96rem; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(1.8rem, 3.4vw, 2.6rem) 0 clamp(1.2rem, 2.4vw, 1.8rem); overflow: hidden; }

/* Zachte kleurgloed achter de hero die meekleurt met het thema in beeld.
   De kleur wordt door site.js op --thema-tint gezet bij elke diawissel. */
.hero::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: -12%; top: -45%; width: 92%; height: 128%;
  background: var(--thema-tint, transparent);
  border-radius: 50%;
  filter: blur(90px);
  opacity: .95;
  transition: background-color .7s ease;
}

/* minmax(0, ...) en niet 1fr. Een kale 1fr betekent minmax(auto, 1fr), en
   auto is de min-content-breedte van de inhoud. Een dia in de carrousel kan
   niet smaller dan zijn eigen inhoud, dus rekte die de kolom op tot 523 px
   in een venster van 375 — waarna de hele hero en alles eronder scheef
   stond en de rechterkant van het scherm afviel. Met minmax(0, ...) mag de
   kolom wél krimpen. */
.hero__raster { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); gap: clamp(1.5rem, 2.6vw, 2.4rem); align-items: center; }

.hero h1 {
  font-size: clamp(1.95rem, 3.55vw, 2.8rem);
  font-weight: 700; color: var(--navy); letter-spacing: -.015em;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--roze); }

.hero .lead { margin-top: 1.1rem; font-size: 1.02rem; color: var(--inkt-zacht); max-width: 44ch; }

/* Vier kenmerken met gekleurde bollen */
.kenmerken { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.7rem; }
.kenmerken li { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 84px; text-align: center; }
.kenmerken__bol {
  width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center; color: #fff;
}
.kenmerken__bol svg { width: 24px; height: 24px; }
.kenmerken__bol--roze  { background: var(--roze); }
.kenmerken__bol--blauw { background: var(--blauw); }
.kenmerken__bol--groen { background: var(--groen); }
.kenmerken__bol--paars { background: var(--paars); }
.kenmerken__tekst { font-family: var(--kop-font); font-weight: 600; font-size: .82rem; color: var(--navy); line-height: 1.25; }

.hero__actie { display: flex; align-items: center; gap: .4rem; margin-top: 1.9rem; }
.pijltje { width: 78px; height: 40px; flex: none; margin-bottom: -14px; }

/* ---------- Carousel met thema-illustratie ---------- */
.carousel { position: relative; }
.carousel__spoor {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: var(--straal-groot);
}
.carousel__spoor::-webkit-scrollbar { display: none; }

.dia { position: relative; flex: 0 0 100%; scroll-snap-align: center; }

/* De hele illustratie is een link naar de bestelpagina van dat thema. Dat is
   waar bezoekers toch al op klikken. */
.dia__link { display: block; border-radius: var(--straal-groot); }
.dia__link:focus-visible {
  outline: 3px solid var(--roze); outline-offset: 5px;
}

.dia__beeld {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--straal-groot);
  border: 5px solid var(--wit);
  box-shadow: var(--schaduw-op);
  background: var(--creme-diep);
  transition: transform .25s ease, box-shadow .25s ease;
}
.dia__link:hover .dia__beeld {
  transform: scale(1.008);
  box-shadow: 0 18px 40px -14px rgba(22, 56, 110, .45);
}
@media (prefers-reduced-motion: reduce) {
  .dia__beeld { transition: none; }
  .dia__link:hover .dia__beeld { transform: none; }
}

/* De banner ligt bovenop de illustratie. Zonder deze regel vangt hij de klik
   op en gebeurt er precies in het midden van de dia niets. */
.dia__banner { pointer-events: none; }

/* Naambanner: laat meteen zien dat de PDF op naam gaat.

   Waar hij staat verschilt per dia, want elke illustratie heeft de gezichten
   ergens anders. Standaard linksboven-ish; een dia die dat niet verdraagt zet
   --banner-links of --banner-boven in zijn eigen style-attribuut. Meet het na
   in de browser voordat je een getal kiest: de banner is bij het ene thema
   breder dan bij het andere, doordat een lang bijschrift op twee regels valt. */
.dia__banner {
  position: absolute; top: var(--banner-boven, 5%); left: var(--banner-links, 46%);
  transform: translateX(-50%) rotate(-1.4deg);
  background: var(--perkament);
  border: 4px solid #D9BE8A;
  border-radius: 12px;
  box-shadow: 0 8px 22px -6px rgba(70, 50, 20, .5);
  padding: .7rem 2rem .8rem;
  text-align: center; max-width: 62%;
}
.dia__banner strong {
  display: block; font-family: var(--kop-font); font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.02;
  /* De voorbeeldnaam krijgt de kleur van het thema dat in beeld staat */
  color: var(--accent, var(--roze));
}
.dia__banner span {
  display: block; font-family: var(--kop-font); font-weight: 600;
  font-size: clamp(.82rem, 1.35vw, 1.1rem); color: var(--navy); line-height: 1.2;
}

.carousel__bediening { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.1rem; }
.carousel__pijl {
  width: 44px; height: 44px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: var(--wit); color: var(--navy);
  border: 2px solid var(--rand); box-shadow: var(--schaduw);
  cursor: pointer; transition: transform .18s ease, border-color .18s ease;
}
.carousel__pijl svg { width: 20px; height: 20px; }
.carousel__pijl:hover { border-color: var(--roze); transform: scale(1.07); }

.carousel__stippen { display: flex; gap: .5rem; }
.carousel__stippen button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px;
  background: #D9C9A8; cursor: pointer; transition: all .22s ease;
}
.carousel__stippen button:hover { background: #BCA57C; }
.carousel__stippen button[aria-selected="true"] { width: 30px; background: var(--roze); }

/* ---------- Secties en panelen ---------- */
.sectie { padding: clamp(.7rem, 1.4vw, 1.1rem) 0; }
.sectie:last-of-type { padding-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }

.paneel {
  background: var(--wit);
  border: 2px solid var(--rand);
  border-radius: var(--straal-groot);
  box-shadow: var(--schaduw);
  padding: clamp(1.4rem, 2.6vw, 2rem);
}
.paneel--creme { background: var(--creme-diep); }
.paneel--blauw { background: var(--blauw); border-color: #1A5271; color: #EAF4F9; }
.paneel--midden { text-align: center; }
.paneel__lead { margin-top: .7rem; color: var(--inkt-zacht); }

.titel { font-size: clamp(1.25rem, 2.1vw, 1.55rem); color: var(--navy); }
.titel--midden { text-align: center; }
.titel--wit { color: #fff; text-align: center; }

/* ---------- Themakaarten ---------- */
.themas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 1.3rem; }

.thema {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  text-decoration: none; text-align: center;
  background: var(--wit);
  border: 2.5px solid var(--rand); border-radius: var(--straal);
  padding: .8rem .7rem 1rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.thema:hover { transform: translateY(-4px); box-shadow: var(--schaduw-op); border-color: var(--accent); }
.thema--live { border-color: var(--accent); }

.thema__lijst { display: block; width: 100%; border-radius: 10px; overflow: hidden; border: 2px solid var(--rand); }
.thema__lijst img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Op /uitnodigingen/ staat de uitnodiging zelf op het kaartje, en die is
   staand. Zonder deze regel snijdt object-fit: cover er de halve kaart af.
   De verhouding is die van het bestand (560 x 819), zodat er niets weg hoeft. */
.thema__lijst--staand img { aspect-ratio: 560 / 819; }

.thema h3 { font-size: .98rem; color: var(--navy); hyphens: auto; }

/* De knop onderaan de kaart, niet vlak onder de titel. De ene themanaam
   past op één regel en de andere op twee ('Prinsessenavontuur' naast
   'Piratenschat'), en dan staan de knoppen in dezelfde rij op verschillende
   hoogtes. Met auto-marge erboven duwt de knop zichzelf naar de onderkant
   en liggen ze weer op één lijn. De kaarten zelf zijn al even hoog: dat
   doet het raster.
   Op een breed scherm valt het nauwelijks op, op een telefoon staan de
   kaarten twee naast elkaar en zie je het meteen. */
.thema__knop { margin-top: auto; }
.thema h3 span { font-size: 1.05em; }

.thema__knop {
  font-family: var(--kop-font); font-weight: 600; font-size: .86rem;
  color: #fff; background: var(--accent);
  padding: .38rem 1rem; border-radius: 999px; margin-top: auto;
}
.thema__knop--stil { opacity: .82; }

.themas__meer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .6rem 1rem; margin-top: 1.5rem; text-align: center;
}

/* ---------- Overzichtspagina ---------- */
.themas--overzicht { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.themas--overzicht .thema { padding: .9rem .85rem 1.1rem; }
.themas--overzicht .thema h3 { font-size: 1.08rem; }
.thema__uitleg { font-size: .9rem; color: var(--inkt-zacht); line-height: 1.45; }
.thema__meta { font-size: .8rem; color: var(--inkt-zacht); }

.binnenkort-melding {
  margin-top: 1.4rem; padding: 1.1rem 1.3rem;
  background: var(--creme); border: 2px dashed var(--rand); border-radius: var(--straal);
  text-align: center;
}

/* ---------- Drieluik ---------- */
.drieluik { display: grid; grid-template-columns: 1.1fr 1.5fr 1fr; gap: 1.2rem; align-items: stretch; }
.drieluik > .paneel { display: flex; flex-direction: column; }

/* Stappen (blauw paneel) — twee bij twee, anders wordt de tekst onleesbaar
   smal in een kolom van een derde van de pagina. */
.stappen {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 1rem; margin: 1.6rem 0; flex: 1;
  align-content: center; position: relative;
}
.stappen::before {
  content: ''; position: absolute; left: 8%; right: 8%; top: 50%;
  border-top: 2.5px dashed rgba(255, 255, 255, .35);
}
.stappen li { display: flex; flex-direction: column; align-items: center; gap: .7rem; position: relative; }
.stappen__bol {
  width: 68px; height: 68px; border-radius: 999px; background: var(--wit);
  display: grid; place-items: center; position: relative;
  box-shadow: 0 5px 14px -4px rgba(0, 0, 0, .45);
}
.stappen__bol svg { width: 34px; height: 34px; }
.stappen__bol b {
  position: absolute; top: -8px; left: -8px;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--roze); color: #fff;
  font-family: var(--kop-font); font-weight: 700; font-size: .92rem;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .35);
}
.stappen p { font-size: .92rem; line-height: 1.4; text-align: center; text-wrap: balance; }

/* Voorbeeld-PDF */
#voorbeeld { justify-content: center; }
.pdf { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.5rem; }
.pdf__blad { margin: 0; }
/* Echte pagina's uit de PDF. Staand en liggend door elkaar, dus de hoogte
   volgt de afbeelding en de onderkanten worden uitgelijnd. */
.blad {
  display: block; width: 100%; height: auto;
  background: var(--wit);
  border: 1.5px solid var(--rand); border-radius: 7px;
  box-shadow: 0 4px 12px -3px rgba(90, 68, 30, .4);
}
.pdf__blad { display: flex; flex-direction: column; justify-content: flex-end; }
.blad--breed { align-self: center; }
.blad__kop { font-family: var(--kop-font); font-weight: 600; font-size: .68rem; color: var(--navy); text-align: center; line-height: 1.2; }
.blad .regel { display: block; width: 88%; height: 3px; border-radius: 2px; background: #E4DCCB; }
.blad .regel--kort { width: 58%; }
.blad--voorblad { padding: 0; gap: 0; }
.blad--voorblad img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.blad--voorblad b { font-family: var(--kop-font); font-weight: 700; font-size: .92rem; color: var(--roze); margin-top: .45rem; }
.blad--voorblad i { font-style: normal; font-family: var(--kop-font); font-size: .58rem; color: var(--navy); text-align: center; padding: 0 .35rem; line-height: 1.25; }
.blad__merk { font-size: 1.1rem; margin: .15rem 0; }
.blad--diploma { border-color: #E0C88E; background: #FFFCF4; }
.blad__naam { font-style: normal; font-family: var(--kop-font); font-weight: 700; font-size: .92rem; color: var(--roze); }
/* Op het diploma staat een open regel: ouders vullen de namen van alle
   kinderen op het feestje zelf in. */
.blad__naamregel { display: block; width: 72%; border-bottom: 1.5px dotted var(--navy); margin: .5rem 0 .35rem; }
.blad__zegel { width: 16px; height: 16px; border-radius: 999px; background: var(--roze); opacity: .8; margin-top: auto; }
.pdf__blad figcaption { font-size: .78rem; color: var(--inkt-zacht); text-align: center; margin-top: .5rem; }
.pdf__fijn { padding-top: 1.2rem; text-align: center; }

/* Kopen */
.paneel--kopen { text-align: center; }
.vinkjes { margin: 1.1rem 0 1.3rem; display: grid; gap: .42rem; text-align: left; }
.vinkjes li { position: relative; padding-left: 1.6rem; font-size: .92rem; }
.vinkjes li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 9px; height: 5px; border-left: 2.4px solid var(--groen); border-bottom: 2.4px solid var(--groen);
  transform: rotate(-45deg);
}
.prijs { font-family: var(--kop-font); font-weight: 700; font-size: 2.1rem; color: var(--roze); margin-top: .8rem; line-height: 1; }
.paneel--kopen .fijn { margin-top: .4rem; }
.paneel--kopen .knop { margin-top: auto; }

/* ---------- Vragen ---------- */
/* align-items: start is hier geen detail. Zonder die regel rekt een vakje mee
   met zijn buurman in dezelfde rij: klap je links een lang antwoord open, dan
   wordt het dichte vakje rechts even hoog en staat daar een leeg crèmekleurig
   blok. Elk vakje moet zo hoog zijn als zijn eigen inhoud. */
.vragen {
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .9rem;
  margin-top: 1.3rem; align-content: start; align-items: start;
}
.vragen details { background: var(--creme); border: 2px solid var(--rand); border-radius: var(--straal); padding: 0 1.2rem; }
.vragen summary {
  font-family: var(--kop-font); font-weight: 600; font-size: 1rem; color: var(--navy);
  padding: .9rem 2rem .9rem 0; cursor: pointer; list-style: none; position: relative;
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after {
  content: ''; position: absolute; right: .2rem; top: 1.32rem;
  width: 9px; height: 9px; border-right: 2.4px solid var(--roze); border-bottom: 2.4px solid var(--roze);
  transform: rotate(45deg); transition: transform .2s ease;
}
.vragen details[open] summary::after { transform: rotate(225deg); top: 1.55rem; }
.vragen details p { padding-bottom: 1rem; color: var(--inkt-zacht); font-size: .94rem; }

/* ---------- Nieuwsbrief ---------- */
/* ---------- Recensies ---------- */

.recensie__cijfer {
  font-family: var(--kop-font); font-weight: 700; font-size: 1.5rem;
  color: var(--navy); margin: .6rem 0 0;
}
.recensie__leeg { max-width: 56ch; margin: 1.2rem auto 0; color: var(--inkt-zacht); }

.recensies {
  display: grid; gap: 1rem; margin: 1.6rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  /* Zonder dit rekt een lange recensie zijn buren mee omhoog. */
  align-items: start;
  text-align: left;
}
.recensie {
  margin: 0; padding: 1.1rem 1.2rem;
  background: var(--creme); border: 1px solid var(--rand);
  border-left: 5px solid var(--kleur, var(--roze));
  border-radius: 14px; box-shadow: var(--schaduw);
}
.recensie__sterren { color: var(--kleur, var(--roze)); letter-spacing: .1em; }
.recensie__tekst { margin: .5rem 0 .9rem; quotes: none; }
.recensie__wie { display: grid; gap: .1rem; }
.recensie__wie strong { font-family: var(--kop-font); color: var(--navy); }
.recensie-form { display: grid; gap: .8rem; margin: 1.6rem auto 1rem; max-width: 46rem; text-align: left; }
.recensie-form__rij { display: flex; flex-wrap: wrap; gap: .6rem; }
.recensie-form input[type="text"],
.recensie-form select,
.recensie-form textarea {
  padding: .7rem .9rem; font: inherit;
  background: var(--wit); border: 2px solid var(--rand); border-radius: 12px;
  color: var(--inkt); min-width: 0;
}
.recensie-form__rij input[type="text"] { flex: 2 1 11rem; }
.recensie-form__rij select { flex: 1 1 9rem; }
.recensie-form textarea { width: 100%; resize: vertical; }

.recensie-form__sterren { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.recensie-form__sterren legend { float: left; padding: 0; margin-right: .6rem; font-weight: 700; color: var(--navy); }
/* De sterren staan van 5 naar 1 in de HTML, zodat ~ hieronder de sterren
   links van de aangewezene kan inkleuren. Op het scherm draaien we ze terug. */
.recensie-form__sterren label { display: inline-flex; cursor: pointer; }
.recensie-form__sterren input { position: absolute; opacity: 0; width: 0; height: 0; }
.recensie-form__sterren span {
  display: inline-block; width: 2.1rem; height: 2.1rem; line-height: 2.1rem;
  text-align: center; border: 2px solid var(--rand); border-radius: 999px;
  font-family: var(--kop-font); font-weight: 700; color: var(--inkt-zacht);
}
.recensie-form__sterren input:checked + span {
  background: var(--roze); border-color: var(--roze); color: #fff;
}
.recensie-form__sterren input:focus-visible + span { outline: 3px solid var(--roze); outline-offset: 3px; }

.recensie-form__akkoord { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.recensie-form__akkoord input { margin-top: .25rem; flex: none; }
.recensie-form__dank { margin: 1.6rem 0 1rem; color: var(--groen); font-weight: 700; }
.recensie-form .veld__fout:empty { display: none; }

.recensie__knop { margin: 1.6rem 0 1rem; }

.nieuws__melding { margin-top: 1rem; font-weight: 700; color: var(--groen); }
.nieuws__knop { margin: 1.4rem 0 .8rem; }

/* ---------- Footer ---------- */
.voet { background: var(--navy); color: #D6E2F2; margin-top: clamp(1.5rem, 3vw, 2.5rem); padding: 1.4rem 0 1.6rem; }
.voet .fijn { color: #9DB2D0; }
.voet a { color: #fff; }
.voet__balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; font-size: .88rem; }
.voet__balk span { color: #F2C94C; }
.voet__sociaal { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; }
.voet__sociaal:hover { text-decoration: underline; }
.voet__sociaal svg { width: 18px; height: 18px; flex: none; }
.voet__klein {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .13); margin-top: 1.1rem; padding-top: .9rem;
  font-size: .8rem;
}
.voet__klein a { color: #C3D3EA; text-decoration: none; }
.voet__klein a:hover { text-decoration: underline; }

/* ============================================================
   Responsief
   ============================================================ */

/* ---------- Themapagina met bestelformulier ----------
   Beeld links, koopvak rechts. De vijf pagina's onder /prinsessen, /piraten
   enzovoort worden gegenereerd door tools\maak_themapaginas.py; pas dus het
   sjabloon daar aan en niet de HTML zelf. */
.kruimels { display: flex; flex-wrap: wrap; gap: .45rem; font-size: .85rem; color: var(--inkt-zacht); }
.kruimels a { color: var(--inkt-zacht); }
.kruimels span { opacity: .45; }

.product {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2.4vw, 2rem); align-items: start; margin-top: 1.1rem;
}
.product__beeld {
  background: var(--wit); border: 2px solid var(--rand);
  border-radius: var(--straal-groot); box-shadow: var(--schaduw);
  padding: clamp(.9rem, 1.8vw, 1.4rem);
}
.product__blad { width: 100%; border-radius: 10px; border: 2px solid var(--rand); }
.product__strook { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; margin-top: .7rem; }
/* De pagina's hebben niet allemaal dezelfde verhouding — de opdrachtkaart is
   een uitsnede en het diploma is liggend. Vierkant bijsnijden vanaf de bovenkant
   houdt de strook recht en laat van elke pagina de kop zien. */
.product__strook img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 0;
  border-radius: 7px; border: 2px solid var(--rand); background: var(--creme);
}

.bestel h1 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--navy); }
.bestel h1 span { font-size: .85em; }
.bestel__pitch { margin-top: .7rem; color: var(--inkt-zacht); }
.bestel__prijsregel { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-top: 1.1rem; }
.bestel__prijs { font-family: var(--kop-font); font-weight: 700; font-size: 2rem; color: var(--roze); line-height: 1; }

.kenmerkjes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.kenmerkjes li {
  background: var(--creme); border: 2px solid var(--rand); border-radius: 99px;
  padding: .28rem .8rem; font-size: .82rem; font-weight: 700; color: var(--navy);
}

.formulier { margin-top: 1.5rem; display: grid; gap: 1.05rem; }
.veld { display: grid; gap: .35rem; }
.veld label { font-family: var(--kop-font); font-weight: 600; font-size: .95rem; color: var(--navy); }
.veld input, .veld select {
  font: inherit; padding: .7rem .9rem; color: var(--inkt);
  background: var(--wit); border: 2px solid var(--rand); border-radius: 12px;
}
.veld input:focus, .veld select:focus {
  outline: none; border-color: var(--roze); box-shadow: 0 0 0 3px var(--roze-zacht);
}
.veld__hulp { font-size: .8rem; color: var(--inkt-zacht); }
.veld__fout { font-size: .82rem; font-weight: 700; color: var(--roze-diep); display: none; }
.veld--fout input, .veld--fout select { border-color: var(--roze-diep); }
.veld--fout .veld__fout { display: block; }

/* Laat meteen zien wat er straks op het voorblad komt te staan. */
.proef {
  background: var(--creme); border: 2px dashed var(--rand);
  border-radius: var(--straal); padding: .85rem 1rem; text-align: center;
}
.proef__label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--inkt-zacht); }
.proef__naam { font-family: var(--kop-font); font-weight: 700; font-size: 1.45rem; color: var(--accent); line-height: 1.15; margin-top: .15rem; }
.proef__rest { font-size: .88rem; color: var(--inkt-zacht); }

.akkoord { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; line-height: 1.5; }
.akkoord input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .18rem; accent-color: var(--roze); }
.akkoord.veld--fout { color: var(--roze-diep); }

/* De uitnodigingen erbij. Eén vinkje, met het kaartje ernaast — anders koopt
   niemand iets waarvan hij niet weet hoe het eruitziet. */
.extra__keuze {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; cursor: pointer;
  background: var(--creme); border: 2px solid var(--rand);
  border-radius: var(--straal); padding: .8rem .9rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.extra__keuze:hover { border-color: var(--roze); }
/* De klasse komt uit bestel.js; :has() staat erbij zodat het vakje ook goed
   staat als het JavaScript nog niet geladen is. */
.extra__keuze--aan,
.extra__keuze:has(input:checked) { border-color: var(--roze); background: var(--roze-zacht); }
.extra__keuze input { flex: none; width: 1.15rem; height: 1.15rem; accent-color: var(--roze); }
.extra__beeld {
  flex: none; width: 54px; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 0;
  border-radius: 6px; border: 2px solid var(--rand); background: var(--wit);
}
.extra__tekst { flex: 1 1 150px; display: grid; gap: .15rem; }
.extra__tekst strong { font-family: var(--kop-font); font-weight: 600; font-size: .98rem; color: var(--navy); }
.extra__prijs { flex: none; font-family: var(--kop-font); font-weight: 700; color: var(--roze); white-space: nowrap; }

/* ---------- Kortingscode ---------- */

.korting__opener {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--tekst-font); font-size: .88rem; color: var(--navy);
  text-decoration: underline; text-underline-offset: 3px;
}
.korting__opener:hover { color: var(--roze); }
.korting__vak { display: grid; gap: .4rem; margin-top: .6rem; }
.korting__label {
  font-family: var(--kop-font); font-weight: 600; font-size: .84rem; color: var(--navy);
}
.korting__rij { display: flex; gap: .5rem; flex-wrap: wrap; }
.korting__rij input {
  flex: 1 1 9rem; min-width: 0;
  padding: .6rem .8rem; border: 2px solid var(--rand); border-radius: 10px;
  font-family: var(--tekst-font); font-size: .95rem; background: var(--wit);
  text-transform: uppercase;
}
.korting__rij input::placeholder { text-transform: none; color: var(--inkt-zacht); }
.korting__knop { flex: none; padding-inline: 1.1rem; }
.korting__uitslag { margin: 0; font-size: .85rem; color: var(--inkt-zacht); }
.korting__uitslag--goed { color: var(--groen); font-weight: 700; }
.korting__uitslag--fout { color: var(--roze-diep); }

/* De regel tussen het kortingsvak en het totaal, met wat eraf gaat. */
.korting__regel {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 0; font-size: .92rem; color: var(--groen); font-weight: 700;
}

.totaal {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-top: 2px solid var(--rand); padding-top: .85rem;
  font-family: var(--kop-font); font-weight: 600; color: var(--navy);
}
.totaal strong { font-size: 1.4rem; color: var(--roze); }
/* Het oude bedrag blijft staan met een streep erdoor, zodat zichtbaar is dat
   de korting er echt af is en niet alleen dat het bedrag ineens anders is. */
.totaal .totaal__oud {
  font-size: 1rem; color: var(--inkt-zacht); text-decoration: line-through;
  font-weight: 400; margin-right: .4rem;
}

.bestel__knop { width: 100%; justify-content: center; }
.bestel__zeker { display: grid; gap: .3rem; font-size: .84rem; color: var(--inkt-zacht); }
.bestel__zeker li { display: flex; gap: .45rem; }
.vink { color: var(--groen); font-weight: 800; flex: none; }

/* Pre-launch. Weghalen zodra de betaalkoppeling werkt. */
.nog-dicht {
  background: var(--roze-zacht);
  border: 2px solid color-mix(in srgb, var(--roze) 32%, #fff);
  border-radius: var(--straal); padding: .85rem 1rem; font-size: .88rem;
}
.melding { display: none; }
.melding--aan { display: block; }

/* ---------- Blokken onder het koopvak ---------- */
.opdrachten {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem 1.2rem;
  margin-top: 1.2rem; counter-reset: opdr;
}
.opdrachten li { display: flex; gap: .65rem; align-items: baseline; font-size: .94rem; }
.opdrachten li::before {
  counter-increment: opdr; content: counter(opdr);
  flex: none; min-width: 1.55rem; padding: .15rem .3rem;
  background: var(--creme); border: 2px solid var(--rand); border-radius: 99px;
  font-size: .74rem; font-weight: 800; color: var(--navy); text-align: center;
}
.opdrachten li:nth-child(4)::before, .opdrachten li:nth-child(7)::before { border-style: dashed; }

.zit-erin {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .55rem 1.4rem; margin-top: 1.2rem;
}
.zit-erin li { display: flex; gap: .6rem; font-size: .95rem; }

.voorbeelden { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; margin-top: 1.3rem; }
/* De pagina's verschillen in hoogte; met flex-end staan ze op één lijn en
   lopen de bijschriften gelijk. Zelfde truc als bij .pdf__blad op de homepage. */
.voorbeelden figure { margin: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem; }
.voorbeelden img { width: 100%; border-radius: 8px; border: 2px solid var(--rand); box-shadow: var(--schaduw); }
.voorbeelden figcaption { font-family: var(--kop-font); font-weight: 600; font-size: .74rem; color: var(--navy); text-align: center; }

.uitnodiging-blok {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.2rem, 2.4vw, 2rem); align-items: center; margin-top: 1.2rem;
}
.uitnodiging-blok img {
  width: 100%; border-radius: 10px; border: 2px solid var(--rand); box-shadow: var(--schaduw);
}

/* Het blokje onder het uitnodigingenstuk, met de knop naar /uitnodigingen/.
   Bewust een omlijnde knop en niet de roze: hier verkopen we de goedkopere
   bijbestelling, niet de duurdere losse. */
.los-erbij {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  margin-top: 1.2rem; padding: 1rem 1.2rem;
  background: var(--creme); border: 2px dashed var(--rand); border-radius: var(--straal);
}
.los-erbij p { flex: 1 1 15rem; }
.los-erbij strong { font-family: var(--kop-font); color: var(--navy); }

/* Tip in het koopvak op /uitnodigingen/: hier staat dat het goedkoper kan. */
.kader-tip {
  margin-top: .9rem; padding: .85rem 1rem;
  background: var(--creme); border: 2px dashed var(--rand); border-radius: var(--straal);
  font-size: .92rem;
}
.kader-tip strong { font-family: var(--kop-font); color: var(--navy); }

.andere { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.2rem; }

/* ---------- Wettelijke pagina's ----------
   Algemene voorwaarden, privacy en herroeping. Lange leestekst, dus een
   smallere kolom en meer lucht tussen de artikelen dan elders op de site.
   De nummering komt uit de opmaak en niet uit de tekst: zo kost een artikel
   ertussen schuiven geen hernummering. */
.juridisch { counter-reset: artikel; margin-top: 1.1rem; }
.juridisch__lead { color: var(--inkt-zacht); font-size: 1.02rem; line-height: 1.62; }
.juridisch p, .juridisch li { line-height: 1.62; }
.juridisch a { color: var(--roze); text-underline-offset: 2px; }

/* De verticale ritmiek staat op één plek. Alles wat direct in .juridisch hangt
   krijgt dezelfde basisafstand; koppen en blokken duwen daarna extra lucht. */
.juridisch > * + * { margin-top: .8rem; }
.juridisch > h2 { margin-top: 2.1rem; }
.juridisch > h3 { margin-top: 1.6rem; }
.juridisch > h3 + * { margin-top: .55rem; }
.juridisch > .let-op { margin-top: 1.3rem; }
.juridisch > .inhoud { margin-top: 1.4rem; }
.juridisch > .artikel { margin-top: 2.1rem; }
.juridisch > .juridisch__voet { margin-top: 2.3rem; }

.inhoud {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: .4rem 1.2rem;
  background: var(--creme); border: 2px solid var(--rand);
  border-radius: var(--straal); padding: 1.1rem 1.3rem;
}
.inhoud a { font-size: .93rem; text-decoration: none; }
.inhoud a:hover { text-decoration: underline; }

.artikel { scroll-margin-top: 5.5rem; }
.artikel h2 { font-size: 1.16rem; color: var(--navy); display: flex; gap: .65rem; align-items: baseline; }
.artikel h2::before {
  counter-increment: artikel; content: counter(artikel);
  flex: none; min-width: 1.75rem; padding: .2rem .35rem;
  background: var(--roze-zacht); border-radius: 999px;
  font-family: var(--tekst-font); font-size: .78rem; font-weight: 800;
  color: var(--roze); text-align: center;
}
.artikel > * + * { margin-top: .75rem; }

/* Kopjes buiten een genummerd artikel, voor pagina's die meer uitleg zijn dan
   voorwaarden. Die krijgen geen nummerbolletje. */
.juridisch > h2 { font-size: 1.16rem; color: var(--navy); }
.juridisch h3 { font-size: 1rem; color: var(--navy); margin-top: 1.5rem; }
.juridisch ul, .juridisch ol { padding-left: 1.45rem; display: grid; gap: .45rem; }
.juridisch ul { list-style: disc; }
.juridisch ol { list-style: decimal; }
.juridisch li::marker { color: var(--roze); }

.let-op {
  background: var(--roze-zacht); border: 2px solid #F3C3DA;
  border-radius: var(--straal); padding: 1rem 1.2rem;
}
.let-op p + p { margin-top: .6rem; }

.gegevens { display: grid; gap: .4rem; }
.gegevens div { display: flex; flex-wrap: wrap; gap: .2rem .7rem; }
.gegevens dt { font-weight: 800; color: var(--navy); min-width: 8.5rem; }
.gegevens dd { margin: 0; }

/* Nog in te vullen bedrijfsgegevens. Opzettelijk schreeuwerig, zodat er geen
   placeholder blijft staan zodra de VOF is ingeschreven. */
.invul {
  background: #FFF1AE; border-bottom: 2px dotted #B08B0A;
  padding: .05em .4em; border-radius: 5px;
  font-weight: 800; color: #6B5405;
}

.tabel-rol { overflow-x: auto; margin-top: 1rem; }
/* Op een telefoon past de tabel niet; dan is het fijn te weten dat hij schuift. */
.tabel-hint { display: none; }
@media (max-width: 700px) { .tabel-hint { display: block; margin-top: .5rem; } }
.tabel { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .93rem; }
.tabel th, .tabel td {
  text-align: left; padding: .7rem .85rem; vertical-align: top;
  border-bottom: 2px solid var(--rand);
}
.tabel th { font-family: var(--kop-font); font-weight: 600; color: var(--navy); background: var(--creme); }
.tabel tr:last-child td { border-bottom: 0; }

.juridisch__voet { margin-top: 2.3rem; padding-top: 1.2rem; border-top: 2px solid var(--rand); }

/* ---------- De speurtochtkiezer ----------
   Vier vragen achter elkaar in hetzelfde paneel. Alleen de vraag die aan de
   beurt is staat in de HTML zonder [hidden]; de rest wordt door kiezer.js
   getoond. Zonder JavaScript blijft vraag 1 staan met daaronder de link naar
   het overzicht, zodat de pagina niet leeg is. */
.kiezer { max-width: 900px; margin-inline: auto; }

.kiezer__balk { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.kiezer__stap {
  font-family: var(--kop-font); font-weight: 600; font-size: .84rem;
  color: var(--inkt-zacht); white-space: nowrap;
}
.kiezer__meter { flex: 1; height: 8px; background: var(--creme-diep); border-radius: 999px; overflow: hidden; }
.kiezer__meter span {
  display: block; height: 100%; background: var(--roze); border-radius: 999px;
  transition: width .3s ease;
}

.kiezer__vraag { border: 0; padding: 0; margin: 0; }
.kiezer__vraag legend { padding: 0; }
.kiezer__hint { margin-top: .5rem; color: var(--inkt-zacht); font-size: .93rem; }

.kiezer__keuzes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1.3rem; }
.kiezer__keuzes--breed { grid-template-columns: repeat(2, 1fr); }
.kiezer__keuzes--smal { grid-template-columns: repeat(6, 1fr); }

.kiezer__keuze {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; text-align: center; cursor: pointer;
  font-family: var(--kop-font); font-weight: 600; font-size: .98rem; color: var(--navy);
  background: var(--wit); border: 2.5px solid var(--rand); border-radius: var(--straal);
  padding: 1.1rem .7rem;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.kiezer__keuze:hover { transform: translateY(-3px); border-color: var(--roze); }
.kiezer__keuze[aria-pressed="true"] {
  border-color: var(--roze); background: var(--roze-zacht);
  box-shadow: inset 0 0 0 1px var(--roze);
}
.kiezer__teken { font-size: 1.9rem; line-height: 1; }
.kiezer__keuzes--smal .kiezer__keuze { padding: .8rem .3rem; font-size: 1.05rem; }

.kiezer__voet {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin-top: 1.6rem;
}
.kiezer__voet .knop[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- De uitslag ---------- */
.kiezer__uitslag { text-align: center; }
.kiezer__kop { font-size: clamp(1.35rem, 2.6vw, 1.8rem); color: var(--navy); }
.kiezer__samenvatting {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
  margin-top: .9rem;
}
.kiezer__merk {
  font-size: .82rem; font-weight: 700; color: var(--navy);
  background: var(--creme); border: 2px solid var(--rand);
  border-radius: 999px; padding: .2rem .8rem;
}

.kiezer__treffers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.6rem; }

/* De beste treffer krijgt een lint en een dikkere rand. De andere twee zijn
   gewone themakaarten, zodat duidelijk blijft dat het suggesties zijn en geen
   uitslag waar je aan vastzit. */
/* De kaart moet de hele hoogte van zijn vak vullen, anders staan de drie
   knoppen niet op één lijn zodra de ene tekst langer is dan de andere. */
.kiezer__treffer { position: relative; display: flex; }
.kiezer__treffer .thema { flex: 1; }
.kiezer__treffer--beste .thema { border-width: 4px; box-shadow: var(--schaduw-op); }
.kiezer__lint {
  position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: var(--kop-font); font-weight: 700; font-size: .78rem; white-space: nowrap;
  color: #fff; background: var(--accent);
  padding: .22rem .9rem; border-radius: 999px;
  box-shadow: 0 2px 8px -2px rgba(90, 68, 30, .5);
}
.kiezer__redenen {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem;
  margin-top: .1rem;
}
.kiezer__reden {
  font-size: .78rem; color: var(--accent); font-weight: 700;
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  border-radius: 999px; padding: .15rem .6rem;
}
.kiezer__advies {
  margin-top: 1.6rem; padding: 1rem 1.2rem;
  background: var(--creme); border: 2px dashed var(--rand); border-radius: var(--straal);
  text-align: left;
}
.kiezer__opnieuw { margin-top: 1.4rem; }

/* ---------- Waarvoor je hem gebruikt ----------
   Een rij met gelegenheden, zodat meteen duidelijk is dat de speurtocht niet
   alleen voor een verjaardag is. Let op: school, bso en verenigingen horen hier
   niet bij — die staan in de algemene voorwaarden juist uitgesloten. */
.gelegenheden {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  /* Ruim genoeg dat de zes bordjes vanaf 1000px op één regel passen. Daaronder
     valt het op 4+2, 3+3 of 2+2+2. Alleen tussen 880 en 1000 breekt het op 5+1;
     dat staat gecentreerd en valt niet op. Maak je de teksten langer, meet dan
     opnieuw — bij lange labels wordt die weesregel wél zichtbaar. */
  gap: .5rem .6rem; margin: 0 auto; max-width: 70rem;
}
.gelegenheden li {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--kop-font); font-weight: 600; font-size: .88rem; color: var(--navy);
  background: var(--wit); border: 2px solid var(--rand);
  border-radius: 999px; padding: .32rem .8rem;
}
.gelegenheden li span { font-size: 1.1em; line-height: 1; }
.gelegenheden__kop {
  text-align: center; font-family: var(--kop-font); font-weight: 600;
  color: var(--inkt-zacht); margin-bottom: .9rem;
}

/* De vijftien thema's die geen kaartje krijgen, als pillen onder het raster.
   Zelfde vorm als .gelegenheden onder de hero, zodat het een bekende vorm is
   en geen nieuw ding op de pagina -- maar dit zijn links en die moeten dat ook
   laten merken, vandaar de kleur van het accent bij zweven en een duidelijke
   focusrand voor wie met een toetsenbord werkt.

   Waarom pillen en geen kaartjes: zie de uitleg bij schrijf_themaraster() in
   tools/maak_themapaginas.py. Kort: twintig kaartjes maakten de voorpagina op
   een telefoon 2328 pixels langer, deze rij kost er rond de 200. */
.themapillen {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .45rem .5rem; margin: 0 auto; padding: 0; list-style: none;
  max-width: 58rem;
}
.themapillen a {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--kop-font); font-weight: 600; font-size: .85rem;
  color: var(--navy); text-decoration: none;
  background: var(--wit); border: 2px solid var(--rand);
  border-radius: 999px; padding: .28rem .7rem;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.themapillen a:hover,
.themapillen a:focus-visible {
  border-color: var(--roze); color: var(--roze); transform: translateY(-1px);
}
.themapillen a:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
.themapillen span { font-size: 1.05em; line-height: 1; }
.themapillen__kop {
  text-align: center; font-family: var(--kop-font); font-weight: 600;
  font-size: .9rem; color: var(--inkt-zacht);
  margin: 1.4rem 0 .8rem;
}

@media (prefers-reduced-motion: reduce) {
  .themapillen a { transition: none; }
  .themapillen a:hover, .themapillen a:focus-visible { transform: none; }
}

/* ---------- De toestemmingsbanner ----------
   Onderaan het scherm, niet als scherm-vullend blok over de pagina: wie hier
   binnenkomt via een advertentie moet kunnen zien wát hij toestemt voor. De
   twee knoppen zijn even groot en staan naast elkaar -- weigeren hoort net zo
   makkelijk te zijn als accepteren, en dat is niet alleen netjes maar ook de
   regel. Zie static/js/toestemming.js. */
.toestemming {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--wit); border-top: 3px solid var(--roze);
  box-shadow: 0 -6px 24px rgba(22, 56, 110, .13);
  padding: 1rem clamp(1rem, 4vw, 2rem);
  animation: toestemming-op .25s ease-out;
}
@keyframes toestemming-op { from { transform: translateY(100%); } to { transform: none; } }
.toestemming__binnen {
  max-width: 70rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem;
}
.toestemming__tekst { flex: 1 1 26rem; }
.toestemming__kop {
  font-family: var(--kop-font); font-weight: 600; color: var(--navy);
  margin-bottom: .2rem;
}
.toestemming__knoppen { display: flex; gap: .7rem; flex: 0 0 auto; margin-inline: auto; }
/* Even groot, zodat de ene knop niet harder roept dan de andere. */
.toestemming__knoppen .knop { flex: 1 1 auto; white-space: nowrap; }

@media (max-width: 560px) {
  .toestemming__knoppen { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .toestemming { animation: none; }
}

/* De keuze later herzien, vanuit de voettekst. */
.voet__toestemming {
  background: none; border: none; padding: 0;
  font: inherit; color: inherit; text-decoration: underline; cursor: pointer;
}

/* De uitnodiging op de homepage en het overzicht. */
.kiezer-lokker {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  margin-top: 1.4rem; padding: 1.1rem 1.4rem;
  background: var(--creme); border: 2px dashed var(--rand); border-radius: var(--straal);
}
.kiezer-lokker__teken { font-size: 2rem; line-height: 1; }
.kiezer-lokker__tekst { flex: 1 1 16rem; }
.kiezer-lokker__tekst strong { font-family: var(--kop-font); color: var(--navy); }

/* Het menu verdwijnt eerder dan de rest van de opmaak: onder deze grens
   passen logo, menu en knop niet meer naast elkaar en loopt de kopregel over
   de rand. Onder de grens wijzen het hamburgerknopje, de roze knop rechts en
   de voettekst de weg.
   De grens stond op 1180 en dat was toen al te laag: met zes items was er 1231
   pixels nodig, dus tussen 1180 en 1231 liep de kopregel al over. Met het
   zevende item erbij is er 1291 nodig. Vandaar 1300 -- gemeten in de browser,
   niet geschat. Kort je een menunaam in of komt er een item bij, meet opnieuw. */
@media (max-width: 1300px) {
  .nav { display: none; }
  .kop__knop { margin-left: auto; }
}

@media (max-width: 1150px) {
  .nav { gap: 1.1rem; font-size: .88rem; }
  .drieluik { grid-template-columns: 1fr 1fr; }
  .paneel--kopen { grid-column: 1 / -1; }

  /* Vijf kaarten passen niet netjes in drie kolommen; met flex komt de
     laatste rij gecentreerd te staan in plaats van links uitgelijnd. */
  .themas { display: flex; flex-wrap: wrap; justify-content: center; }
  .themas .thema { flex: 0 1 200px; }
}

@media (max-width: 980px) {
  /* Het koopvak boven het beeld: op een telefoon wil je eerst weten wat het
     kost en hoe je het krijgt. */
  .product { grid-template-columns: 1fr; }
  .product > .bestel { order: -1; }
  .andere { grid-template-columns: repeat(2, 1fr); }

  .kop__knop { margin-left: auto; }
  .hero__raster { grid-template-columns: minmax(0, 1fr); }
  /* En de vakken zelf mogen ook krimpen; zonder dit blijft min-width:auto
     op de rasteronderdelen staan en gebeurt hetzelfde een niveau dieper. */
  .hero__links, .hero__rechts { min-width: 0; }
  .hero__links { text-align: center; }
  .hero .lead { margin-inline: auto; }
  .kenmerken { justify-content: center; }
  .hero__actie { justify-content: center; }
  .pijltje { display: none; }
}

@media (max-width: 760px) {
  .uitnodiging-blok { grid-template-columns: 1fr; }
  .opdrachten { grid-template-columns: 1fr; }
  .voorbeelden { grid-template-columns: repeat(3, 1fr); }
  .drieluik { grid-template-columns: 1fr; }
  .themas .thema { flex: 0 1 160px; }
  .vragen { grid-template-columns: 1fr; }
  .dia__banner { top: var(--banner-boven, 5%); padding: .4rem 1.1rem .45rem; }

  /* De kiezer wordt één kolom breed; alleen de leeftijdsknoppen blijven in een
     raster staan, want die zijn maar één teken breed. */
  .kiezer__keuzes, .kiezer__keuzes--breed { grid-template-columns: 1fr; }
  .kiezer__keuzes--smal { grid-template-columns: repeat(3, 1fr); }
  .kiezer__keuze { flex-direction: row; justify-content: flex-start; gap: .9rem; text-align: left; padding: .9rem 1rem; }
  .kiezer__keuzes--smal .kiezer__keuze { flex-direction: column; justify-content: center; text-align: center; }
  .kiezer__treffers { grid-template-columns: 1fr; gap: 1.6rem; }
}

@media (max-width: 520px) {
  .voorbeelden { grid-template-columns: repeat(2, 1fr); }
  .andere { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  /* Op een smal scherm passen het logo, de merknaam én de knop niet naast
     elkaar. De naam staat al in het logo, dus die kan hier weg. */
  .merk__naam { display: none; }
  .merk__teken { width: 48px; height: 48px; }
  .kop__knop { padding: .55rem .9rem; font-size: .85rem; }
  .kop__binnen { min-height: 64px; gap: .6rem; }
  .kenmerken { gap: .9rem; }
  .kenmerken li { width: 72px; }
  .kenmerken__tekst { font-size: .74rem; }
  .themas { gap: .7rem; }
  /* max-width houdt de vijfde kaart op halve breedte in plaats van
     paginabreed uit te rekken als laatste in de rij */
  .themas .thema { flex: 1 1 140px; max-width: calc(50% - .35rem); }
  .blad { max-width: 155px; margin-inline: auto; }
  .stappen { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  .stappen::before { display: none; }
  .pdf { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  .blad__kop { font-size: .68rem; }
  .blad--voorblad b { font-size: .8rem; }
  .blad--voorblad i { font-size: .56rem; }
  .blad__naam { font-size: .8rem; }
  .voet__balk { flex-direction: column; align-items: flex-start; }
  /* Twee knoppen naast elkaar passen hier niet meer. Zonder wrap krimpen ze
     niet ver genoeg — een knop kan niet smaller dan zijn tekst — en viel de
     tweede half buiten het scherm. Met wrap staan ze onder elkaar, elk over
     de volle breedte. */
  .hero__actie { flex-wrap: wrap; }
  .hero__actie .knop { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   DE WINKELMAND
   ============================================================ */

/* ---------- Het mandje in de koptekst ---------- */

/* Buiten .nav gehouden, want dat menu verdwijnt onder 1180 px. Een mand die je
   op een telefoon niet kunt openen is erger dan geen mand. mand.js zet het
   hidden-attribuut weg zodra er iets in ligt. */
.kop__mand {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  text-decoration: none; border-radius: 999px;
  background: var(--zand, #FBF1DC);
  border: 2px solid var(--rand);
  transition: transform .15s ease, border-color .15s ease;
}
.kop__mand:hover { transform: translateY(-1px); border-color: var(--roze); }
.kop__mand[hidden] { display: none; }
.kop__mand-teken { font-size: 1.25rem; line-height: 1; }

/* Het aantal als bolletje rechtsboven. Geen absolute positie binnen de knop
   zelf maar erbuiten, zodat een tweecijferig aantal niet over het mandje valt. */
.kop__mand-aantal {
  position: absolute; top: -6px; right: -6px;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--roze); color: #fff;
  font-family: var(--kop-font); font-weight: 700; font-size: .78rem; line-height: 1;
}

/* ---------- De regels in de mand ---------- */

.paneel--smal { max-width: 720px; margin-inline: auto; }

.mandlijst { list-style: none; margin: 1.75rem 0 0; padding: 0; }

.mandregel {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  grid-template-areas: "beeld tekst prijs" "beeld weg weg";
  align-items: center;
  gap: .35rem 1.1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rand);
}
.mandregel:last-child { border-bottom: 1px solid var(--rand); }

.mandregel__beeld { grid-area: beeld; width: 120px; height: 80px; object-fit: cover; border-radius: 10px; }
.mandregel__tekst { grid-area: tekst; }
.mandregel__titel { grid-area: tekst; margin: 0; font-family: var(--kop-font); font-weight: 700; color: var(--navy); font-size: 1.1rem; }
.mandregel__onder { margin: .15rem 0 0; color: var(--inkt-zacht); font-size: .92rem; }
.mandregel__prijs { grid-area: prijs; font-family: var(--kop-font); font-weight: 700; color: var(--navy); white-space: nowrap; }

/* Verwijderen is een knop en geen kruisje: een kruisje van 12 pixels is op een
   telefoon met een duim niet te raken, en wie zich vergist heeft geen weg
   terug. Onderstreept en in tekstgrootte, dus je ziet wat er gebeurt. */
.mandregel__weg {
  grid-area: weg; justify-self: start;
  border: 0; background: none; padding: .2rem 0; cursor: pointer;
  color: var(--inkt-zacht); font: inherit; font-size: .88rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.mandregel__weg:hover { color: var(--roze); }

/* ---------- Het totaal ---------- */

.mandtotaal { margin: 1.5rem 0 0; }
.mandtotaal__rij { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .35rem 0; }
.mandtotaal__rij dt, .mandtotaal__rij dd { margin: 0; }
.mandtotaal__rij--korting { color: var(--roze); }
.mandtotaal__rij--totaal {
  margin-top: .5rem; padding-top: .8rem;
  border-top: 2px solid var(--rand);
  font-family: var(--kop-font); font-weight: 700; font-size: 1.3rem; color: var(--navy);
}
.mandtotaal__rij--totaal dd { min-height: 1.3em; }

.mand__fout {
  margin: 1rem 0 0; padding: .8rem 1rem;
  border-radius: 12px;
  background: #FDECEF; color: #8A1538;
  font-size: .95rem;
}
.mand__fout[hidden] { display: none; }

.mand__afrekenen { width: 100%; margin-top: 1.25rem; }

.mand__verder {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  margin: 1.25rem 0 0;
  font-size: .95rem;
}
.mand__legen {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--inkt-zacht); font: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.mand__legen:hover { color: var(--roze); }

/* ---------- Wat er gebeurt na 'in de mand' ---------- */

/* Verschijnt onder de bestelknop zodra er iets is toegevoegd. Twee wegen, want
   dat zijn precies de twee dingen die iemand nu wil: verder kiezen of
   afrekenen. */
.toegevoegd {
  display: none;
  margin-top: 1rem; padding: 1rem 1.1rem;
  border-radius: 14px;
  background: #EAF7EE; border: 1px solid #BCE3C7;
}
.toegevoegd--aan { display: block; }
.toegevoegd__kop { margin: 0 0 .75rem; font-weight: 700; color: #17603A; }
.toegevoegd__wegen { display: flex; gap: .6rem; flex-wrap: wrap; }
.toegevoegd__wegen .knop { flex: 1 1 auto; text-align: center; }

@media (max-width: 620px) {
  .mandregel {
    grid-template-columns: 84px 1fr;
    grid-template-areas: "beeld tekst" "beeld prijs" "weg weg";
    row-gap: .3rem;
  }
  .mandregel__beeld { width: 84px; height: 60px; }
  .mandregel__prijs { justify-self: start; }
  .mandregel__weg { justify-self: start; margin-top: .3rem; }
}

@media (max-width: 520px) {
  /* Even groot als de menuknop en de koopknop ernaast: 44 bij 44 is de
     kleinste maat die je met een duim betrouwbaar raakt. */
  .kop__mand { width: 44px; height: 44px; }
  .kop__mand-teken { font-size: 1.15rem; }
}

/* Zodra het menu weg is, houdt .kop__knop met margin-left:auto de rechterkant
   bezet. Ligt er iets in de mand, dan hoort het mandje dáár te staan en niet
   los naast het logo — een mandje en een koopknop horen bij elkaar. Het mandje
   neemt de auto over, de knop schuift ertegenaan. Is de mand leeg, dan is het
   mandje display:none en pakt de knop de auto vanzelf weer op. */
@media (max-width: 1180px) {
  .kop__mand:not([hidden]) { margin-left: auto; }
  .kop__mand:not([hidden]) ~ .kop__knop { margin-left: 0; }
}

/* ============================================================
   HET MENU OP EEN SMAL SCHERM
   ============================================================ */

/* Boven 1300 px staat het menu gewoon in de balk en is deze knop weg.

   Deze grens MOET gelijk zijn aan die van .nav hierboven. Staat de knop later
   aan dan het menu uit gaat, dan is er een strook breedtes waarin er helemaal
   geen menu is -- niet in de balk en niet achter een knop. Dat is precies wat
   er gebeurde toen het menu naar 1300 ging en deze knop op 1180 bleef staan. */
.menuknop { display: none; }

@media (max-width: 1300px) {
  .menuknop {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    flex: none; order: -1;                  /* links, naast het logo */
    /* De drie streepjes zijn samen maar veertien pixels hoog. Zonder deze
       ondergrens werd de knop 40 bij 21 en moest je er met een duim precies op
       mikken; 44 bij 44 is de kleinste maat die betrouwbaar raakt. */
    min-height: 44px;
    padding: .5rem .75rem;
    border: 2px solid var(--rand); border-radius: 999px;
    background: var(--zand, #FBF1DC);
    color: var(--navy); font: inherit; font-weight: 700; font-size: .9rem;
    cursor: pointer;
    transition: border-color .15s ease;
  }
  .menuknop:hover { border-color: var(--roze); }

  /* De drie streepjes met één element: de middelste is de achtergrond, de
     andere twee zijn schaduwen erboven en eronder. Scheelt twee spans. */
  .menuknop__strepen {
    position: relative;
    width: 18px; height: 2px; border-radius: 2px;
    background: var(--navy);
    box-shadow: 0 -6px 0 var(--navy), 0 6px 0 var(--navy);
  }
  .menuknop[aria-expanded="true"] { border-color: var(--roze); }

  /* Het menu zelf: een paneel dat onder de balk uitklapt. */
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    margin: .5rem 0 0;
    padding: .6rem;
    flex-direction: column; gap: 0;
    background: #fff;
    border: 1px solid var(--rand); border-radius: 16px;
    box-shadow: 0 18px 40px -18px rgba(90, 68, 30, .55);
    z-index: 60;
  }
  .nav--open { display: flex; }

  /* In het paneel zijn het rijen, geen tabs: een onderstreping als
     aanwijzer werkt niet als de items onder elkaar staan. */
  .nav a {
    padding: .8rem 1rem;
    border-bottom: 0; border-radius: 10px;
    font-size: 1rem;
  }
  .nav a:hover { border-bottom-color: transparent; background: var(--zand, #FBF1DC); }
  .nav a[aria-current="page"] { background: var(--zand, #FBF1DC); color: var(--roze); }

  /* Zolang het menu openstaat niet achter het paneel door kunnen scrollen. */
  body.menu-open { overflow: hidden; }
}

@media (max-width: 520px) {
  /* Op de smalste schermen alleen de streepjes; het woord 'Menu' kost dan de
     ruimte die de winkelmand en de koopknop nodig hebben. */
  .menuknop__woord { display: none; }
  .menuknop { min-width: 44px; padding: .5rem; }
}

/* De koopknop in de koptekst op een smal scherm.
 *
 * Er staan vier dingen naast elkaar — menuknop, logo, winkelmandje, koopknop —
 * waar er op een telefoon maar drie passen. Gemeten met één speurtocht in de
 * mand: op 320 px stak de knop er 37 px uit, en op 360 px bleef er 3 px over.
 * Drie pixels is geen marge: een tweecijferig aantal in het mandje is al
 * breder, en op een echt toestel vallen de letters soms net anders uit.
 *
 * Hieronder valt daarom de tekst weg en blijft het sterretje staan. Dat scheelt
 * ongeveer 130 px, en de knop blijft even goed aan te tikken. Dezelfde
 * behandeling als het woord 'Menu' een stukje hoger.
 *
 * De grens ligt op 420 en niet op 360: op 360 paste het nét, en 'net' is precies
 * wat hier misging.
 *
 * aria-label staat op de link zelf, want het sterretje is aria-hidden. Zonder
 * dat label zou de knop voor een schermlezer naamloos worden zodra de tekst
 * verdwijnt. */
@media (max-width: 420px) {
  .kop__knop-woord { display: none; }
  /* 44 bij 44 is de kleinste maat die je met een duim betrouwbaar raakt.
     Zonder deze regel bleef er van de knop 38 bij 32 over: hij paste wel,
     maar je moest er precies op mikken. De menuknop en het mandje ernaast
     zitten op dezelfde maat, dus het oogt ook rustiger. */
  .kop__knop {
    min-width: 44px; min-height: 44px;
    padding: 0; display: inline-flex;
    align-items: center; justify-content: center;
  }
  .kop__knop .knop__ster { margin: 0; }
}

/* ---------- De levering op de bedankpagina ----------
 *
 * De klant is net van het betaalscherm gekomen en wacht 15 tot 60 seconden --
 * bij een mand van drie langer -- tot zijn PDF's gemaakt zijn. Dit is het vak
 * waarin hij dat ziet gebeuren en waarin daarna de downloadknoppen komen.
 *
 * Alles hieronder staat op `hidden` in de HTML en wordt door
 * static/js/bedankstand.js tevoorschijn gehaald. Zonder JavaScript blijft het
 * dus onzichtbaar en houdt de pagina de tekst die er al stond: de mail komt
 * eraan, kijk in je spammap. Dat is geen noodgeval maar de gewone terugval.
 *
 * Er komt hier met opzet GEEN tweede knopstijl. De knoppen die het script
 * maakt zijn `.knop .knop--roze` met een sterretje erin, precies zoals overal
 * op de site; hieronder staat alleen hoe ze naast elkaar liggen. */
.levering { margin-top: 1.5rem; }

.levering__vak {
  background: var(--wit); border: 1px solid var(--rand);
  border-radius: var(--straal); padding: 1.25rem 1.35rem;
  box-shadow: var(--schaduw);
}
.levering__vak--klaar { border-color: color-mix(in srgb, var(--groen) 38%, var(--rand)); }
.levering__titel {
  font-family: var(--kop-font); font-weight: 600; font-size: 1.12rem;
  color: var(--navy); margin: 0 0 .5rem;
}
.levering__vak p + p { margin-top: .55rem; }

/* Drie stipjes die rustig oplichten, en geen draaiend rondje. Een spinner
   zegt "er gebeurt iets" en verder niets; de zin ernaast doet het werk. Bij
   prefers-reduced-motion staan ze stil -- dan is het gewoon een leesteken. */
.levering__stippen { display: inline-flex; gap: .28rem; margin-left: .5rem; }
.levering__stippen i {
  width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--roze); opacity: .25;
  animation: levering-pols 1.4s ease-in-out infinite;
}
.levering__stippen i:nth-child(2) { animation-delay: .2s; }
.levering__stippen i:nth-child(3) { animation-delay: .4s; }
@keyframes levering-pols {
  0%, 60%, 100% { opacity: .25; }
  30%           { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .levering__stippen i { animation: none; opacity: .55; }
}

.levering__knoppen { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0 .8rem; }

/* Op een telefoon onder elkaar en over de volle breedte. Twee halve knoppen
   naast elkaar zijn op 360 px allebei te smal om betrouwbaar te raken, en dit
   is het scherm waarop de meeste ouders na het betalen terugkomen. */
@media (max-width: 520px) {
  .levering__knoppen { flex-direction: column; }
  .levering__knoppen .knop { width: 100%; }
}

/* ═══════════════════════ De blog ═══════════════════════

   Een artikel is het enige op deze site waar iemand een paar minuten aan een
   stuk leest. Daarom staat de regellengte hier vast op ongeveer 68 tekens: dat
   is wat een oog kan volgen zonder de volgende regel kwijt te raken. De rest
   van de site is korte tekst in kaartjes en heeft die beperking niet.

   Er is bewust geen apart lettertype en geen eigen kleurenschema. Een blog die
   eruitziet als een andere site wekt de indruk dat je ergens anders bent
   beland, en dan klikt niemand nog door naar een speurtocht. */

.inleiding {
  font-size: 1.06rem;
  color: var(--inkt-zacht);
  max-width: 64ch;
  margin: 0 0 1.6rem;
}

.leeg {
  color: var(--inkt-zacht);
  font-style: italic;
}

/* ---- de lijst met artikelen ---- */

.artikellijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

.artikellijst__item {
  padding: 1.4rem 0;
  border-top: 1px solid var(--rand);
  max-width: 68ch;
}

.artikellijst__item:first-child { border-top: 0; padding-top: .4rem; }

.artikellijst__datum {
  margin: 0 0 .2rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.artikellijst__titel {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.25;
  margin: 0 0 .5rem;
}

.artikellijst__titel a { color: var(--navy); text-decoration: none; }
.artikellijst__titel a:hover,
.artikellijst__titel a:focus-visible { color: var(--roze); text-decoration: underline; }

.artikellijst__meer { font-weight: 600; margin: .4rem 0 0; }

/* ---- een blogartikel ----

   Bewust .blogstuk en niet .artikel. Die naam is al van de juridische
   pagina's, en daar zet .artikel h2::before een nummerbolletje voor elk kopje.
   Zo heette het hier eerst, en toen stond er voor elk blogkopje een 1 -- en
   kregen de privacyverklaring en de voorwaarden omgekeerd de grote kopjes en
   de smalle kolom van de blog. */

.blogstuk { max-width: 68ch; }

.blogstuk__datum {
  margin: -.6rem 0 1.6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.blogstuk h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  line-height: 1.3;
  margin: 2.2rem 0 .7rem;
}

.blogstuk h3 {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  margin: 1.6rem 0 .5rem;
}

.blogstuk p { margin: 0 0 1rem; line-height: 1.68; }

.blogstuk ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.blogstuk li { margin: 0 0 .4rem; line-height: 1.6; }

.blogstuk hr {
  border: 0;
  border-top: 1px solid var(--rand);
  margin: 2rem 0;
}

.blogstuk blockquote {
  margin: 1.4rem 0;
  padding: .2rem 0 .2rem 1.1rem;
  border-left: 3px solid var(--roze);
  color: var(--inkt-zacht);
}

.blogstuk blockquote p { margin: 0; }

/* Een link in lopende tekst moet als link te zien zijn, ook voor wie kleur
   slecht onderscheidt. Vandaar de onderstreping, en niet alleen de kleur. */
.blogstuk p > a,
.blogstuk li > a {
  color: var(--roze-diep);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.blogstuk__terug {
  margin: 2rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rand);
  font-weight: 600;
}

/* ---- beelden in de blog ----

   Alle drie krijgen ze width en height in de HTML mee, uit het bestand zelf
   (zie beeldmaat() in tools/blog.py). Daardoor houdt de browser de ruimte al
   vrij voordat het beeld binnen is en verspringt de tekst niet onder je vinger
   terwijl je leest. */

.blogstuk__kopbeeld,
.blogstuk__beeld {
  margin: 0 0 1.4rem;
  border-radius: var(--straal);
  overflow: hidden;
  border: 1px solid var(--rand);
  background: var(--creme);
}

.blogstuk__beeld { margin: 1.6rem 0; }

.blogstuk__kopbeeld img,
.blogstuk__beeld img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- het beeldje in de lijst ----

   Twee cellen naast elkaar: het beeld en een omhulsel met alle tekst. Eerder
   stonden de datum, de titel en de omschrijving los in het raster; dan vult het
   beeld alleen de eerste rij en schuift de titel eronder door. `grid-row: 1/-1`
   repareert dat niet, want -1 wijst naar het einde van het EXPLICIETE raster en
   die rijen zijn hier allemaal impliciet. Een omhulsel is de simpele oplossing:
   twee cellen, altijd even hoog begonnen. */

.artikellijst__item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.4rem;
  align-items: start;
}

.artikellijst__beeld {
  display: block;
  border-radius: var(--straal);
  overflow: hidden;
  border: 1px solid var(--rand);
  background: var(--creme);
}

.artikellijst__beeld img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.artikellijst__tekst > :first-child { margin-top: 0; }
.artikellijst__tekst > :last-child { margin-bottom: 0; }

/* Zonder beeld is er geen eerste kolom nodig. */
.artikellijst__item:not(:has(.artikellijst__beeld)) { grid-template-columns: 1fr; }

/* Op een telefoon past 200 px beeld naast de tekst niet; dan boven elkaar. */
@media (max-width: 560px) {
  .artikellijst__item { grid-template-columns: 1fr; gap: .9rem; }
}

  /* De rij-overspanning hierboven moet hier wél weg: in één kolom zou het
     beeld anders álle rijen vullen en de tekst eroverheen komen te liggen. */
  .artikellijst__beeld { grid-row: auto; margin-bottom: .2rem; }
}