/* =====================================================================
   ZZ 100 jaar — jubileumthema Zeilvereniging Zuidlaardermeer
   Kleuren en lettertype bouwen voort op het thema "ZV Zuidlaardermeer
   Modern" (meerblauw #46748C, wimpelgroen #40a132, Bitter).
   ===================================================================== */

@font-face { font-family: 'Bitter'; src: url('../fonts/bitter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bitter'; src: url('../fonts/bitter-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/jakarta.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
    --nacht:        #0d2230;
    --nacht-2:      #143246;
    --meer-donker:  #2d4e63;
    --meer:         #46748c;
    --meer-mid:     #5f8ea7;
    --meer-licht:   #9cc2d6;
    --meer-bleek:   #e3eff5;
    --lucht:        #f3f8fa;
    --wit:          #ffffff;
    --wimpel:       #40a132;
    --wimpel-donker:#256e1f;
    --wimpel-knop:  #2e8726; /* wit hierop haalt WCAG AA */
    --wimpel-licht: #9bdc8b;
    --wimpel-bleek: #e6f5e1;
    --zand:         #f4efe5;
    --zand-donker:  #e2d7c2;
    --papier:       #fbf8f1;
    --amber:        #b8730f;
    --inkt:         #11212c;
    --inkt-zacht:   #4b6271;
    --lijn:         rgba(17, 33, 44, .12);
    --lijn-licht:   rgba(255, 255, 255, .18);

    --font-display: 'Bitter', Georgia, 'Times New Roman', serif;
    --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --wrap:   1240px;
    --gutter: clamp(16px, 4vw, 48px);
    --sectie: clamp(72px, 10vw, 140px);
    --r-s: 10px;
    --r-m: 18px;
    --r-l: 28px;
    --schaduw-s: 0 2px 10px rgba(13, 34, 48, .06);
    --schaduw-m: 0 18px 40px -18px rgba(13, 34, 48, .28);
    --schaduw-l: 0 40px 80px -30px rgba(13, 34, 48, .45);
    --ease:     cubic-bezier(.2, .7, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --kop-h: 76px;
}

@view-transition { navigation: auto; }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kop-h) + 16px); }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--inkt);
    background: var(--lucht);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--meer-donker); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--wimpel-donker); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--wimpel); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.015em; font-weight: 700; }
em { font-style: italic; }
p { margin: 0 0 1em; }
::selection { background: var(--wimpel-licht); color: var(--nacht); }

.zz-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.zz-wrap--lees { max-width: calc(760px + 2 * var(--gutter)); }
.zz-centreer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.zz-visueel-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zz-skip { position: absolute; left: 16px; top: -60px; z-index: 2000; background: var(--wit); color: var(--nacht); padding: 10px 16px; border-radius: var(--r-s); font-weight: 700; transition: top .2s; }
.zz-skip:focus { top: 16px; }
.zz-main { display: block; overflow-x: clip; }

.zz-sectie { padding: var(--sectie) 0; position: relative; }
.zz-sectie--zand { background: var(--zand); }
.zz-sectie--nacht { background: var(--nacht); color: #fff; padding-top: calc(var(--sectie) + 90px); padding-bottom: calc(var(--sectie) + 120px); }

/* ---------- Typografische hulpjes ---------- */
.zz-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--wimpel-donker); margin: 0 0 18px;
}
.zz-kicker::before { content: ''; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.zz-h2 { font-size: clamp(32px, 4.2vw, 52px); }
.zz-h2 em, .zz-sectiekop__titel em { color: var(--meer); font-weight: 600; }
.zz-sectiekop { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.zz-sectiekop__titel { font-size: clamp(38px, 5.4vw, 72px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.zz-sectiekop__intro { font-size: clamp(17px, 1.5vw, 20px); color: var(--inkt-zacht); max-width: 640px; }
.zz-sectiekop--licht .zz-sectiekop__titel { color: #fff; }
.zz-sectiekop--licht .zz-sectiekop__titel em { color: var(--wimpel-licht); }
.zz-sectiekop--licht .zz-sectiekop__intro { color: rgba(255,255,255,.75); }
.zz-sectiekop--licht .zz-kicker { color: var(--wimpel-licht); }
.zz-bronregel { font-size: 13px; color: var(--inkt-zacht); opacity: .85; }
.zz-noot { font-size: 14.5px; color: var(--inkt-zacht); border-left: 3px solid var(--wimpel); padding: 4px 0 4px 16px; margin-top: 32px; max-width: 760px; }

.zz-tekstlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--meer-donker); }
.zz-tekstlink .zz-icon { width: 20px; transition: transform .3s var(--ease); }
.zz-tekstlink:hover .zz-icon { transform: translateX(5px); }

.zz-icon { width: 22px; height: 22px; flex: none; }

/* ---------- Knoppen ---------- */
.zz-knop {
    --knop-bg: var(--meer); --knop-fg: #fff;
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
    background: var(--knop-bg); color: var(--knop-fg);
    font-family: var(--font-body); font-weight: 700; font-size: 15.5px; letter-spacing: .01em; text-decoration: none;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
}
.zz-knop::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
    transform: translateX(-120%); transition: transform .8s var(--ease);
}
.zz-knop:hover { color: var(--knop-fg); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(13,34,48,.45); }
.zz-knop:hover::before { transform: translateX(120%); }
.zz-knop .zz-icon { width: 20px; transition: transform .35s var(--ease); }
.zz-knop:hover .zz-icon:last-child { transform: translateX(4px); }
.zz-knop--wimpel { --knop-bg: var(--wimpel-knop); }
.zz-knop--wimpel:hover { --knop-bg: var(--wimpel-donker); }
.zz-knop--meer { --knop-bg: var(--nacht); }
.zz-knop--meer:hover { --knop-bg: var(--meer-donker); }
.zz-knop--licht { --knop-bg: #fff; --knop-fg: var(--nacht); }
.zz-knop--glas { --knop-bg: rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.zz-knop--glas:hover { --knop-bg: rgba(255,255,255,.26); }
.zz-knop--omlijnd-licht { --knop-bg: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.zz-knop--omlijnd-licht:hover { --knop-bg: rgba(255,255,255,.1); }
.zz-knop--klein { min-height: 40px; padding: 0 18px; font-size: 14px; }
.zz-knop--breed { width: 100%; }

.zz-rondknop {
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    background: transparent; border: 1.5px solid rgba(255,255,255,.35); color: #fff;
    transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.zz-rondknop:hover { background: var(--wimpel-knop); border-color: var(--wimpel); transform: scale(1.06); }
.zz-rondknop:disabled { opacity: .35; pointer-events: none; }

/* ---------- Labels ---------- */
.zz-label { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--meer-bleek); color: var(--meer-donker); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.zz-concept {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px;
    background: repeating-linear-gradient(-45deg, #fff6e2, #fff6e2 6px, #fdefd0 6px, #fdefd0 12px);
    color: #7a4b05; border: 1px solid #efd39a; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; vertical-align: middle;
}
.zz-concept__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: zz-puls 2s infinite; }
@keyframes zz-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(184,115,15,.5); } 50% { box-shadow: 0 0 0 5px rgba(184,115,15,0); } }

.zz-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--wimpel-bleek); color: var(--wimpel-donker); }
.zz-status__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.zz-status--verifieren { background: #fdf1dc; color: #8a5508; }
.zz-status--open { background: #eef1f3; color: #55636c; }
.zz-status--open .zz-status__dot { background: transparent; border: 1.5px dashed currentColor; }
.zz-status--toekomst { background: var(--meer-bleek); color: var(--meer-donker); }

/* ---------- Wimpel ---------- */
.zz-wimpel { width: 100%; height: auto; overflow: visible; }
.zz-wimpel__doek { transform-origin: 0 50%; }

/* ---------- Beeldmerk ---------- */
.zz-mark { display: inline-flex; align-items: center; gap: 10px; color: inherit; line-height: 1; }
.zz-mark__mast { position: relative; width: 34px; height: 40px; display: block; }
.zz-mark__mast::before { content: ''; position: absolute; left: 1px; top: 0; bottom: -2px; width: 2px; border-radius: 2px; background: currentColor; opacity: .8; }
.zz-mark__wimpel { position: absolute; left: 3px; top: 1px; width: 30px; animation: zz-wappert 3.2s ease-in-out infinite; transform-origin: 0 50%; }
.zz-mark__num { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -.04em; }
.zz-mark__tekst { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.zz-mark__tekst span:last-child { opacity: .7; font-weight: 600; }
.zz-mark--groot .zz-mark__mast { width: 52px; height: 62px; }
.zz-mark--groot .zz-mark__wimpel { width: 46px; }
.zz-mark--groot .zz-mark__num { font-size: 58px; }
.zz-mark--groot .zz-mark__tekst { font-size: 13px; }
@keyframes zz-wappert {
    0%, 100% { transform: skewY(0deg) scaleX(1); }
    25% { transform: skewY(-4deg) scaleX(.94); }
    50% { transform: skewY(2deg) scaleX(1.02); }
    75% { transform: skewY(-2deg) scaleX(.97); }
}

/* ---------- Kop / navigatie ---------- */
.zz-voortgang { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200; pointer-events: none; }
.zz-voortgang span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--voortgang, 0)); background: linear-gradient(90deg, var(--wimpel), var(--meer-licht)); }

.zz-kop {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--kop-h);
    color: #fff; transition: background .4s var(--ease), color .4s, box-shadow .4s, transform .5s var(--ease), height .4s var(--ease);
}
.admin-bar .zz-kop { top: 32px; }
@media (max-width: 782px) { .admin-bar .zz-kop { top: 46px; } }
.zz-kop__binnen { height: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 28px; }
.zz-kop__merk { color: inherit; text-decoration: none; flex: none; }
.zz-kop__merk:hover { color: inherit; }
.zz-kop.is-gescrold { background: rgba(255,255,255,.86); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); color: var(--nacht); box-shadow: 0 1px 0 var(--lijn), 0 10px 30px -20px rgba(13,34,48,.3); --kop-h: 66px; }
.zz-kop.is-verborgen { transform: translateY(-110%); }
.zz-kop.is-gescrold .zz-mark__wimpel { filter: none; }

