/* =========================================================
   01. ROOT VARIABLES
   ========================================================= */

:root {
  --font-size-base: 1rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1rem;

  --underline-offset: 0.15rem;

  /* ±1.5px bij 17px root */
  --underline-thickness: 0.088235rem;
  --hr-line-thickness: 0.088235rem;

  --menu-gap: 1rem;

  /* content / pagina links-rechts */
  --page-x: 0.705882rem;

  /* hoofdmenu links-rechts */
  --nav-x: 0.705882rem;

  /* lijnen in menu/submenu links-rechts */
  --nav-line-x: var(--nav-x);

  /* hoofdmenu baseline systeem */
  --nav-line-height: 1;
  --nav-padding-top: 0.35rem;
  --nav-padding-bottom: 0.3rem;

  /* submenu baseline systeem */
  --submenu-top: 2.35rem;
  --submenu-line-height: 1;
  --submenu-padding-top: 0.12rem;
  --submenu-padding-bottom: 0.12rem;

  --text-color: #000;
  --bg-color: #fff;
  --link-color: #000;
  --footer-bg: #fff;
  --footer-text: #000;

  --font-family-sonsbeek: 'Nimbus Sans Cond L', sans-serif;
  --line-height: 1.25;

  --shape-col-gap: 2rem;
  --shape-overlap: 0.35rem;
}

.shape-gutter-right {
  padding-right:  0 !important;
}

.shape-gutter-left {
  padding-left: var(--shape-col-gap) !important;
}

.shape-gutter-right .sonsbeek-news-img-hoverblock {
  width: calc(100% + var(--shape-overlap)) !important;
  max-width: none !important;
}

.shape-gutter-right-trapeze {
  padding-right: 1rem !important;
}

.shape-gutter-right-trapeze-lg {
  padding-right: 1.6rem !important;
}

.shape-gutter-right-diamond {
  padding-right: 2.8rem !important;
}

.shape-gutter-left-art-club {
  padding-left: 2.7rem !important;
}

.shape-gutter-rectangle-169 {
  padding-left: 0.6rem !important;
}

/* Envelope stabiel maken */
.teaser-square-envelope {
  position: relative;
  width: 100%;
  aspect-ratio: 855 / 933;
  height: auto !important;
  margin-top: -24px !important;
  padding: 0 !important;
  overflow: visible;
}

