/* ============================================================
   VindJezus.nl — gedeelde stylesheet
   Lettertype wordt lokaal geladen (sneller en privacyvriendelijker
   dan via Google Fonts).
   ============================================================ */
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;
  font-display:swap;src:url('fonts/bricolage-500.woff2') format('woff2');
}
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;
  font-display:swap;src:url('fonts/bricolage-600.woff2') format('woff2');
}
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;
  font-display:swap;src:url('fonts/bricolage-800.woff2') format('woff2');
}
:root{
  /* Palet afgestemd op het logo: marineblauw + goud + crème.
     Wil je terug naar de warme variant? Zet --nacht op #17130E. */
  --nacht:  #102040;
  --papier: #F8F4EC;
  --zon:    #E8A33D;
  --inkt-zacht: rgba(16,32,64,.70);
  --papier-zacht: rgba(248,244,236,.74);
  --lijn-donker: rgba(16,32,64,.18);
  --lijn-licht:  rgba(248,244,236,.20);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:88px;
  --t-sm:14px; --t-base:17px; --t-lg:20px; --t-xl:26px;
  --t-kop:clamp(30px,4.6vw,54px);
  --t-mega:clamp(42px,8.6vw,116px);
  --maat:min(92vw,1240px);
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--zon);color:var(--nacht)}
html{scroll-behavior:smooth}
body{
  background:var(--nacht);color:var(--nacht);
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:var(--t-base);line-height:1.6;font-weight:500;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
p{text-wrap:pretty}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{width:var(--maat);margin:0 auto;position:relative;z-index:2}
.mega{font-weight:800;font-size:var(--t-mega);line-height:.94;letter-spacing:-.025em;text-transform:uppercase}
.kop{font-weight:800;font-size:var(--t-kop);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--t-sm);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
.eyebrow::before{
  content:"";width:13px;height:15px;flex-shrink:0;
  background:
    linear-gradient(var(--zon),var(--zon)) 50% 0/3px 100% no-repeat,
    linear-gradient(var(--zon),var(--zon)) 50% 26%/100% 3px no-repeat;
}
.merk{
  position:relative;display:inline-block;width:17px;height:17px;border-radius:50%;
  background:var(--zon);border:2px solid currentColor;flex-shrink:0;
}
.merk::before{content:"";position:absolute;left:50%;top:1px;bottom:1px;width:2.5px;background:currentColor;transform:translateX(-50%)}
.merk::after{content:"";position:absolute;top:30%;left:1px;right:1px;height:2.5px;background:currentColor}

section{position:relative}
.donker{background:var(--nacht);color:var(--papier)}
.licht{background:var(--papier);color:var(--nacht)}
.donker .eyebrow{color:var(--papier)}
.dek{position:relative;z-index:5}

/* ---------- plak-secties (in elkaar schuiven) — GEFIXTE LAYOUT ---------- */
.plak{position:sticky;top:0;overflow:hidden}
.plak .schaal{
  position:relative;width:100%;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  will-change:transform,filter;
}
.plak .schaal.midden{justify-content:center}

/* ---------- foto's ---------- */
.foto{position:relative;overflow:hidden;background:#16233F}
.foto img{width:100%;height:100%;object-fit:cover;will-change:transform}
.foto .bijschrift{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:ui-monospace,'SF Mono',monospace;font-size:11px;letter-spacing:.08em;
  background:var(--nacht);color:var(--papier);padding:5px 9px;
}
.foto.kapot img{display:none}
.foto.kapot{background:repeating-linear-gradient(45deg,#16233F,#16233F 12px,#111C33 12px,#111C33 24px)}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--zon);color:var(--nacht);
  border:2px solid var(--nacht);
  font:inherit;font-weight:600;font-size:var(--t-base);
  text-decoration:none;cursor:pointer;
  padding:15px 26px;min-height:44px;
  box-shadow:5px 5px 0 var(--nacht);
  transition:transform .15s ease,box-shadow .15s ease;
}
.knop:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--nacht)}
.knop:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--nacht)}
.knop.stil{background:var(--papier)}
.donker .knop,.oppapier .knop{border-color:var(--papier);box-shadow:5px 5px 0 var(--papier)}
.donker .knop:hover{box-shadow:3px 3px 0 var(--papier)}
.donker .knop:active{box-shadow:0 0 0 var(--papier)}
.knop svg{width:18px;height:18px;flex-shrink:0}
:focus-visible{outline:3px solid var(--zon);outline-offset:3px}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:70;color:var(--papier);
  background:linear-gradient(rgba(16,32,64,.55),transparent);
  transition:background .3s;
}
header.vast,header.effen{background:rgba(16,32,64,.95);backdrop-filter:blur(10px)}
.kopbalk{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  width:var(--maat);margin:0 auto;padding:14px 0;
}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:42px;width:auto;display:block;transition:transform .3s}
.logo:hover img{transform:scale(1.04)}
@media(max-width:520px){.logo img{height:34px}}
nav.hoofd{display:none;gap:var(--s3);font-size:15px;font-weight:600}
nav.hoofd a{text-decoration:none;padding:4px 0;position:relative}
nav.hoofd a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--zon);transition:right .25s}
nav.hoofd a:hover::after,nav.hoofd a[aria-current="page"]::after{right:0}
@media(min-width:1100px){nav.hoofd{display:flex}}
.menu-knop{
  display:inline-flex;background:none;border:2px solid var(--papier);color:var(--papier);
  font:inherit;font-weight:600;font-size:15px;padding:10px 16px;min-height:44px;cursor:pointer;
  transition:background .2s,color .2s;
}
.menu-knop:hover{background:var(--zon);color:var(--nacht);border-color:var(--zon)}
@media(min-width:1100px){.menu-knop{display:none}}
.mobielmenu{
  position:fixed;inset:0;z-index:80;background:var(--nacht);color:var(--papier);
  padding:var(--s5) 6vw;display:flex;flex-direction:column;justify-content:center;gap:6px;
  visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s;
}
.mobielmenu.open{visibility:visible;opacity:1}
.mobielmenu a{
  font-weight:800;text-transform:uppercase;font-size:clamp(30px,8vw,58px);
  line-height:1.12;text-decoration:none;
  transform:translateY(20px);opacity:0;transition:transform .4s,opacity .4s;
}
.mobielmenu.open a{transform:none;opacity:1}
.mobielmenu.open a:nth-child(2){transition-delay:.05s}
.mobielmenu.open a:nth-child(3){transition-delay:.1s}
.mobielmenu.open a:nth-child(4){transition-delay:.15s}
.mobielmenu.open a:nth-child(5){transition-delay:.2s}
.mobielmenu.open a:nth-child(6){transition-delay:.25s}
.mobielmenu a:hover{color:var(--zon)}
.mobielmenu .sluit{
  position:absolute;top:20px;right:6vw;background:none;
  border:2px solid var(--papier);color:var(--papier);
  font:inherit;font-weight:600;padding:10px 16px;min-height:44px;cursor:pointer;
}
.mobielmenu .sluit:hover{background:var(--zon);color:var(--nacht);border-color:var(--zon)}

