/* =========================================================================
   Zomerlezen Boeksafari — rijk-pagina
   Stap 1: fundament (gecentreerde 1180px-kolom, savanne erbinnen,
   crème erbuiten, full-bleed header/footer in accentkleur).
   ========================================================================= */

:root{
  --col: 1180px;          /* breedte content-kolom */
  --creme: #F5F3E9;       /* effen randkleur = grond van de savanne-tegel */
  --rijk: #65859E;        /* accent (Sporten); later data-gestuurd per rijk */
  --ink: #2c2c2c;         /* hoofdtekstkleur */
  --on-rijk: #ffffff;     /* tekst op de accent-balken */
}

*{ box-sizing: border-box; }

html,body{ margin:0; }

body{
  background: var(--creme);                 /* volle breedte effen crème */
  color: var(--ink);
  font-family: filson-pro, system-ui, -apple-system, Segoe UI, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;                        /* vangnet tegen bleed-scrollbar */
}

/* Gecentreerde content-kolom; padding houdt inhoud van de rand */
.col{
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 24px;
}

/* Full-bleed balk (header/footer) over de volle schermbreedte */
.bleed{
  width: 100%;
  background: var(--rijk);
  color: var(--on-rijk);
}

/* -------------------------------------------------------------------------
   RIJK-PAGINA — effen per-rijk tint over de VOLLE breedte (op .rijk zelf), zodat
   de kleur naadloos tot tegen de schermranden en de header-/footer-balk loopt
   (geen crème randje). De leeskolom (.col, max-width var(--col)) houdt de tekst
   smal; de tint vult er full-bleed omheen.
   color-mix(--rijk 25%, --creme) reproduceert de team-goedgekeurde tinten;
   eerste background-regel = fallback voor browsers zonder color-mix.
   ------------------------------------------------------------------------- */
.rijk{
  position: relative;                                        /* anker voor de grain-laag */
  isolation: isolate;                                        /* eigen stacking context: z-index:-1 valt tússen tint en inhoud, niet erachter */
  background: var(--creme);                                   /* fallback: effen crème */
  background: color-mix(in srgb, var(--rijk) 25%, var(--creme)); /* effen per-rijk tint, volle breedte */
  padding-top: 40px;
  padding-bottom: 56px;
  min-height: 60vh;
}
/* Subtiele grain over de effen tint — inline feTurbulence (geen asset), ontzadigd
   naar neutraal grijs; overlay-blend (50%-grijs = identiteit) verschuift de kleur
   eronder niet, voegt enkel lichte korrel toe. z-index:-1 = boven de tint, achter de inhoud. */
.rijk::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.15;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type='linear'%20slope='3'%20intercept='-1'/%3E%3CfeFuncG%20type='linear'%20slope='3'%20intercept='-1'/%3E%3CfeFuncB%20type='linear'%20slope='3'%20intercept='-1'/%3E%3CfeFuncA%20type='linear'%20slope='0'%20intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   HYBRIDE ACHTERGROND-STAND (?achtergrond=hybride) — tiled savanne i.p.v. de
   effen tint, UITSLUITEND op desktop (>1024px) én enkel op rijk-pagina's
   (niet op de home/privacy). Op de savanne gaat de grain UIT. ≤1024px én de
   default-stand blijven de effen color-mix + grain (geen override nodig).
   Savanne staat op .rijk (volle breedte) zodat de crème-rand-fix intact blijft.
   ------------------------------------------------------------------------- */
@media (min-width: 1025px){
  body.bg-hybride:not(.kaart-route):not(.privacy-route) .rijk{
    background-image: url(../assets/bg/savanne-melkachtig-v2.png);
    background-repeat: repeat;
    background-size: auto;                 /* ware tegelgrootte, niet schalen */
    background-attachment: fixed;          /* savanne staat stil t.o.v. scherm; content scrollt eroverheen */
    background-color: var(--creme);        /* vult eventuele gaten naadloos */
  }
  body.bg-hybride:not(.kaart-route):not(.privacy-route) .rijk::before{ content: none; } /* geen grain over de savanne */
}

