/* ---------------------------------------------------------------------------
   Iona vzw - stijlblad
   In de vormtaal van Iona Magazine: scheve rubriekvlaggen, koppen in Antropos,
   foto's met een rand in de rubriekkleur en perzikkleurige kaders.
   Kleuren gemeten uit het magazine en uit het logo.
   --------------------------------------------------------------------------- */

@font-face{
  /* Antropos van Lutz Baar, de koppenletter van het magazine.
     Zet het bestand in beeld/antropos.woff2 zodra de licentie rond is;
     zolang het er niet staat, valt de site terug op Fredoka. */
  font-family:"Antropos";
  src:url("beeld/antropos.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  color-scheme: light;

  /* papier en inkt */
  --wit:#FFFFFF;
  --room:#FFFBF7;
  --lijn:#E4E7EA;
  --lijn-zacht:#F0F2F4;
  --inkt:#252A2E;
  --inkt-zacht:#5A636A;
  --grijs:#8C8C8C;

  /* uit het magazine */
  --blauw:#0D4981;          /* diepblauw, lead en tussenkopjes */
  --blauw-titel:#245A8D;    /* het blauw van de koppen */
  --blauw-schaduw:#BBD9F0;  /* de zachte schaduw onder de koppen */
  --oranje:#F47C29;
  --geel:#F9B719;
  --perzik:#FFCBB4;
  --perzik-licht:#FFE7DC;
  --teal:#2B7E99;
  /* uit het logo */
  --groen:#A4BF3A;
  --groen-diep:#6F8621;
  --blauw-logo:#5E6EAA;

  /* de kleur van de rubriek waarin je zit */
  --rubriek:#0D4981;
  --rubriek-tekst:#FFFFFF;

  --display:"Antropos","Fredoka","Trebuchet MS",sans-serif;
  --sans:"Lato","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --label:"Barlow Condensed","Arial Narrow",sans-serif;
  --measure:34rem;
  --schaduw:0 2px 4px rgba(20,30,40,.06),0 12px 34px rgba(20,30,40,.09);
}

/* de rubrieken */
.r-home{--rubriek:#0D4981;--rubriek-tekst:#fff}
.r-over{--rubriek:#245A8D;--rubriek-tekst:#fff}
.r-leven{--rubriek:#F47C29;--rubriek-tekst:#fff}
.r-agenda{--rubriek:#F9B719;--rubriek-tekst:#0D4981}
.r-magazine{--rubriek:#2B7E99;--rubriek-tekst:#fff}
.r-meedoen{--rubriek:#A4BF3A;--rubriek-tekst:#233808}
.r-contact{--rubriek:#FFCBB4;--rubriek-tekst:#0D4981}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--wit);color:var(--inkt);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;line-height:1.15;text-wrap:balance}
p{margin:0}
a{color:var(--blauw)}
img{max-width:100%;display:block}
.wrap{max-width:74rem;margin:0 auto;padding:0 clamp(1.25rem,5vw,3.5rem)}
.col{max-width:var(--measure)}
.stack>*+*{margin-top:1rem}
.muted{color:var(--inkt-zacht)}

/* ---------- de koppenletter ---------- */
.titel{font-family:var(--display);font-weight:500;color:var(--blauw-titel);
  letter-spacing:.005em;line-height:1.06;
  text-shadow:2px 2px 0 var(--blauw-schaduw)}
.titel.op-beeld{color:#fff;text-shadow:0 2px 18px rgba(10,20,30,.55),2px 2px 0 rgba(13,73,129,.45)}

/* ---------- de rubriekvlag ---------- */
.vlag{display:inline-block;position:relative;background:var(--rubriek);
  color:var(--rubriek-tekst);font-family:var(--label);font-weight:700;
  font-size:1.18rem;letter-spacing:.03em;text-transform:uppercase;line-height:1.1;
  padding:.85rem 3.6rem 1.5rem clamp(1.25rem,5vw,3.5rem);
  clip-path:polygon(0 0, 100% 0, 90% 56%, 64% 100%, 0 100%)}
.vlag.warm{background:var(--oranje);color:#fff}
.vlag.klein{font-size:.86rem;padding:.5rem 2.6rem .55rem 1.1rem}

/* ---------- kopbalk ---------- */
.masthead{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
.masthead .wrap{max-width:80rem;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:78px}
.brand{display:flex;align-items:center;text-decoration:none;padding:.5rem 0}
.brand img{height:52px;width:auto}
.navlinks{display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;font-size:.95rem}
.navlinks a{text-decoration:none;color:var(--inkt-zacht);padding:.3rem 0;
  border-bottom:3px solid transparent;transition:color .15s}
.navlinks a:hover{color:var(--blauw)}
.navlinks a.active{color:var(--blauw);border-bottom-color:var(--rubriek)}
.navgroep{position:relative}
.navtop{font:inherit;font-size:.95rem;color:var(--inkt-zacht);background:none;border:0;
  padding:.3rem 0;cursor:pointer;border-bottom:3px solid transparent;
  display:inline-flex;align-items:center;gap:.4rem}
.navtop::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.navtop:hover{color:var(--blauw)}
.navtop.actief{color:var(--blauw);border-bottom-color:var(--rubriek)}
.navsub{display:none;position:absolute;top:calc(100% + .8rem);left:-1rem;min-width:14rem;
  background:var(--wit);border:1px solid var(--lijn);border-top:4px solid var(--rubriek);
  box-shadow:var(--schaduw);padding:.4rem 0;z-index:50}
.navsub.open{display:block}
.navsub a{display:block;padding:.55rem 1.1rem;font-size:.96rem;border-bottom:0;color:var(--inkt);text-decoration:none}
.navsub a:hover{background:var(--room);color:var(--blauw)}
.menuknop{display:none;background:none;border:1px solid var(--lijn);padding:.55rem .6rem;cursor:pointer;line-height:0}
.menuknop .streepjes{display:block;width:20px}
.menuknop i{display:block;height:2px;background:var(--blauw);margin:4px 0;
  transition:transform .18s ease,opacity .18s ease}
.menuknop[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menuknop[aria-expanded="true"] i:nth-child(2){opacity:0}
.menuknop[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1020px){
  .masthead .wrap{min-height:68px}
  .brand img{height:44px}
  .menuknop{display:block}
  .navlinks{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;flex-wrap:nowrap;gap:0;
    background:var(--wit);border-bottom:1px solid var(--lijn);box-shadow:var(--schaduw);
    padding:.3rem 0 .8rem;font-size:1.05rem;max-height:calc(100vh - 90px);overflow-y:auto}
  .navlinks.open{display:flex}
  .navlinks a{padding:.78rem clamp(1.25rem,5vw,3.5rem);border-bottom:none;border-left:4px solid transparent}
  .navlinks a.active{border-bottom-color:transparent;border-left-color:var(--rubriek)}
  .navgroep{position:static}
  .navtop{display:block;width:100%;text-align:left;font-size:1.05rem;
    padding:.78rem clamp(1.25rem,5vw,3.5rem);border-left:4px solid transparent}
  .navtop::after{display:none}
  .navtop.actief{border-bottom-color:transparent;border-left-color:var(--rubriek)}
  .navsub{display:block;position:static;border:0;box-shadow:none;background:var(--room);padding:.2rem 0;min-width:0}
  .navsub a{padding-left:calc(clamp(1.25rem,5vw,3.5rem) + 1.2rem);font-size:1rem}
}

/* ---------- paginakop: beeld links, wit paneel rechts, zoals de magazinecover ---------- */
.pagehead{position:relative;background:var(--room);display:grid;
  grid-template-columns:minmax(0,45%) minmax(0,55%);align-items:center}
.pagehead .beeld{position:relative;align-self:stretch;min-height:30rem}
.pagehead .beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pagehead .vlag{position:absolute;top:0;left:0;z-index:4}
.pagehead .tekst{position:relative;z-index:3;background:var(--wit);border-radius:28px;
  margin:clamp(2rem,4vw,3.5rem) clamp(1.5rem,4vw,3.5rem) clamp(2rem,4vw,3.5rem) -3.5rem;
  padding:clamp(1.8rem,3vw,2.8rem);box-shadow:var(--schaduw)}
.pagehead .tekst>*+*{margin-top:1rem}
.pagehead h1{font-family:var(--display);font-weight:500;color:var(--blauw-titel);
  font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.05;text-shadow:2px 2px 0 var(--blauw-schaduw)}
.pagehead .lede{font-size:clamp(1.02rem,1.4vw,1.14rem);color:var(--blauw);font-weight:700}
@media (max-width:900px){
  .pagehead{grid-template-columns:1fr}
  /* Geen aspect-ratio hier: Safari negeert die op een uitgerekt rasteritem
     waarvan het beeld absoluut gepositioneerd is, waardoor het beeldvlak
     inklapt tot nul en de vlag boven op het witte paneel valt.
     Een echte hoogte laat daar geen twijfel over. */
  .pagehead .beeld{align-self:start;min-height:0;aspect-ratio:auto;
    height:min(66vw,22rem)}
  .pagehead .tekst{margin:-3rem clamp(.9rem,3vw,2rem) 2rem;border-radius:22px}
}

/* ---------- home: kop over het beeld ---------- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.hero .beeldband{position:relative;aspect-ratio:21/9;min-height:26rem;overflow:hidden;background:var(--perzik-licht);
  /* de onderrand herhaalt de hoek van de rubriekvlag, in de tegenoverliggende hoek.
     De percentages zijn zo gekozen dat de helling gelijk blijft bij elke breedte. */
  clip-path:polygon(0 0, 100% 0, 100% 74%, 76% 100%, 0 100%)}
.hero .beeldband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 35%;opacity:0;transition:opacity 1.4s ease-in-out}
.hero .beeldband img.aan{opacity:1}
.hero .beeldband img:not(:first-child){object-position:center}
@media (prefers-reduced-motion:reduce){
  .hero .beeldband img{transition:none}
}
.hero .beeldband::before{content:"";position:absolute;left:0;right:0;top:0;height:170px;z-index:1;
  background:linear-gradient(to bottom,rgba(8,30,52,.55),rgba(8,30,52,0))}
.hero .beeldband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(13,73,129,.62),rgba(13,73,129,.20) 55%,rgba(13,73,129,.48))}
.hero .beeldband{grid-row:1;grid-column:1}
.hero .op{grid-row:1;grid-column:1;position:relative;z-index:2;display:flex;align-items:center;pointer-events:none}
.hero .op .wrap{width:100%}
.hero .onder{grid-row:2;grid-column:1}
.hero h1{font-family:var(--display);font-weight:500;color:#fff;
  font-size:clamp(1.65rem,5.4vw,4.2rem);line-height:1.04;max-width:20ch;
  text-shadow:0 2px 20px rgba(8,20,32,.5)}
.hero h1 span{display:block;color:var(--geel)}
.hero .onder{background:var(--wit)}
.hero .onder .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.5rem);padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(2rem,4vw,3rem)}
.hero .lede{font-size:clamp(1.04rem,1.5vw,1.16rem);color:var(--blauw);font-weight:700}
.hero .onder p+p{margin-top:.9rem}
@media (max-width:860px){
  .hero .beeldband{aspect-ratio:4/3;min-height:0;clip-path:polygon(0 0, 100% 0, 100% 85%, 76% 100%, 0 100%)}
  .hero .onder .wrap{grid-template-columns:1fr;gap:1.2rem}
}
.cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem 1.4rem;
  border-top:3px solid var(--perzik);padding-top:1.1rem;margin-top:0;font-size:.88rem;color:var(--inkt-zacht)}
@media (max-width:1100px){.cijfers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cijfers b{font-family:var(--display);font-weight:500;color:var(--oranje);font-size:1.35rem;
  display:block;line-height:1.1}

/* ---------- secties ---------- */
section{padding:clamp(2.8rem,5.5vw,4.5rem) 0}
.band-room{background:var(--room)}
.band-perzik{background:var(--perzik-licht)}
.kopregel{margin-bottom:2rem;max-width:46rem}
.kopregel h2{font-family:var(--display);font-weight:500;color:var(--blauw-titel);
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.08;text-shadow:2px 2px 0 var(--blauw-schaduw)}
.kopregel .kruimel{font-family:var(--label);font-weight:700;font-size:.92rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--rubriek);margin-bottom:.35rem}
.r-agenda .kopregel .kruimel,.r-contact .kopregel .kruimel{color:var(--oranje)}
.kopregel p{margin-top:.9rem;color:var(--inkt-zacht);font-size:1.04rem}

/* lopende tekst in twee kolommen, zoals in het magazine */
.kolommen{columns:2;column-gap:clamp(2rem,4vw,3.2rem);column-fill:balance;max-width:58rem}
.kolommen>p{margin-bottom:.95rem;break-inside:avoid}
.kolommen h3{color:var(--rubriek);font-size:1.02rem;font-weight:700;margin:1.5rem 0 .3rem;break-after:avoid}
.r-agenda .kolommen h3,.r-contact .kolommen h3{color:var(--oranje)}
.kolommen>*:first-child{margin-top:0}
@media (max-width:760px){.kolommen{columns:1}}
.intro{font-weight:700;color:var(--blauw);max-width:40rem;font-size:1.08rem}

/* ---------- blokjes ---------- */
.punten{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:1.7rem clamp(2rem,4vw,3rem)}
.punt h3{color:var(--rubriek);font-size:1.05rem;font-weight:700;margin-bottom:.3rem}
.r-agenda .punt h3,.r-contact .punt h3{color:var(--oranje)}
.punt p{font-size:.97rem;color:var(--inkt-zacht)}
.punt p+p{margin-top:.55rem}
.punt a{color:var(--oranje);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(244,124,41,.35)}
.punt a:hover{border-bottom-color:var(--oranje)}

.opsom{list-style:none;margin:0;padding:0;max-width:36rem}
.opsom li{position:relative;padding-left:1.4rem;margin-bottom:.55rem;color:var(--inkt-zacht)}
.opsom li::before{content:"";position:absolute;left:0;top:.58em;width:8px;height:8px;
  border-radius:50%;background:var(--groen)}
.opsom li b{color:var(--inkt)}
.opsom.twee{max-width:none;columns:2;column-gap:3rem}
.opsom.twee li{break-inside:avoid}
@media (max-width:560px){.opsom.twee{columns:1}}

/* ---------- kaarten, met de afgeronde hoek van de magazinecover ---------- */
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem}
.kt{display:flex;flex-direction:column;background:var(--wit);border-radius:20px;overflow:hidden;
  text-decoration:none;color:inherit;box-shadow:var(--schaduw);
  transition:transform .2s ease,box-shadow .2s ease}
.kt:hover,.kt:focus-visible{transform:translateY(-3px);box-shadow:0 6px 12px rgba(20,30,40,.08),0 18px 44px rgba(20,30,40,.14)}
.kt .beeld{aspect-ratio:4/3;overflow:hidden;background:var(--perzik-licht)}
.kt .beeld img{width:100%;height:100%;object-fit:cover}
.kt .body{padding:1.1rem 1.2rem 1.35rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.kt h3{font-family:var(--display);font-weight:500;font-size:1.24rem;color:var(--blauw-titel)}
.kt p{font-size:.93rem;color:var(--inkt-zacht)}
.kt .link{margin-top:auto;padding-top:.4rem;font-size:.85rem;font-weight:700;color:var(--oranje)}
.kt .link::after{content:" \2192"}
@media (min-width:1240px){.kaarten.vijf{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:820px) and (max-width:1239px){.kaarten.vijf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:520px) and (max-width:819px){.kaarten.vijf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:519px){.kaarten.vijf{grid-template-columns:1fr}}
.kaarten.vijf .kt h3{font-size:1.12rem}
.kaarten.vijf .kt p{font-size:.9rem}

/* ---------- perzikkader voor citaten en zijnoten ---------- */
.kader{background:var(--perzik-licht);border-radius:22px 6px 22px 6px;
  padding:1.5rem 1.7rem;max-width:40rem}
.kader.perzik{background:var(--perzik)}
.kader h3{color:var(--blauw);font-size:1.02rem;font-weight:700;margin-bottom:.45rem}
.kader p{color:var(--inkt);font-size:.98rem}
.kader p+p{margin-top:.7rem}

.uitspraak{position:relative;padding-left:1.6rem;max-width:44rem;
  border-left:5px solid var(--rubriek)}
.r-contact .uitspraak{border-left-color:var(--oranje)}
.uitspraak p{font-family:var(--display);font-weight:500;color:var(--blauw-titel);
  font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.25;text-shadow:2px 2px 0 var(--blauw-schaduw)}
.uitspraak cite{display:block;font-family:var(--sans);font-style:normal;font-size:.88rem;
  color:var(--grijs);margin-top:.8rem;text-shadow:none}

/* ---------- beeld in de tekst, met de rand van het magazine ---------- */
.fotorand{border:3px solid var(--rubriek);box-shadow:0 4px 14px rgba(20,30,40,.14)}
.r-contact .fotorand{border-color:var(--oranje)}
.beeldband-in{margin:clamp(2rem,4.5vw,3.2rem) 0}
/* height:auto hoort hier telkens bij. Elk beeld krijgt bij het bouwen zijn
   eigen width en height mee, zodat de pagina niet verspringt tijdens het
   laden. Maar zolang die hoogte blijft staan, is aspect-ratio dode letter:
   de browser gebruikt dan gewoon de hoogte uit het bestand. */
.beeldband-in img{width:100%;height:auto;aspect-ratio:24/9;object-fit:cover}
.beeldband-in figcaption{margin-top:.5rem;font-size:.8rem;color:var(--grijs)}
@media (max-width:620px){.beeldband-in img{aspect-ratio:16/10}}
.tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,2vw,1.5rem);
  margin:clamp(2rem,4.5vw,3.2rem) 0}
.tweeluik img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
@media (max-width:560px){.tweeluik{grid-template-columns:1fr}.tweeluik img{aspect-ratio:4/3}}
.drieluik{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.3rem);
  margin:clamp(2rem,4.5vw,3.2rem) 0}
.drieluik img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (max-width:620px){.drieluik{grid-template-columns:1fr 1fr}.drieluik :last-child{grid-column:span 2}}

/* naast elkaar: tekst en beeld */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.duo.beeldlinks .tekstkant{order:2}
@media (max-width:860px){.duo{grid-template-columns:1fr}.duo.beeldlinks .tekstkant{order:0}}
.duo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* ---------- agenda ---------- */
.agenda{display:flex;flex-direction:column;gap:1rem}
.item{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:clamp(1rem,3vw,2rem);
  background:var(--wit);border-radius:18px;box-shadow:var(--schaduw);
  border-left:6px solid var(--geel);padding:1.3rem 1.5rem}
.item.eerst{border-left-color:var(--oranje)}
@media (max-width:620px){.item{grid-template-columns:1fr;gap:.7rem}}
.datum .dag{font-family:var(--display);font-weight:500;font-size:2.5rem;line-height:1;color:var(--oranje)}
.datum .maand{font-family:var(--label);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--blauw);margin-top:.15rem}
.datum .jaar{font-size:.76rem;color:var(--grijs);letter-spacing:.06em}
.item h3{font-family:var(--display);font-weight:500;font-size:1.3rem;color:var(--blauw-titel);margin-bottom:.25rem}
.item .meta{font-family:var(--label);font-size:.92rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--inkt-zacht);font-weight:700;margin-bottom:.5rem}
.item p{font-size:.96rem;color:var(--inkt-zacht)}
.tag{display:inline-block;font-family:var(--label);font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;background:var(--geel);color:var(--blauw);
  padding:.15rem .6rem;margin-bottom:.55rem;border-radius:4px}
.item.voorbij{opacity:.55;border-left-color:var(--lijn)}
.item .geweest{display:inline-block;font-family:var(--label);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grijs);margin-left:.55rem;vertical-align:.15em;font-weight:700}