/* ---------- opening ---------- */
.opening{color:var(--papier)}
.opening .achtergrond{position:absolute;inset:0;z-index:0}
.opening .achtergrond .foto{position:absolute;inset:0}
.opening .achtergrond img{animation:kenburns 16s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.1)}}
.opening .achtergrond::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,32,64,.5) 0%,rgba(16,32,64,.15) 45%,rgba(16,32,64,.88) 100%);
}
.opening .wrap{padding:120px 0 10vh}
.opening .eyebrow{opacity:0;animation:fadein .7s ease .2s forwards}
.opening h1{margin-top:var(--s3);max-width:9em}
.opening h1 .regel{display:block;overflow:hidden}
.opening h1 .regel span{display:inline-block;transform:translateY(108%);animation:opkomst .9s cubic-bezier(.2,.7,.2,1) forwards}
.opening h1 .regel:nth-child(1) span{animation-delay:.35s}
.opening h1 .regel:nth-child(2) span{animation-delay:.5s}
.opening h1 .regel:nth-child(3) span{animation-delay:.65s}
@keyframes opkomst{to{transform:none}}
@keyframes fadein{to{opacity:1}}
.opening .onderregel{margin-top:var(--s3);max-width:28em;color:var(--papier-zacht);font-size:var(--t-lg);opacity:0;animation:fadein .7s ease 1s forwards}
.opening .cta{margin-top:var(--s4);display:flex;gap:var(--s2);flex-wrap:wrap;opacity:0;animation:fadein .7s ease 1.2s forwards}
.opening .vers-ref{
  position:absolute;right:4vw;bottom:14px;z-index:2;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--papier-zacht);
}