.zz-nav { margin-left: auto; }
.zz-nav__lijst { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.zz-nav__link { position: relative; display: block; padding: 10px 14px; color: inherit; text-decoration: none; font-weight: 600; font-size: 15px; border-radius: 999px; transition: background .25s; }
.zz-nav__link::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--wimpel-knop); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.zz-nav__link:hover { color: inherit; }
.zz-nav__link:hover::after, .zz-nav__link.is-actief::after { transform: scaleX(1); transform-origin: left; }
.zz-kop__acties { display: flex; align-items: center; gap: 14px; }
.zz-kop__hoofdsite { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-size: 13px; font-weight: 600; opacity: .85; padding: 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; }
.zz-kop__hoofdsite:hover { color: inherit; opacity: 1; }
.zz-kop__hoofdsite-wimpel { width: 18px; }
.zz-kop__hoofdsite .zz-icon { width: 15px; height: 15px; }
.zz-menuknop { display: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); position: relative; }
.zz-kop.is-gescrold .zz-menuknop { background: var(--meer-bleek); }
.zz-menuknop span { position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .4s var(--ease), opacity .3s, top .4s var(--ease); }
.zz-menuknop span:nth-child(1) { top: 17px; }
.zz-menuknop span:nth-child(2) { top: 23px; right: 20px; }
.zz-menuknop span:nth-child(3) { top: 29px; }
.menu-open .zz-menuknop span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.menu-open .zz-menuknop span:nth-child(2) { opacity: 0; }
.menu-open .zz-menuknop span:nth-child(3) { top: 23px; transform: rotate(-45deg); }
.menu-open .zz-kop { color: #fff; background: transparent; box-shadow: none; backdrop-filter: none; transform: none; }
.menu-open .zz-menuknop { background: rgba(255,255,255,.14); }

.zz-menu { position: fixed; inset: 0; z-index: 990; background: var(--nacht); color: #fff; overflow-y: auto; display: flex; align-items: center; padding: calc(var(--kop-h) + 30px) var(--gutter) 40px; clip-path: circle(0 at calc(100% - 44px) 38px); transition: clip-path .8s var(--ease-out); }
.zz-menu[hidden] { display: flex; visibility: hidden; }
.menu-open .zz-menu { clip-path: circle(150% at calc(100% - 44px) 38px); visibility: visible; }
.zz-menu__achtergrond { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.zz-menu__100 { position: absolute; right: -4vw; bottom: -6vw; font-family: var(--font-display); font-weight: 900; font-size: 52vw; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.09); }
.zz-menu__nav { position: relative; width: 100%; }
.zz-menu__nav ol { list-style: none; margin: 0; padding: 0; }
.zz-menu__nav li { opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .6s var(--ease-out); transition-delay: calc(.15s + var(--i) * .05s); }
.menu-open .zz-menu__nav li { opacity: 1; transform: none; }
.zz-menu__nav ol a { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 8vw, 46px); line-height: 1.1; border-bottom: 1px solid rgba(255,255,255,.1); }
.zz-menu__nav ol a span { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--wimpel-licht); width: 26px; }
.zz-menu__nav ol a:hover { color: var(--wimpel-licht); }
.zz-menu__voet { margin-top: 36px; display: grid; gap: 14px; font-size: 15px; color: rgba(255,255,255,.75); }
.zz-menu__voet strong { font-family: var(--font-display); font-size: 28px; color: #fff; margin-right: 6px; }
.zz-menu__voet a { color: #fff; display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 1180px) {
    .zz-kop__hoofdsite span { display: none; }
}
@media (max-width: 1040px) {
    .zz-nav, .zz-kop__hoofdsite { display: none; }
    .zz-menuknop { display: block; }
    .zz-kop__acties { margin-left: auto; }
}
@media (max-width: 480px) {
    .zz-kop__deel { display: none; }
    .zz-mark__tekst { font-size: 10px; }
}

/* ---------- Golven ---------- */
.zz-golven { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(100px, 13vw, 210px); pointer-events: none; z-index: 3; --golf: var(--lucht); }
.zz-golven svg { display: block; width: 100%; height: 100%; overflow: visible; }
.zz-golf { fill: var(--golf); }
.zz-golf-schuim { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.zz-golven--nacht .zz-golf-schuim, .zz-golven--voet .zz-golf-schuim { stroke: rgba(155, 220, 139, .35); }
.zz-golven--licht { --golf: var(--lucht); }
.zz-golven--nacht { --golf: var(--nacht); }
.zz-golven--voet { --golf: var(--nacht); }
.zz-golven--boven { top: -1px; bottom: auto; transform: scaleY(-1); --golf: var(--lucht); }
.zz-sectie--zand + .zz-sectie--nacht .zz-golven--boven,
.zz-sectie--zand + .zz-tijdstrook .zz-golven--boven { --golf: var(--zand); }

/* ---------- Instapanimaties ---------- */
.zz-anim { opacity: 0; transform: translateY(26px); animation: zz-op 1s var(--ease-out) forwards; animation-delay: calc(.15s + var(--d, 0) * .11s); }
@keyframes zz-op { to { opacity: 1; transform: none; } }
.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--vertraging, 0s); }
.js [data-reveal].is-zichtbaar { opacity: 1; transform: none; }
.js [data-split] .zz-woord { display: inline-block; opacity: .12; transition: opacity .5s; }
.js [data-split] .zz-woord.is-aan { opacity: 1; }

/* =====================================================================
   HOME — Opening
   ===================================================================== */
.zz-hero { position: relative; min-height: max(700px, 100svh); display: flex; flex-direction: column; justify-content: flex-start; color: #fff; overflow: hidden; background: var(--nacht); isolation: isolate; }
.zz-hero__beeld { position: absolute; inset: -6% 0 0; z-index: -3; }
.zz-hero__beeld img { width: 100%; height: 106%; object-fit: cover; object-position: 62% 50%; animation: zz-kenburns 26s ease-in-out infinite alternate; transform-origin: 65% 50%; }
@keyframes zz-kenburns { from { transform: scale(1.04); } to { transform: scale(1.14) translateX(-1.5%); } }
.zz-hero__waas { position: absolute; inset: 0; z-index: -2; background:
    linear-gradient(90deg, rgba(13,34,48,.86) 0%, rgba(13,34,48,.55) 42%, rgba(13,34,48,.05) 75%),
    linear-gradient(0deg, rgba(13,34,48,.75) 0%, transparent 35%),
    linear-gradient(180deg, rgba(13,34,48,.55) 0%, transparent 22%); }
.zz-hero__kaart { position: absolute; z-index: -1; width: min(1100px, 120vw); left: -22vw; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.09); pointer-events: none; }
.zz-hero__kaart svg { width: 100%; animation: zz-draai 120s linear infinite; }
.zz-hero__kaart path { stroke-width: 1; stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: zz-teken 4s var(--ease-out) forwards; animation-delay: calc(.3s + var(--i) * .15s); }
@keyframes zz-teken { to { stroke-dashoffset: 0; } }
@keyframes zz-draai { to { transform: rotate(360deg); } }

.zz-hero__inhoud { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--kop-h) + 30px); padding-bottom: 30px; }
.zz-hero__boven { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: clamp(12px, 1.2vw, 14px); margin-bottom: 10px; }
.zz-hero__minwimpel { width: 30px; }
.zz-hero__titel { margin: clamp(14px, 2vw, 28px) 0 0; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 clamp(10px, 2vw, 26px); line-height: .8; }
.zz-honderd { position: relative; display: block; width: clamp(250px, 36vw, 540px); margin-left: -0.6%; }
.zz-honderd__svg { width: 100%; overflow: visible; }
.zz-honderd__svg text { font-family: var(--font-display); font-weight: 800; font-size: 262px; letter-spacing: -14px; }
.zz-honderd__omlijn { fill: transparent; stroke: #fff; stroke-width: 2; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: zz-teken 2.4s var(--ease-out) .3s forwards; }
.zz-honderd__vul { fill: #fff; opacity: 0; animation: zz-vul 1.2s ease 1.7s forwards; }
@keyframes zz-vul { to { opacity: 1; } }
.zz-hero__jaar { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(44px, 7vw, 104px); line-height: 1; padding-bottom: clamp(10px, 2vw, 30px); color: var(--wimpel-licht); }
.zz-hero__jaartallen { display: flex; align-items: center; gap: 18px; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: .04em; margin: clamp(14px, 1.6vw, 24px) 0 18px; }
.zz-hero__lijn { position: relative; width: clamp(80px, 14vw, 200px); height: 2px; background: rgba(255,255,255,.25); overflow: hidden; border-radius: 2px; }
.zz-hero__lijn span { position: absolute; inset: 0; background: var(--wimpel-licht); transform: scaleX(0); transform-origin: left; animation: zz-groei 1.6s var(--ease-out) 1.4s forwards; }
.zz-hero__lijn::after { content: ''; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff; left: 0; animation: zz-varen 6s ease-in-out 3s infinite; }
@keyframes zz-groei { to { transform: scaleX(1); } }
@keyframes zz-varen { 0% { left: 0; } 50% { left: calc(100% - 8px); } 100% { left: 0; } }
.zz-hero__intro { max-width: 540px; font-size: clamp(17px, 1.5vw, 20px); color: rgba(255,255,255,.88); }
.zz-hero__knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

.zz-hero__balk { position: relative; z-index: 4; padding-bottom: clamp(100px, 12vw, 190px); }
.zz-hero__balk-binnen { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.zz-hero__teller { display: flex; align-items: center; gap: 14px; margin: 0; padding: 10px 18px 10px 14px; border-radius: 999px; background: rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); font-size: 13px; }
.zz-hero__teller-cijfer { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--wimpel-knop); }
.zz-hero__teller-cijfer strong { font-family: var(--font-display); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.zz-hero__teller-label { font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.85); }
.zz-hero__coord { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); text-align: center; display: grid; gap: 2px; }
.zz-hero__scroll { display: grid; justify-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.zz-hero__scroll i { width: 24px; height: 38px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.6); position: relative; }
.zz-hero__scroll i::after { content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: zz-scroll 1.8s var(--ease) infinite; }
@keyframes zz-scroll { 0% { opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@media (max-width: 760px) {
    .zz-hero__beeld img { object-position: 72% 50%; }
    .zz-hero__waas { background: linear-gradient(0deg, rgba(13,34,48,.92) 0%, rgba(13,34,48,.5) 55%, rgba(13,34,48,.45) 100%); }
    .zz-hero__coord, .zz-hero__scroll { display: none; }
    .zz-hero__balk-binnen { justify-content: flex-start; }
    .zz-hero__teller { font-size: 12px; gap: 10px; }
}

/* ---------- Introductie ---------- */
.zz-intro { position: relative; padding: var(--sectie) 0 calc(var(--sectie) * .7); }
.zz-intro__raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.zz-intro__statement { font-size: clamp(30px, 3.7vw, 50px); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; margin-bottom: 32px; }
.zz-intro__statement em { font-style: italic; color: var(--meer); font-weight: 600; }
.zz-intro__lopend { columns: 2 260px; column-gap: 36px; color: var(--inkt-zacht); font-size: 16px; }
.zz-intro__lopend p:first-child::first-letter { font-family: var(--font-display); float: left; font-size: 66px; line-height: .9; padding: 4px 10px 0 0; color: var(--wimpel); font-weight: 800; }
.zz-intro__collage { position: relative; aspect-ratio: 4 / 5; }
.zz-intro__collage figure { position: absolute; margin: 0; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--schaduw-l); }
.zz-intro__collage img { width: 100%; height: 100%; object-fit: cover; }
.zz-collage__a { inset: 0 0 26% 12%; }
.zz-collage__b { width: 46%; aspect-ratio: 1; left: 0; bottom: 0; border: 6px solid var(--lucht); }
.zz-collage__c { width: 38%; right: -4%; bottom: 6%; transform: rotate(4deg); border-radius: 4px !important; }
.zz-papier { background: var(--papier); padding: 10px 10px 8px; box-shadow: var(--schaduw-m); border-radius: 4px; }
.zz-papier img { filter: sepia(.25) contrast(1.05); border-radius: 2px; }
.zz-papier figcaption { font-size: 11px; color: var(--inkt-zacht); padding-top: 6px; letter-spacing: .03em; }
.zz-papier--klein { max-width: 280px; transform: rotate(-2deg); margin-top: 28px; }
.zz-collage__stempel { position: absolute; right: 6%; top: -4%; width: 120px; height: 120px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--wimpel-knop); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; box-shadow: var(--schaduw-m); rotate: -10deg; }
.zz-collage__stempel span { display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
.zz-collage__stempel::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.55); animation: zz-draai 30s linear infinite; }