/* -------------------------------------------------------------------------
   SECTIE-SCAFFOLD — herbruikbaar 50-koloms grid (1 cel = 2%).
   Hoogtes komen uit de inhoud; overlaps = items in dezelfde rij met
   overlappende kolommen. (Skin van ref/wireframe-rijkpagina.html.)
   ------------------------------------------------------------------------- */
.sec{
  display: grid;
  grid-template-columns: repeat(50, 1fr);
  align-items: start;
  row-gap: 30px;
  padding: 44px 0;
}
/* Grid-items mogen krimpen onder hun content-breedte (geen overflow) */
.sec > *{ min-width: 0; }

/* Effen content-kaart (tekst staat nooit los op de savanne) */
.card{
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,.07);
}

/* Koppen / labels */
.eyebrow{
  font-family: filson-pro, sans-serif;
  font-weight: 700;
  letter-spacing: .16em;
  font-size: 14px;
  color: var(--rijk);
  margin: 0 0 6px;
}
.titel{
  font-family: brush-up, cursive;
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 16px;
}

/* -------------------------------------------------------------------------
   WELKOM — badge links (groter + meeschalend) + smalle kaart rechts (46%)
   Badge staat LOS met lucht, GÉÉN overlap met de kaart. De badge groeit naar
   links en onder; de rechterrand houdt een vaste marge vóór de kaart.
   ------------------------------------------------------------------------- */
.welkom{
  container-type: inline-size;  /* cqw = % van de contentkolom, niet van de viewport */
}
.welkom .badge{
  grid-column: 1 / 23;          /* area eindigt op de linkerrand van de kaart (44%) */
  grid-row: 1;
  align-self: center;           /* verticaal gecentreerd t.o.v. de kaart */
  justify-self: end;            /* pint de badge tegen de kaartrand (geen overlap) */
  margin: 0 10px 0 0;           /* kleine vaste marge vóór de kaart (zichtbaar lucht) */
  z-index: 1;
}
.welkom .badge img{
  display: block;
  /* Schaalt mee met de KOLOM (cqw), niet met de viewport.
     ~385px op de breedste kolom (1180px); de ~410px-richtwaarde past niet
     binnen de kolom zonder de kaart te raken (zie taak-rapport). */
  width: clamp(200px, 34cqw, 390px);
  height: auto;                 /* verhouding behouden, geen vaste hoogte */
}
.welkom .wkaart{
  grid-column: 23 / 46;         /* L44–R90% = 46% breed (blok naar rechts → gebalanceerde marges) */
  grid-row: 1;
  z-index: 1;
  padding: 34px 38px 36px;
}
.welkom .wkaart p{
  margin: 0 0 14px;
  text-align: left;
}
.welkom .wkaart p:last-child{ margin-bottom: 0; }

/* -------------------------------------------------------------------------
   VIDEO + BOEK
   Video (1/29 → R56%) ligt BOVENOP het paneel (28/51 → L54%); beide vullen
   hun cel volledig (geen justify-self) → echte, zichtbare overlap van ~2%.
   ------------------------------------------------------------------------- */