.teaser-square-envelope .sonsbeek-news-img-shape.envelope {
  position: relative;
  width: 100% !important;
  aspect-ratio: 855 / 933;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.teaser-square-envelope svg.shape-border {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 855 / 933;
}

/* Tekst blijft binnen de envelop */
.teaser-square-envelope h3 {
  position: relative;
  z-index: 2;
}

.teaser-square-envelope {
  transform: translateY(-7.2%);
  margin-top: 0 !important;
}

@media (max-width: 767.98px) {
  .teaser-square-envelope {
    transform: none;
    margin-top: 0 !important;
  }
}

@media (max-width: 767.98px) {
  .shape-gutter-right,
  .shape-gutter-left {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .envelope-lift {
  transform: none;
  }
}

/* mobiel: alle shape-gutters uit */

@media (max-width: 767.98px) {
  .shape-gutter-right,
  .shape-gutter-left,
  .shape-gutter-right-trapeze,
  .shape-gutter-right-diamond,
  .shape-gutter-rectangle-169 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .shape-gutter-right .sonsbeek-news-img-hoverblock {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

}

/* =========================================================
   02. FONTS
   ========================================================= */

@font-face {
    font-family: 'Nimbus Sans Cond L';
    src: url('../fonts/NimbusSanConL-Bla.woff2') format('woff2'),
        url('../fonts/NimbusSanConL-Bla.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nimbus Sans Cond L';
    src: url('../fonts/NimbusSanConL-Bol.woff2') format('woff2'),
        url('../fonts/NimbusSanConL-Bol.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nimbus Sans Cond L';
    src: url('../fonts/NimbusSanConL-BolIta.woff2') format('woff2'),
        url('../fonts/NimbusSanConL-BolIta.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Nimbus Sans Cond L';
    src: url('../fonts/NimbusSanConL-Reg.woff2') format('woff2'),
        url('../fonts/NimbusSanConL-Reg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nimbus Sans Cond L';
    src: url('../fonts/NimbusSanConL-RegIta.woff2') format('woff2'),
        url('../fonts/NimbusSanConL-RegIta.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* =========================================================
   03. BASE / RESET
   ========================================================= */

html {
  font-size: 17px;
  overflow-x: hidden;
  scroll-behavior: auto !important;
}

html,
body {
  height: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-sonsbeek);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-color);
  background-color: var(--bg-color);
  margin: 0;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.container,
.container-fluid {
  box-sizing: border-box;
}

.container {
  position: relative;
}

main {
  flex: 1;
  margin: 0 auto;
  overflow-x: visible;
  padding: 0;
}

.sections {
  height: auto !important;
  margin: 0;
}

.intermediary section,
.intermediary footer {
  padding: 0 var(--page-x) !important;
}

.intermediary nav {
  padding-top: var(--nav-padding-top) !important;
  padding-right: var(--nav-x) !important;
  padding-bottom: var(--nav-padding-bottom) !important;
  padding-left: var(--nav-x) !important;
}

:root {
  --section-hr-x: 0.35rem;
}

.intermediary .content-sections > section {
  position: relative;
}

.intermediary .content-sections > section > .col-12:first-child {
  display: none !important;
}

.intermediary .content-sections > section::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--section-hr-x) - 0.05rem);
  right: calc(var(--section-hr-x) - 0.05rem);
  height: 0;
  border-top: var(--hr-line-thickness) solid var(--link-color) !important;
  z-index: 2;
}

.intermediary .content-sections > section#doemee::before {
  left: 1.05rem;
  right: 1.05rem;
}

.intermediary footer,
.intermediary footer .container,
.intermediary footer .container-fluid,
.intermediary footer .row,
.intermediary footer [class*="col-"] {
  padding-left: 0.35rem!important;
  padding-right: 0.35rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.intermediary footer hr {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- About intro basis ---------- */
/* =========================================================
   04. ABOUT TEMPLATE
   intro + ankeilers
   ========================================================= */

/* ---------- About intro basis ---------- */

.about-intro-row {
  margin: 0.75rem 0 0 0;
}

.about-intro-text {
  display: flex;
  align-items: stretch;
  padding-left: var(--page-x);
  padding-right: var(--page-x);
  margin: 0;
}

.about-intro-copy {
  width: 100%;
  min-height: 100%;
  margin-bottom: 0;
}

/* Rechterkolom: intro-svg boven, ankeilers eronder */
.about-intro-shape {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 var(--page-x) 0 0;
  margin: 0;
  overflow: visible;
}

/* SVG-blok mag volledige rechterkolom pakken */
.about-intro-shape .svg-wrapper {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* De link rond de SVG moet ook block zijn,
   anders kan absolute h3/positionering vreemd doen */
.about-intro-shape .svg-wrapper > a {
  display: block;
  position: relative;
  width: 100%;
}

/* Alleen de intro-SVG in deze kolom */
.about-intro-shape .svg-wrapper svg {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: top right;
}


/* ---------- About ankeilers direct onder intro-shape ---------- */

.about-ankeilers-col {
  width: 100%;
  padding: 0;
  margin: 0;
}

.about-ankeilers-col > .row {
  margin: 0;
  padding: 0;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.about-ankeilers-row {
  margin: 0;
  padding: 0;
}

/* ---------- About vacatures-wieber ---------- */

.teaser-diamond-about {
  position: relative;
  width: 100%;
  aspect-ratio: 992 / 625 !important;
  height: auto;
  overflow: visible;
}

.teaser-diamond-about svg {
  display: block;
  width: 100%;
  height: 100%;
}


/* =========================================================
   05. TYPOGRAPHY
   ========================================================= */

h1,
h3 {
  font-size: var(--font-size-xl);
  font-weight: 400;
  text-transform: uppercase;
}

h2 {
  font-size: var(--font-size-xl);
  font-weight: 400;
}

p {
  font-size: var(--font-size-base);
  line-height: var(--line-height);
}

figcaption {
  font-style: italic;
}

blockquote p {
  font-style: italic;
}

blockquote footer {
  font-style: normal;
}

footer p {
  margin: 0 auto;
}

.section-title {
  position: absolute;
  top: 0.3rem !important;
  left: 0;
  font-size: inherit;
  white-space: nowrap;
  pointer-events: none;
  visibility: visible;
  z-index: 1;
  text-transform: uppercase;
}

.text,
.section-title,
.section-title a {
  pointer-events: auto !important;
  z-index: 100 !important;
}

.max-width p {
  max-width: 77%;
}

.heroCarouselTitle {
  text-transform: uppercase;
}


/* =========================================================
   06. LINKS / BUTTONS / FOCUS STATES
   ========================================================= */

a,
a:hover,
button,
button:hover,
img,
img:hover,
.nav-link,
.nav-link:hover {
  transition: none !important;
}

img {
  transition: none !important;
}

a,
button,
.nav-link,
.menu-item {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline-thickness);
  text-decoration-skip-ink: none;
  color: var(--link-color);
  transition: none !important;
}

a:hover,
a:focus,
a:active,
button:hover,
button:focus,
button:active,
.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.menu-item:hover,
.menu-item:focus,
.menu-item:active {
  color: #B1B1B1;
  text-decoration-color: #B1B1B1;
  text-decoration-thickness: var(--underline-thickness);
  transition: none !important;
}

.active {
  color: #B1B1B1 !important;
  text-decoration-color: #B1B1B1 !important;
  text-decoration-thickness: var(--underline-thickness);
  transition: none !important;
}

.sonsbeek-news-text-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.sonsbeek-news-text-link:hover,
.sonsbeek-news-text-link:focus {
  text-decoration: none;
  color: #000;
}

@media (hover: hover) and (pointer: fine) {
  a:focus-visible,
  button:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
  }

  #toggle-submenu:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
  }
}


/* =========================================================
   07. ACCESSIBILITY
   ========================================================= */

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: #000;
  color: #fff;
  z-index: 1000;
}


/* =========================================================
   08. NAVIGATION
   ========================================================= */

.sonsbeek-navbar {
  position: sticky !important;
  top: 0;
  z-index: 1040 !important;
  border-bottom: none;
  box-shadow: none;
  background: transparent;
}

.sonsbeek-navbar.scrolled {
  background: var(--bg-color);
}

/* Hoofdmenu-layout: afstand hoort op de groep, niet op losse links */
.sonsbeek-menu {
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
  padding: 0 !important;
  margin: 0 !important;
}

/* Linkstijl hoofdmenu + taalswitch */
.sonsbeek-menu .nav-link,
.sonsbeek-lang {
  font-size: var(--font-size-lg);
  line-height: var(--nav-line-height);
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline-thickness);
  text-decoration-skip-ink: none;
  text-transform: uppercase;
  font-weight: 400;
}

/* Geen individuele afstand meer op links */
.sonsbeek-menu .nav-link {
  margin-right: 0 !important;
}

/* Taalswitch */
.sonsbeek-lang {
  background: none;
  border: none;
  color: var(--link-color);
}

/* Mobiele navbar */
.mobile-nav {
  position: relative;
  background: var(--bg-color);
}

.mobile-nav::after {
  content: "";
  position: absolute;
  left: var(--nav-line-x);
  right: var(--nav-line-x);
  bottom: 0;
  height: var(--hr-line-thickness);
  background: var(--footer-text, #000);
}

body.menu-open .mobile-nav::after {
  display: none;
}

body.menu-open #main-content {
  visibility: hidden;
  pointer-events: none;
}

body.menu-open {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}


/* =========================================================
   09. SUBMENU
   ========================================================= */

#sonsbeek-submenu,
#sonsbeek-submenu-mobile,
#sonsbeek-subsubmenu {
  z-index: 1050 !important;
}

/* Desktop/tablet submenu */
#sonsbeek-submenu {
  position: sticky;
  top: var(--submenu-top);
  display: flex !important;
}

/* Mobiel hoofd-submenu: standaard dicht */
#sonsbeek-submenu-mobile {
  position: sticky;
  top: var(--submenu-top);
  display: none !important;
}