/* ---------- tijdlijn ---------- */
.tijdlijn{margin:0;border-top:2px solid var(--perzik)}
.tl{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1.4rem;padding:1rem 0;
  border-bottom:1px solid var(--lijn);align-items:baseline}
.tl dt{font-family:var(--display);font-weight:500;font-size:1.25rem;color:var(--oranje);
  font-variant-numeric:tabular-nums}
.tl dd{margin:0;color:var(--inkt-zacht);font-size:.97rem}
.tl dd b{color:var(--inkt);font-weight:700}
@media (max-width:560px){.tl{grid-template-columns:1fr;gap:.1rem}}

/* ---------- knop en contact ---------- */
.knop{display:inline-block;margin-top:1.1rem;background:var(--oranje);color:#fff;
  text-decoration:none;font-weight:700;font-size:.98rem;padding:.8rem 1.5rem;
  border-radius:999px;transition:background .18s,transform .18s}
.knop:hover{background:#DE6A19;transform:translateY(-1px)}
.knop.blauw{background:var(--blauw)}
.knop.blauw:hover{background:#093A67}
.knop.leeg{background:transparent;color:var(--blauw);border:2px solid var(--blauw);padding:.7rem 1.4rem}
.knop.leeg:hover{background:var(--blauw);color:#fff}

.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.7rem 2.4rem}
.contact h3{font-family:var(--label);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--oranje);margin-bottom:.4rem}
.contact p{font-size:.98rem;color:var(--inkt-zacht)}
.contact a{color:var(--blauw);text-underline-offset:3px}
.adreskaart{background:var(--perzik-licht);border-radius:22px 6px 22px 6px;
  padding:1.5rem 1.7rem;max-width:26rem}
.adreskaart h3{font-family:var(--display);font-weight:500;font-size:1.3rem;color:var(--blauw-titel);margin-bottom:.5rem}
.adreskaart p{font-size:.97rem;color:var(--inkt-zacht)}
.adreskaart p+p{margin-top:.7rem}
.adreskaart b{color:var(--inkt)}

/* ---------- slotregel ---------- */
.slotregel{border-top:2px solid var(--perzik);padding-top:1.5rem}
.slotregel p{color:var(--inkt-zacht);max-width:36rem;margin:0}
.slotwegen{display:flex;flex-wrap:wrap;gap:.5rem 1.7rem;margin-top:1rem}
.slotwegen a{font-size:.95rem;color:var(--oranje);text-decoration:none;font-weight:700;
  border-bottom:2px solid rgba(244,124,41,.35);padding-bottom:2px}
.slotwegen a:hover{border-bottom-color:var(--oranje)}
.gemarkeerd{animation:aanwijzen 2.6s ease-out}
@keyframes aanwijzen{
  0%,35%{background:rgba(249,183,25,.28);box-shadow:0 0 0 12px rgba(249,183,25,.28)}
  100%{background:transparent;box-shadow:0 0 0 12px transparent}
}
@media (prefers-reduced-motion:reduce){.gemarkeerd{animation:none;box-shadow:0 0 0 4px rgba(249,183,25,.6)}}

/* ---------- voet ---------- */
footer{background:var(--room);border-top:5px solid var(--groen);
  padding:clamp(2.5rem,5vw,3.5rem) 0 0;font-size:.95rem;color:var(--inkt-zacht)}
.voet{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(1.8rem,4vw,3rem);
  padding-bottom:clamp(2rem,4vw,2.8rem)}
@media (max-width:1000px){.voet{grid-template-columns:1fr 1fr;gap:2.2rem}}
@media (max-width:620px){.voet{grid-template-columns:1fr}}
.voet img.merk{height:80px;width:auto;margin-bottom:1rem}
.voet h4{font-family:var(--label);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--oranje);margin:0 0 .8rem}
.voet p{margin-bottom:.75rem;max-width:22rem}
.voet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.voet a{color:var(--inkt);text-decoration:none;border-bottom:2px solid transparent}
.voet a:hover{border-bottom-color:var(--groen)}
/* Het erkenningslogo van het VAPH. Vast in breedte, want een erkenningslogo
   mag niet vervormen. De link krijgt geen hoverlijntje, dat zou tegen de
   onderrand van het logo botsen. */