.videoboek .video{
  grid-column: 1 / 29;          /* L0–R56% */
  grid-row: 1;
  align-self: start;
  z-index: 3;                   /* bovenop het paneel */
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
  background: #000;
}
.videoboek .video iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.videoboek .boek{
  grid-column: 28 / 51;         /* L54–R100% (linkerrand schuift onder de video) */
  grid-row: 1;
  align-self: start;
  margin-top: 32px;
  z-index: 2;
  position: relative;
  overflow: visible;            /* boek-insert mag uit de hoek bleeden */
  background: color-mix(in srgb, var(--rijk) 14%, #fff);
  border-radius: 16px;
  /* extra padding rechts/onder houdt de tekst weg van de bleed-illustratie */
  padding: 28px 30px 104px 34px;
}
/* Rijken zonder boek-insert: geen gereserveerde bleed-ruimte onderaan. */
.videoboek .boek.geen-insert{ padding-bottom: 28px; }
/* Auteursintro: gewone vette tekst op bodygrootte (geen kop-styling). */
.videoboek .boek .bkop{
  font-weight: 700;
  margin: 0 0 14px;
  text-align: left;
}
.videoboek .boek p{ margin: 0 0 14px; text-align: left; }
.videoboek .boek em{ font-style: italic; }
.videoboek .boek strong{ font-weight: 700; }
.videoboek .boek .meer{ margin-top: 6px; }
.videoboek .boek .insert{
  position: absolute;
  right: -10px;
  bottom: -14px;
  /* breedte (% v.h. paneel) + horizontale/verticale offset (px) per rijk;
     komen als inline custom properties uit de rijk-JSON.
     offsetX: negatief = naar links; offsetY: positief = naar onder. */
  width: var(--insert-scale, 32%);
  transform: translate(var(--insert-offsetX, 0px), var(--insert-offsetY, 0px));
  max-width: 520px; /* ruim genoeg voor brede banner-inserts (bv. Sprookjes-golf);
                       compacte figuur-inserts blijven kleiner via schaal% */
  height: auto;
  z-index: 4;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   QUIZ + CHALLENGE — quiz links (L4–R48), challenge rechts (L50–R100).
   Twee kolommen in het 50-koloms grid, GÉÉN overlap.
   ------------------------------------------------------------------------- */
.quizchallenge .quiz{
  grid-column: 3 / 25;          /* L4–R48% */
  grid-row: 1;
}
.quizchallenge .challenge{
  grid-column: 26 / 51;         /* L50–R100% */
  grid-row: 1;
}

/* Sectie-kop (Brush Up, iets kleiner dan de pagina-titel) */
.kop2{
  font-family: brush-up, cursive;
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 18px;
}

/* Vraagkaart */
.quiz .vraag{
  padding: 22px 24px;
  margin-bottom: 20px;
}
.quiz .vraag:last-child{ margin-bottom: 0; }
.quiz .vraag-tekst{
  margin: 0 0 16px;
  font-weight: 500;
  text-align: left;
}
.quiz .vraag-tekst em{ font-style: italic; }

/* Antwoord-opties als tap-targets (>=52px) */
.quiz .opties{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz .optie{
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;             /* tap-target */
  padding: 10px 18px;
  text-align: left;
  font-family: filson-pro, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--rijk) 35%, #fff);
  border-radius: 12px;
  cursor: pointer;
}
.quiz .optie:hover{ border-color: var(--rijk); }

/* Gekozen optie — markering (vrij herklikbaar, alleen de huidige keuze) */
.quiz .optie.goed{
  background: #e4f0e1;                         /* vriendelijke groene tint */
  border-color: #7faa78;
}
.quiz .optie.fout{
  /* zachte, melkachtige lichtroze waas — bewust niet hard/bestraffend.
     TE IJKEN WAARDE (kleur/dekking) — Jorgo beoordeelt op screenshot. */
  background: rgba(223, 124, 137, 0.14);
  border-color: rgba(223, 124, 137, 0.45);
}
/* alleJuist (Grappen/Fantasie): neutrale keuze-markering in de rijkkleur —
   geen goed/fout, want elke optie is juist. */
.quiz .optie.gekozen{
  background: color-mix(in srgb, var(--rijk) 12%, #fff);
  border-color: var(--rijk);
}

/* Feedback onder de opties, binnen dezelfde kaart */
.quiz .feedback{
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}
.quiz .feedback em{ font-style: italic; }
.quiz .feedback .boektip{
  color: var(--rijk);
  font-weight: 700;
  text-decoration: none;
}
.quiz .feedback .boektip:hover{ text-decoration: underline; }

/* Challenge-kaart (rechts); kop "CHALLENGE" staat erboven (eigen .kop2) */
.challenge .challenge-card{
  padding: 24px 26px 26px;
}
.challenge .challenge-card p{
  margin: 0 0 14px;
  text-align: left;
}
.challenge .doemee{ margin-top: 8px; }

/* Knop (accent, gevuld) — tap-target >=52px */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  background: var(--rijk);
  color: #fff;
  font-family: filson-pro, sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
}
.btn:hover{ filter: brightness(1.06); }

/* -------------------------------------------------------------------------
   SLINGERPAD (mobiele home) — geport uit public/poc/index.html.
   Map = de basislaag-illustratie (max 480px, gecentreerd); haltes liggen
   absoluut op %-posities erop. Hover-pop op open haltes; dicht = grijs
   silhouet-uit-alpha + wiebelend slot.
   ------------------------------------------------------------------------- */
.slingerpad{ display: flex; justify-content: center; }
.slingerpad-map{
  position: relative;
  width: 100%;
  max-width: 480px;
}
.slingerpad-map .pad-base{ display: block; width: 100%; height: auto; }

.slingerpad .stop{
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
  border: 0; background: none; padding: 0; margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.slingerpad .stop .b-img{
  width: 100%; height: auto; display: block;
  pointer-events: none;
  transform: rotate(var(--rot, 0deg));
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.18));
}
/* Open halte: licht "naar voren" bij hover/focus */
.slingerpad .stop.is-open{ transition: transform .18s ease-out; }
.slingerpad .stop.is-open:hover,
.slingerpad .stop.is-open:focus-visible{ transform: translate(-50%,-50%) scale(1.04); }
.slingerpad .stop:focus-visible{
  outline: 3px solid var(--rijk);
  outline-offset: 4px;
  border-radius: 12px;
}

/* Slotje op de dichte halte: rechtop, wiebelt zacht; bump bij klik */
.slingerpad .lock-glyph{
  position: absolute; top: 48%; left: 50%; width: 46%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transform-origin: 50% 70%;
}
@media (prefers-reduced-motion: no-preference){
  .slingerpad .stop.is-locked .lock-glyph{ animation: sp-wiggle 3.2s ease-in-out infinite; }
  .slingerpad .stop.is-locked.bump .lock-glyph{ animation: sp-bump .5s ease-in-out; }
}
@keyframes sp-wiggle{
  0%,88%,100%{ transform: translate(-50%,-50%) rotate(0); }
  91%{ transform: translate(-50%,-50%) rotate(-7deg); }
  94%{ transform: translate(-50%,-50%) rotate(6deg); }
  97%{ transform: translate(-50%,-50%) rotate(-3deg); }
}
@keyframes sp-bump{
  0%,100%{ transform: translate(-50%,-50%) rotate(0); }
  15%{ transform: translate(-50%,-50%) rotate(-12deg); }
  35%{ transform: translate(-50%,-50%) rotate(10deg); }
  55%{ transform: translate(-50%,-50%) rotate(-7deg); }
  75%{ transform: translate(-50%,-50%) rotate(4deg); }
}

/* -------------------------------------------------------------------------
   HOME — gedeelde staart onder de kaart/slingerpad: intro-blok + badge-rij.
   (Staat op kale crème; de footer is de globale paginafooter.)
   ------------------------------------------------------------------------- */
.home-intro{
  max-width: 760px;
  margin: 6px auto 26px;   /* staat nu BOVEN de kaart: minder lucht erboven, wat ademruimte naar de kaart */
  text-align: center;
}
.home-intro-titel{
  font-family: brush-up, cursive;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 14px;
}
.home-intro p{ margin: 0 0 12px; }
.home-intro p:last-child{ margin-bottom: 0; }

.badge-rij{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 1.6vw, 18px);
  margin: 24px auto 12px;
}
.badge-rij-item{
  width: clamp(54px, 8vw, 92px);
  height: auto;
  display: block;
}