/* Mobiel hoofd-submenu: open na klik */
#sonsbeek-submenu-mobile.active {
  display: flex !important;
}

/* Archive-jaartallenmenu: alleen mobiel zichtbaar via .show-on-mobile */
#sonsbeek-subsubmenu {
  position: sticky;
  top: var(--submenu-top);
}

/* Hidden wint altijd */
#sonsbeek-submenu-mobile[hidden],
#sonsbeek-subsubmenu[hidden] {
  display: none !important;
}

/* Hide-state */
#sonsbeek-submenu.hide-submenu,
#sonsbeek-submenu-mobile.hide-submenu,
#sonsbeek-subsubmenu.hide-submenu {
  transform: translateY(-80%);
  opacity: 0;
  pointer-events: none;
}

/* Reset containers */
#sonsbeek-submenu,
#sonsbeek-submenu .container-fluid,
#sonsbeek-submenu-mobile,
#sonsbeek-submenu-mobile .container-fluid,
#sonsbeek-subsubmenu,
#sonsbeek-subsubmenu .container-fluid {
  padding: 0 !important;
  margin: 0 !important;
}

.sonsbeek-submenu {
  border: none !important;
}

.sonsbeek-submenu .nav-link {
  font-family: var(--font-family-sonsbeek, sans-serif);
  font-size: var(--font-size-lg);
  line-height: var(--submenu-line-height);
  font-weight: 400;
  color: var(--text-color, #000);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline-thickness);
  text-decoration-skip-ink: none;
  background: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--submenu-padding-top) !important;
  padding-bottom: var(--submenu-padding-bottom) !important;
}

