/* ============================================
   RESET
   ============================================ */

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

/* ============================================
   TOKENS
   ============================================ */

:root {
  --zwart: #0c0c0c;
  --beige: #faf6ee;
  --wit: #fff;
  --rood: #ea705a;
  --font: "fractul-variable", sans-serif;
  --header-hoogte: 5rem;
  --margin: clamp(0.8rem, 3vw, 2rem);
  --btn-size: clamp(2.5rem, 4vw, 3.11rem);
  --pill-hoogte: 5rem;
  --pill-hoogte-mobiel: 3.33rem;
  --radius-big: 1.67rem;
  --radius-small: 1.11rem;
  --space-heading-s: clamp(1rem, 2.5vw, 1.67rem);
  --space-heading-l: clamp(1.5rem, 4vw, 2.78rem);
  --space-s: 0.5rem;
  --space-m: 1.5rem;
  --space-l: 3rem;
  --overlap-big: 5rem;
  --overlap-small: 3.5rem;
  --columns: 12;
  --gutter: clamp(1rem, 2vw, 2rem);
  --max-width: 1222px;
  --max-width-nav: 1280px;
  --vw-true: 100vw;
  --pionnen-h: 18.74vw;
  --pionnen-overlap: calc(var(--pionnen-h) * 2 / 3);
  --schaduw: 0 0 40px rgba(0, 0, 0, 0.15);
}

/* ============================================
   UTILITIES
   ============================================ */

.kader {
  border-radius: var(--radius-small);
  box-shadow: var(--schaduw);
}

.foto-fullwidth {
  display: block;
  border-radius: var(--radius-big);
  object-fit: cover;
}

/* ============================================
   BASE
   ============================================ */

html {
  font-size: 112.5%;
  scroll-behavior: smooth;
  background-color: var(--beige);
}

