/* ============================================================
   Gedeelde stijl — concept "De Tafel", meerdere pagina's.
   Ritme: donkere cinematische secties afgewisseld met lichte
   perkament-secties. Zelfde componenten op elke pagina.
   ============================================================ */
:root {
  --papier: #f4ead1;
  --papier-licht: #faf3e1;
  --papier-diep: #ecdcb6;
  --inkt: #241d16;
  --inkt-zacht: #4c4032;
  --rood: #a93227;
  --rood-diep: #83211a;
  --blauw: #20456a;
  --blauw-diep: #16324e;
  --groen: #3f7d4f;
  --groen-diep: #2f6b3f;
  --goud-100: #f4e3b0;
  --goud-300: #dcb968;
  --goud-500: #c6a14b;
  --goud-600: #a58335;
  --leer-900: #14100b;
  --leer-800: #1d1610;
  --leer-700: #292019;
  --goud-tekst-label: #7a5c1e;
  --goud-tekst-profiel: #8a6d2e;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  --linnen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.04'/%3E%3C/svg%3E");
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background-color: var(--papier); background-image: url('img/parchment.jpg'); background-size: 760px; background-repeat: repeat; color: var(--inkt); font-family: 'Alegreya', Georgia, serif; font-size: 1.0625rem; line-height: 1.72; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: 'Cinzel', serif; letter-spacing: -0.01em; line-height: 1.16; text-wrap: balance; overflow-wrap: break-word; hyphens: none; }
::selection { background: var(--rood); color: var(--papier-licht); }

.schil { max-width: 74rem; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .schil { padding: 0 2.4rem; } }
.smal { max-width: 52rem; }
.sectie { padding: 5rem 0; }
.sectie.getint { background: rgba(70,56,40,0.05); box-shadow: inset 0 1px 0 rgba(165,131,53,0.16), inset 0 -1px 0 rgba(165,131,53,0.16); }
@media (min-width: 768px) { .sectie { padding: 7rem 0; } }
.midden { text-align: center; margin: 0 auto; max-width: 44rem; }

/* Kicker + koppen */
.kicker { font-family: 'Alegreya Sans', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--rood); display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; }
.kicker::before { content: ''; width: 1.8rem; height: 1px; background: linear-gradient(90deg, transparent, var(--goud-600)); }
.kicker.mid { justify-content: center; }
.kicker.mid::after { content: ''; width: 1.8rem; height: 1px; background: linear-gradient(90deg, var(--goud-600), transparent); }
h2.kop { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 700; }
.inleiding { font-size: 1.14rem; color: var(--inkt-zacht); margin-top: 1.1rem; }
/* Tweede kop-stem: component-/kaarttitels in Alegreya (kleine letter) i.p.v.
   Cinzel-kapitalen. Zo blijft Cinzel voorbehouden aan sectiekoppen (H1/H2) en
   krijgt de pagina drie leesniveaus: Cinzel-kapitaal / Alegreya-vet / lopende tekst. */
.stap h3, .kaart h3, .icoonitem h3, .tl-item h3, .contactblok h3, .duo .tekst h3 {
  font-family: 'Alegreya', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.28;
}

/* Knoppen */
.knop { font-family: 'Alegreya Sans', sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.95rem 1.7rem; border-radius: 2px; cursor: pointer; transition: transform 220ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 220ms ease, background-color 200ms ease; }
.knop:active { transform: translateY(1px); }
.knop:focus-visible { outline: 2px solid var(--goud-500); outline-offset: 3px; }
.knop-rood { background: linear-gradient(180deg, var(--rood), var(--rood-diep)); color: var(--papier-licht); border: 1px solid var(--rood-diep); box-shadow: 0 10px 26px -10px rgba(108,26,21,0.6); }
.knop-rood:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(108,26,21,0.7); }
.knop-lijn { color: var(--inkt); border: 1px solid rgba(76,64,50,0.5); background: rgba(250,243,225,0.5); }
.knop-lijn:hover { transform: translateY(-2px); background: var(--papier-licht); }
.knop-goud { color: var(--goud-100); border: 1px solid rgba(220,185,104,0.5); background: transparent; }
.knop-goud:hover { transform: translateY(-2px); background: rgba(220,185,104,0.08); }
.knop-groot { padding: 1.1rem 2.2rem; }

/* Donkere secties */
.donker { position: relative; color: var(--papier); background:
  var(--linnen), var(--noise),
  radial-gradient(1000px 700px at 16% -8%, rgba(198,161,75,0.14), transparent 56%),
  radial-gradient(900px 820px at 88% 112%, rgba(140,58,34,0.20), transparent 60%),
  linear-gradient(180deg, #241a12, #191009); }
.donker h2.kop, .donker h3 { color: var(--papier-licht); }
.donker .kicker { color: var(--goud-300); }
.donker .kicker::before { background: linear-gradient(90deg, transparent, var(--goud-500)); }
.donker .kicker.mid::after { background: linear-gradient(90deg, var(--goud-500), transparent); }
.donker .inleiding { color: rgba(244,234,209,0.82); }
/* Sectieovergangen: strakke, rechte grens tussen licht en donker (geen gescheurde rand). */

/* Panelen */
.paneel { background: var(--noise), linear-gradient(180deg, var(--papier-licht), var(--papier)); border: 1px solid rgba(165,131,53,0.32); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 1px 2px rgba(76,47,29,0.1), 0 12px 30px -14px rgba(76,47,29,0.28); }
.paneel-hover { transition: transform 250ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 250ms ease; }
.paneel-hover:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 22px 44px -18px rgba(76,47,29,0.4); }
.paneel-donker { background: var(--noise), linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); border: 1px solid rgba(220,185,104,0.25); border-radius: 4px; }

/* Zegel-scheiding: het lakzegel als hoofdstukbreuk tussen twee secties */
.zegel-scheiding { display: flex; align-items: center; justify-content: center; gap: 1.5rem; max-width: 40rem; margin: 0 auto; padding: 0.5rem 1.4rem; }
.zegel-scheiding::before, .zegel-scheiding::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(165,131,53,0.6), transparent); }
.zegel-scheiding img { width: 3.4rem; height: auto; filter: drop-shadow(0 4px 9px rgba(76,47,29,0.35)); }

/* Kaart als subtiele achtergrond achter een lichte sectie */
.met-kaart { position: relative; }
.met-kaart::before { content: ''; position: absolute; inset: 0; z-index: 0; background: url('img/kaart-groot.jpg') center 30% / cover no-repeat; opacity: 0.09; mix-blend-mode: multiply; pointer-events: none; }
.met-kaart > * { position: relative; z-index: 1; }

/* Skip-link */
.skip-link { position: fixed; left: 0.6rem; top: 0.6rem; z-index: 100; background: var(--rood); color: var(--papier-licht); font-family: 'Alegreya Sans', sans-serif; font-weight: 700; font-size: 0.85rem; padding: 0.7rem 1.2rem; border-radius: 3px; text-decoration: none; transform: translateY(-160%); transition: transform 160ms ease; }
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--goud-300); outline-offset: 2px; }

/* Vaste, meelopende header — transparant boven de hero, vult zich bij scrollen */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 1.15rem 0; transition: background-color 260ms ease, box-shadow 260ms ease; }
/* .menu-open hoort hier ook bij (feedback 2026-08-06, screenshot): op een hero-pagina is
   .nav bovenin bewust transparant tot er gescrold is — maar zodra het mobiele menu open
   staat, hangt er een ondoorzichtig .nav-paneel direct ONDER deze balk. Zonder .menu-open
   hier bleef de balk zelf transparant terwijl het paneel eronder al wél een dichte
   achtergrond had, dus zag je de herobeeld doorschemeren achter logo/sluitknop, met een
   harde naad naar het paneel eronder. Menu open = chrome, geen hero-content meer zichtbaar
   nodig, dus altijd de dichte achtergrond, ongeacht scrollpositie. */
.nav.gescrolld, .nav.plaatsvast, .nav.menu-open { background: var(--linnen), linear-gradient(180deg, #221913, #17110b); box-shadow: 0 8px 26px -16px rgba(0,0,0,0.75); border-bottom: 1px solid rgba(220,185,104,0.18); padding-top: 0.7rem; padding-bottom: 0.7rem; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.merk { font-family: 'Cinzel', serif; line-height: 0.98; color: var(--papier); text-decoration: none; text-shadow: 0 2px 12px rgba(0,0,0,0.7); flex: none; }
.merk .k { display: block; font-size: 0.58rem; letter-spacing: 0.34em; color: var(--goud-300); font-weight: 600; }
.merk .g { display: block; font-size: 1.22rem; font-weight: 700; }
.merk:focus-visible { outline: 2px solid var(--goud-300); outline-offset: 3px; border-radius: 2px; }
.nav-paneel { display: flex; align-items: center; gap: 1.9rem; }
.nav-menu { display: flex; align-items: center; gap: 1.7rem; }
.nav-menu a { position: relative; font-family: 'Alegreya Sans', sans-serif; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(244,234,209,0.92); text-decoration: none; transition: color 180ms ease; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.nav-menu a::before { content: ''; position: absolute; inset: -12px -6px; }
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--goud-300); }
.nav-menu a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--goud-300); border-radius: 1px; }
.nav-menu a:focus-visible { outline: 2px solid var(--goud-300); outline-offset: 4px; border-radius: 2px; }
/* Hamburger */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; flex: none; background: rgba(20,16,11,0.35); border: 1px solid rgba(220,185,104,0.4); border-radius: 3px; color: var(--papier); cursor: pointer; transition: background-color 180ms ease; }
.nav-toggle:hover { background: rgba(20,16,11,0.55); }
.nav-toggle:focus-visible { outline: 2px solid var(--goud-300); outline-offset: 2px; }
.nav-toggle .balk-open { display: block; }
.nav-toggle .balk-dicht { display: none; }
.nav.menu-open .nav-toggle .balk-open { display: none; }
.nav.menu-open .nav-toggle .balk-dicht { display: block; }

