@charset "UTF-8";
/* === Local fonts ===
   Let op: pad is relatief t.o.v. de GEcompileerde CSS */
/* Regular 400 */
@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Outfit:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sora:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mynerve&display=swap");
@font-face {
  font-family: "MijnMerkFont";
  src: url("../fonts/2D4418_0_0.woff2") format("woff2"), url("../fonts/2D4418_0_0.woff") format("woff"), url("../fonts/2D4418_0_0.ttf") format("truetype"), url("../fonts/2D4418_0_0.eot");
  src: url("../fonts/2D4418_0_0.eot?#iefix") format("embedded-opentype"), url("../fonts/2D4418_0_0.woff2") format("woff2"), url("../fonts/2D4418_0_0.woff") format("woff"), url("../fonts/2D4418_0_0.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* SemiBold 600 (als dit Medium/500 is in jouw set, zet dan 500) */
@font-face {
  font-family: "MijnMerkFont";
  src: url("../fonts/2D4418_2_0.woff2") format("woff2"), url("../fonts/2D4418_2_0.woff") format("woff"), url("../fonts/2D4418_2_0.ttf") format("truetype"), url("../fonts/2D4418_2_0.eot");
  src: url("../fonts/2D4418_2_0.eot?#iefix") format("embedded-opentype"), url("../fonts/2D4418_2_0.woff2") format("woff2"), url("../fonts/2D4418_2_0.woff") format("woff"), url("../fonts/2D4418_2_0.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Bold 700 */
@font-face {
  font-family: "MijnMerkFont";
  src: url("../fonts/2D4418_2_0.woff2") format("woff2"), url("../fonts/2D4418_2_0.woff") format("woff"), url("../fonts/2D4418_2_0.ttf") format("truetype"), url("../fonts/2D4418_2_0.eot");
  src: url("../fonts/2D4418_2_0.eot?#iefix") format("embedded-opentype"), url("../fonts/2D4418_2_0.woff2") format("woff2"), url("../fonts/2D4418_2_0.woff") format("woff"), url("../fonts/2D4418_2_0.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset voor oudere browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

/* Lijststijlen resetten */
/* Quotes resetten */
blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: "";
  content: none;
}

/* Tabellen reset */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

.ckeditor-content ol,
.ckeditor-content ul {
  list-style: initial;
  margin-left: initial;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: 400; /* 100..700 kan */
  font-style: normal;
  font-size: 24px; /* stuurt ook 'opsz' aan */
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  /* variaties */
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; /* 20..48 */
}

/* XXL breder tonen */
@media (min-width: 1400px) {
  .container-xxl {
    max-width: 1500px;
  }
}
/* Schaal gelijk aan Bootstrap’s spacing */
/* Bootstrap 5 breakpoints */
/* Helper: maak classes voor 1 set properties (top/bottom/… of as-lijst) */
/* Basis (alle viewports) */
.m-n1 {
  margin: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.m-n5 {
  margin: -3rem !important;
}

.m-n6 {
  margin: -5rem !important;
}

.mt-n1 {
  margin-top: -0.25rem !important;
}

.mt-n2 {
  margin-top: -0.5rem !important;
}

.mt-n3 {
  margin-top: -1rem !important;
}

.mt-n4 {
  margin-top: -1.5rem !important;
}

.mt-n5 {
  margin-top: -3rem !important;
}

.mt-n6 {
  margin-top: -5rem !important;
}

.mb-n1 {
  margin-bottom: -0.25rem !important;
}

.mb-n2 {
  margin-bottom: -0.5rem !important;
}

.mb-n3 {
  margin-bottom: -1rem !important;
}

.mb-n4 {
  margin-bottom: -1.5rem !important;
}

.mb-n5 {
  margin-bottom: -3rem !important;
}

.mb-n6 {
  margin-bottom: -5rem !important;
}

/* RTL-vriendelijk voor start/end + assen */
.ms-n1 {
  margin-inline-start: -0.25rem !important;
}

.ms-n2 {
  margin-inline-start: -0.5rem !important;
}

.ms-n3 {
  margin-inline-start: -1rem !important;
}

.ms-n4 {
  margin-inline-start: -1.5rem !important;
}

.ms-n5 {
  margin-inline-start: -3rem !important;
}

.ms-n6 {
  margin-inline-start: -5rem !important;
}

.me-n1 {
  margin-inline-end: -0.25rem !important;
}

.me-n2 {
  margin-inline-end: -0.5rem !important;
}

.me-n3 {
  margin-inline-end: -1rem !important;
}

.me-n4 {
  margin-inline-end: -1.5rem !important;
}

.me-n5 {
  margin-inline-end: -3rem !important;
}

.me-n6 {
  margin-inline-end: -5rem !important;
}

.mx-n1 {
  margin-inline: -0.25rem !important;
}

.mx-n2 {
  margin-inline: -0.5rem !important;
}

.mx-n3 {
  margin-inline: -1rem !important;
}

.mx-n4 {
  margin-inline: -1.5rem !important;
}

.mx-n5 {
  margin-inline: -3rem !important;
}

.mx-n6 {
  margin-inline: -5rem !important;
}

/* links+rechts logisch */
.my-n1 {
  margin-block: -0.25rem !important;
}

.my-n2 {
  margin-block: -0.5rem !important;
}

.my-n3 {
  margin-block: -1rem !important;
}

.my-n4 {
  margin-block: -1.5rem !important;
}

.my-n5 {
  margin-block: -3rem !important;
}

.my-n6 {
  margin-block: -5rem !important;
}

/* boven+onder logisch */
/* Responsive varianten */
@media (min-width: 576px) {
  .m-sm-n1 {
    margin: -0.25rem !important;
  }
  .m-sm-n2 {
    margin: -0.5rem !important;
  }
  .m-sm-n3 {
    margin: -1rem !important;
  }
  .m-sm-n4 {
    margin: -1.5rem !important;
  }
  .m-sm-n5 {
    margin: -3rem !important;
  }
  .m-sm-n6 {
    margin: -5rem !important;
  }
  .mt-sm-n1 {
    margin-top: -0.25rem !important;
  }
  .mt-sm-n2 {
    margin-top: -0.5rem !important;
  }
  .mt-sm-n3 {
    margin-top: -1rem !important;
  }
  .mt-sm-n4 {
    margin-top: -1.5rem !important;
  }
  .mt-sm-n5 {
    margin-top: -3rem !important;
  }
  .mt-sm-n6 {
    margin-top: -5rem !important;
  }
  .mb-sm-n1 {
    margin-bottom: -0.25rem !important;
  }
  .mb-sm-n2 {
    margin-bottom: -0.5rem !important;
  }
  .mb-sm-n3 {
    margin-bottom: -1rem !important;
  }
  .mb-sm-n4 {
    margin-bottom: -1.5rem !important;
  }
  .mb-sm-n5 {
    margin-bottom: -3rem !important;
  }
  .mb-sm-n6 {
    margin-bottom: -5rem !important;
  }
  .ms-sm-n1 {
    margin-inline-start: -0.25rem !important;
  }
  .ms-sm-n2 {
    margin-inline-start: -0.5rem !important;
  }
  .ms-sm-n3 {
    margin-inline-start: -1rem !important;
  }
  .ms-sm-n4 {
    margin-inline-start: -1.5rem !important;
  }
  .ms-sm-n5 {
    margin-inline-start: -3rem !important;
  }
  .ms-sm-n6 {
    margin-inline-start: -5rem !important;
  }
  .me-sm-n1 {
    margin-inline-end: -0.25rem !important;
  }
  .me-sm-n2 {
    margin-inline-end: -0.5rem !important;
  }
  .me-sm-n3 {
    margin-inline-end: -1rem !important;
  }
  .me-sm-n4 {
    margin-inline-end: -1.5rem !important;
  }
  .me-sm-n5 {
    margin-inline-end: -3rem !important;
  }
  .me-sm-n6 {
    margin-inline-end: -5rem !important;
  }
  .mx-sm-n1 {
    margin-inline: -0.25rem !important;
  }
  .mx-sm-n2 {
    margin-inline: -0.5rem !important;
  }
  .mx-sm-n3 {
    margin-inline: -1rem !important;
  }
  .mx-sm-n4 {
    margin-inline: -1.5rem !important;
  }
  .mx-sm-n5 {
    margin-inline: -3rem !important;
  }
  .mx-sm-n6 {
    margin-inline: -5rem !important;
  }
  .my-sm-n1 {
    margin-block: -0.25rem !important;
  }
  .my-sm-n2 {
    margin-block: -0.5rem !important;
  }
  .my-sm-n3 {
    margin-block: -1rem !important;
  }
  .my-sm-n4 {
    margin-block: -1.5rem !important;
  }
  .my-sm-n5 {
    margin-block: -3rem !important;
  }
  .my-sm-n6 {
    margin-block: -5rem !important;
  }
}
@media (min-width: 768px) {
  .m-md-n1 {
    margin: -0.25rem !important;
  }
  .m-md-n2 {
    margin: -0.5rem !important;
  }
  .m-md-n3 {
    margin: -1rem !important;
  }
  .m-md-n4 {
    margin: -1.5rem !important;
  }
  .m-md-n5 {
    margin: -3rem !important;
  }
  .m-md-n6 {
    margin: -5rem !important;
  }
  .mt-md-n1 {
    margin-top: -0.25rem !important;
  }
  .mt-md-n2 {
    margin-top: -0.5rem !important;
  }
  .mt-md-n3 {
    margin-top: -1rem !important;
  }
  .mt-md-n4 {
    margin-top: -1.5rem !important;
  }
  .mt-md-n5 {
    margin-top: -3rem !important;
  }
  .mt-md-n6 {
    margin-top: -5rem !important;
  }
  .mb-md-n1 {
    margin-bottom: -0.25rem !important;
  }
  .mb-md-n2 {
    margin-bottom: -0.5rem !important;
  }
  .mb-md-n3 {
    margin-bottom: -1rem !important;
  }
  .mb-md-n4 {
    margin-bottom: -1.5rem !important;
  }
  .mb-md-n5 {
    margin-bottom: -3rem !important;
  }
  .mb-md-n6 {
    margin-bottom: -5rem !important;
  }
  .ms-md-n1 {
    margin-inline-start: -0.25rem !important;
  }
  .ms-md-n2 {
    margin-inline-start: -0.5rem !important;
  }
  .ms-md-n3 {
    margin-inline-start: -1rem !important;
  }
  .ms-md-n4 {
    margin-inline-start: -1.5rem !important;
  }
  .ms-md-n5 {
    margin-inline-start: -3rem !important;
  }
  .ms-md-n6 {
    margin-inline-start: -5rem !important;
  }
  .me-md-n1 {
    margin-inline-end: -0.25rem !important;
  }
  .me-md-n2 {
    margin-inline-end: -0.5rem !important;
  }
  .me-md-n3 {
    margin-inline-end: -1rem !important;
  }
  .me-md-n4 {
    margin-inline-end: -1.5rem !important;
  }
  .me-md-n5 {
    margin-inline-end: -3rem !important;
  }
  .me-md-n6 {
    margin-inline-end: -5rem !important;
  }
  .mx-md-n1 {
    margin-inline: -0.25rem !important;
  }
  .mx-md-n2 {
    margin-inline: -0.5rem !important;
  }
  .mx-md-n3 {
    margin-inline: -1rem !important;
  }
  .mx-md-n4 {
    margin-inline: -1.5rem !important;
  }
  .mx-md-n5 {
    margin-inline: -3rem !important;
  }
  .mx-md-n6 {
    margin-inline: -5rem !important;
  }
  .my-md-n1 {
    margin-block: -0.25rem !important;
  }
  .my-md-n2 {
    margin-block: -0.5rem !important;
  }
  .my-md-n3 {
    margin-block: -1rem !important;
  }
  .my-md-n4 {
    margin-block: -1.5rem !important;
  }
  .my-md-n5 {
    margin-block: -3rem !important;
  }
  .my-md-n6 {
    margin-block: -5rem !important;
  }
}
@media (min-width: 992px) {
  .m-lg-n1 {
    margin: -0.25rem !important;
  }
  .m-lg-n2 {
    margin: -0.5rem !important;
  }
  .m-lg-n3 {
    margin: -1rem !important;
  }
  .m-lg-n4 {
    margin: -1.5rem !important;
  }
  .m-lg-n5 {
    margin: -3rem !important;
  }
  .m-lg-n6 {
    margin: -5rem !important;
  }
  .mt-lg-n1 {
    margin-top: -0.25rem !important;
  }
  .mt-lg-n2 {
    margin-top: -0.5rem !important;
  }
  .mt-lg-n3 {
    margin-top: -1rem !important;
  }
  .mt-lg-n4 {
    margin-top: -1.5rem !important;
  }
  .mt-lg-n5 {
    margin-top: -3rem !important;
  }
  .mt-lg-n6 {
    margin-top: -5rem !important;
  }
  .mb-lg-n1 {
    margin-bottom: -0.25rem !important;
  }
  .mb-lg-n2 {
    margin-bottom: -0.5rem !important;
  }
  .mb-lg-n3 {
    margin-bottom: -1rem !important;
  }
  .mb-lg-n4 {
    margin-bottom: -1.5rem !important;
  }
  .mb-lg-n5 {
    margin-bottom: -3rem !important;
  }
  .mb-lg-n6 {
    margin-bottom: -5rem !important;
  }
  .ms-lg-n1 {
    margin-inline-start: -0.25rem !important;
  }
  .ms-lg-n2 {
    margin-inline-start: -0.5rem !important;
  }
  .ms-lg-n3 {
    margin-inline-start: -1rem !important;
  }
  .ms-lg-n4 {
    margin-inline-start: -1.5rem !important;
  }
  .ms-lg-n5 {
    margin-inline-start: -3rem !important;
  }
  .ms-lg-n6 {
    margin-inline-start: -5rem !important;
  }
  .me-lg-n1 {
    margin-inline-end: -0.25rem !important;
  }
  .me-lg-n2 {
    margin-inline-end: -0.5rem !important;
  }
  .me-lg-n3 {
    margin-inline-end: -1rem !important;
  }
  .me-lg-n4 {
    margin-inline-end: -1.5rem !important;
  }
  .me-lg-n5 {
    margin-inline-end: -3rem !important;
  }
  .me-lg-n6 {
    margin-inline-end: -5rem !important;
  }
  .mx-lg-n1 {
    margin-inline: -0.25rem !important;
  }
  .mx-lg-n2 {
    margin-inline: -0.5rem !important;
  }
  .mx-lg-n3 {
    margin-inline: -1rem !important;
  }
  .mx-lg-n4 {
    margin-inline: -1.5rem !important;
  }
  .mx-lg-n5 {
    margin-inline: -3rem !important;
  }
  .mx-lg-n6 {
    margin-inline: -5rem !important;
  }
  .my-lg-n1 {
    margin-block: -0.25rem !important;
  }
  .my-lg-n2 {
    margin-block: -0.5rem !important;
  }
  .my-lg-n3 {
    margin-block: -1rem !important;
  }
  .my-lg-n4 {
    margin-block: -1.5rem !important;
  }
  .my-lg-n5 {
    margin-block: -3rem !important;
  }
  .my-lg-n6 {
    margin-block: -5rem !important;
  }
}
@media (min-width: 1200px) {
  .m-xl-n1 {
    margin: -0.25rem !important;
  }
  .m-xl-n2 {
    margin: -0.5rem !important;
  }
  .m-xl-n3 {
    margin: -1rem !important;
  }
  .m-xl-n4 {
    margin: -1.5rem !important;
  }
  .m-xl-n5 {
    margin: -3rem !important;
  }
  .m-xl-n6 {
    margin: -5rem !important;
  }
  .mt-xl-n1 {
    margin-top: -0.25rem !important;
  }
  .mt-xl-n2 {
    margin-top: -0.5rem !important;
  }
  .mt-xl-n3 {
    margin-top: -1rem !important;
  }
  .mt-xl-n4 {
    margin-top: -1.5rem !important;
  }
  .mt-xl-n5 {
    margin-top: -3rem !important;
  }
  .mt-xl-n6 {
    margin-top: -5rem !important;
  }
  .mb-xl-n1 {
    margin-bottom: -0.25rem !important;
  }
  .mb-xl-n2 {
    margin-bottom: -0.5rem !important;
  }
  .mb-xl-n3 {
    margin-bottom: -1rem !important;
  }
  .mb-xl-n4 {
    margin-bottom: -1.5rem !important;
  }
  .mb-xl-n5 {
    margin-bottom: -3rem !important;
  }
  .mb-xl-n6 {
    margin-bottom: -5rem !important;
  }
  .ms-xl-n1 {
    margin-inline-start: -0.25rem !important;
  }
  .ms-xl-n2 {
    margin-inline-start: -0.5rem !important;
  }
  .ms-xl-n3 {
    margin-inline-start: -1rem !important;
  }
  .ms-xl-n4 {
    margin-inline-start: -1.5rem !important;
  }
  .ms-xl-n5 {
    margin-inline-start: -3rem !important;
  }
  .ms-xl-n6 {
    margin-inline-start: -5rem !important;
  }
  .me-xl-n1 {
    margin-inline-end: -0.25rem !important;
  }
  .me-xl-n2 {
    margin-inline-end: -0.5rem !important;
  }
  .me-xl-n3 {
    margin-inline-end: -1rem !important;
  }
  .me-xl-n4 {
    margin-inline-end: -1.5rem !important;
  }
  .me-xl-n5 {
    margin-inline-end: -3rem !important;
  }
  .me-xl-n6 {
    margin-inline-end: -5rem !important;
  }
  .mx-xl-n1 {
    margin-inline: -0.25rem !important;
  }
  .mx-xl-n2 {
    margin-inline: -0.5rem !important;
  }
  .mx-xl-n3 {
    margin-inline: -1rem !important;
  }
  .mx-xl-n4 {
    margin-inline: -1.5rem !important;
  }
  .mx-xl-n5 {
    margin-inline: -3rem !important;
  }
  .mx-xl-n6 {
    margin-inline: -5rem !important;
  }
  .my-xl-n1 {
    margin-block: -0.25rem !important;
  }
  .my-xl-n2 {
    margin-block: -0.5rem !important;
  }
  .my-xl-n3 {
    margin-block: -1rem !important;
  }
  .my-xl-n4 {
    margin-block: -1.5rem !important;
  }
  .my-xl-n5 {
    margin-block: -3rem !important;
  }
  .my-xl-n6 {
    margin-block: -5rem !important;
  }
}
@media (min-width: 1400px) {
  .m-xxl-n1 {
    margin: -0.25rem !important;
  }
  .m-xxl-n2 {
    margin: -0.5rem !important;
  }
  .m-xxl-n3 {
    margin: -1rem !important;
  }
  .m-xxl-n4 {
    margin: -1.5rem !important;
  }
  .m-xxl-n5 {
    margin: -3rem !important;
  }
  .m-xxl-n6 {
    margin: -5rem !important;
  }
  .mt-xxl-n1 {
    margin-top: -0.25rem !important;
  }
  .mt-xxl-n2 {
    margin-top: -0.5rem !important;
  }
  .mt-xxl-n3 {
    margin-top: -1rem !important;
  }
  .mt-xxl-n4 {
    margin-top: -1.5rem !important;
  }
  .mt-xxl-n5 {
    margin-top: -3rem !important;
  }
  .mt-xxl-n6 {
    margin-top: -5rem !important;
  }
  .mb-xxl-n1 {
    margin-bottom: -0.25rem !important;
  }
  .mb-xxl-n2 {
    margin-bottom: -0.5rem !important;
  }
  .mb-xxl-n3 {
    margin-bottom: -1rem !important;
  }
  .mb-xxl-n4 {
    margin-bottom: -1.5rem !important;
  }
  .mb-xxl-n5 {
    margin-bottom: -3rem !important;
  }
  .mb-xxl-n6 {
    margin-bottom: -5rem !important;
  }
  .ms-xxl-n1 {
    margin-inline-start: -0.25rem !important;
  }
  .ms-xxl-n2 {
    margin-inline-start: -0.5rem !important;
  }
  .ms-xxl-n3 {
    margin-inline-start: -1rem !important;
  }
  .ms-xxl-n4 {
    margin-inline-start: -1.5rem !important;
  }
  .ms-xxl-n5 {
    margin-inline-start: -3rem !important;
  }
  .ms-xxl-n6 {
    margin-inline-start: -5rem !important;
  }
  .me-xxl-n1 {
    margin-inline-end: -0.25rem !important;
  }
  .me-xxl-n2 {
    margin-inline-end: -0.5rem !important;
  }
  .me-xxl-n3 {
    margin-inline-end: -1rem !important;
  }
  .me-xxl-n4 {
    margin-inline-end: -1.5rem !important;
  }
  .me-xxl-n5 {
    margin-inline-end: -3rem !important;
  }
  .me-xxl-n6 {
    margin-inline-end: -5rem !important;
  }
  .mx-xxl-n1 {
    margin-inline: -0.25rem !important;
  }
  .mx-xxl-n2 {
    margin-inline: -0.5rem !important;
  }
  .mx-xxl-n3 {
    margin-inline: -1rem !important;
  }
  .mx-xxl-n4 {
    margin-inline: -1.5rem !important;
  }
  .mx-xxl-n5 {
    margin-inline: -3rem !important;
  }
  .mx-xxl-n6 {
    margin-inline: -5rem !important;
  }
  .my-xxl-n1 {
    margin-block: -0.25rem !important;
  }
  .my-xxl-n2 {
    margin-block: -0.5rem !important;
  }
  .my-xxl-n3 {
    margin-block: -1rem !important;
  }
  .my-xxl-n4 {
    margin-block: -1.5rem !important;
  }
  .my-xxl-n5 {
    margin-block: -3rem !important;
  }
  .my-xxl-n6 {
    margin-block: -5rem !important;
  }
}
/* ===== Responsive rounded utilities ===== */
/* Sluit aan op Bootstrap 5.3 CSS-variabelen met fallback-waardes */
/* Mixin: maak .rounded-<n> (of .rounded-<bp>-<n>) voor 1 of meerdere properties */
/* Basis (alle viewports) – zelfde naming als Bootstrap, maar met schalen 0..5 */
.rounded-0 {
  border-radius: 0 !important;
}

.rounded-1 {
  border-radius: var(--bs-border-radius-sm, 0.25rem) !important;
}

.rounded-2 {
  border-radius: var(--bs-border-radius, 0.375rem) !important;
}

.rounded-3 {
  border-radius: var(--bs-border-radius-lg, 0.5rem) !important;
}

.rounded-4 {
  border-radius: var(--bs-border-radius-xl, 1rem) !important;
}

.rounded-5 {
  border-radius: var(--bs-border-radius-xxl, 2rem) !important;
}

/* Varianten per zijde/zijde-paren (logisch → RTL-proof) */
.rounded-top-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.rounded-top-1 {
  border-top-left-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  border-top-right-radius: var(--bs-border-radius-sm, 0.25rem) !important;
}

.rounded-top-2 {
  border-top-left-radius: var(--bs-border-radius, 0.375rem) !important;
  border-top-right-radius: var(--bs-border-radius, 0.375rem) !important;
}

.rounded-top-3 {
  border-top-left-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  border-top-right-radius: var(--bs-border-radius-lg, 0.5rem) !important;
}

.rounded-top-4 {
  border-top-left-radius: var(--bs-border-radius-xl, 1rem) !important;
  border-top-right-radius: var(--bs-border-radius-xl, 1rem) !important;
}

.rounded-top-5 {
  border-top-left-radius: var(--bs-border-radius-xxl, 2rem) !important;
  border-top-right-radius: var(--bs-border-radius-xxl, 2rem) !important;
}

.rounded-bottom-0 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.rounded-bottom-1 {
  border-bottom-left-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  border-bottom-right-radius: var(--bs-border-radius-sm, 0.25rem) !important;
}

.rounded-bottom-2 {
  border-bottom-left-radius: var(--bs-border-radius, 0.375rem) !important;
  border-bottom-right-radius: var(--bs-border-radius, 0.375rem) !important;
}

.rounded-bottom-3 {
  border-bottom-left-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  border-bottom-right-radius: var(--bs-border-radius-lg, 0.5rem) !important;
}

.rounded-bottom-4 {
  border-bottom-left-radius: var(--bs-border-radius-xl, 1rem) !important;
  border-bottom-right-radius: var(--bs-border-radius-xl, 1rem) !important;
}

.rounded-bottom-5 {
  border-bottom-left-radius: var(--bs-border-radius-xxl, 2rem) !important;
  border-bottom-right-radius: var(--bs-border-radius-xxl, 2rem) !important;
}

.rounded-start-0 {
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
}

.rounded-start-1 {
  border-start-start-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  border-end-start-radius: var(--bs-border-radius-sm, 0.25rem) !important;
}

.rounded-start-2 {
  border-start-start-radius: var(--bs-border-radius, 0.375rem) !important;
  border-end-start-radius: var(--bs-border-radius, 0.375rem) !important;
}

.rounded-start-3 {
  border-start-start-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  border-end-start-radius: var(--bs-border-radius-lg, 0.5rem) !important;
}

.rounded-start-4 {
  border-start-start-radius: var(--bs-border-radius-xl, 1rem) !important;
  border-end-start-radius: var(--bs-border-radius-xl, 1rem) !important;
}

.rounded-start-5 {
  border-start-start-radius: var(--bs-border-radius-xxl, 2rem) !important;
  border-end-start-radius: var(--bs-border-radius-xxl, 2rem) !important;
}

.rounded-end-0 {
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

.rounded-end-1 {
  border-start-end-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  border-end-end-radius: var(--bs-border-radius-sm, 0.25rem) !important;
}

.rounded-end-2 {
  border-start-end-radius: var(--bs-border-radius, 0.375rem) !important;
  border-end-end-radius: var(--bs-border-radius, 0.375rem) !important;
}

.rounded-end-3 {
  border-start-end-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  border-end-end-radius: var(--bs-border-radius-lg, 0.5rem) !important;
}

.rounded-end-4 {
  border-start-end-radius: var(--bs-border-radius-xl, 1rem) !important;
  border-end-end-radius: var(--bs-border-radius-xl, 1rem) !important;
}

.rounded-end-5 {
  border-start-end-radius: var(--bs-border-radius-xxl, 2rem) !important;
  border-end-end-radius: var(--bs-border-radius-xxl, 2rem) !important;
}

/* Responsive varianten: .rounded-sm-2, .rounded-md-5, etc. */
@media (min-width: 576px) {
  .rounded-sm-0 {
    border-radius: 0 !important;
  }
  .rounded-sm-1 {
    border-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-sm-2 {
    border-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-sm-3 {
    border-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-sm-4 {
    border-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-sm-5 {
    border-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-sm-top-0 {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  .rounded-sm-top-1 {
    border-top-left-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-top-right-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-sm-top-2 {
    border-top-left-radius: var(--bs-border-radius, 0.375rem) !important;
    border-top-right-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-sm-top-3 {
    border-top-left-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-top-right-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-sm-top-4 {
    border-top-left-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-top-right-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-sm-top-5 {
    border-top-left-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-top-right-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-sm-bottom-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .rounded-sm-bottom-1 {
    border-bottom-left-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-sm-bottom-2 {
    border-bottom-left-radius: var(--bs-border-radius, 0.375rem) !important;
    border-bottom-right-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-sm-bottom-3 {
    border-bottom-left-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-sm-bottom-4 {
    border-bottom-left-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-sm-bottom-5 {
    border-bottom-left-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-sm-start-0 {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
  }
  .rounded-sm-start-1 {
    border-start-start-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-end-start-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-sm-start-2 {
    border-start-start-radius: var(--bs-border-radius, 0.375rem) !important;
    border-end-start-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-sm-start-3 {
    border-start-start-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-end-start-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-sm-start-4 {
    border-start-start-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-end-start-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-sm-start-5 {
    border-start-start-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-end-start-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-sm-end-0 {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
  }
  .rounded-sm-end-1 {
    border-start-end-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-end-end-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-sm-end-2 {
    border-start-end-radius: var(--bs-border-radius, 0.375rem) !important;
    border-end-end-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-sm-end-3 {
    border-start-end-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-end-end-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-sm-end-4 {
    border-start-end-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-end-end-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-sm-end-5 {
    border-start-end-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-end-end-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
}
@media (min-width: 768px) {
  .rounded-md-0 {
    border-radius: 0 !important;
  }
  .rounded-md-1 {
    border-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-md-2 {
    border-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-md-3 {
    border-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-md-4 {
    border-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-md-5 {
    border-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-md-top-0 {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  .rounded-md-top-1 {
    border-top-left-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-top-right-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-md-top-2 {
    border-top-left-radius: var(--bs-border-radius, 0.375rem) !important;
    border-top-right-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-md-top-3 {
    border-top-left-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-top-right-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-md-top-4 {
    border-top-left-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-top-right-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-md-top-5 {
    border-top-left-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-top-right-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-md-bottom-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .rounded-md-bottom-1 {
    border-bottom-left-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-md-bottom-2 {
    border-bottom-left-radius: var(--bs-border-radius, 0.375rem) !important;
    border-bottom-right-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-md-bottom-3 {
    border-bottom-left-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-md-bottom-4 {
    border-bottom-left-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-md-bottom-5 {
    border-bottom-left-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-md-start-0 {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
  }
  .rounded-md-start-1 {
    border-start-start-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-end-start-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-md-start-2 {
    border-start-start-radius: var(--bs-border-radius, 0.375rem) !important;
    border-end-start-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-md-start-3 {
    border-start-start-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-end-start-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-md-start-4 {
    border-start-start-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-end-start-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-md-start-5 {
    border-start-start-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-end-start-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-md-end-0 {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
  }
  .rounded-md-end-1 {
    border-start-end-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-end-end-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-md-end-2 {
    border-start-end-radius: var(--bs-border-radius, 0.375rem) !important;
    border-end-end-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-md-end-3 {
    border-start-end-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-end-end-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-md-end-4 {
    border-start-end-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-end-end-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-md-end-5 {
    border-start-end-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-end-end-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
}
@media (min-width: 992px) {
  .rounded-lg-0 {
    border-radius: 0 !important;
  }
  .rounded-lg-1 {
    border-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-lg-2 {
    border-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-lg-3 {
    border-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-lg-4 {
    border-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-lg-5 {
    border-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-lg-top-0 {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  .rounded-lg-top-1 {
    border-top-left-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-top-right-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-lg-top-2 {
    border-top-left-radius: var(--bs-border-radius, 0.375rem) !important;
    border-top-right-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-lg-top-3 {
    border-top-left-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-top-right-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-lg-top-4 {
    border-top-left-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-top-right-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-lg-top-5 {
    border-top-left-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-top-right-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-lg-bottom-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .rounded-lg-bottom-1 {
    border-bottom-left-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-lg-bottom-2 {
    border-bottom-left-radius: var(--bs-border-radius, 0.375rem) !important;
    border-bottom-right-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-lg-bottom-3 {
    border-bottom-left-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-lg-bottom-4 {
    border-bottom-left-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-lg-bottom-5 {
    border-bottom-left-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-lg-start-0 {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
  }
  .rounded-lg-start-1 {
    border-start-start-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-end-start-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-lg-start-2 {
    border-start-start-radius: var(--bs-border-radius, 0.375rem) !important;
    border-end-start-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-lg-start-3 {
    border-start-start-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-end-start-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-lg-start-4 {
    border-start-start-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-end-start-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-lg-start-5 {
    border-start-start-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-end-start-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-lg-end-0 {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
  }
  .rounded-lg-end-1 {
    border-start-end-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-end-end-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-lg-end-2 {
    border-start-end-radius: var(--bs-border-radius, 0.375rem) !important;
    border-end-end-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-lg-end-3 {
    border-start-end-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-end-end-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-lg-end-4 {
    border-start-end-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-end-end-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-lg-end-5 {
    border-start-end-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-end-end-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
}
@media (min-width: 1200px) {
  .rounded-xl-0 {
    border-radius: 0 !important;
  }
  .rounded-xl-1 {
    border-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-xl-2 {
    border-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-xl-3 {
    border-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-xl-4 {
    border-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-xl-5 {
    border-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-xl-top-0 {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  .rounded-xl-top-1 {
    border-top-left-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-top-right-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-xl-top-2 {
    border-top-left-radius: var(--bs-border-radius, 0.375rem) !important;
    border-top-right-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-xl-top-3 {
    border-top-left-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-top-right-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-xl-top-4 {
    border-top-left-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-top-right-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-xl-top-5 {
    border-top-left-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-top-right-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-xl-bottom-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .rounded-xl-bottom-1 {
    border-bottom-left-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-xl-bottom-2 {
    border-bottom-left-radius: var(--bs-border-radius, 0.375rem) !important;
    border-bottom-right-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-xl-bottom-3 {
    border-bottom-left-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-xl-bottom-4 {
    border-bottom-left-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-xl-bottom-5 {
    border-bottom-left-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-xl-start-0 {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
  }
  .rounded-xl-start-1 {
    border-start-start-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-end-start-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-xl-start-2 {
    border-start-start-radius: var(--bs-border-radius, 0.375rem) !important;
    border-end-start-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-xl-start-3 {
    border-start-start-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-end-start-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-xl-start-4 {
    border-start-start-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-end-start-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-xl-start-5 {
    border-start-start-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-end-start-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-xl-end-0 {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
  }
  .rounded-xl-end-1 {
    border-start-end-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-end-end-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-xl-end-2 {
    border-start-end-radius: var(--bs-border-radius, 0.375rem) !important;
    border-end-end-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-xl-end-3 {
    border-start-end-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-end-end-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-xl-end-4 {
    border-start-end-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-end-end-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-xl-end-5 {
    border-start-end-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-end-end-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
}
@media (min-width: 1400px) {
  .rounded-xxl-0 {
    border-radius: 0 !important;
  }
  .rounded-xxl-1 {
    border-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-xxl-2 {
    border-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-xxl-3 {
    border-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-xxl-4 {
    border-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-xxl-5 {
    border-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-xxl-top-0 {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  .rounded-xxl-top-1 {
    border-top-left-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-top-right-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-xxl-top-2 {
    border-top-left-radius: var(--bs-border-radius, 0.375rem) !important;
    border-top-right-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-xxl-top-3 {
    border-top-left-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-top-right-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-xxl-top-4 {
    border-top-left-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-top-right-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-xxl-top-5 {
    border-top-left-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-top-right-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-xxl-bottom-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .rounded-xxl-bottom-1 {
    border-bottom-left-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-xxl-bottom-2 {
    border-bottom-left-radius: var(--bs-border-radius, 0.375rem) !important;
    border-bottom-right-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-xxl-bottom-3 {
    border-bottom-left-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-xxl-bottom-4 {
    border-bottom-left-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-xxl-bottom-5 {
    border-bottom-left-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-bottom-right-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-xxl-start-0 {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
  }
  .rounded-xxl-start-1 {
    border-start-start-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-end-start-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-xxl-start-2 {
    border-start-start-radius: var(--bs-border-radius, 0.375rem) !important;
    border-end-start-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-xxl-start-3 {
    border-start-start-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-end-start-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-xxl-start-4 {
    border-start-start-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-end-start-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-xxl-start-5 {
    border-start-start-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-end-start-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
  .rounded-xxl-end-0 {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
  }
  .rounded-xxl-end-1 {
    border-start-end-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-end-end-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }
  .rounded-xxl-end-2 {
    border-start-end-radius: var(--bs-border-radius, 0.375rem) !important;
    border-end-end-radius: var(--bs-border-radius, 0.375rem) !important;
  }
  .rounded-xxl-end-3 {
    border-start-end-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    border-end-end-radius: var(--bs-border-radius-lg, 0.5rem) !important;
  }
  .rounded-xxl-end-4 {
    border-start-end-radius: var(--bs-border-radius-xl, 1rem) !important;
    border-end-end-radius: var(--bs-border-radius-xl, 1rem) !important;
  }
  .rounded-xxl-end-5 {
    border-start-end-radius: var(--bs-border-radius-xxl, 2rem) !important;
    border-end-end-radius: var(--bs-border-radius-xxl, 2rem) !important;
  }
}
.bg-grijs {
  background-color: rgba(142, 142, 141, 0.2);
}

.bg-groen {
  background-color: rgba(69, 104, 74, 0.2);
}

.bg-groen2 {
  background-color: #89c793;
}

.bg-rood {
  background-color: #cf0411;
}

.groen {
  color: #45684a !important;
}

.lichtgroen {
  color: #89c793 !important;
}

.blauw {
  color: #1c3583 !important;
}

.oranje {
  color: #f5ad5c !important;
}

.magenta {
  color: #c00d5d !important;
}

.zwart {
  color: #1d1d1b !important;
}

.rood {
  color: #cf0411 !important;
}

.gradient1 {
  background-color: #45684a; /* fallback */
  background-image: linear-gradient(90deg, #45684a 0%, rgb(120, 161, 123) 100%);
}

.gradient2 {
  background-color: #4e4849; /* fallback */
  background-image: linear-gradient(0deg, #494446 0%, #8b7565 100%);
}

.gradient3 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #338989 100%);
}

.gradient4 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

html, body {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  font-size: clamp(1rem, 4vw, 1.1rem);
  font-weight: 400;
  line-height: 1.4;
  color: #45684a;
  background-color: rgba(69, 104, 74, 0);
  -webkit-font-smoothing: antialiased; /* WebKit/Blink */
  -moz-osx-font-smoothing: grayscale; /* macOS Firefox */
  text-rendering: optimizeLegibility; /* betere kerning/liga's bij grotere tekst */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-synthesis: none;
}

.table {
  --bs-table-color: #45684a;
  --bs-table-striped-color: #45684a;
  --bs-table-hover-color: #45684a;
}
.table th, .table td {
  color: inherit;
}
.table thead th {
  color: inherit;
}

.table a {
  color: #45684a;
  text-decoration: underline;
}

.leader1 {
  font-family: "Mynerve", cursive;
  margin: 0;
  padding: 0;
  line-height: 1.1;
  color: #45684a;
  font-weight: 600;
  font-size: clamp(3.5rem, 4vw, 5rem);
}

.leader2 {
  font-family: "Mynerve", cursive;
  margin: 0;
  padding: 0;
  line-height: 1.1;
  color: #89c793;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
}

h1, h2, h3, h4, h5 {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.3;
  color: #45684a;
}

h1 {
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 600;
}

h2 {
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  font-weight: 600;
  margin-bottom: 0.7rem;
}

h3 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 600;
  margin-bottom: 0.7rem;
}

h4 {
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  font-weight: 600;
  margin-bottom: 0.7rem;
}

h5 {
  font-size: clamp(1rem, 3.5vw, 1.2rem);
  font-weight: 600;
  margin-bottom: 0.6rem;
}

b, strong {
  font-weight: bold;
}

i, em {
  font-style: italic;
}

.bg-links {
  position: relative;
  z-index: 1;
  border-radius: var(--bs-border-radius-xl, 1rem);
}
.bg-links::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-60px - 1rem);
  width: calc(60px + 3rem);
  background-color: inherit;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  z-index: -1;
}

.rotate-5 {
  transform: rotate(5deg);
}

.rotate-10 {
  transform: rotate(10deg);
}

.rotate-min-5 {
  transform: rotate(-5deg);
}

.rotate-min-10 {
  transform: rotate(-10deg);
}

/* achtergronden voor knoppen/banners */
.achtergrond1 {
  position: relative;
  overflow: hidden;
  background-image: url("/images/kleurschakering.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.achtergrond2 {
  position: relative;
  overflow: hidden;
  background-image: url("/images/kleurschakering2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.achtergrond3 {
  position: relative;
  overflow: hidden;
  background-image: url("/images/kleurschakering3.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.achtergrond4 {
  position: relative;
  overflow: hidden;
  background-image: url("/images/kleurschakering4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.achtergrond5 {
  position: relative;
  overflow: hidden;
  background-image: url("/images/kleurschakering5.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.handwritten {
  font-family: "Mynerve", cursive;
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  font-weight: 400;
  line-height: 1.7;
}

/* Maak alle images in contentblokken responsief zoals .img-fluid */
.content-section .content-body img,
.content-section picture > img {
  max-width: 100%;
  height: auto;
}

/* Optioneel: nette blok-opmaak + centreren */
.content-section .content-body img {
  display: block; /* voorkomt inline-gap */
  margin-inline: auto; /* centreer als kleiner dan container */
}

/* Wil je een plaatje juist NIET schalen? geef 'no-fluid' */
.content-section .content-body img.no-fluid {
  max-width: none;
  height: auto;
}

/* Extra robuustheid: overschrijf eventueel inline width/height uit de editor */
.content-section .content-body img[style*=width] {
  width: auto !important; /* laat max-width het werk doen */
}

.content-section .content-body img[width] {
  width: auto; /* HTML-attribuut overschrijven */
}

/* 1) Tekstkleur laten erven voor headings + content */
.content-section .content-kolom,
.content-section .content-body {
  color: inherit;
}

.content-section .content-kolom h1,
.content-section .content-kolom h2,
.content-section .content-kolom h3,
.content-section .content-kolom h4,
.content-section .content-kolom h5,
.content-section .content-kolom h6 {
  color: inherit;
}

/* 2) Links kleuren mee met de tekst, MAAR géén 'button-achtige' links */
.content-section .content-body a:not([class*=btn]) {
  color: currentColor;
  text-decoration-color: currentColor;
}

.content-section .content-body a:not([class*=btn]):hover {
  opacity: 0.85;
}

/* 3) (optioneel) inline SVG/icons in content laten meekleuren */
.content-section .content-body svg {
  fill: currentColor;
  stroke: currentColor;
}

/* Masker 1 – basis: vullen zoals een background cover */
.masker1 {
  /* Shorthand met CSS custom properties voor gemak */
  --mask-size: cover; /* of: contain */
  --mask-position: 50% 50%; /* center */
  /* Standaard (moderne browsers) */
  mask: url("/images/masker1.svg") no-repeat var(--mask-position)/var(--mask-size);
  /* Safari/WebKit */
  -webkit-mask: url("/images/masker1.svg") no-repeat var(--mask-position)/var(--mask-size);
}

/* Extra helpers (optioneel) */
.masker1--contain {
  --mask-size: contain;
} /* hele SVG zichtbaar, kan “brievenbus”-randen geven */
.masker1--cover {
  --mask-size: cover;
} /* vult container, kan randjes wegvallen */
.masker1--top {
  --mask-position: 50% 0%;
} /* mask uitlijnen naar boven */
.masker1--bottom {
  --mask-position: 50% 100%;
} /* naar onderen */
.masker1--left {
  --mask-position: 0% 50%;
}

.masker1--right {
  --mask-position: 100% 50%;
}

/* Fallback styling voor browsers zonder mask (optioneel) */
@supports not ((mask-image: url("/images/masker1.svg")) or (-webkit-mask-image: url("/images/masker1.svg"))) {
  .masker1 { /* gewoon rechthoekig tonen of bv. afgeronde hoeken */
    border-radius: 1rem;
  }
}
/* Masker 1 – basis: vullen zoals een background cover */
.masker2 {
  /* Shorthand met CSS custom properties voor gemak */
  --mask-size: cover; /* of: contain */
  --mask-position: 50% 50%; /* center */
  /* Standaard (moderne browsers) */
  mask: url("/images/masker2.svg") no-repeat var(--mask-position)/var(--mask-size);
  /* Safari/WebKit */
  -webkit-mask: url("/images/masker2.svg") no-repeat var(--mask-position)/var(--mask-size);
}

/* Extra helpers (optioneel) */
.masker1--contain {
  --mask-size: contain;
} /* hele SVG zichtbaar, kan “brievenbus”-randen geven */
.masker1--cover {
  --mask-size: cover;
} /* vult container, kan randjes wegvallen */
.masker1--top {
  --mask-position: 50% 0%;
} /* mask uitlijnen naar boven */
.masker1--bottom {
  --mask-position: 50% 100%;
} /* naar onderen */
.masker1--left {
  --mask-position: 0% 50%;
}

.masker1--right {
  --mask-position: 100% 50%;
}

/* Fallback styling voor browsers zonder mask (optioneel) */
@supports not ((mask-image: url("/images/masker2.svg")) or (-webkit-mask-image: url("/images/masker2.svg"))) {
  .masker1 { /* gewoon rechthoekig tonen of bv. afgeronde hoeken */
    border-radius: 1rem;
  }
}
.bg-grijs {
  background-color: rgba(142, 142, 141, 0.2);
}

.bg-groen {
  background-color: rgba(69, 104, 74, 0.2);
}

.bg-groen2 {
  background-color: #89c793;
}

.bg-rood {
  background-color: #cf0411;
}

.groen {
  color: #45684a !important;
}

.lichtgroen {
  color: #89c793 !important;
}

.blauw {
  color: #1c3583 !important;
}

.oranje {
  color: #f5ad5c !important;
}

.magenta {
  color: #c00d5d !important;
}

.zwart {
  color: #1d1d1b !important;
}

.rood {
  color: #cf0411 !important;
}

.gradient1 {
  background-color: #45684a; /* fallback */
  background-image: linear-gradient(90deg, #45684a 0%, rgb(120, 161, 123) 100%);
}

.gradient2 {
  background-color: #4e4849; /* fallback */
  background-image: linear-gradient(0deg, #494446 0%, #8b7565 100%);
}

.gradient3 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #338989 100%);
}

.gradient4 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

/* Hoogtes sticky bars
   LET OP: de echte waarden voor --topbar-h en --navbar-h
   worden nu gezet in menu.inc.php via CSS-variabelen.
   Hier doen we alleen nog de optelsom. */
:root {
  --sticky-offset: calc(var(--topbar-h) + var(--navbar-h));
}

/* Forceer horizontale weergave zodra we ≥ lg zijn (failsafe na resize) */
@media (min-width: 992px) {
  #site-navbar .navbar-nav {
    flex-direction: row !important;
  }
  #site-navbar .navbar-nav .nav-item {
    display: flex;
    align-items: center;
  }
}
/* Hover feedback in offcanvas (alleen op devices met muis) */
@media (hover: hover) and (pointer: fine) {
  .offcanvas .nav-link:hover,
  .offcanvas .dropdown-item:hover {
    background-color: var(--bs-secondary-bg);
  }
}
/* --------------------------------------------------
   Topbar (smalle balk bovenin)
-------------------------------------------------- */
.topbar {
  font-size: 0.8rem;
  line-height: var(--topbar-h);
  height: var(--topbar-h);
  position: relative;
  z-index: 1032;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.topbar .container, .topbar .container-xxl, .topbar .container-fluid {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
}
.topbar a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}
.topbar a:hover {
  color: rgb(224.4, 224.4, 224.4);
}
.topbar a i {
  vertical-align: -2px;
}

/* --------------------------------------------------
   Navbar (normaal in flow, niet sticky)
-------------------------------------------------- */
/* verwijder standaard caret van BS */
.dropdown-toggle::after {
  display: none !important;
}

.navbar {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 1031;
  background-color: #ffffff;
  backdrop-filter: none;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  transition: none;
  top: 0;
  --bs-navbar-active-color: $basiskleurtwee !important;
}

/* vanaf desktop (≥992px) de navbar onder de topbar positioneren o.b.v. variabele */
@media (min-width: 992px) {
  .navbar {
    top: var(--topbar-h);
  }
}
/* hamburger button clean */
.navbar-toggler {
  border: none;
  outline: none;
  box-shadow: none;
}

/* hoofdnavigatie (desktop) */
.navbar-nav {
  font-family: "Roboto", sans-serif;
  padding: 0;
  font-size: clamp(1.1rem, 3vw, 1.2rem);
  font-weight: 600;
  font-variation-settings: "wdth" 100;
  display: flex;
  gap: 1rem;
  color: #45684a;
}

/* nav-items (desktop) */
.nav-item {
  /* kleinere caret achter hoofditem (draait bij hover/open) */
}
.nav-item a {
  color: #45684a;
  text-decoration: none;
  transition: color 0.3s, background-color 0.2s;
  padding: 0.35rem 0.6rem;
}
.nav-item a:hover {
  color: #45684a;
  background-color: rgba(137, 199, 147, 0.2);
}
.nav-item .dropdown-caret {
  display: inline-block;
  font-size: 0.85em;
  line-height: 1;
  transition: transform 0.32s ease;
  transform-origin: 50% 45%;
  vertical-align: middle;
  margin-left: 0.35rem;
}
.nav-item.dropdown:hover .dropdown-caret, .nav-item.dropdown.show .dropdown-caret {
  transform: rotate(180deg);
}

/* focusring weg */
.navbar .nav-link:focus,
.navbar .nav-link:focus-visible,
.navbar .nav-link.dropdown-toggle:focus,
.navbar .nav-link.dropdown-toggle:focus-visible,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:focus-visible,
.navbar-toggler:focus,
.navbar-toggler:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* active state (zelfde afgeronde blokje) */
.nav-item.active a,
.nav-item .active {
  background-color: rgba(137, 199, 147, 0.2);
}

/* --------------------------------------------------
   Dropdown (desktop)
-------------------------------------------------- */
/* Hover-bridge: buffer houdt hover actief tussen toggle en menu */
.nav-item.dropdown {
  position: relative;
}
.nav-item.dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
  pointer-events: none;
}

.dropdown-menu {
  min-width: 16.5rem;
  padding: 0;
  font-size: 1rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  margin-top: 0;
  /* fade in/out */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.42s ease, visibility 0s linear 0.42s;
  pointer-events: none;
  z-index: 1000;
}
.dropdown-menu a.dropdown-item {
  color: #45684a;
  padding: 0.65rem 1rem;
  border-radius: 0;
  transition: background-color 0.15s ease;
}
.dropdown-menu a.dropdown-item:not(:first-child) {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.dropdown-menu a.dropdown-item:hover {
  background-color: rgba(69, 104, 74, 0.12);
}

/* tonen bij hover/open */
.dropdown:hover > .dropdown-menu,
.dropdown.show > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.42s ease, visibility 0s linear 0s;
  pointer-events: auto;
}

/* --------------------------------------------------
   Mobiele menu (offcanvas) — zelfde look & feel
-------------------------------------------------- */
/* VOLLE breedte offcanvas */
#offcanvasNavbar {
  --bs-offcanvas-width: 100vw;
}

@media (max-width: 991.98px) {
  .offcanvas-body {
    background-color: #2b3e2d;
    padding: 1rem 1.25rem; /* iets meer binnenmarge */
  }
  /* wrapper lijst krijgt rustige card-look (zonder te veel schaduw) */
  .offcanvas-body .list-unstyled {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0.75rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    margin: 0;
    overflow: hidden;
  }
  /* top-level items: gelijke hoogte & meer naar rechts */
  .offcanvas-body ul.list-unstyled > li.nav-item {
    margin: 0.1rem 0;
    border-radius: 0.75rem;
    overflow: hidden; /* hover-bg volgt de radius */
  }
  .offcanvas-body ul.list-unstyled > li.nav-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.9rem 1.25rem; /* gelijke hoogte + meer rechts */
    background: transparent !important;
    color: #45684a;
    text-decoration: none;
    border-radius: 0.75rem;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .offcanvas-body ul.list-unstyled > li.nav-item > a:hover {
    background-color: rgba(69, 104, 74, 0.12);
    color: #2b3e2d;
  }
  /* active same look */
  .offcanvas-body .nav-item.active > a,
  .offcanvas-body .nav-item > a.active {
    background-color: rgba(69, 104, 74, 0.2);
    color: #45684a;
    font-weight: 600;
  }
  /* caret voor items met submenu (kleiner + rotatie) */
  .offcanvas-body .nav-item.dropdown > a .dropdown-caret {
    display: inline-block;
    font-size: 0.85em;
    line-height: 1;
    margin-left: 0.5rem;
    transition: transform 0.32s ease;
    transform-origin: 50% 45%;
  }
  .offcanvas-body .nav-item.dropdown.show > a .dropdown-caret,
  .offcanvas-body .nav-item.dropdown.open > a .dropdown-caret,
  .offcanvas-body .nav-item.dropdown[aria-expanded=true] > a .dropdown-caret {
    transform: rotate(180deg);
  }
  /* Caret standaard recht; draait mee op basis van aria-expanded op de LI */
  .offcanvas-body .nav-item.dropdown > a .dropdown-caret {
    transform: rotate(0);
    transition: transform 0.28s ease;
  }
  .offcanvas-body .nav-item.dropdown[aria-expanded=true] > a .dropdown-caret {
    transform: rotate(180deg);
  }
  /* SUBMENU: geen card/shadow meer; alleen subtiele lijnen boven/onder wanneer open */
  .offcanvas-body .sub-menu {
    background: #fff;
    border: none; /* weg met de rand */
    box-shadow: none; /* weg met de schaduw */
    margin: 0; /* geen extra ruimte als dicht */
    margin-left: 14px; /* geen extra ruimte als dicht */
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.35s ease;
  }
  /* wanneer parent open is, toon submenu + subtiele top/bottom lijn */
  .offcanvas-body .nav-item.dropdown.show > .sub-menu,
  .offcanvas-body .nav-item.dropdown.open > .sub-menu {
    max-height: 1200px;
    opacity: 1;
  }
  /* submenu items: iets extra inspringen en strakke scheiding tussen items */
  .offcanvas-body .sub-menu li.nav-item {
    margin: 0;
  }
  .offcanvas-body .sub-menu li.nav-item a {
    display: block;
    padding: 0.75rem 1.5rem 0.75rem 1.75rem; /* meer naar rechts */
    color: #45684a;
    text-decoration: none;
    background: #fff;
    transition: background-color 0.15s ease;
  }
  .offcanvas-body .sub-menu li.nav-item a:not(:first-child) {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  .offcanvas-body .sub-menu li.nav-item a:hover {
    background-color: rgba(69, 104, 74, 0.12);
  }
  /* focus neutraliseren */
  .offcanvas-body .nav-item a:focus,
  .offcanvas-body .nav-item a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
}
/* ==================================================
   Hamburger → Cross animatie (via aria-expanded)
==================================================*/
.navbar-toggler .burger {
  position: relative;
  width: 28px;
  height: 20px;
  display: inline-block;
}

.navbar-toggler .burger .line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #45684a;
  transition: transform 0.28s ease, opacity 0.2s ease, top 0.28s ease, bottom 0.28s ease;
}

.navbar-toggler .burger .line1 {
  top: 0;
}

.navbar-toggler .burger .line2 {
  top: 9px;
}

.navbar-toggler .burger .line3 {
  bottom: 0;
}

/* Bootstrap/JS zet aria-expanded - onze animatie reageert hierop */
.navbar-toggler[aria-expanded=true] .burger .line1 {
  top: 9px;
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded=true] .burger .line2 {
  opacity: 0;
}

.navbar-toggler[aria-expanded=true] .burger .line3 {
  bottom: auto;
  top: 9px;
  transform: rotate(-45deg);
}

/* veiligheid */
.content-section {
  position: relative;
  z-index: 1;
}

.bg-grijs {
  background-color: rgba(142, 142, 141, 0.2);
}

.bg-groen {
  background-color: rgba(69, 104, 74, 0.2);
}

.bg-groen2 {
  background-color: #89c793;
}

.bg-rood {
  background-color: #cf0411;
}

.groen {
  color: #45684a !important;
}

.lichtgroen {
  color: #89c793 !important;
}

.blauw {
  color: #1c3583 !important;
}

.oranje {
  color: #f5ad5c !important;
}

.magenta {
  color: #c00d5d !important;
}

.zwart {
  color: #1d1d1b !important;
}

.rood {
  color: #cf0411 !important;
}

.gradient1 {
  background-color: #45684a; /* fallback */
  background-image: linear-gradient(90deg, #45684a 0%, rgb(120, 161, 123) 100%);
}

.gradient2 {
  background-color: #4e4849; /* fallback */
  background-image: linear-gradient(0deg, #494446 0%, #8b7565 100%);
}

.gradient3 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #338989 100%);
}

.gradient4 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

/* spacer vóór de headerfoto zodat die niet onder de sticky menu's valt */
.sticky-offset {
  height: var(--sticky-offset);
}

/* bonus: anchors/scroll naar secties vallen ook niet onder header */
.header,
section[id] {
  scroll-margin-top: var(--sticky-offset);
}

.header {
  position: relative;
  overflow: hidden;
  min-height: 350px;
  z-index: 1;
}

.header picture,
.header img,
.header video {
  width: 100%;
  height: 100%;
  min-height: 350px;
  max-height: 800px;
  object-fit: cover;
}

.header-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.header-overlay .container-xxl,
.header-overlay .row,
.header-overlay .header-block {
  pointer-events: auto;
}

/* Contentblok basis (je kunt dit vrij stylen of leeg laten) */
.header-block {
  text-align: left;
}

.content-section {
  position: relative;
  z-index: 3; /* boven de foto */
}

/* ===== Header content animaties ===== */
@keyframes header-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Startstate (wanneer we .anim-on-scroll gebruiken) */
.anim-on-scroll {
  opacity: 0;
  transform: translateY(12px);
}

/* Als 'ie in beeld komt */
.anim-on-scroll.is-inview,
.anim-fade-up.is-inview {
  animation: header-fade-up 0.8s ease-out 0.1s forwards;
}

/* Stagger: animeren van directe children in een kleine golf */
.anim-stagger.is-inview > * {
  opacity: 0;
  transform: translateY(8px);
  animation: header-fade-up 0.6s ease-out forwards;
}

.anim-stagger.is-inview > *:nth-child(1) {
  animation-delay: 0.15s;
}

.anim-stagger.is-inview > *:nth-child(2) {
  animation-delay: 0.25s;
}

.anim-stagger.is-inview > *:nth-child(3) {
  animation-delay: 0.35s;
}

.anim-stagger.is-inview > *:nth-child(4) {
  animation-delay: 0.45s;
}

.anim-stagger.is-inview > *:nth-child(5) {
  animation-delay: 0.55s;
}

/* Respecteer gebruikersinstelling: minder beweging */
@media (prefers-reduced-motion: reduce) {
  .anim-on-scroll,
  .anim-fade-up,
  .anim-stagger,
  .anim-stagger > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* 1) Voorkom horizontale scroll in content-sectie op small screens */
@media (max-width: 767.98px) {
  .content-section {
    overflow-x: clip;
  } /* modern & netter dan hidden */
}
/* 2) Flex children mogen krimpen → geen “duw” buiten beeld */
.content-section .d-flex,
.content-section .col {
  min-width: 0;
}

/* 3) Lange woorden/URL’s in CMS-content mogen breken */
.content-section .content-body {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Optioneel: wat responsive fine-tuning */
@media (min-width: 992px) {
  .header {
    min-height: 380px;
  }
}
.bg-grijs {
  background-color: rgba(142, 142, 141, 0.2);
}

.bg-groen {
  background-color: rgba(69, 104, 74, 0.2);
}

.bg-groen2 {
  background-color: #89c793;
}

.bg-rood {
  background-color: #cf0411;
}

.groen {
  color: #45684a !important;
}

.lichtgroen {
  color: #89c793 !important;
}

.blauw {
  color: #1c3583 !important;
}

.oranje {
  color: #f5ad5c !important;
}

.magenta {
  color: #c00d5d !important;
}

.zwart {
  color: #1d1d1b !important;
}

.rood {
  color: #cf0411 !important;
}

.gradient1 {
  background-color: #45684a; /* fallback */
  background-image: linear-gradient(90deg, #45684a 0%, rgb(120, 161, 123) 100%);
}

.gradient2 {
  background-color: #4e4849; /* fallback */
  background-image: linear-gradient(0deg, #494446 0%, #8b7565 100%);
}

.gradient3 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #338989 100%);
}

.gradient4 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

footer {
  font-size: clamp(1rem, 3vw, 1rem) !important;
  color: white;
}
footer a {
  color: white;
  text-decoration: underline;
  transition: color 0.3s ease;
}
footer a:hover {
  color: #45684a;
}
footer h1, footer h2, footer h3 {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 400;
  color: white;
}
footer .copyright-regel {
  font-size: clamp(0.9rem, 3vw, 0.9rem) !important;
  color: #89c793;
}
footer .copyright-regel a {
  color: #89c793;
  text-decoration: underline;
  transition: color 0.3s ease;
}
footer .copyright-regel a:hover {
  color: #89c793;
}

/* pas .footer-blok aan naar jouw blok-wrapper selector */
.bg-grijs {
  background-color: rgba(142, 142, 141, 0.2);
}

.bg-groen {
  background-color: rgba(69, 104, 74, 0.2);
}

.bg-groen2 {
  background-color: #89c793;
}

.bg-rood {
  background-color: #cf0411;
}

.groen {
  color: #45684a !important;
}

.lichtgroen {
  color: #89c793 !important;
}

.blauw {
  color: #1c3583 !important;
}

.oranje {
  color: #f5ad5c !important;
}

.magenta {
  color: #c00d5d !important;
}

.zwart {
  color: #1d1d1b !important;
}

.rood {
  color: #cf0411 !important;
}

.gradient1 {
  background-color: #45684a; /* fallback */
  background-image: linear-gradient(90deg, #45684a 0%, rgb(120, 161, 123) 100%);
}

.gradient2 {
  background-color: #4e4849; /* fallback */
  background-image: linear-gradient(0deg, #494446 0%, #8b7565 100%);
}

.gradient3 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #338989 100%);
}

.gradient4 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

.navbar-toggler {
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: none;
}

.toggler-icon {
  position: relative;
  width: 24px;
  height: 21px;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.toggler-icon .line {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background: #45684a;
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
}

/* Positioneer de lijnen als een hamburger */
.toggler-icon .line.line1 {
  top: 0;
}

.toggler-icon .line.line2 {
  top: 9px;
}

.toggler-icon .line.line3 {
  top: 18px;
}

/* Wanneer de knop open staat (class .open toegevoegd) */
.navbar-toggler.open .toggler-icon .line.line1 {
  top: 9px;
  transform: rotate(45deg);
}

.navbar-toggler.open .toggler-icon .line.line2 {
  opacity: 0;
}

.navbar-toggler.open .toggler-icon .line.line3 {
  top: 9px;
  transform: rotate(-45deg);
}

.tekstbijhamburger {
  font-family: "Bebas Neue", sans-serif;
}

/* Hover: witte achtergrond, contrasterende tekst/icon */
.navbar .navbar-toggler.btn-outline-secondary {
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  color: #45684a;
}

.navbar .navbar-toggler.btn-outline-secondary .bi,
.navbar .navbar-toggler.btn-outline-secondary .tekstbijhamburger {
  color: inherit;
  transition: color 0.2s ease;
}

/* Overrule Bootstrap hover → wit */
.navbar .navbar-toggler.btn-outline-secondary:hover,
.navbar .navbar-toggler.btn-outline-secondary:focus {
  background-color: #fff !important;
  border-color: #fff !important; /* optioneel, je hebt border-0 */
  color: #45684a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* optioneel subtiel */
}

.bg-grijs {
  background-color: rgba(142, 142, 141, 0.2);
}

.bg-groen {
  background-color: rgba(69, 104, 74, 0.2);
}

.bg-groen2 {
  background-color: #89c793;
}

.bg-rood {
  background-color: #cf0411;
}

.groen {
  color: #45684a !important;
}

.lichtgroen {
  color: #89c793 !important;
}

.blauw {
  color: #1c3583 !important;
}

.oranje {
  color: #f5ad5c !important;
}

.magenta {
  color: #c00d5d !important;
}

.zwart {
  color: #1d1d1b !important;
}

.rood {
  color: #cf0411 !important;
}

.gradient1 {
  background-color: #45684a; /* fallback */
  background-image: linear-gradient(90deg, #45684a 0%, rgb(120, 161, 123) 100%);
}

.gradient2 {
  background-color: #4e4849; /* fallback */
  background-image: linear-gradient(0deg, #494446 0%, #8b7565 100%);
}

.gradient3 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #338989 100%);
}

.gradient4 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

.breadcrumb-tab {
  position: relative;
  z-index: 3; /* altijd boven content & header */
  /* styling, subtiel zodat 'ie niet stoort */
}

/* 3) Optioneel: breadcrumb als 'tab' die net in de hero hangt */
.breadcrumb--over-hero {
  /* schuif een beetje omhoog; breadcrumb blijft zichtbaar dankzij z-index:3 */
  margin-top: clamp(-1rem, -3vw, -2rem);
}

.bg-grijs {
  background-color: rgba(142, 142, 141, 0.2);
}

.bg-groen {
  background-color: rgba(69, 104, 74, 0.2);
}

.bg-groen2 {
  background-color: #89c793;
}

.bg-rood {
  background-color: #cf0411;
}

.groen {
  color: #45684a !important;
}

.lichtgroen {
  color: #89c793 !important;
}

.blauw {
  color: #1c3583 !important;
}

.oranje {
  color: #f5ad5c !important;
}

.magenta {
  color: #c00d5d !important;
}

.zwart {
  color: #1d1d1b !important;
}

.rood {
  color: #cf0411 !important;
}

.gradient1 {
  background-color: #45684a; /* fallback */
  background-image: linear-gradient(90deg, #45684a 0%, rgb(120, 161, 123) 100%);
}

.gradient2 {
  background-color: #4e4849; /* fallback */
  background-image: linear-gradient(0deg, #494446 0%, #8b7565 100%);
}

.gradient3 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #338989 100%);
}

.gradient4 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

a {
  color: #45684a;
  text-decoration: underline;
}
a:hover {
  color: #89c793;
}

.btn1 {
  font-family: "Roboto", sans-serif;
  background-color: white;
  color: #45684a;
  padding: 0.75rem 1.5rem;
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 600;
  cursor: pointer;
  border-radius: 9999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  border: 0;
}
.btn1:hover {
  background-color: #2b3e2d;
  color: #89c793;
  transform: scale(1.05);
}

.btn2 {
  font-family: "Roboto", sans-serif;
  background-color: #45684a;
  color: white;
  padding: 0.75rem 1.5rem;
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 600;
  cursor: pointer;
  border-radius: 9999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  border: 0;
}
.btn2:hover {
  background-color: #89c793;
  color: white;
  transform: scale(1.05);
}

.btn3 {
  font-family: "Roboto", sans-serif;
  color: #2b3e2d;
  padding: 0.75rem 1.5rem;
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 600;
  cursor: pointer;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 2px #2b3e2d; /* inner stroke */
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}
.btn3:hover {
  color: #45684a;
  transform: scale(1.05);
  box-shadow: inset 0 0 0 2px #45684a; /* inner stroke */
}

.btn4 {
  font-family: "Roboto", sans-serif;
  color: white;
  padding: 0.75rem 1.5rem;
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 600;
  cursor: pointer;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 2px #fff; /* inner stroke */
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}
.btn4:hover {
  color: white;
  transform: scale(1.05);
  box-shadow: inset 0 0 0 2px #45684a; /* inner stroke */
}

.btn5 {
  font-family: "Roboto", sans-serif;
  background-color: #89c793;
  color: white;
  padding: 0.75rem 1.5rem;
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 600;
  cursor: pointer;
  border-radius: 9999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  border: 0;
}
.btn5:hover {
  background-color: #45684a;
  color: white;
  transform: scale(1.05);
}

.btn6 {
  font-family: "Roboto", sans-serif;
  background-color: #45684a;
  color: white;
  padding: 0.75rem 1.5rem;
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 600;
  cursor: pointer;
  border-radius: 9999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  border: 0;
}
.btn6:hover {
  background-color: #2b3e2d;
  color: white;
  transform: scale(1.05);
}

.btn7 {
  font-family: "Roboto", sans-serif;
  background-color: #89c793;
  color: white;
  padding: 0.75rem 1.5rem;
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 600;
  cursor: pointer;
  border-radius: 9999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  border: 0;
}
.btn7:hover {
  background-color: #45684a;
  color: white;
  transform: scale(1.05);
}

.btn1small {
  font-family: "Roboto", sans-serif;
  background-color: #89c793;
  color: white;
  font-size: clamp(1rem, 4vw, 1rem);
  font-weight: 600;
  cursor: pointer;
  border-radius: 9px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  border: 0;
}
.btn1small:hover {
  background-color: #2b3e2d;
  color: white;
  transform: scale(1.05);
}

.btn2small {
  color: white;
  padding: 0.5rem 1rem;
  font-size: clamp(0.7rem, 4vw, 0.9rem);
  font-weight: 500;
  cursor: pointer;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 2px #fff; /* inner stroke */
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}
.btn2small:hover {
  color: white;
  transform: scale(1.05);
  box-shadow: inset 0 0 0 2px #2b3e2d; /* inner stroke */
}

.btn3small {
  color: #2b3e2d;
  padding: 0.5rem 1rem;
  font-size: clamp(0.7rem, 4vw, 0.9rem);
  font-weight: 500;
  cursor: pointer;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 2px #2b3e2d; /* inner stroke */
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}
.btn3small:hover {
  color: #45684a;
  transform: scale(1.05);
  box-shadow: inset 0 0 0 2px #45684a; /* inner stroke */
}

.btn4small {
  color: white;
  padding: 0.5rem 1rem;
  font-size: clamp(0.7rem, 4vw, 0.9rem);
  font-weight: 500;
  cursor: pointer;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 2px #fff; /* inner stroke */
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}
.btn4small:hover {
  color: white;
  transform: scale(1.05);
  box-shadow: inset 0 0 0 2px #45684a; /* inner stroke */
}

.btn5small {
  background-color: #89c793;
  color: white;
  padding: 0.5rem 1rem;
  font-size: clamp(0.7rem, 4vw, 0.9rem);
  font-weight: 500;
  cursor: pointer;
  border-radius: 9999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  border: 0;
}
.btn5small:hover {
  background-color: #45684a;
  color: white;
  transform: scale(1.05);
}

.tekstkleur {
  color: #89c793;
}

.bg-grijs {
  background-color: rgba(142, 142, 141, 0.2);
}

.bg-groen {
  background-color: rgba(69, 104, 74, 0.2);
}

.bg-groen2 {
  background-color: #89c793;
}

.bg-rood {
  background-color: #cf0411;
}

.groen {
  color: #45684a !important;
}

.lichtgroen {
  color: #89c793 !important;
}

.blauw {
  color: #1c3583 !important;
}

.oranje {
  color: #f5ad5c !important;
}

.magenta {
  color: #c00d5d !important;
}

.zwart {
  color: #1d1d1b !important;
}

.rood {
  color: #cf0411 !important;
}

.gradient1 {
  background-color: #45684a; /* fallback */
  background-image: linear-gradient(90deg, #45684a 0%, rgb(120, 161, 123) 100%);
}

.gradient2 {
  background-color: #4e4849; /* fallback */
  background-image: linear-gradient(0deg, #494446 0%, #8b7565 100%);
}

.gradient3 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #338989 100%);
}

.gradient4 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

.card-body {
  color: #45684a;
}

.banner-card {
  position: relative;
  height: 0;
  padding-top: 50%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}
.banner-card .banner-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.banner-card .banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
}
.banner-card .banner-icon {
  margin: 0;
}
.banner-card .banner-title {
  margin-bottom: 0.5rem;
}
.banner-card .banner-text {
  margin: 0;
}
.banner-card .btn1 {
  margin: 0;
}
.banner-card .btn2 {
  margin: 0;
}

.project-card {
  position: relative;
  overflow: visible;
}

@media (min-width: 768px) {
  .project-thumb {
    transform: translateY(clamp(-16px, -3.5vw, -80px)); /* steek boven uit */
  }
}
.project-img {
  border: 4px solid #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.project-card:hover .project-img {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
}

.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0; /* achter alle kaart-inhoud */
  border-radius: inherit;
  background-image: var(--card-bg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto; /* altijd in de breedte zichtbaar (stretchen) */
  opacity: 0.1; /* ~10% */
  pointer-events: none;
}

/* Zorg dat inhoud er duidelijk boven ligt */
.project-card > .row,
.project-card .card-body {
  position: relative;
  z-index: 1;
}

/* Projectcard: footer-gradient van 3 → 4 blenden bij hover */
.project-card .gradient3 {
  position: relative; /* nodig voor ::before */
  overflow: hidden; /* nette randen */
  z-index: 0; /* maak eigen stacking context */
}

/* Overlay met gradient4 die we infaden */
.project-card .gradient3::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* boven de 3, onder de content */
  opacity: 0;
  transition: opacity 0.35s ease;
  /* >>> VUL HIER DEZELFDE BACKGROUND IN ALS JE .gradient4 <<< */
  /* Voorbeeld (vervang door jouw echte gradient4): */
  background: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

/* Zorg dat icon/inhoud boven de overlay blijven */
.project-card .gradient3 > * {
  position: relative;
  z-index: 2;
}

/* Hover/focus activeert de blend */
.project-card:hover .gradient3::before,
.project-card:focus-within .gradient3::before {
  opacity: 1; /* fade naar gradient4 */
}

/* (optioneel) klein pijltje-animatie */
.project-card .gradient3 .bi {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.project-card:hover .gradient3 .bi,
.project-card:focus-within .gradient3 .bi {
  transform: translateX(8px);
  opacity: 0.95;
}

.bg-grijs {
  background-color: rgba(142, 142, 141, 0.2);
}

.bg-groen {
  background-color: rgba(69, 104, 74, 0.2);
}

.bg-groen2 {
  background-color: #89c793;
}

.bg-rood {
  background-color: #cf0411;
}

.groen {
  color: #45684a !important;
}

.lichtgroen {
  color: #89c793 !important;
}

.blauw {
  color: #1c3583 !important;
}

.oranje {
  color: #f5ad5c !important;
}

.magenta {
  color: #c00d5d !important;
}

.zwart {
  color: #1d1d1b !important;
}

.rood {
  color: #cf0411 !important;
}

.gradient1 {
  background-color: #45684a; /* fallback */
  background-image: linear-gradient(90deg, #45684a 0%, rgb(120, 161, 123) 100%);
}

.gradient2 {
  background-color: #4e4849; /* fallback */
  background-image: linear-gradient(0deg, #494446 0%, #8b7565 100%);
}

.gradient3 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #338989 100%);
}

.gradient4 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

.bg-grijs {
  background-color: rgba(142, 142, 141, 0.2);
}

.bg-groen {
  background-color: rgba(69, 104, 74, 0.2);
}

.bg-groen2 {
  background-color: #89c793;
}

.bg-rood {
  background-color: #cf0411;
}

.groen {
  color: #45684a !important;
}

.lichtgroen {
  color: #89c793 !important;
}

.blauw {
  color: #1c3583 !important;
}

.oranje {
  color: #f5ad5c !important;
}

.magenta {
  color: #c00d5d !important;
}

.zwart {
  color: #1d1d1b !important;
}

.rood {
  color: #cf0411 !important;
}

.gradient1 {
  background-color: #45684a; /* fallback */
  background-image: linear-gradient(90deg, #45684a 0%, rgb(120, 161, 123) 100%);
}

.gradient2 {
  background-color: #4e4849; /* fallback */
  background-image: linear-gradient(0deg, #494446 0%, #8b7565 100%);
}

.gradient3 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #338989 100%);
}

.gradient4 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

.blog {
  padding-top: 0;
}
.blog h1, .blog h2, .blog h3, .blog h4, .blog h5 {
  margin: 0;
  padding: 0;
  line-height: 1.3;
  margin-bottom: 10px;
  margin-top: 30px;
}

@media (min-width: 992px) {
  .blog {
    margin-top: 120px;
  }
}
.bg-grijs {
  background-color: rgba(142, 142, 141, 0.2);
}

.bg-groen {
  background-color: rgba(69, 104, 74, 0.2);
}

.bg-groen2 {
  background-color: #89c793;
}

.bg-rood {
  background-color: #cf0411;
}

.groen {
  color: #45684a !important;
}

.lichtgroen {
  color: #89c793 !important;
}

.blauw {
  color: #1c3583 !important;
}

.oranje {
  color: #f5ad5c !important;
}

.magenta {
  color: #c00d5d !important;
}

.zwart {
  color: #1d1d1b !important;
}

.rood {
  color: #cf0411 !important;
}

.gradient1 {
  background-color: #45684a; /* fallback */
  background-image: linear-gradient(90deg, #45684a 0%, rgb(120, 161, 123) 100%);
}

.gradient2 {
  background-color: #4e4849; /* fallback */
  background-image: linear-gradient(0deg, #494446 0%, #8b7565 100%);
}

.gradient3 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #338989 100%);
}

.gradient4 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

.activiteiten {
  color: #89c793;
}
.activiteiten h1, .activiteiten h2, .activiteiten h3, .activiteiten h4, .activiteiten h5 {
  margin: 0;
  padding: 0;
  line-height: 1.3;
  color: #89c793;
}

@media (min-width: 992px) {
  .activiteiten {
    margin-top: 0px;
  }
}
.bg-grijs {
  background-color: rgba(142, 142, 141, 0.2);
}

.bg-groen {
  background-color: rgba(69, 104, 74, 0.2);
}

.bg-groen2 {
  background-color: #89c793;
}

.bg-rood {
  background-color: #cf0411;
}

.groen {
  color: #45684a !important;
}

.lichtgroen {
  color: #89c793 !important;
}

.blauw {
  color: #1c3583 !important;
}

.oranje {
  color: #f5ad5c !important;
}

.magenta {
  color: #c00d5d !important;
}

.zwart {
  color: #1d1d1b !important;
}

.rood {
  color: #cf0411 !important;
}

.gradient1 {
  background-color: #45684a; /* fallback */
  background-image: linear-gradient(90deg, #45684a 0%, rgb(120, 161, 123) 100%);
}

.gradient2 {
  background-color: #4e4849; /* fallback */
  background-image: linear-gradient(0deg, #494446 0%, #8b7565 100%);
}

.gradient3 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #338989 100%);
}

.gradient4 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

#return-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #759eb3;
  width: 40px;
  height: 40px;
  display: block;
  text-decoration: none;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  display: none;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index: 9999;
}

#return-to-top i {
  color: #fff;
  margin: 0;
  position: relative;
  left: 7px;
  top: 0px;
  font-size: 26px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#return-to-top:hover {
  background-color: rgba(15, 116, 163, 0.8);
}

#return-to-top:hover i {
  color: #fff;
  top: -5px;
}

.bg-grijs {
  background-color: rgba(142, 142, 141, 0.2);
}

.bg-groen {
  background-color: rgba(69, 104, 74, 0.2);
}

.bg-groen2 {
  background-color: #89c793;
}

.bg-rood {
  background-color: #cf0411;
}

.groen {
  color: #45684a !important;
}

.lichtgroen {
  color: #89c793 !important;
}

.blauw {
  color: #1c3583 !important;
}

.oranje {
  color: #f5ad5c !important;
}

.magenta {
  color: #c00d5d !important;
}

.zwart {
  color: #1d1d1b !important;
}

.rood {
  color: #cf0411 !important;
}

.gradient1 {
  background-color: #45684a; /* fallback */
  background-image: linear-gradient(90deg, #45684a 0%, rgb(120, 161, 123) 100%);
}

.gradient2 {
  background-color: #4e4849; /* fallback */
  background-image: linear-gradient(0deg, #494446 0%, #8b7565 100%);
}

.gradient3 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #338989 100%);
}

.gradient4 {
  background-color: #0f4c64; /* fallback */
  background-image: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

.cookie-logo {
  width: 100px;
  height: auto;
}

/* Cookie rows - maak hele kop klikbaar, behoud nette spacing */
.cookie-row {
  border-bottom: 1px solid #e9ecef;
}

.cookie-row:last-child {
  border-bottom: 0;
}

.cookie-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.75rem 0.75rem;
  text-align: left;
  cursor: pointer;
}

.cookie-toggle:focus {
  outline: none;
}

.cookie-toggle:focus-visible {
  outline: 2px solid #86b7fe;
  outline-offset: 2px;
}

.cookie-title {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.cookie-desc {
  background: #f8f9fa;
}

@media (min-width: 576px) {
  .modal-footer .btn {
    min-width: 220px;
  }
}
/* Cookie modal: buttons 100% breed op mobiel, auto vanaf md */
.cookie-btn {
  width: 100%;
}

@media (min-width: 768px) {
  .cookie-btn {
    width: auto;
  }
}/*# sourceMappingURL=eigen.css.map */