body {
  background-color: var(--beige);
  color: var(--zwart);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================
   SUBNAV
   ============================================ */

.subnav {
  background-color: var(--zwart);
  font-size: 0.8rem;
}

.subnav .container {
  display: flex;
  justify-content: flex-end;
  gap: var(--gutter);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.subnav a {
  color: var(--beige);
  text-decoration: none;
  background-image: none;
}

.subnav a:hover {
  color: rgba(250, 246, 238, 0.5);
}

/* ============================================
   HEADER & NAV
   ============================================ */

header {
  position: fixed;
  top: calc(2 * var(--margin));
  left: calc(2 * var(--margin));
  right: calc(2 * var(--margin));
  z-index: 100;
  pointer-events: none;
  transition: transform 0.6s ease;
}

header.is-hidden {
  transform: translateY(calc(-2 * var(--margin) - var(--pill-hoogte) - var(--radius-small)));
}

.header-pill {
  display: flex;
  align-items: center;
  height: var(--pill-hoogte);
  width: 100%;
  max-width: calc(var(--max-width-nav) - 6 * var(--margin));
  margin: 0 auto;
  padding: 0 var(--margin);
  background-color: var(--beige);
  border-radius: 100px;
  box-shadow: var(--schaduw);
  pointer-events: auto;
  position: relative;
}

.mainnav--links {
  display: flex;
  align-items: center;
  gap: 3px;
}

.logo {
  text-decoration: none;
  background-image: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.logo img {
  width: 130px;
  height: auto;
  display: block;
}

.mainnav--rechts {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.mainnav a {
  color: var(--zwart);
  text-decoration: none;
  background-image: none;
  font-size: 0.889rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 0.65rem 0.75rem 0.6rem;
  border: 2px solid transparent;
  border-radius: 100px;
  transition: border-color 0.25s ease, background-color 0.25s ease;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.mainnav a:hover {
  border-color: var(--zwart);
}

.mainnav a.is-active {
  border-color: var(--zwart);
}

.mainnav .btn-primary {
  height: auto;
  padding: 0.6rem 1.2rem;
  background-color: var(--rood);
  border-color: var(--rood);
  color: var(--zwart);
}

.mainnav .btn-primary:hover {
  background-color: var(--zwart);
  border-color: var(--zwart);
  color: var(--beige);
}

/* ============================================
   BURGER
   ============================================ */

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 16px;
  flex-shrink: 0;
}

.burger span {
  display: block;
  width: 16px;
  height: 2px;
  background-color: var(--zwart);
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}

.burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger.is-open span:nth-child(2) {
  opacity: 0;
}

.burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================
   SECTIES
   ============================================ */

section {
  padding-bottom: calc(2 * var(--space-l));
  scroll-margin-top: var(--header-hoogte);
  position: relative;
  z-index: 1;
}


/* ============================================
   KADER FULLWIDTH — viewport-brede elementen
   ============================================ */

.kader-fullwidth {
  width: calc(100% - 2 * var(--margin));
  margin-left: var(--margin);
  margin-right: var(--margin);
}

.grid--spaced {
  margin-top: var(--space-m);
}

.grid--gutter-top {
  margin-top: var(--gutter);
}

/* ============================================
   KADER EXTENDED — gedeelde structuur
   ============================================ */

.kader-extended {
  width: calc(100% + 3 * var(--margin));
  margin-left: calc(-1.5 * var(--margin));
  padding: calc(1.5 * var(--margin));
  border-radius: var(--radius-big);
}

.kader-extended :is([class*="col-"]):last-child > :last-child {
  margin-bottom: 0;
}

/* ============================================
   OVER KADER
   ============================================ */

.over-kader {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--overlap-big));
  background-color: var(--wit);
  box-shadow: var(--schaduw);
  padding: calc(1.5 * var(--space-l)) 0;
}


/* ============================================
   SECTIE FOTO'S
   ============================================ */

.sectie-foto-wrap {
  display: block;
  width: calc(100% + var(--margin));
  margin: var(--space-l) 0;
}

.sectie-foto-wrap--links {
  margin-left: calc(-1.5 * var(--margin));
  margin-right: 0;
  width: calc(100% + 1.5 * var(--margin));
}

.sectie-foto-wrap--rechts {
  margin-right: calc(-1.5 * var(--margin));
  margin-left: 0;
  width: calc(100% + 1.5 * var(--margin));
}

.sectie-foto {
  display: block;
  width: 100%;
  border-radius: var(--radius-big);
}

/* ============================================
   SCHAAKSTUKKEN TICKER
   ============================================ */

.schaakstukken-ticker-wrap {
  /* real height so the strip is visible; margin-bottom cancels it from the flow */
  height: 24.27vw;
  overflow: hidden;
  position: relative;
  z-index: 0;
  margin-bottom: -24.27vw;
}

.schaakstukken-ticker {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.schaakstukken-ticker__track {
  display: flex;
  width: 200%;
  animation: ticker-scroll 20s linear infinite;
}

.schaakstukken-ticker__track img {
  width: 50%;
  height: auto;
  display: block;
  flex-shrink: 0;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================
   PIONNEN TICKER
   ============================================ */

/*
  SVG viewBox: 1907.91 × 357.46, 8 pawns wide.
  height = 100vw × (357.46 / 1907.91) = 18.74vw  →  exactly 8 pawns across the viewport.
  1/3 sticks above the section boundary, 2/3 overlaps into #achtergrond.
  Uses background-image so there is never a seam between repetitions.
*/
/* Wrapper: clips horizontal overflow to prevent scrollbar, cancels own height from flow */
.pionnen-ticker-wrap {
  height: var(--pionnen-h);
  overflow: hidden;
  position: relative;
  z-index: 0;
  bottom: calc(-1 * var(--space-l));
  margin-bottom: calc(var(--pionnen-h) * -1);
}

/* Inner strip: full viewport width, scrolling background */
.pionnen-ticker {
  height: var(--pionnen-h);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-image: url('../images/pionnen.svg');
  background-repeat: repeat-x;
  background-size: auto var(--pionnen-h);
  background-position: 0 0;
  animation: pionnen-scroll 24s linear infinite;
}

@keyframes pionnen-scroll {
  from { background-position-x: 0; }
  to   { background-position-x: 1907.91px; }
}

#achtergrond {
  z-index: 1;
}


/* ============================================
   SCHAAKBORD KADER
   ============================================ */


.schaakbord-kader {
  background-color: var(--rood);
}

.schaakbord-kader__titel {
  font-size: clamp(2rem, 4vw, 2.78rem);
  text-align: center;
  color: var(--zwart);
  margin-bottom: var(--space-m);
  max-width: 100%;
}

.schaakbord-kader .opsomming li,
.voorbeelden-kader .opsomming li {
  color: var(--zwart);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
}

.schaakbord-kader ul.opsomming li::before,
.voorbeelden-kader ul.opsomming li::before {
  content: "●";
  color: var(--zwart);
  font-size: 0.9em;
  top: 0.04em;
  transform: none;
}

/* ============================================
   ZO WERKT HET FOTO
   ============================================ */

.zo-werkt-sectie {
  padding-bottom: calc(var(--space-l) + var(--pionnen-h) / 3);
}

.zo-werkt-sectie > .container {
  padding-bottom: var(--margin);
}

.overlap-wrap {
  position: relative;
  z-index: 1;
}

.zo-werkt-grid-wrap {
  position: relative;
  z-index: 1;
}

.zo-werkt-foto {
  margin-top: calc(-1 * var(--overlap-small));
  aspect-ratio: 17 / 10;
}

/* ============================================
   VOORBEELDEN KADER
   ============================================ */

.voorbeelden-kader {
  margin-top: calc(-1 * var(--overlap-small));
  position: relative;
  z-index: 1;
  background-color: var(--wit);
  box-shadow: var(--schaduw);
}

.voorbeelden-kader__titel {
  font-size: clamp(2rem, 4vw, 2.78rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--zwart);
  margin-bottom: var(--space-m);
  max-width: 100%;
}

.voorbeelden-kader__disclaimer {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.schaakbord-kader .grid,
.voorbeelden-kader .grid {
  row-gap: var(--space-m);
}


/* ============================================
   ACHTERGROND KADER
   ============================================ */

.achtergrond-kader {
  position: relative;
  z-index: 1;
  background-color: var(--wit);
}

.achtergrond-kader h1 {
  max-width: 100%;
}

.achtergrond-fotos {
  display: flex;
  gap: var(--gutter);
  width: calc(var(--vw-true) - 2 * var(--margin));
  position: relative;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  margin: var(--space-l) 0;
}

.achtergrond-fotos picture {
  flex: 1;
  min-width: 0;
  display: block;
}

.achtergrond-foto {
  width: 100%;
  height: 100%;
  aspect-ratio: 600 / 475;
  object-fit: cover;
  border-radius: var(--radius-small);
  display: block;
}

.achtergrond-tekst {
  margin-top: var(--space-l);
}

/* ============================================
   COMMISSIE KADER
   ============================================ */

.commissie-kader {
  background-color: var(--zwart);
  margin-top: var(--space-m);
}

.commissie-kader__titel {
  font-size: clamp(1.33rem, 3vw, 1.67rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--beige);
  margin-bottom: var(--space-m);
  max-width: 100%;
}

.commissie-lijst {
  padding: 0;
}

ul.opsomming.commissie-lijst li {
  color: var(--beige);
  font-size: 1.11rem;
  line-height: 1.55;
  padding-left: 0;
  margin-bottom: 0;
}

ul.opsomming.commissie-lijst li::before {
  display: none;
}

.commissie-lijst strong {
  font-weight: 700;
  color: var(--beige);
}

.adviseurs-lijst {
  list-style: none;
  padding: 0;
}

.adviseurs-lijst li {
  color: var(--beige);
  font-size: 1.11rem;
  font-weight: 400;
  line-height: 1.55;
  margin-bottom: 0;
  padding-left: 0;
}

/* ============================================
   ZO WERKT HET KADERS
   ============================================ */


.zo-werkt-links,
.zo-werkt-rechts {
  display: flex;
  flex-direction: column;
}

.zo-werkt-links .zo-kader {
  flex: 1;
}

.zo-werkt-rechts {
  gap: var(--gutter);
}

.zo-werkt-rechts .zo-kader {
  flex: 1;
}

.zo-kader {
  border-radius: var(--radius-big);
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.zo-kader--zwart {
  background-color: var(--zwart);
  justify-content: flex-end;
}

.zo-kader--zwart .intro {
  color: var(--beige);
}

.zo-kader--zwart p {
  color: var(--beige);
}

.zo-kader--rood {
  background-color: var(--rood);
}

.zo-kader--rood .intro {
  color: var(--zwart);
}

.zo-kader--wit {
  background-color: var(--wit);
  justify-content: flex-end;
}

.zo-kader--wit .intro {
  color: var(--zwart);
}

.zo-kader .intro:last-child,
.zo-kader p:last-child {
  margin-bottom: 0;
}

/* ============================================
   SECTIE NEXT BUTTON
   ============================================ */

.sectie-next-btn {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-decoration: none;
  background-image: none;
  margin-top: var(--space-m);
}

.sectie-next-btn__cirkel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--btn-size);
  height: var(--btn-size);
  background-color: var(--rood);
  border-radius: 50%;
  color: var(--zwart);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.sectie-next-btn:hover .sectie-next-btn__cirkel {
  background-color: transparent;
  color: var(--rood);
  box-shadow: inset 0 0 0 2px var(--rood);
}

.sectie-next-btn h4 {
  margin-bottom: 0;
  color: var(--zwart);
}

.zo-kader--zwart .sectie-next-btn h4 {
  color: var(--beige);
}

/* ============================================
   KADER BUTTONS
   ============================================ */

.kader-buttons {
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
  margin-top: var(--space-m);
}


/* ============================================
   HERO FOTO
   ============================================ */

.hero-foto {
  margin-top: var(--margin);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 17 / 12;
  max-height: calc(100vh - 2 * var(--margin));
  overflow: hidden;
}

.hero-foto__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: center;
  display: block;
}

.hero-carousel__slide {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.hero-carousel__slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel__slide {
    transition: none;
  }
}
.hero-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--radius-big);
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--margin) var(--margin) calc(4 * var(--margin));
  width: 100%;
  align-self: flex-end;
}