/* Mobiel hoofdmenu-links uppercase */
#sonsbeek-submenu-mobile li.nav-item > a.nav-link {
  text-transform: uppercase !important;
}

/* Archive-jaartallen niet uppercase forceren */
#sonsbeek-subsubmenu li.nav-item > a.nav-link {
  text-transform: uppercase !important;
}

#sonsbeek-submenu-mobile .nav-link,
#sonsbeek-submenu-mobile .nav-link:hover,
#sonsbeek-submenu-mobile .nav-link:focus,
#sonsbeek-submenu-mobile .nav-link:active,
#sonsbeek-submenu-mobile .nav-link[aria-current="page"],
#sonsbeek-subsubmenu .nav-link,
#sonsbeek-subsubmenu .nav-link:hover,
#sonsbeek-subsubmenu .nav-link:focus,
#sonsbeek-subsubmenu .nav-link:active,
#sonsbeek-subsubmenu .nav-link[aria-current="page"] {
  box-shadow: none !important;
}

.submenu-border-wrap {
  position: relative;
}

#sonsbeek-submenu .submenu-border-wrap::before,
#sonsbeek-submenu-mobile .submenu-border-wrap::before,
#sonsbeek-subsubmenu .submenu-border-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--page-x);
  right: var(--page-x);
  height: 0;
  border-top: var(--hr-line-thickness) solid var(--link-color);
  background: none;
  z-index: 2;
}

nav ul.submenu {
  border: none !important;
  box-shadow: none !important;
  background: var(--bg-color);
  margin: 0;
  padding: 0;
}

#toggle-submenu:focus,
#toggle-submenu:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Desktop/tablet: mobiele menu’s nooit tonen */
@media (min-width: 768px) {
  #sonsbeek-submenu {
    display: flex !important;
  }

  #sonsbeek-submenu-mobile,
  #sonsbeek-submenu-mobile.active,
  #sonsbeek-subsubmenu,
  #sonsbeek-subsubmenu.active,
  .archive-subsubmenu,
  .archive-subsubmenu.active {
    display: none !important;
  }

  body.menu-open {
    height: auto !important;
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  body.menu-open #main-content {
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Mobiel: desktop-submenu nooit tonen */
@media (max-width: 767.98px) {
  #sonsbeek-submenu {
    display: none !important;
  }

  #sonsbeek-submenu-mobile {
    display: none !important;
  }

  #sonsbeek-submenu-mobile.active {
    display: flex !important;
  }
}


/* =========================================================
   10. SVG / SHAPES
   ========================================================= */

.sonsbeek-news-img-shape h3 {
  position: relative;
  z-index: 2;
  color: black;
}

.shape-border {
  z-index: 1;
}

.sonsbeek-svg {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 850.39 / 799.37;
}

.normal {
  display: block;
}

.long {
  display: none !important;
}

.svg-wrapper {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.svg-wrapper svg {
  flex: 1;
  display: block;
  width: auto;
  height: 100%;
}

/* =========================================================
   11. DIVIDERS / SPACING HELPERS
   ========================================================= */

.section-divider {
  height: 5.5rem;
}

.container-divider {
  height: 5.2rem;
}

.container-divider-small {
  height: 3.6rem;
}

.container-divider-extra-small {
  height: 2.5rem;
}

.container-end {
  height: 4rem;
}

.container-end-small {
  height: 1.5rem;
}

.archive-divider {
  height: 2.5rem;
}

.archive-container-end {
  height: 3.3rem;
}

.newsletter-text-lift {
  transform: translateY(-37px);
}

.newsletter-shape-lift {
  transform: translateY(-15px);
}

hr {
  border: none;
  border-top: var(--hr-line-thickness) solid #000;
  opacity: 1;
  margin: 0;
  padding: 0;
  width: 100%;
}

.mobile-divider {
  display: none;
}


/* =========================================================
   12. FOOTER
   ========================================================= */

footer {
  background: var(--bg-color);
  color: var(--footer-text);
  font-family: var(--font-family-sonsbeek);
  font-size: var(--font-size-lg);
  text-transform: uppercase;
  text-align: center;
}

footer a {
  color: var(--footer-text);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline-thickness);
  text-decoration-skip-ink: none;
  transition: none !important;
}

footer p {
  margin: 0.25rem 0;
}


/* =========================================================
   13. CAROUSEL CONTROLS
   ========================================================= */

.carousel-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.carousel-arrow {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #000 !important;
}

.carousel-arrow svg {
  width: 23px;
  height: 22px;
}


/* =========================================================
   14. ROWS / TEASERS
   ========================================================= */