@media (max-width: 999px) {
  .nav-toggle { display: inline-flex; }
  .nav-paneel { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--linnen), linear-gradient(180deg, #221913, #151009); border-bottom: 1px solid rgba(220,185,104,0.2); box-shadow: 0 22px 44px -20px rgba(0,0,0,0.85); padding: 0.6rem 1.4rem 1.3rem; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 300ms ease, opacity 220ms ease, visibility 0s linear 300ms; }
  .nav.menu-open .nav-paneel { max-height: 80vh; opacity: 1; visibility: visible; transition: max-height 340ms ease, opacity 240ms ease; }
  .nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-menu a { padding: 0.95rem 0.3rem; border-bottom: 1px solid rgba(220,185,104,0.14); font-size: 0.82rem; }
  .nav-cta { justify-content: center; margin-top: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav-paneel { transition: none !important; }
}
/* Boven de hero (home, transparante balk): tekstlogo en rode CTA-knop pas tonen zodra de
   balk vastklikt (.gescrolld) of altijd-vast is (.plaatsvast). Logo krijgt visibility:hidden
   zodat het zijn ruimte behoudt en het menu NIET verspringt. Menu blijft rechts. Alleen desktop:
   op mobiel zit de CTA in het uitklapmenu en blijft de rode knop gewenst. */
.merk { transition: opacity 200ms ease; }
/* Tijdelijke interne toegang tot de spelapp/dashboard (verwijderen/afschermen vóór publieke livegang) */
.nav-intern-groep { display: flex; align-items: center; gap: 1rem; }
.nav-intern-groep a { position: relative; font-family: 'Alegreya Sans', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--goud-300); text-decoration: none; opacity: 0.82; display: inline-flex; align-items: center; gap: 0.34rem; white-space: nowrap; transition: opacity 180ms ease, color 180ms ease; }
.nav-intern-groep a::after { content: ''; position: absolute; inset: -10px -4px; }
.nav-intern-groep a::before { content: '\25B8'; color: var(--goud-500); font-size: 0.8em; }
.nav-intern-groep a:hover { opacity: 1; color: var(--papier-licht); }
.nav-intern-groep a:focus-visible { outline: 2px solid var(--goud-300); outline-offset: 3px; border-radius: 2px; }
@media (max-width: 999px) { .nav-intern-groep { flex-direction: column; align-items: stretch; gap: 0.2rem; border-top: 1px solid rgba(220,185,104,0.2); margin-top: 0.5rem; padding-top: 0.7rem; } .nav-intern-groep a { padding: 0.5rem 0; } }
.nav-cta { transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease, color 240ms ease; }
@media (min-width: 1000px) {
  .nav:not(.gescrolld):not(.plaatsvast) .merk { visibility: hidden; }
  .nav:not(.gescrolld):not(.plaatsvast) .nav-cta { background: none; border-color: transparent; box-shadow: none; color: rgba(244,234,209,0.94); text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
  .nav:not(.gescrolld):not(.plaatsvast) .nav-cta:hover { background: none; box-shadow: none; transform: none; color: var(--goud-300); }
}

/* Grote hero (home) */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 7rem 0 2rem; overflow: clip; background: url('img/hero-desk.jpg') center / cover no-repeat; color: var(--papier); }
/* Aparte, staande hero-afbeelding voor smalle schermen */
@media (max-width: 640px) { .hero { background-image: url('img/hero-mob.jpg'); } }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,16,11,0.75) 0%, transparent 22%, transparent 60%, rgba(20,16,11,0.55) 100%); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(52% 56% at 50% 50%, rgba(20,16,11,0.86) 0%, rgba(20,16,11,0.58) 46%, transparent 74%); }
.hero-in { position: relative; z-index: 1; max-width: 40rem; }
.hero .kicker-h { font-family: 'Alegreya Sans', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--goud-300); display: inline-flex; align-items: center; gap: 0.8rem; margin-bottom: 1.5rem; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.hero .kicker-h::before, .hero .kicker-h::after { content: ''; width: 1.8rem; height: 1px; background: linear-gradient(90deg, transparent, var(--goud-500)); }
.hero .kicker-h::after { background: linear-gradient(90deg, var(--goud-500), transparent); }
.hero .kicker-h .r { color: #e0806f; }
.hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.8rem); font-weight: 700; line-height: 1.04; text-shadow: 0 3px 30px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.8); }
.hero h1 .r { color: #e05a45; display: block; }
.hero .lead { margin: 1.7rem auto 0; max-width: 33rem; font-size: 1.18rem; line-height: 1.7; color: rgba(244,234,209,0.94); text-shadow: 0 2px 14px rgba(0,0,0,0.9); }
.hero .acties { margin-top: 2.3rem; display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; justify-content: center; }
.bel-link { position: relative; font-family: 'Alegreya Sans', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--goud-100); text-decoration: none; border-bottom: 1px solid rgba(220,185,104,0.55); padding-bottom: 0.25rem; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.bel-link::before { content: ''; position: absolute; inset: -12px -6px; }
.bel-link:hover { color: var(--goud-300); }
.scrollwenk { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 1; color: var(--goud-300); font-size: 1.3rem; text-decoration: none; opacity: 0.85; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }

/* Compacte pagina-hero (subpagina's) */
.paginahero { position: relative; padding: 9rem 0 4rem; text-align: center; overflow: clip; }
.paginahero.op-scene { background: url('img/hero-desk.jpg') center / cover no-repeat; color: var(--papier); }
.paginahero.op-scene::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 45%, rgba(20,16,11,0.85), rgba(20,16,11,0.6) 55%, rgba(20,16,11,0.42)); }
.paginahero .ph-in { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; }
.paginahero h1 { font-size: clamp(2rem, 5.8vw, 4.5rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; overflow-wrap: break-word; }
.paginahero.op-scene .ph-in { padding: 2.5rem 0; }
.paginahero.op-scene::before { content: ''; position: absolute; inset: 1.4rem; border: 1px solid rgba(220,185,104,0.28); pointer-events: none; z-index: 1; }
@media (max-width: 640px) { .paginahero.op-scene::before { inset: 0.9rem; } }
.paginahero.op-scene h1 { text-shadow: 0 3px 26px rgba(0,0,0,0.9); }
.paginahero .ph-lead { margin-top: 1.3rem; font-size: 1.18rem; }
.paginahero.op-scene .ph-lead { color: rgba(244,234,209,0.92); text-shadow: 0 2px 12px rgba(0,0,0,0.85); }
.paginahero:not(.op-scene) .ph-lead { color: var(--inkt-zacht); }
.paginahero.op-scene .kicker { color: var(--goud-300); }
.paginahero.op-scene .kicker::before { background: linear-gradient(90deg, transparent, var(--goud-500)); }
.paginahero.op-scene .kicker.mid::after { background: linear-gradient(90deg, var(--goud-500), transparent); }

/* Vertrouwen-band */
.cijfers { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; margin: 2.6rem auto 0; max-width: 52rem; }
@media (min-width: 720px) { .cijfers { grid-template-columns: repeat(4,1fr); } }
.cijfer { text-align: center; }
.cijfer .n { font-family: 'Cinzel', serif; font-weight: 700; font-size: 2rem; color: var(--rood); line-height: 1; }
.cijfer .l { font-family: 'Alegreya Sans', sans-serif; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inkt-zacht); margin-top: 0.5rem; }
.logo-strip { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(165,131,53,0.3); text-align: center; }
.logo-strip .label { font-family: 'Alegreya Sans', sans-serif; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--inkt-zacht); }
.logo-plaats { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.logo-plaats span { font-family: 'Alegreya Sans', sans-serif; font-size: 0.8rem; color: rgba(76,64,50,0.55); border: 1px dashed rgba(76,64,50,0.35); border-radius: 3px; padding: 0.7rem 1.4rem; }
.logo-plaats { align-items: center; justify-content: space-between; gap: 2rem 2.6rem; margin-top: 1.8rem; }
.logo-plaats img { height: clamp(2.6rem, 4.8vw, 4rem); width: auto; opacity: 0.82; }
@media (max-width: 620px) { .logo-plaats { justify-content: center; gap: 1.8rem 2.4rem; } .logo-plaats img { height: 2.3rem; } }

/* Icoon-lijst */
.iconenrij { display: grid; gap: 1.6rem; margin-top: 3rem; }
@media (min-width: 760px) { .iconenrij { grid-template-columns: repeat(2,1fr); } }
.icoonitem { display: flex; gap: 1.1rem; }
.icoonitem .ico { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(220,185,104,0.4); color: var(--goud-300); background: rgba(220,185,104,0.06); }
.donker .icoonitem h3 { color: var(--papier-licht); font-size: 1.24rem; }
.donker .icoonitem p { color: rgba(244,234,209,0.78); margin-top: 0.4rem; }
/* lichte variant van de icoonrij */
.iconenrij.licht .ico { border-color: rgba(165,131,53,0.5); color: var(--rood); background: rgba(169,50,39,0.05); }
.iconenrij.licht h3 { font-size: 1.2rem; }
.iconenrij.licht p { color: var(--inkt-zacht); margin-top: 0.4rem; }

/* Stappen / programma */
.stappen { display: grid; gap: 1.4rem; margin-top: 3rem; }
@media (min-width: 720px) { .stappen { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px) { .stappen.vier { grid-template-columns: repeat(4,1fr); } }
.stap { padding: 1.8rem 1.5rem; }
.badge { width: 2.6rem; height: 2.6rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-weight: 700; color: var(--papier-licht); background: radial-gradient(circle at 35% 30%, var(--rood), var(--rood-diep)); border: 2px solid var(--goud-500); box-shadow: 0 4px 12px -4px rgba(108,26,21,0.6); margin-bottom: 1rem; }
.stap h3 { font-size: 1.16rem; }
.stap p { color: var(--inkt-zacht); margin-top: 0.5rem; font-size: 0.98rem; }

/* Verticale tijdlijn (programma) */
.tijdlijn { position: relative; max-width: 44rem; margin: 3rem auto 0; }
.tijdlijn::before { content: ''; position: absolute; left: 1.3rem; top: 0.6rem; bottom: 0.6rem; width: 2px; background: linear-gradient(180deg, transparent, var(--goud-600) 8%, var(--goud-600) 92%, transparent); }
.tl-item { display: flex; gap: 1.4rem; padding: 0.9rem 0; }
.tl-item .badge { margin-bottom: 0; }
.tl-item h3 { font-size: 1.14rem; }
.tl-item p { color: var(--inkt-zacht); margin-top: 0.3rem; }
.donker .tl-item p { color: rgba(244,234,209,0.78); }

/* Galerij (bento) */
.gal { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; margin-top: 3rem; }
@media (min-width: 900px) { .gal { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; } }
.gal figure { position: relative; overflow: hidden; border-radius: 4px; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.8); }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.22,1,0.36,1); }
.gal figure:hover img { transform: scale(1.05); }
.gal figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.1rem 0.9rem; font-family: 'Alegreya Sans', sans-serif; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--papier-licht); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75)); }
@media (min-width: 900px) {
  .g-groot { grid-column: span 7; grid-row: span 2; }
  .g-half { grid-column: span 5; }
  .g-derde { grid-column: span 4; }
  .g-kwart { grid-column: span 4; }
  .g-tall { grid-row: span 2; }
}

/* Mockup-showcase: de complete spelset als "catalogusblad" */
.mockup-toon { max-width: 62rem; margin: 0 auto; }
.mockup-toon img { width: 100%; height: auto; display: block; }
.mockup-cap { text-align: center; font-family: 'Alegreya Sans', sans-serif; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--goud-300); padding-top: 1.2rem; }

/* Kaartenraster (voor wie, rollen, cases, wat wij organiseren) */
.raster { display: grid; gap: 1.4rem; margin-top: 3rem; }
@media (min-width: 760px) { .raster.twee { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 820px) { .raster.drie { grid-template-columns: repeat(3,1fr); } }
.kaart { padding: 1.7rem 1.5rem; }
.kaart h3 { font-size: 1.16rem; }
.kaart p { color: var(--inkt-zacht); margin-top: 0.5rem; font-size: 0.98rem; }
.donker .kaart p { color: rgba(244,234,209,0.78); }
.kaart .rol-tag { font-family: 'Alegreya Sans', sans-serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--goud-600); }
.donker .kaart .rol-tag { color: var(--goud-300); }
.kaart .rol-ico { display: flex; width: 2.7rem; height: 2.7rem; border-radius: 50%; align-items: center; justify-content: center; border: 1px solid rgba(165,131,53,0.5); color: var(--goud-600); background: rgba(220,185,104,0.07); margin-bottom: 1rem; }
.donker .kaart .rol-ico { border-color: rgba(220,185,104,0.4); color: var(--goud-300); background: rgba(220,185,104,0.06); }

/* Reviews */
.reviews-grid { display: grid; gap: 1.6rem; margin-top: 3rem; }
@media (min-width: 900px) { .reviews-grid { grid-template-columns: repeat(3,1fr); } }
.review { padding: 2rem 1.7rem; position: relative; }
.review .aanh { font-family: 'Cinzel', serif; font-size: 3rem; line-height: 0.4; color: var(--goud-500); display: block; padding-top: 1.3rem; }
.donker .review blockquote { color: var(--papier); font-size: 1.05rem; line-height: 1.6; margin-top: 0.4rem; }
.review blockquote { font-size: 1.05rem; line-height: 1.6; margin-top: 0.4rem; }
.review figcaption { margin-top: 1.4rem; font-family: 'Alegreya Sans', sans-serif; font-size: 0.9rem; color: var(--inkt-zacht); }
.donker .review figcaption { color: rgba(244,234,209,0.7); }
.review figcaption strong { color: var(--rood); display: block; font-weight: 700; }
.donker .review figcaption strong { color: var(--goud-300); }

/* Praktisch */
.praktisch-grid { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 720px) { .praktisch-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px) { .praktisch-grid { grid-template-columns: repeat(3,1fr); } }
.prak { padding: 1.5rem 1.5rem; display: flex; gap: 0.9rem; align-items: flex-start; }
.prak svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--rood); margin-top: 0.15rem; }
.prak dt { font-family: 'Alegreya', Georgia, serif; font-weight: 700; letter-spacing: 0; font-size: 1.08rem; }
.prak dd { color: var(--inkt-zacht); font-size: 0.96rem; margin-top: 0.2rem; }
.prijs-noot { margin-top: 1.8rem; font-family: 'Alegreya Sans', sans-serif; font-size: 0.9rem; color: var(--inkt-zacht); text-align: center; }