.voet a.vaph{display:inline-block;margin-top:1rem;border-bottom:0}
.voet a.vaph img{width:142px;height:auto;display:block}
.voet-rand{border-top:1px solid var(--lijn)}
.voet-onder{display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;
  padding:1rem 0 2.2rem;font-size:.82rem;color:var(--grijs)}
.voet-onder a{color:var(--grijs)}

/* ---------- de huisstijlpagina ---------------------------------------------
   Staat niet in het menu. Alleen wie de link krijgt, komt hier.
   --------------------------------------------------------------------------- */
.kopnaast > div > p + p{margin-top:.9rem}

.logoproef{background:var(--wit);border:1px solid var(--lijn);border-radius:18px;
  padding:clamp(1.4rem,4vw,2.6rem);display:flex;align-items:center;justify-content:center}
.logoproef img{width:100%;max-width:24rem;height:auto;display:block}

.stalen{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  gap:1.1rem;margin:1.2rem 0 2.4rem}
.staal{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;
  overflow:hidden;padding-bottom:.9rem}
.staal .vlak{display:block;height:4.6rem;border-bottom:1px solid rgba(0,0,0,.06)}
.staal b{display:block;margin:.75rem .9rem 0;font-size:.98rem}
.staal code{display:block;margin:.15rem .9rem 0;font-family:var(--label);
  font-size:1rem;letter-spacing:.04em;color:var(--inkt)}