.row.sonsbeek-news-equalheight {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.row.sonsbeek-news-equalheight > [class^="col-"] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.row.clickable-teaser {
  padding: 0 !important;
  margin: 0;
}

.row.clickable-teaser .shape {
  padding: 0 0.75rem !important;
  margin: 0;
}

/* Index teaser-teksten: alleen rechterruimte weg */
.content-sections .teaser-text {
  padding-right: 0 !important;
}

.content-sections .teaser-text h3,
.content-sections .teaser-text p {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   15. ARCHIVE TEMPLATE
   ========================================================= */

.archive-page,
.archive-list,
.archive-entry-container {
  padding: 0 !important;
  margin: 0 !important;
}

.archive-intro-row {
  margin: 0.75rem 0;
}

.archive-intro-text {
  display: flex;
  align-items: stretch;
  padding-left: var(--page-x);
  padding-right: var(--page-x);
  margin: 0;
}

.archive-intro-copy {
  width: 100%;
  min-height: 100%;
  margin-bottom: -1rem;
}

.archive-intro-copy-desktop {
  padding-right: 0;
}

.archive-intro-shape {
  display: flex;
  align-items: flex-start;
  padding: 0 var(--page-x) 0 0;
  margin: 0;
  overflow: visible;
}

.archive-intro-shape .svg-wrapper {
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.archive-intro-shape svg {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: top right;
  transform: scaleY(1.03);
}

.archive-intro-shape-mobile {
  margin-top: 0;
}

.archive-subsubmenu {
  padding: 0;
  margin: 0;
  text-align: center;
}

.archive-subsubmenu .container-fluid,
.archive-subsubmenu .row,
.archive-subsubmenu ul,
.archive-subsubmenu-inner,
.archive-subsubmenu-item {
  padding: 0;
  margin: 0;
}

.archive-subsubmenu-item {
  text-align: center;
}

.archive-subsubmenu .nav-link {
  padding-top: var(--submenu-padding-top) !important;
  padding-bottom: var(--submenu-padding-bottom) !important;
}

.archive-list-spacer {
  height: 0;
}

/* Archive sections: globale .intermediary section-padding uit */
.intermediary .archive-page section.archive-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.archive-section,
.archive-section-line,
.archive-section-inner,
.archive-teaser,
.archive-teaser-text-inner,
.archive-shape-inner {
  margin: 0;
}

.archive-section-line,
.archive-section-inner,
.archive-teaser,
.archive-shape-inner {
  padding: 0;
}

/* Archive HR’s houden zelf de paginamarge aan */
.archive-page .archive-section-line {
  padding-left: var(--page-x) !important;
  padding-right: var(--page-x) !important;
}

.archive-page .archive-section-line hr {
  width: 100%;
  margin: 0;
}

.archive-teaser {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Tekstkolom */
.archive-teaser-text-col {
  display: flex;
  flex-direction: column;
  padding-left: var(--page-x) !important;
  padding-right: var(--page-x) !important;
  margin: 0;
}

.archive-teaser-text-inner {
  padding: 0 !important;
}

.archive-teaser .teaser-text h3,
.archive-teaser .teaser-text p {
  padding: 0;
  margin: 0;
}

/* Vormkolom */
.archive-shape-col {
  display: flex;
  flex-direction: column;
  padding-left: 0 !important;
  padding-right: 0.5rem !important;
  margin: 0;
}

.archive-shape-inner .news-img-bg {
  padding: 0;
  margin: 0;
}

/* Vorm optisch iets naar links */
.archive-page .archive-shape-inner .teaser-ellipse,
.archive-page .archive-shape-inner .teaser-rect,
.archive-page .archive-shape-inner .teaser-tiltedRect,
.archive-page .archive-shape-inner .teaser-trapeze {
  width: 100%;
  max-width: none;
  margin-left: -0.35rem;
  margin-right: 0;
}


/* =========================================================
   16. EMPTY SHAPES
   ========================================================= */

.archive-mobile-empty-shape-wrap {
  display: none !important;
  margin-top: 0.35rem;
  padding-left: var(--page-x) !important;
  padding-right: var(--page-x) !important;
}

.about-mobile-empty-shape-wrap {
  display: none !important;
  margin-top: 0.35rem;
  padding-left: var(--page-x) !important;
  padding-right: var(--page-x) !important;
}

.index-mobile-empty-shape-wrap {
  display: none !important;
  margin-top: 0.35rem;
  padding-left: var(--page-x) !important;
  padding-right: var(--page-x) !important;
}


/* =========================================================
   17. VISIBILITY HELPERS
   ========================================================= */

.show-on-mobile {
  display: none !important;
}

.hide-on-mobile {
  display: flex !important;
}

@media (max-width: 767.98px) {
  .show-on-mobile {
    display: flex !important;
  }

  .hide-on-mobile {
    display: none !important;
  }
}


/* =========================================================
   18. MEDIA QUERIES — MOBILE + TABLET
   ========================================================= */

@media (max-width: 1199.98px) {
  html {
    font-size: 17px;
  }

  :root {
    --underline-thickness: 0.098235rem;
    --hr-line-thickness: 0.098235rem !important;

    --page-x: 1rem;
    --nav-x: 0.3rem;
    --nav-line-x: var(--nav-x);

    --nav-line-height: 1.2;
    --nav-padding-top: 0.3rem;
    --nav-padding-bottom: 0.6rem;

    --submenu-top: 2rem;
    --submenu-line-height: 1.2;
    --submenu-padding-top: 0.4rem;
    --submenu-padding-bottom: 0.12rem;
  }

  .carousel-arrow {
    width: 19px;
    height: 18px;
  }

  .carousel-controls {
    gap: 0.15rem;
  }
}


/* =========================================================
   19. MEDIA QUERIES — MOBILE
   ========================================================= */

@media (max-width: 767.98px) {
  body {
    padding: 0;
  }

  .mobile-divider {
    height: 0.5rem;
    display: block;
  }

  /* Mobiel: subsubmenu + section titles uppercase */
  body.intermediary #sonsbeek-subsubmenu .nav-link,
  body.intermediary #sonsbeek-subsubmenu li.nav-item > a.nav-link {
    text-transform: uppercase !important;
  }

  body.intermediary .content-sections .section-title {
    text-transform: uppercase !important;
    top: 0.6rem !important;
  }

  nav.show-on-mobile.sonsbeek-navbar.mobile-nav::after {
    content: "" !important;
    position: absolute !important;
    left: var(--page-x) !important;
    right: var(--page-x) !important;
    bottom: 0 !important;
    height: 0 !important;
    border-top: var(--underline-thickness) solid var(--link-color) !important;
    background: none !important;
  }

  body.menu-open .archive-mobile-empty-shape-wrap {
    display: block !important;
  }

  body.menu-open .index-mobile-empty-shape-wrap {
    display: block !important;
  }

  body.menu-open .about-mobile-empty-shape-wrap {
    display: block !important;
  }

  body.menu-open #sonsbeek-submenu-mobile ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  body.menu-open #sonsbeek-submenu-mobile li {
    padding: 0 !important;
    margin: 0 !important;
  }

  body.menu-open #sonsbeek-submenu-mobile .nav-link {
    padding: 0.45rem 0 !important;
    margin: 0 !important;
    line-height: 1;
    text-transform: uppercase !important;
  }

  /* Index mobiel subsubmenu: niet sticky, wel archief-achtige witruimte */
  body.intermediary #sonsbeek-subsubmenu:not(.archive-subsubmenu) {
    position: relative !important;
    top: auto !important;
    margin-top: 5rem !important;
    margin-bottom: 2.5rem !important;
  }

  body.intermediary #sonsbeek-subsubmenu:not(.archive-subsubmenu) .nav-link {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  body.intermediary #sonsbeek-subsubmenu:not(.archive-subsubmenu) .nav-item {
    padding: 0 !important;
    margin: 0 0 1rem 0 !important;
  }

  /* ---------- Archive mobile ---------- */

  .archive-intro-row {
    margin: 2.35rem 0;
  }

  .archive-intro-shape {
    padding-left: var(--page-x) !important;
    padding-right: var(--page-x) !important;
    padding-top: 0;
    padding-bottom: 0;
  }

  .archive-intro-shape .svg-wrapper {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .archive-intro-shape svg {
    width: 100%;
    height: auto;
    display: block;
    transform: none;
  }

  .archive-shape-col {
    padding-left: var(--page-x) !important;
    padding-right: var(--page-x) !important;
    margin-top: -0.3rem !important;
    margin-bottom: -0.8rem !important;
  }

  .archive-page .archive-shape-inner .teaser-ellipse,
  .archive-page .archive-shape-inner .teaser-rect,
  .archive-page .archive-shape-inner .teaser-tiltedRect,
  .archive-page .archive-shape-inner .teaser-trapeze {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .archive-container-end {
    height: 3.7rem;
  }

  #sonsbeek-subsubmenu.archive-subsubmenu {
    display: block !important;
    position: relative !important;
    top: auto !important;
    width: 100%;
    padding: 0 var(--page-x) !important;
    margin: 2.4rem 0 2.4rem 0 !important;
    background: transparent !important;
  }

  #sonsbeek-subsubmenu .archive-years-inner {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  #sonsbeek-subsubmenu .archive-years-list {
    display: grid;
    grid-template-columns: repeat(5, 2.05rem);
    column-gap: 0.7rem;
    row-gap: 0.7rem;
    width: max-content;
    margin: 0 auto;
    padding: 0;
    justify-content: center;
    justify-items: flex-end;
    align-items: center;
  }

  #sonsbeek-subsubmenu .archive-years-item {
    padding: 0;
    margin: 0;
    text-align: left;
  }

  #sonsbeek-subsubmenu .nav-link {
    display: inline-block;
    padding: 0.25rem 0.12rem !important;
    margin: 0 !important;
    line-height: 1;
    text-transform: uppercase !important;
    font-variant-numeric: tabular-nums;
  }

  body.menu-open nav.show-on-mobile.sonsbeek-navbar.mobile-nav {
    padding-bottom: calc(var(--nav-padding-bottom) - 1px) !important;
  }
  /* ---------- About mobile ---------- */

  .about-intro-row {
    margin: 2.3rem 0 0 0;
  }

  .about-intro-shape {
    padding-left: var(--page-x) !important;
    padding-right: var(--page-x) !important;
    padding-top: 0;
    padding-bottom: 0;
  }

  .about-intro-shape .svg-wrapper {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .about-intro-shape svg {
    width: 100%;
    height: auto;
    display: block;
    transform: none;
  }

  /* ---------- Empty shapes mobile ---------- */

  .about-mobile-empty-shape-col,
  .index-mobile-empty-shape-col {
    display: flex;
    align-items: flex-start;
    padding: 0;
    margin: 0;
  }

  .about-mobile-empty-shape-svgwrap,
  .index-mobile-empty-shape-svgwrap {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: visible;
  }

  .about-mobile-empty-shape-svgwrap svg,
  .index-mobile-empty-shape-svgwrap svg {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ---------- Carousel mobile ---------- */

  .carousel-controls {
    width: calc(100vw - var(--scrollbar-width, -16px));
    margin-left: calc(-1 * var(--bs-gutter-x, 0.75rem));
    margin-right: calc(-1 * var(--bs-gutter-x, 0.75rem));
    padding-left: 1.43rem;
    padding-right: 0;
    gap: 0.15rem;
  }

  .heroCarousel .carousel-controls .profile-link {
    transform: translateX(-16px) !important;
  }

  .heroCarousel h3,
  .heroCarousel p,
  .heroCarousel .counter {
    display: none !important;
  }

  .heroCarouselTitle {
    text-transform: uppercase;
    text-align: center;
    margin-top: -30px !important;
  }

  .max-width p {
    max-width: 100% !important;
  }

  /* ---------- Spacing mobile ---------- */

  .container-divider {
    height: 4.6rem !important;
  }

  .container-divider-small {
    height: 2.8rem !important;
  }

  .container-end {
    height: 4.5rem !important;
  }

  .container-end-small,
  .mobile-container-end-small {
    height: 0 !important;
  }

  .mobile-vrijwilliger-block {
    margin-top: 2rem !important;
  }

  .mobile-artclub-block {
    margin-top: 1.5rem !important;
  }

  :root {
    --section-hr-x: 0.25rem;
  }

  .intermediary .content-sections > section {
    position: relative;
  }

  .intermediary .content-sections > section > .col-12:first-child {
    display: none !important;
  }

  .intermediary .content-sections > section::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--section-hr-x) - 0rem);
    right: calc(var(--section-hr-x) - 0rem);
    height: 0;
    border-top: var(--hr-line-thickness) solid var(--link-color) !important;
    z-index: 2;
  }

  .heroSplit--mobile > .col-12:has(> hr) {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  .heroSplit--mobile > .col-12:has(> hr) > hr {
    width: 100%;
    margin: 0 !important;
  }

}