/* ---------- startpunten ---------- */
.routes{padding:var(--s6) 0}
.routes .sectiekop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.routelijst{list-style:none;border-top:2px solid var(--nacht)}
.routelijst li{border-bottom:2px solid var(--nacht);overflow:hidden}
.routelijst a{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s2);text-decoration:none;transition:color .25s;
}
.routelijst a::before{
  content:"";position:absolute;inset:0;background:var(--nacht);
  transform:scaleY(0);transform-origin:bottom;transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.routelijst a:hover::before,.routelijst a:focus-visible::before{transform:scaleY(1)}
.routelijst a:hover,.routelijst a:focus-visible{color:var(--papier)}
.routelijst .r-titel{position:relative;font-weight:800;font-size:clamp(24px,4vw,42px);text-transform:uppercase;line-height:1.05;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.routelijst a:hover .r-titel{transform:translateX(14px)}
.routelijst .r-sub{position:relative;grid-column:1;font-size:var(--t-sm);color:var(--inkt-zacht);max-width:34em;transition:color .25s}
.routelijst a:hover .r-sub{color:var(--papier-zacht)}
.routelijst .r-pijl{position:relative;grid-column:2;grid-row:1/span 2;font-weight:800;font-size:30px;transition:transform .3s,color .25s}
.routelijst a:hover .r-pijl{transform:translateX(8px);color:var(--zon)}

/* ---------- wegwijzer (inklapbaar) ---------- */
.ww-toggle{
  margin-top:var(--s3);background:none;border:none;font:inherit;font-weight:600;
  font-size:var(--t-base);cursor:pointer;color:var(--nacht);
  text-decoration:underline;text-decoration-color:var(--zon);text-decoration-thickness:2px;text-underline-offset:5px;
}
.ww-toggle:hover{color:var(--inkt-zacht)}
.wegwijzer{
  display:none;margin-top:var(--s3);border:2px solid var(--nacht);
  background:#EFE9DC;padding:clamp(24px,4vw,48px);
}
.wegwijzer.open{display:block;animation:fadein .4s ease forwards}
.wegwijzer h3{font-weight:800;font-size:var(--t-xl);text-transform:uppercase}
.wegwijzer .ww-sub{color:var(--inkt-zacht);margin-top:var(--s1);max-width:36em;font-size:var(--t-sm)}
.ww-voortgang{display:flex;gap:6px;margin-top:var(--s3)}
.ww-voortgang span{height:4px;flex:1;background:var(--lijn-donker);transition:background .3s}
.ww-voortgang span.actief{background:var(--zon)}
.ww-stap{margin-top:var(--s3)}
.ww-vraag{font-weight:800;font-size:clamp(19px,2.4vw,26px);text-transform:uppercase;line-height:1.15}
.ww-opties{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.ww-opties button{
  background:var(--papier);border:2px solid var(--nacht);
  font:inherit;font-weight:600;font-size:var(--t-base);
  padding:13px 20px;min-height:44px;cursor:pointer;
  box-shadow:4px 4px 0 var(--nacht);
  transition:transform .15s,box-shadow .15s,background .15s;
}
.ww-opties button:hover{background:var(--zon);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--nacht)}
.ww-resultaat{display:none;margin-top:var(--s3)}
.ww-resultaat.zichtbaar{display:block;animation:fadein .5s ease forwards}
.ww-resultaat .ww-advies{font-weight:800;font-size:clamp(21px,2.8vw,30px);text-transform:uppercase;line-height:1.1}
.ww-resultaat p{margin-top:var(--s2);max-width:36em;color:var(--inkt-zacht)}
.ww-resultaat .acties{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.ww-opnieuw{
  margin-top:var(--s3);background:none;border:none;font:inherit;font-size:var(--t-sm);
  font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer;color:var(--inkt-zacht);
}
.ww-opnieuw:hover{color:var(--nacht)}

/* ---------- Evangelie in 4 stappen ---------- */
.verhaal4{padding:var(--s6) 0}
.verhaal4 .intro{max-width:30em;color:var(--papier-zacht);margin-top:var(--s2)}
.stappen{margin-top:var(--s4);border-top:1px solid var(--lijn-licht)}
.stap{display:grid;grid-template-columns:1fr;gap:var(--s2);padding:var(--s3) 0 var(--s4);border-bottom:1px solid var(--lijn-licht)}
.stap .nr{font-weight:800;font-size:var(--t-kop);line-height:1;color:var(--zon)}
.stap.reveal .nr{transform:translateX(-20px);opacity:0;transition:transform .6s ease .15s,opacity .6s ease .15s}
.stap.reveal.zichtbaar .nr{transform:none;opacity:1}
.stap h3{font-weight:800;font-size:var(--t-xl);text-transform:uppercase}
.stap p{color:var(--papier-zacht);max-width:34em;margin-top:var(--s1)}
.versref{display:inline-block;margin-top:var(--s2);font-size:var(--t-sm);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--zon)}
.versref::before{content:"✝ ";font-size:1.1em}
@media(min-width:860px){
  .stap{grid-template-columns:140px 1fr 220px;align-items:start}
  .stap .versref{margin-top:6px;justify-self:end}
}
.verhaal4 .knop{margin-top:var(--s4)}

/* ---------- versband: zon achter het kruis ---------- */
.versband{color:var(--papier);background:var(--nacht)}
.versband .kruis{
  position:absolute;z-index:2;pointer-events:none;
  right:8vw;top:6%;bottom:0;width:min(30vw,300px);
  background:
    linear-gradient(var(--nacht),var(--nacht)) 50% 0/clamp(20px,3vw,34px) 100% no-repeat,
    linear-gradient(var(--nacht),var(--nacht)) 50% 18%/100% clamp(20px,3vw,34px) no-repeat;
}
.versband .zonschijf{
  position:absolute;z-index:1;right:2vw;top:50%;
  width:min(44vw,500px);aspect-ratio:1;border-radius:50%;background:var(--zon);
  transform:translateY(60vh);transition:transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.versband.zichtbaar .zonschijf{transform:translateY(-50%)}
.versband .wrap{z-index:3;padding:var(--s6) 0}
.versband blockquote{max-width:11em}
.versband blockquote .woord{display:inline-block;opacity:0;transform:translateY(.3em);transition:opacity .5s,transform .5s}
.versband.zichtbaar blockquote .woord{opacity:1;transform:none}
.versband cite{
  display:block;margin-top:var(--s3);font-style:normal;
  font-size:var(--t-sm);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--papier-zacht);
}
.versband cite::before{content:"✝ ";color:var(--zon)}

/* ---------- getuigenis ---------- */
.getuigenis{padding:var(--s6) 0}
.get-grid{display:grid;gap:var(--s4);margin-top:var(--s4)}
.get-grid .foto{min-height:360px;border:2px solid var(--nacht)}
.get-tekst blockquote{font-weight:600;font-size:clamp(21px,2.6vw,28px);line-height:1.4}
.get-tekst mark{
  background:linear-gradient(var(--zon),var(--zon)) no-repeat left bottom/0% 100%;
  color:var(--nacht);padding:0 .12em;transition:background-size .8s ease .3s;
}
.get-tekst.zichtbaar mark{background-size:100% 100%}
.get-tekst figcaption{margin-top:var(--s3);font-size:var(--t-sm);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht)}
.get-tekst .knop{margin-top:var(--s4)}
@media(min-width:900px){.get-grid{grid-template-columns:1fr 1.25fr;align-items:center}}

/* ---------- vragenmuur ---------- */
.vragen{padding:var(--s6) 0}
.vragen .intro{max-width:30em;color:var(--papier-zacht);margin-top:var(--s2)}
.vraaglijst{list-style:none;margin-top:var(--s4);border-top:1px solid var(--lijn-licht);counter-reset:v}
.vraaglijst li{border-bottom:1px solid var(--lijn-licht)}
.vraaglijst a{
  position:relative;display:flex;align-items:baseline;gap:var(--s3);
  padding:var(--s3) var(--s2);text-decoration:none;overflow:hidden;transition:color .25s;
}
.vraaglijst a::before{
  counter-increment:v;content:counter(v,decimal-leading-zero);
  font-size:var(--t-sm);font-weight:600;color:var(--zon);flex-shrink:0;position:relative;z-index:1;
}
.vraaglijst a::after{
  content:"";position:absolute;inset:0;background:var(--zon);
  transform:translateX(-101%);transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.vraaglijst a:hover::after,.vraaglijst a:focus-visible::after{transform:none}
.vraaglijst .v-tekst{position:relative;z-index:1;font-weight:600;font-size:clamp(19px,2.4vw,27px);line-height:1.25;flex:1}
.vraaglijst a:hover,.vraaglijst a:focus-visible{color:var(--nacht)}
.vraaglijst a:hover::before{color:var(--nacht)}
.vragen .knop{margin-top:var(--s4)}

/* ---------- groeipad-strip ---------- */
.groei{padding:var(--s6) 0}
.groei .kopfoto{display:grid;gap:var(--s4)}
.groei .kopfoto .foto{min-height:280px;border:2px solid var(--nacht)}
.groei .intro{max-width:30em;color:var(--inkt-zacht);margin-top:var(--s2)}
@media(min-width:900px){.groei .kopfoto{grid-template-columns:1.2fr 1fr;align-items:center}}
.pad{
  display:flex;gap:0;overflow-x:auto;margin-top:var(--s4);
  scroll-snap-type:x proximity;padding-bottom:var(--s2);scrollbar-width:none;cursor:grab;
}
.pad:active{cursor:grabbing}
.pad::-webkit-scrollbar{display:none}
.mijlpaal{
  flex:0 0 260px;scroll-snap-align:start;
  border:1px solid var(--lijn-donker);border-right:none;
  padding:var(--s3);transition:background .25s,transform .25s;
  text-decoration:none;display:block;color:inherit;
}
.mijlpaal:last-child{border-right:1px solid var(--lijn-donker)}
.mijlpaal .stip{
  display:block;width:15px;height:15px;border-radius:50%;
  background:var(--papier);border:2px solid var(--nacht);
  margin-bottom:var(--s2);transition:background .25s,transform .25s;
}
.mijlpaal:hover{background:#EFE8DA;transform:translateY(-6px)}
.mijlpaal:hover .stip{background:var(--zon);transform:scale(1.25)}
.mijlpaal .stapnr{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--inkt-zacht)}
.mijlpaal h3{font-weight:800;font-size:var(--t-lg);text-transform:uppercase;margin-top:var(--s1);line-height:1.15}
.mijlpaal p{font-size:15px;color:var(--inkt-zacht);margin-top:var(--s1)}
.pad-hint{margin-top:var(--s2);font-size:var(--t-sm);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht)}

/* ---------- kerkzoeker-band ---------- */
.kerk{color:var(--papier);background:var(--nacht)}
.kerk .achtergrond{position:absolute;inset:0;z-index:0}
.kerk .achtergrond .foto{position:absolute;inset:0}
.kerk .achtergrond img{opacity:.55}
.kerk .achtergrond::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(16,32,64,.90) 0%,rgba(16,32,64,.62) 45%,rgba(16,32,64,.38) 100%),
    linear-gradient(180deg,rgba(16,32,64,.35) 0%,transparent 40%,rgba(16,32,64,.55) 100%);
}
.kerk .wrap{padding:var(--s6) 0}
.kerk h2{max-width:11em}
.kerk p{max-width:30em;color:var(--papier-zacht);margin-top:var(--s3);font-size:var(--t-lg)}
.kerk .acties{margin-top:var(--s4)}

