@font-face{font-family: "Altivo";
src: url("../assets/fonts/altivo-bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap}
@font-face{font-family: "Gochi Hand";
src: url("../assets/fonts/GochiHand-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap}
@font-face{font-family: "Mulish";
src: url("../assets/fonts/mulish-latin.woff2") format("woff2");
font-weight: 200 1000;
font-style: normal;
font-display: swap}
@font-face{font-family: "Mulish";
src: url("../assets/fonts/mulish-italic-latin.woff2") format("woff2");
font-weight: 200 1000;
font-style: italic;
font-display: swap}
@font-face{font-family: "Spectral";
src: url("../assets/fonts/spectral-400-latin.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap}
@font-face{font-family: "Spectral";
src: url("../assets/fonts/spectral-500-latin.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap}
@font-face{font-family: "Spectral";
src: url("../assets/fonts/spectral-600-latin.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap}
@font-face{font-family: "Spectral";
src: url("../assets/fonts/spectral-400i-latin.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap}
@font-face{font-family: "Spectral";
src: url("../assets/fonts/spectral-500i-latin.woff2") format("woff2");
font-weight: 500;
font-style: italic;
font-display: swap}
:root{--indigo-950: #150F2E;
--indigo-900: #1E1742;
--indigo-800: #261D52;
--indigo-700: #2F255D;
--indigo-600: #3E3275;
--indigo-500: #51428F;
--indigo-400: #6F5FB0;
--indigo-300: #9A8DCD;
--indigo-200: #C5BCE3;
--indigo-100: #E5E0F2;
--indigo-50:  #F3F1FA;
--gold-900: #7A4E12;
--gold-700: #B5781E;
--gold-600: #D8932A;
--gold-500: #EFA838;
--gold-400: #F5BC5E;
--gold-300: #F9D293;
--gold-200: #FCE6C2;
--gold-100: #FDF3E0;
--gold-50:  #FEF9F0;
--sky-700: #2E6C8F;
--sky-500: #4E97BE;
--sky-300: #9CC6DC;
--sky-100: #E2EFF5;
--paper:     #FBF8F3;
--paper-dim: #F3EEE4;
--cream-100: #F7F2E9;
--cream-200: #ECE5D8;
--sand-300:  #DBD2C2;
--sand-400:  #C2B7A3;
--stone-500: #948A78;
--stone-600: #6E6557;
--ink-700:   #423C45;
--ink-800:   #2C2733;
--ink-900:   #1C1825;
--white:     #FFFFFF;
--success-600: #3F7D4E;
--success-100: #E4F0E5;
--warning-600: #C98A1E;
--warning-100: #FBEFD3;
--danger-600:  #B5453B;
--danger-100:  #F6E1DE;
--info-600:    #2E6C8F;
--info-100:    #E2EFF5;
--brand:            var(--indigo-700);
--brand-strong:     var(--indigo-800);
--brand-soft:       var(--indigo-100);
--accent:           var(--gold-500);
--accent-strong:    var(--gold-600);
--accent-soft:      var(--gold-100);
--bg-base:          var(--paper);
--bg-subtle:        var(--paper-dim);
--bg-deep:          var(--indigo-700);
--bg-deep-strong:   var(--indigo-900);
--surface-card:     var(--white);
--surface-raised:   var(--white);
--surface-sunken:   var(--cream-100);
--surface-inverse:  var(--indigo-800);
--text-strong:      var(--ink-900);
--text-body:        var(--ink-800);
--text-muted:       var(--stone-600);
--text-faint:       var(--stone-500);
--text-on-brand:    var(--paper);
--text-on-accent:   var(--indigo-900);
--text-link:        var(--indigo-600);
--border-subtle:    var(--cream-200);
--border-default:   var(--sand-300);
--border-strong:    var(--sand-400);
--border-on-brand:  rgba(255,255,255,0.16);
--focus-ring:       var(--gold-500)}
:root{--font-display:   "Altivo", "Mulish", system-ui, sans-serif;
--font-body:      "Mulish", system-ui, -apple-system, sans-serif;
--font-script:    "Gochi Hand", "Bradley Hand", cursive;
--font-scripture: "Spectral", Georgia, "Times New Roman", serif;
--text-2xs:  0.694rem;
--text-xs:   0.8rem;
--text-sm:   0.875rem;
--text-base: 1rem;
--text-md:   1.125rem;
--text-lg:   1.375rem;
--text-xl:   1.75rem;
--text-2xl:  2.25rem;
--text-3xl:  2.95rem;
--text-4xl:  3.85rem;
--text-5xl:  5rem;
--weight-regular: 400;
--weight-medium:  500;
--weight-semibold:600;
--weight-bold:    700;
--weight-display: 700;
--leading-tight:  1.04;
--leading-snug:   1.18;
--leading-normal: 1.5;
--leading-relaxed:1.68;
--tracking-display: -0.01em;
--tracking-caps:    0.08em;
--tracking-wide:    0.04em;
--tracking-normal:  0em}
:root{--space-0:  0;
--space-1:  0.25rem;
--space-2:  0.5rem;
--space-3:  0.75rem;
--space-4:  1rem;
--space-5:  1.5rem;
--space-6:  2rem;
--space-7:  2.5rem;
--space-8:  3rem;
--space-9:  4rem;
--space-10: 5rem;
--space-12: 7rem;
--space-14: 9rem;
--radius-xs:   4px;
--radius-sm:   8px;
--radius-md:   12px;
--radius-lg:   18px;
--radius-xl:   26px;
--radius-2xl:  36px;
--radius-pill: 999px;
--radius-block: 22px;
--shadow-xs:  0 1px 2px rgba(47, 37, 93, 0.06);
--shadow-sm:  0 2px 6px rgba(47, 37, 93, 0.08);
--shadow-md:  0 8px 20px -6px rgba(47, 37, 93, 0.16);
--shadow-lg:  0 18px 40px -12px rgba(47, 37, 93, 0.22);
--shadow-xl:  0 30px 70px -20px rgba(47, 37, 93, 0.28);
--shadow-focus: 0 0 0 3px rgba(239, 168, 56, 0.45);
--container-sm: 640px;
--container-md: 880px;
--container-lg: 1120px;
--container-xl: 1280px;
--gutter:       clamp(1.25rem, 4vw, 3rem);
--ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast:   140ms;
--dur-base:   220ms;
--dur-slow:   420ms}
.btn{--_bg: var(--indigo-700); --_fg: var(--paper); --_bd: transparent;
display: inline-flex; align-items: center; justify-content: center; gap: .55em;
font-family: var(--font-body); font-weight: 700; line-height: 1; white-space: nowrap;
border: 1.5px solid var(--_bd); background: var(--_bg); color: var(--_fg);
border-radius: var(--radius-pill); cursor: pointer; text-decoration: none;
font-size: var(--text-base); padding: .7rem 1.4rem;
transition: transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
background var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
-webkit-tap-highlight-color: transparent}
.btn:focus-visible{outline: none; box-shadow: var(--shadow-focus)}
.btn:active{transform: translateY(1px) scale(.985)}
.btn[disabled], .btn[aria-disabled="true"]{opacity: .5; pointer-events: none}
.btn--sm{font-size: var(--text-sm); padding: .5rem .95rem}
.btn--lg{font-size: var(--text-md); padding: .92rem 1.85rem}
.btn--block{display: flex; width: 100%}
.btn--primary{--_bg: var(--gold-500); --_fg: var(--indigo-900); box-shadow: var(--shadow-sm)}
.btn--primary:hover{--_bg: var(--gold-400); box-shadow: var(--shadow-md)}
.btn--secondary{--_bg: var(--indigo-700); --_fg: var(--paper); box-shadow: var(--shadow-sm)}
.btn--secondary:hover{--_bg: var(--indigo-600); box-shadow: var(--shadow-md)}
.btn--outline{--_bg: transparent; --_fg: var(--indigo-700); --_bd: var(--indigo-300)}
.btn--outline:hover{--_bg: var(--indigo-50); --_bd: var(--indigo-400)}
.btn--ghost{--_bg: transparent; --_fg: var(--indigo-700)}
.btn--ghost:hover{--_bg: var(--indigo-50)}
.btn--on-dark.btn--outline{--_bg: transparent; --_fg: var(--paper); --_bd: var(--border-on-brand)}
.btn--on-dark.btn--outline:hover{--_bg: rgba(255,255,255,.10)}
.btn__icon{display: inline-flex; font-size: 1.1em; line-height: 0}
.card{display: flex; flex-direction: column; background: var(--surface-card);
border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); overflow: hidden;
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
.card--pad-sm{padding: var(--space-4)}
.card--pad-md{padding: var(--space-6)}
.card--pad-lg{padding: var(--space-8)}
.card--flat{box-shadow: none}
.card--sunken{background: var(--surface-sunken); box-shadow: none}
.card--deep{background: var(--indigo-700); border-color: var(--border-on-brand); color: var(--paper)}
.card--interactive{cursor: pointer}
.card--interactive:hover{transform: translateY(-4px); box-shadow: var(--shadow-lg)}
.badge{display: inline-flex; align-items: center; gap: .4em;
font-family: var(--font-body); font-weight: 700; font-size: var(--text-2xs);
letter-spacing: var(--tracking-caps); text-transform: uppercase;
padding: .34em .72em; border-radius: var(--radius-pill);
border: 1px solid transparent; line-height: 1; white-space: nowrap}
.badge--gold{background: var(--gold-100); color: var(--gold-900); border-color: var(--gold-300)}
.badge--indigo{background: var(--indigo-100); color: var(--indigo-700); border-color: var(--indigo-200)}
.badge--sky{background: var(--sky-100); color: var(--sky-700); border-color: var(--sky-300)}
.badge--solid{background: var(--indigo-700); color: var(--paper)}
.card > .badge{align-self: flex-start}
.field{display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-body); margin-bottom: var(--space-4)}
.field__label{font-weight: 700; font-size: var(--text-sm); color: var(--text-strong)}
.field__hint{font-size: var(--text-xs); color: var(--text-muted)}
.field__control{display: flex; align-items: center; gap: .6em; background: var(--white);
border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
padding: 0 var(--space-4);
transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
.field__control:focus-within{border-color: var(--indigo-400); box-shadow: var(--shadow-focus)}
.field input, .field textarea, .field select{flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: var(--text-body);
padding: var(--space-3) 0; min-width: 0}
.field textarea{resize: vertical; min-height: 96px; line-height: var(--leading-normal)}
.field input::placeholder, .field textarea::placeholder{color: var(--text-faint)}
.field__icon{color: var(--text-faint); display: inline-flex; font-size: 1.1em}
.logo{display: inline-flex; align-items: center; line-height: 0}
.logo img{display: block; height: auto; width: 100%}
.verse{--_fg: var(--text-strong); --_accent: var(--gold-600); --_ref: var(--text-muted);
font-family: var(--font-scripture); position: relative; margin: 0; padding-left: var(--space-5)}
.verse::before{content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 3px;
border-radius: var(--radius-pill); background: var(--_accent)}
.verse__text{font-style: italic; font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--_fg); margin: 0; text-wrap: pretty}
.verse__ref{display: block; margin-top: var(--space-3); font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: var(--text-sm); letter-spacing: var(--tracking-wide); color: var(--_ref)}
.verse--lg .verse__text{font-size: var(--text-2xl); line-height: var(--leading-tight)}
.verse--center{text-align: center; padding-left: 0}
.verse--center::before{display: none}
.verse--deep{--_fg: var(--paper); --_accent: var(--gold-400); --_ref: var(--gold-400)}
.heading{--_title: var(--brand); --_eye: var(--accent-strong); --_sub: var(--text-muted); display: flex; flex-direction: column; gap: var(--space-3)}
.heading--center{align-items: center; text-align: center}
.heading__eye{display: inline-flex; align-items: center; gap: .55em; font-family: var(--font-body); font-weight: 700; font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--_eye)}
.heading__eye::before{content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor}
.heading--center .heading__eye::after{content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor}
.heading__title{font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--_title); line-height: 1.02; margin: 0; font-size: clamp(var(--text-2xl), 4.5vw, var(--text-3xl))}
.heading__sub{font-family: var(--font-body); color: var(--_sub); font-size: var(--text-md); line-height: var(--leading-relaxed); margin: 0; max-width: 56ch; text-wrap: pretty}
.heading--deep{--_title: var(--paper); --_eye: var(--gold-400); --_sub: var(--indigo-100)}
.heading--sm .heading__title{font-size: clamp(var(--text-xl), 3vw, var(--text-2xl))}
.activity{display: flex; flex-direction: column; background: var(--surface-card);
border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
a.activity:hover{transform: translateY(-5px); box-shadow: var(--shadow-lg)}
.activity__media{position: relative; aspect-ratio: 16/10; background: var(--indigo-100)}
.activity__media img{width: 100%; height: 100%; object-fit: cover; display: block}
.activity__icon{position: absolute; left: var(--space-4); bottom: calc(-1 * var(--space-5));
width: 54px; height: 54px; border-radius: var(--radius-md); background: var(--gold-500);
color: var(--indigo-900); display: flex; align-items: center; justify-content: center;
font-size: 26px; box-shadow: var(--shadow-md)}
.activity__body{flex: 1; padding: var(--space-6) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2)}
.activity__eyebrow{font-family: var(--font-body); font-weight: 700; font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-strong)}
.activity__title{font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--brand); font-size: var(--text-lg); margin: 0; line-height: 1.05; overflow-wrap: anywhere}
.activity__desc{font-family: var(--font-body); color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); margin: 0}
.activity__more{margin-top: auto; padding-top: var(--space-2); font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); color: var(--text-link); display: inline-flex; align-items: center; gap: .4em}
.photo{position: relative; overflow: hidden; border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--indigo-700), var(--indigo-500) 55%, var(--sky-500));
display: flex; align-items: flex-end; isolation: isolate; aspect-ratio: 16 / 10}
.photo::before{content: ""; position: absolute; inset: 0; z-index: 0;
background: radial-gradient(120% 90% at 80% 0%, rgba(239,168,56,.42), transparent 55%),
radial-gradient(80% 70% at 10% 100%, rgba(21,15,46,.55), transparent 60%)}
.photo::after{content: ""; position: absolute; inset: 0; z-index: 0; opacity: .08;
background-image: url("../assets/img/logo-mark-wit.png"); background-repeat: no-repeat;
background-position: center; background-size: 34% auto; mix-blend-mode: screen}
.photo--gold{background: linear-gradient(135deg, var(--gold-600), var(--gold-400) 60%, var(--gold-300))}
.photo--sky{background: linear-gradient(135deg, var(--sky-700), var(--sky-500) 60%, var(--sky-300))}
.photo--warm{background: linear-gradient(135deg, var(--indigo-800), var(--gold-700))}
.photo__tag{position: relative; z-index: 1; margin: var(--space-4); font-family: var(--font-body);
font-weight: 700; font-size: var(--text-2xs); letter-spacing: var(--tracking-caps);
text-transform: uppercase; color: rgba(255,255,255,.92);
background: rgba(21,15,46,.32); backdrop-filter: blur(4px);
padding: .4em .7em; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: .5em}
.photo__tag::before{content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--gold-400)}
.photo--cover{position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; height: 100%}
.photo > img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1}
.article__figure{margin: var(--space-6) 0}
.article__figure img{display: block; width: 100%; height: auto; border-radius: var(--radius-lg); margin: 0}
.article__figure figcaption{margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug)}
.article__figures{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin: var(--space-6) 0; align-items: start}
.article__figures--3{grid-template-columns: repeat(3, 1fr)}
.article__figures .article__figure{margin: 0}
.article__figures .article__figure img{aspect-ratio: 1 / 1; object-fit: cover}
@media (max-width: 560px){.article__figures--3{grid-template-columns: 1fr 1fr} }
.article__video{position: relative; aspect-ratio: 16 / 9; margin: var(--space-6) 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--indigo-900)}
.article__video a{position: absolute; inset: 0; display: block}
.article__video img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0}
.article__video-play{position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%;
background: var(--gold-500); color: var(--indigo-900); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg);
transition: transform var(--dur-base) var(--ease-out)}
.article__video a:hover .article__video-play{transform: scale(1.07)}
.article__video iframe{position: absolute; inset: 0; width: 100%; height: 100%; border: 0}
.wrap{max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--gutter)}
.wrap--md{max-width: var(--container-md)}
.section{padding: var(--space-10) 0}
.section--sunken{background: var(--surface-sunken)}
.section--deep{background: var(--indigo-800)}
.icon{display: inline-flex; line-height: 0}
.center{text-align: center}
.mt-7{margin-top: var(--space-7)}
.actions{display: flex; gap: var(--space-3); flex-wrap: wrap}
.actions--center{justify-content: center}
.skip-link{position: absolute; left: -999px; top: 0; z-index: 100; background: var(--indigo-800); color: var(--paper); padding: .6em 1em; border-radius: var(--radius-md)}
.skip-link:focus{left: var(--space-4); top: var(--space-4)}
.header{position: sticky; top: 0; z-index: 40; background: rgba(251,248,243,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle)}
.header__bar{max-width: var(--container-xl); margin: 0 auto; padding: var(--space-3) var(--gutter); display: flex; align-items: center; gap: var(--space-6)}
.header__logo{display: inline-flex; line-height: 0}
.header__logo img{width: 186px; height: auto}
.header__nav{display: flex; gap: var(--space-2); margin-left: auto; align-items: center}
.nav-link{background: 0; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); color: var(--text-body); padding: .55em .85em; border-radius: var(--radius-pill); text-decoration: none; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out)}
.nav-link:hover{background: var(--indigo-50); color: var(--brand)}
.nav-link[aria-current="true"]{color: var(--brand); background: var(--indigo-100)}
.header__cta{display: flex; align-items: center; gap: var(--space-3)}
.nav-toggle{display: none; background: 0; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; color: var(--brand)}
@media (max-width: 860px){.header__nav{position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; gap: var(--space-1);
background: var(--paper); padding: var(--space-4) var(--gutter) var(--space-6); border-bottom: 1px solid var(--border-subtle);
box-shadow: var(--shadow-lg); transform: translateY(-130%); transition: transform var(--dur-base) var(--ease-out)}
.header__nav.open{transform: translateY(0)}
.nav-link{font-size: var(--text-md); padding: .7em .85em}
.nav-toggle{display: inline-flex; margin-left: auto}
.header__cta .btn{display: none}
.header__nav .btn{display: flex; margin-top: var(--space-3)}
}
@media (min-width: 861px){.header__nav .btn{display: none} }
.vragen{position: relative; z-index: 1; isolation: isolate; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
max-width: var(--container-xl); margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-9)}
.vragen::before{content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
background: rgba(21,15,46,.5); border-top: 1px solid var(--border-on-brand)}
.vraag{position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 10; max-height: 240px; overflow: hidden;
border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.18);
color: var(--paper); text-decoration: none; isolation: isolate}
.vraag img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow, .6s) var(--ease-out)}
.vraag::after{content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to top, rgba(21,15,46,.88) 0%, rgba(21,15,46,.35) 45%, rgba(21,15,46,0) 75%)}
.vraag:hover img, .vraag:focus-visible img{transform: scale(1.04)}
.vraag:focus-visible{outline: 3px solid var(--gold-400); outline-offset: -3px}
.vraag__body{position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-2);
padding: var(--space-6) var(--space-6); width: 100%}
.vraag__title{font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display);
font-size: clamp(1.1rem, 1.45vw, 1.35rem); line-height: 1.05; text-wrap: balance}
.vraag__title::after{content: ""; display: block; width: 44px; height: 3px; background: var(--gold-400); border-radius: 2px; margin-top: var(--space-3)}
.vraag__site{font-weight: 700; font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-300)}
.vraag--bijbel{background: var(--gold-500); color: var(--indigo-900); border-color: transparent}
.vraag--bijbel::after{display: none}
.vraag--bijbel:hover, .vraag--bijbel:focus-visible{background: var(--gold-400)}
.vraag--bijbel .vraag__body{height: 100%}
.vraag__icon{display: block; line-height: 0; margin-bottom: auto}
.vraag--bijbel .vraag__title::after{background: var(--indigo-900)}
.vraag--bijbel .vraag__site{color: var(--indigo-800)}
@media (max-width: 900px){.vragen{grid-template-columns: 1fr 1fr; gap: var(--space-4); padding-bottom: var(--space-8)}
.vraag{aspect-ratio: 4 / 3; max-height: 220px}
.vraag__body{padding: var(--space-5)}
.vraag__title{font-size: var(--text-lg)}
}
@media (max-width: 560px){.vragen{grid-template-columns: 1fr}
.vraag{aspect-ratio: 16 / 9}
}
.hero{position: relative; overflow: hidden; background: var(--indigo-800); color: var(--paper)}
.hero::after{content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(90% 70% at 85% -10%, rgba(239,168,56,.30), transparent 55%),
radial-gradient(70% 60% at -5% 110%, rgba(78,151,190,.30), transparent 60%)}
.hero__inner{position: relative; z-index: 1; max-width: var(--container-xl); margin: 0 auto;
padding: var(--space-8) var(--gutter) var(--space-7); display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: center}
.hero__eyebrow{display: inline-flex; align-items: center; gap: .6em; font-weight: 700; font-size: var(--text-2xs);
letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-300); margin-bottom: var(--space-5)}
.hero__eyebrow::before{content: ""; width: 26px; height: 2px; background: var(--gold-400); border-radius: 2px}
.hero h1{font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display);
line-height: .98; font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin: 0 0 var(--space-4); color: var(--paper)}
.hero h1 .script{display: block; font-family: var(--font-script); text-transform: none; color: var(--gold-400);
font-size: .62em; letter-spacing: 0; line-height: 1; margin: .06em 0}
.hero__lead{font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--indigo-100); max-width: 46ch; margin: 0 0 var(--space-6)}
.hero__actions2{margin-top: var(--space-3)}
.hero__media{position: relative}
.hero__media .photo{aspect-ratio: 4 / 3; border-radius: var(--radius-2xl); align-items: flex-start}
.slider{position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-2xl); overflow: hidden; background: var(--indigo-700); touch-action: pan-y}
.slider__track{position: absolute; inset: 0; display: flex; height: 100%; transition: transform .55s var(--ease-out); will-change: transform}
.slider__slide{flex: 0 0 100%; height: 100%; border-radius: 0; aspect-ratio: auto}
.slider__slide img{pointer-events: none; -webkit-user-drag: none; user-select: none}
.slider__knop{position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0;
background: rgba(21,15,46,.55); color: var(--paper); display: flex; align-items: center; justify-content: center; cursor: pointer;
backdrop-filter: blur(4px); transition: background var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); opacity: 0}
.slider:hover .slider__knop, .slider:focus-within .slider__knop, .slider.is-touch .slider__knop{opacity: 1}
.slider__knop:hover{background: var(--gold-500); color: var(--indigo-900)}
.slider__knop:focus-visible{outline: 2px solid var(--gold-400); outline-offset: 2px; opacity: 1}
.slider__knop--vorige{left: var(--space-4)}
.slider__knop--volgende{right: var(--space-4)}
.slider__dots{position: absolute; top: var(--space-4); right: var(--space-5); z-index: 3; display: flex; gap: 6px}
.slider__dot{width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: background var(--dur-base), transform var(--dur-base)}
.slider__dot.is-actief{background: var(--gold-400); transform: scale(1.35)}
.slider__dot:focus-visible{outline: 2px solid var(--gold-400); outline-offset: 2px}
@media (prefers-reduced-motion: reduce){.slider__track{transition: none} }
@media (hover: none){.slider__knop{opacity: 1} }
.hero__verse{margin-top: var(--space-4);
background: rgba(21,15,46,.55); backdrop-filter: blur(8px); border: 1px solid var(--border-on-brand);
border-radius: var(--radius-md); padding: var(--space-4) var(--space-5)}
.stats{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
border-top: 1px solid var(--border-on-brand); margin-top: var(--space-9); padding-top: var(--space-6); position: relative; z-index: 1}
.stat b{display: block; font-family: var(--font-display); color: var(--gold-400); font-size: var(--text-2xl); line-height: 1}
.stat span{font-size: var(--text-sm); color: var(--indigo-100)}
.tk, .stat .plus{font-family: var(--font-body); font-weight: 800; font-size: .8em}
.stat .plus{font-size: .72em; vertical-align: .12em; margin-left: .04em}
.split{display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: center}
.split .photo{aspect-ratio: 5 / 4}
.tag-row{margin-top: var(--space-6); display: flex; gap: var(--space-3); flex-wrap: wrap}
.activities{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-8)}
.highlight{background: var(--indigo-700); color: var(--paper); border-radius: var(--radius-2xl); overflow: hidden;
display: grid; grid-template-columns: 1fr 1fr; align-items: stretch}
.highlight__media{position: relative; min-height: 340px}
.highlight__play{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center}
.highlight__play button{width: 74px; height: 74px; border-radius: 50%; border: 0; cursor: pointer;
background: var(--gold-500); color: var(--indigo-900); display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-lg); transition: transform var(--dur-base) var(--ease-out)}
.highlight__play button:hover{transform: scale(1.07)}
.highlight__body{padding: var(--space-9) var(--space-8)}
.newsletter{background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl);
padding: var(--space-9) var(--space-8); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center}
.newsletter form{display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap}
.newsletter form .field{flex: 1; min-width: 220px; margin-bottom: 0}
.pagehead{background: var(--indigo-800); color: var(--paper); position: relative; overflow: hidden}
.pagehead::after{content: ""; position: absolute; inset: 0; background: radial-gradient(80% 80% at 90% 0%, rgba(239,168,56,.22), transparent 55%)}
.pagehead__inner{position: relative; z-index: 1; max-width: var(--container-xl); margin: 0 auto; padding: var(--space-10) var(--gutter)}
.pagehead h1{font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display);
font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; margin: var(--space-4) 0; color: var(--paper)}
.pagehead p{max-width: 54ch; color: var(--indigo-100); font-size: var(--text-md); line-height: var(--leading-relaxed); margin: 0}
.crumb{font-weight: 700; font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-300)}
.prose{max-width: var(--container-md); margin: 0 auto}
.prose h3{font-family: var(--font-display); text-transform: uppercase; color: var(--brand);
letter-spacing: var(--tracking-display); font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-3)}
.prose p{color: var(--text-body); font-size: var(--text-md); line-height: var(--leading-relaxed); margin: 0 0 var(--space-4)}
.team{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-7)}
.person{display: flex; flex-direction: column; gap: var(--space-3)}
.person .photo{aspect-ratio: 1 / 1; border-radius: var(--radius-lg)}
.person__name{font-family: var(--font-body); font-weight: 700; color: var(--text-strong); font-size: var(--text-md); margin: 0}
.person__role{font-size: var(--text-sm); color: var(--text-muted)}
.person__text{display: flex; flex-direction: column}
.person__name, .person__role{display: block}
.person--story{appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; align-items: stretch}
.person--story .photo{transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
.person--story:hover .photo{transform: translateY(-4px); box-shadow: var(--shadow-lg)}
.person--story:focus-visible{outline: none}
.person--story:focus-visible .photo{box-shadow: var(--shadow-focus)}
.person__more{margin-top: var(--space-2); font-weight: 700; font-size: var(--text-sm); color: var(--text-link); display: inline-flex; align-items: center; gap: .4em}
.person--story:hover .person__more svg{transform: translateX(3px)}
.person__more svg{transition: transform var(--dur-fast) var(--ease-out)}
.story{width: min(38rem, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 2 * var(--space-6)); padding: var(--space-7);
border: 0; border-radius: var(--radius-xl); background: var(--surface-card); color: var(--text-body); box-shadow: var(--shadow-lg); overflow: hidden}
.story[open]{display: flex; flex-direction: column}
.story::backdrop{background: rgba(21, 15, 46, .6)}
body:has(.story[open]){overflow: hidden}
.story__close{position: absolute; top: var(--space-4); right: var(--space-4); width: 40px; height: 40px; border: 0; border-radius: var(--radius-pill);
background: var(--indigo-50); color: var(--brand); display: flex; align-items: center; justify-content: center; cursor: pointer}
.story__close:hover{background: var(--indigo-100)}
.story__close:focus-visible{outline: none; box-shadow: var(--shadow-focus)}
.story__head{display: flex; align-items: center; gap: var(--space-4); padding-right: var(--space-8); margin-bottom: var(--space-5)}
.story__photo{width: 88px; aspect-ratio: 1 / 1; flex: none; border-radius: var(--radius-md)}
.story__name{font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--brand);
font-size: var(--text-xl); line-height: 1.1; margin: 0 0 var(--space-1)}
.story__body{overflow-y: auto; min-height: 0}
.story__body p{font-size: var(--text-md); line-height: var(--leading-relaxed); margin: 0 0 var(--space-4)}
.story__body p:last-child{margin-bottom: 0}
@media (max-width: 560px){.story{padding: var(--space-6) var(--space-5)} .story__photo{width: 64px} .story__name{font-size: var(--text-lg)} }
.partners{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-6)}
.partner{display: flex; align-items: center; gap: var(--space-3)}
.partner__go{margin-left: auto; color: var(--text-link); display: flex; flex: none}
.partner__ic{width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--indigo-100); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: none}
.partner__name{font-weight: 700; color: var(--text-strong)}
.partner__meta{font-size: var(--text-sm); color: var(--text-muted)}
.docs{display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: var(--space-5); margin-top: var(--space-6)}
.doc{display: flex; flex-direction: row; align-items: center; gap: var(--space-4); text-decoration: none; color: inherit}
.doc__ic{width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--gold-100); color: var(--gold-700);
display: inline-flex; align-items: center; justify-content: center}
.doc__text{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px}
.doc__name{font-weight: 700; color: var(--text-strong)}
.doc__meta{font-size: var(--text-sm); color: var(--text-muted)}
.doc__go{display: inline-flex; align-items: center; gap: .35em; font-weight: 700; font-size: var(--text-sm); color: var(--brand); white-space: nowrap}
.row{display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: center; margin: var(--space-9) 0}
.row--flip .row__media{order: 2}
.row .photo{aspect-ratio: 4 / 3}
.row__pts{list-style: none; padding: 0; margin: var(--space-6) 0 0; display: flex; flex-direction: column; gap: var(--space-3)}
.row__pts li{display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-md); color: var(--text-body)}
.row__pts .icon{color: var(--gold-600); flex: none; margin-top: 2px}
.cities{display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5)}
.channels{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-7)}
.channel{display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start}
.channel__ic{width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--indigo-100); color: var(--brand)}
.channel__title{overflow-wrap: anywhere; font-family: var(--font-display); text-transform: uppercase; color: var(--brand); letter-spacing: var(--tracking-display); font-size: var(--text-md)}
.channel__desc{margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug)}
.channel-link{text-decoration: none; color: inherit}
.channel-link:focus-visible{outline: none; box-shadow: var(--shadow-focus)}
.channel__go{margin-top: var(--space-3); font-weight: 700; font-size: var(--text-sm); color: var(--text-link); display: inline-flex; align-items: center; gap: .4em}
.support{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-7)}
#steunen{scroll-margin-top: 80px}
.contact{display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start}
.contact__info{display: flex; flex-direction: column; gap: var(--space-4)}
.contact__info a{display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--text-body); font-size: var(--text-md)}
.contact__info a span{width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--gold-100); color: var(--gold-900); display: flex; align-items: center; justify-content: center; flex: none}
.news-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-8)}
.news-card{display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
.news-card:hover{transform: translateY(-5px); box-shadow: var(--shadow-lg)}
.news-card .photo, .news-card__media{aspect-ratio: 16 / 9}
.news-card__media{overflow: hidden; background: var(--indigo-100)}
.news-card__media img{width: 100%; height: 100%; object-fit: cover; display: block}
.news-card__body{flex: 1; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2)}
.news-card__date{font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-strong); font-weight: 700}
.news-card__title{font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--brand); font-size: var(--text-lg); margin: 0; line-height: 1.05}
.news-card__excerpt{color: var(--text-muted); font-size: var(--text-sm); margin: 0}
.article{max-width: var(--container-md); margin: 0 auto}
.article__body{font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); margin-top: var(--space-6)}
.article__body h2, .article__body h3{font-family: var(--font-display); text-transform: uppercase; color: var(--brand); letter-spacing: var(--tracking-display)}
.article__body p img{border-radius: var(--radius-lg); margin: var(--space-5) 0}
.article__body blockquote{border-left: 3px solid var(--gold-500); margin: var(--space-5) 0; padding-left: var(--space-5); font-family: var(--font-scripture); font-style: italic; color: var(--text-strong)}
.article__body em{font-family: var(--font-scripture)}
.footer{background: var(--indigo-900); color: var(--indigo-100)}
.footer__top{max-width: var(--container-xl); margin: 0 auto; padding: var(--space-10) var(--gutter) var(--space-8); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8)}
.footer h4{font-family: var(--font-body); font-weight: 700; font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-400); margin: 0 0 var(--space-4)}
.footer__links{display: flex; flex-direction: column; gap: var(--space-3)}
.footer__links a{text-decoration: none; font-family: var(--font-body); font-size: var(--text-sm); color: var(--indigo-100); transition: color var(--dur-base) var(--ease-out)}
.footer__links a:hover{color: var(--gold-300)}
.footer__contact{display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-sm)}
.footer__contact a{display: flex; align-items: center; gap: .6em; color: var(--indigo-100); text-decoration: none}
.footer__contact a:hover{color: var(--gold-300)}
.footer__logo img{width: 210px; height: auto}
.footer__verse{font-family: var(--font-scripture); font-style: italic; font-size: var(--text-md); color: var(--paper); line-height: var(--leading-snug); max-width: 34ch; margin: var(--space-4) 0 0}
.footer__socials{display: flex; gap: var(--space-3); margin-top: var(--space-4)}
.footer__socials a{width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: var(--paper); transition: background var(--dur-base) var(--ease-out)}
.footer__socials a:hover{background: var(--gold-500); color: var(--indigo-900)}
.footer__bottom{border-top: 1px solid rgba(255,255,255,.10)}
.footer__bottom div{max-width: var(--container-xl); margin: 0 auto; padding: var(--space-5) var(--gutter); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); color: var(--indigo-200)}
.flash{padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); margin-bottom: var(--space-5); font-size: var(--text-sm)}
.flash--ok{background: var(--success-100); color: var(--success-600)}
.flash--err{background: var(--danger-100); color: var(--danger-600)}
@media (max-width: 900px){.hero__inner, .highlight, .newsletter, .split{grid-template-columns: 1fr}
.activities{grid-template-columns: 1fr 1fr}
.news-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 860px){.row{grid-template-columns: 1fr; gap: var(--space-6)}
.row--flip .row__media{order: 0}
.team{grid-template-columns: 1fr 1fr}
.partners{grid-template-columns: 1fr}
.channels{grid-template-columns: 1fr 1fr}
.support, .contact{grid-template-columns: 1fr}
}
@media (max-width: 560px){.activities, .news-grid, .channels{grid-template-columns: 1fr}
.stats{grid-template-columns: 1fr 1fr}
.footer__top{grid-template-columns: 1fr; gap: var(--space-7)}
}
@media (max-width: 640px){.strook{display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
padding-left: var(--gutter); padding-right: var(--gutter); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch}
.strook::-webkit-scrollbar{display: none}
.strook > *{flex: 0 0 min(78vw, 340px); scroll-snap-align: start}
.activities.strook, .news-grid.strook{padding-bottom: var(--space-3)}
.vragen.strook{max-width: none; margin-left: 0; margin-right: 0; padding: var(--space-6) var(--gutter) var(--space-7);
background: rgba(21,15,46,.5); border-top: 1px solid var(--border-on-brand)}
.vragen.strook::before{display: none}
.vragen.strook .vraag{aspect-ratio: 4 / 3; max-height: 280px}
}
.bijbel{display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: start}
.bijbel__form .field--half{display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-3); margin-bottom: 0}
.bijbel__form .field--half .field{margin-bottom: var(--space-4)}
@media (max-width: 860px){.bijbel{grid-template-columns: 1fr} }
.agenda-lijst{display: grid; gap: var(--space-3)}
.agenda-lijst--home{margin: var(--space-8) 0 var(--space-6)}
.agenda-item{display: flex; gap: var(--space-5); align-items: center; padding: var(--space-4) var(--space-5); background: var(--surface-card);
border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
.agenda-item:hover{transform: translateY(-3px); box-shadow: var(--shadow-md)}
.agenda-item__datum{flex: none; width: 64px; height: 64px; border-radius: var(--radius-md); background: var(--gold-500); color: var(--indigo-900);
display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1}
.agenda-item__datum b{font-family: var(--font-display); font-size: var(--text-2xl)}
.agenda-item__datum span{font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-top: .25em}
.agenda-item__body{display: flex; flex-direction: column; gap: .25em; min-width: 0}
.agenda-item__titel{font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--brand); font-size: var(--text-lg); line-height: 1.05}
.agenda-item__meta{font-size: var(--text-sm); color: var(--text-muted)}
.agenda-kaart{display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); padding: var(--space-5) var(--space-6);
background: var(--gold-50); border: 1px solid var(--gold-200); border-radius: var(--radius-lg); margin-bottom: var(--space-6)}
.agenda-kaart__label{display: block; font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--gold-900); margin-bottom: .3em}
.agenda-kaart strong{color: var(--text-strong); font-size: var(--text-md)}
:root{color-scheme: light}
*{box-sizing: border-box}
html{scroll-behavior: smooth}
body{margin: 0;
background: var(--bg-base);
color: var(--text-body);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility}
img{max-width: 100%}
a{color: var(--text-link)}
:focus-visible{outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm)}
.visually-hidden{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0}