/* =======================================================================
   MAARSSTEE – base.css (THEME-AGNOSTIC)
   ======================================================================= */

/* =========================
   BASE
   ========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:14px;
  background: var(--page-bg, var(--bg)); /* theme mag --page-bg zetten */
}
a{color:inherit}
img{max-width:100%; height:auto}
.container{width:min(var(--container), calc(100% - 40px)); margin:0 auto}

/* =========================
   ACCESSIBILITY
   ========================= */
.skip-link{
  position:absolute; left:-999px; top:10px;
  background:var(--card);
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  z-index:1000;
}
.skip-link:focus{left:12px; outline:none; box-shadow:var(--focus)}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:12px}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}

/* =========================
   TOPBAR
   ========================= */
.topbar{
  background: var(--topbar-bg, transparent); /* theme vult in */
  color:var(--topbar-ink, #fff);
  border-bottom:1px solid var(--topbar-border, rgba(255,255,255,.22));
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0;
}
.social{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.icon-btn{
  width:38px;height:38px; display:grid; place-items:center;
  border-radius:12px;
  border:1px solid var(--topbar-ctrl-border, rgba(255,255,255,.35));
  background: var(--topbar-ctrl-bg, rgba(255,255,255,.10));
  text-decoration:none;
  cursor:pointer;
}
.icon-btn:hover{background: var(--topbar-ctrl-bg-hover, rgba(255,255,255,.18))}
.icon-btn svg{width:18px;height:18px}

/* =========================
   A11Y CONTROLS
   ========================= */
.a11y{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.toggle,
.stepper{
  height: var(--ctrl-h);
  padding: 6px var(--ctrl-px);
  border-radius: 100vmax;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--topbar-ctrl-border, rgba(255,255,255,.28));
  background: var(--topbar-ctrl-bg, rgba(255,255,255,.08));
  color: var(--topbar-ink, #fff);
  font-weight:900;
  line-height:1;
  user-select:none;
  overflow:hidden;
  box-shadow: 0 0 0 1px var(--topbar-ctrl-inset, rgba(255,255,255,.32)) inset;
}
.toggle{font-size:12px; cursor:pointer}
.stepper{font-size:14px}
.toggle:hover,
.stepper:hover{background: var(--topbar-ctrl-bg-hover, rgba(255,255,255,.14))}
.toggle:active{transform: translateY(1px)}
.toggle:focus-visible,
.stepper:focus-within{box-shadow: var(--focus)}

/* Toggle switch */
.toggle .switch{
  width:34px;
  height:20px;
  border-radius:999px;
  background: var(--topbar-switch-bg, rgba(255,255,255,.28));
  position:relative;
  flex:0 0 auto;
  margin-left:2px;
  margin-right:4px;
}
.toggle .switch::after{
  content:"";
  position:absolute; top:2px; left:2px;
  width:16px; height:16px;
  border-radius:999px;
  background: var(--topbar-switch-knob, #fff);
  transition: transform .18s ease;
}
.toggle[aria-pressed="true"] .switch{background: var(--topbar-switch-on, rgba(232,91,100,.72))}
.toggle[aria-pressed="true"] .switch::after{transform: translateX(14px)}
.toggle .tiny{font-size:12px; opacity:.85}

/* Stepper */
.stepper__label{font-size:12px; opacity:.85}
.stepper__val{
  min-width:56px;
  text-align:center;
  font-size:13px;
  padding:0 4px;
  line-height:1.2;
  opacity:.95;
  font-weight:900;
}
.stepper__btn{
  height: calc(var(--ctrl-h) - 12px);
  min-width: calc(var(--ctrl-h) - 12px);
  border-radius:999px;
  border:1px solid var(--topbar-ctrl-border, rgba(255,255,255,.22));
  background: var(--topbar-ctrl-btn-bg, rgba(255,255,255,.10));
  color: var(--topbar-ink, #fff);
  font-weight:900;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:18px;
  margin:0 2px;
  line-height:1;
}
.stepper__btn:hover{background: var(--topbar-ctrl-btn-bg-hover, rgba(255,255,255,.16))}
.stepper__btn:active{transform: translateY(1px)}
.stepper__btn:disabled{opacity:.45; cursor:not-allowed}
.stepper__btn--ghost{
  width:auto;
  padding:0 10px;
  font-size:16px;
}

/* =========================
   HEADER + BRAND
   ========================= */
.header{
  position:sticky; top:0; z-index:50;
  background: var(--header-bg, rgba(255,255,255,.90));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--header-border, var(--border));
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  min-width: 220px;
}
.brand__mark{
  width:42px;height:42px;border-radius:14px;
  background: var(--brand-mark-bg, rgba(232,91,100,.14));
  border:1px solid var(--brand-mark-border, rgba(232,91,100,.24));
  display:grid; place-items:center;
  flex:0 0 auto;
}
.brand__name{line-height:1.05}
.brand__name strong{
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.2px;
  font-size:15px;
  display:block;
}
.brand__name span{font-size:12px;color:var(--muted)}

/* =========================
   NAV
   ========================= */
.nav{display:flex; gap:8px; align-items:center}
.nav a, .nav button{
  font-family:inherit;
  font-size:15px;
  font-weight:900;
  padding:11px 16px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  text-decoration:none;
  color:var(--ink);
  background: var(--nav-bg, rgba(255,255,255,.85));
  box-shadow: 0 0 0 1px var(--nav-inset, rgba(31,35,40,.14)) inset;
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  transition: all .15s ease;
}
.nav a:hover, .nav button:hover{
  background: var(--nav-bg-hover, var(--card));
  box-shadow:
    0 0 0 1px var(--nav-hover-inset, rgba(31,182,193,.35)) inset,
    0 10px 18px var(--nav-hover-shadow, rgba(31,182,193,.12));
  transform: translateY(-1px);
}
.nav a[aria-current="page"]{
  background: var(--accent-grad);
  box-shadow:
    0 0 0 2px rgba(31,182,193,.28) inset,
    0 14px 26px rgba(31,182,193,.14);
}
.nav a::before, .nav button::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:18px;
  border-radius:999px;
  background: var(--accent-grad-strong);
  transition: width .15s ease;
}
.nav a:hover::before, .nav button:hover::before{ width:4px }
.nav a[aria-current="page"]::before{ width:6px }
.nav a:focus-visible, .nav button:focus-visible{
  box-shadow: var(--focus), 0 0 0 1px var(--nav-inset, rgba(31,35,40,.14)) inset;
}

/* Dropdown */
.caret{
  width:13px;height:13px;
  display:inline-block;
  border:2px solid var(--caret, rgba(31,35,40,.70));
  border-left:0;border-top:0;
  transform: rotate(45deg) translateY(-2px);
  border-radius:2px;
}
.dropdown{position:relative}
.menu{
  position:absolute;
  top:48px; left:0;
  min-width: 290px;
  background: var(--menu-bg, var(--card));
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:8px;
  display:none;
}
.menu[aria-hidden="false"]{display:block}
.menu a{
  display:flex; flex-direction:column; gap:2px;
  padding:12px 12px;
  border-radius:14px;
  font-weight:900;
  background: transparent;
  box-shadow:none;
}
.menu a small{font-weight:800; color:var(--muted)}
.menu a:hover{background: var(--menu-hover-bg, rgba(31,182,193,.10))}
.menu .divider{height:1px;background:var(--border); margin:6px 4px}

/* =========================
   BUTTONS
   ========================= */
.header__actions{display:flex; gap:10px; align-items:center}
.btn{
  border:0;
  border-radius:14px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, filter .12s ease;
  white-space:nowrap;
}
.btn:active{transform: translateY(1px)}
.btn-primary{
  background: var(--btn-grad);
  color:#fff;
  box-shadow:
    0 18px 34px rgba(31,182,193,.28),
    0 6px 12px rgba(232,91,100,.18);
}
.btn-primary:hover{filter:saturate(1.06) contrast(1.02)}
.btn-outline{
  background: var(--btn-outline-bg, rgba(255,255,255,.92));
  color:var(--ink);
  box-shadow: 0 0 0 1px var(--nav-inset, rgba(31,35,40,.14)) inset;
}
.btn-outline:hover{
  background: var(--btn-outline-hover, rgba(31,182,193,.07));
  box-shadow: 0 0 0 1px rgba(31,182,193,.26) inset;
}

/* =========================
   MOBILE NAV
   ========================= */
.burger{
  display:none;
  width:44px;height:44px;border-radius:14px;
  border:1px solid var(--nav-inset, rgba(31,35,40,.14));
  background: var(--card);
  cursor:pointer;
  align-items:center; justify-content:center;
}
.burger span{
  width:18px;height:2px;background:var(--ink);
  display:block; position:relative;
}
.burger span:before,.burger span:after{
  content:""; position:absolute; left:0;
  width:18px;height:2px;background:var(--ink);
}
.burger span:before{top:-6px}
.burger span:after{top:6px}

.mobile-panel{
  display:none;
  border-top:1px solid var(--border);
  padding:12px 0 16px;
}
.mobile-panel a{
  display:block;
  padding:12px 10px;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
}
.mobile-panel a:hover{background: rgba(31,182,193,.12)}
.mobile-panel details{
  border-radius:14px;
  border:1px solid rgba(31,35,40,.12);
  padding:8px 10px;
  background: var(--card);
  margin:10px 0;
}
.mobile-panel summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.mobile-panel summary::-webkit-details-marker{display:none}
.mobile-panel .stack{display:grid; gap:8px; padding-top:10px}

/* =========================
   HERO
   ========================= */
.hero{
  padding: 56px 0 44px;
  background: var(--hero-bg, transparent);
  border-bottom: 1px solid var(--hero-border, var(--border));
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items:center;
}
.hero-content{position:relative; padding-left:28px}
.hero-content::before{
  content:"";
  position:absolute;
  left:0; top:10px;
  width:10px; height:240px;
  background: var(--accent-grad-strong);
  border-radius: 0 10px 10px 0;
  box-shadow: 0 14px 22px rgba(0,0,0,.12);
}
.hero h1{
  margin:0 0 10px;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.9px;
  font-size:54px;
  line-height:1.00;
}
.hero-tagline{
  margin:0 0 14px;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  font-size:26px;
  color: var(--red);
}
.hero-lead{
  margin:0 0 18px;
  color: var(--hero-lead, rgba(31,35,40,.90));
  font-size:18px;
  line-height:1.6;
  max-width: 62ch;
}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 18px}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  text-decoration:none;
  color: var(--chip-ink, rgba(31,35,40,.90));
  background: var(--chip-bg, rgba(255,178,122,.16));
  box-shadow: 0 0 0 1px var(--chip-border, rgba(255,178,122,.22)) inset;
}
.chip.teal{
  background: var(--chip-teal-bg, rgba(31,182,193,.13));
  box-shadow: 0 0 0 1px var(--chip-teal-border, rgba(31,182,193,.22)) inset;
}
.chip:hover{background: var(--chip-bg-hover, rgba(255,178,122,.20))}
.chip.teal:hover{background: var(--chip-teal-bg-hover, rgba(31,182,193,.17))}
.dot{width:8px;height:8px;border-radius:999px;background:var(--red)}
.dot.teal{background:var(--teal)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.hero-cta .link{
  background: var(--card);
  padding:10px 12px;
  border-radius:12px;
  box-shadow: 0 0 0 1px var(--nav-inset, rgba(31,35,40,.14)) inset;
}
.hero-cta .link:hover{filter:brightness(1.03)}

/* HERO MEDIA */
.hero-media{
  background: var(--panel-bg, var(--card));
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 10px);
  box-shadow: var(--shadow);
  padding:16px;
  overflow:hidden;
}
.hero-media .photo{
  position:relative;
  height:240px;
  padding:14px;
  display:grid;
  place-items:center;
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  background: var(--photo-bg, var(--card));
}
.hero-media .photo img{
  display:block;
  width:auto;height:auto;
  max-width:92%;
  max-height:92%;
  object-fit:contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.18));
}
.cap{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  box-shadow: var(--shadow-soft);
  font-weight:900;
}
.cap small{display:block; color:var(--muted); font-weight:800}
.cap a{
  text-decoration:none;
  color: var(--teal);
  font-weight:900;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(31,182,193,.12);
}
.cap a:hover{background: rgba(31,182,193,.18)}
.hero-meta{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
  color: var(--muted);
  font-size:13px;
}
.hero-media .logo-text{
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  font-size:16px;
  letter-spacing:.2px;
  text-align:center;
  margin-top:12px;
  color: var(--red);
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* =========================
   SECTIONS + TYPO
   ========================= */
section{padding:44px 0}
.section-title{
  margin:0 0 10px;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.5px;
  font-size:34px;
  position:relative;
  padding-left:14px;
}
.section-title::before{
  content:"";
  position:absolute;
  left:0; top:.25em;
  width:6px;
  border-radius:999px;
  background: var(--accent-grad);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.section-lead{
  margin:0 0 18px;
  color: var(--lead-ink, rgba(31,35,40,.80));
  line-height:1.7;
  max-width:78ch;
  font-size:16px;
}
.row{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:stretch;
}
.quote{
  background: var(--quote-bg, rgba(232,91,100,.08));
  border: 1px solid var(--quote-border, rgba(232,91,100,.20));
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow-soft);
  padding:18px;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:170px;
}
.quote b{
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  font-size:18px;
}
.quote p{margin:8px 0 0; color: var(--quote-ink, rgba(31,35,40,.82)); line-height:1.6}
.quote .sig{
  margin-top:14px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  color: var(--quote-sig, rgba(31,35,40,.72));
  font-weight:800;
  font-size:13px;
}

/* =========================
   CARDS + ICONS
   ========================= */
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding:18px;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  min-height:160px;
  position:relative;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  pointer-events:none;
  box-shadow: 0 0 0 1px rgba(31,182,193,.14) inset;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.icon{
  width:44px;height:44px;border-radius:16px;
  display:grid; place-items:center;
  margin-bottom:10px;
  background: rgba(31,182,193,.14);
  border:1px solid rgba(31,182,193,.22);
  box-shadow: 0 10px 18px rgba(31,182,193,.08);
}
.icon.red{
  background: rgba(232,91,100,.14);
  border:1px solid rgba(232,91,100,.22);
  box-shadow: 0 10px 18px rgba(232,91,100,.08);
}
.icon svg{width:22px;height:22px}
.icon svg path{stroke-linecap:round; stroke-linejoin:round}
.card h3{
  margin:0 0 6px;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  font-size:18px;
}
.card p{margin:0 0 10px; color: var(--lead-ink, rgba(31,35,40,.78)); line-height:1.55}

.mini-link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900;
  color: var(--teal);
  text-decoration:none;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(31,182,193,.12);
  border:1px solid rgba(31,182,193,.18);
  width:fit-content;
  box-shadow: 0 10px 18px rgba(31,182,193,.10);
}
.mini-link:hover{background: rgba(31,182,193,.18)}
.mini-link.red{
  color: var(--red);
  background: rgba(232,91,100,.12);
  border:1px solid rgba(232,91,100,.18);
  box-shadow: 0 10px 18px rgba(232,91,100,.10);
}
.mini-link.red:hover{background: rgba(232,91,100,.18)}