/* -------------------------------------------------------------------------
   INSCHRIJF-BLOK — permanent in de flow, kolom-breed, tussen de kaart/
   slingerpad-tak en het intro-blok. Identiek op beide varianten.
   ------------------------------------------------------------------------- */
.cta-blok{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
  margin: 26px auto 6px;
  text-align: center;
}
.cta-blok .cta-tekst{
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(15px, 2.4vw, 19px);
  line-height: 1.2;
}
.cta-blok .cta-btn{ flex: 0 0 auto; }

/* -------------------------------------------------------------------------
   KAART (desktop-home tak) — de bovenste laag van /#/ op desktop.
   Stage = vast aspect (zelfde als de zone-assets); zones liggen gestapeld,
   transparant rondom de eigen vorm. Hover-pop via .hover; dicht = grijs silhouet.
   ------------------------------------------------------------------------- */
.kaart{ margin: 24px 0 36px; }

/* Kaart-route: geen decor onder de kaart — de zones ZIJN de kaart op kale crème. */
body.kaart-route .rijk{
  background-image: none;
  background-color: var(--creme);
}
/* Geen grain op de kaart-/home-route (kale crème). */
body.kaart-route .rijk::before{ content: none; }

/* Privacy-route: sobere tekstpagina op kale crème (geen grain/per-rijk tint). */
body.privacy-route .rijk{
  background-image: none;
  background-color: var(--creme);
}
body.privacy-route .rijk::before{ content: none; }