/* ---------- evangelisten: compacte strip ---------- */
.evangelisten{padding:var(--s5) 0;border-top:1px solid var(--lijn-licht)}
.ev-strip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);
}
.ev-strip h2{font-weight:800;font-size:clamp(22px,3vw,32px);text-transform:uppercase;line-height:1.1}
.ev-strip p{color:var(--papier-zacht);font-size:var(--t-sm);margin-top:var(--s1);max-width:34em}

/* ---------- footer ---------- */
footer{background:var(--nacht);color:var(--papier);border-top:1px solid var(--lijn-licht);position:relative;z-index:6}
footer .wrap{padding:var(--s5) 0 var(--s3)}
.foot-merk{display:block}
.foot-merk img{width:min(72vw,380px);height:auto;display:block}
.foot-vers{margin-top:var(--s3);max-width:34em;color:var(--papier-zacht);font-size:var(--t-lg)}
.foot-vers strong{color:var(--zon);font-weight:600}
.foot-grid{display:grid;gap:var(--s4);margin-top:var(--s5)}
footer h4{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--zon);margin-bottom:var(--s2)}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a{text-decoration:none;color:var(--papier-zacht);transition:color .2s,padding-left .2s}
footer a:hover{color:var(--papier);padding-left:6px}
.foot-onder{
  margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--lijn-licht);
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:13px;color:var(--papier-zacht);
}
.foot-onder .sdg{margin-left:auto;color:var(--zon)}
@media(min-width:800px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}