/* FAQ */
.faq { max-width: 46rem; margin: 2.6rem auto 0; }
.faq details { border-bottom: 1px solid rgba(165,131,53,0.4); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 0.2rem; font-family: 'Alegreya', Georgia, serif; font-weight: 700; font-size: 1.12rem; transition: color 180ms ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-family: 'Alegreya Sans', sans-serif; font-size: 1.5rem; color: var(--goud-600); transition: transform 220ms cubic-bezier(0.22,1,0.36,1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--rood); }
.faq summary:focus-visible { outline: 2px solid var(--goud-500); outline-offset: 3px; }
.faq .a { padding: 0 0.2rem 1.2rem; color: var(--inkt-zacht); max-width: 60ch; }
.faq-verder { max-width: 46rem; margin: 2.4rem auto 0; text-align: center; }
.faq-verder-kop { font-family: 'Alegreya', Georgia, serif; font-weight: 700; font-size: 1.2rem; }
.faq-verder-tekst { color: var(--inkt-zacht); margin: 0.45rem auto 1.2rem; max-width: 42rem; }
.faq-overleg { margin-top: 1.15rem; color: var(--inkt-zacht); font-size: 0.98rem; }
.faq-overleg a { color: var(--rood); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.faq-overleg a:hover { color: var(--rood-diep); }
.faq-overleg a:focus-visible { outline: 2px solid var(--goud-500); outline-offset: 3px; border-radius: 2px; }

/* --- FAQ-pagina --- */
.paginahero.faq-hero { padding-bottom: 2.2rem; }
.paginahero.faq-hero .ph-lead { max-width: 40rem; margin-left: auto; margin-right: auto; }
.faq-balk .schil { max-width: 74rem; }
.faq-zoek-wrap { display: none; max-width: 40rem; margin: 0 auto 1.3rem; position: relative; }
html.js .faq-zoek-wrap { display: block; }
.faq-zoek-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.faq-zoek-veld { display: flex; align-items: center; gap: 0.6rem; padding: 0 1rem; background: var(--papier-licht); border: 1px solid rgba(165,131,53,0.5); border-radius: 5px; box-shadow: inset 0 1px 3px rgba(36,29,22,0.08); color: var(--goud-600); }
.faq-zoek-veld:focus-within { border-color: var(--goud-500); box-shadow: 0 0 0 3px rgba(198,161,75,0.22); }
.faq-zoek-veld input { flex: 1; min-width: 0; border: 0; background: none; padding: 0.85rem 0; font-family: 'Alegreya', Georgia, serif; font-size: 1.02rem; color: var(--inkt); }
.faq-zoek-veld input:focus { outline: none; }
.faq-zoek-veld input::placeholder { color: rgba(76,64,50,0.55); }
.faq-cats { position: sticky; top: 3.35rem; z-index: 20; background: var(--papier-licht); border-bottom: 1px solid rgba(165,131,53,0.3); box-shadow: 0 8px 18px -16px rgba(36,29,22,0.6); }
.faq-cats-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; padding: 0.75rem 1.5rem; }
.faq-pill { font-family: 'Alegreya Sans', sans-serif; font-weight: 700; font-size: 0.82rem; color: var(--inkt-zacht); text-decoration: none; padding: 0.7rem 1.05rem; border: 1px solid rgba(165,131,53,0.45); border-radius: 999px; background: rgba(250,243,225,0.55); transition: color 180ms ease, background 180ms ease, border-color 180ms ease; white-space: nowrap; }
.faq-pill:hover { color: var(--rood); border-color: var(--goud-500); }
.faq-pill:focus-visible { outline: 2px solid var(--goud-500); outline-offset: 2px; }
.faq-pill.actief { color: var(--papier-licht); background: linear-gradient(180deg, var(--rood), var(--rood-diep)); border-color: var(--rood-diep); }
@media (max-width: 719px) {
  .faq-cats-in { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .faq-cats-in::-webkit-scrollbar { display: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Was 2.8rem 0 0.4rem — de site gebruikt overal .sectie{padding:5rem 0} als basisritme,
   maar deze regel gaf de FAQ-secties minder dan de helft van die ruimte bovenaan en
   vrijwel niets onderaan (feedback 2026-08-06: "de ruimte is nu juist nog krapper
   geworden" — merkbaar meteen na de sticky categorie-pillenbalk, waar de eerste sectie
   zonder enige adempauze begint). Niet de volle 5rem/5rem: de FAQ-categorieën lezen als
   één doorlopende lijst, geen op zichzelf staande pagina-secties, dus behouden een
   compacter eigen ritme — maar wel duidelijk ruimer dan voorheen, boven én onder. */
.faq-sectie { padding: 3.6rem 0 2.4rem; scroll-margin-top: 6.8rem; }
.faq-sectie[hidden] { display: none; }
.faq-cat-head { display: flex; align-items: baseline; gap: 1rem; max-width: 46rem; margin: 0 auto 0.4rem; }
.faq-cat-nr { flex: none; font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.95rem; color: var(--goud-600); }
.faq-cat-head h2 { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.01em; line-height: 1.1; }
.faq-cat-head p { color: var(--inkt-zacht); font-size: 1rem; margin-top: 0.25rem; }
.faq .a p { margin: 0; }
.faq .a p + p { margin-top: 0.7rem; }
.faq-midcta { padding: 1.4rem 0 2.6rem; text-align: center; }
.faq-midcta-kop { font-family: 'Alegreya', Georgia, serif; font-weight: 700; font-size: 1.3rem; }
.faq-midcta-tekst { color: var(--inkt-zacht); margin: 0.4rem auto 1.2rem; max-width: 38rem; }
.faq-geen { text-align: center; padding: 1.4rem 0 2.4rem; }
.faq-geen-kop { font-family: 'Alegreya', Georgia, serif; font-weight: 700; font-size: 1.3rem; }
.faq-geen p { color: var(--inkt-zacht); margin-top: 0.4rem; }
.faq-link { margin-top: 1.6rem; text-align: center; }
.faq-link a, .tekstlink { position: relative; font-family: 'Alegreya Sans', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rood); text-decoration: none; border-bottom: 1px solid var(--goud-600); padding-bottom: 0.25rem; }
.faq-link a::before, .tekstlink::before { content: ''; position: absolute; inset: -12px -6px; }

/* Duo tekst + beeld */
.duo { display: grid; gap: 2.6rem; align-items: center; margin-top: 0.5rem; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: 3.5rem; } .duo.smal-beeld { grid-template-columns: 0.85fr 1.15fr; } }
.duo .beeld .paneel { padding: 0.7rem; }
.duo .beeld img { border-radius: 2px; }
.duo .beeld figcaption { text-align: center; font-family: 'Alegreya Sans', sans-serif; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inkt-zacht); padding-top: 0.9rem; }
.donker .duo .beeld figcaption { color: rgba(244,234,209,0.7); }
.citaat-klein { margin-top: 1.6rem; padding-left: 1.2rem; border-left: 2px solid var(--goud-500); font-style: italic; font-size: 1.15rem; }
.donker .citaat-klein { color: var(--goud-100); }

/* Kernwaarden */
.waarden { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 1.8rem; }
@media (max-width: 560px) { .waarden { grid-template-columns: 1fr; } }
.waarde b { font-family: 'Cinzel', serif; display: block; font-size: 1rem; }
.waarde span { font-size: 0.92rem; color: var(--inkt-zacht); }
.donker .waarde span { color: rgba(244,234,209,0.75); }

/* Formulier (aanvraag) — voor de kolomindeling van deze pagina, zie het blok
   "Aanvraagpagina: twee gelijkwaardige routes" onderaan dit bestand. */
.veld { margin-bottom: 1.3rem; }
.veld label { display: block; font-family: 'Alegreya Sans', sans-serif; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inkt-zacht); margin-bottom: 0.45rem; }
.veld input, .veld select, .veld textarea { width: 100%; font-family: 'Alegreya', serif; font-size: 1.02rem; color: var(--inkt); background: var(--papier-licht); border: 1px solid rgba(76,64,50,0.35); border-radius: 3px; padding: 0.8rem 0.95rem; transition: border-color 180ms ease, box-shadow 180ms ease; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--goud-600); box-shadow: 0 0 0 3px rgba(198,161,75,0.2); }
.veld textarea { min-height: 7rem; resize: vertical; }
.veld-rij { display: grid; gap: 1.3rem; }
@media (min-width: 620px) { .veld-rij { grid-template-columns: 1fr 1fr; } }
.form-noot { font-family: 'Alegreya Sans', sans-serif; font-size: 0.85rem; color: var(--inkt-zacht); margin-top: 0.6rem; }
/* Honeypot voor Formsubmit.co: buiten beeld voor mensen, gewoon aanwezig voor bots die
   elk veld invullen. display:none zou sommige bots ook slim genoeg zijn om te negeren,
   dus off-screen positioneren i.p.v. verbergen. */
.form-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.veld input:disabled, .veld select:disabled, .veld textarea:disabled { opacity: 0.6; cursor: not-allowed; }
.form-status { font-family: 'Alegreya Sans', sans-serif; font-weight: 600; font-size: 0.9rem; margin-top: 0.9rem; min-height: 1.3em; }
.form-status.goed { color: var(--groen-diep); }
.form-status.fout { color: var(--rood); }
.contactblok { padding: 1.8rem; }
.contactblok h3 { font-size: 1.2rem; margin-bottom: 0.9rem; }
.contactblok ul { list-style: none; }
.contactblok li { padding: 0.5rem 0; font-family: 'Alegreya Sans', sans-serif; }
.contactblok a { position: relative; color: var(--rood); text-decoration: none; }
.contactblok a::before { content: ''; position: absolute; inset: -8px 0; }
.makers-mini { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(165,131,53,0.3); }
.makers-mini img { width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.makers-mini span { font-size: 0.92rem; color: var(--inkt-zacht); }
.verwacht ol { list-style: none; counter-reset: v; }
.verwacht li { counter-increment: v; position: relative; padding: 0.6rem 0 0.6rem 2.6rem; color: var(--inkt-zacht); }
.verwacht li::before { content: counter(v); position: absolute; left: 0; top: 0.5rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--rood); color: var(--papier-licht); font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }

/* Eind-CTA op scene */
.eind { position: relative; min-height: 60svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6rem 0; overflow: clip; background: url('img/hero-desk.jpg') center / cover no-repeat; color: var(--papier); }

/* Illustratieve cut-outs (transparante PNG's) */
.emblem-kompas { width: 4.6rem; height: auto; margin: 0 auto 1.3rem; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.banier-wrap { position: relative; width: min(24rem, 84%); margin: 0 auto 1.2rem; }
.masthead-banier { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.55)); }
.banier-tekst { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); font-family: 'Cinzel', serif; font-weight: 700; color: #4c2f1d; font-size: clamp(0.72rem, 3vw, 1.02rem); letter-spacing: 0.04em; white-space: nowrap; text-align: center; pointer-events: none; }
.koning-fig { text-align: center; }
.koning-fig img { max-width: 21rem; width: 100%; margin: 0 auto; filter: drop-shadow(0 22px 44px rgba(0,0,0,0.6)); }
.koning-fig figcaption { font-family: 'Alegreya Sans', sans-serif; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--goud-300); padding-top: 1rem; }

/* Mobiele verfijningen */
@media (max-width: 640px) {
  .paginahero { padding-top: 6.5rem; padding-bottom: 3rem; }
  .koning-fig img { max-width: 15rem; }
  .sectie { padding: 4rem 0; }
}
/* De homepage-hero gebruikt min-height:100svh + vaste padding/marges die op een
   compacte telefoon (bijv. iPhone SE, 375×667) samen hoger uitvallen dan het scherm
   — dan moest je scrollen om de hero zelf al af te zien. Op smalle schermen minder
   padding en krappere verticale ritme, zodat de hero weer in één beeld past. */
@media (max-width: 640px) {
  .hero { padding: 4.5rem 1.5rem 1.8rem; }
  .hero .kicker-h { margin-bottom: 0.6rem; }
  .hero h1 { font-size: clamp(1.8rem, 8.6vw, 5.6rem); line-height: 1.05; }
  .hero .lead { margin-top: 0.9rem; font-size: 0.94rem; line-height: 1.48; }
  .hero .acties { margin-top: 1rem; }
  .hero-kern { margin-top: 0.8rem; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: clamp(1.6rem, 9vw, 5.6rem); }
}
/* Full-bleed secties (hero, eind, paginahero) hebben geen .schil — geef ze
   op smalle schermen een eigen zijmarge zodat tekst niet tegen de rand plakt. */