/* =========================
   PROJECTS
   ========================= */
.projects{
  background: var(--projects-bg, var(--bg));
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.projects-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr .75fr;
  grid-template-rows: auto auto;
  gap:16px;
}
.project{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:240px;
}
.project.featured{
  grid-row: 1 / span 2;
  min-height:500px;
}
.pimg{height:170px; background:#ddd; position:relative; overflow:hidden}
.project.featured .pimg{height:280px}
.pimg img{width:100%; height:100%; object-fit:cover; display:block}
.badge{
  position:absolute; left:12px; top:12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: var(--card);
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  font-weight:900; font-size:12px;
}
.badge .bdot{width:8px;height:8px;border-radius:999px;background:var(--teal)}
.pbody{padding:16px; display:flex; flex-direction:column; gap:10px; flex:1}
.pbody h3{
  margin:0;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.2px;
  font-size:18px;
}
.pbody p{margin:0; color: var(--lead-ink, rgba(31,35,40,.78)); line-height:1.55}
.pactions{
  margin-top:auto;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.status{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900; font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(31,182,193,.12);
  border:1px solid rgba(31,182,193,.18);
  color: var(--ink);
}
.status.red{
  background: rgba(232,91,100,.12);
  border:1px solid rgba(232,91,100,.18);
}

/* =========================
   WIJKKRANT SNACK
   ========================= */
.snack{padding:0}
.snackbar{
  border-radius: calc(var(--radius) + 10px);
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  background: var(--snackbar-bg, var(--card));
}
.snackleft{display:flex; gap:12px; align-items:flex-start; max-width:70ch}
.snackicon{
  width:44px;height:44px;border-radius:16px;
  background: rgba(232,91,100,.14);
  border:1px solid rgba(232,91,100,.22);
  display:grid; place-items:center;
  flex:0 0 auto;
}
.snackbar h2{
  margin:0;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.3px;
  font-size:22px;
}
.snackbar p{margin:6px 0 0; color: var(--lead-ink, rgba(31,35,40,.78)); line-height:1.55}

/* =========================
   NEWS
   ========================= */
.news-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.news-actions{display:flex; gap:10px; flex-wrap:wrap}
.news-grid{
  display:grid;
  gap:14px;
  grid-template-columns: 1.15fr 1fr;
}
.news-card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow: var(--shadow-soft);
}
.news-card.featured{
  border-color: rgba(232,91,100,.40);
}
.news-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.news-date{font-size:.9rem; color: var(--muted)}
.news-card h3{margin:0 0 6px 0; font-size:1.1rem}
.news-card p{margin:0 0 12px 0; color: var(--lead-ink, rgba(31,35,40,.78)); line-height:1.55}
.news-meta{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.news-foot{margin-top:12px; display:flex; justify-content:flex-end}

/* =========================
   NEWS FLASH
   ========================= */
.news-flash{
  background: var(--newsflash-bg, transparent);
  color: var(--newsflash-ink, #fff);
  padding:10px 0;
  border-bottom:1px solid var(--newsflash-border, rgba(255,255,255,.18));
}
.news-flash__inner{
  display:flex;
  align-items:center;
  gap:15px;
  font-size:14px;
  font-weight:800;
}
.news-flash__label{
  background: rgba(255,255,255,.22);
  padding:2px 8px;
  border-radius:8px;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.5px;
  font-weight:900;
}
.news-flash p{margin:0; flex:1}
.news-flash__link{
  color:var(--newsflash-ink, #fff);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space:nowrap;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
.news-flash__link:hover{background: rgba(255,255,255,.18)}

/* =========================
   FOOTER
   ========================= */
footer{
  padding:22px 0 26px;
  border-top:1px solid var(--border);
  background: var(--footer-bg, var(--card));
}
.footergrid{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  color: var(--lead-ink, rgba(31,35,40,.75));
  font-size:14px; line-height:1.7;
}
.fbrand{
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  color: var(--ink);
}
.tiny{color:var(--muted); font-size:12px}

/* =========================
   PAGE TEMPLATE (page.php)
   ========================= */
.page-hero{
  padding:28px 0 22px;
  background: var(--pagehero-bg, transparent);
  border-bottom:1px solid var(--border);
}
.hero-card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 10px);
  box-shadow: var(--shadow);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute;
  left:0; top:16px;
  width:10px; height:110px;
  background: var(--teal);
  border-radius: 0 10px 10px 0;
}
.hero-title{
  margin:0 0 8px;
  padding-left:22px;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.7px;
  font-size:42px;
  line-height:1.05;
}
.hero-sub{
  margin:0;
  padding-left:22px;
  color: var(--lead-ink, rgba(31,35,40,.82));
  line-height:1.6;
  font-size:16px;
  max-width:80ch;
}
.layout{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start}
.h2{
  margin:0 0 10px;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.4px;
  font-size:28px;
}
.prose{line-height:1.75; color: var(--lead-ink, rgba(31,35,40,.86)); font-size:16px}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px 18px}
.prose li{margin:6px 0}
.muted{color: var(--lead-ink, rgba(31,35,40,.78))}
.toc a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
}
.toc a:hover{background: rgba(31,182,193,.10)}
.stat{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  background: var(--card);
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.stat b{font-weight:900}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1040px){
  .nav{display:none}
  .burger{display:inline-flex}
  .header__actions .btn-outline{display:none}
  .brand{min-width:auto}

  .hero-grid{grid-template-columns:1fr; gap:18px}
  .hero h1{font-size:40px}
  .hero-tagline{font-size:22px}
  .hero-content::before{height:200px}
  .hero-media .photo{height:200px}

  .row{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr; grid-template-rows:auto}
  .project.featured{grid-row:auto; min-height:420px}
  .layout{grid-template-columns:1fr}
  .hero-title{font-size:34px}
  .hero-card::before{display:none}
  .hero-title,.hero-sub{padding-left:0}
}
@media (max-width: 980px){
  .news-grid{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .news-flash__inner{flex-direction:column; text-align:center; gap:8px}
  .news-flash__link{width:100%; text-align:center}
}
/* Verberg topbar-controls op mobiel */
@media (max-width: 768px){
  .topbar .social,
  .topbar .stepper,
  .topbar #toggleDark{
    display: none !important;
  }

  /* Optioneel: topbar compacter / helemaal weg */
  /* .topbar{ display:none !important; } */
}
/* =========================
   Article comment form
   ========================= */

.article-comment-form{
  display: grid;
  gap: 12px;
}

/* inputs + textarea */
.article-comment-form .form-control{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(31,35,40,.14);
  background: #fff;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.article-comment-form .form-control::placeholder{
  color: rgba(31,35,40,.45);
  font-weight: 600;
}

/* focus state */
.article-comment-form .form-control:focus{
  outline: none;
  border-color: #1FB6C1;
  box-shadow: 0 0 0 3px rgba(31,182,193,.18);
}

/* textarea specifiek */
.article-comment-form textarea{
  resize: vertical;
  min-height: 110px;
}

/* submit button spacing */
.article-comment-form button[type="submit"]{
  align-self: flex-start;
}

/* message onder form */
.article-comment-form .comment-msg{
  font-weight: 800;
  font-size: 13px;
  color: rgba(31,35,40,.65);
  min-height: 18px;
}

/* success / error states (optioneel JS) */
.article-comment-form.is-success .comment-msg{
  color: #1FB6C1;
}

.article-comment-form.is-error .comment-msg{
  color: #E85B64;
}
/* Sluit aan op jouw nieuwe stijl (zonder dubbele header markup) */
.article-hero{
  padding: 22px 0 22px;
  background:
    radial-gradient(1100px 380px at 10% 0%, rgba(232,91,100,.14), transparent 60%),
    radial-gradient(1100px 380px at 90% 0%, rgba(31,182,193,.14), transparent 60%),
    linear-gradient(180deg, #fff 0%, #f7f9fa 100%);
  border-bottom: 1px solid rgba(230,236,239,.90);
}
.crumbs{
  padding:18px 0 0;
  color: rgba(31,35,40,.70);
  font-weight:800;
  font-size:13px;
}
.crumbs a{ text-decoration:none; border-radius:10px; padding:6px 8px }
.crumbs a:hover{ background: rgba(31,182,193,.08) }
.crumbs .sep{opacity:.45; padding:0 6px}

.hero-wrap{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items:stretch;
}
.hero-card{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(230,236,239,.98);
  border-radius: 28px;
  box-shadow: 0 14px 40px rgba(16,24,40,.12);
  padding: 18px;
  position:relative;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute;
  left:0; top:16px;
  width:10px; height: 180px;
  background: #1FB6C1;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 10px 18px rgba(31,182,193,.18);
}
.hero-title{
  margin:0 0 8px;
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.7px;
  font-size:42px;
  line-height:1.05;
  padding-left: 22px;
}
.hero-sub{
  margin:0 0 14px;
  padding-left: 22px;
  color: rgba(31,35,40,.82);
  line-height:1.6;
  font-size:16px;
  max-width: 75ch;
}
.meta-row{
  padding-left: 22px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900; font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(31,35,40,.14);
  background: rgba(31,35,40,.04);
  color: rgba(31,35,40,.88);
}
.pill .dot{width:8px;height:8px;border-radius:999px;background:#1FB6C1}
.pill.red{border-color: rgba(232,91,100,.18); background: rgba(232,91,100,.10)}
.pill.red .dot{background: #E85B64}
.pill.teal{border-color: rgba(31,182,193,.18); background: rgba(31,182,193,.10)}
.pill.teal .dot{background: #1FB6C1}

/* =========================
   HERO
   ========================= */
.hero-actions{
  margin-top:14px;
  padding-left: 22px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* =========================
   SIDE CARD (structure)
   ========================= */
.side-card{
  border-radius: 28px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.side-body{ padding:16px; display:grid; gap:10px; }

.side-title{
  margin:0;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.2px;
  font-size:18px;
}
.side-lead{ margin:0; line-height:1.55; }

/* =========================
   COVER (structure)
   ========================= */
.cover{
  position:relative;
  height: 220px;
}
.cover img{ width:100%; height:100%; object-fit:cover; }

.cover-badge{
  position:absolute; left:12px; top:12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
}
.cover-badge .bdot{ width:8px; height:8px; border-radius:999px; }

/* =========================
   MINI CTA (structure)
   ========================= */
.mini-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding-top:10px;
}

/* =========================
   CONTENT LAYOUT
   ========================= */
.content-section{ padding: 36px 0; }

.grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items:start;
}

/* =========================
   CARD (structure)
   ========================= */
.card{
  border-radius: 18px;
  padding:18px;
}

/* =========================
   HEADINGS / PROSE
   ========================= */
.h2{
  margin:0 0 10px;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.4px;
  font-size:28px;
}

.prose{ line-height:1.75; font-size:16px; }
.prose p{ margin:0 0 12px; }
.prose ul{ margin:0 0 12px 18px; }
.prose li{ margin:6px 0; }

/* =========================
   TOC (structure)
   ========================= */
.toc{ display:grid; gap:8px; }
.toc a{
  text-decoration:none;
  font-weight:900;
  border-radius:12px;
  padding:10px 10px;
}
.toc .h3{ margin-left:14px; }

/* =========================
   MINI LINK (structure)
   ========================= */
.mini-link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900;
  text-decoration:none;
  padding:8px 10px;
  border-radius:12px;
}
.mini-link.red{}

/* =========================
   RELATED / CARDS
   ========================= */
.related{}

.cards3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }

.pcard{
  border-radius: 18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 220px;
}
.pbody{ padding:14px; display:flex; flex-direction:column; gap:8px; flex:1; }

.pbody h3{
  margin:0;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.2px;
  font-size:18px;
}
.pactions{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:10px; }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1040px){
  .hero-wrap{ grid-template-columns:1fr; }
  .hero-title{ font-size:34px; }
  .grid{ grid-template-columns:1fr; }
  .cards3{ grid-template-columns:1fr; }
}
/* =========================================================
   COMMENTS & REACTIONS — BASE (structure / spacing only)
   ========================================================= */

/* Wrapper card */
.card-reactions{
  margin-top:16px;
}

/* Reaction buttons row */
.react-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Comment titles */
.comments-title{ margin:0 0 10px; }
.form-title{ margin:0 0 6px; }
.form-lead{ margin:0 0 10px; }

/* Spacing helpers */
.sp-14{ height:14px; }
.sp-16{ height:16px; }

/* Divider */
.divider{
  border:0;
  border-top:1px solid currentColor;
  opacity:.12;
}

/* Comment list */
.comment-list{
  display:grid;
  gap:10px;
}

/* Comment card */
.comment-card{
  padding:12px;
  border-radius:14px;
}

/* Comment header */
.comment-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

/* Comment meta */
.comment-date{
  font-weight:800;
  font-size:12px;
  opacity:.7;
}

/* Comment text */
.comment-body{
  margin-top:6px;
  white-space:pre-wrap;
}

/* Pending note */
.comment-pending-note{
  margin-top:8px;
  font-weight:800;
  font-size:13px;
}

/* Comment form */
.article-comment-form{
  display:grid;
  gap:10px;
}

/* Honeypot (anti-spam) */
.honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
}
/* events.base.css — scoped: alleen agenda */
.ms-events :focus-visible{ outline:none; border-radius:12px; box-shadow: var(--focus); }

/* hero */
.ms-events__hero{ padding:28px 0 22px; }
.ms-events .hero-card{
  border-radius: calc(var(--radius) + 10px);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.ms-events .hero-card::before{
  content:"";
  position:absolute; left:0; top:16px;
  width:10px; height:120px;
  border-radius:0 10px 10px 0;
}
.ms-events .hero-title{
  margin:0 0 8px;
  padding-left:22px;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.7px;
  font-size:42px;
  line-height:1.05;
}
.ms-events .hero-sub{
  margin:0;
  padding-left:22px;
  line-height:1.6;
  font-size:16px;
  max-width:90ch;
}

/* wrapper */
.ms-events .wrap{ padding:26px 0 46px; }

/* toolbar */
.ms-events .toolbar{
  border-radius:18px;
  padding:14px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  margin-bottom:14px;
}
.ms-events .filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.ms-events .f{ display:grid; gap:6px; }
.ms-events label{ font-weight:900; font-size:13px; }
.ms-events input,
.ms-events select{
  font: inherit;
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
.ms-events__btnrow{ display:flex; gap:10px; flex-wrap:wrap; }
.ms-events__monthwrap.is-hidden{ display:none; }

/* chips */
.ms-events .chips{ display:flex; gap:8px; flex-wrap:wrap; }
.ms-events .chip{
  text-decoration:none;
  font-weight:900;
  padding:9px 12px;
  border-radius:999px;
}
(hover/current state in theme files)

/* month block + list */
.ms-events .monthBlock{
  border-radius:18px;
  padding:14px;
  margin-top:14px;
}
.ms-events .monthHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  margin-bottom:12px;
}
.ms-events .monthTitle{
  margin:0;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.3px;
  font-size:22px;
}
.ms-events .mini{ font-weight:800; font-size:12px; }
.ms-events .list{ display:grid; gap:10px; }

/* event card */
.ms-events .eventCard{
  border-radius:16px;
  padding:12px;
  display:grid;
  grid-template-columns:112px 1fr;
  gap:12px;
}
.ms-events .dateBox{
  border-radius:16px;
  padding:10px 10px 12px;
  display:grid;
  gap:6px;
  text-align:center;
  align-content:start;
}
.ms-events .dateTop{ display:flex; align-items:flex-end; justify-content:center; gap:8px; }
.ms-events .dateBox .day{ font-size:34px; font-weight:1000; line-height:1; letter-spacing:-.8px; }
.ms-events .dateBox .month{ font-size:13px; font-weight:1000; text-transform:uppercase; letter-spacing:.9px; margin-bottom:3px; }
.ms-events .dateBox .weekday{ font-size:12px; font-weight:900; text-transform:lowercase; }
.ms-events .dateBox .time{ margin-top:2px; font-size:12px; font-weight:1000; }
.ms-events .dateBox .time .u{ font-weight:800; opacity:.7; }

.ms-events .meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ms-events__meta-top{ margin-top:8px; }

.ms-events .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
}
.ms-events .pill .dot{ width:8px; height:8px; border-radius:999px; }
.ms-events .pill.pill-date{ align-items:flex-start; }
.ms-events .pill-date-text{ display:flex; flex-direction:column; line-height:1.05; }
.ms-events .pill-date-text .top{ font-weight:1000; }
.ms-events .pill-date-text .year{ opacity:.75; font-weight:900; }

.ms-events .titleRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
}
.ms-events .titleRow .eTitle{ flex:1; min-width:0; }
.ms-events .pill.pill-org{ white-space:nowrap; max-width:40%; overflow:hidden; text-overflow:ellipsis; }