/* ---------- subpagina's: artikel ---------- */
.paginakop{padding:150px 0 var(--s5);background:var(--nacht);color:var(--papier)}
.paginakop .terug{
  display:inline-block;margin-bottom:var(--s3);font-size:var(--t-sm);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--papier-zacht);
}
.paginakop .terug:hover{color:var(--zon)}
.paginakop .leestijd{margin-top:var(--s3);font-size:var(--t-sm);color:var(--papier-zacht);letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.artikel{padding:var(--s5) 0 var(--s6)}
.artikel .kolom{max-width:44em;margin:0 auto}
.kortantwoord{
  border:2px solid var(--nacht);background:#EFE9DC;
  padding:clamp(20px,3vw,32px);margin-bottom:var(--s4);
}
.kortantwoord .label{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--inkt-zacht)}
.kortantwoord p{margin-top:var(--s1);font-weight:600;font-size:var(--t-lg);line-height:1.5}
.artikel h2{font-weight:800;font-size:clamp(22px,3vw,30px);text-transform:uppercase;line-height:1.1;margin:var(--s4) 0 var(--s2)}
.artikel p{margin-bottom:var(--s2);color:#20304C}
.bijbeltekst{
  border-left:4px solid var(--zon);padding:var(--s2) var(--s3);
  margin:var(--s3) 0;background:#EFE9DC;font-weight:600;
}
.bijbeltekst .versref{margin-top:var(--s1)}
.volgende{
  margin-top:var(--s4);padding-top:var(--s3);border-top:2px solid var(--nacht);
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;justify-content:space-between;
}
.volgende .vlabel{font-size:var(--t-sm);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht)}