@media (max-width: 767px) {
  .hero, .eind { padding-left: 1.5rem; padding-right: 1.5rem; }
  .paginahero { padding-left: 1.5rem; padding-right: 1.5rem; }
}
.eind::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 50%, rgba(20,16,11,0.86), rgba(20,16,11,0.6) 55%, rgba(20,16,11,0.4)); }
.eind-in { position: relative; z-index: 1; max-width: 40rem; }
.eind .zegel { width: 6.5rem; margin: 0 auto 1.6rem; filter: drop-shadow(0 12px 26px rgba(0,0,0,0.7)); }
.eind h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); color: var(--papier-licht); text-shadow: 0 3px 24px rgba(0,0,0,0.9); }
.eind p { margin: 1.3rem auto 0; max-width: 32rem; color: rgba(244,234,209,0.92); text-shadow: 0 2px 12px rgba(0,0,0,0.85); }
.eind .acties { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* Footer (gedeelde FOOTER-thema) */
footer { background: var(--noise), linear-gradient(180deg, #241a12, #17110b); color: rgba(244,234,209,0.8); }
.foot-grid { display: grid; gap: 2.4rem; padding-top: 3.4rem; padding-bottom: 3.4rem; }
@media (min-width: 820px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
footer h3 { font-family: 'Cinzel', serif; color: var(--goud-300); font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1rem; }
footer ul { list-style: none; }
footer li { margin-bottom: 0.1rem; }
footer a { display: inline-block; padding: 0.55rem 0; color: rgba(244,234,209,0.8); text-decoration: none; font-family: 'Alegreya Sans', sans-serif; font-size: 0.92rem; }
footer a:hover { color: var(--goud-300); }
footer a:focus-visible, .faq-link a:focus-visible, .tekstlink:focus-visible, .bel-link:focus-visible { outline: 2px solid var(--goud-300); outline-offset: 3px; border-radius: 2px; }
.foot-merk .g { font-family: 'Cinzel', serif; font-size: 1.15rem; color: var(--papier-licht); }
.foot-merk p { font-size: 0.92rem; margin-top: 0.7rem; max-width: 24rem; }
.foot-onder { border-top: 1px solid rgba(220,185,104,0.2); padding: 1.4rem 0; font-family: 'Alegreya Sans', sans-serif; font-size: 0.82rem; color: rgba(244,234,209,0.6); display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; }

/* Onthulling (faalveilig via .js op <html>, gezet door script) */
html.js .onthul { opacity: 0; transform: translateY(20px); }
html.js .onthul.zic { opacity: 1; transform: none; transition: opacity 750ms ease, transform 750ms cubic-bezier(0.22,1,0.36,1); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .onthul { opacity: 1; transform: none; } .knop, .paneel-hover, .gal img, .beeld-hover img { transition: none; } }

/* ============================================================
   HERONTWERP v2 — "Het Reisjournaal"
   Editoriale hoofdstukken, groter display-type, een routelijn als
   rode draad. Dit blok staat onderaan en vernieuwt de basis erboven.
   ============================================================ */

/* --- Groter, dramatischer display-type --- */
h2.kop { font-size: clamp(1.95rem, 5vw, 3.7rem); line-height: 1.06; letter-spacing: -0.02em; }
.inleiding { font-size: clamp(1.12rem, 1.3vw, 1.24rem); max-width: 40rem; }

/* --- Hoofdstuk-kop: editoriaal, links uitgelijnd, genummerd --- */
.hoofdstuk { max-width: 56rem; margin-bottom: 3.2rem; }
.hoofdstuk.mid { margin-left: auto; margin-right: auto; text-align: center; }
.hoofdstuk.mid .hfd-eyebrow { justify-content: center; }
.hfd-eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.hfd-nr { flex: none; font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; color: var(--goud-600); border: 1px solid var(--goud-500); border-radius: 2px; padding: 0.34rem 0.66rem; line-height: 1; }
.hfd-kicker { font-family: 'Alegreya Sans', sans-serif; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rood); }
.hfd-lijn { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(165,131,53,0.55), transparent); }
.hoofdstuk.mid .hfd-lijn:first-of-type { background: linear-gradient(90deg, transparent, rgba(165,131,53,0.55)); }
.donker .hfd-nr { color: var(--goud-300); border-color: rgba(220,185,104,0.5); }
.donker .hfd-kicker { color: var(--goud-300); }
.donker .hfd-lijn { background: linear-gradient(90deg, rgba(220,185,104,0.5), transparent); }
.hoofdstuk .inleiding { margin-top: 1.3rem; }
.hoofdstuk.mid .inleiding { margin-left: auto; margin-right: auto; }

/* --- Hero herzien: dossier-frame, groter, cinematischer --- */
.hero { padding-bottom: 4rem; }
.hero::after { background: radial-gradient(58% 60% at 50% 52%, rgba(20,16,11,0.82) 0%, rgba(20,16,11,0.5) 48%, transparent 78%); }
.hero-frame { position: absolute; inset: 1.5rem; border: 1px solid rgba(220,185,104,0.30); pointer-events: none; z-index: 1; }
.hero-frame::before, .hero-frame::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid rgba(220,185,104,0.6); }
.hero-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hero-frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 5.6rem); line-height: 1.0; }
.hero .kicker-h { margin-bottom: 1.7rem; }
/* Hero-kern: compacte praktische kenmerken onder de CTA */
.hero-kern { list-style: none; margin: 2.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-family: 'Alegreya Sans', sans-serif; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.05em; color: rgba(244,234,209,0.92); text-shadow: 0 1px 10px rgba(0,0,0,0.85); }
.hero-kern li { display: flex; align-items: center; }
.hero-kern li:not(:first-child)::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--goud-500); margin: 0 1.05rem; box-shadow: 0 0 6px rgba(220,185,104,0.55); }

/* --- De routelijn (signatuur): 'Zo werkt het' als ontdekkingstocht --- */
.route { position: relative; max-width: 50rem; margin: 3.4rem 0 0; list-style: none; padding: 0; }
.route::before { content: ''; position: absolute; left: 1.45rem; top: 1.6rem; bottom: 2.2rem; border-left: 2px dashed rgba(198,161,75,0.5); }
.route::after { content: ''; position: absolute; left: 1.02rem; bottom: 1.1rem; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--rood); }
.donker .route::before { border-color: rgba(220,185,104,0.42); }
.route-stap { position: relative; padding: 0 0 2.6rem 4.6rem; }
.route-stap:last-child { padding-bottom: 0.4rem; }
.route-wp { position: absolute; left: 0; top: -0.15rem; width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.86rem; color: var(--papier-licht); background: radial-gradient(circle at 35% 30%, var(--rood), var(--rood-diep)); border: 2px solid var(--goud-500); box-shadow: 0 5px 14px -4px rgba(108,26,21,0.6); z-index: 1; }
.route-stap h3 { font-family: 'Alegreya', Georgia, serif; font-weight: 700; font-size: 1.32rem; letter-spacing: 0; }
.route-stap p { color: var(--inkt-zacht); margin-top: 0.35rem; max-width: 34rem; }
.donker .route-stap h3 { color: var(--papier-licht); }
.donker .route-stap p { color: rgba(244,234,209,0.8); }
/* Desktop: brede horizontale dag-tijdlijn (benut de volle breedte); chronologie van de dag,
   geen spelroute door de stad. Op mobiel/tablet blijft de verticale tijdlijn hierboven. */
@media (min-width: 900px) {
  .route { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; max-width: none; margin-top: 4.2rem; }
  .route::before { left: 12.5%; right: 12.5%; top: 1.5rem; bottom: auto; height: 0; border-left: 0; border-top: 2px dashed rgba(198,161,75,0.55); }
  .route::after { display: none; }
  .route-stap { padding: 0; text-align: center; }
  .route-stap:last-child { padding-bottom: 0; }
  .route-wp { position: relative; left: auto; top: auto; margin: 0 auto 1.4rem; }
  .route-stap h3 { font-size: 1.24rem; }
  .route-stap p { margin: 0.45rem auto 0; max-width: 21rem; font-size: 0.98rem; }
  .route-optie { margin: 3rem auto 0; }
}

/* --- Vertrouwen: editoriale statregel --- */
.stat-rule { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.8rem 1rem; margin-top: 3rem; padding: 2.4rem 0; border-top: 1px solid rgba(165,131,53,0.4); border-bottom: 1px solid rgba(165,131,53,0.4); }
@media (min-width: 760px) { .stat-rule { grid-template-columns: repeat(4,1fr); } .stat-rule > div + div { border-left: 1px solid rgba(165,131,53,0.25); padding-left: 1rem; } }
.stat-rule .n { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(2.3rem, 3.6vw, 3.2rem); color: var(--rood); line-height: 0.95; }
.stat-rule .l { font-family: 'Alegreya Sans', sans-serif; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inkt-zacht); margin-top: 0.6rem; }

/* --- Reviews: uitgelicht citaat + twee kleinere --- */
.reviews-uitgelicht { display: grid; gap: 1.6rem; margin-top: 3rem; }
@media (min-width: 920px) { .reviews-uitgelicht { grid-template-columns: 1.45fr 1fr; align-items: stretch; } }
.review-groot { padding: 2.6rem 2.4rem; display: flex; flex-direction: column; justify-content: center; }
.review-groot .aanh { font-family: 'Cinzel', serif; font-size: 3.4rem; line-height: 0.3; color: var(--goud-500); display: block; padding-top: 1.6rem; }
.review-groot blockquote { font-size: clamp(1.3rem, 1.9vw, 1.72rem); font-style: italic; line-height: 1.5; margin-top: 0.6rem; }
.review-groot figcaption { margin-top: 1.6rem; font-family: 'Alegreya Sans', sans-serif; font-size: 0.92rem; }
.review-groot figcaption strong { display: block; }
.reviews-klein { display: grid; gap: 1.6rem; }
.review-klein { padding: 1.7rem 1.6rem; }
.review-klein blockquote { font-style: italic; line-height: 1.55; }
.review-klein figcaption { margin-top: 1rem; font-family: 'Alegreya Sans', sans-serif; font-size: 0.86rem; }
.review-klein figcaption strong { display: block; }
/* Op mobiel: alle reviews even groot (geen uitgelicht citaat) */
@media (max-width: 919px) {
  .review-groot { padding: 1.7rem 1.6rem; }
  .review-groot .aanh { display: none; }
  .review-groot blockquote { font-size: 1.05rem; font-style: italic; line-height: 1.55; margin-top: 0; }
  .review-groot figcaption { margin-top: 1rem; font-size: 0.86rem; }
  .reviews-uitgelicht { gap: 1.6rem; }
}
.donker .review-groot blockquote, .donker .review-klein blockquote { color: var(--papier); }
.donker .review-groot figcaption, .donker .review-klein figcaption { color: rgba(244,234,209,0.7); }
.review-groot figcaption strong, .review-klein figcaption strong { color: var(--rood); }
.donker .review-groot figcaption strong, .donker .review-klein figcaption strong { color: var(--goud-300); }

/* --- Mobiel: routelijn & hero verfijnen --- */
@media (max-width: 640px) {
  .hero-frame { inset: 0.9rem; }
  .route-stap { padding-left: 4rem; }
  .hoofdstuk { margin-bottom: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) { .route-wp { transition: none; } }

/* ============================================================
   Feedbackronde aug. 2026 — nieuwe componenten
   ============================================================ */

/* --- Persoonlijke samenwerking (home): beeld + Vooraf/Op de dag --- */
.samenwerking { display: grid; grid-template-columns: 1fr; gap: 2.6rem; align-items: start; }
@media (min-width: 920px) { .samenwerking { grid-template-columns: 1fr 1.28fr; gap: 3.4rem; align-items: center; } }
@media (min-width: 920px) { .sw-beeld .paneel { display: block; } }
.sw-beeld { margin: 0; }
.sw-beeld .paneel { padding: 0.6rem; display: inline-block; }
.sw-beeld img { display: block; width: 100%; height: auto; border-radius: 2px; }
.sw-beeld figcaption { margin-top: 1rem; text-align: center; font-family: 'Alegreya Sans', sans-serif; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--inkt-zacht); }
.sw-stappen { display: grid; grid-template-columns: 1fr; gap: 2.2rem; }
@media (min-width: 620px) { .sw-stappen { grid-template-columns: 1fr 1fr; gap: 2.4rem; } }
.sw-blok h3 { font-family: 'Alegreya', Georgia, serif; font-weight: 700; font-size: 1.34rem; line-height: 1.2; display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.sw-fase { font-family: 'Alegreya Sans', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rood); }
.sw-blok ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.72rem; }
.sw-blok li { position: relative; padding-left: 1.45rem; color: var(--inkt-zacht); font-size: 1.02rem; line-height: 1.55; }
.sw-blok li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--goud-500); transform: rotate(45deg); }

/* --- Optionele vijfde stap onder 'Zo werkt het' (visueel onderscheiden) --- */
.route-optie { max-width: 50rem; margin: 1.8rem 0 0; display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.3rem 1.5rem; border: 1px dashed rgba(165,131,53,0.65); border-radius: 4px; background: rgba(247,240,224,0.55); }
.route-optie .optie-label { flex: none; align-self: flex-start; font-family: 'Alegreya Sans', sans-serif; font-weight: 700; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--goud-tekst-label); background: rgba(220,185,104,0.2); border: 1px solid rgba(165,131,53,0.55); border-radius: 2px; padding: 0.32rem 0.55rem; margin-top: 0.15rem; }
.route-optie h3 { font-family: 'Alegreya', Georgia, serif; font-weight: 700; font-size: 1.18rem; margin-bottom: 0.3rem; }
.route-optie p { color: var(--inkt-zacht); font-size: 1rem; line-height: 1.55; margin: 0; }
@media (max-width: 520px) { .route-optie { flex-direction: column; gap: 0.7rem; } }
@media (min-width: 900px) { .route-optie { margin-left: auto; margin-right: auto; margin-top: 3rem; } }

/* --- Tijdelijke profielblokken (Ons verhaal): duidelijk vervangbaar --- */
.profielen { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 3.4rem; }
@media (min-width: 720px) { .profielen { grid-template-columns: 1fr 1fr; gap: 2.6rem; } }
.profiel { display: flex; gap: 1.3rem; align-items: flex-start; }
.profiel-foto { flex: none; width: 100px; height: 128px; border-radius: 3px; border: 1px dashed rgba(165,131,53,0.65); background: repeating-linear-gradient(135deg, rgba(220,185,104,0.07) 0 8px, rgba(220,185,104,0.14) 8px 16px); display: flex; align-items: center; justify-content: center; text-align: center; }
.profiel-foto span { font-family: 'Alegreya Sans', sans-serif; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--goud-tekst-profiel); }
.profiel h3 { font-family: 'Alegreya', Georgia, serif; font-weight: 700; font-size: 1.42rem; }
.profiel-rol { color: var(--rood); font-size: 0.92rem; margin: 0.2rem 0 0.7rem; }

/* --- WebP-achtergronden via image-set (jpg-regels hierboven zijn de fallback) --- */
.hero, .paginahero.op-scene, .eind { background-image: image-set(url('img/hero-desk.webp') type('image/webp'), url('img/hero-desk.jpg') type('image/jpeg')); }
/* Per-pagina scene-hero-uitsneden (variatie; tussenstap vóór eventuele nieuwe scenes) */
.paginahero.op-scene.hero-praktisch { background-image: image-set(url('img/scene-praktisch.webp') type('image/webp'), url('img/scene-praktisch.jpg') type('image/jpeg')); }
.paginahero.op-scene.hero-verhaal { background-image: image-set(url('img/scene-verhaal.webp') type('image/webp'), url('img/scene-verhaal.jpg') type('image/jpeg')); }
.paginahero.op-scene.hero-aanvraag { background-image: image-set(url('img/scene-aanvraag.webp') type('image/webp'), url('img/scene-aanvraag.jpg') type('image/jpeg')); }
@media (max-width: 640px) { .hero { background-image: image-set(url('img/hero-mob.webp') type('image/webp'), url('img/hero-mob.jpg') type('image/jpeg')); } }
.met-kaart::before { background-image: image-set(url('img/kaart-groot.webp') type('image/webp'), url('img/kaart-groot.jpg') type('image/jpeg')); }
body { background-image: image-set(url('img/parchment.webp') type('image/webp'), url('img/parchment.jpg') type('image/jpeg')); }