/* =========================================================
   20. MEDIA QUERIES — TABLET / DESKTOP SMALL
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199.98px) {

  /* ---------- Archive tablet / desktop small ---------- */

  .archive-intro-row {
    margin: -1rem 0 0 0;
  }

  .archive-intro-text {
    padding-right: calc(var(--page-x) + 1rem);
    margin-bottom: 0.5rem;
  }

  .archive-intro-shape .svg-wrapper {
    width: 101.3%;
    margin-left: -1.3%;
  }

  .archive-divider {
    height: 3rem;
  }


/* ---------- About tablet / desktop small ---------- */

  .about-intro-text {
    padding-right: calc(var(--page-x) + 1rem);
    margin-bottom: 0.5rem;
  }

  .about-intro-row {
    margin: 1.15rem 0 0 0;
  }

  .about-intro-shape .svg-wrapper {
    width: 101.3%;
    margin-left: -1.3%;
  }

  /* About: ANBI + Vacatures optisch iets naar rechts */

  .about-ankeilers-col .teaser-about-park {
    transform: translateX(-0.35rem);
  }

  .about-ankeilers-col .teaser-diamond-about {
    transform: translateX(-0.35rem);
  }

  .container-divider-small {
    height: 3.2rem;
  }

  .container-divider-extra-small {
    height: 3.2rem;
  }

  .container-end {
    height: 3rem;
  }

}