/* ---------- vragen-accordeon ---------- */
.zoekveld{
  width:100%;max-width:34em;margin-top:var(--s3);
  background:var(--papier);border:2px solid var(--nacht);
  font:inherit;font-size:var(--t-base);padding:14px 16px;
}
.accordeon{list-style:none;margin-top:var(--s4);border-top:2px solid var(--nacht)}
.accordeon li{border-bottom:2px solid var(--nacht)}
.accordeon button{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);
  background:none;border:none;font:inherit;text-align:left;cursor:pointer;
  padding:var(--s3) var(--s1);
  font-weight:700;font-size:clamp(18px,2.2vw,24px);line-height:1.25;
  transition:color .2s;
}
.accordeon button:hover{color:var(--inkt-zacht)}
.accordeon button .plus{font-weight:800;font-size:26px;color:var(--zon);transition:transform .3s;flex-shrink:0}
.accordeon li.open button .plus{transform:rotate(45deg)}
.accordeon .inhoud{
  display:none;padding:0 var(--s1) var(--s3);max-width:40em;color:#20304C;
}
.accordeon li.open .inhoud{display:block;animation:fadein .3s ease forwards}
.accordeon li.weg{display:none}

/* ---------- groeipad-pagina: afvinkbaar ---------- */
.gp-voortgang{
  margin-top:var(--s3);height:8px;background:var(--lijn-donker);position:relative;max-width:34em;
}
.gp-voortgang .balk{position:absolute;left:0;top:0;bottom:0;background:var(--zon);width:0;transition:width .4s ease}
.gp-lijst{list-style:none;margin-top:var(--s4);border-top:2px solid var(--nacht)}
.gp-lijst li{border-bottom:2px solid var(--nacht)}
.gp-item{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3);
  padding:var(--s3) var(--s1);align-items:start;
}
.gp-vink{
  width:30px;height:30px;border:2px solid var(--nacht);background:var(--papier);
  cursor:pointer;flex-shrink:0;position:relative;appearance:none;margin-top:4px;
  transition:background .2s;
}
.gp-vink:checked{background:var(--zon)}
.gp-vink:checked::after{
  content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:18px;color:var(--nacht);
}
.gp-item h3{font-weight:800;font-size:var(--t-xl);text-transform:uppercase;line-height:1.1}
.gp-item.klaar h3{text-decoration:line-through;text-decoration-color:var(--zon);text-decoration-thickness:3px}
.gp-item p{color:var(--inkt-zacht);margin-top:var(--s1);max-width:36em}
.gp-item .opdracht{
  margin-top:var(--s2);display:inline-block;background:#EFE9DC;border:2px solid var(--nacht);
  padding:10px 14px;font-size:var(--t-sm);font-weight:600;
}
.gp-item .opdracht::before{content:"Opdracht: ";color:var(--zon)}
.leesplan{margin-top:var(--s5)}
.lp-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:var(--s3);
}
.lp-dag{
  border:2px solid var(--nacht);background:var(--papier);
  font:inherit;font-weight:700;padding:14px 6px;cursor:pointer;text-align:center;
  transition:background .2s,transform .15s;
}
.lp-dag:hover{transform:translateY(-3px)}
.lp-dag.gelezen{background:var(--zon)}
.lp-dag small{display:block;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--inkt-zacht);margin-top:2px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.zichtbaar{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal,.opening h1 .regel span,.opening .eyebrow,.opening .onderregel,.opening .cta{opacity:1;transform:none}
  .versband blockquote .woord{opacity:1;transform:none}
  .versband .zonschijf{transform:translateY(-50%)}
  .opening .achtergrond img{animation:none}
  .plak{position:relative}
  .plak .schaal{min-height:0}
}