.ms-events .eTitle{
  margin:0;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:1000;
  letter-spacing:-.2px;
  font-size:18px;
}
.ms-events .eDesc{ margin:6px 0 0; line-height:1.55; }

.ms-events .actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ms-events .link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  text-decoration:none;
  padding:8px 10px;
  border-radius:12px;
}

/* CTA */
.ms-events .ctaInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.ms-events .ctaTitle{
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:1000;
  letter-spacing:-.2px;
  font-size:18px;
}
.ms-events .ctaSub{
  margin-top:2px;
  font-weight:700;
  font-size:13px;
  line-height:1.45;
}
.ms-events .ctaBtn{ white-space:nowrap; }

@media (max-width: 1040px){
  .ms-events .hero-title{ font-size:34px; }
  .ms-events .hero-card::before{ display:none; }
  .ms-events .hero-title,
  .ms-events .hero-sub{ padding-left:0; }
  .ms-events .eventCard{ grid-template-columns:1fr; }
  .ms-events .dateBox{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    text-align:left;
  }
  .ms-events .dateTop{ justify-content:flex-start; }
}
@media (max-width: 680px){
  .ms-events .titleRow{ flex-direction:column; align-items:flex-start; }
  .ms-events .pill.pill-org{ max-width:100%; }
  .ms-events .ctaInner{ align-items:flex-start; }
  .ms-events .ctaBtn{ width:100%; justify-content:center; }
}
/* =======================================================================
   events (shared/base) — scope: .ms-events
   Plaats in: base.css
   ======================================================================= */