.zz-cijfers { display: grid; grid-template-columns: repeat(var(--kolommen, 4), 1fr); gap: 0; margin: clamp(60px, 8vw, 110px) 0 0; border-top: 1px solid var(--lijn); }
.zz-cijfer { padding: 28px 24px 0 0; border-right: 1px solid var(--lijn); }
.zz-cijfer + .zz-cijfer { padding-left: 24px; }
.zz-cijfer:last-child { border-right: 0; }
.zz-cijfer dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wimpel-donker); }
.zz-cijfer dd { margin: 8px 0 6px; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 5vw, 72px); line-height: 1; letter-spacing: -.03em; color: var(--nacht); font-variant-numeric: tabular-nums; }
.zz-cijfer p { font-size: 14px; color: var(--inkt-zacht); margin: 0; max-width: 230px; }
@media (max-width: 900px) {
    .zz-intro__raster { grid-template-columns: 1fr; }
    .zz-intro__collage { max-width: 520px; width: 100%; margin: 0 auto; }
    .zz-cijfers { grid-template-columns: repeat(2, 1fr); }
    .zz-cijfer:nth-child(2) { border-right: 0; }
    .zz-cijfer:nth-child(3) { padding-left: 0; }
    .zz-cijfer:nth-child(n+3) { border-top: 1px solid var(--lijn); margin-top: 24px; }
}
@media (max-width: 480px) {
    .zz-collage__stempel { width: 92px; height: 92px; font-size: 26px; }
    .zz-cijfer { padding-right: 12px; }
    .zz-cijfer + .zz-cijfer { padding-left: 12px; }
    .zz-cijfer:nth-child(3) { padding-left: 0; }
}

/* ---------- Marquee ---------- */
.zz-marquee { padding: clamp(24px, 3vw, 40px) 0; background: var(--nacht); color: #fff; overflow: hidden; transform: rotate(-1.6deg) scale(1.04); margin: 20px 0 clamp(40px, 6vw, 80px); box-shadow: var(--schaduw-l); }
.zz-marquee__rij { overflow: hidden; }
.zz-marquee__spoor { display: flex; align-items: center; gap: 28px; width: max-content; animation: zz-marquee 46s linear infinite; font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 66px); line-height: 1.15; white-space: nowrap; }
.zz-marquee__rij--terug .zz-marquee__spoor { animation-direction: reverse; animation-duration: 54s; color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.5); font-style: italic; font-weight: 600; }
.zz-marquee__rij--terug i { color: var(--wimpel); -webkit-text-stroke: 0; font-style: normal; }
.zz-marquee__wimpel { width: 44px; flex: none; }
.zz-marquee:hover .zz-marquee__spoor { animation-play-state: paused; }
@keyframes zz-marquee { to { transform: translateX(-50%); } }

/* =====================================================================
   VERHALEN
   ===================================================================== */
.zz-verhalen { padding: calc(var(--sectie) * .7) 0 var(--sectie); }
.zz-verhalen__kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: clamp(36px, 5vw, 60px); }
.zz-verhalen__kop .zz-sectiekop { margin-bottom: 0; }
.zz-maandbalk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; width: min(100%, 440px); }
.zz-maandbalk li { display: grid; gap: 7px; justify-items: center; }
.zz-maandbalk__streep { width: 100%; height: 34px; border-radius: 6px; background: repeating-linear-gradient(-45deg, var(--meer-bleek), var(--meer-bleek) 4px, #fff 4px, #fff 8px); box-shadow: inset 0 0 0 1px var(--lijn); transform-origin: bottom; }
.zz-maandbalk li.is-gevuld .zz-maandbalk__streep { background: linear-gradient(180deg, var(--meer-mid), var(--meer-donker)); box-shadow: none; }
.zz-maandbalk__naam { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-zacht); }
.js .zz-maandbalk.is-zichtbaar li .zz-maandbalk__streep { animation: zz-staaf .8s var(--ease-out) both; animation-delay: calc(var(--i) * .06s); }
@keyframes zz-staaf { from { transform: scaleY(0); } }

.zz-verhalen__raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(18px, 2vw, 28px); grid-auto-flow: dense; }
.zz-verhalen__raster > * { grid-column: span 4; }
.zz-verhalen__raster > .zz-kaart--groot, .zz-filteritem--groot { grid-column: span 8; grid-row: span 2; }
.zz-verhalen__raster > .zz-kaart--hoog { grid-row: span 2; }
.zz-verhalen__raster > .zz-kaart--breed, .zz-filteritem--breed { grid-column: span 8; }
.zz-verhalen__raster--drie > * { grid-column: span 4 !important; grid-row: auto !important; }
.zz-verhalen__raster > .zz-kaart--teaser-breed, .zz-filteritem--teaser-breed { grid-column: span 8; }
.zz-kaart--teaser-breed .zz-kaart__body { display: grid; grid-template-columns: auto 1fr; column-gap: 32px; align-content: center; }
.zz-kaart--teaser-breed .zz-kaart__groot { grid-row: 1 / span 4; font-size: 150px; margin: 0; }
.zz-kaart--teaser-breed .zz-kaart__meta, .zz-kaart--teaser-breed .zz-kaart__titel, .zz-kaart--teaser-breed .zz-kaart__intro, .zz-kaart--teaser-breed .zz-kaart__cta { grid-column: 2; }
@media (max-width: 1000px) { .zz-verhalen__raster > .zz-kaart--teaser-breed, .zz-filteritem--teaser-breed { grid-column: span 12 !important; } }
@media (max-width: 1000px) { .zz-kaart--teaser-breed .zz-kaart__body { display: flex; } .zz-kaart--teaser-breed .zz-kaart__groot { font-size: 110px; margin: 10px 0 18px; } }
.zz-filteritem { display: flex; }
.zz-filteritem > .zz-kaart { flex: 1; }
.zz-filteritem.is-verborgen { display: none; }
@media (max-width: 1000px) {
    .zz-verhalen__raster > *, .zz-verhalen__raster--drie > * { grid-column: span 6 !important; }
    .zz-verhalen__raster > .zz-kaart--groot, .zz-filteritem--groot, .zz-verhalen__raster > .zz-kaart--breed, .zz-filteritem--breed { grid-column: span 12 !important; grid-row: auto; }
    .zz-verhalen__raster > .zz-kaart--hoog { grid-row: auto; }
}
@media (max-width: 640px) {
    .zz-verhalen__raster > *, .zz-verhalen__raster--drie > * { grid-column: span 12 !important; }
}

.zz-kaart { --accent: var(--meer); position: relative; display: flex; border-radius: var(--r-l); background: #fff; box-shadow: var(--schaduw-s); overflow: hidden; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.zz-accent--wimpel { --accent: var(--wimpel-donker); }
.zz-accent--zand { --accent: #9a7a45; }
.zz-accent--nacht { --accent: var(--nacht-2); }
.zz-kaart:hover { transform: translateY(-8px); box-shadow: var(--schaduw-l); }
.zz-kaart__link { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; }
.zz-kaart__link:hover { color: inherit; }
.zz-kaart__beeld { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--meer-bleek); }
.zz-kaart__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .6s; }
.zz-kaart:hover .zz-kaart__beeld img { transform: scale(1.07); }
.zz-kaart__periode { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--nacht); font-family: var(--font-display); font-weight: 700; font-size: 14px; backdrop-filter: blur(6px); }
.zz-kaart__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.zz-kaart__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-zacht); margin-bottom: 10px; }
.zz-kaart__nr { color: var(--accent); }
.zz-kaart__thema { font-size: 13px; font-weight: 600; color: var(--accent); margin: 0 0 6px; }
.zz-kaart__titel { font-size: clamp(21px, 1.8vw, 25px); font-weight: 700; margin-bottom: 10px; transition: color .3s; }
.zz-kaart:hover .zz-kaart__titel { color: var(--accent); }
.zz-kaart__intro { font-size: 15px; color: var(--inkt-zacht); margin-bottom: 18px; }
.zz-kaart__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--nacht); text-decoration: none; }
.zz-kaart__cta .zz-icon { width: 18px; transition: transform .4s var(--ease); }
.zz-kaart:hover .zz-kaart__cta .zz-icon { transform: translateX(6px); }

/* Archiefbeelden: frisse duotoon in meerblauw, kleur bij hover */
.is-archiefbeeld .zz-kaart__beeld img, .zz-artikelhero.is-archiefbeeld .zz-artikelhero__beeld img { filter: grayscale(1) contrast(1.12) brightness(1.08); }
.is-archiefbeeld .zz-kaart__beeld::before, .zz-artikelhero.is-archiefbeeld .zz-artikelhero__beeld::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, var(--meer), var(--nacht)); mix-blend-mode: multiply; opacity: .55; pointer-events: none; transition: opacity .6s; }
.is-archiefbeeld:hover .zz-kaart__beeld::before { opacity: .25; }
.zz-kaart--groot.is-archiefbeeld .zz-kaart__beeld::after { z-index: 2; }
.zz-kaart__periode { z-index: 3; }