/* ---------- zwevende keuzeknop (site-breed) ---------- */
.kies-zweef{
  position:fixed;right:16px;bottom:16px;z-index:75;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--zon);color:var(--nacht);
  border:2px solid var(--nacht);
  font-weight:700;font-size:15px;text-decoration:none;text-transform:uppercase;letter-spacing:.04em;
  padding:14px 18px;min-height:44px;
  box-shadow:5px 5px 0 var(--nacht);
  transition:transform .15s ease,box-shadow .15s ease;
  animation:zweefwenk 5s ease-in-out infinite;
}
.kies-zweef:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--nacht);animation:none}
.kies-zweef img{width:20px;height:20px;display:block}
@keyframes zweefwenk{0%,88%,100%{transform:translateY(0)}92%{transform:translateY(-5px)}96%{transform:translateY(0)}}
@media(max-width:600px){.kies-zweef{padding:12px 14px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.kies-zweef{animation:none}}

/* leesplan-dagen zijn nu links naar YouVersion */
a.lp-dag{display:block;text-decoration:none;color:inherit}

/* ---------- keuze-oproep: site-brede band ---------- */
.keuzeband{
  background:var(--nacht);color:var(--papier);
  border-top:1px solid var(--lijn-licht);
  position:relative;overflow:hidden;z-index:6;
}
.keuzeband .wrap{padding:var(--s6) 0;position:relative;z-index:2}
.keuzeband .zonrand{
  position:absolute;right:-10%;bottom:-60%;z-index:0;
  width:min(60vw,520px);aspect-ratio:1;border-radius:50%;
  background:var(--zon);opacity:.9;
}
.keuzeband h2{
  font-weight:800;font-size:clamp(28px,5vw,60px);line-height:1.02;
  letter-spacing:-.02em;text-transform:uppercase;max-width:12em;margin-top:var(--s2);
}
.keuzeband p{margin-top:var(--s3);max-width:32em;color:var(--papier-zacht);font-size:var(--t-lg)}
.keuzeband .knop{margin-top:var(--s4);border-color:var(--papier);box-shadow:5px 5px 0 var(--papier)}
.keuzeband .knop:hover{box-shadow:3px 3px 0 var(--papier)}
.keuzeband .knop:active{box-shadow:0 0 0 var(--papier)}

/* keuze-link in het menu: altijd zichtbaar, in het amber */
nav.hoofd a.menukeuze{color:var(--zon);font-weight:700}
nav.hoofd a.menukeuze::after{background:var(--zon)}
.mobielmenu a.menukeuze{color:var(--zon)}
.mobielmenu a.menukeuze::before{
  content:"";display:inline-block;width:.42em;height:.5em;margin-right:.28em;
  vertical-align:baseline;
  background:
    linear-gradient(var(--zon),var(--zon)) 50% 0/.12em 100% no-repeat,
    linear-gradient(var(--zon),var(--zon)) 50% 26%/100% .12em no-repeat;
}

/* keuze-regel in de footer */
.foot-keuze{
  display:inline-flex;align-items:center;gap:10px;margin-top:var(--s3);
  font-weight:700;font-size:var(--t-lg);text-decoration:none;color:var(--zon);
  border-bottom:2px solid var(--zon);padding-bottom:4px;
  transition:gap .2s;
}
.foot-keuze:hover{gap:16px;color:var(--papier);border-bottom-color:var(--papier)}

/* ---------- evangeliepagina: kort of lang ---------- */
.leeskeuze{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s4);
  border:2px solid var(--nacht);padding:6px;background:var(--papier);
}
.leeskeuze button{
  flex:1 1 180px;background:none;border:none;font:inherit;font-weight:700;
  font-size:var(--t-base);padding:14px 16px;cursor:pointer;color:var(--nacht);
  transition:background .18s;
}
.leeskeuze button:hover{background:#EFE9DC}
.leeskeuze button.aan{background:var(--zon)}
.leeskeuze button small{display:block;font-weight:500;font-size:12px;color:var(--inkt-zacht);margin-top:2px}
.leeskeuze button.aan small{color:var(--nacht)}
.kort-versie{display:none}
body.kortlezen .kort-versie{display:block}
body.kortlezen .lang-versie{display:none}
.kort-versie ol{list-style:none;counter-reset:kv;margin:var(--s3) 0}
.kort-versie li{
  counter-increment:kv;display:grid;grid-template-columns:44px 1fr;gap:16px;
  padding:var(--s3) 0;border-bottom:1px solid var(--lijn-donker);align-items:start;
}
.kort-versie li::before{
  content:counter(kv);width:36px;height:36px;border-radius:50%;
  background:var(--zon);border:2px solid var(--nacht);
  display:flex;align-items:center;justify-content:center;font-weight:800;
}
.kort-versie li h3{font-weight:800;font-size:var(--t-lg);text-transform:uppercase;line-height:1.15}
.kort-versie li p{margin-top:4px;color:#20304C}

/* ---------- woorduitleg ---------- */
.uitlegwoord{
  border:none;background:none;font:inherit;color:inherit;cursor:pointer;padding:0;
  border-bottom:2px dotted var(--zon);font-weight:600;
}
.uitlegwoord::after{content:" ⓘ";font-size:.75em;color:var(--zon);vertical-align:super}
.uitlegwoord:hover{color:var(--inkt-zacht)}
.woorduitleg{
  display:none;margin:12px 0;padding:14px 16px;background:#EFE9DC;
  border-left:4px solid var(--zon);font-size:var(--t-sm);
}
.woorduitleg.open{display:block;animation:fadein .25s ease forwards}
.woorduitleg strong{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:11px;
  color:var(--inkt-zacht);margin-bottom:4px}


/* ---------- misverstanden ---------- */
.misverstanden{
  margin:var(--s5) 0;padding:clamp(24px,4vw,40px);
  background:var(--papier);border:2px solid var(--nacht);
  box-shadow:8px 8px 0 var(--lijn-donker);
}
.mv-eyebrow{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--inkt-zacht);
  border:1px solid var(--lijn-donker);padding:5px 10px;margin-bottom:var(--s2);
}
.misverstanden h2{margin:0 0 var(--s2)!important;font-size:clamp(24px,3.4vw,34px)}
.mv-intro{color:var(--inkt-zacht);max-width:38em;margin-bottom:var(--s3)}
.mv-lijst{display:grid;gap:2px;background:var(--lijn-donker);border:1px solid var(--lijn-donker)}
@media(min-width:760px){.mv-lijst{grid-template-columns:1fr 1fr}}
.mv-item{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--papier);padding:var(--s3) var(--s2);
  transition:background .2s;
}
.mv-item:hover{background:#EFE9DC}
.mv-kruis{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#F0E0D8;color:#A33B1E;font-weight:800;font-size:15px;
}
.mv-tekst{min-width:0}
.mv-tekst h3{
  font-weight:800;font-size:var(--t-base);line-height:1.25;
  text-transform:none;letter-spacing:0;margin:2px 0 4px;
}
.mv-tekst p{margin:0;font-size:var(--t-sm);color:#20304C;line-height:1.55}

/* ---------- opstanding: het bewijs ---------- */
.bewijsblok{
  background:var(--nacht);color:var(--papier);
  padding:clamp(26px,4.5vw,48px);margin:var(--s5) 0;
  position:relative;overflow:hidden;
}
.bewijsblok::before{
  content:"";position:absolute;right:-70px;top:-70px;
  width:220px;height:220px;border-radius:50%;
  background:var(--zon);opacity:.14;
}
.bewijsblok h2{
  color:var(--papier)!important;margin:0 0 var(--s2)!important;
  font-size:clamp(24px,3.6vw,38px);position:relative;
}
.bewijsblok > p{color:var(--papier-zacht);max-width:40em;position:relative}
.bewijspunten{display:grid;gap:0;margin-top:var(--s4);position:relative}
.bw-item{
  display:flex;gap:16px;align-items:flex-start;
  padding:var(--s3) 0;border-top:1px solid var(--lijn-licht);
}
.bw-item:last-child{border-bottom:1px solid var(--lijn-licht)}
.bw-nr{
  flex:0 0 38px;width:38px;height:38px;border-radius:50%;
  background:var(--zon);color:var(--nacht);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:17px;
}
.bw-item h3{
  color:var(--papier);font-weight:800;font-size:var(--t-lg);
  line-height:1.2;margin:5px 0 6px;text-transform:none;letter-spacing:0;
}
.bw-item p{margin:0;color:var(--papier-zacht);font-size:var(--t-sm);line-height:1.6}

/* ---------- kort/lang: iets levendiger ---------- */
.kort-versie li{transition:background .2s;padding-left:8px}
.kort-versie li:hover{background:#EFE9DC}

/* ---------- evangelisten-sectie ---------- */
.evangelisten{padding:var(--s6) 0}
.ev-kop{max-width:40em}
.ev-intro{color:var(--papier-zacht);max-width:34em;margin-top:var(--s3);font-size:var(--t-lg)}
.ev-grid{display:grid;gap:14px;margin-top:var(--s5)}
@media(min-width:760px){.ev-grid{grid-template-columns:repeat(3,1fr)}}
.ev-tegel{
  display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--lijn-licht);padding:var(--s3);
  text-decoration:none;transition:background .2s,transform .2s,border-color .2s;
}
.ev-tegel:hover{background:rgba(248,244,236,.06);transform:translateY(-4px);border-color:var(--zon)}
.ev-nr{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--zon)}
.ev-tegel h3{font-weight:800;font-size:var(--t-xl);text-transform:uppercase;line-height:1.1;color:var(--papier)}
.ev-tegel p{color:var(--papier-zacht);font-size:var(--t-sm);flex:1}
.ev-ga{font-size:var(--t-sm);font-weight:700;color:var(--zon);letter-spacing:.04em}
.ev-vers{
  margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--lijn-licht);
  color:var(--papier-zacht);font-style:italic;
}

/* bronvermelding bij antwoorden */
.bronlink{margin-top:10px!important;font-size:var(--t-sm)}
.bronlink a{
  font-weight:700;text-decoration:none;
  border-bottom:2px solid var(--zon);padding-bottom:1px;
}
.bronlink a::after{content:" →";color:var(--zon)}
.bronlink a:hover{color:var(--inkt-zacht)}

/* sprekerslijst op de keuzepagina */
.sprekers{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s2)}
.sprekers li{margin:0}
.sprekers a{
  display:inline-block;text-decoration:none;font-weight:600;font-size:var(--t-sm);
  border:2px solid var(--nacht);padding:9px 14px;background:var(--papier);
  transition:background .18s,transform .15s;
}
.sprekers a:hover{background:var(--zon);transform:translateY(-2px)}
.sprekers a::after{content:" ↗";color:var(--inkt-zacht);font-size:.85em}
.sprekers a:hover::after{color:var(--nacht)}