/* -------------------------------------------------------------------------
   PRIVACY — smalle leeskolom (~720px) binnen de bestaande kolom, links uitgelijnd.
   ------------------------------------------------------------------------- */
.privacy{
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 0 24px;
  color: var(--ink);
}
.privacy h1{
  font-family: brush-up, cursive;
  font-weight: 500;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.05;
  margin: 6px 0 4px;
}
.privacy h2{
  font-family: filson-pro, sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 34px 0 8px;
}
.privacy h3{
  font-family: filson-pro, sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin: 22px 0 4px;
}
.privacy p{ margin: 0 0 14px; line-height: 1.6; }
.privacy .pv-lijst{ margin: 0 0 14px; padding-left: 22px; }
.privacy .pv-lijst li{ margin: 0 0 8px; line-height: 1.55; }
.privacy a{ color: #155e75; text-decoration: underline; }
.privacy a:hover{ color: #0c3f50; }

.kaart-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 1624 / 915;
  background: var(--creme);       /* kale crème; geen decor (PoC-rust) */
}

/* Elke zone-PNG vult de stage; alleen de eigen (niet-transparante) vorm is zichtbaar. */
.kaart-stage .zone,
.kaart-stage .lockwrap{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;          /* hit-detectie loopt via de alpha-canvas, niet via de DOM */
  transition: transform 180ms cubic-bezier(0.22,1,0.36,1),
              filter    180ms cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}

/* Hover-pop: naar voren vanuit het zwaartepunt (transform-origin in JS gezet). */
.kaart-stage .zone.hover,
.kaart-stage .lockwrap.hover{ transform: scale(1.04); }
/* Drop-shadow alleen op OPEN zones (niet op de grijze silhouetten). */
.kaart-stage .zone.hover:not(.locked){ filter: drop-shadow(0 10px 18px rgba(80,60,30,.35)); }

/* Dichte zone = egaal grijs silhouet-asset (assets/zones-grijs/); geen CSS-filter nodig. */

/* Slotje, gecentreerd op het zwaartepunt; rechtop, wiebelt bij klik. */
.kaart-stage .lock{ position: absolute; transform: translate(-50%, -50%); }
.kaart-stage .lock.wiggle{ animation: kaart-wiggle .5s ease-in-out; }
@keyframes kaart-wiggle{
  0%,100% { transform: translate(-50%,-50%) rotate(0deg); }
  20%     { transform: translate(-50%,-50%) rotate(-12deg); }
  40%     { transform: translate(-50%,-50%) rotate(10deg); }
  60%     { transform: translate(-50%,-50%) rotate(-7deg); }
  80%     { transform: translate(-50%,-50%) rotate(4deg); }
}

/* -------------------------------------------------------------------------
   HEADER
   ------------------------------------------------------------------------- */
.head-inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
}
.back{
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  color: var(--on-rijk);
  text-decoration: none;
  font-weight: 700;
  border: 1.5px solid rgba(255,255,255,.6);
  border-radius: 999px;
}
.back:hover{ background: rgba(255,255,255,.15); }
/* "← Kaart" hoort enkel op de rijk-pagina's, niet op de home (kaart/slingerpad). */
body.kaart-route .back{ display: none; }