/* Grote kaart: tekst over het beeld */
.zz-kaart--groot .zz-kaart__link { position: relative; min-height: 560px; }
.zz-kaart--groot .zz-kaart__beeld { position: absolute; inset: 0; aspect-ratio: auto; }
.zz-kaart--groot .zz-kaart__beeld::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,34,48,.95) 0%, rgba(13,34,48,.75) 40%, rgba(13,34,48,.2) 72%, transparent 90%); }
.zz-kaart--groot .zz-kaart__body { position: relative; z-index: 1; justify-content: flex-end; color: #fff; padding: clamp(24px, 3vw, 44px); }
.zz-kaart--groot .zz-kaart__meta, .zz-kaart--groot .zz-kaart__intro { color: rgba(255,255,255,.82); }
.zz-kaart--groot .zz-kaart__nr, .zz-kaart--groot .zz-kaart__thema { color: var(--wimpel-licht); }
.zz-kaart--groot .zz-kaart__titel { font-size: clamp(30px, 3.4vw, 48px); max-width: 640px; letter-spacing: -.025em; }
.zz-kaart--groot:hover .zz-kaart__titel { color: #fff; }
.zz-kaart--groot .zz-kaart__intro { font-size: 17px; max-width: 560px; }
.zz-kaart--groot .zz-kaart__cta { color: #fff; margin-top: 4px; }
.zz-kaart--groot .zz-kaart__cta, .zz-kaart--groot .zz-kaart__meta { max-width: 560px; }

/* Hoge kaart: groot beeld boven */
.zz-kaart--hoog .zz-kaart__beeld { aspect-ratio: 3 / 4; flex: 1; }
/* Brede kaart: beeld naast tekst */
.zz-kaart--breed .zz-kaart__link { flex-direction: row; }
.zz-kaart--breed .zz-kaart__beeld { aspect-ratio: auto; flex: 0 0 55%; min-height: 340px; }
.zz-kaart--breed .zz-kaart__body { justify-content: center; padding: clamp(24px, 3vw, 40px); background: var(--nacht); color: #fff; }
.zz-kaart--breed .zz-kaart__intro, .zz-kaart--breed .zz-kaart__meta { color: rgba(255,255,255,.75); }
.zz-kaart--breed .zz-kaart__nr, .zz-kaart--breed .zz-kaart__thema { color: var(--wimpel-licht); }
.zz-kaart--breed .zz-kaart__titel { font-size: clamp(26px, 2.4vw, 34px); }
.zz-kaart--breed:hover .zz-kaart__titel { color: var(--wimpel-licht); }
.zz-kaart--breed .zz-kaart__cta { color: #fff; }
@media (max-width: 760px) {
    .zz-kaart--groot .zz-kaart__link { min-height: 480px; }
    .zz-kaart--breed .zz-kaart__link { flex-direction: column; }
    .zz-kaart--breed .zz-kaart__beeld { aspect-ratio: 4 / 3; min-height: 0; }
    .zz-kaart--hoog .zz-kaart__beeld { aspect-ratio: 4 / 3; }
}

/* Teaser: verhaal dat nog komt */
.zz-kaart--teaser { background: transparent; box-shadow: none; border: 2px dashed var(--meer-licht); }
.zz-kaart--teaser:hover { background: #fff; border-style: solid; border-color: var(--wimpel); }
.zz-kaart--teaser .zz-kaart__body { padding: 26px; }
.zz-kaart__groot { font-family: var(--font-display); font-weight: 900; font-size: 110px; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--meer-licht); margin: 10px 0 18px; transition: -webkit-text-stroke-color .4s; }
.zz-kaart--teaser:hover .zz-kaart__groot { -webkit-text-stroke-color: var(--wimpel); }
.zz-kaart--teaser .zz-kaart__cta { color: var(--wimpel-donker); }

/* =====================================================================
   TIJDSTROOK (home)
   ===================================================================== */
.zz-tijdstrook { position: relative; background: var(--nacht); color: #fff; padding: calc(var(--sectie) + 90px) 0 calc(var(--sectie) + 120px); overflow: hidden; }
.zz-tijdstrook::before { content: ''; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 10%, rgba(70,116,140,.45), transparent 70%), radial-gradient(600px 400px at 0% 100%, rgba(64,161,50,.18), transparent 70%); pointer-events: none; }
.zz-tijdstrook__kop { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.zz-tijdstrook__bediening { display: flex; gap: 10px; margin-bottom: clamp(36px, 5vw, 64px); }
.zz-tijdstrook__spoor { position: relative; display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 30px; scrollbar-width: none; cursor: grab; }
.zz-tijdstrook__spoor::-webkit-scrollbar { display: none; }
.zz-tijdstrook__spoor.is-slepen { cursor: grabbing; scroll-snap-type: none; }
.zz-tijdstrook__spoor.is-slepen * { pointer-events: none; }
.zz-tijdvak { flex: 0 0 clamp(290px, 30vw, 380px); scroll-snap-align: start; display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--r-l); background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: background .4s, transform .5s var(--ease-out); }
.zz-tijdvak:hover { background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); transform: translateY(-6px); }
.zz-tijdvak__nr { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--wimpel-licht); margin-bottom: 8px; }
.zz-tijdvak__jaren { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 3.6vw, 50px); line-height: 1; margin-bottom: 14px; letter-spacing: -.02em; }
.zz-tijdvak__titel { font-size: 22px; margin-bottom: 8px; }
.zz-tijdvak__tekst { font-size: 15px; color: rgba(255,255,255,.72); }
.zz-tijdvak__lijst { list-style: none; margin: 6px 0 22px; padding: 0; display: grid; gap: 10px; font-size: 14px; color: rgba(255,255,255,.86); }
.zz-tijdvak__lijst li { padding-left: 14px; border-left: 2px solid rgba(155,220,139,.5); line-height: 1.45; }
.zz-tijdvak__lijst strong { color: var(--wimpel-licht); margin-right: 4px; }
.zz-tijdvak__link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.zz-tijdvak__link .zz-icon { width: 18px; transition: transform .4s var(--ease); }
.zz-tijdvak__link:hover { color: var(--wimpel-licht); }
.zz-tijdvak__link:hover .zz-icon { transform: translateX(5px); }
.zz-tijdstrook__voortgang { height: 2px; background: rgba(255,255,255,.14); border-radius: 2px; overflow: hidden; }
.zz-tijdstrook__voortgang span { display: block; height: 100%; width: 100%; background: var(--wimpel-licht); transform-origin: 0 50%; transform: scaleX(var(--strook, .15)); transition: transform .2s; }
.zz-tijdstrook .zz-centreer { margin-top: 48px; }

/* =====================================================================
   MOZAÏEK / GALERIJ
   ===================================================================== */
.zz-beeld { padding: var(--sectie) 0; }
.zz-mozaiek { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 16vw, 230px); gap: clamp(10px, 1.2vw, 16px); }
.zz-mozaiek__item { margin: 0; border-radius: var(--r-m); overflow: hidden; position: relative; background: var(--meer-bleek); }
.zz-mozaiek__item--0 { grid-column: span 2; grid-row: span 2; }
.zz-mozaiek__item--1 { grid-column: span 2; }
.zz-mozaiek__item--4 { grid-column: span 2; }
.zz-mozaiek__item--6 { grid-row: span 2; }
.zz-mozaiek__item--9 { grid-column: span 2; }
.zz-mozaiek__knop, .zz-galerij__knop, .zz-mijlpaal__beeld { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; position: relative; cursor: zoom-in; }
.zz-mozaiek__knop img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .6s; }
.zz-mozaiek__knop:hover img { transform: scale(1.08); }
.zz-mozaiek__item.is-document { background: var(--papier); }
.zz-mozaiek__item.is-document img { object-fit: contain; padding: 12px; filter: sepia(.2); }
.zz-mozaiek__item.is-archief img { filter: sepia(.25) saturate(.8); }
.zz-mozaiek__item.is-archief:hover img { filter: none; }
.zz-mozaiek__label { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(13,34,48,.75); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(6px); }
.is-archief .zz-mozaiek__label, .is-document .zz-mozaiek__label { background: rgba(154,122,69,.92); }
@media (max-width: 760px) {
    .zz-mozaiek { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
    .zz-mozaiek__item--6 { grid-row: span 1; }
}

.zz-galerijkop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 36px; }
.zz-galerijkop__noot { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--inkt-zacht); margin: 0; }
.zz-galerij { columns: 4 260px; column-gap: 16px; }
.zz-galerij > * { break-inside: avoid; margin: 0 0 16px; }
.zz-galerij__item { border-radius: var(--r-m); overflow: hidden; background: #fff; box-shadow: var(--schaduw-s); }
/* Fotokaders in de galerij zijn blokken (niet de flex-opmaak van filteritems in het verhalenraster) */
.zz-galerij__item.zz-filteritem { display: block; }
.zz-galerij__gezocht.zz-filteritem { display: grid; }
.zz-galerij__item.is-verborgen, .zz-galerij__gezocht.is-verborgen { display: none; }
.zz-galerij__knop img { width: 100%; height: auto; transition: transform 1s var(--ease-out); }
.zz-galerij__knop { overflow: hidden; }
.zz-galerij__knop:hover img { transform: scale(1.05); }
.zz-galerij__item.is-document .zz-galerij__knop { background: var(--papier); padding: 14px; }
.zz-galerij__item.is-archief img { filter: sepia(.2); }
.zz-galerij__item figcaption { padding: 12px 14px 14px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.zz-galerij__soort { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--wimpel-donker); margin-bottom: 3px; }
.is-archief .zz-galerij__soort, .is-document .zz-galerij__soort { color: #9a7a45; }
.zz-galerij__gezocht { display: grid; gap: 6px; padding: 28px 22px; border-radius: var(--r-m); border: 2px dashed var(--zand-donker); background: var(--zand); color: var(--inkt); text-decoration: none; transition: border-color .3s, transform .4s var(--ease); }
.zz-galerij__gezocht:hover { border-color: var(--wimpel); color: var(--inkt); transform: translateY(-4px); }
.zz-galerij__gezocht .zz-icon { width: 30px; height: 30px; color: #9a7a45; }
.zz-galerij__gezocht strong { font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.zz-galerij__gezocht span { font-size: 13px; color: var(--inkt-zacht); }
.zz-galerij__gezocht em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--wimpel-donker); }

/* Lightbox */
.zz-lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(8, 20, 28, .94); display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; padding: 30px 10px; opacity: 0; transition: opacity .35s; }
.zz-lightbox[hidden] { display: none; }
.zz-lightbox.is-open { opacity: 1; }
.zz-lightbox__figuur { margin: 0; display: grid; justify-items: center; gap: 14px; max-height: 100%; }
.zz-lightbox__figuur img { max-height: calc(100vh - 160px); width: auto; max-width: 100%; border-radius: 8px; box-shadow: var(--schaduw-l); transform: scale(.96); transition: transform .5s var(--ease-out); }
.zz-lightbox.is-open img { transform: none; }
.zz-lightbox figcaption { color: #fff; text-align: center; max-width: 720px; font-size: 15px; display: grid; gap: 4px; }
.zz-lightbox__bron { font-size: 12.5px; color: rgba(255,255,255,.6); }
.zz-lightbox button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; justify-self: center; transition: background .3s; }
.zz-lightbox button:hover { background: var(--wimpel-knop); }
.zz-lightbox__sluit { position: absolute; top: 18px; right: 18px; }
@media (max-width: 640px) {
    .zz-lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
    .zz-lightbox__vorige, .zz-lightbox__volgende { position: absolute; bottom: 20px; }
    .zz-lightbox__vorige { left: 20px; }
    .zz-lightbox__volgende { right: 20px; }
}

/* =====================================================================
   PROGRAMMA
   ===================================================================== */
.zz-programma { padding: var(--sectie) 0; background: #fff; }
.zz-programma__kop { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
.zz-conceptbanner { display: flex; gap: 14px; align-items: flex-start; max-width: 360px; padding: 18px 20px; border-radius: var(--r-m); background: repeating-linear-gradient(-45deg, #fff9ec, #fff9ec 10px, #fff3db 10px, #fff3db 20px); border: 1px solid #efd39a; color: #6b4306; font-size: 14px; margin-bottom: clamp(36px, 5vw, 64px); }
.zz-conceptbanner p { margin: 0; }
.zz-conceptbanner strong { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.zz-conceptbanner--hero { margin: 28px 0 0; background: rgba(255,249,236,.95); }
@media (max-width: 820px) { .zz-programma__kop { grid-template-columns: 1fr; } .zz-conceptbanner { margin-top: -20px; } }

.zz-jaarbalk { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 40px; }
.zz-jaarbalk__maand { position: relative; display: grid; place-items: center; height: 54px; border-radius: 10px; background: var(--lucht); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--inkt-zacht); text-decoration: none; transition: background .3s, color .3s, transform .3s var(--ease); }
.zz-jaarbalk__maand.heeft { background: var(--meer-bleek); color: var(--meer-donker); }
.zz-jaarbalk__maand.heeft::after { content: ''; position: absolute; bottom: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--meer); }
a.zz-jaarbalk__maand.heeft:hover { background: var(--meer); color: #fff; transform: translateY(-3px); }
.zz-jaarbalk__maand.is-jubileum { background: var(--wimpel-knop); color: #fff; }
.zz-jaarbalk__maand.is-jubileum::after { background: #fff; }
.zz-jaarbalk__maand b { position: absolute; top: -26px; font-size: 11px; color: var(--wimpel-donker); white-space: nowrap; }
.zz-jaarbalk__maand em { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 10px; }
.zz-jaarbalk--groot { margin: 40px 0 60px; }
.zz-jaarbalk--groot .zz-jaarbalk__maand { height: 70px; }
@media (max-width: 640px) { .zz-jaarbalk { grid-template-columns: repeat(6, 1fr); row-gap: 30px; } }

.zz-programma__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1000px) { .zz-programma__raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .zz-programma__raster { grid-template-columns: 1fr; } }
.zz-activiteit { display: flex; gap: 18px; padding: 26px; border-radius: var(--r-l); background: var(--lucht); box-shadow: inset 0 0 0 1px var(--lijn); transition: transform .5s var(--ease-out), box-shadow .5s, background .4s; }
.zz-activiteit:hover { transform: translateY(-5px); background: #fff; box-shadow: var(--schaduw-m); }
.zz-activiteit__icoon { flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--nacht); color: var(--wimpel-licht); transition: transform .5s var(--ease), background .4s; }
.zz-activiteit:hover .zz-activiteit__icoon { transform: rotate(-8deg) scale(1.05); background: var(--wimpel-knop); color: #fff; }
.zz-activiteit__icoon .zz-icon { width: 26px; height: 26px; }
.zz-activiteit__body { display: flex; flex-direction: column; min-width: 0; }
.zz-activiteit__wanneer { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--meer); margin-bottom: 6px; }
.zz-activiteit__titel { font-size: 21px; margin-bottom: 8px; }
.zz-activiteit__tekst { font-size: 15px; color: var(--inkt-zacht); }
.zz-activiteit__inhoud { font-size: 15px; color: var(--inkt-zacht); }
.zz-activiteit__inhoud ul { padding-left: 18px; margin: 0 0 1em; }
.zz-activiteit__voet { margin: auto 0 0; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.zz-activiteit__doel { font-size: 13px; color: var(--inkt-zacht); }

.zz-logboek__maand { display: grid; grid-template-columns: 220px 1fr; gap: 30px; padding: 40px 0; border-top: 1px solid var(--lijn); }
.zz-logboek__kop { font-size: clamp(30px, 3vw, 42px); position: sticky; top: calc(var(--kop-h) + 20px); align-self: start; }
.zz-logboek__kop span { display: block; font-family: var(--font-body); font-size: 14px; letter-spacing: .14em; color: var(--wimpel-donker); font-weight: 700; margin-top: 6px; }
.zz-logboek__items { display: grid; gap: 18px; }
.zz-logboek .zz-activiteit { background: #fff; }
@media (max-width: 760px) { .zz-logboek__maand { grid-template-columns: 1fr; gap: 14px; } .zz-logboek__kop { position: static; } }

/* =====================================================================
   OPROEP
   ===================================================================== */
.zz-oproep { position: relative; padding: var(--sectie) 0 calc(var(--sectie) + 60px); background: linear-gradient(135deg, var(--wimpel-donker), #1f6a3f 50%, var(--meer-donker)); color: #fff; overflow: hidden; }
.zz-oproep::before { content: ''; position: absolute; inset: 0; background: radial-gradient(500px 300px at 10% 20%, rgba(255,255,255,.14), transparent 70%); }
.zz-oproep__binnen { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.zz-oproep__tekst h2 { font-size: clamp(36px, 4.6vw, 62px); font-weight: 800; letter-spacing: -.03em; }
.zz-oproep__tekst h2 em { color: var(--wimpel-licht); }
.zz-oproep__tekst p { font-size: 18px; color: rgba(255,255,255,.85); max-width: 520px; }
.zz-oproep .zz-kicker { color: var(--wimpel-licht); }
.zz-oproep__doos { position: relative; height: 420px; }
.zz-oproep__knip { position: absolute; background: var(--papier); padding: 10px; border-radius: 4px; box-shadow: var(--schaduw-l); filter: sepia(.2); animation: zz-zweef 7s ease-in-out infinite; }
.zz-oproep__knip--1 { width: 46%; left: 4%; top: 6%; rotate: -7deg; }
.zz-oproep__knip--2 { width: 52%; right: 2%; top: 0; rotate: 5deg; animation-delay: -2s; }
.zz-oproep__knip--3 { width: 44%; left: 30%; bottom: 0; rotate: -2deg; animation-delay: -4s; }
@keyframes zz-zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.zz-oproep--compact .zz-oproep__binnen { grid-template-columns: 1fr; max-width: 820px; }
@media (max-width: 860px) { .zz-oproep__binnen { grid-template-columns: 1fr; } .zz-oproep__doos { height: 300px; max-width: 460px; width: 100%; } }

/* =====================================================================
   SLOT
   ===================================================================== */
.zz-slot { position: relative; min-height: 92vh; display: flex; align-items: center; color: #fff; overflow: hidden; isolation: isolate; padding: var(--sectie) 0 calc(var(--sectie) + 110px); }
.zz-slot__beeld { position: absolute; inset: -10% 0; z-index: -2; }
.zz-slot__beeld img { width: 100%; height: 100%; object-fit: cover; }
.zz-slot__waas { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,34,48,.6), rgba(13,34,48,.88)); }
.zz-slot__inhoud { text-align: center; display: grid; justify-items: center; }
.zz-slot__reeks { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 30px); margin-bottom: 26px; }
.zz-slot__reeks i { display: block; width: clamp(40px, 8vw, 110px); height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.2), var(--wimpel-licht)); }
.zz-slot__reeks .is-open { color: transparent; -webkit-text-stroke: 1px #fff; }
.zz-slot__titel { font-size: clamp(40px, 6.4vw, 92px); font-weight: 800; letter-spacing: -.035em; line-height: 1; max-width: 1050px; }
.zz-slot__titel em { color: var(--wimpel-licht); font-weight: 600; }
.zz-slot__tekst { max-width: 620px; font-size: 19px; color: rgba(255,255,255,.85); margin: 10px auto 44px; }
.zz-slot__tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; max-width: 1000px; }
.zz-tegel { display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: var(--r-m); background: rgba(255,255,255,.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); color: #fff; text-decoration: none; text-align: left; transition: background .35s, transform .45s var(--ease-out); }
.zz-tegel:hover { background: var(--wimpel-knop); color: #fff; transform: translateY(-5px); }
.zz-tegel > .zz-icon:first-child { width: 34px; height: 34px; color: var(--wimpel-licht); }
.zz-tegel:hover > .zz-icon:first-child { color: #fff; }
.zz-tegel span { display: grid; font-size: 14px; color: rgba(255,255,255,.75); }
.zz-tegel strong { font-family: var(--font-display); font-size: 21px; color: #fff; }
.zz-tegel__pijl { margin-left: auto; transition: transform .4s var(--ease); }
.zz-tegel:hover .zz-tegel__pijl { transform: translateX(5px); }
@media (max-width: 860px) { .zz-slot__tegels { grid-template-columns: 1fr; } }

/* =====================================================================
   VOET
   ===================================================================== */
.zz-voet { position: relative; background: var(--nacht); color: rgba(255,255,255,.78); padding: 200px 0 40px; font-size: 15px; }
.zz-voet__golf .zz-golven { top: -1px; bottom: auto; transform: scaleY(-1); --golf: var(--lucht); }
/* Laatste sectie heeft zelf golven in nachtblauw: dan geen extra golf in de voet. */
.zz-main:has(> :is(.zz-slot, .zz-oproep, .zz-sectie--nacht):last-child) + .zz-voet { padding-top: 90px; }
.zz-main:has(> :is(.zz-slot, .zz-oproep, .zz-sectie--nacht):last-child) + .zz-voet .zz-voet__golf { display: none; }
.zz-main:has(> .zz-sectie--zand:last-child) + .zz-voet .zz-golven { --golf: var(--zand); }
.zz-main:has(> .zz-programma:last-child) + .zz-voet .zz-golven { --golf: #fff; }
.zz-voet__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.12); }
.zz-voet__merk { display: grid; gap: 20px; justify-items: start; color: #fff; }
.zz-voet__merk p { color: rgba(255,255,255,.72); max-width: 380px; margin: 0; }
.zz-voet h2 { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wimpel-licht); margin-bottom: 16px; }
.zz-voet ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.zz-voet a { color: #fff; text-decoration: none; }
.zz-voet a:hover { color: var(--wimpel-licht); }
.zz-voet__coord { font-family: var(--font-display); font-size: 22px; color: #fff; }
.zz-voet__teller strong { display: block; font-family: var(--font-display); font-size: 56px; line-height: 1; color: #fff; font-weight: 800; letter-spacing: -.02em; }
.zz-voet__klein { font-size: 13px; opacity: .7; }
.zz-voet__onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 40px; padding-top: 26px; font-size: 13px; color: rgba(255,255,255,.55); }
.zz-voet__onder p { margin: 0; max-width: 620px; line-height: 2; }
@media (max-width: 960px) { .zz-voet__raster { grid-template-columns: 1fr 1fr; } .zz-voet__merk { grid-column: 1 / -1; } }
@media (max-width: 560px) { .zz-voet__raster { grid-template-columns: 1fr; } }

/* =====================================================================
   BINNENPAGINA'S
   ===================================================================== */
.zz-paginahero { position: relative; min-height: 64vh; display: flex; align-items: flex-end; background: var(--nacht); color: #fff; overflow: hidden; isolation: isolate; padding: calc(var(--kop-h) + 70px) 0 clamp(130px, 14vw, 210px); }
.zz-paginahero__beeld { position: absolute; inset: -8% 0 0; z-index: -2; }
.zz-paginahero__beeld img { width: 100%; height: 108%; object-fit: cover; animation: zz-kenburns 30s ease-in-out infinite alternate; }
.zz-paginahero--beeld::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13,34,48,.9), rgba(13,34,48,.45) 70%, rgba(13,34,48,.2)), linear-gradient(0deg, rgba(13,34,48,.6), transparent 50%); }
.zz-paginahero__kaartlijnen { position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(circle at 80% 40%, transparent 0 120px, rgba(255,255,255,.06) 121px 122px, transparent 123px 190px, rgba(255,255,255,.05) 191px 192px, transparent 193px 270px, rgba(255,255,255,.04) 271px 272px, transparent 273px); pointer-events: none; }
.zz-paginahero__inhoud { position: relative; }
.zz-paginahero .zz-kicker { color: var(--wimpel-licht); }
.zz-paginahero__titel { font-size: clamp(44px, 7vw, 100px); font-weight: 800; letter-spacing: -.035em; line-height: .98; max-width: 980px; margin-bottom: 22px; }
.zz-paginahero__titel em { color: var(--wimpel-licht); font-weight: 600; }
.zz-paginahero__intro { font-size: clamp(17px, 1.6vw, 21px); max-width: 680px; color: rgba(255,255,255,.86); margin: 0; }

.zz-tweekolom { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.zz-tweekolom--formulier { grid-template-columns: .9fr 1.1fr; }
@media (max-width: 900px) { .zz-tweekolom, .zz-tweekolom--formulier { grid-template-columns: 1fr; } }

.zz-feitenkaart, .zz-legendakaart { padding: 32px; border-radius: var(--r-l); background: #fff; box-shadow: var(--schaduw-m); position: sticky; top: calc(var(--kop-h) + 24px); }
.zz-feitenkaart h2, .zz-legendakaart h3 { font-size: 24px; }
.zz-feitenkaart dl { margin: 0; display: grid; gap: 16px; }
.zz-feitenkaart dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wimpel-donker); }
.zz-feitenkaart dd { margin: 2px 0 0; font-weight: 600; }
.zz-legendakaart ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.zz-legendakaart li p { font-size: 14px; color: var(--inkt-zacht); margin: 6px 0 0; }

.zz-pijlers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.zz-pijlers article { padding: 34px 30px; border-radius: var(--r-l); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.zz-pijlers__jaar { display: block; font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--wimpel-licht); margin-bottom: 18px; }
.zz-pijlers h3 { font-size: 26px; }
.zz-pijlers p { color: rgba(255,255,255,.75); margin: 0; }
@media (max-width: 860px) { .zz-pijlers { grid-template-columns: 1fr; } }

.zz-stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: stap; }
.zz-stappen li { position: relative; padding: 30px 26px; border-radius: var(--r-l); background: #fff; box-shadow: var(--schaduw-s); }
.zz-stappen span { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--nacht); color: var(--wimpel-licht); font-weight: 800; font-size: 14px; margin-bottom: 18px; }
.zz-stappen h3 { font-size: 22px; }
.zz-stappen p { font-size: 15px; color: var(--inkt-zacht); margin: 0; }
@media (max-width: 960px) { .zz-stappen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zz-stappen { grid-template-columns: 1fr; } }

/* Filter */
.zz-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.zz-filter__knop { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--lijn); font-size: 14px; font-weight: 600; color: var(--inkt); transition: background .3s, color .3s, box-shadow .3s; }
.zz-filter__knop span { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--lucht); color: var(--inkt-zacht); }
.zz-filter__knop:hover { box-shadow: inset 0 0 0 1.5px var(--meer); }
.zz-filter__knop.is-actief { background: var(--nacht); color: #fff; box-shadow: none; }
.zz-filter__knop.is-actief span { background: rgba(255,255,255,.18); color: #fff; }
.zz-filter__knop i { width: 9px; height: 9px; }
.zz-filter__knop--bevestigd i { color: var(--wimpel); }
.zz-filter__knop--verifieren i { color: var(--amber); }
.zz-filter__knop--open i { color: #8a969d; }
.zz-filter__knop--toekomst i { color: var(--meer); }
.zz-sectie > .zz-wrap > .zz-filter { margin-bottom: 36px; }

/* =====================================================================
   TIJDLIJN-PAGINA
   ===================================================================== */
.zz-tijdlijnpagina { padding: calc(var(--sectie) * .6) 0 var(--sectie); }
.zz-legenda { display: grid; gap: 12px; margin-bottom: 60px; }
.zz-legenda__titel { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt-zacht); }
.zz-inhoud--intro { max-width: 760px; margin-bottom: 40px; font-size: 18px; }

.zz-tijdlijn { display: grid; grid-template-columns: 240px 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
.zz-tijdlijn > *, .zz-tweekolom > *, .zz-intro__raster > *, .zz-oproep__binnen > *, .zz-logboek__maand > * { min-width: 0; }
.zz-tijdlijn__nav { position: sticky; top: calc(var(--kop-h) + 30px); }
.zz-tijdlijn__nav ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; border-left: 2px solid var(--lijn); }
.zz-tijdlijn__nav a { display: grid; padding: 10px 0 10px 18px; margin-left: -2px; border-left: 2px solid transparent; color: var(--inkt-zacht); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.3; transition: color .3s, border-color .3s; }
.zz-tijdlijn__nav a span { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--meer); }
.zz-tijdlijn__nav a:hover, .zz-tijdlijn__nav a.is-actief { color: var(--nacht); border-left-color: var(--wimpel); }
.zz-tijdlijn__nav a.is-actief span { color: var(--wimpel-donker); }

.zz-tijdlijn__lijn { position: relative; padding-left: 60px; }
.zz-tijdlijn__as { position: absolute; left: 19px; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: var(--meer-bleek); }
.zz-tijdlijn__as span { position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--as, 0)); background: linear-gradient(180deg, var(--wimpel), var(--meer)); border-radius: 3px; }
.zz-tijdlijn__vak { padding-bottom: 50px; scroll-margin-top: calc(var(--kop-h) + 20px); }
.zz-tijdlijn__vakkop { position: relative; padding: 10px 0 30px; }
.zz-tijdlijn__vakkop::before { content: ''; position: absolute; left: -52px; top: 18px; width: 26px; height: 26px; border-radius: 50%; background: var(--nacht); box-shadow: 0 0 0 6px var(--lucht), 0 0 0 7px var(--meer-licht); }
.zz-tijdlijn__vakjaren { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 6vw, 84px); line-height: 1; letter-spacing: -.03em; margin: 0 0 6px; background: linear-gradient(90deg, var(--nacht), var(--meer)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zz-tijdlijn__vakkop h2 { font-size: clamp(26px, 2.6vw, 34px); }
.zz-tijdlijn__vakkop p:last-child { color: var(--inkt-zacht); max-width: 620px; }

.zz-mijlpaal { position: relative; margin-bottom: 22px; }
.zz-mijlpaal.is-verborgen { display: none; }
.zz-mijlpaal__punt { position: absolute; left: -47px; top: 30px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--wimpel); transition: transform .4s var(--ease); }
.zz-mijlpaal--verifieren .zz-mijlpaal__punt { border-color: var(--amber); }
.zz-mijlpaal--open .zz-mijlpaal__punt { border-style: dashed; border-color: #8a969d; }
.zz-mijlpaal--toekomst .zz-mijlpaal__punt { border-color: var(--meer); }
.zz-mijlpaal:hover .zz-mijlpaal__punt { transform: scale(1.35); }
.zz-mijlpaal__kaart { display: grid; grid-template-columns: 1fr; padding: 26px 28px; border-radius: var(--r-l); background: #fff; box-shadow: var(--schaduw-s); transition: box-shadow .5s, transform .5s var(--ease-out); }
.zz-mijlpaal:hover .zz-mijlpaal__kaart { box-shadow: var(--schaduw-m); transform: translateX(6px); }
.zz-mijlpaal--open .zz-mijlpaal__kaart { background: transparent; box-shadow: inset 0 0 0 2px var(--lijn); border: 0; background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(17,33,44,.025) 10px, rgba(17,33,44,.025) 20px); }
.zz-mijlpaal--toekomst .zz-mijlpaal__kaart { background: linear-gradient(135deg, #fff, var(--meer-bleek)); }
.zz-mijlpaal__jaar { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--nacht); margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.zz-mijlpaal__jaar small { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--meer); }
.zz-mijlpaal__titel { font-size: 22px; margin-bottom: 8px; }
.zz-mijlpaal__tekst { color: var(--inkt-zacht); font-size: 15.5px; }
.zz-mijlpaal__tekst p:last-child { margin-bottom: 14px; }
.zz-mijlpaal__beeld { width: 100%; max-width: 360px; height: auto; margin: 4px 0 16px; border-radius: var(--r-m); overflow: hidden; background: var(--papier); }
.zz-mijlpaal__beeld img { width: 100%; height: auto; max-height: 280px; object-fit: cover; transition: transform 1s var(--ease-out); }
.zz-mijlpaal__beeld:hover img { transform: scale(1.04); }
.zz-mijlpaal__voet { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.zz-mijlpaal__bron { font-size: 12.5px; color: var(--inkt-zacht); }
.zz-mijlpaal__verhaal { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; font-size: 14.5px; text-decoration: none; color: var(--wimpel-donker); }
.zz-mijlpaal__verhaal .zz-icon { width: 18px; }
@media (min-width: 1100px) {
    .zz-mijlpaal__kaart:has(.zz-mijlpaal__beeld) { grid-template-columns: 1fr 260px; column-gap: 26px; }
    .zz-mijlpaal__kaart:has(.zz-mijlpaal__beeld) > .zz-mijlpaal__beeld { grid-column: 2; grid-row: 1 / span 5; margin: 0; align-self: start; }
}
@media (max-width: 900px) {
    .zz-tijdlijn { grid-template-columns: 1fr; }
    .zz-tijdlijn__nav { position: sticky; top: var(--kop-h); z-index: 5; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter); background: rgba(243,248,250,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .zz-tijdlijn__nav ol { display: flex; overflow-x: auto; gap: 6px; border: 0; scrollbar-width: none; }
    .zz-tijdlijn__nav a { white-space: nowrap; border: 0; margin: 0; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--lijn); font-size: 13px; }
    .zz-tijdlijn__nav a span { display: none; }
    .zz-tijdlijn__nav a.is-actief { background: var(--nacht); color: #fff; }
    .zz-tijdlijn__lijn { padding-left: 38px; }
    .zz-tijdlijn__as { left: 9px; }
    .zz-tijdlijn__vakkop::before { left: -40px; width: 22px; height: 22px; }
    .zz-mijlpaal__punt { left: -36px; }
    .zz-mijlpaal__kaart { padding: 22px 20px; }
}

/* =====================================================================
   ARTIKEL
   ===================================================================== */
.zz-artikelhero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; background: var(--nacht); padding: calc(var(--kop-h) + 60px) 0 clamp(140px, 15vw, 220px); }
.zz-artikelhero__beeld { position: absolute; inset: -8% 0 0; z-index: -2; }
.zz-artikelhero__beeld img { width: 100%; height: 108%; object-fit: cover; animation: zz-kenburns 30s ease-in-out infinite alternate; }
.zz-artikelhero__waas { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13,34,48,.95) 0%, rgba(13,34,48,.55) 45%, rgba(13,34,48,.25) 100%); }
.zz-terug { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: 30px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.zz-terug:hover { color: #fff; background: rgba(255,255,255,.22); }
.zz-terug .zz-icon { width: 18px; }
.zz-artikelhero__boven { display: flex; gap: 16px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.zz-artikelhero__nr { color: var(--wimpel-licht); }
.zz-artikelhero__titel { font-size: clamp(40px, 6.4vw, 92px); font-weight: 800; letter-spacing: -.035em; line-height: .98; max-width: 1050px; }
.zz-artikelhero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.zz-artikelhero__meta span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); font-size: 14px; font-weight: 600; }
.zz-artikelhero__meta .zz-icon { width: 16px; height: 16px; }
.zz-artikelhero__periode { background: var(--wimpel-knop) !important; font-family: var(--font-display); font-size: 16px !important; }

.zz-artikel__lichaam { padding: clamp(40px, 6vw, 80px) 0 40px; }
.zz-artikel__concept { display: flex; gap: 16px; align-items: flex-start; padding: 16px 20px; border-radius: var(--r-m); background: #fffaf0; border: 1px solid #f1dcae; font-size: 14px; color: #6b4306; margin-bottom: 40px; }
.zz-artikel__concept p { margin: 0; }
@media (max-width: 560px) { .zz-artikel__concept { flex-direction: column; } }
.zz-artikel__lead { font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 28px); line-height: 1.4; font-weight: 500; color: var(--nacht); margin-bottom: 40px; }

/* Lopende tekst */
.zz-inhoud { font-size: 18px; line-height: 1.75; }
.zz-inhoud > * { margin-top: 0; }
.zz-inhoud h2 { font-size: clamp(28px, 3vw, 38px); margin: 1.8em 0 .5em; letter-spacing: -.02em; }
.zz-inhoud h3 { font-size: 24px; margin: 1.6em 0 .4em; }
.zz-inhoud p, .zz-inhoud ul, .zz-inhoud ol { margin-bottom: 1.2em; }
.zz-inhoud ul, .zz-inhoud ol { padding-left: 1.3em; }
.zz-inhoud li { margin-bottom: .4em; }
.zz-inhoud li::marker { color: var(--wimpel); }
.zz-inhoud a { color: var(--meer-donker); font-weight: 600; }
.zz-inhoud figure { margin: 2.2em 0; }
.zz-inhoud figure img { width: 100%; border-radius: var(--r-m); }
.zz-inhoud figcaption, .zz-inhoud .wp-element-caption { font-size: 14px; color: var(--inkt-zacht); margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--wimpel); line-height: 1.5; }
.zz-inhoud .alignwide { margin-left: calc(-1 * min(14vw, 180px)); margin-right: calc(-1 * min(14vw, 180px)); }
.zz-inhoud .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.zz-inhoud .alignfull img { border-radius: 0; }
.zz-inhoud .alignfull figcaption { max-width: 760px; margin-left: auto; margin-right: auto; }
@media (max-width: 1100px) { .zz-inhoud .alignwide { margin-left: 0; margin-right: 0; } }
.zz-inhoud .wp-block-pullquote { margin: 2.6em 0; padding: 0; border: 0; text-align: left; }
.zz-inhoud .wp-block-pullquote blockquote { margin: 0; padding: 36px 0 0; position: relative; }
.zz-inhoud .wp-block-pullquote blockquote::before { content: '“'; position: absolute; top: -40px; left: -6px; font-family: var(--font-display); font-size: 160px; line-height: 1; color: var(--wimpel); opacity: .9; }
.zz-inhoud .wp-block-pullquote p { font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); line-height: 1.25; font-weight: 600; font-style: italic; color: var(--nacht); margin-bottom: 14px; }
.zz-inhoud .wp-block-pullquote cite { font-style: normal; font-size: 14px; font-weight: 600; color: var(--inkt-zacht); }
.zz-inhoud .wp-block-pullquote cite::before { content: '— '; }

.zz-inhoud .zz-feiten { margin: 2.2em 0; padding: 28px 30px; border-radius: var(--r-l); background: var(--nacht); color: #fff; }
.zz-inhoud .zz-feiten h3 { margin-top: 0; color: var(--wimpel-licht); font-size: 14px; font-family: var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.zz-inhoud .zz-feiten ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.zz-inhoud .zz-feiten li { font-size: 16px; line-height: 1.5; padding-left: 20px; position: relative; margin: 0; }
.zz-inhoud .zz-feiten li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--wimpel-knop); }
.zz-inhoud .zz-feiten strong { color: var(--wimpel-licht); }
.zz-inhoud .zz-feiten p:last-child { margin: 16px 0 0; font-size: 13px; color: rgba(255,255,255,.6); }
.zz-inhoud .zz-verifieer { position: relative; padding: 16px 20px 16px 52px; border-radius: var(--r-m); background: #fdf3df; color: #6b4306; font-size: 15.5px; line-height: 1.55; }
.zz-inhoud .zz-verifieer::before { content: '?'; position: absolute; left: 16px; top: 15px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #fff; font-weight: 800; font-size: 14px; }
.zz-inhoud .zz-placeholder { margin: 2em 0; padding: 26px 28px; border-radius: var(--r-l); border: 2px dashed var(--meer-licht); background: repeating-linear-gradient(-45deg, #fff, #fff 10px, var(--lucht) 10px, var(--lucht) 20px); }
.zz-inhoud .zz-placeholder h3 { margin-top: 0; font-size: 20px; }
.zz-inhoud .zz-placeholder p { font-size: 16px; color: var(--inkt-zacht); }
.zz-inhoud .zz-placeholder p:last-child { margin-bottom: 0; }
.zz-inhoud .zz-ph { display: inline-block; padding: 0 8px; border-radius: 6px; background: var(--meer-bleek); color: var(--meer-donker); font-family: var(--font-body); font-size: .85em; font-weight: 700; font-style: normal; }
.zz-inhoud .zz-fotoreeks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 2.4em 0; }
.zz-inhoud .zz-fotoreeks figure { margin: 0; }
.zz-inhoud .zz-fotoreeks figure:first-child { grid-column: 1 / -1; }
.zz-inhoud .zz-fotoreeks img { aspect-ratio: 4 / 3; object-fit: cover; }
.zz-inhoud .zz-fotoreeks figure:first-child img { aspect-ratio: 16 / 9; }
@media (max-width: 560px) { .zz-inhoud .zz-fotoreeks { grid-template-columns: 1fr; } }
.zz-inhoud .zz-knipsel { max-width: 420px; margin-left: auto; margin-right: auto; background: var(--papier); padding: 14px 14px 10px; box-shadow: var(--schaduw-m); rotate: -1.2deg; border-radius: 4px; }
.zz-inhoud .zz-knipsel img { border-radius: 2px; filter: sepia(.2) contrast(1.05); }
.zz-inhoud .zz-knipsel figcaption { border: 0; padding: 8px 0 0; font-size: 13px; }
.zz-inhoud .zz-klassen { list-style: none; padding: 0; display: grid; gap: 0; border-left: 3px solid var(--meer-bleek); margin: 2em 0; }
.zz-inhoud .zz-klassen li { position: relative; padding: 12px 0 12px 26px; margin: 0; }
.zz-inhoud .zz-klassen li::before { content: ''; position: absolute; left: -9px; top: 20px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--wimpel); }
.zz-inhoud .zz-klassen strong { display: block; font-family: var(--font-display); font-size: 21px; color: var(--nacht); }

.zz-bronnen { margin: 50px 0 30px; padding: 26px 28px; border-radius: var(--r-l); background: var(--zand); font-size: 15px; color: var(--inkt-zacht); }
.zz-bronnen h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; color: var(--nacht); }
.zz-bronnen p { margin: 0; }
.zz-artikel__deel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 30px; border-radius: var(--r-l); background: var(--nacht); color: #fff; }
.zz-artikel__deel h2 { font-size: 24px; margin-bottom: 4px; }
.zz-artikel__deel p { margin: 0; color: rgba(255,255,255,.75); }

.zz-vorigvolgend { padding: 40px 0; }
.zz-vorigvolgend__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.zz-vorigvolgend__link { position: relative; display: flex; align-items: flex-end; min-height: 240px; border-radius: var(--r-l); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; }
.zz-vorigvolgend__link:hover { color: #fff; }
.zz-vorigvolgend__beeld { position: absolute; inset: 0; z-index: -1; }
.zz-vorigvolgend__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.zz-vorigvolgend__beeld::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,34,48,.9), rgba(13,34,48,.25)); transition: background .4s; }
.zz-vorigvolgend__link:hover img { transform: scale(1.06); }
.zz-vorigvolgend__tekst { display: grid; gap: 6px; padding: 28px; }
.zz-vorigvolgend__link--volgende .zz-vorigvolgend__tekst { margin-left: auto; text-align: right; justify-items: end; }
.zz-vorigvolgend__richting { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wimpel-licht); }
.zz-vorigvolgend__richting .zz-icon { width: 16px; }
.zz-vorigvolgend__tekst strong { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); line-height: 1.2; }
.zz-vorigvolgend__tekst > span:last-child { font-size: 14px; opacity: .75; }
@media (max-width: 700px) { .zz-vorigvolgend__raster { grid-template-columns: 1fr; } .zz-vorigvolgend__leeg { display: none; } }
.zz-gerelateerd { padding: 40px 0 var(--sectie); }

/* =====================================================================
   FORMULIER
   ===================================================================== */
.zz-zoeklijst { list-style: none; padding: 0; margin: 30px 0; display: grid; gap: 22px; }
.zz-zoeklijst li { display: flex; gap: 16px; align-items: flex-start; }
.zz-zoeklijst .zz-icon { flex: none; width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: var(--wimpel-bleek); color: var(--wimpel-donker); }
.zz-zoeklijst strong { font-family: var(--font-display); font-size: 20px; }
.zz-zoeklijst p { margin: 2px 0 0; color: var(--inkt-zacht); font-size: 15.5px; }
.zz-formulier { padding: clamp(26px, 4vw, 44px); border-radius: var(--r-l); background: #fff; box-shadow: var(--schaduw-l); display: grid; gap: 18px; }
.zz-formulier__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.zz-formulier__kop h2 { font-size: 28px; margin: 0; }
.zz-veld { display: grid; gap: 7px; border: 0; padding: 0; margin: 0; }
.zz-veld > label, .zz-veld legend { font-size: 14px; font-weight: 700; }
.zz-veld input[type=text], .zz-veld input[type=email], .zz-veld select, .zz-veld textarea {
    width: 100%; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--lijn); background: var(--lucht); font: inherit; font-size: 16px; color: var(--inkt); transition: border-color .25s, background .25s, box-shadow .25s;
}
.zz-veld input:focus, .zz-veld select:focus, .zz-veld textarea:focus { outline: 0; border-color: var(--meer); background: #fff; box-shadow: 0 0 0 4px var(--meer-bleek); }
.zz-veld--keuze { display: flex; flex-wrap: wrap; gap: 8px; }
.zz-veld--keuze legend { width: 100%; margin-bottom: 7px; }
.zz-veld--keuze label { position: relative; }
.zz-veld--keuze input { position: absolute; opacity: 0; }
.zz-veld--keuze span { display: inline-block; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--lijn); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .25s, color .25s; }
.zz-veld--keuze input:checked + span { background: var(--nacht); color: #fff; box-shadow: none; }
.zz-veld--keuze input:focus-visible + span { outline: 3px solid var(--wimpel); outline-offset: 2px; }
.zz-veld--bestand label { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 12px; border: 2px dashed var(--meer-licht); background: var(--lucht); cursor: pointer; font-weight: 600; }
.zz-veld--bestand small { font-weight: 400; color: var(--inkt-zacht); }
.zz-veld--bestand input { font-size: 14px; }
.zz-veld--check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.zz-veld--check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--wimpel); }
.zz-formulier__melding { margin: 0; padding: 16px 18px; border-radius: 12px; background: var(--wimpel-bleek); color: var(--wimpel-donker); font-weight: 600; }
.zz-formulier__melding.is-fout { background: #fdecea; color: #a12a1b; }

/* Gravity Forms "Deel je verhaal" in de huisstijl */
.zz-formulier .gform_wrapper.gravity-theme { margin: 0; }
.zz-formulier .gform_wrapper.gravity-theme .gform_fields { row-gap: 20px; }
.zz-formulier .gform_wrapper.gravity-theme .gfield_label, .zz-formulier .gform_wrapper.gravity-theme legend.gfield_label { font-size: 14px; font-weight: 700; margin-bottom: 7px; padding: 0; color: var(--inkt); }
.zz-formulier .gform_wrapper.gravity-theme .gfield_required { color: var(--wimpel-donker); font-weight: 600; font-size: 12px; }
.zz-formulier .gform_wrapper.gravity-theme input[type=text], .zz-formulier .gform_wrapper.gravity-theme input[type=email], .zz-formulier .gform_wrapper.gravity-theme select, .zz-formulier .gform_wrapper.gravity-theme textarea {
    width: 100%; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--lijn); background: var(--lucht); font: inherit; font-size: 16px; color: var(--inkt); line-height: 1.4; transition: border-color .25s, background .25s, box-shadow .25s; }
.zz-formulier .gform_wrapper.gravity-theme select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d4e63' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.zz-formulier .gform_wrapper.gravity-theme textarea { min-height: 160px; }
.zz-formulier .gform_wrapper.gravity-theme textarea.large { height: 180px; }
.zz-formulier .gform_wrapper.gravity-theme input:focus, .zz-formulier .gform_wrapper.gravity-theme select:focus, .zz-formulier .gform_wrapper.gravity-theme textarea:focus { outline: 0; border-color: var(--meer); background: #fff; box-shadow: 0 0 0 4px var(--meer-bleek); }
.zz-formulier .gform_wrapper.gravity-theme .gfield_description { font-size: 13.5px; color: var(--inkt-zacht); padding-top: 6px; }
.zz-formulier .gform_wrapper.gravity-theme .gfield_radio { display: flex; flex-wrap: wrap; gap: 8px; }
.zz-formulier .gform_wrapper.gravity-theme .gchoice { position: relative; margin: 0; }
.zz-formulier .gform_wrapper.gravity-theme .gchoice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zz-formulier .gform_wrapper.gravity-theme .gchoice label { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--lijn); font-size: 14px; font-weight: 600; cursor: pointer; max-width: none; transition: background .25s, color .25s; }
.zz-formulier .gform_wrapper.gravity-theme .gchoice input:checked + label { background: var(--nacht); color: #fff; box-shadow: none; }
.zz-formulier .gform_wrapper.gravity-theme .gchoice input:focus-visible + label { outline: 3px solid var(--wimpel); outline-offset: 2px; }
.zz-formulier .gform_wrapper.gravity-theme .gform_drop_area { padding: 26px 18px; border-radius: 14px; border: 2px dashed var(--meer-licht); background: var(--lucht); text-align: center; color: var(--inkt-zacht); }
.zz-formulier .gform_wrapper.gravity-theme .gform_drop_area::before { color: var(--meer); }
.zz-formulier .gform_wrapper.gravity-theme .gform_button_select_files { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--nacht); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.zz-formulier .gform_wrapper.gravity-theme .ginput_preview { font-size: 14px; padding: 6px 0; }
.zz-formulier .gform_wrapper.gravity-theme .ginput_container_consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; }
.zz-formulier .gform_wrapper.gravity-theme .ginput_container_consent input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--wimpel); }
.zz-formulier .gform_wrapper.gravity-theme .gform_footer { margin: 8px 0 0; padding: 0; }
.zz-formulier .gform_wrapper.gravity-theme .gform_footer input.gform_button, .zz-formulier .gform_wrapper.gravity-theme .gform_button { width: 100%; min-height: 54px !important; height: auto !important; line-height: 1.2 !important; padding: 0 26px; border: 0; border-radius: 999px; background: var(--wimpel-knop); color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; transition: background .3s, transform .3s var(--ease); }
.zz-formulier .gform_wrapper.gravity-theme .gform_footer input.gform_button:hover { background: var(--wimpel-donker); transform: translateY(-2px); }
.zz-formulier .gform_wrapper.gravity-theme .gform_validation_errors { border-radius: 12px; border: 0; background: #fdecea; box-shadow: none; padding: 14px 18px; margin-bottom: 18px; }
.zz-formulier .gform_wrapper.gravity-theme .gform_validation_errors h2 { font-family: var(--font-body); font-size: 15px; color: #a12a1b; }
.zz-formulier .gform_wrapper.gravity-theme .gfield_error input, .zz-formulier .gform_wrapper.gravity-theme .gfield_error textarea { border-color: #c0392b; }
.zz-formulier .gform_wrapper.gravity-theme .validation_message { background: none; border: 0; padding: 6px 0 0; color: #a12a1b; font-size: 13.5px; font-weight: 600; }
.zz-formulier .gform_confirmation_message { padding: 22px 24px; border-radius: 16px; background: var(--wimpel-bleek); color: var(--wimpel-donker); font-size: 16px; line-height: 1.6; }
.zz-formulier .gform_ajax_spinner { margin-left: 10px; }

.zz-lijstitem { padding: 24px 0; border-bottom: 1px solid var(--lijn); }

/* =====================================================================
   Touchschermen (telefoon en tablet)
   ===================================================================== */
@media (hover: none) {
    /* Geen "blijvende" hover-effecten na een tik */
    .zz-kaart:hover, .zz-activiteit:hover, .zz-tijdvak:hover, .zz-tegel:hover, .zz-knop:hover, .zz-galerij__gezocht:hover, a.zz-jaarbalk__maand.heeft:hover { transform: none; }
    .zz-mijlpaal:hover .zz-mijlpaal__kaart { transform: none; }
    .zz-kaart:hover .zz-kaart__beeld img, .zz-mozaiek__knop:hover img, .zz-galerij__knop:hover img, .zz-vorigvolgend__link:hover img { transform: none; }
    .zz-knop::before { display: none; }
    /* Actieve tik: korte, duidelijke feedback */
    .zz-kaart:active, .zz-tegel:active, .zz-knop:active, .zz-activiteit:active { transform: scale(.98); transition-duration: .1s; }
}
@media (pointer: coarse) {
    /* Tikvlakken van minimaal 44 pixels */
    .zz-filter__knop { min-height: 44px; padding: 10px 18px; }
    .zz-tijdlijn__nav a { min-height: 44px; display: flex; align-items: center; }
    .zz-voet ul { gap: 4px; }
    .zz-voet ul a { display: inline-flex; align-items: center; min-height: 40px; }
    .zz-tekstlink, .zz-kaart__cta, .zz-tijdvak__link, .zz-mijlpaal__verhaal { min-height: 44px; }
    .zz-terug { min-height: 44px; }
    .zz-tijdstrook__spoor { cursor: auto; }
}
/* Tablet en telefoon */
@media (max-width: 1040px) {
    .zz-kop__binnen { gap: 16px; }
    .zz-verhalen__kop { align-items: flex-start; }
    .zz-maandbalk { width: 100%; max-width: 520px; }
}
@media (max-width: 760px) {
    :root { --kop-h: 64px; }
    body { font-size: 16.5px; }
    .zz-sectiekop__titel { font-size: clamp(34px, 9vw, 48px); }
    .zz-paginahero { min-height: 0; padding-top: calc(var(--kop-h) + 48px); }
    .zz-paginahero__titel { font-size: clamp(38px, 11vw, 56px); }
    .zz-artikelhero { min-height: 78svh; }
    .zz-artikelhero__titel { font-size: clamp(34px, 10vw, 52px); }
    .zz-artikelhero__meta span { font-size: 13px; padding: 6px 12px; }
    .zz-inhoud { font-size: 17px; }
    .zz-inhoud .wp-block-pullquote p { font-size: 24px; }
    .zz-artikel__lead { font-size: 20px; }
    .zz-galerij { columns: 2; column-gap: 10px; }
    .zz-galerij > * { margin-bottom: 10px; }
    .zz-galerij__item figcaption { padding: 8px 10px 10px; font-size: 12.5px; }
    .zz-galerij__gezocht { padding: 18px 14px; }
    .zz-galerij__gezocht strong { font-size: 16px; }
    .zz-tijdvak { flex-basis: min(82vw, 320px); padding: 24px 22px; }
    .zz-tijdstrook__bediening { display: none; }
    .zz-activiteit { padding: 20px; gap: 14px; }
    .zz-activiteit__icoon { width: 46px; height: 46px; border-radius: 14px; }
    .zz-formulier { padding: 22px 18px; border-radius: 20px; }
    .zz-feitenkaart, .zz-legendakaart { position: static; padding: 24px; }
    .zz-stappen li, .zz-pijlers article { padding: 24px 22px; }
    .zz-oproep__tekst h2, .zz-slot__titel { font-size: clamp(32px, 9.5vw, 46px); }
    .zz-slot { min-height: 0; }
    .zz-marquee__spoor { font-size: clamp(28px, 9vw, 40px); }
}
@media (max-width: 380px) {
    :root { --gutter: 14px; }
    .zz-hero__knoppen .zz-knop { width: 100%; }
    .zz-cijfer dd { font-size: 40px; }
}
/* Telefoon gekanteld (laag scherm) */
@media (max-height: 520px) and (orientation: landscape) {
    .zz-hero { min-height: 0; }
    .zz-hero__inhoud { padding-top: calc(var(--kop-h) + 16px); }
    .zz-honderd { width: clamp(200px, 30vw, 320px); }
    .zz-menu { align-items: flex-start; }
    .zz-menu__nav a { font-size: 26px; padding: 6px 0; }
}
/* De tijdlijnnavigatie schuift mee als de kop wegschuift */
.kop-verborgen .zz-tijdlijn__nav { top: 0; }
@media (min-width: 901px) { .kop-verborgen .zz-tijdlijn__nav { top: 30px; } }
.zz-tijdlijn__nav { transition: top .5s var(--ease); }
.zz-lightbox__figuur img { max-height: calc(100dvh - 160px); }

/* =====================================================================
   Toegankelijkheid: minder beweging
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .zz-anim, .js [data-reveal] { opacity: 1 !important; transform: none !important; }
    .zz-honderd__omlijn { stroke-dashoffset: 0; }
    .zz-honderd__vul { opacity: 1; }
    .zz-marquee__spoor { animation: none; }
    .js [data-split] .zz-woord { opacity: 1; }
}

@media print {
    .zz-kop, .zz-menu, .zz-golven, .zz-voortgang, .zz-lightbox, .zz-artikel__deel { display: none !important; }
    .zz-artikelhero, .zz-paginahero, .zz-hero { min-height: 0; color: #000; background: none; padding: 20px 0; }
    .zz-artikelhero__beeld, .zz-paginahero__beeld, .zz-hero__beeld { position: static; }
}