.staal .rgb{display:block;margin:0 .9rem;font-size:.78rem;color:var(--grijs)}
.staal .waarvoor{display:block;margin:.45rem .9rem 0;font-size:.84rem;color:var(--inkt-zacht)}

.kleurkop{font-family:var(--label);font-size:1.05rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--oranje);margin:2rem 0 .3rem}
.kleurtekst{max-width:var(--measure);margin:0 0 .6rem;color:var(--inkt-zacht)}

.downloads{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));
  gap:.9rem;margin:2rem 0}
.downloads a{display:block;background:var(--wit);border:1px solid var(--lijn);
  border-radius:14px;padding:1rem 1.1rem;text-decoration:none;color:var(--inkt);
  transition:border-color .15s,transform .15s}
.downloads a:hover{border-color:var(--rubriek);transform:translateY(-2px)}
.downloads a b{display:block;font-family:var(--label);font-size:1.08rem;
  letter-spacing:.03em;color:var(--blauw)}
.downloads a span{display:block;font-size:.84rem;color:var(--inkt-zacht);margin-top:.2rem}
.downloads a .groot{color:var(--grijs);font-size:.78rem}

/* Het waarschuwingsblok. Perzik, want dat is de zachtste manier om nee te
   zeggen die we in het palet hebben. */