.ms-events .ms-events__heroTitleRow{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:start;
  gap:14px;
}

.ms-events .ms-events__heroOrg{
  justify-self:end;
  white-space:nowrap;
  margin-top:6px;
  max-width:40%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ms-events .ms-events__sep{ opacity:.7; }

.ms-events .ms-events__heroMeta{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.ms-events .ms-events__heroActions{
  margin-top:12px;
}

.ms-events .ms-events__detailGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:start;
}

.ms-events .ms-events__infoList{
  display:grid;
  gap:10px;
}

/* “kaartje” binnen Snelle info — theme kleuren komen uit theme css */
.ms-events .ms-events__infoCard{
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: var(--card);
}

.ms-events .ms-events__infoCard b{
  display:block;
  font-weight:1000;
  margin-bottom:2px;
}

.ms-events .ms-events__infoCard span{
  color: var(--muted);
}

.ms-events .ms-events__infoSub{
  color: var(--muted);
  opacity:.8;
  font-weight:800;
  font-size:12px;
  margin-top:2px;
}

@media (max-width: 1040px){
  .ms-events .ms-events__detailGrid{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .ms-events .ms-events__heroTitleRow{ grid-template-columns:1fr; }
  .ms-events .ms-events__heroOrg{
    justify-self:start;
    max-width:100%;
  }
}
/* =======================================================================
   Contact page (scoped) — base styling
   ======================================================================= */

.ms-contact .row2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.ms-contact .field{
  display:grid;
  gap:6px;
}

.ms-contact label{
  font-weight:900;
  font-size:13px;
  color: var(--muted);
}

.ms-contact input,
.ms-contact select,
.ms-contact textarea{
  font: inherit;
  width:100%;
  border-radius: 14px;
  border:1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  padding: 10px 12px;
  min-height: var(--ctrl-h, 40px);
  outline:none;
  box-shadow: none;
}

.ms-contact textarea{
  min-height: 140px;
  resize: vertical;
  padding-top: 12px;
  line-height: 1.6;
}

.ms-contact input::placeholder,
.ms-contact textarea::placeholder{
  color: rgba(31,35,40,.55);
}

/* focus consistent */
.ms-contact input:focus,
.ms-contact select:focus,
.ms-contact textarea:focus{
  outline:none;
  box-shadow: var(--focus);
}

/* lead tekst */
.ms-contact__lead{
  margin:0 0 12px;
  line-height:1.6;
}

/* actions */
.ms-contact__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* honeypot */
.ms-contact__hp{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* NOTE blocks */
.ms-note{
  display:block;
  margin-bottom:12px;
  border-radius:14px;
  padding:12px;
  border:1px solid var(--border);
  background: rgba(31,35,40,.03);
  font-weight:900;
}

/* Details netjes */
.ms-contact details{
  margin-top:12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(31,35,40,.03);
  padding: 10px 12px;
}
.ms-contact summary{
  cursor:pointer;
  font-weight:900;
}
.ms-contact details[open] summary{
  margin-bottom:8px;
}

/* Rechterkolom: map + info als cards */
.ms-contact__map{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  background: var(--card);
}
.ms-contact__map iframe{
  width:100%;
  height:260px;
  border:0;
  display:block;
}

.ms-contact__info{
  margin-top:14px;
  border-radius: 18px;
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  background: var(--card);
  padding: 14px;
  display:grid;
  gap:12px;
}
.ms-contact__infoItem b{
  display:block;
  font-weight:1000;
  margin-bottom:2px;
}

/* mail link */
.ms-contact__mailto{
  font-weight:900;
  color: var(--teal);
  text-decoration:none;
}
.ms-contact__mailto:hover{ text-decoration: underline; }

/* FAQ card spacing */
.ms-contact__faqCard{ margin-top:14px; }

@media (max-width: 900px){
  .ms-contact .row2{ grid-template-columns: 1fr; }
}
/* =========================================================
   Contact – aside (map + info)
   ========================================================= */

.ms-contact aside{
  display:grid;
  gap:14px;
}

/* kaart */
.ms-contact .map{
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  background: var(--card);
}

.ms-contact .map iframe{
  width:100%;
  height:260px;
  border:0;
  display:block;
}

/* info blok */
.ms-contact .info{
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  background: var(--card);
  padding:14px;
  display:grid;
  gap:12px;
}

.ms-contact .infoItem b{
  display:block;
  font-weight:1000;
  margin-bottom:2px;
}

.ms-contact .infoItem .muted{
  line-height:1.55;
}

/* mail link (inline style kan weg) */
.ms-contact .infoItem a{
  font-weight:900;
  color: var(--teal);
  text-decoration:none;
}

.ms-contact .infoItem a:hover{
  text-decoration:underline;
}
/* =========================================================
   News archive (scoped)
   ========================================================= */

.ms-news .archive-hero{
  padding: 22px 0 22px;
}

.ms-news__filters{
  margin-top:14px;
  padding-left: 22px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
}

.ms-news__f label{
  display:block;
  font-size:12px;
  font-weight:900;
  opacity:.7;
  margin:0 0 6px;
}

.ms-news__f input,
.ms-news__f select{
  height:42px;
  border-radius:14px;
  border:1px solid rgba(31,35,40,.14);
  padding:0 12px;
  min-width:220px;
  background:#fff;
  color:inherit;
}

.ms-news__btnx{
  height:42px;
  border-radius:14px;
  border:1px solid rgba(31,35,40,.14);
  padding:0 14px;
  font-weight:900;
  background: rgba(31,35,40,.04);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: rgba(31,35,40,.92);
}

.ms-news__btnx:hover{
  background: rgba(31,182,193,.12);
  border-color: rgba(31,182,193,.25);
}

.ms-news__statline{
  margin-top:10px;
  opacity:.7;
  font-weight:900;
  font-size:12px;
}

.ms-news__section{ padding: 28px 0 46px; }

.ms-news__cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}

.ms-news__pcard{
  background:#fff;
  border:1px solid rgba(230,236,239,.98);
  border-radius:18px;
  box-shadow: 0 10px 26px rgba(16,24,40,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:260px;
}

.ms-news__cover{ height:150px; background:#ddd; position:relative; }
.ms-news__coverImg{ width:100%; height:100%; object-fit:cover; display:block; }

.ms-news__badge{
  position:absolute; left:12px; top:12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.88);
  border:1px solid rgba(230,236,239,.98);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  font-weight:900;
  font-size:12px;
}

.ms-news__bdot{ width:8px; height:8px; border-radius:999px; background: var(--red); }

.ms-news__body{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}

.ms-news__title{
  margin:0;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.2px;
  font-size:18px;
}

.ms-news__meta{
  font-size:12px;
  font-weight:900;
  opacity:.65;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.ms-news__excerpt{
  margin:0;
  color: rgba(31,35,40,.78);
  line-height:1.55;
}

.ms-news__actions{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-top:10px;
}

.ms-news__read{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  color: var(--teal);
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(31,182,193,.10);
  border:1px solid rgba(31,182,193,.16);
}

.ms-news__read:hover{ background: rgba(31,182,193,.16); }

.ms-news__smallpill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(232,91,100,.18);
  background: rgba(232,91,100,.10);
  color: rgba(31,35,40,.88);
}

.ms-news__dot{ width:8px; height:8px; border-radius:999px; background: var(--red); }

.ms-news__pager{
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}

.ms-news__pager a{
  text-decoration:none;
  font-weight:900;
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(31,35,40,.14);
  background: rgba(31,35,40,.04);
  color: rgba(31,35,40,.92);
}

.ms-news__pager a:hover{
  background: rgba(31,182,193,.12);
  border-color: rgba(31,182,193,.25);
}

.ms-news__pager .cur{
  background: rgba(31,182,193,.14);
  border-color: rgba(31,182,193,.30);
}

.ms-news__dots{
  opacity:.6;
  font-weight:900;
}

.ms-news__emptyCard{ padding:16px; }

@media (max-width: 1040px){
  .ms-news__cards{ grid-template-columns:1fr; }
  .ms-news__f input, .ms-news__f select{ min-width:0; width:100%; }
  .ms-news__filters{ padding-left:0; }
}
/* AUTH links in nav */
.nav .nav__auth{
  margin-left: 6px;
  background: rgba(31,182,193,.08);
  box-shadow: 0 0 0 1px rgba(31,182,193,.20) inset;
}
.nav .nav__auth:hover{
  background: rgba(31,182,193,.12);
  box-shadow: 0 0 0 1px rgba(31,182,193,.30) inset, 0 10px 18px rgba(31,182,193,.10);
}

/* Mobile auth block */
.mobile-auth{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 8px;
}
.mobile-auth a{
  display:block;
  padding:12px 10px;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
  background: rgba(31,182,193,.08);
}
.mobile-auth a:hover{ background: rgba(31,182,193,.12); }
/* Subtiele, lichtere tekst */
.muted-light{
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  font-size: 13px;          /* iets kleiner */
  font-style: italic;       /* cursief */
  line-height: 1.5;
}
/* Account bar (Welkom / Inloggen) */
.ms-accountbar{
  margin: 10px 0 12px;
}
.ms-accountbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
}
.ms-accountbar__left{
  display:flex;
  align-items:baseline;
  gap:0;
  min-width:0;
}
.ms-accountbar__label{
  font-weight:900;
}
.ms-accountbar__name{
  font-weight:900;
  opacity:.85;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 48ch;
}
.ms-accountbar__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.ms-accountbar__link{
  color: var(--teal);
  text-decoration:none;
  font-weight:900;
}
.ms-accountbar__link:hover{
  text-decoration:underline;
}

@media (max-width: 575.98px){
  .ms-accountbar__inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .ms-accountbar__right{
    width:100%;
    justify-content:flex-start;
  }
  .ms-accountbar__name{
    max-width: 100%;
  }
}
.ms-footer-credit{
  margin-top: 10px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(31,35,40,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.ms-footer-credit .dot{
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(31,182,193,.7);
  display:inline-block;
}
/* =======================================================================
   MAARSSTEE CHAT — scoped: .ms-chat
   ======================================================================= */
.ms-chat :focus-visible{ outline:none; border-radius:12px; box-shadow: var(--focus); }

.ms-chat .chat-hero{ padding: 22px 0 16px; }
.ms-chat .hero-card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 10px);
  box-shadow: var(--shadow);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.ms-chat .hero-card::before{
  content:"";
  position:absolute; left:0; top:16px;
  width:10px; height: 120px;
  background: var(--teal);
  border-radius: 0 10px 10px 0;
  box-shadow: 0 10px 18px rgba(31,182,193,.18);
}
.ms-chat .hero-title{
  margin:0 0 8px;
  padding-left:22px;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.7px;
  font-size:38px;
  line-height:1.05;
}
.ms-chat .hero-sub{
  margin:0;
  padding-left:22px;
  color: var(--lead-ink, rgba(31,35,40,.82));
  line-height:1.6;
  font-size:15px;
  max-width: 90ch;
}
.ms-chat .hero-meta{
  margin-top:12px;
  padding-left:22px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.ms-chat .pill{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900; font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(31,35,40,.14);
  background: rgba(31,35,40,.04);
  color: rgba(31,35,40,.88);
}
.ms-chat .pill .dot{width:8px;height:8px;border-radius:999px;background: var(--teal);}
.ms-chat .pill.red{
  border-color: rgba(232,91,100,.18);
  background: rgba(232,91,100,.10);
}
.ms-chat .pill.red .dot{background: var(--red);}

.ms-chat .wrap{ padding: 18px 0 44px; }
.ms-chat .grid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items:start;
}

.ms-chat .panel{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.ms-chat .panel-head{
  padding:14px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ms-chat .panel-title{
  margin:0;
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:1000;
  letter-spacing:-.2px;
  font-size:16px;
}
.ms-chat .panel-sub{
  margin:2px 0 0;
  font-weight:800;
  font-size:12px;
  color: var(--muted);
}

.ms-chat .channels{ padding: 10px; display:grid; gap:10px; }
.ms-chat .ch{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-radius: 16px;
  border:1px solid rgba(31,35,40,.12);
  background: rgba(31,35,40,.02);
  text-decoration:none;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.ms-chat .ch:hover{
  background: rgba(31,182,193,.08);
  border-color: rgba(31,182,193,.22);
  box-shadow: 0 10px 18px rgba(31,182,193,.10);
  transform: translateY(-1px);
}
.ms-chat .ch.is-active{
  background: rgba(31,182,193,.12);
  border-color: rgba(31,182,193,.28);
  box-shadow: 0 12px 22px rgba(31,182,193,.12);
}
.ms-chat .ch .name{ font-weight:1000; }
.ms-chat .ch .desc{ margin-top:2px; font-weight:800; font-size:12px; color: var(--muted); line-height:1.4; }
.ms-chat .badge22{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(232,91,100,.10);
  border:1px solid rgba(232,91,100,.18);
  font-weight:1000;
  font-size:12px;
  white-space:nowrap;
}
.ms-chat .badge22 .bdot{ width:8px; height:8px; border-radius:999px; background: var(--red); }

.ms-chat .chatbox{
  display:flex;
  flex-direction:column;
  min-height: 540px;
}
.ms-chat .msgs{
  padding: 14px;
  display:grid;
  gap:10px;
  flex:1;
  overflow:auto;
}
.ms-chat .msg{
  border:1px solid rgba(31,35,40,.12);
  background: rgba(31,35,40,.02);
  border-radius: 16px;
  padding: 12px;
}
.ms-chat .msg.is-me{
  background: rgba(31,182,193,.08);
  border-color: rgba(31,182,193,.18);
}
.ms-chat .msg.is-hidden{
  background: rgba(232,91,100,.06);
  border-color: rgba(232,91,100,.14);
}
.ms-chat .mhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.ms-chat .who{
  font-weight:1000;
  display:flex;
  gap:8px;
  align-items:center;
}
.ms-chat .when{
  font-weight:900;
  font-size:12px;
  color: var(--muted);
}
.ms-chat .body{
  margin-top:6px;
  white-space:pre-wrap;
  line-height:1.55;
  font-size:14px;
}
.ms-chat .hidden-note{
  margin-top:8px;
  font-weight:900;
  font-size:12px;
  color: rgba(31,35,40,.70);
}

.ms-chat .composer{
  border-top:1px solid var(--border);
  padding: 12px;
  display:grid;
  gap:10px;
}
.ms-chat .composer textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(31,35,40,.14);
  background:#fff;
  color: inherit;
  padding: 12px 14px;
  min-height: 74px;
  resize: vertical;
  outline:none;
}
.ms-chat .composer textarea:focus{ box-shadow: var(--focus); border-color: rgba(31,182,193,.40); }
.ms-chat .composer-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.ms-chat .hint{
  font-weight:800;
  font-size:12px;
  color: var(--muted);
}
.ms-chat .actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.ms-chat .btnx{
  height:42px;
  border-radius:14px;
  border:1px solid rgba(31,35,40,.14);
  padding:0 14px;
  font-weight:1000;
  background: rgba(31,35,40,.04);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: rgba(31,35,40,.92);
  cursor:pointer;
}
.ms-chat .btnx:hover{
  background: rgba(31,182,193,.12);
  border-color: rgba(31,182,193,.25);
}
.ms-chat .btnx.red:hover{
  background: rgba(232,91,100,.12);
  border-color: rgba(232,91,100,.25);
}

.ms-chat .loadmore{
  display:flex;
  justify-content:center;
  padding: 10px 14px 0;
}
.ms-chat .toastline{
  min-height: 18px;
  font-weight:900;
  font-size:12px;
  color: rgba(31,35,40,.70);
}

@media (max-width: 1040px){
  .ms-chat .grid{ grid-template-columns: 1fr; }
  .ms-chat .hero-card::before{ display:none; }
  .ms-chat .hero-title, .ms-chat .hero-sub, .ms-chat .hero-meta{ padding-left:0; }
  .ms-chat .chatbox{ min-height: 520px; }
}