/* ErgoRvN, site-v5 "De lijn" — GEGENEREERD uit site-v4 door maak-lijn-v5.py; wijzig site-v4 of het script.
   (oorspronkelijk: site-v4 "De boog", okt 2026)
   Eén terugkerend element: de boog uit het bruglogo. Witte basis, petrol als vlakkleur, oranje als accent.
   Lettertype Lexend (ontworpen voor leesgemak), zelf gehost. Zie PRODUCT.md en CLAUDE.md. */

@font-face{font-family:Lexend;src:url('/assets/lexend.woff2') format('woff2');font-weight:300 700;font-display:swap}

:root{
  --petrol:#153f48; --petrol-d:#0f3038; --teal:#247f85; --teal-d:#1f6f75; --teal-l:#7cc6ca;
  --oranje:#f4aa73; --oranje-d:#c96a2b; --mint:#eef6f2; --mint-r:#d6e7de;
  --wit:#fbfcfc; --vlak:#fff; --tekst:#3a5559; --lijn:#dde6e2;
  --r-l:28px; --r-m:18px; --r-s:12px;
  --schaduw:0 18px 48px #153f481a;
  --wrap:1180px;
  --bogen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 26'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='4'%3E%3Cpath d='M3 9H57' stroke='%23247f85'/%3E%3Cpath d='M3 18H57' stroke='%23f4aa73'/%3E%3C/g%3E%3C/svg%3E");
  --bogen-licht:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 26'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='4'%3E%3Cpath d='M3 9H57' stroke='%237cc6ca'/%3E%3Cpath d='M3 18H57' stroke='%23f4aa73'/%3E%3C/g%3E%3C/svg%3E");
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:Lexend,system-ui,sans-serif;font-size:17px;line-height:1.65;font-weight:400;color:var(--petrol);background:var(--wit);-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%}
a{color:var(--teal-d)}
h1,h2,h3{margin:0;font-weight:600;line-height:1.08;letter-spacing:-.025em;text-wrap:balance;color:var(--petrol)}
h1{font-size:clamp(2.3rem,5vw,4.2rem)}
h2{font-size:clamp(1.75rem,3.2vw,2.7rem)}
h3{font-size:1.28rem;line-height:1.25;letter-spacing:-.015em}
p{margin:0;text-wrap:pretty}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.section{padding-block:clamp(56px,8vw,104px)}
.skip{position:absolute;left:-999px;top:12px;z-index:30;background:var(--petrol);color:#fff;padding:10px 16px;border-radius:999px}
.skip:focus{left:16px}
:focus-visible{outline:3px solid var(--oranje-d);outline-offset:3px;border-radius:6px}
::selection{background:#f9d3b4;color:var(--petrol)}

/* iconen */
.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.icon.chev{width:16px;height:16px;transition:transform .25s var(--ease)}

/* ---------- de boog als element ---------- */
.boogje{display:inline-block;width:30px;height:15px;border:4px solid var(--oranje);border-bottom:0;border-radius:30px 30px 0 0;flex:none}
.section-head h2:before,.join-band h2:before,.kop-boog:before{content:"";display:block;width:48px;height:28px;background:var(--bogen) no-repeat center/contain;margin-bottom:16px}
.join-band h2:before{background-image:var(--bogen-licht)}
svg.bogen{position:absolute;pointer-events:none;overflow:visible}
svg.bogen path{fill:none;stroke-linecap:round;stroke-width:14}
svg.bogen .b1{stroke:var(--oranje);stroke-dasharray:420;animation:boog 1.6s var(--ease) .1s both}
svg.bogen .b2{stroke:var(--teal);stroke-dasharray:290;animation:boog 1.6s var(--ease) .3s both}
svg.bogen .b3{stroke:var(--petrol);stroke-dasharray:160;animation:boog 1.6s var(--ease) .5s both}
@keyframes boog{from{stroke-dashoffset:var(--l,420)}to{stroke-dashoffset:0}}
svg.bogen .b2{--l:290} svg.bogen .b3{--l:160}

/* ---------- kop en navigatie ---------- */
.header{position:sticky;top:0;z-index:20;background:#fbfcfcf2;backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid transparent;transition:border-color .2s}
.header.scrolled,.header:focus-within{border-bottom-color:var(--lijn)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px;position:relative}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--petrol)}
.brand-mark{display:block;width:96px;height:44px;flex:none}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.brand-wordmark{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:1px solid var(--lijn)}
.brand-discipline{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d)}
.brand-place{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.nav{display:flex;align-items:center;gap:4px}
.nav>a{position:relative;text-decoration:none;color:var(--petrol);font-size:15px;font-weight:450;padding:10px 14px;border-radius:999px;transition:background .2s}
.nav>a:not(.button):hover{background:var(--mint)}
.nav>a[aria-current=page]:not(.button):after{content:"";position:absolute;left:50%;bottom:1px;width:18px;height:9px;margin-left:-9px;border:3px solid var(--oranje);border-bottom:0;border-radius:18px 18px 0 0}
.nav .button{margin-left:6px;padding:10px 18px;min-height:44px;font-size:15px}
.menu-toggle{display:none;align-items:center;gap:8px;font:inherit;font-size:15px;font-weight:500;color:var(--petrol);background:var(--mint);border:1px solid var(--mint-r);border-radius:999px;padding:10px 16px;cursor:pointer}
@media(max-width:1020px){
  .menu-toggle{display:flex}
  .nav{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border:1px solid var(--lijn);border-radius:var(--r-m);padding:14px;box-shadow:var(--schaduw)}
  .nav.open{display:flex}
  .nav>a{padding:13px 16px;font-size:17px}
  .nav>a[aria-current=page]:not(.button):after{left:auto;right:18px;bottom:auto;top:20px;margin:0}
  .nav .button{margin:8px 0 0;justify-content:center}
}
@media(max-width:520px){.brand-mark{width:74px;height:34px}.brand-wordmark{padding-left:10px}.brand-discipline{font-size:10.5px}.brand-place{font-size:15px}.nav-wrap{min-height:70px}}

/* ---------- knoppen en links ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;border:1.5px solid var(--mint-r);background:var(--mint);color:var(--petrol);font:inherit;font-size:16px;font-weight:550;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.button:hover{transform:translateY(-1px);box-shadow:0 8px 22px #153f4818}
.button.orange{background:var(--oranje);border-color:var(--oranje);color:var(--petrol)}
.button.orange:hover{background:#f19e60}
.button.light{background:transparent;border-color:#9fbcbd;color:var(--petrol)}
.button:hover .chev,.text-link:hover .chev,.news-card:hover .chev{transform:translateX(3px)}
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:550;color:var(--teal-d);text-decoration:none;border-bottom:1.5px solid #9fcfcf;padding-bottom:2px}
.text-link:hover{border-bottom-color:var(--oranje)}

/* ---------- homepage: hero met boogvenster ---------- */
.hero-boog{padding:clamp(28px,5vw,64px) 0 clamp(48px,7vw,96px);overflow:hidden}
.hero-boog .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.hero-boog h1{font-size:clamp(2.6rem,6vw,5.2rem);line-height:1.02;letter-spacing:-.035em}
.hero-boog h1 span{color:var(--teal)}
.hero-boog .hero-tekst p{font-size:clamp(17px,1.6vw,20px);color:var(--tekst);max-width:34ch;margin-top:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.boograam{position:relative;margin:0;aspect-ratio:6/5;max-width:600px;justify-self:end;width:100%}
.boograam img{position:absolute;left:4%;top:4.8%;width:92%;height:95.2%;object-fit:cover;object-position:50% 30%;border-radius:50% 50% 16px 16px / 34% 34% 16px 16px}
.boograam svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.boograam svg path{fill:none;stroke-linecap:round}
.boograam .r1{stroke:var(--oranje);stroke-width:7;stroke-dasharray:1700;animation:boog 2s var(--ease) .2s both;--l:1700}
.boograam figcaption{position:absolute;left:0;bottom:-34px;font-size:13px;color:var(--tekst)}
.hero-stip{position:absolute;right:-7px;top:36%;width:26px;height:26px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 8px #fbfcfc}
@media(max-width:860px){.hero-boog .hero-grid{grid-template-columns:1fr}.boograam{justify-self:center;max-width:420px;margin-top:8px}}

/* ---------- paginakop ---------- */
.page-top{position:relative;overflow:hidden;padding:clamp(40px,6vw,84px) 0 clamp(36px,5vw,64px);border-bottom:1px solid var(--lijn)}
.page-top .wrap{position:relative;z-index:1}
.page-top h1{max-width:15ch}
.page-top .lead{font-size:clamp(17px,1.6vw,20px);color:var(--tekst);max-width:52ch;margin-top:20px}
.page-top .button{margin-top:26px}
.page-top svg.bogen{right:max(20px,calc((100% - var(--wrap))/2));bottom:-2px;width:min(300px,30vw);height:auto}
.crumb{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--tekst);margin-bottom:22px}
.crumb a{color:var(--teal-d);text-decoration:none}
.crumb a:hover{text-decoration:underline}
@media(max-width:720px){.page-top svg.bogen{width:150px;opacity:.9;bottom:-2px;right:12px}.page-top h1{padding-right:0}}

/* ---------- sectiekoppen ---------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.section-head p{color:var(--tekst);max-width:56ch;margin-top:14px;font-size:18px}
.eyebrow{display:none}

/* ---------- film ---------- */
.film-sectie{padding-top:0}
.film-sectie .section-head{margin-bottom:28px}
.film-kader{position:relative;margin:0;max-width:1040px}
.film-kader:before{content:"";position:absolute;right:-20px;top:-46px;width:132px;height:77px;background:var(--bogen) no-repeat center/contain;z-index:0}
.film-kader video{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r-l);background:var(--petrol);box-shadow:var(--schaduw)}
.film-tekst{max-width:1040px;margin-top:16px;font-size:15px;color:var(--tekst)}
.film-tekst summary{cursor:pointer;font-weight:550;color:var(--teal-d);width:max-content;max-width:100%}
.film-tekst p{margin-top:10px;line-height:1.75}
@media(max-width:620px){.film-kader:before{width:80px;height:47px;right:-4px;top:-30px}}

/* ---------- regio-kaart ---------- */
.region-section{padding-bottom:clamp(56px,8vw,104px)}
.region-section .section-head{margin-bottom:28px}
.region-accent{color:var(--teal)}
.region-atlas{background:var(--mint);border-radius:var(--r-l);padding:clamp(18px,3vw,34px)}
.atlas-topline{display:flex;justify-content:space-between;font-size:14px;color:var(--petrol);font-weight:500;margin-bottom:6px}
.atlas-count{color:var(--tekst);font-weight:400}
.region-map{display:block;width:100%;height:auto}
.region-area{cursor:pointer}
.region-boundary{fill:url(#region-fill);stroke:#7fa79c;stroke-width:1.2;vector-effect:non-scaling-stroke;transition:fill .25s}
.region-area:not(.is-selected):hover .region-boundary{fill:#bfdccc}
.region-area.is-selected .region-boundary{fill:url(#region-selected-fill);stroke:#c1874d}
.region-label{fill:var(--petrol);pointer-events:none}
.region-name{font-size:17px;font-weight:600;paint-order:stroke;stroke:#eef6f2;stroke-width:4px;stroke-linejoin:round}
.region-label-dot{fill:var(--teal)}
.region-map-number{display:none}
.atlas-north{fill:var(--tekst);font-size:12px}
.atlas-north path{stroke:var(--tekst);stroke-width:1.2;fill:none}
.region-controls{margin-top:14px}
.region-hint{font-size:14px;color:var(--tekst);margin-bottom:10px}
.municipality-picker{display:flex;flex-wrap:wrap;gap:8px}
.municipality-button{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;color:var(--petrol);background:#fff;border:1px solid var(--mint-r);border-radius:999px;padding:8px 14px;cursor:pointer}
.municipality-button:hover{border-color:var(--teal)}
.municipality-button[aria-pressed=true]{background:#fff1e4;border-color:var(--oranje);color:#7a4219}
.municipality-number{font-size:12px;font-weight:600;color:var(--teal-d)}
.region-selection{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:15px;color:var(--tekst)}
.region-selection strong{color:#8a4a1f}
.region-selection-dot{width:10px;height:10px;border-radius:50%;background:var(--oranje)}
.region-source{font-size:13px;color:var(--tekst);margin-top:12px}
.region-source a{color:var(--teal-d)}

/* ---------- nieuws ---------- */
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.news-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
.news-card:hover{transform:translateY(-3px);box-shadow:var(--schaduw)}
.news-art{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:24px 24px 0;min-height:118px}
.news-art .month{display:grid;place-items:end center;min-width:96px;height:76px;padding:0 14px 8px;border-radius:999px 999px 10px 10px;background:var(--mint);color:var(--teal-d);font-size:22px;font-weight:600;letter-spacing:-.01em}
.news-card.featured .news-art .month{background:var(--oranje);color:var(--petrol)}
.tag{font-size:13px;color:var(--tekst);background:var(--mint);border-radius:999px;padding:4px 12px;align-self:flex-start}
.news-body{display:flex;flex-direction:column;gap:10px;padding:20px 24px 24px;flex:1}
.news-body p{color:var(--tekst);font-size:16px}
.news-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;font-size:14px;color:var(--tekst)}
.circle-arrow{color:var(--teal-d)}

/* ---------- missie-band (homepage, bestuur, over) ---------- */
.mission{background:var(--mint)}
.mission .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start}
.mission .split h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.mission .split p{color:var(--tekst);font-size:18px}
.mission .text-link{margin-top:20px}
.principles{list-style:none;padding:0;margin:clamp(36px,5vw,56px) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px 40px}
.principle{position:relative;padding-top:30px}
.principle:before{content:"";position:absolute;left:0;top:0;width:40px;height:23px;background:var(--bogen) no-repeat center/contain}
.principle .number{display:none}
.principle h3{margin-bottom:8px}
.principle p{color:var(--tekst);font-size:16px}
@media(max-width:760px){.mission .split{grid-template-columns:1fr}}

/* ---------- lid-worden band ---------- */
.join-band{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:var(--petrol);color:#fff;border-radius:var(--r-l);padding:clamp(32px,5vw,56px) clamp(24px,5vw,64px);margin-block:clamp(48px,7vw,88px)}
.join-band h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.join-band p{color:#cfe2df;max-width:52ch;margin-top:10px}
.join-band:after{content:"";position:absolute;right:-60px;bottom:-140px;width:300px;height:300px;border:26px solid #ffffff10;border-radius:50%;pointer-events:none}
.join-band>*{position:relative;z-index:1}

/* ---------- tekstpagina's ---------- */
.body-aside{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,72px);align-items:start}
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:48px}
.prose h2:first-child,.prose .article-date+h2{margin-top:0}
.prose h3{margin-top:28px}
.prose p{margin-top:18px;color:var(--tekst)}
.prose ul{color:var(--tekst);padding-left:22px}
.prose a:not(.button){color:var(--teal-d)}
.article-date{display:inline-block;font-size:14px;font-weight:500;color:var(--teal-d);margin-bottom:16px}
.article-back{margin-top:40px}
.article-back .arrow{margin-right:4px}
.aside{position:relative;background:#fff;border:1px solid var(--lijn);border-radius:var(--r-l);padding:30px 28px;box-shadow:0 10px 30px #153f480d}
.aside:before{content:"";display:block;width:40px;height:23px;background:var(--bogen) no-repeat center/contain;margin-bottom:16px}
.aside h3{margin-bottom:8px}
.aside p{color:var(--tekst);font-size:16px;margin-bottom:14px}
.aside hr{border:0;border-top:1px solid var(--lijn)!important;margin:26px 0!important}
.contact-address{display:inline-block;font-weight:550;color:var(--teal-d);margin-bottom:6px;word-break:break-all}
.notice{background:#fff4e8;border:1px solid #f1d2b5;border-radius:var(--r-m);padding:16px 20px;color:#5a4a3c;font-size:16px}
.notice strong{color:#8a4a1f}
@media(max-width:900px){.body-aside{grid-template-columns:1fr}}

/* foto's: boogvenster */
.page-visual{padding-top:clamp(32px,5vw,56px)}
.page-visual figure{position:relative;margin:0 auto;max-width:900px}
.page-visual figure:before{display:none}   /* de paginakop heeft al bogen; dubbel werd te druk */
.page-visual img{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:var(--r-l)}
.page-visual figcaption{margin-top:14px;font-size:14px;color:var(--tekst);text-align:center}
.prose-visual{margin:26px 0 8px;background:var(--mint);border-radius:var(--r-l);padding:12px}
.prose-visual img{display:block;width:100%;height:auto;border-radius:var(--r-m)}

/* missie en visie */
.missie-visie{position:relative;display:grid;gap:22px;margin:26px 0 8px;padding:32px 150px 32px 34px;background:var(--mint);border-radius:var(--r-l)}
.missie-visie:after{content:"";position:absolute;right:30px;top:30px;width:96px;height:56px;background:var(--bogen) no-repeat center/contain}
@media(max-width:620px){.missie-visie{padding:76px 22px 26px}.missie-visie:after{left:22px;right:auto;top:24px;width:66px;height:38px}}
.mv-deel+.mv-deel{padding-top:22px;border-top:1px solid var(--mint-r)}
.mv-label{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--teal-d)}
.mv-label:before{content:"";width:30px;height:18px;background:var(--bogen) no-repeat center/contain}
.prose .missie-visie p{margin-top:10px;color:var(--petrol);font-size:clamp(18px,1.8vw,21px);line-height:1.6;font-weight:400}

/* voorbeelden: lijst met boogtegels i.p.v. kaarten */
.voorbeelden .principles{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:36px 56px}
.voorbeelden .principle{display:grid;grid-template-columns:64px 1fr;gap:4px 20px;padding-top:0}
.voorbeelden .principle:before{display:none}
.voorbeelden .vb-icon{grid-row:span 3;display:grid;place-items:center;width:64px;height:72px;border-radius:999px 999px 14px 14px;background:var(--mint);color:var(--teal)}
.voorbeelden .vb-icon .icon{width:30px;height:30px;stroke-width:1.5;margin-top:6px}
.voorbeelden .principle h3{margin:2px 0 0}
.voorbeelden .principle p{font-size:16px}
.praktijk-strip{margin:0 0 clamp(36px,5vw,56px)}
.ps-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;max-width:900px}
.ps-grid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px}
.praktijk-strip figcaption{margin-top:12px;font-size:14px;color:var(--tekst)}
@media(max-width:620px){.ps-grid{grid-template-columns:repeat(3,1fr)}}

/* bestuur */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
.person{display:flex;align-items:center;gap:18px}
.portrait{display:grid;place-items:center;width:84px;height:96px;flex:none;border-radius:999px 999px 16px 16px;background:var(--mint)}
.person:nth-child(2) .portrait{background:#fff1e4}
.initials{font-size:24px;font-weight:600;color:var(--teal-d)}
.person:nth-child(2) .initials{color:#8a4a1f}
.role{display:block;font-size:14px;font-weight:500;color:var(--teal-d)}
.person h3{margin-top:2px}
.person p{font-size:15px;color:var(--tekst)}
.functies .principles{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:36px 48px}
.functies .principle .number{display:block;font-size:14px;font-weight:500;color:var(--teal-d);margin-bottom:6px}
.functies .principle ul{margin:12px 0 0;padding-left:18px;color:var(--tekst);font-size:15.5px;line-height:1.6}
.functies .principle li+li{margin-top:6px}
.functies .kwaliteiten{margin-top:14px!important;font-size:14.5px!important}

/* lid worden */
.lid-voordelen .principles{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.lid-contributie{margin-top:36px}
.lid-formkop{margin-bottom:22px}

/* ALV-blok */
.alv-info{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin:22px 0 8px;padding:22px 26px;background:var(--mint);border-radius:var(--r-m)}
.alv-info dt{font-weight:600;color:var(--teal-d)}
.alv-info dd{margin:0}
@media(max-width:520px){.alv-info{grid-template-columns:1fr;gap:2px}.alv-info dd{margin-bottom:10px}}

/* formulieren */
.form{display:grid;gap:18px;background:#fff;border:1px solid var(--lijn);border-radius:var(--r-l);padding:clamp(22px,3vw,34px)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px}
.field label{font-size:15px;font-weight:500;color:var(--petrol)}
.field input,.field textarea,.field select{font:inherit;font-size:16px;color:var(--petrol);background:#fff;border:1.5px solid #bccfca;border-radius:var(--r-s);padding:12px 14px;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px #247f851f}
.helper{font-size:14px;color:var(--tekst);font-weight:400}
.form .button{justify-self:start}
.status:empty{display:none}
.status{background:var(--mint);border-radius:var(--r-s);padding:12px 16px;font-size:15px;color:#2d5544}
@media(max-width:620px){.form-row{grid-template-columns:1fr}}

/* ledenpagina */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.member-panel{position:relative;background:var(--petrol);color:#fff;border-radius:var(--r-l);padding:clamp(28px,4vw,44px)}
.member-panel>.icon{width:40px;height:40px;color:var(--teal-l);margin-bottom:18px}
.member-panel h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem)}
.member-panel p{color:#cfe2df;margin-top:14px}
.member-panel .button{margin-top:24px}
.member-panel .tag{background:#28535d!important;color:#d8eef0!important}
.member-list{display:grid;gap:26px}
.member-item{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start}
.member-item>.icon{width:56px;height:62px;padding:16px 13px 10px;border-radius:999px 999px 12px 12px;background:var(--mint);color:var(--teal)}
.member-item p{color:var(--tekst);font-size:16px;margin-top:4px}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* privacy: beeldbronnen */
.image-source{font-size:15px}

/* ---------- footer ---------- */
.footer{position:relative;overflow:hidden;background:var(--petrol);color:#cfe2df;margin-top:clamp(48px,7vw,96px)}
.footer:before{content:"";position:absolute;right:-80px;top:-160px;width:420px;height:420px;border-radius:50%;border:34px solid #ffffff0c;pointer-events:none}
.footer:after{content:"";position:absolute;right:30px;top:-60px;width:220px;height:220px;border-radius:50%;border:22px solid #f4aa7322;pointer-events:none}
.footer .wrap{position:relative;z-index:1;padding:56px 0 30px}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.footer-title{display:flex;align-items:center;gap:16px}
.footer-mark-stage{display:grid;place-items:center;width:132px;height:70px;background:#fff;border-radius:14px;padding:10px 14px}
.footer-mark{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.footer-name{display:flex;flex-direction:column;gap:3px}
.footer-name .brand-discipline{color:var(--teal-l)}
.footer-name .brand-place{color:#fff;font-size:20px}
.footer-top p{margin-top:16px;max-width:36ch}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 26px}
.footer-links a{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-weight:450}
.footer-links a:hover{color:var(--oranje)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid #ffffff22;font-size:14px}
.footer-bottom a{color:#fff}
.footer-bottom a:hover{color:var(--oranje)}

/* ---------- beweging ---------- */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  svg.bogen path,.boograam svg path{stroke-dashoffset:0!important}
}
@media print{.header,.footer,.film-sectie{display:none}}

/* minder bogen (feedback 15-10-2026: "leuk als het er is, maar niet continu"): alleen paginakop, hero, missie/visie, Word lid-band, footer en film */
.section-head h2:before,.principle:before,.aside:before,.mv-label:before{display:none}
.principle{padding-top:0}
.principles .principle h3{margin-top:0}
.join-band h2:before{display:block}

/* ===== homepage in de beeldtaal van de boogfilm (15-10-2026) ===== */
/* tekenen: standaard getekend; app.js zet .wacht (leeg) en .getekend (tekent) zodra het element in beeld komt */
.teken [pathLength]{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--ease)}
.teken.wacht [pathLength]{stroke-dashoffset:1}
.teken.wacht.getekend [pathLength]{stroke-dashoffset:0}
.teken.klaar [pathLength]{transition:none!important;stroke-dashoffset:0!important}
.merk{display:block;width:min(560px,82vw);height:auto;margin:0 auto;overflow:visible}
.merk path{fill:none;stroke-linecap:round;stroke-width:40}
.merk .m1{stroke:var(--oranje)} .merk .m2{stroke:var(--teal);transition-delay:.18s} .merk .m3{stroke:var(--petrol);transition-delay:.36s}

.hero-merk{padding:clamp(40px,6vw,80px) 0 clamp(56px,8vw,100px);text-align:center}
.hero-merk h1{font-size:clamp(2.8rem,6.4vw,5.4rem);line-height:1.02;letter-spacing:-.035em;margin-top:clamp(20px,3vw,34px)}
.hero-merk h1 span{color:var(--teal)}
.hero-merk p{font-size:clamp(17px,1.7vw,21px);color:var(--tekst);max-width:38ch;margin:20px auto 0}
.hero-merk .hero-actions{justify-content:center}

.netwerk{background:#fff;border-block:1px solid var(--lijn)}
.netwerk .section-head{justify-content:center;text-align:center}
.netwerk .section-head p{margin-inline:auto}
.netwerk-beeld{display:block;width:100%;height:auto;max-width:1180px;margin:0 auto;overflow:visible}
.netwerk-beeld .grootboog{fill:none;stroke:var(--petrol);stroke-width:7;stroke-linecap:round;transition-delay:1.1s;transition-duration:1.6s}
.netwerk-beeld .brug{fill:none;stroke-width:7;stroke-linecap:round;transition-duration:.6s}
.netwerk-beeld .b0{stroke:var(--oranje)} .netwerk-beeld .b1{stroke:var(--teal)}
.netwerk-beeld .brug:nth-of-type(2){transition-delay:.1s}.netwerk-beeld .brug:nth-of-type(3){transition-delay:.2s}.netwerk-beeld .brug:nth-of-type(4){transition-delay:.3s}.netwerk-beeld .brug:nth-of-type(5){transition-delay:.4s}.netwerk-beeld .brug:nth-of-type(6){transition-delay:.5s}.netwerk-beeld .brug:nth-of-type(7){transition-delay:.6s}.netwerk-beeld .brug:nth-of-type(8){transition-delay:.7s}.netwerk-beeld .brug:nth-of-type(9){transition-delay:.8s}
.netwerk-beeld .prak circle{fill:#fff;stroke:var(--teal);stroke-width:5}
.netwerk-beeld .prak path{fill:none;stroke:var(--teal-d);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.netwerk-beeld .nw-naam{font-family:Lexend,sans-serif;font-size:104px;font-weight:600;letter-spacing:-3px;fill:var(--petrol)}
.netwerk-beeld .nw-sinds{font-family:Lexend,sans-serif;font-size:34px;fill:var(--tekst)}
.drieslag{list-style:none;padding:0;margin:clamp(28px,4vw,44px) auto 0;max-width:1060px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px 36px;color:var(--tekst);font-size:16px;text-align:center}
.drieslag b{display:block;color:var(--petrol);font-weight:600;font-size:17px;margin-bottom:4px}
@media(max-width:760px){.drieslag{grid-template-columns:1fr}}

.ramen{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:36px 24px}
.raam{text-align:center}
.raam-venster{display:grid;place-items:center;width:min(150px,100%);aspect-ratio:5/6;margin:0 auto 18px;background:var(--mint);border-radius:999px 999px 18px 18px;box-shadow:0 0 0 7px var(--wit),0 0 0 12px var(--oranje)}
.raam-venster svg{width:52%;height:auto;fill:none;stroke:var(--teal);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;margin-top:12%}
.raam h3{font-size:1.15rem}
.raam p{font-size:15px;color:var(--tekst);margin-top:6px}
.ramen-lang{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:44px 40px}
.ramen-lang .raam{text-align:left;display:grid;grid-template-columns:96px 1fr;gap:4px 22px;align-items:start}
.ramen-lang .raam-venster{grid-row:span 2;width:96px;margin:6px 0 0;box-shadow:0 0 0 5px var(--wit),0 0 0 9px var(--oranje)}
.ramen-lang .raam p{font-size:16px;margin-top:4px}

.bestuur-kort .kort-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.bestuur-kort .boograam{justify-self:start}
.bestuur-kort .namen{font-size:20px;font-weight:500;color:var(--teal-d);margin-top:14px}
.bestuur-kort .kort-tekst>p:not(.namen){color:var(--tekst);margin-top:14px;max-width:44ch}
.bestuur-kort .text-link{margin-top:22px}
.boograam.teken .r1{animation:none;transition-duration:2s}
@media(max-width:860px){.bestuur-kort .kort-grid{grid-template-columns:1fr}.bestuur-kort .boograam{justify-self:center}}

.slot{text-align:center;padding-bottom:clamp(40px,6vw,72px)}
.merk-klein{width:min(300px,60vw)}
.merk-klein path{stroke-width:44}
.slot h2{font-size:clamp(2.2rem,5vw,4rem);line-height:1.04;margin-top:26px}
.slot h2 span{color:var(--teal)}
.slot p{color:var(--tekst);max-width:46ch;margin:18px auto 26px;font-size:18px}
.home-slot+.footer{margin-top:0}
@media(prefers-reduced-motion:reduce){.teken [pathLength]{stroke-dashoffset:0!important;transition:none!important}}

/* ===== optie: de drie bogen als logo (standaard); ?logo=brug toont het bruglogo (15-10-2026) ===== */
.logo-bogen{display:block;width:100%;height:100%;overflow:visible}
.brand-mark:has(.logo-bogen){width:78px;height:42px}
html:not(.logo-brug) .logo-brug{display:none!important}
html.logo-brug .logo-bogen{display:none!important}
html.logo-brug .brand-mark{width:96px;height:44px}
.footer-mark-stage:has(.footer-bogen){width:92px;height:50px;background:none;padding:0;border-radius:0}
html.logo-brug .footer-mark-stage{width:132px;height:70px;background:#fff;border-radius:14px;padding:10px 14px}
@media(max-width:520px){.brand-mark:has(.logo-bogen){width:62px;height:34px}}

/* hero-beeldmerk: tekent zich bij het laden (zoals de bogen in de paginakop) */
.hero-merk .merk path{stroke-dasharray:1;animation:merk 1.6s var(--ease) both}
.hero-merk .merk .m2{animation-delay:.18s}.hero-merk .merk .m3{animation-delay:.36s}
@keyframes merk{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* feedback Niels 15-10-2026 (3) */
.film-kader:before{display:none}                                   /* geen bogen rechtsboven de film */
.nav>a[aria-current=page]:not(.button):after{bottom:auto;top:-3px} /* boogje bóven het actieve menu-item */
@media(max-width:1020px){.nav>a[aria-current=page]:not(.button):after{top:20px;bottom:auto}}
/* Over ErgoRvN: boogvenster boven de tekst, drie brede kolommen (zoals op de homepage) */
.ramen-lang{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:52px 44px}
.ramen-lang .raam{display:block;text-align:left}
.ramen-lang .raam-venster{width:104px;margin:0 0 22px 6px;box-shadow:0 0 0 6px var(--wit),0 0 0 11px var(--oranje)}
.ramen-lang .raam h3{font-size:1.25rem}
.ramen-lang .raam p{font-size:16px;line-height:1.65;margin-top:8px;max-width:40ch}

/* Over ErgoRvN: missie en visie als eigen band (feedback 15-10-2026: "mogen duidelijker") */
.mv-band{background:var(--mint);text-align:center;margin-top:clamp(40px,6vw,72px)}
.merk-mini{width:min(170px,40vw)}
.merk-mini path{stroke-width:48}
.mv-band h2{margin-top:22px;font-size:clamp(2rem,4vw,3.2rem)}
.mv-twee{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:clamp(32px,4vw,52px);text-align:left}
.mv-blok{background:#fff;border-radius:var(--r-l);padding:clamp(26px,3.4vw,44px)}
.mv-blok h3{font-size:clamp(1.4rem,2.2vw,1.8rem);color:var(--teal)}
.mv-blok p{margin-top:14px;font-size:clamp(18px,1.7vw,22px);line-height:1.6;color:var(--petrol)}
@media(max-width:820px){.mv-twee{grid-template-columns:1fr}}

/* verenigingsstukken op /leden/ (20-10-2026) */
.stukken-lijst{list-style:none;padding:0;margin:0;display:grid;gap:14px;max-width:760px}
.stuk{display:grid;grid-template-columns:52px 1fr auto;gap:18px;align-items:center;padding:16px 20px;border:1px solid #d6e7de;border-radius:18px;background:#fff;color:#153f48;text-decoration:none;transition:background .2s,border-color .2s}
.stuk:hover{background:#eef6f2;border-color:#b9d6cc}
.stuk:focus-visible{outline:3px solid #f4aa73;outline-offset:3px}
.stuk>.icon:first-child{width:52px;height:52px;padding:13px;margin:0;border-radius:14px;background:#eef6f2;color:#247f85}
.stuk strong{display:block;font-size:1.1rem;font-weight:600;line-height:1.3}
.stuk small{display:block;margin-top:3px;color:#3e5a5e;font-size:15px}
.stuk .pijl{width:22px;height:22px;margin:0;color:#1f6f75}
.stukken-noot{margin-top:18px;max-width:62ch;color:#3e5a5e;font-size:14px}
@media(max-width:520px){.stuk{grid-template-columns:44px 1fr auto;gap:14px;padding:14px 16px}.stuk>.icon:first-child{width:44px;height:44px;padding:11px}}
.member-panel p a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ledenpagina (20-10-2026) */
.leden-taken{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px 32px}
.member-item p a{color:var(--teal-d)}


/* ===== site-v5 "De lijn": de dubbele golflijn uit het logo als element ===== */
/* menu: actieve pagina met het tweekleurige streepje (teal + oranje), hetzelfde element als de footerrand (keuze Niels 20-10) */
.nav>a[aria-current=page]:not(.button){font-weight:600}
.nav>a[aria-current=page]:not(.button):after{left:50%;right:auto;top:auto;bottom:2px;width:26px;height:5px;margin:0 0 0 -13px;border:0;border-radius:3px;background:linear-gradient(90deg,var(--teal) 0 60%,var(--oranje) 60%)}
@media(max-width:1020px){.nav>a[aria-current=page]:not(.button):after{left:auto;right:18px;top:50%;bottom:auto;margin:-2.5px 0 0}}
/* paginatitels op subpagina's: hetzelfde tweekleurige streepje eronder (keuze Niels 20-10) */
.page-top h1:after{content:"";display:block;width:64px;height:7px;margin-top:clamp(16px,2vw,22px);border-radius:4px;background:linear-gradient(90deg,var(--teal) 0 60%,var(--oranje) 60%)}
/* hero en slot: bruglogo; twee rechte lijnen (teal + oranje) lopen links en rechts het water van het logo in en vervagen daar
   (vorm "Horizon", keuze Niels 20-10). 62/633 = hoogte van het water boven de onderrand van het logo, 55/633 = tot waar de lijn het logo in loopt. */
.lijn-merk{--logo-w:min(440px,62vw);display:flex;align-items:flex-end;justify-content:center;width:100%;overflow:hidden}
.lijn-merk-klein{--logo-w:min(260px,52vw)}
.lijn-logo{display:block;width:var(--logo-w);height:auto;flex:none;mix-blend-mode:multiply;position:relative;z-index:1}
.horizon{flex:1 1 0;min-width:0;height:13px;margin-bottom:calc(var(--logo-w) * 62 / 633 - 6.5px);background:linear-gradient(var(--teal) 0 4px,transparent 4px 9px,var(--oranje) 9px 13px)}
.horizon-l{margin-right:calc(var(--logo-w) * -55 / 633);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - clamp(40px,30%,120px)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - clamp(40px,30%,120px)),transparent)}
.horizon-r{margin-left:calc(var(--logo-w) * -55 / 633);-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - clamp(40px,30%,120px)),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - clamp(40px,30%,120px)),transparent)}
.lijn-merk-klein .horizon{height:10px;margin-bottom:calc(var(--logo-w) * 62 / 633 - 5px);background:linear-gradient(var(--teal) 0 3px,transparent 3px 7px,var(--oranje) 7px 10px)}
.hero-lijn3{padding-top:clamp(36px,5vw,64px)}
.hero-lijn3 h1{margin-top:clamp(24px,3.6vw,40px)}
/* de lijnen komen vanuit het logo naar buiten */
.hero-lijn3 .horizon-l{animation:stroom-l 1.6s var(--ease) .3s both}
.hero-lijn3 .horizon-r{animation:stroom-r 1.6s var(--ease) .3s both}
@keyframes stroom-l{from{clip-path:inset(-4px -4px -4px 100%)}to{clip-path:inset(-4px)}}
@keyframes stroom-r{from{clip-path:inset(-4px 100% -4px -4px)}to{clip-path:inset(-4px)}}
/* netwerk: haltes langs de lijn */
.netwerk-beeld .lijn1,.netwerk-beeld .lijn2{fill:none;stroke-width:7;stroke-linecap:round;transition-duration:2s}
.netwerk-beeld .lijn1{stroke:var(--teal)} .netwerk-beeld .lijn2{stroke:var(--oranje);transition-delay:.3s}
/* vensters: afgeronde tegel (geen boog, geen golfje: feedback Niels 15-10) */
.raam-venster{aspect-ratio:1;border-radius:24px;box-shadow:none}
.raam-venster svg{margin-top:0}
.ramen-lang .raam-venster{box-shadow:none}
/* bestuur: gewone foto */
.lijnfoto{position:relative;margin:0;justify-self:start;width:100%;max-width:600px}
.lijnfoto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-l)}
@media(max-width:860px){.lijnfoto{justify-self:center}}
.mv-band h2{margin-top:0}
/* overige vormen: rustig afgerond */
.news-art .month{border-radius:16px;height:64px;place-items:center}
.portrait{border-radius:20px}
.member-item>.icon{border-radius:14px;height:56px;padding:13px}
/* Word lid-band: geen lijnen (feedback Niels 20-10: minder lijnen) */
.join-band:after,.join-band h2:before{display:none}
/* footer: tweekleurige rand bovenaan, teal + oranje (variant C "Accenten", keuze Niels 20-10) */
.footer:before{border:0;border-radius:0;left:0;right:0;top:0;width:auto;height:10px;background:linear-gradient(90deg,var(--teal) 0 72%,var(--oranje) 72%)}
.footer:after{display:none}
@media(prefers-reduced-motion:reduce){.hero-lijn3 .horizon{animation:none}}
/* formulieren: verstuurd via /api/formulier (22-10-2026) */
.form{position:relative}
.form .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.status.gelukt{background:var(--mint);border:1px solid var(--mint-r);color:var(--petrol);font-weight:500}
.status.mislukt{background:#fdf1e7;border:1px solid #f1cfb3;color:#6b3412}
.status.mislukt a{color:inherit;font-weight:600}
.form .button:disabled{opacity:.6;cursor:progress}

/* knop naar het besloten ledendeel op /leden/ (okt 2026) */
.leden-inlog{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:28px 0 8px;padding:22px 24px;border-radius:var(--r-m);background:var(--mint);border:1px solid var(--mint-r)}
.leden-inlog .button{margin:0;background:var(--petrol);border-color:var(--petrol);color:#fff}
.leden-inlog p{margin:0;flex:1 1 280px;color:var(--tekst)}