.let-op{background:var(--perzik-licht);border-radius:18px;
  padding:clamp(1.3rem,3.5vw,2rem);margin:1.6rem 0 0;max-width:46rem}
.let-op h3{margin:0 0 .6rem;color:var(--blauw)}
.let-op ul{margin:0 0 .8rem;padding-left:1.2rem}
.let-op li{margin-bottom:.4rem}
.let-op p{margin:0 0 .7rem}
.let-op p:last-child{margin-bottom:0}

.letters{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:1.6rem;margin-bottom:1.4rem}
.letterproef{background:var(--wit);border:1px solid var(--lijn);border-radius:16px;
  padding:1.3rem 1.4rem}
.letterproef > p:last-child{margin-bottom:0;font-size:.9rem;color:var(--inkt-zacht)}
.proefnaam{font-family:var(--label);font-size:1.1rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--oranje);margin:0 0 .5rem}
.proefnaam span{text-transform:none;letter-spacing:0;color:var(--grijs);
  font-size:.82rem;margin-left:.4rem}
.proef-display{font-family:var(--display);font-size:clamp(1.8rem,5vw,2.4rem);
  line-height:1.1;color:var(--blauw-titel);text-shadow:2px 2px 0 var(--blauw-schaduw);
  margin:0 0 .9rem}
.proef-sans{font-size:1.05rem;margin:0 0 .9rem}
.proef-label{font-family:var(--label);font-size:1.5rem;letter-spacing:.06em;
  font-weight:700;color:var(--oranje);margin:0 0 .9rem}

/* ---------- naar de inhoud springen ---------- */
.overslaan{position:fixed;top:-100px;left:1rem;z-index:80;font:inherit;font-size:.95rem;
  background:var(--wit);color:var(--blauw);border:2px solid var(--blauw);border-radius:999px;
  padding:.6rem 1.2rem;text-decoration:none;transition:top .15s ease}
.overslaan:focus,.overslaan:focus-visible{top:.9rem}
:focus-visible{outline:3px solid var(--oranje);outline-offset:2px}