.hero-content h1 {
  color: var(--beige);
  max-width: 100%;
}

.hero-naam {
  color: var(--beige);
  font-size: 1.33rem;
  font-weight: 700;
  line-height: 1.1;
  max-width: 100%;
  margin-bottom: 0;
  text-align: center;
}


.hero-scroll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-size);
  height: var(--btn-size);
  background-color: var(--rood);
  border-radius: 50%;
  color: var(--zwart);
  text-decoration: none;
  background-image: none;
  margin-top: var(--margin);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.hero-scroll-btn:hover {
  background-color: transparent;
  color: var(--rood);
  box-shadow: inset 0 0 0 2px var(--rood);
}

/* ============================================
   ACHTERGRONDKLASSEN
   ============================================ */

.bg-zwart {
  background-color: var(--zwart);
}

.bg-rood {
  background-color: var(--rood);
}

.bg-wit {
  background-color: var(--beige);
}

/* ============================================
   TYPOGRAFIE & BUTTONS — BASIS
   ============================================ */

/* Intro altijd volledige breedte van zijn kolom */
.intro, .intro p {
  max-width: 100%;
}

a {
  color: var(--rood);
  text-decoration: none;
  padding-bottom: 1px;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.3s ease;
}

a:hover {
  color: var(--zwart);
  background-size: 100% 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  height: var(--btn-size);
  padding: 0 1.5rem;
  font-family: var(--font);
  font-size: 0.889rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  background-image: none;
  border: 2px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-primary {
  background-color: var(--rood);
  border-color: var(--rood);
  color: var(--zwart);
}
.btn-primary:hover {
  background-color: transparent;
  border-color: var(--rood);
  color: var(--rood);
}

.btn-primary-outline {
  background-color: transparent;
  border-color: var(--rood);
  color: var(--rood);
}
.btn-primary-outline:hover {
  background-color: var(--rood);
  border-color: var(--rood);
  color: var(--zwart);
}

.btn-secondary {
  background-color: var(--zwart);
  border-color: var(--zwart);
  color: var(--beige);
}
.btn-secondary:hover {
  background-color: transparent;
  border-color: var(--zwart);
  color: var(--zwart);
}

.btn-secondary-outline {
  background-color: transparent;
  border-color: var(--zwart);
  color: var(--zwart);
}
.btn-secondary-outline:hover {
  background-color: var(--zwart);
  border-color: var(--zwart);
  color: var(--beige);
}

/* ============================================
   TOOLBOX BLOKKEN — spacing
   ============================================ */

.toolbox-blok {
  padding: var(--space-l) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.toolbox-blok:first-child {
  border-top: none;
}

.on-dark .toolbox-blok {
  border-top-color: rgba(255, 255, 255, 0.15);
}

.on-light .toolbox-blok,
.on-accent .toolbox-blok {
  border-top-color: rgba(0, 0, 0, 0.15);
}

/* ============================================
   ON-DARK — bg-zwart secties
   ============================================ */

.on-dark {
  color: var(--beige);
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark h5,
.on-dark h6 {
  color: var(--beige);
}

.on-dark p,
.on-dark li,
.on-dark p strong,
.on-dark li strong {
  color: rgba(250, 246, 238, 0.85);
}

.on-dark .label {
  color: rgba(250, 246, 238, 0.5);
}

.on-dark a:not(.btn) {
  color: var(--rood);
}
.on-dark a:not(.btn):hover {
  color: var(--beige);
}

.on-dark ul.opsomming li::before {
  color: var(--rood);
}

.on-dark .btn-primary {
  background-color: var(--rood);
  border-color: var(--rood);
  color: var(--zwart);
}
.on-dark .btn-primary:hover {
  background-color: transparent;
  border-color: var(--rood);
  color: var(--rood);
}

.on-dark .btn-primary-outline {
  background-color: transparent;
  border-color: var(--rood);
  color: var(--rood);
}
.on-dark .btn-primary-outline:hover {
  background-color: var(--rood);
  border-color: var(--rood);
  color: var(--zwart);
}

.on-dark .btn-secondary {
  background-color: var(--beige);
  border-color: var(--beige);
  color: var(--zwart);
}
.on-dark .btn-secondary:hover {
  background-color: transparent;
  border-color: var(--beige);
  color: var(--beige);
}

.on-dark .btn-secondary-outline {
  background-color: transparent;
  border-color: var(--beige);
  color: var(--beige);
}
.on-dark .btn-secondary-outline:hover {
  background-color: var(--beige);
  border-color: var(--beige);
  color: var(--zwart);
}

/* ============================================
   ON-ACCENT — bg-rood secties
   ============================================ */

.on-accent .btn-primary {
  background-color: var(--beige);
  border-color: var(--beige);
  color: var(--zwart);
}
.on-accent .btn-primary:hover {
  background-color: transparent;
  border-color: var(--beige);
  color: var(--beige);
}

.on-accent .btn-primary-outline {
  background-color: transparent;
  border-color: var(--beige);
  color: var(--beige);
}
.on-accent .btn-primary-outline:hover {
  background-color: var(--beige);
  border-color: var(--beige);
  color: var(--zwart);
}

.on-accent .btn-secondary {
  background-color: var(--zwart);
  border-color: var(--zwart);
  color: var(--beige);
}
.on-accent .btn-secondary:hover {
  background-color: transparent;
  border-color: var(--zwart);
  color: var(--zwart);
}

.on-accent .btn-secondary-outline {
  background-color: transparent;
  border-color: var(--zwart);
  color: var(--zwart);
}
.on-accent .btn-secondary-outline:hover {
  background-color: var(--zwart);
  border-color: var(--zwart);
  color: var(--beige);
}

.on-accent ul.opsomming li::before {
  color: var(--beige);
}

/* ============================================
   SCROLL TO TOP
   ============================================ */

.scroll-top {
  position: fixed;
  bottom: calc(2 * var(--margin));
  right: calc(2 * var(--margin));
  z-index: 200;
  width: var(--btn-size);
  height: var(--btn-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--zwart);
  color: var(--beige);
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.scroll-top:hover {
  background-color: transparent;
  border-color: var(--zwart);
  color: var(--zwart);
}

.scroll-top--on-dark,
.scroll-top--on-accent {
  background-color: var(--beige);
  color: var(--zwart);
  border-color: transparent;
}

.scroll-top--on-dark:hover,
.scroll-top--on-accent:hover {
  background-color: transparent;
  border-color: var(--beige);
  color: var(--beige);
}

.scroll-top:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}

.scroll-top[hidden] {
  display: flex;
  opacity: 0;
  pointer-events: none;
}

/* ============================================
   MAIN CONTENT WRAPPER
   ============================================ */

main {
  position: relative;
  z-index: 1;
  background-color: var(--beige);
  flex: 1;
}

.pagina-intro {
  padding-top: calc(4 * var(--margin) + var(--pill-hoogte));
}

/* ============================================
   CORNER STRIP
   ============================================ */

.corner-strip {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: var(--radius-big);
  position: relative;
  z-index: 2;
  margin-bottom: calc(-1 * var(--radius-big));
}

.corner-strip img {
  height: var(--radius-big);
  width: auto;
  display: block;
}

.corner-strip img:first-child {
  margin-left: var(--margin);
}

.corner-strip img:last-child {
  margin-right: var(--margin);
}


/* ============================================
   STICKY FOOTER WRAPPER
   ============================================ */

.footer-sticky-wrapper {
  position: sticky;
  bottom: 0;
  z-index: 0;
  clip-path: inset(0 round var(--radius-big) var(--radius-big) 0 0);
}

/* ============================================
   FOOTER
   ============================================ */

footer {
  background-color: transparent;
  padding: 0 var(--margin) var(--margin);
}

.footer-kader {
  background-color: var(--rood);
  border-radius: var(--radius-big);
  padding: var(--space-l) 0;
  color: var(--zwart);
}

.footer-kader__titel {
  font-size: clamp(2rem, 4vw, 2.78rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--zwart);
  max-width: 100%;
}

.footer-kader h3 {
  color: var(--zwart);
  margin-bottom: var(--margin);
  max-width: 100%;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.footer-nav a {
  color: var(--zwart);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 400;
  overflow-wrap: break-word;
  hyphens: auto;
}

.footer-bottom {
  margin-top: var(--space-l);
  align-items: flex-end;
}

.footer-credit {
  text-align: right;
}

.klein {
  font-size: 0.78rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.footer-kader .klein a {
  color: var(--zwart);
  text-decoration: none;
  padding-bottom: 3px;
}

.footer-kader .klein a:hover {
  background-size: 100% 1.5px;
}

.footer-logos {
  display: flex;
  align-items: center;
  gap: var(--gutter);
}

.footer-logo {
  height: auto;
  max-width: 100%;
  display: block;
}

.footer-logo--bohm  { width: 120px; }
.footer-logo--nfs   { width: 97px; }
.footer-logo--anbi  { width: 85px; }

.footer-logo-divider {
  display: block;
  width: 1.5px;
  align-self: stretch;
  background-color: var(--zwart);
  flex-shrink: 0;
}

.footer-nav a:hover {
  background-size: 100% 2px;
  color: var(--zwart);
}

.footer-break-mobiel {
  display: none;
}

@media (min-width: 769px) and (max-width: 1222px) {
  .kader-extended.over-kader,
  .kader-extended.voorbeelden-kader,
  .kader-extended.commissie-kader,
  .kader-extended.schaakbord-kader,
  .kader-extended.achtergrond-kader {
    width: calc(100% - 2 * var(--space-m));
    margin-left: var(--space-m);
    margin-right: var(--space-m);
  }
}

@media (max-width: 1330px) {
  .kader-extended {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 1368px) {

  .header-pill {
    max-width: calc(100% - 2 * var(--space-m));
  }

  .footer-kader .container {
    padding-left: calc(1.5 * var(--margin));
    padding-right: calc(1.5 * var(--margin));
  }

  .sectie-foto-wrap--links,
  .sectie-foto-wrap--rechts {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .sectie-foto-wrap--links {
    margin-bottom: 0;
  }

  .zo-werkt-foto {
    margin-top: var(--space-m);
  }

  .achtergrond-fotos {
    width: 100%;
    left: 0;
    transform: none;
    margin-left: 0;
    margin-right: 0;
    gap: 1rem;
  }

}

/* ============================================
   MOBIELE NAV
   ============================================ */

@media (max-width: 1240px) {
  .burger {
    display: flex;
    margin-left: auto;
  }

  .header-pill {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--pill-hoogte-mobiel);
    padding: 0 var(--space-m);
    border-radius: 30px;
    align-items: flex-start;
    transition: border-radius 0.3s ease;
  }

  .burger {
    height: var(--pill-hoogte-mobiel);
    justify-content: center;
  }

  .mainnav--links,
  .mainnav--rechts {
    display: none;
    order: 3;
    width: 100%;
    padding-top: 0;
    padding-bottom: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-left: 0;
  }

  .mainnav--links.is-open,
  .mainnav--rechts.is-open {
    display: flex;
  }

   .mainnav--rechts.is-open {
    margin-bottom: var(--margin);
  }

  .header-pill:has(.mainnav--links.is-open) {
    border-radius: calc(var(--radius-small) * 0.7);
  }

  .mainnav--links.is-open a:first-child {
    margin-top: var(--margin);
  }

  .logo {
    top: 0;
    height: var(--pill-hoogte-mobiel);
    transform: translateX(-50%);
    align-items: center;
  }

  .logo img {
    width: 100px;
  }
}

@media (max-width: 1000px) {
  .schaakbord-kader .col-4 {
    grid-column: span 12;
  }

  .schaakbord-kader .grid {
    row-gap: 0;
  }

  h2.schaakbord-kader__titel {
    text-align: left;
  }

  .footer-kader .grid {
    row-gap: var(--space-m);
  }

  .footer-bottom .col-6 {
    grid-column: span 12;
  }

  .footer-credit {
    text-align: left;
  }
}

@media (max-width: 768px) {
  :root {
    --radius-big: var(--radius-small);
    --margin-mobiel: calc(1.25 * var(--margin));
  }

  body .container {
    padding: 0 var(--margin-mobiel);
  }

  .pagina-intro {
    padding-top: calc(4 * var(--margin-mobiel) + var(--pill-hoogte-mobiel));
  }

  body .kader-fullwidth {
    width: calc(100% - 2 * var(--margin-mobiel));
    margin: var(--margin-mobiel);
  }

  header {
    top: calc(2 * var(--margin-mobiel));
    left: calc(2 * var(--margin-mobiel));
    right: calc(2 * var(--margin-mobiel));
  }

  .header-pill {
    max-width: 100%;
  }

  .schaakbord-kader .col-4 {
    grid-column: span 6;
  }

.zo-kader {
    padding: calc(2 * var(--margin));
  }

  .voorbeelden-kader .grid {
    row-gap: 0;
  }

  .footer-kader .col-6:first-child {
    margin-bottom: var(--space-l);
  }

  .footer-nav {
    gap: 0;
  }

  .mainnav a.is-active {
    border-color: transparent;
  }

  .kader-extended.schaakbord-kader,
  .kader-extended.voorbeelden-kader,
  .kader-extended.commissie-kader,
  .kader-extended.over-kader {
    padding: calc(1.75 * var(--margin));
  }

  .commissie-kader .col-8 {
    margin-bottom: var(--space-m);
  }

  .commissie-kader__titel {
    font-size: clamp(2rem, 4vw, 2.78rem);
  }

  ul.opsomming.commissie-lijst li {
    font-size: 1rem;
  }

  .grid-toggle {
    display: none;
  }

  .footer-kader {
    padding: var(--space-m) 0;
  }

  .footer-logos {
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
  }

  .footer-logos .footer-logo {
    width: auto;
    max-width: 100%;
    flex: 1;
    min-width: 0;
  }

  .footer-logo:first-child {
    flex: 2;
  }

  .footer-sticky-wrapper {
    position: static;
    bottom: auto;
    clip-path: none;
  }

  footer {
    transform: none;
  }

  .over-kader,
  .voorbeelden-kader {
    margin-top: var(--space-m);
    box-shadow: none;
  }

  .voorbeelden-kader__disclaimer {
    max-width: 100%;
  }

  .hero-content h1 {
    font-size: clamp(2.3rem, 5vw, 2.5rem);
  }

  .hero-naam {
    font-size: 1rem;
  }

  .hero-br {
    display: none;
  }

  .footer-break-mobiel {
    display: block;
  }

  .sectie-foto-wrap--links,
  .zo-werkt-links {
    margin-bottom: var(--gutter);
  }

  .sectie-foto-wrap--rechts {
    margin-top: 0;
  }

  .overlap-wrap .container + .container,
  .overlap-wrap .zo-werkt-foto,
  .voorbeelden-kader,
  .over-kader {
    margin-top: var(--gutter);
  }

  .achtergrond-fotos {
    flex-direction: column;
  }

  .achtergrond-foto {
    flex: none;
    width: 100%;
  }

  .hero-content {
    padding-bottom: var(--btn-size);
  }

  .hero-foto {
    aspect-ratio: unset;
    max-height: none;
    height: calc(100vh - 2 * var(--margin-mobiel));
  }

  .voorbeelden-kader__disclaimer {
    hyphens: auto;
  }

}