/* =========================================================
   21. MEDIA QUERIES — DESKTOP MEDIUM
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1728.98px) {
  html {
    font-size: 24px;
  }

  :root {
    --underline-thickness: 0.075rem;
    --hr-line-thickness: 0.089rem;

    --page-x: 1rem;
    --nav-x: 0.25rem;
    --nav-line-x: var(--nav-x);

    --nav-line-height: 1.2;
    --nav-padding-top: 0.35rem;
    --nav-padding-bottom: 0.35rem;

    --submenu-top: 1.8rem;
    --submenu-line-height: 1;
    --submenu-padding-top: 0.5rem;
    --submenu-padding-bottom: 0.12rem;
  }

  .sonsbeek-navbar.scrolled {
    background: var(--bg-color);
    padding-bottom: 0.5rem !important;
  }

  /* ---------- Archive desktop medium ---------- */

  .archive-intro-row {
    margin: -0.8rem 0 0 0;
  }

  .archive-intro-text {
    padding-right: calc(var(--page-x) + 1rem);
    margin-bottom: 1.25rem;
  }

  /* ---------- About desktop medium ---------- */

  .about-intro-row {
    margin: 1.35rem 0 0 0;
  }

  .about-intro-text {
    padding-right: calc(var(--page-x) + 1rem);
    margin-bottom: 1.25rem;
  }
}