.brand{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--on-rijk);
}
.brand-zl{
  font-family: filson-pro, sans-serif;
  font-weight: 700;
  letter-spacing: .14em;
  font-size: 18px;
}
.brand-logo{
  width: 52px; height: 52px;
  object-fit: contain;
  display: block;
}
.brand-bs{
  font-family: brush-up, cursive;
  font-size: 34px;
  line-height: 1;
}

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
.foot-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 88px;
  flex-wrap: wrap;
}
.foot-merk{ font-family: brush-up, cursive; font-size: 24px; }
.foot-links{ display: flex; gap: 26px; flex-wrap: wrap; }
.foot-links a{
  color: var(--on-rijk);
  text-decoration: none;
  font-weight: 500;
  opacity: .92;
}
.foot-links a:hover{ opacity: 1; text-decoration: underline; }
.foot-copy{ width: 100%; font-size: 13px; opacity: .8; }

/* -------------------------------------------------------------------------
   RESPONSIVE — stapelen onder 1024px
   ------------------------------------------------------------------------- */
@media (max-width: 1024px){
  /* Secties: 1 kolom, gestapeld, geen overlaps, ruimte tussen blokken */
  .sec{ grid-template-columns: 1fr; row-gap: 22px; padding: 30px 0; }
  .sec > *{
    grid-column: 1 !important;
    grid-row: auto !important;
    align-self: auto !important;
    justify-self: stretch !important;
    margin-top: 0 !important;
  }
  /* Gestapeld: badge boven, horizontaal gecentreerd. De verticale ruimte tot de
     kaart = welkom-eigen row-gap (niet de gedeelde .sec-row-gap, die video+boek
     niet mag raken) + badge margin-bottom. Beide hier strak gezet (~14px totaal). */
  .welkom{ row-gap: 14px; }
  .welkom .badge{
    justify-self: center !important;
    margin: 0 !important;
  }

  /* Kleine telefoons (<480px): clamp-ondergrens (200px) is hier te groot.
     Deze regel overrulet de ondergrens; valt ONDER de headless-screenshotgrens
     (~484px) → niet door mij geverifieerd, Jorgo checkt op 375px. */
  @media (max-width: 480px){
    .welkom .badge img{ width: 40vw; }   /* ~150px op 375px */
  }

  /* Video + boek: gestapeld, geen overlap; insert statisch onderaan */
  .videoboek .boek{ margin-top: 0 !important; padding-bottom: 30px; }
  .videoboek .boek .insert{
    position: static;
    width: 55%;                 /* vaste fallback — schaal genegeerd */
    max-width: 240px;
    transform: none;            /* offsetY genegeerd op mobiel */
    margin: 14px auto 0;
    display: block;
  }

  /* Slingerpad-kaart FULL-BLEED: breekt uit de .col-padding en pakt de volle
     schermbreedte tot beide randen. Geldt enkel voor de slingerpad-view (mobiel);
     intro/inschrijf-blok/badge-rij/footer blijven in de gecentreerde kolom. */
  .slingerpad{
    width: 100vw;
    margin-left: calc(50% - 50vw);   /* centreert de 100vw-strook op de viewport */
  }
  .slingerpad-map{ max-width: none; } /* cap van 480px opheffen zodat de map de volle breedte vult */

  .head-inner{ flex-direction: column; gap: 14px; padding: 16px 0; min-height: 0; }
  .back{ position: static; transform: none; align-self: flex-start; }
  /* Brand horizontaal op mobiel: ZOMERLEZEN | logo | Boeksafari op één lijn (als desktop). */
  .brand{ flex-direction: row; gap: 8px; flex-wrap: nowrap; }
  .foot-inner{ flex-direction: column; align-items: flex-start; gap: 14px; }
}