/* --- Kernwaarden-kaarten op donker: leesbare koppen + cursieve accentregel --- */
.donker .kaart h3 { color: var(--papier-licht); }
.donker .kaart p em { color: var(--goud-300); font-style: italic; }

/* --- Taakverdeling (Praktische info): verfijnde panelen i.p.v. ruwe opsomming --- */
.taakverdeling { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-top: 2.6rem; }
@media (min-width: 760px) { .taakverdeling { grid-template-columns: 1.12fr 0.88fr; gap: 1.6rem; align-items: start; } }
.taak-kop { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.9rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(165,131,53,0.28); }
.taak-kop h3 { margin: 0; font-size: 1.2rem; }
.taak-ico { flex: none; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(165,131,53,0.4); background: radial-gradient(circle at 35% 30%, rgba(220,185,104,0.2), rgba(220,185,104,0.06)); color: var(--goud-600); }
.taak-ico svg { width: 20px; height: 20px; }
.taak-wij .taak-ico { color: var(--groen); border-color: rgba(63,125,79,0.35); background: radial-gradient(circle at 35% 30%, rgba(63,125,79,0.15), rgba(63,125,79,0.04)); }
.taak-lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.68rem; }
.taak-lijst li { position: relative; padding-left: 1.75rem; color: var(--inkt-zacht); font-size: 1.02rem; line-height: 1.5; }
.taak-wij .taak-lijst li::before { content: ''; position: absolute; left: 0.4rem; top: 0.12em; width: 0.5rem; height: 0.85rem; border: solid var(--goud-600); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.taak-samen .taak-lijst li::before { content: ''; position: absolute; left: 0.3rem; top: 0.5em; width: 7px; height: 7px; background: var(--goud-500); transform: rotate(45deg); }

/* --- Juridische pagina's (privacy/voorwaarden/disclaimer): rustige, leesbare prose --- */
.juridisch { font-size: 1.02rem; }
.juridisch h2 { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.35rem; letter-spacing: 0; line-height: 1.25; margin: 2.6rem 0 0.7rem; color: var(--inkt); }
.juridisch > h2:first-child { margin-top: 0.5rem; }
.juridisch p { margin: 0.7rem 0; color: var(--inkt-zacht); line-height: 1.65; }
.juridisch ul { margin: 0.5rem 0 1rem; padding-left: 0; list-style: none; display: grid; gap: 0.42rem; }
.juridisch li { position: relative; padding-left: 1.45rem; color: var(--inkt-zacht); line-height: 1.55; }
.juridisch li::before { content: ''; position: absolute; left: 0.28rem; top: 0.62em; width: 5px; height: 5px; background: var(--goud-500); transform: rotate(45deg); }
.juridisch a { color: var(--rood); }

/* --- Losse 'moment'-foto's (deelnemers in actie), verspreid over de pagina's --- */
.moment { max-width: 24rem; margin: 2.8rem auto 0; }
.moment.breed { max-width: 34rem; }
.moment .paneel { padding: 0.55rem; transition: transform 260ms ease; transform: rotate(-1.2deg); }
.moment:hover .paneel { transform: rotate(0); }
.moment img { display: block; width: 100%; height: auto; border-radius: 2px; }
.moment figcaption { text-align: center; margin-top: 0.9rem; font-family: 'Alegreya Sans', sans-serif; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--inkt-zacht); }
.donker .moment figcaption { color: var(--goud-300); }
@media (prefers-reduced-motion: reduce) { .moment .paneel, .moment:hover .paneel { transform: none; } }

/* --- Subtiele hover-vergroting voor losstaande, ingelijste foto's (scorecard,
   koning-portret e.d.) — zelfde principe als .gal, maar voor een los kader i.p.v.
   een grid. Alleen transform (geen layout-eigenschappen), dus geen verspringende
   tekst; overflow:hidden houdt de vergroting binnen het kader. --- */
.beeld-hover .paneel, .beeld-hover .paneel-donker { overflow: hidden; }
.beeld-hover img { transition: transform 420ms cubic-bezier(0.22,1,0.36,1); }
.beeld-hover:hover img { transform: scale(1.035); }

/* --- Voor teams: gestapelde tegels naast verticale foto --- */
.teams-blok { margin-top: 3rem; display: grid; gap: 2rem; }
.teams-tegels { display: grid; gap: 1.3rem; }
.teams-beeld { margin: 0 auto; max-width: 19rem; }
.teams-beeld .paneel { padding: 0.55rem; transform: rotate(-1.2deg); transition: transform 260ms ease; }
.teams-beeld:hover .paneel { transform: rotate(0); }
.teams-beeld img { display: block; width: 100%; height: auto; border-radius: 2px; }
.teams-beeld figcaption { text-align: center; margin-top: 0.9rem; font-family: 'Alegreya Sans', sans-serif; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--inkt-zacht); }
@media (min-width: 900px) {
  .teams-blok { grid-template-columns: 1.5fr 1fr; gap: 2.8rem; align-items: center; }
  .teams-tegels { grid-column: 1; grid-row: 1; }
  .teams-beeld { grid-column: 2; grid-row: 1; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .teams-beeld .paneel, .teams-beeld:hover .paneel { transform: none; } }

/* --- Rolkaarten-carrousel (Het spel) --- */
.rol-carrousel { position: relative; margin-top: 2.6rem; --kaart-b: min(30rem, 82vw); }
@media (min-width: 760px) { .rol-carrousel { --kaart-b: min(42rem, 60vw); } }
.rol-frame { position: relative; }
/* Standaard (geen/pre-JS): zichtbare scrollrij zodat alle kaarten bereikbaar zijn */
.rol-spoor { display: flex; gap: 1.2rem; list-style: none; margin: 0; padding: 1.4rem 0.3rem 1.8rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rol-spoor::-webkit-scrollbar { display: none; }
.rol-kaart { flex: 0 0 min(30rem, 82vw); scroll-snap-align: center; }
.rol-kaart figure { margin: 0; border-radius: 8px; overflow: hidden; background: #2a1f16; box-shadow: 0 22px 48px -20px rgba(24,18,12,0.7), 0 6px 16px -9px rgba(24,18,12,0.5); }
.rol-kaart img { display: block; width: 100%; height: auto; }
/* JS-deck: actieve kaart vooraan en gecentreerd, buren erachter (diepte) */
.rol-spoor.js-klaar { display: block; position: relative; height: calc(var(--kaart-b) * 0.721 + 2rem); padding: 0; overflow: visible; scroll-snap-type: none; perspective: 1600px; touch-action: pan-y; }
.rol-spoor.js-klaar .rol-kaart { position: absolute; top: 50%; left: 50%; width: var(--kaart-b); flex: none; transform: translate(-50%, -50%); transition: transform 540ms cubic-bezier(0.22,1,0.36,1), opacity 540ms ease; will-change: transform, opacity; }
.rol-spoor.js-klaar .rol-kaart:not(.is-actief) { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .rol-spoor.js-klaar .rol-kaart { transition: opacity 240ms ease; } }
.rol-pijl { position: absolute; top: 50%; transform: translateY(-50%); z-index: 40; width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Alegreya', Georgia, serif; font-size: 1.7rem; line-height: 0; padding-bottom: 0.18em; color: var(--papier-licht); background: radial-gradient(circle at 35% 30%, var(--rood), var(--rood-diep)); border: 1px solid var(--goud-500); box-shadow: 0 8px 20px -8px rgba(108,26,21,0.7); cursor: pointer; transition: transform 200ms ease, opacity 200ms ease; }
.rol-pijl:hover { transform: translateY(-50%) scale(1.07); }
.rol-pijl:focus-visible { outline: 2px solid var(--goud-500); outline-offset: 3px; }
.rol-pijl:disabled { opacity: 0.32; cursor: default; }
.rol-pijl[hidden] { display: none; }
.rol-vorige { left: 0.3rem; }
.rol-volgende { right: 0.3rem; }
@media (min-width: 760px) { .rol-vorige { left: 1.1rem; } .rol-volgende { right: 1.1rem; } }
.rol-stippen { display: flex; justify-content: center; gap: 0.85rem; margin-top: 0.2rem; min-height: 0.7rem; }
.rol-stip { position: relative; width: 0.62rem; height: 0.62rem; border-radius: 50%; border: 1px solid var(--goud-600); background: transparent; padding: 0; cursor: pointer; transition: background 220ms ease, transform 220ms ease; }
.rol-stip::before { content: ''; position: absolute; inset: -9px; }
.rol-stip.actief { background: var(--goud-500); transform: scale(1.18); }
.rol-stip:focus-visible { outline: 2px solid var(--goud-500); outline-offset: 2px; }
.rol-hint { text-align: center; margin-top: 0.95rem; font-family: 'Alegreya Sans', sans-serif; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--inkt-zacht); transition: opacity 400ms ease; }
.rol-hint.weg { opacity: 0; }

/* --- Werktafel (Ons verhaal · "Kwaliteit zit in het vakwerk") ---
   Eén samenhangende compositie i.p.v. een fotogalerij: echte spelmaterialen die
   overlappen alsof ze op een tafel liggen, met het verkennersboek als bladerbaar
   middelpunt. Zie DECISIONS.md voor de asset-afwegingen. */
.vakwerk-layout { display: grid; gap: 2.6rem; }
@media (min-width: 960px) { .vakwerk-layout { grid-template-columns: 0.78fr 1.3fr; gap: 3.2rem; align-items: center; } }
.vakwerk-tekst .inleiding { margin-top: 1rem; }
.vakwerk-hint { margin-top: 1.1rem; font-family: 'Alegreya Sans', sans-serif; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--goud-300); }

.werktafel { --wt-w: min(34rem, 100%); margin: 0 auto; width: var(--wt-w); }
.wt-stage { position: relative; aspect-ratio: 10 / 9; }
.wt-obj { position: absolute; margin: 0; filter: drop-shadow(0 18px 30px rgba(10,7,4,0.55)); transition: transform 260ms ease; }
.wt-obj .paneel { padding: 0.4rem; }
.wt-obj img { display: block; width: 100%; height: auto; border-radius: 2px; }
.wt-obj:hover, .wt-obj:focus-within { transform: translateY(-3px) scale(1.02); }

.wt-kaart { width: 33%; left: 0; bottom: 2%; transform: rotate(-7deg); z-index: 1; }
.wt-kaart:hover { transform: rotate(-7deg) translateY(-3px) scale(1.02); }
.wt-score { width: 28%; right: 1%; bottom: -1%; transform: rotate(6deg); z-index: 1; }
.wt-score:hover { transform: rotate(6deg) translateY(-3px) scale(1.02); }
.wt-rol { width: 29%; z-index: 2; }
.wt-rol-veldheer { left: -3%; top: 4%; transform: rotate(-9deg); }
.wt-rol-veldheer:hover { transform: rotate(-9deg) translateY(-3px) scale(1.02); }
.wt-rol-archivaris { right: -3%; top: -2%; transform: rotate(8deg); }
.wt-rol-archivaris:hover { transform: rotate(8deg) translateY(-3px) scale(1.02); }
.wt-zegel { position: absolute; width: 11%; left: 44.5%; bottom: 2%; z-index: 3; transform: rotate(-4deg); filter: drop-shadow(0 10px 16px rgba(10,7,4,0.5)); }

/* Losse notitie op de werktafel: een echt stukje papier, geen zwevend glaspaneel —
   crème, met een eigen slagschaduw (zoals de foto's) en een stukje "plakband" boven. */
.wt-notitie {
  position: absolute; margin: 0; z-index: 4; width: 11rem;
  font-family: 'Alegreya Sans', sans-serif; font-size: 0.74rem; line-height: 1.5;
  color: var(--inkt-zacht); background: var(--papier-licht);
  border: 1px solid rgba(76,64,50,0.16); border-radius: 2px;
  padding: 0.8rem 0.85rem 0.7rem;
  box-shadow: 0 16px 28px -14px rgba(10,7,4,0.6), inset 0 1px 0 rgba(255,255,255,0.6);
  transform: rotate(var(--wt-notitie-rot, -2deg));
  transition: transform 260ms ease;
}
.wt-notitie:hover, .wt-notitie:focus-within { transform: rotate(var(--wt-notitie-rot, -2deg)) translateY(-3px) scale(1.02); }
.wt-notitie::before {
  content: ''; position: absolute; top: -0.55rem; left: 50%; width: 2.4rem; height: 0.85rem;
  background: rgba(220,185,104,0.5); transform: translateX(-50%) rotate(-2deg);
  box-shadow: 0 2px 4px rgba(20,16,11,0.25);
}
.wt-notitie b { display: block; font-family: 'Alegreya', Georgia, serif; font-weight: 700; font-size: 0.92rem; color: var(--rood); margin-bottom: 0.25rem; }
.wt-notitie-rollen { right: -13%; top: 36%; --wt-notitie-rot: 2.5deg; }
.wt-notitie-getest { left: -7%; bottom: 21%; --wt-notitie-rot: -2.5deg; }
/* Tussen de mobiele stapel-layout (<960px) en brede desktop schaalt de werktafel-kolom
   te krap voor de volle -13%/-7%-uitsprong — de notities knippen dan af buiten de
   pagina. Alleen in dat tussenbereik dichter naar de tafel toe trekken. */
@media (min-width: 960px) and (max-width: 1279px) {
  .wt-notitie-rollen { right: -7%; }
  .wt-notitie-getest { left: -4%; }
}

.wt-boek { position: absolute; left: 50%; top: 50%; width: 48%; transform: translate(-50%, -50%); z-index: 5; }
/* `overflow: clip` + `overflow-clip-margin` i.p.v. `overflow: hidden`: een pagina
   die om de rug draait steekt door het perspectief een paar tientallen pixels
   buiten het platte rechthoekje uit (de verre rand komt naar de kijker toe en
   wordt dus geprojecteerd vergroot). Met `hidden` werden juist de hoeken van de
   draaiende pagina hard afgekapt — precies het detail dat de illusie draagt.
   `overflow-clip-margin` schuift de kniprand naar buiten zonder de layout, de
   achtergrond of de slagschaduw te verplaatsen (clip-path zou de box-shadow wél
   meeknippen). De `hidden`-regel blijft ervoor staan als fallback voor engines
   zonder `overflow: clip`. */
.wt-boek-venster { position: relative; border-radius: 4px; overflow: hidden; overflow: clip; overflow-clip-margin: 3.5rem; box-shadow: 0 26px 50px -16px rgba(10,7,4,0.7), 0 2px 0 rgba(220,185,104,0.25); }
.wt-boek-venster:focus-visible { outline: 2px solid var(--goud-500); outline-offset: 3px; }
/* Zonder JS: beide pagina's gewoon onder elkaar, niets verborgen (zie CLAUDE.md
   progressive-enhancement-regel — de klasse/state die verbergt komt uitsluitend
   van hetzelfde script dat ook weer toont). Pas ná html.js wordt dit een
   bladerbare, gecrossfadede viewer. */
.wt-pagina { display: block; margin-bottom: 0.8rem; }
.wt-pagina:last-child { margin-bottom: 0; }
.wt-pagina img { display: block; width: 100%; height: auto; border-radius: 4px; }
/* Portret-verhouding: alle boekpagina's zijn nu staand (5:7, zelfde als de losse
   scans), i.p.v. de eerdere landschap-verhouding die stond op te lossen liggende
   pagina's horizontaal liet inklemmen. Perspective + rotateY geeft een bladeranimatie
   i.p.v. een vlakke crossfade — pagina's draaien om de linker rand, zoals een echte
   boekrug. */
html.js .wt-boek-venster {
  aspect-ratio: 5 / 7; background: var(--leer-800);
  /* Perspectief-afstand. Gemeten op de uiterste stand (--wt-weg, -88°): met
     1800px groeide de draaiende pagina 31px (desktop) tot 56px (tablet/mobiel)
     boven en onder het venster uit; met 3600px is dat nog 14px resp. 19px. De
     draai blijft even ruimtelijk — de verkorting komt van de rotatie zelf, niet
     van de perspectief-afstand; alleen de keystone (het uitwaaieren van de verre
     rand) wordt rustiger. De rest van de uitloop vangt overflow-clip-margin op.
     De waarde hoort mee te schalen met de boekbreedte: mobiel is het boek
     breder, dus daar staat verderop een hogere waarde. */
  perspective: 3600px;
  /* Draaistanden van één pagina, als tokens zodat de animatie op één plek te
     stemmen is. --wt-weg blijft bewust onder 90°: daarboven pakt
     backface-visibility de pagina af en klapt hij er in één frame uit. */
  --wt-weg: -88deg;   /* omgeslagen: om de rug heen op de gelezen stapel links */
  --wt-wacht: 44deg;  /* nog dicht: rechterrand nog van de kijker af gekanteld */
  --wt-duur: 620ms;
  /* Zonder dit claimt de browser de horizontale veeg zelf (scroll/terug-gebaar) en
     stuurt hij pointercancel i.p.v. pointerup — de veegcode in concept.js kwam dan
     nooit aan bod en vegen deed op touch niets. pan-y houdt verticaal scrollen
     intact, pinch-zoom houdt inzoomen mogelijk. */
  touch-action: pan-y pinch-zoom;
}
/* Richtingsgevoelige bladeranimatie. Twee dingen samen bepalen of een draai als
   "vooruit" of "terug" leest:

   1. de eindstand. De pagina die je verlaat zwaait bij vooruitbladeren om de rug
      naar links wég (negatieve rotateY: rechterrand naar de kijker toe en dan
      over de rug), bij terugbladeren kantelt hij juist naar rechts terug
      (positieve rotateY). Dat deel volgt vanzelf uit de index-klassen.
   2. wélke pagina bovenop ligt tijdens de draai. Hier zat de eigenlijke bug:
      zonder z-index bepaalt de DOM-volgorde de stapeling, dus bij vooruitbladeren
      verdween de oude pagina ONDER de nieuwe ("er schuift iets overheen") en bij
      terugbladeren lag de oude er juist bovenop (dát las als bladeren). Vooruit
      en terug zagen er daardoor omgekeerd uit. De pagina die draait hoort altijd
      bovenop te liggen — vooruit is dat de verlaten pagina, terug de pagina die
      terugvalt. Vandaar data-richting op het boek, gezet door concept.js.

   Alleen de twee betrokken pagina's animeren (.is-actief + .is-verlaten); de rest
   springt zonder transition naar zijn plek, anders klappert bij een sprong
   (laatste pagina → omslag) het hele boek tegelijk. */
html.js .wt-pagina {
  position: absolute; inset: 0; opacity: 0; margin: 0; z-index: 1;
  transform-origin: left center;
  transition: none;
  backface-visibility: hidden;
}
html.js .wt-pagina img { height: 100%; object-fit: contain; border-radius: 0; }
html.js .wt-pagina.is-komend { transform: rotateY(var(--wt-wacht)); }
html.js .wt-pagina.is-voorbij { transform: rotateY(var(--wt-weg)); }
html.js .wt-pagina.is-actief { opacity: 1; cursor: pointer; transform: rotateY(0deg); z-index: 2; }
/* De inkomende pagina krijgt géén opacity-transition: die stond eerst op 300ms
   naast een 520ms draai, en die crossfade overstemde de draai (het las als een
   wiebelende fade i.p.v. een omslaande pagina). Vooruit ligt de nieuwe pagina bij
   t=0 tóch volledig achter de nog vlakke oude, en terug komt hij als randje uit de
   rug tevoorschijn — in beide gevallen is direct-zichtbaar het eerlijke beeld. */
html.js .wt-pagina.is-actief { transition: transform var(--wt-duur) cubic-bezier(0.34, 0.05, 0.4, 1); }
/* De verlaten pagina dooft pas ná ~2/3 van de draai, zodat je de draai zelf ziet
   (0° → ruwweg -75° zichtbaar) en de pagina daarna wegvalt in plaats van al
   halverwege te verdampen. */
html.js .wt-pagina.is-verlaten {
  transition: transform var(--wt-duur) cubic-bezier(0.42, 0.03, 0.55, 0.96),
              opacity 190ms linear 400ms;
}
html.js [data-richting="vooruit"] .wt-pagina.is-verlaten { z-index: 3; }
html.js [data-richting="terug"] .wt-pagina.is-actief { z-index: 3; }
/* Vouwschaduw: papier vangt bij de rug minder licht zodra het van het boek af
   kantelt. Alleen ná html.js, want zonder JS is .wt-pagina niet gepositioneerd en
   zou dit verloopje ergens anders op de pagina landen. */
html.js .wt-pagina::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(14,9,5,0.55) 0%, rgba(14,9,5,0.16) 30%, rgba(14,9,5,0) 62%);
  opacity: 0; transition: opacity 260ms ease;
  /* Boven de vervaagde kopie uit (.wt-pagina-vaag::before staat op z-index 1):
     de vouwschaduw hoort over álle paginalagen te vallen, niet eronder. */
  z-index: 2;
}
html.js .wt-pagina:not(.is-actief)::after { opacity: 1; }
/* Bladerknoppen zijn zonder JS zinloos (er valt niets "verder" te bladeren —
   alle pagina's staan al gewoon onder elkaar) — daarom pas tonen ná html.js,
   zelfde principe als hierboven bij .wt-pagina. */