/* =========================================================
   22. MEDIA QUERIES — DESKTOP LARGE
   ========================================================= */

@media (min-width: 1729px) {
  html {
    font-size: 30px;
  }

  :root {
    --underline-thickness: 0.075rem;
    --hr-line-thickness: 0.083333rem;

    --page-x: 1rem;
    --nav-x: 0.3rem;
    --nav-line-x: var(--nav-x);

    --nav-line-height: 1.2;
    --nav-padding-top: 0.3rem;
    --nav-padding-bottom: 0.55rem;

    --submenu-top: 1.8rem;
    --submenu-line-height: 1;
    --submenu-padding-top: 0.5rem;
    --submenu-padding-bottom: 0.12rem;
  }


  /* ---------- Archive desktop large ---------- */

  .archive-intro-row {
    margin: -1rem 0;
  }

  .archive-intro-text {
    padding-right: calc(var(--page-x) + 1rem);
    margin-bottom: 1rem;
  }

  .archive-intro-shape .svg-wrapper {
    width: 101.3%;
    margin-left: -1.3%;
  }


  /* ---------- About desktop large ---------- */

  .about-intro-row {
    margin: 1.1rem 0 0 0;
  }

  .about-intro-text {
    padding-right: calc(var(--page-x) + 1rem);
    margin-bottom: 1rem;
  }

  .about-intro-shape .svg-wrapper {
    width: 101.3%;
    margin-left: -1.3%;
  }

  .about-ankeilers-col .teaser-about-park {
    transform: translateX(-0.35rem);
  }

  .about-ankeilers-col .teaser-diamond-about {
    transform: translateX(-0.35rem);
  }


  /* ---------- Spacing desktop large ---------- */

  .section-divider {
    height: 5.2rem;
  }

  .container-divider {
    height: 4.9rem;
  }

  .container-end {
    height: 2.7rem;
  }

  .carousel-controls {
    gap: 0.3rem;
  }

  .carousel-arrow svg {
    width: 30px;
    height: 29px;
  }
}


/* =========================================================
   23. SPECIAL SHAPE / DIAMOND CORRECTIONS
   bewust apart gelaten
   ========================================================= */

@media (max-width: 970px) {
  .normal {
    display: none !important;
  }

  .long {
    display: block !important;
  }
}


/* =========================================================
   24. TEMP DEBUG BREAKPOINT COLORS
   verwijderen na controle
   ========================================================= */

/*body {
  background-color: #ffb3b3 !important;
}

@media (max-width: 767.98px) {
  body {
    background-color: #b3c7ff !important;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  body {
    background-color: #ffd9a3 !important;
  }
}

@media (min-width: 1200px) and (max-width: 1728.98px) {
  body {
    background-color: #b6ffb6 !important;
  }
}

@media (min-width: 1729px) {
  body {
    background-color: #adc6ff !important;
  }
}*/