/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --navy:#0f2a4a; --red:#cc2936;
  --bg:#f6f8fb; --panel:#fff; --muted:#5e6b7a;
  --radius:18px; --shadow:0 10px 30px rgba(15,42,74,.08);
  --ring:0 0 0 4px rgba(204,41,54,.15);
  --gradient:
    radial-gradient(1200px 600px at 10% -10%, #ffdee2 0%, transparent 40%),
    radial-gradient(900px 500px at 110% 10%, #e2eeff 0%, transparent 35%),
    linear-gradient(180deg,#f9fbff,#eef3fb);
  /* afdelingskleuren */
  --miniclub:#6f42c1; --speelclub:#f6c000; --rakkers:#22c55e;
  --toppers:#cc2936; --kerels:#2563eb; --aspiranten:#f97316;
}

/* =========================================================
   BASE + UTILITIES
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth;}
html,body{max-width:100%;}       /* ⛔️ geen horizontale scroll */
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;color:#0d1b2a;background:var(--gradient);padding-top: 50px;}
a{color:var(--navy);text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(1200px,100% - 2rem);margin-inline:auto}
details>summary{overflow:hidden}                   /* summary breedtes temmen */

/* Tekstwrapping (lange mails/urls) */
.wrap, .meta, .contact, .meta a, .contact a, .leader h4, .vb-card h4{
  overflow-wrap:anywhere; word-break:break-word;
}

/* Decors (optioneel) */
.decors{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index: 0;}
.blob{position:absolute;filter:blur(40px);opacity:.35;transform:translateZ(0)}
.blob.one{background:#ffd1d6;width:420px;height:420px;border-radius:50%;top:-100px;left:-80px}
.blob.two{background:#cbe2ff;width:520px;height:520px;border-radius:50%;top:-120px;right:-120px}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{padding:.85rem 1.05rem;border-radius:14px;border:1px solid #e1e7ef;background:#fff;color:#0f172a;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}
.btn:hover{border-color:var(--red);box-shadow:var(--ring)}
.btn-primary{background:linear-gradient(180deg,#e03b4a,#cc2936);color:#fff;border-color:#cc2936}
.btn-outline{background:#fff;border-color:#ccd7e6}
.btn-small{padding:.5rem .85rem;border-radius:12px}

/* =========================================================
   NAV
   ========================================================= */
.nav{position:fixed;top:0;z-index:1000;background:rgba(255,255,255,.75);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid #e6ecf2;width: 100%;}
.nav-inner{display:flex;align-items:center;gap:1rem;padding:.7rem 0}
.logo{display:flex;align-items:center;gap:.7rem}
.logo-img{width:56px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.05))}
.logo-text strong{display:block;color:var(--navy);line-height:1}
.logo-text small{color:#6b7280}
.nav-links{margin-left:auto;display:flex;gap:.6rem;flex-wrap:wrap}
.chip{padding:.5rem .9rem;border-radius:999px;background:#f3f6fb;border:1px solid #e6ecf2;color:#263445;font-size:.95rem}
.chip:hover{border-color:var(--red);box-shadow:var(--ring)}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding:72px 0 32px}
.hero-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
@media (max-width:920px){.hero-wrap{grid-template-columns:1fr}}
.title{font-size:clamp(36px,6.5vw,66px);line-height:1.03;margin:0;font-weight:900;color:var(--navy)}
.lead{font-size:clamp(17px,2.2vw,21px);color:var(--muted);margin:12px 0 0}
.cta{display:flex;gap:.8rem;margin-top:18px}
.hero-card{overflow:hidden;border-radius:22px;border:1px solid #e6ecf2;box-shadow:var(--shadow);position:relative}
.hero-card .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.25))}
.hero-card .badge{position:absolute;top:12px;left:12px;background:#fff;border:1px solid #e6ecf2;border-radius:999px;padding:.4rem .7rem;font-weight:700;color:var(--red)}
.hero-img{width:100%;height:420px;object-fit:cover;display:block}

/* =========================================================
   SECTIONS
   ========================================================= */
section{padding:52px 0}
section h2{font-size:clamp(24px,3.5vw,36px);margin:.2rem 0 .9rem;color:var(--navy)}
.sub{color:var(--muted)}

/* =========================================================
   CARD SYSTEM (één bron)
   ========================================================= */
.card{
  --card-pad:20px; --card-bg:#fff; --card-b:#e6ecf2;
  --card-radius:16px; --card-shadow:0 8px 20px rgba(0,0,0,.05);
  background:var(--card-bg); border:1px solid var(--card-b);
  border-radius:var(--card-radius); box-shadow:var(--card-shadow);
  padding:var(--card-pad);
}
/* Ghost-variant voor afdelingen wrapper */
.afd.card{--card-bg:transparent;--card-b:transparent;--card-shadow:none;--card-pad:0}

/* =========================================================
   INFO CARDS
   ========================================================= */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:900px){.info-grid{grid-template-columns:1fr}}
.info-card{padding:18px}
.info-card h3{margin:.2rem 0 .5rem;color:#102a43}

/* Netter en max 3 op brede schermen */
#info .info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
@media (min-width:1200px){#info .info-grid{grid-template-columns:repeat(3,1fr)}}
#info .info-card{position:relative;padding:28px 22px 22px;border-radius:18px;background:#fff;border:1px solid #e6ecf2;box-shadow:0 8px 22px rgba(15,42,74,.08);transition:transform .18s, box-shadow .18s}
#info .info-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(15,42,74,.12)}
#info .info-card .icon{font-size:28px;color:var(--red);margin-bottom:10px}
#info .info-card h3{margin:0 0 12px;font-size:clamp(20px,2.3vw,26px);font-weight:800;color:var(--navy)}
#info .info-card p{margin:0;font-size:16px;line-height:1.55;color:#142536}
#info .dl{display:grid;gap:.5rem;margin:0}
#info .dl>div{display:grid;grid-template-columns:120px 1fr;gap:10px}
#info .dl dt{font-weight:700;color:#0f2a4a}
#info .dl dd{margin:0;color:#142536}

/* =========================================================
   AFDELINGEN
   ========================================================= */
.afd{margin:12px 0;border-radius:14px;overflow:hidden}
.afd summary{list-style:none;cursor:pointer;border:none;box-shadow:none}
.afd summary::-webkit-details-marker{display:none}
.afd summary .afd-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px}
.afd summary h3{margin:0;color:#102a43}
.afd summary .tag{font-size:.95rem;color:#445}
.afd .afd-body{padding:18px;background:transparent;border:none;box-shadow:none}

/* =========================================================
   LEIDING & VB’s (publieke site)
   ========================================================= */
.leiding-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:860px){.leiding-list{grid-template-columns:1fr}}

.leader, .vb-card{
  display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:center;
  padding:var(--card-pad);
}
.leader img, .vb-card img{
  width:150px;height:150px;object-fit:cover;border-radius:14px;border:1px solid #e6ecf2;
}
.leader h4{margin:.15rem 0 .35rem;font-size:1.15rem}
.meta{color:#2b3a4e;font-weight:600}

.vbs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:900px){.vbs-grid{grid-template-columns:1fr}}

/* Overzicht met grotere kaarten */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.leader-big{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:var(--card-pad)}
.leader-big img{width:140px;height:140px;object-fit:cover;border-radius:16px;border:1px solid #e6ecf2}
.role{font-weight:800;margin:.1rem 0 .5rem}
.role[data-dept="Miniclub"]{color:var(--miniclub)}
.role[data-dept="Speelclub"]{color:var(--speelclub)}
.role[data-dept="Rakkers"]{color:var(--rakkers)}
.role[data-dept="Toppers"]{color:var(--toppers)}
.role[data-dept="Kerels"]{color:var(--kerels)}
.role[data-dept="Aspiranten"]{color:var(--aspiranten)}
.contact{color:#2b3a4e;font-size:1rem}

/* Zelfde breedte + centreren voor leader/VB/overview */
.leiding-list, .vbs-grid, #leidingGrid{justify-items:center}
.leader, .vb-card, .leader-big{width:min(680px,100%);margin-inline:auto}

/* =========================================================
   GALERIJ (thumbnails + vierkant) + LIGHTBOX
   ========================================================= */
.gallery{margin-top:14px}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media (max-width:900px){.thumbs{grid-template-columns:repeat(3,1fr)}}

/* Vierkante thumbnails (moderne manier) */
.thumbs img{
  width:100%;
  aspect-ratio:1/1;          /* ⬛️ altijd vierkant */
  object-fit:cover;
  border-radius:12px;
  border:1px solid #e6ecf2;
}

/* Fallback via figure (optioneel, als je <figure> gebruikt) */
.thumbs figure{position:relative;width:100%;padding-top:100%;overflow:hidden;border-radius:12px;border:1px solid #e6ecf2}
.thumbs figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Lightbox container */
#galleryLightbox{
  position:fixed;inset:0;z-index:1100;display:none;
  align-items:center;justify-content:center;background:rgba(15,23,42,.6);padding:24px;
}
#galleryLightbox.open{display:flex}
#galleryLightbox .glb-stage{
  width:min(1000px,100% - 48px);max-height:86vh;display:grid;place-items:center;
  background:#0b1220;border:1px solid #1f2a44;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.35);overflow:hidden;
}
#galleryLightbox img{width:100%;height:auto;max-height:86vh;object-fit:contain;display:block;background:#0b1220}
#galleryLightbox .glb-prev,#galleryLightbox .glb-next,#galleryLightbox .glb-close{
  position:absolute;border:0;background:rgba(255,255,255,.9);color:#0f172a;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;font-size:28px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.25)
}
#galleryLightbox .glb-close{top:12px;right:16px;font-size:30px}
#galleryLightbox .glb-prev{left:18px}
#galleryLightbox .glb-next{right:18px}
#galleryLightbox .glb-meta{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  display:flex;gap:12px;align-items:center;background:rgba(0,0,0,.45);color:#fff;padding:6px 12px;border-radius:999px;font-weight:700;font-size:14px
}
#glbCaption{font-weight:600;opacity:.9}
@media (max-width:700px){
  #galleryLightbox .glb-prev,#galleryLightbox .glb-next{width:52px;height:52px;font-size:32px}
  #galleryLightbox .glb-stage{width:100%}
}

/* =========================================================
   KALENDER
   ========================================================= */
.calendar-wrap{--card-pad:18px}
.calendar-controls{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.month-label{font-weight:900;color:var(--navy)}
.grow{flex:1}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.dow{font-weight:800;color:#6b7280;text-transform:uppercase;font-size:.85rem;text-align:center;padding:6px 0}
.pad{height:58px}
.day{min-height:110px;background:#fff;border:1px solid #e6ecf2;border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:6px}
.day:hover{border-color:#c8d5ea;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.day .num{font-weight:800;color:#102a43}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.badge-ev{font-size:.78rem;font-weight:800;line-height:1;padding:.35rem .5rem;border-radius:999px;border:1px solid #e6ecf2;background:#f8fafc;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.badge-ev[data-dept="Miniclub"]{background:rgba(111,66,193,.12);color:#4c2a91}
.badge-ev[data-dept="Speelclub"]{background:rgba(246,192,0,.18);color:#7a5d00}
.badge-ev[data-dept="Rakkers"]{background:rgba(34,197,94,.16);color:#155f2f}
.badge-ev[data-dept="Toppers"]{background:rgba(204,41,54,.14);color:#7a1f27}
.badge-ev[data-dept="Kerels"]{background:rgba(37,99,235,.16);color:#1742a0}
.badge-ev[data-dept="Aspiranten"]{background:rgba(249,115,22,.16);color:#8a3d06}

/* =========================================================
   MODAL (event details)
   ========================================================= */
#eventModal{display:none;position:fixed;inset:0;align-items:center;justify-content:center;background:rgba(15,23,42,.55);z-index:1000;padding:24px}
#eventModal.open{display:flex}
.modal-card{width:min(900px,100% - 24px);max-height:85vh;overflow:auto;background:#fff;border:1px solid #e6ecf2;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:16px;position:relative}
.modal-close{position:absolute;top:8px;right:10px;background:transparent;border:0;font-size:28px;cursor:pointer;color:#64748b}
.modal-close:hover{color:#0f172a}
#evTitle{margin:0 0 6px;font-size:26px;font-weight:700}
#evMeta{margin:0 0 18px;color:#475569;font-size:15px}
.ev-grid{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
@media (max-width:720px){.ev-grid{grid-template-columns:1fr}}
.ev-media{border-radius:14px;overflow:hidden;background:#f1f5f9;min-height:220px;display:none}
#eventModal.has-image .ev-media{display:block}
.ev-media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.ev-body{display:grid;gap:12px}
#evDesc{margin:0;color:#0f172a;font-size:16px;line-height:1.55}
.ev-row{display:flex;gap:10px;align-items:center}

/* =========================================================
   CONTACT + FORMULIER
   ========================================================= */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr}}
.contact-card{padding:22px}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.contact-item{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e6ecf2;border-radius:14px;background:#fff;box-shadow:0 8px 20px rgba(15,42,74,.06)}
.icon-wrap{width:48px;height:48px;border-radius:999px;display:grid;place-items:center;background:#f3f6fb;border:1px solid #e6ecf2;color:var(--navy);font-size:1.15rem}
.contact-text{font-size:1.15rem;line-height:1.35;color:#0f2a4a}
.contact-text a{color:#0f2a4a;font-weight:700;text-decoration:none;border-bottom:2px solid transparent}
.contact-text a:hover{border-bottom-color:currentColor}
@media (max-width:700px){
  .contact-item{grid-template-columns:42px 1fr}
  .icon-wrap{width:42px;height:42px;font-size:1rem}
  .contact-text{font-size:1.05rem}
}
@media (min-width:1100px){.contact-text{font-size:1.25rem}}

form.form label{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-weight:600;color:var(--navy)}
form.form input, form.form textarea{background:#f9fbff;border:1px solid #ccd7e6;border-radius:10px;padding:.8rem 1rem;font-size:1rem;transition:border-color .2s}
form.form input:focus, form.form textarea:focus{border-color:var(--red);outline:none}
form.form button{margin-top:10px}

/* =========================================================
   ADMIN
   ========================================================= */
/* Uniforme velden */
.admin-page .ui,
.admin-page input[type="text"], .admin-page input[type="date"], .admin-page input[type="time"],
.admin-page input[type="email"], .admin-page input[type="tel"], .admin-page input[type="file"],
.admin-page select, .admin-page textarea{
  width:100%; height:48px; padding:0 14px; border:1px solid #e5eaf2; background:#fbfdff;
  border-radius:12px; font:inherit; color:#0f172a;
  transition:border-color .15s, box-shadow .15s, background .15s; appearance:none;
}
.admin-page textarea{min-height:140px;padding:12px 14px;resize:vertical}
.admin-page ::placeholder{color:#9aa7b5}
.admin-page input:focus, .admin-page select:focus, .admin-page textarea:focus{
  outline:none;border-color:#cbd8ee;box-shadow:0 0 0 4px rgba(37,99,235,.12);background:#fff;
}

/* Event formulieren en lijst */
.admin-page .event-edit, .admin-page .event-edit-form{display:grid;gap:14px}
.admin-page .event-edit h3, .admin-page .event-edit-form h3{margin:0 0 6px;color:#0f2a4a;font-size:1.15rem;padding-top: 20px;}
.admin-page .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){.admin-page .grid-2{grid-template-columns:1fr}}
.admin-page .f{display:grid;gap:6px}
.admin-page .f>span, .admin-page label{font-size:13px;font-weight:700;color:#475569}
.admin-page .event-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.admin-page .event-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#fff;border:1px solid #e6ecf2;border-radius:12px;box-shadow:0 4px 8px rgba(0,0,0,.05)}
.admin-page .event-meta{color:#0f172a;font-size:15px}
.admin-page .event-meta strong{color:#0f2a4a;font-weight:800}
.admin-page .event-actions{display:flex;gap:8px}
.admin-page .inline-form{display:inline}
.admin-page .btn.btn-small{padding:.5rem .85rem;border-radius:10px;line-height:1}

/* Upload-rij: desktop gecentreerd */
.admin-page .upload-row{display:flex;gap:10px;align-items:center;justify-content:center;background:#f6fafd;border:1px solid #e6ecf2;border-radius:14px;padding:10px}
.admin-page .upload-row input[type="file"]{height:44px;padding:.35rem .6rem;border:1px dashed #cbd5e1;background:#fff;border-radius:10px;max-width:420px}
.admin-page .upload-row .btn{min-height:44px;min-width:180px}

/* Huidige foto miniatuur */
.admin-page .current-image{display:flex;align-items:center;gap:10px}
.admin-page .current-image img{width:120px;height:90px;object-fit:cover;border-radius:10px;border:1px solid #e6ecf2;box-shadow:0 4px 10px rgba(0,0,0,.05)}
.admin-page .current-image .hint{color:#64748b;font-size:12px}

/* Admin – mobiel polish */
@media (max-width:640px){
  .admin-page .card{--card-pad:16px;padding:var(--card-pad)}
  .admin-page .event-row{flex-direction:column;align-items:flex-start;gap:10px}
  .admin-page .event-actions{width:100%;justify-content:space-between}
  .admin-page .event-actions .btn{flex:1}
  .admin-page .event-edit, .admin-page .event-edit-form{gap:12px}
  .admin-page .grid-2{grid-template-columns:1fr}
  .admin-page .btn, .admin-page .btn.btn-small{width:100%;justify-content:center}
  .admin-page .event-meta{font-size:14px}
}

/* Admin – leiding/vb rij op gsm (inline styles overriden) */
@media (max-width:768px){
  .admin-page .leader{display:grid !important;grid-template-columns:80px 1fr !important;gap:10px !important;align-items:center !important;padding:12px !important}
  .admin-page .leader img{width:80px !important;height:80px !important;object-fit:cover !important;border-radius:12px !important}
  .admin-page .leader > div{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;align-items:stretch !important}
  .admin-page .leader .f{display:flex !important;flex-direction:column !important;gap:6px !important}
  .admin-page .leader .f input{width:100% !important;height:46px !important;font-size:16px !important}
  .admin-page .leader form[enctype*="multipart"]{
    display:flex !important;flex-direction:column !important;gap:8px !important;align-items:stretch !important;
    background:#f6fafd !important;border:1px solid #e6ecf2 !important;border-radius:14px !important;padding:10px !important
  }
  .admin-page .leader form[enctype*="multipart"] input[type="file"]{width:100% !important;height:44px !important;padding:.35rem .6rem !important;border:1px dashed #cbd5e1 !important;border-radius:10px !important}
  .admin-page .leader form[enctype*="multipart"] .btn{width:100% !important;min-height:44px !important}
  .admin-page .leader > div > form:last-child .btn{width:100% !important;min-height:44px !important}
}

/* =========================================================
   RESPONSIVE (site breed)
   ========================================================= */
@media (max-width:1024px){
  .nav-inner{flex-wrap:wrap;gap:10px}
  .site-page .calendar-grid{min-width:680px}
}
@media (max-width:700px){
  .site-page .container{width:min(760px,100% - 24px)}
  .site-page .hero-wrap{grid-template-columns:1fr}
  .site-page .hero-img{height:180px}
  .site-page .title{font-size:1.6rem}
  .site-page .lead{font-size:1rem}

  /* één kolom rasters */
  .site-page .info-grid, .site-page .afdelingen, .site-page .leiding-list,
  .site-page #leidingGrid, .site-page .vbs-grid, .site-page #contact .info-grid{
    grid-template-columns:1fr;gap:12px
  }

  .site-page .gallery .thumbs{grid-template-columns:repeat(3,1fr)}
  .site-page .calendar-wrap{overflow-x:auto}
  .site-page .calendar-grid{min-width:680px}

  /* compactere media-cards */
  .leader, .vb-card{grid-template-columns:92px 1fr}
  .leader img, .vb-card img{width:92px;height:92px;border-radius:12px}
}

/* Publieke site: cards hetzelfde als VB’s ook op mobiel */
@media (max-width:768px){
  #leidingGrid{display:grid;grid-template-columns:1fr;justify-items:center;gap:12px}
  #leidingGrid .leader-big{width:min(680px,94%);display:grid;grid-template-columns:92px 1fr;align-items:center}
  #leidingGrid .leader-big img{width:92px;height:92px;border-radius:12px}

  .afdelingen .leiding-list{grid-template-columns:1fr;justify-items:center}
  .afdelingen .leader.card{width:min(680px,94%);display:grid;grid-template-columns:92px 1fr;align-items:center}
  .afdelingen .leader.card img{width:92px;height:92px;border-radius:12px}
  body{padding-top: 120px;}
}

/* ==== MOBILE FIXES: container & contact ===== */
@media (max-width:700px){
  /* container mag nooit breder zijn dan het scherm */
  .site-page .container{
    width: calc(100% - 24px);   /* ✅ exact schermbreedte met 12px marge links/rechts */
    margin-inline: auto;
  }

  /* Contactsectie: 1 kolom, geen overflow */
  .contact-wrap{
    display: grid;
    grid-template-columns: 1fr;   /* ✅ stapelen */
    gap: 16px;
  }

  /* Contactkaart en formulier vullen de breedte */
  .contact-card,
  #contact .form{
    padding: 16px;
    border-radius: 14px;
  }

  /* Tekst in contact netjes afbreken (lange e-mails) */
  .contact-text,
  .contact-text a{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Form inputs: 100% breed en touch-vriendelijk */
  #contact .form input,
  #contact .form textarea,
  #contact .form button{
    width: 100%;
    font-size: 16px;     /* voorkomt zoombug iOS */
  }

  /* Knop wat groter en los van de randen */
  #contact .form button{
    min-height: 44px;
    margin-top: 8px;
  }
}

/* Veiligheid: nooit horizontaal scrollen op de hele site */
html, body{ overflow-x:hidden; max-width:100%; overflow-y: auto; position: relative;}

/* ====== Persoonskaarten: 1 bron van waarheid (Leiding + VB) ====== */
:root{
  /* pas desnoods aan: max kaartbreedte & beeldgrootte desktop/mobiel */
  --person-card-max: 720px;
  --person-img-desk: 120px;
  --person-img-mob:  92px;
  --person-gap: 16px;
}

/* 1) Centreer de rasters die de kaarten bevatten */
#leidingGrid,
.vbs-grid,
.afdelingen .leiding-list{
  justify-items: center;
}

/* 2) Zelfde breedte + layout voor ALLE persoonskaarten */
#leidingGrid .leader-big,
.vbs-grid .vb-card,
.afdelingen .leader.card{
  width: min(var(--person-card-max), 100%);
  margin-inline: auto;
  display: grid !important;
  grid-template-columns: var(--person-img-desk) 1fr;
  gap: var(--person-gap);
  align-items: center;
  min-height: calc(var(--person-img-desk) + 24px);
}

/* 3) Beelden overal gelijk trekken */
#leidingGrid .leader-big img,
.vbs-grid .vb-card img,
.afdelingen .leader.card img{
  width: var(--person-img-desk) !important;
  height: var(--person-img-desk) !important;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid #e6ecf2;
}

/* 4) Mobiel – zelfde look, gewoon compacter */
@media (max-width: 768px){
  #leidingGrid .leader-big,
  .vbs-grid .vb-card,
  .afdelingen .leader.card{
    grid-template-columns: var(--person-img-mob) 1fr;
    min-height: calc(var(--person-img-mob) + 24px);
    width: min(var(--person-card-max), 94%);
  }
  #leidingGrid .leader-big img,
  .vbs-grid .vb-card img,
  .afdelingen .leader.card img{
    width: var(--person-img-mob) !important;
    height: var(--person-img-mob) !important;
    border-radius: 12px;
  }
}

/* 5) Veiligheid: nooit horizontaal scrollen door lange e-mails */
.leader .contact, .leader-big .contact, .vb-card .contact,
.leader .contact a, .leader-big .contact a, .vb-card .contact a{
  overflow-wrap: anywhere;
  word-break: break-word;
}