.wt-pijl { display: none; }
/* De zichtbare teller ("1 / 6 · Omslag") is eruit; het label blijft bestaan omdat
   het met aria-live aan schermlezers vertelt wélke pagina nu voorligt. Visueel
   verbergen volgens hetzelfde patroon als .faq-zoek-label hierboven — niet
   display:none, want dan valt het uit de toegankelijkheidsboom en wordt er niets
   meer aangekondigd. Zonder JS bladert er niets, dus dan ook niets aankondigen. */
.wt-boek-label { display: none; }
html.js .wt-boek-label { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.js .wt-pijl { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 2.75rem; height: 2.75rem; border-radius: 50%; font-family: 'Alegreya', Georgia, serif; font-size: 1.4rem; line-height: 0; padding-bottom: 0.15em; color: var(--papier-licht); background: radial-gradient(circle at 35% 30%, var(--rood), var(--rood-diep)); border: 1px solid var(--goud-500); box-shadow: 0 8px 20px -8px rgba(108,26,21,0.7); cursor: pointer; transition: transform 200ms ease; }
.wt-pijl:hover { transform: translateY(-50%) scale(1.08); }
.wt-pijl:focus-visible { outline: 2px solid var(--goud-500); outline-offset: 3px; }
.wt-pijl:disabled { opacity: 0.32; cursor: default; }
.wt-pijl[hidden] { display: none; }
.wt-vorige { left: -1.25rem; }
.wt-volgende { right: -1.25rem; }
/* Mobiel staat het boek bijna zo breed als het scherm, dus de knoppen hadden hier
   juist de kléínste uitsprong (-0.5rem): van de 44px-knop lag dan 36px óver het
   boek — hij las als een sticker op de pagina i.p.v. als bediening ernaast.
   -1.5rem laat nog 20px overlappen (45%, iets ruimer dan desktop) zodat de knop
   visueel losser van de bladzijde staat maar wél bij het boek blijft horen.
   Gemeten op 360px (het smalste doel): boekrand op 52px, knop dan op 28-72px —
   nog 28px speling tot de schermrand, dus geen afknippen door `overflow-x: clip`
   op <body>. De knop zelf blijft 44x44 (touch-target), alleen de plek verschuift. */
@media (max-width: 480px) { .wt-vorige { left: -1.5rem; } .wt-volgende { right: -1.5rem; } }

/* De puzzelpagina's (Spelregels, Water, Religie, Arbeid) staan er als sfeerbeeld,
   niet om te lezen: onleesbaar vervagen, maar wel herkenbaar als beschreven blad.
   De filter zit bewust op de <img> (en hieronder op ::before) en niet op
   .wt-pagina — een filter op een element in de perspective/3D-context platst in
   sommige engines de hele draai.

   Zonder JS staan alle pagina's gewoon onder elkaar; daar is geen tweede laag om
   een scherpe rand mee te maken, dus vervaagt het hele blad. Dat blijft de veilige
   variant: de puzzeltekst is ook dan onleesbaar. */
.wt-pagina-vaag img { filter: blur(2.5px); }

/* Mét JS: scherp blad als basis, met daarbovenop een vervaagde kopie van
   dezelfde scan die via mask-image alleen het middenvlak dekt. Resultaat: een
   scherpe rand van 7–9% rondom en een vervaagd hart. Eén filter op de hele
   <img> kan dit niet — die vervaagt per definitie tot aan de rand.
   De kopie zit in een ::before met background-image i.p.v. een tweede <picture>,
   zodat de webp/jpg-bronnen niet in de HTML gedupliceerd hoeven te worden. */
html.js .wt-pagina-vaag img { filter: none; }
html.js .wt-pagina-vaag::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  /* Boven de scherpe <img>, onder de vouwschaduw (::after, z-index 2). */
  z-index: 1;
  /* Zelfde pasvorm als `html.js .wt-pagina img` (height:100% + object-fit:contain). */
  background-position: center; background-repeat: no-repeat; background-size: contain;
  filter: blur(2.5px);
  /* Vier zijden in twee verlopen, doorsnede genomen: volledig doorzichtig (=
     scherp blad zichtbaar) tot 3%, volledig dekkend (= vervaagd) vanaf 9,5%.

     DE 9,5% IS DE HARDE GRENS EN MAG NOOIT LATER. Gemeten op de vier scans: de
     sierlijst met de hoekhaken zit op 5,7%–6,9% van de rand en de eigenlijke
     tekstkolom begint pas op 10,0%–12,6%. Het masker moet dus uiterlijk op 9,5%
     volledig dekkend zijn, anders wordt op de Spelregels- en de Arbeid-scan (de
     twee krapste) het eerste woord van elke regel weer leesbaar — precies wat
     8/13 destijds fout deed. Ruimer nemen dan 9,5% is geen optie.

     De overgang zelf stond eerst op 7%→9,5%: 2,5 procentpunt, en dat las als een
     knip tussen scherp en vaag i.p.v. als een verloop. Nu 3%→9,5% (6,5 pp, ruim
     2,5x zo breed). De enige veilige richting om te verbreden is het BEGIN naar
     de rand toe trekken; het eindpunt blijft op 9,5% staan.

     Waarom tussenstops en geen rechte lijn van 3% naar 9,5%: een lineair verloop
     over die afstand zet de sierlijst (5,7–6,9%) al op ~40-50% dekking, en die
     lijst verzacht dan zichtbaar mee — precies het detail dat de scherpe rand
     geloofwaardig maakt. Met een ease-in-curve (0,06 → 0,20 → 0,45 → 0,75 → 1)
     ligt het zwaartepunt in de tweede helft: op de sierlijst nog maar 6–20%
     dekking, dus die blijft praktisch haarscherp, terwijl het verloop wél over
     de volle 6,5 pp aanzet en daardoor als echte veer leest.

     Veiligheidscontrole: deze curve is op ELK punt tussen 7% en 9,5% dekkender
     dan de oude lineaire (7,9%: 0,45 vs 0,36 · 8,6%: 0,71 vs 0,64 · 9,0%: 0,84
     vs 0,80), en vóór 7% voegt hij vervaging toe waar er eerst geen was. De
     verhulling kan met deze wijziging dus alleen toenemen, nooit afnemen.

     De achterrand spiegelt de voorrand punt voor punt (100 − x). */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0 3%, rgba(0,0,0,0.06) 5.5%, rgba(0,0,0,0.2) 6.9%, rgba(0,0,0,0.45) 7.9%, rgba(0,0,0,0.75) 8.7%, #000 9.5% 90.5%, rgba(0,0,0,0.75) 91.3%, rgba(0,0,0,0.45) 92.1%, rgba(0,0,0,0.2) 93.1%, rgba(0,0,0,0.06) 94.5%, transparent 97% 100%),
    linear-gradient(to bottom, transparent 0 3%, rgba(0,0,0,0.06) 5.5%, rgba(0,0,0,0.2) 6.9%, rgba(0,0,0,0.45) 7.9%, rgba(0,0,0,0.75) 8.7%, #000 9.5% 90.5%, rgba(0,0,0,0.75) 91.3%, rgba(0,0,0,0.45) 92.1%, rgba(0,0,0,0.2) 93.1%, rgba(0,0,0,0.06) 94.5%, transparent 97% 100%);
  mask-image:
    linear-gradient(to right, transparent 0 3%, rgba(0,0,0,0.06) 5.5%, rgba(0,0,0,0.2) 6.9%, rgba(0,0,0,0.45) 7.9%, rgba(0,0,0,0.75) 8.7%, #000 9.5% 90.5%, rgba(0,0,0,0.75) 91.3%, rgba(0,0,0,0.45) 92.1%, rgba(0,0,0,0.2) 93.1%, rgba(0,0,0,0.06) 94.5%, transparent 97% 100%),
    linear-gradient(to bottom, transparent 0 3%, rgba(0,0,0,0.06) 5.5%, rgba(0,0,0,0.2) 6.9%, rgba(0,0,0,0.45) 7.9%, rgba(0,0,0,0.75) 8.7%, #000 9.5% 90.5%, rgba(0,0,0,0.75) 91.3%, rgba(0,0,0,0.45) 92.1%, rgba(0,0,0,0.2) 93.1%, rgba(0,0,0,0.06) 94.5%, transparent 97% 100%);
  /* Zonder ondersteuning voor mask-composite tellen de twee lagen bij elkaar op
     i.p.v. elkaar te snijden: dan blijven alleen de hoeken scherp en loopt de
     vervaging tot aan de randen. Dat is precies de oude situatie — degradeert dus
     naar méér verhullen, nooit naar minder. */
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* jpg-regel eerst als fallback, image-set erna — zelfde patroon als de
   WebP-achtergronden verderop in dit bestand. */
html.js .wt-pagina-vaag[data-pagina="2"]::before { background-image: url('img/verkennersboek-regels.jpg'); background-image: image-set(url('img/verkennersboek-regels.webp') type('image/webp'), url('img/verkennersboek-regels.jpg') type('image/jpeg')); }
html.js .wt-pagina-vaag[data-pagina="3"]::before { background-image: url('img/verkennersboek-water.jpg'); background-image: image-set(url('img/verkennersboek-water.webp') type('image/webp'), url('img/verkennersboek-water.jpg') type('image/jpeg')); }
html.js .wt-pagina-vaag[data-pagina="4"]::before { background-image: url('img/verkennersboek-religie.jpg'); background-image: image-set(url('img/verkennersboek-religie.webp') type('image/webp'), url('img/verkennersboek-religie.jpg') type('image/jpeg')); }
html.js .wt-pagina-vaag[data-pagina="5"]::before { background-image: url('img/verkennersboek-arbeid.jpg'); background-image: image-set(url('img/verkennersboek-arbeid.webp') type('image/webp'), url('img/verkennersboek-arbeid.jpg') type('image/jpeg')); }

/* De draai-states hebben een hogere specificiteit dan `html.js .wt-pagina`, dus
   die moeten hier stuk voor stuk genoemd worden, anders blijft de animatie bij
   prefers-reduced-motion gewoon spelen. */
@media (prefers-reduced-motion: reduce) {
  .wt-obj, .wt-pijl { transition: none; }
  html.js .wt-pagina,
  html.js .wt-pagina.is-actief,
  html.js .wt-pagina.is-verlaten,
  html.js .wt-pagina::after { transition: none; }
}

/* Mobiel/tablet: geen overlap-compositie — rustige stapel, boek dominant, twee
   ondersteunende objecten eronder. Minder is hier duidelijker dan verkleind alles. */
@media (max-width: 959px) {
  .werktafel { --wt-w: min(26rem, 100%); }
  .wt-stage { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
  .wt-boek { position: relative; left: auto; top: auto; transform: none; width: 82%; order: 1; }
  /* Het boek is hier bréder dan op desktop (82% van 26rem vs 48% van 34rem), en
     de perspectiefvervorming schaalt met de paginabreedte. Zonder deze correctie
     zou de draai mobiel merkbaar boller staan en verder buiten het boek uitlopen
     dan op desktop. Verhouding perspective : paginabreedte blijft ~14. */
  html.js .wt-boek-venster { perspective: 4700px; }
  .wt-kaart, .wt-score { position: static; width: 44%; filter: drop-shadow(0 14px 22px rgba(10,7,4,0.5)); }
  .wt-kaart { transform: rotate(-3deg); } .wt-score { transform: rotate(3deg); }
  .wt-kaart:hover { transform: rotate(-3deg) translateY(-3px) scale(1.02); }
  .wt-score:hover { transform: rotate(3deg) translateY(-3px) scale(1.02); }
  .wt-secundair { order: 2; display: flex; gap: 1rem; justify-content: center; }
  .wt-rol, .wt-zegel, .wt-notitie-rollen { display: none; }
  .wt-notitie-getest { position: static; width: 100%; max-width: 22rem; text-align: center; order: 3; transform: none; }
  .wt-notitie-getest:hover { transform: none; }
  /* Het "plakband" moet hier weg. Twee redenen, en de eerste is een echte bug:
     .wt-notitie::before is `position: absolute`, maar de notitie zelf staat hier op
     `position: static` (nodig voor de flex-stapel). De tape verloor daarmee zijn
     containing block en werd teruggeworpen op .wt-stage — hij landde op
     top:-0.55rem / left:50% van de hele werktafel, dus als los goudkleurig blokje
     bóven op het verkennersboek, honderden pixels van de notitie vandaan.
     Ten tweede: ook op de juiste plek hoort hij hier niet. In de mobiele stapel is
     de notitie een gecentreerd, rechtopstaand kaartje zonder rotatie — een stukje
     tape dat niets vasthoudt leest dan als vlek, niet als opgeplakt briefje. Rand,
     crèmepapier en slagschaduw van .wt-notitie blijven staan, dus het kaartje
     houdt zijn papierkarakter zonder de tape. */
  .wt-notitie::before { display: none; }
}

/* ============================================================
   Alleen additief; alle regels zijn gescoped met een extra klasse
   zodat gedeelde componenten op andere pagina's ongemoeid blijven.
   ============================================================ */

/* --- Het merkzegel van de Utrechtse Ontdekkingsreis (assets/img/zegel-uo.*).
   Op de eind-CTA zit het in een <picture>; die is van zichzelf inline, dus
   expliciet op block zetten, anders vervalt het centreren van de <img>. --- */
.zegel-wrap { display: block; }
/* Iets groter dan het oude kroon-zegel: het wapenschild in dit stempel heeft
   meer detail en werd op 3.4rem een vlek. De PNG heeft zelf al een schaduw,
   dus de CSS-drop-shadow mag zachter. */
.zegel-scheiding img { width: 4.4rem; filter: drop-shadow(0 3px 7px rgba(76,47,29,0.28)); }

/* --- Doorstap-regels: rustige tekstverwijzing naar een andere pagina.
   Visueel duidelijk ondergeschikt aan de sectiekop. --- */
.hfd-doorstap, .sectie-doorstap {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--inkt-zacht);
}
.hfd-doorstap { margin-top: 0.9rem; }
.sectie-doorstap { margin-top: 0.9rem; text-align: center; }
.hfd-doorstap a, .sectie-doorstap a {
  color: var(--rood);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(165,131,53,0.75);
  padding-bottom: 0.1rem;
  transition: color 180ms ease, border-color 180ms ease;
}
.hfd-doorstap a:hover, .sectie-doorstap a:hover { color: var(--rood-diep); border-color: var(--rood); }
.hfd-doorstap a:focus-visible, .sectie-doorstap a:focus-visible { outline: 2px solid var(--goud-500); outline-offset: 3px; border-radius: 2px; }
/* .sectie-doorstap staat direct onder .prijs-noot: die twee horen als één
   afsluitend blokje te lezen, dus geen dubbele bovenmarge. */
.prijs-noot + .sectie-doorstap { margin-top: 0.55rem; }

/* --- Homepage-FAQ breder: minder regelafbrekingen en minder hoogte per
   antwoord, zonder de regellengte onleesbaar te maken. Gescoped op
   .faq-breed zodat de FAQ-pagina zelf niet meeverandert. --- */
.faq.faq-breed { max-width: 64rem; }
.faq.faq-breed .a { max-width: 82ch; padding-bottom: 1.05rem; }
.faq.faq-breed summary { padding: 1rem 0.2rem; }
.faq-verder.faq-verder-breed { max-width: 64rem; margin-top: 2rem; }

/* --- 'Gebouwd door twee bevlogen makers': bewust over twee evenwichtige
   regels, zonder harde <br> die op mobiel verkeerd uitpakt.
   In de smalle tekstkolom van .duo brak deze kop op 3.7rem in drie regels
   ("Gebouwd / door twee / bevlogen makers"). Een lagere bovengrens in de
   clamp laat 'm netjes in twee regels vallen; text-wrap:balance verdeelt ze
   gelijkmatig en op mobiel wikkelt de kop gewoon mee. --- */
.kop.kop-tweeregelig { font-size: clamp(1.9rem, 3.6vw, 2.9rem); text-wrap: balance; }

/* --- Boekingsagenda (aanvraag.html): live Cal.com inline-embed. ---
   De iframe komt van app.cal.com en is cross-origin: we kunnen de binnenkant
   niet met eigen CSS aanraken. Het thema en de accentkleuren gaan daarom via
   Cal's eigen embed-API (zie het script in aanvraag.html); hier omlijsten we
   'm alleen. Idee: het venster als een ingelegd vel op de perkamentmat —
   een gouden haarlijn, een smalle mat eromheen en een zachte slagschaduw
   naar binnen, zodat het blok als bewust ingekaderd leest in plaats van als
   losgeplakte widget. */
/* De agendakaart is sinds de herindeling één van de twee hoofdkolommen; de
   padding komt van .route-kaart, hier alleen nog wat de kaart zelf nodig heeft. */
.boek-agenda { margin-top: 0; }
.boek-embed-wrap {
  padding: 0.5rem;
  border: 1px solid rgba(165,131,53,0.45);
  border-radius: 5px;
  background: var(--noise), linear-gradient(180deg, var(--papier-diep), var(--papier));
  box-shadow: inset 0 2px 7px rgba(76,47,29,0.18), inset 0 -1px 0 rgba(255,255,255,0.35);
}
/* Het vel zelf: lichte parkementtint achter de iframe, met een eigen randje.
   GEEN vaste hoogte en geen overflow:hidden hier — Cal meet zijn eigen inhoud en
   zet de hoogte op <cal-inline> via een postMessage. Klemden we dat vast met
   height:100% + min-height, dan werd de laatste week van de maand afgesneden.
   min-height dient alleen als plaatshouder tijdens het laden. */
.boek-embed-wrap > div {
  width: 100%;
  min-height: 650px;
  border-radius: 3px;
  background: var(--papier-licht);
  box-shadow: 0 1px 2px rgba(76,47,29,0.14), 0 8px 20px -12px rgba(76,47,29,0.34);
}
/* Cal meet zijn eigen inhoud en zet een vaste `height` op <cal-inline>. In een
   smalle kolom (de oude halve kolom van ~316-426px) meet 'ie structureel een
   slag te kort, waardoor de laatste week van de maand wegviel. <cal-inline>
   staat in ónze DOM (alleen de binnenkant van de iframe is cross-origin), dus
   we mogen er een ondergrens op zetten. Die ondergrens geeft de agenda de
   ruimte die Cal zelf vergeet mee te rekenen; is Cals eigen meting groter, dan
   wint die gewoon. Onder 1000px staat de agenda over de volle paneelbreedte
   maar nog steeds in Cals smalle weergave, dus daar blijft 706px staan. */
.boek-embed-wrap cal-inline { border-radius: 3px; overflow: hidden; min-height: 706px; }
.boek-embed-wrap cal-inline iframe.cal-embed { min-height: 706px; }
/* Vanaf 980px venster is de embed ~826px breed of meer. Dat is de eerste
   breedte waarop Cal betrouwbaar boven zijn eigen omslagpunt (~768px) uitkomt
   en naar de brede maandweergave schakelt: ~538-570px hoog in plaats van
   ~1030px. De ondergrens dient hier alleen nog als plaatshouder tijdens het
   laden — zet 'm niet hoger dan de brede weergave nodig heeft, anders valt er
   een leeg gat onder de agenda. */
@media (min-width: 980px) {
  .boek-embed-wrap > div { min-height: 540px; }
  .boek-embed-wrap cal-inline, .boek-embed-wrap cal-inline iframe.cal-embed { min-height: 540px; }
}
/* Onder 980px past de brede weergave er sowieso niet in (op een venster van
   900px is de hele kolom maar 823px). Doorgroeien richting die drempel maakt
   het alleen maar erger: in de staande weergave zijn de dagvakjes ongeveer
   vierkant, dus 698px breed betekent 976px hoog en 758px zelfs 1027px. Daarom
   houden we de agenda hier bewust smal en gecentreerd — 544px levert 839px op
   en leest als een bewust formaat in plaats van een uitgerekte widget.
   LET OP: `width: 100%` moet hier bij. .boek-embed-wrap is een flex-item in
   .route-inhoud, en een `auto`-marge in de dwarsrichting zet `align-self:
   stretch` uit — zonder expliciete breedte kromp het kader dan naar zijn
   fit-content (~300px) in plaats van naar de 544px die we bedoelen. */
@media (max-width: 979px) { .boek-embed-wrap { width: 100%; max-width: 34rem; margin-inline: auto; } }
@media (max-width: 640px) { .boek-embed-wrap { padding: 0.35rem; } }

/* Ingevulde profielfoto (maker) i.p.v. placeholder */
.profiel-foto.heeft-foto { border: 1px solid rgba(165,131,53,0.45); background: none; overflow: hidden; box-shadow: 0 10px 22px -12px rgba(36,29,22,0.55); }
.profiel-foto.heeft-foto picture, .profiel-foto.heeft-foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }

/* ============================================================
   Aanvraagpagina: twee gelijkwaardige routes
   ------------------------------------------------------------
   Een bezoeker komt hier met twee verschillende intenties: klaar om
   te boeken, of nog aan het oriënteren. Formulier en agenda krijgen
   daarom exact hetzelfde gewicht — zelfde paneel, zelfde rail, zelfde
   maat — met een "of"-scheiding ertussen die laat zien dat het een
   keuze is en geen volgorde.

   HERINDELING (was: twee smalle kolommen naast elkaar).
   De oude opzet zette beide kaarten in één rij met `grid-row: 1/-1` +
   `grid-template-rows: subgrid`, dus even hoog. Fataal in combinatie met
   de agenda: de Cal.com-embed is geen tekst maar een instrument met een
   eigen maat. In een halve kolom (~426px) valt Cal terug op zijn smalle,
   hoge weergave (~765px, en 795px tussen 981-1180px). Die hoogte werd via
   de gelijke-hoogte-koppeling doorgegeven aan de formulierkaart, waar het
   enige rekbare element het tekstvak was — dat groeide door tot 372px.
   Netto: twee platen van 506 x 1134px (1:2,24) met een leeg gat erin. Dát
   was het "uitgerekte" gevoel; het tekstvak was het symptoom, de smalle
   kolom de oorzaak.

   Nu: twee volle bladen onder elkaar. Elk blad opent met dezelfde
   kopband — links wat de route heet, rechts wat 'ie inhoudt — en
   daaronder, over de volle breedte, de route zelf.

   DE VOLLE BREEDTE IS GEEN SMAAKKWESTIE MAAR EEN MAATVOERING.
   Gemeten hoogte van de Cal.com-embed bij oplopende containerbreedte:
     338px -> 687   538px -> 839   698px ->  976   758px -> 1027
     788px -> 538   898px -> 538  1003px ->  569  1098px ->  570
   Cal schakelt ergens tussen 758 en 788px (vrijwel zeker 768px) van zijn
   staande weergave naar de brede, waarin de afspraakgegevens náást het
   maandrooster staan. Daaronder groeit de agenda juist mee met de breedte,
   want de dagvakjes zijn ongeveer vierkant. Een halve kolom (426px) én een
   kolom-naast-een-rail (712px) zitten dus allebei aan de verkeerde kant van
   die drempel — 712px was zelfs zo ongeveer het slechtst denkbare punt.
   Vandaar: de agenda krijgt de volle paneelbreedte (~1014px op 1440px
   venster) en is daarmee 569px hoog in plaats van 763px. Verander de
   breedte van dit paneel niet zonder deze reeks opnieuw te meten.

   Diepteniveaus blijven: paneel (verhoogd) → strip (licht verhoogd) →
   vlakke band.
   ============================================================ */
.sectie-aanvraag { padding-top: 2rem; }

/* --- De twee bladen --- */
.twee-routes { display: grid; gap: 0; margin-top: 0.5rem; }
.route-kaart { padding: 1.5rem; min-width: 0; }
@media (min-width: 620px) { .route-kaart { padding: 1.9rem; } }
@media (min-width: 1000px) { .route-kaart { padding: 2.2rem; } }
@media (min-width: 1200px) { .route-kaart { padding: 2.6rem 2.4rem; } }

/* De kopband: links kicker + kop, rechts de uitleg en de kleine lettertjes.
   Twee kolommen omdat één regel over de volle 1000px onleesbaar lang wordt;
   zo blijft de uitleg op een normale regellengte. De haarlijn eronder scheidt
   "wat deze route is" van de route zelf. */
.route-band { padding-bottom: 1.4rem; margin-bottom: 1.7rem; border-bottom: 1px solid rgba(165,131,53,0.32); }
.route-band-kop { min-width: 0; }
.route-band-uitleg { min-width: 0; }
.route-kaart .hfd-eyebrow { margin-bottom: 0.85rem; }
h2.kop.route-kop { font-size: clamp(1.42rem, 2.4vw, 1.85rem); line-height: 1.14; letter-spacing: -0.015em; }
.route-lead { font-size: 1.02rem; margin-top: 0.75rem; }
.route-noot { margin-top: 0.75rem; }
@media (min-width: 900px) {
  .route-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.8rem; align-items: start; }
  /* De kicker loopt over béide kolommen: zo trekt de gouden haarlijn van de
     eyebrow één regel over de volle paneelbreedte, en beginnen de kop links en
     de uitleg rechts op dezelfde regel in plaats van dat de uitleg naast de
     kicker komt te zweven. */
  .route-band > .hfd-eyebrow { grid-column: 1 / -1; }
  .route-lead { margin-top: 0; }
}
.route-inhoud { display: flex; flex-direction: column; min-width: 0; }

/* Het formulier staat op zijn natuurlijke hoogte — niets rekt mee, want er is
   geen kaarthoogte meer om vol te maken. Het tekstvak heeft een vaste
   ondergrens die past bij "vertel het kort" en blijft handmatig te slepen. */
.route-form { display: flex; flex-direction: column; }
.route-form .veld-groei textarea { min-height: 8.5rem; }
.route-knop { align-self: flex-start; margin-top: 0.3rem; }
.veld-optioneel { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* De zes korte velden in één raster in plaats van vaste rijen van twee: zo
   klopt de indeling bij 1, 2 én 3 kolommen zonder de DOM-volgorde te wijzigen. */
.veld-raster { display: grid; gap: 0 1.4rem; }
@media (min-width: 620px) { .veld-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .veld-raster { grid-template-columns: repeat(3, 1fr); } }
/* De container-query en de 0.85fr/1.15fr-verdeling van "Gewenste periode" die
   hier stonden, waren pleisters voor de oude halve kolom van ~410px. In het
   raster hierboven is de smalste kolom ~330px en past elke placeholder gewoon. */

/* Velden liggen ín een paneel van dezelfde tint; een verdiepte rand houdt ze
   leesbaar als invoervak (en rijmt op de mat rond de agenda eronder). */
.route-kaart .veld input,
.route-kaart .veld select,
.route-kaart .veld textarea {
  border-color: rgba(76,64,50,0.42);
  box-shadow: inset 0 1px 3px rgba(76,47,29,0.11);
}
.route-kaart .veld input:focus,
.route-kaart .veld select:focus,
.route-kaart .veld textarea:focus {
  border-color: var(--goud-600);
  box-shadow: inset 0 1px 3px rgba(76,47,29,0.08), 0 0 0 3px rgba(198,161,75,0.25);
}

/* --- "of": geen volgorde, maar een keuze ---
   Een hoofdstukbreuk over de volle breedte, in dezelfde vorm als de
   zegel-scheiding elders op de site: haarlijn — teken — haarlijn. In de oude
   opzet stond dit teken als 40px-rondje weggedrukt in de goot tússen twee
   kolommen, waar vrijwel niemand het zag. Nu staat het middenvoor, en midden
   is hier betekenis: de twee routes zijn gelijkwaardig.
   De breedte is bewust begrensd (net als bij .zegel-scheiding): over de volle
   1100px uitgesmeerd wordt het verloop zó flauw dat de haarlijnen wegvallen en
   het teken los in het wit hangt. */
.route-of { display: flex; flex-direction: row; align-items: center; gap: 1.2rem; max-width: 34rem; margin-inline: auto; padding: 2.4rem 0.5rem; }
.route-of::before, .route-of::after {
  content: ''; flex: 1 1 auto; height: 1px; align-self: center;
  background: linear-gradient(90deg, transparent, rgba(165,131,53,0.65), transparent);
}
.route-of span {
  flex: none; width: 3.1rem; height: 3.1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase;
  color: var(--goud-600); background: var(--papier-licht);
  border: 1px solid rgba(165,131,53,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 3px 9px -3px rgba(76,47,29,0.35);
}
@media (max-width: 640px) { .route-of { padding: 1.9rem 0.25rem; } }

/* --- Ondersteunend 1: direct contact als smalle strip ---
   Was drie los-flex-wrappende items (kop, lijst, makers-mini) met margin-left:auto
   op het laatste — bij de meeste breedtes past dat niet op één regel, en dan wikkelt
   alléén makers-mini naar een eigen regel terwijl 'ie tegelijk rechts uitgelijnd
   blijft: een klein blokje dat los en verweesd rechtsonder komt te zweven, met een
   kale lege ruimte ernaast (feedback 2026-08-06: "voelt een beetje awkward").
   Nu gewoon twee vaste rijen: kop+lijst boven, makers-mini eronder met zijn eigen
   scheidingslijntje (dezelfde basisstijl als de niet-strip .makers-mini, regel ~391)
   — geen wikkelgok meer, altijd hetzelfde, voorspelbare tweelaags blokje. */
.contactblok.contact-strip { padding: 1.1rem 1.4rem; margin-top: 2.4rem; }
.contact-strip h3 { font-size: 1rem; margin-bottom: 0.6rem; }
.contact-strip .contact-strip-lijst { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; }
/* De regels staan hier naast elkaar in plaats van onder elkaar, dus het
   klikvlak mag verticaal ruimer dan in de oude staande lijst: 44px hoog,
   met genoeg regelhoogte eromheen dat ze elkaar bij wikkelen niet raken. */
.contact-strip li { padding: 0.45rem 0; font-size: 0.94rem; }
.contact-strip a::before { inset: -14.5px 0; }
.contactblok a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contactblok a:focus-visible { outline: 2px solid var(--goud-500); outline-offset: 3px; border-radius: 2px; }
.contact-strip .makers-mini { margin-top: 0.9rem; padding-top: 0.9rem; gap: 0.7rem; }
.contact-strip .makers-mini img { width: 2.4rem; height: 2.4rem; }
.contact-strip .makers-mini span { font-size: 0.87rem; line-height: 1.5; }

/* --- Ondersteunend 2: wat er daarna gebeurt, vlakke band over de volle breedte --- */
.verwacht { margin-top: 2.8rem; padding-top: 2.2rem; border-top: 1px solid rgba(165,131,53,0.3); }
.verwacht .hfd-eyebrow { margin-bottom: 0.9rem; }
h2.kop.verwacht-kop { font-size: clamp(1.35rem, 2.3vw, 1.7rem); line-height: 1.16; }
.verwacht ol { display: grid; gap: 0.4rem 1.9rem; margin-top: 1.4rem; }
@media (min-width: 760px) { .verwacht ol { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .verwacht ol { grid-template-columns: repeat(4, 1fr); } }
.verwacht li { font-size: 0.98rem; }