/* ---------- op papier ---------- */
@media print{
  .masthead,.menuknop,.overslaan,footer,.vlag{display:none !important}
  body{font-size:10.5pt;color:#000}
  .pagehead .beeld,.hero .beeldband,.beeldband-in,.tweeluik,.drieluik,figure{display:none}

  .pagehead .tekst{margin:0;padding:0 0 1rem;box-shadow:none;border-radius:0;max-width:none}
  .hero .op{position:static}
  .hero h1{color:#000;text-shadow:none}
  .titel,.kopregel h2,.pagehead h1,.uitspraak p{color:#000;text-shadow:none}
  .band-room,.band-perzik{background:none !important}
  section{padding:1rem 0}
  .wrap{max-width:none;padding:0}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;word-break:break-all}
  .item,.punt,.adreskaart,.kader,.kt{break-inside:avoid;background:none !important;box-shadow:none}
  h1,h2,h3{break-after:avoid}
  .slotwegen,.knop{display:none}
}

/* ---------------------------------------------------------------------------
   Op de homepagina ligt de kopbalk doorzichtig over de hero. Het logo staat in
   een wit vlak in de vorm van de rubriekvlag, zoals het paneel op de cover van
   het magazine. Zodra je voorbij de hero scrollt wordt de balk gewoon wit.
   --------------------------------------------------------------------------- */
body.thuis .masthead{position:fixed;top:0;left:0;right:0;background:transparent;
  border-bottom-color:transparent;backdrop-filter:none;
  transition:background .25s ease,box-shadow .25s ease}
body.thuis .masthead .wrap{max-width:none;padding-left:0}
body.thuis .masthead.vast .wrap{max-width:80rem;padding-left:clamp(1.25rem,5vw,3.5rem)}
body.thuis .masthead.vast .brand{padding-left:0}
body.thuis .brand{background:var(--wit);padding:.75rem clamp(4.2rem,8vw,5.8rem) 1.1rem clamp(1.25rem,5vw,3.5rem);
  clip-path:polygon(0 0, 100% 0, 90% 56%, 64% 100%, 0 100%);
  transition:background .25s ease,padding .25s ease,clip-path .25s ease}
body.thuis .navlinks > a,body.thuis .navtop{color:#fff;text-shadow:0 1px 10px rgba(8,20,32,.55)}
body.thuis .navlinks > a:hover,body.thuis .navtop:hover{color:var(--geel)}
body.thuis .navlinks > a.active,body.thuis .navtop.actief{color:#fff;border-bottom-color:var(--geel)}
/* de uitklapper is een wit paneel, daar blijft de tekst gewoon donker */
body.thuis .navsub a{color:var(--inkt);text-shadow:none}
body.thuis .navsub a:hover{color:var(--blauw)}
body.thuis .menuknop{border-color:rgba(255,255,255,.6);background:rgba(8,30,52,.35)}
body.thuis .menuknop i{background:#fff}
body.thuis .hero{margin-top:0}

/* zodra de hero voorbij is: gewoon de witte balk */
body.thuis .masthead.vast{background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border-bottom-color:var(--lijn);box-shadow:0 2px 14px rgba(20,30,40,.06)}
body.thuis .masthead.vast .brand{background:transparent;clip-path:none;
  padding:.5rem 0 .5rem clamp(1.25rem,5vw,3.5rem)}
body.thuis .masthead.vast .navlinks > a,body.thuis .masthead.vast .navtop{color:var(--inkt-zacht);text-shadow:none}
body.thuis .masthead.vast .navlinks > a:hover,body.thuis .masthead.vast .navtop:hover{color:var(--blauw)}
body.thuis .masthead.vast .navlinks > a.active,body.thuis .masthead.vast .navtop.actief{color:var(--blauw);border-bottom-color:var(--rubriek)}
body.thuis .masthead.vast .menuknop{border-color:var(--lijn);background:none}
body.thuis .masthead.vast .menuknop i{background:var(--blauw)}

/* het uitgeklapte menu op smal scherm is altijd wit leesbaar */
@media (max-width:1020px){
  body.thuis .navlinks{background:var(--wit)}
  body.thuis .navlinks a,body.thuis .navtop,body.thuis .navsub a{color:var(--inkt-zacht);text-shadow:none}
  body.thuis .navlinks a:hover,body.thuis .navtop:hover,body.thuis .navsub a:hover{color:var(--blauw)}
}
@media (prefers-reduced-motion:reduce){
  body.thuis .masthead,body.thuis .brand{transition:none}
}

/* ======== homepagina: plaatsregel, waarden, cta, verhalen, momenten ======== */


/* de plaats, terug in de hero */
.plaatsregel{font-family:var(--label);font-weight:700;font-size:1.05rem;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;margin-top:1rem;text-shadow:0 1px 14px rgba(8,20,32,.6)}
.plaatsregel span{color:var(--geel)}


/* de waarden, elk met een halve zin erbij */
.waarden{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1.3rem clamp(2rem,4vw,3rem);margin-top:1.8rem}
.waarden div{border-top:3px solid var(--groen);padding-top:.7rem}
.waarden b{display:block;color:var(--blauw);font-size:1rem;margin-bottom:.15rem}
.waarden p{font-size:.95rem;color:var(--inkt-zacht)}

/* de kaartkoppen op gelijke hoogte */
.kaarten.vijf .kt h3{min-height:2.5em}

/* oproep tot actie */
.ctaband{background:var(--perzik);border-radius:26px 6px 26px 6px;
  padding:clamp(1.8rem,3.5vw,2.6rem) clamp(1.8rem,4vw,3rem);margin-top:2.6rem;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:1.4rem clamp(2rem,4vw,3rem);align-items:center}
@media (max-width:820px){.ctaband{grid-template-columns:1fr}}
.ctaband h3{font-family:var(--display);font-weight:500;color:var(--blauw-titel);
  font-size:clamp(1.35rem,2.4vw,1.8rem);margin-bottom:.5rem}
.ctaband p{color:var(--inkt)}
.ctaband a.knop{margin-top:0}
.ctaband .bellen{display:block;font-family:var(--display);font-size:1.5rem;color:var(--blauw);
  text-decoration:none;margin-bottom:.6rem}

/* de verhalen uit het magazine */
.verhalen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.2rem)}
@media (max-width:900px){.verhalen{grid-template-columns:1fr}}
.verhaal figure{margin:0}
.verhaal img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
.verhaal h3{font-family:var(--display);font-weight:500;color:var(--blauw-titel);
  font-size:1.2rem;margin:.9rem 0 .35rem}
.verhaal p{font-size:.96rem;color:var(--inkt-zacht)}
.verhaal .bron{display:block;font-size:.8rem;color:var(--grijs);margin-top:.5rem}

/* de vaste momenten in het jaar */
.momenten{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1.2rem clamp(1.6rem,3vw,2.4rem);margin-top:.4rem}
.momenten div{border-left:4px solid var(--geel);padding:.15rem 0 .15rem .9rem}
.momenten b{display:block;color:var(--blauw);font-size:1rem}
.momenten span{font-size:.93rem;color:var(--inkt-zacht)}

/* vier gelijke punten, nooit een wees op de laatste rij */
@media (min-width:1180px){.punten.vier{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:700px) and (max-width:1179px){.punten.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* een kleine kop in labelstijl, boven een blok */
.minikop{font-family:var(--label);font-weight:700;font-size:.95rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--oranje);margin-top:2.8rem}

/* ======== de blog: kaarten, artikelpagina, het pdf-archief ================= */

/* een tag boven de titel van een artikelkaart */
.kt .rub{font-family:var(--label);font-weight:700;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--oranje)}
.kt .rub+h3{margin-top:-.2rem}
@media (min-width:900px){.kaarten.drie{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:560px) and (max-width:899px){.kaarten.drie{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* de datum en de bron onder de titel van een artikel */
.artikelmeta{font-size:.9rem;color:var(--inkt-zacht)}
.artikelmeta a{color:var(--oranje);font-weight:700}

/* de lopende tekst van een artikel: één kolom, rustige leesbreedte */
.artikeltekst{max-width:40rem;font-size:1.06rem;line-height:1.72}
.artikeltekst>*+*{margin-top:1.1rem}
.artikeltekst h2{font-family:var(--display);font-weight:500;color:var(--blauw-titel);
  font-size:1.5rem;line-height:1.2;margin-top:2.4rem}
.artikeltekst figure{margin:2rem 0}
/* Een staande foto zou anders een heel scherm vullen. De hoogte wordt afgetopt
   en de foto gecentreerd; een liggende foto blijft gewoon de volle breedte. */
.artikeltekst figure img{display:block;margin:0 auto;max-width:100%;width:auto;
  max-height:30rem;border-radius:18px}
.artikeltekst figcaption{margin-top:.6rem;font-size:.88rem;color:var(--grijs)}
.artikeltekst blockquote{margin:2rem 0;padding-left:1.4rem;border-left:4px solid var(--geel)}
.artikeltekst blockquote p{font-family:var(--display);font-weight:400;font-size:1.25rem;
  line-height:1.35;color:var(--blauw)}
.artikeltekst blockquote cite{display:block;margin-top:.6rem;font-style:normal;
  font-size:.88rem;color:var(--grijs)}
.artikeltekst ol.vragen{margin:1.4rem 0;padding-left:1.4rem;color:var(--inkt-zacht)}
.artikeltekst ol.vragen li{margin-bottom:.6rem;padding-left:.3rem}
/* Praktische gegevens in een artikel: uur, plaats, prijs. Geen nummers, want
   het zijn geen stappen. Het lijntje links maakt er een blokje van dat je
   in een oogopslag terugvindt. */
.artikeltekst ul.praktisch{margin:1.4rem 0;padding:.2rem 0 .2rem 1.15rem;
  list-style:none;border-left:3px solid var(--rubriek,#2C6CA8)}
.artikeltekst ul.praktisch li{margin:0 0 .5rem;position:relative;padding-left:1rem}
.artikeltekst ul.praktisch li:last-child{margin-bottom:0}
.artikeltekst ul.praktisch li::before{content:"";position:absolute;left:0;top:.62em;
  width:.38rem;height:.38rem;border-radius:50%;background:var(--rubriek,#2C6CA8);opacity:.55}
.terug{margin-top:2.6rem}
.terug a{font-weight:700;color:var(--oranje)}
.terug a::before{content:"\2190  "}

/* het inschrijfblok op de magazinepagina */
.inschrijf{margin-top:2rem;background:var(--perzik-licht);border-radius:22px;
  padding:clamp(1.4rem,3vw,2rem)}
.inschrijf p{color:var(--inkt-zacht)}
.inschrijf .knop{margin-top:1rem}
.inschrijf input[type=email],.inschrijf input[type=text]{font:inherit;padding:.7rem .9rem;
  border:1px solid var(--blauw-schaduw);border-radius:12px;background:var(--wit);min-width:16rem}
.inschrijf form{display:flex;flex-wrap:wrap;gap:.9rem;align-items:flex-end;margin-top:1.3rem}
.inschrijf .veld{flex:1 1 16rem}
.inschrijf label{display:block;font-family:var(--label);font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;color:var(--blauw);margin-bottom:.35rem}
.inschrijf .veld input{width:100%;min-width:0}
.inschrijf form .knop{margin-top:0;border:0;cursor:pointer;font:inherit;font-weight:700}

/* het archief met alle nummers */
.nummers{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:1rem}
.nummer{display:flex;flex-direction:column;gap:.15rem;background:var(--wit);border-radius:16px;
  padding:.9rem 1rem 1rem;box-shadow:var(--schaduw);text-decoration:none;color:inherit;
  border-top:5px solid var(--oranje);transition:transform .2s ease,box-shadow .2s ease}
a.nummer:hover,a.nummer:focus-visible{transform:translateY(-3px);
  box-shadow:0 6px 12px rgba(20,30,40,.08),0 16px 36px rgba(20,30,40,.13)}
.nummer b{font-family:var(--display);font-weight:500;font-size:1.2rem;color:var(--blauw-titel)}
.nummer span{font-size:.86rem;color:var(--inkt-zacht)}
.nummer .dl{margin-top:.5rem;font-size:.8rem;font-weight:700;color:var(--oranje)}
.nummer.leeg{border-top-color:var(--blauw-schaduw);box-shadow:none;background:transparent;
  border:1px dashed var(--blauw-schaduw)}
.nummer.leeg b{color:var(--grijs)}
.nummer.leeg .dl{color:var(--grijs);font-weight:400}

/* ======== homepagina: kop naast tekst, en de wegen naar Iona ============== */

/* kop links, lopende tekst rechts: vult de breedte zonder de regels te lang
   te maken. Onder 860px valt het onder elkaar.
   LET OP: niet .tweeluik noemen, die klasse bestaat al voor twee foto's naast elkaar. */
.kopnaast{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(1.8rem,5vw,4.5rem);align-items:start}
/* mobiel: eerst de kop, dan de tekst, en pas daarna het citaat */
@media (max-width:860px){
  .kopnaast{display:flex;flex-direction:column;gap:1.3rem}
  .kopnaast-kop{display:contents}
  .kopnaast-kop .kruimel{order:1}
  .kopnaast-kop h2{order:2}
  .kopnaast-tekst{order:3}
  .kopnaast-kop .uitspraak{order:4;margin-top:.4rem}
}
.kopnaast-kop .kruimel{font-family:var(--label);font-weight:700;font-size:.92rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--rubriek);margin-bottom:.35rem}
.kopnaast-kop h2{font-family:var(--display);font-weight:500;color:var(--blauw-titel);
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.08;text-shadow:2px 2px 0 var(--blauw-schaduw)}
.kopnaast-kop .uitspraak{margin-top:clamp(1.6rem,3vw,2.4rem);max-width:none}
.kopnaast-kop .uitspraak p{font-size:clamp(1.1rem,1.9vw,1.35rem)}
.kopnaast-tekst>p+p{margin-top:1rem}
.kopnaast-tekst p{font-size:1.02rem;line-height:1.72;color:var(--inkt-zacht)}
.kopnaast-tekst .lede{font-size:1.16rem;line-height:1.6;color:var(--inkt)}

/* de vier wegen naar Iona: kaarten, zodat het blok niet op de voet lijkt */
.tekstkaart .body{padding:1.3rem 1.4rem 1.5rem}
.tekstkaart h3{font-size:1.18rem}
@media (min-width:1100px){.kaarten.wegen{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:620px) and (max-width:1099px){.kaarten.wegen{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* De schuine hoek van de hero neemt de kleur van wat eronder staat. Nu is dat wit.
   Komt er ooit een gekleurd blok direct onder de hero, zet hier dan diezelfde kleur,
   anders wordt de diagonaal een grens tussen foto en wit in plaats van foto en kleur. */
body.thuis .hero{background:var(--wit)}

/* ======== Iona bouwt: de tijdlijn en de klemtonen ========================== */

.bouwtijdlijn{list-style:none;margin:0;padding:0;display:grid;gap:0;
  border-left:3px solid var(--blauw-schaduw);margin-left:.4rem}
.bouwtijdlijn .stap{position:relative;padding:0 0 1.6rem 1.7rem}
.bouwtijdlijn .stap:last-child{padding-bottom:0}
.bouwtijdlijn .stap::before{content:"";position:absolute;left:-.62rem;top:.42rem;
  width:1.05rem;height:1.05rem;border-radius:50%;background:var(--wit);
  border:3px solid var(--blauw-schaduw)}
.bouwtijdlijn .stap.nu::before{background:var(--oranje);border-color:var(--oranje)}
.bouwtijdlijn .wanneer{display:block;font-family:var(--label);font-weight:700;
  font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--oranje)}
.bouwtijdlijn b{display:block;font-family:var(--display);font-weight:500;
  color:var(--blauw-titel);font-size:1.2rem;margin:.1rem 0 .25rem}
.bouwtijdlijn p{font-size:.97rem;color:var(--inkt-zacht);max-width:46rem}
.bouwtijdlijn .stap.nu b::after{content:"we zijn hier";margin-left:.7rem;
  font-family:var(--label);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--wit);background:var(--oranje);border-radius:99px;padding:.15rem .55rem;
  vertical-align:middle}

.klemtonen div{border-top-color:var(--blauw-schaduw)}
.klemtonen b{color:var(--blauw-titel);font-family:var(--display);font-weight:500;
  font-size:1.1rem;margin-bottom:.3rem}

/* ======== de gekleurde knop rechts in de menubalk ========================== */

.navrechts{display:flex;align-items:center;gap:.6rem}
.navcta{background:var(--oranje);color:var(--wit);border-radius:99px;
  padding:.55rem 1.15rem;font-weight:700;font-size:.92rem;text-decoration:none;
  white-space:nowrap;transition:background .15s ease,transform .15s ease}
.navcta:hover,.navcta:focus-visible{background:#DB6A1C;color:var(--wit);transform:translateY(-1px)}
/* je staat op de pagina waar de knop naartoe wijst: dezelfde knop, alleen
   iets ingedrukt, zodat hij nergens van kleur verandert */
.navcta.hier{background:#DB6A1C;box-shadow:inset 0 2px 5px rgba(0,0,0,.18)}
.navcta.hier:hover{background:#DB6A1C;transform:none}
/* ook boven de hero, waar de balk doorzichtig is, blijft hij oranje met wit */
body.thuis .navcta{color:var(--wit)}
@media (max-width:1020px){
  .navcta{font-size:.86rem;padding:.5rem .95rem}
}
@media (max-width:400px){
  .navcta{font-size:.78rem;padding:.45rem .75rem}
  .masthead .wrap{gap:.5rem}
}

/* ======== de teller: doel, stand en bedragen =============================== */

.doneer{background:var(--wit);border-radius:22px;padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:var(--schaduw);max-width:38rem}
.teller{margin-bottom:1.4rem}
.cijfers-teller{display:flex;gap:clamp(1.6rem,4vw,3rem);margin-bottom:.8rem}
.cijfers-teller b{display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,3vw,2rem);color:var(--oranje);line-height:1}
.cijfers-teller div:last-child b{color:var(--blauw-titel)}
.cijfers-teller span{font-size:.88rem;color:var(--inkt-zacht)}
.balk{height:14px;border-radius:99px;background:var(--perzik-licht);overflow:hidden}
.balk i{display:block;height:100%;border-radius:99px;background:var(--oranje)}
.balk.klein{height:7px;background:var(--lijn-zacht)}
.stand-datum{margin-top:.5rem;font-size:.82rem;color:var(--grijs)}

.bedragkop{font-family:var(--label);font-weight:700;font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--oranje);margin-bottom:.6rem}
.bedragen{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.bedragen span{border:2px solid var(--blauw-schaduw);border-radius:99px;
  padding:.35rem .9rem;font-weight:700;font-size:.95rem;color:var(--blauw)}
.giftregel{font-size:.97rem}
.giftregel+.giftregel{margin-top:.7rem}
.qr{margin:1.3rem 0 0;display:flex;align-items:center;gap:1rem}
.qr img{width:112px;height:112px;border-radius:10px}
.qr figcaption{font-size:.88rem;color:var(--inkt-zacht)}

/* het balkje op een projectkaart */
.kaartstand{margin-top:.6rem}
.kaartstand span{display:block;margin-top:.35rem;font-size:.82rem;color:var(--inkt-zacht)}

/* ======== artikelpagina: zijkolom links, tekst rechts ===================== */

.artikelblad{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,40rem);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.zijkolom{position:sticky;top:6.5rem}
.zijkolom>*+*{margin-top:.9rem}
.zij-rubriek{font-family:var(--label);font-weight:700;font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--oranje)}
.zij-datum{font-size:.92rem;color:var(--inkt-zacht)}
.zij-bron{font-size:.92rem;color:var(--inkt-zacht);padding-top:.9rem;
  border-top:2px solid var(--perzik)}
.zij-bron a,.zij-bron b{display:inline-block;margin-top:.2rem;font-weight:700;color:var(--blauw)}
.zij-bron span{display:block;font-size:.82rem;color:var(--grijs)}
.zij-terug{padding-top:.9rem;border-top:1px solid var(--lijn)}
.zij-terug a{font-weight:700;color:var(--oranje);text-decoration:none}
.zij-terug a::before{content:"\2190  "}
.zij-terug a:hover{text-decoration:underline}

@media (max-width:900px){
  .artikelblad{grid-template-columns:1fr;gap:1.6rem}
  .zijkolom{position:static;display:flex;flex-wrap:wrap;align-items:baseline;
    gap:.4rem 1.2rem;padding-bottom:1.1rem;border-bottom:2px solid var(--perzik)}
  .zijkolom>*+*{margin-top:0}
  .zij-bron{border-top:0;padding-top:0}
  .zij-bron br{display:none}
  .zij-bron span{display:none}
  .zij-terug{border-top:0;padding-top:0;width:100%;margin-top:.4rem}
}

/* een tijdelijke oproep op de steunpagina */
.oproep{max-width:44rem}
.oproep .kruimel{font-family:var(--label);font-weight:700;font-size:.92rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--oranje);margin-bottom:.35rem}
.oproep h2{font-family:var(--display);font-weight:500;color:var(--blauw-titel);
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.08;text-shadow:2px 2px 0 var(--blauw-schaduw);
  margin-bottom:1rem}
.oproep p+p{margin-top:.8rem}
.oproep .knop{margin-top:.6rem}

/* ======== Werken bij Iona: vacatures en het sollicitatieformulier ========= */

/* vier lijstjes naast elkaar wordt te smal om te lezen: hoogstens twee */
@media (min-width:760px){.punten.vacblokken{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vacblokken .opsom{max-width:none}
.vacblokken .punt h3{font-size:1.12rem;margin-bottom:.6rem}

.doorsturen{margin-top:2rem;font-size:.97rem;color:var(--inkt-zacht)}
.doorsturen a{color:var(--oranje);font-weight:700}

.uitspraak cite a{color:var(--oranje);font-weight:700;white-space:nowrap}

.sollblok{background:var(--wit);border-radius:26px 6px 26px 6px;box-shadow:var(--schaduw);
  padding:clamp(1.5rem,3.5vw,2.6rem);display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
@media (max-width:860px){.sollblok{grid-template-columns:1fr}}
.sollkop h2{font-family:var(--display);font-weight:500;color:var(--blauw-titel);
  font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.1;text-shadow:2px 2px 0 var(--blauw-schaduw);
  margin-bottom:.8rem}
.sollkop p{color:var(--inkt-zacht)}
.sollkop .sollbel{margin-top:1rem;font-size:.95rem}
.sollkop .sollbel a{color:var(--blauw);font-weight:700;white-space:nowrap}
.sollform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.1rem}
.sollform .breed{grid-column:1 / -1}
@media (max-width:560px){.sollform{grid-template-columns:1fr}}
.sollform label{display:block;font-family:var(--label);font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;color:var(--blauw);margin-bottom:.35rem}
.sollform label span{text-transform:none;letter-spacing:0;font-family:var(--sans);
  font-weight:400;font-size:.82rem;color:var(--grijs);margin-left:.3rem}
.sollform input[type=text],.sollform input[type=tel],.sollform input[type=email],
.sollform textarea,.sollform select{width:100%;font:inherit;font-size:1rem;color:var(--inkt);
  padding:.7rem .9rem;border:1px solid var(--blauw-schaduw);border-radius:12px;background:var(--wit)}
.sollform textarea{resize:vertical;min-height:7.5rem;line-height:1.5}
.sollform input:focus,.sollform textarea:focus,.sollform select:focus{outline:3px solid var(--oranje);
  outline-offset:1px;border-color:var(--oranje)}
.sollform .vink{display:flex;gap:.6rem;align-items:flex-start;font-family:var(--sans);
  font-size:.95rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--inkt-zacht);margin:0}
.sollform .vink input{margin-top:.3rem;width:1.05rem;height:1.05rem;flex:none}
.sollform button.knop{margin-top:0;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:1rem}
.sollform .klein{margin-top:.8rem;font-size:.84rem;color:var(--grijs)}
/* de val voor robots: buiten beeld, niet display:none, want dat herkennen ze */
.sollform .val{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media print{.sollblok,.doorsturen{display:none}}