/*
  Whio Canyoning School
  Sportief en buiten: grote foto's van rand tot rand, zware schuine koppen,
  schuine randen als rotswanden en hoogtelijnen als achtergrond in donkere vlakken.
  Accentkleur: helder canyonblauw. Het blauwe touw loopt nog steeds langs de tekst.
*/
:root {
  --kalk: #f1f4f5;
  --wit: #ffffff;
  --graniet: #14212a;
  --schaduw: #55636b;
  --lijn: #d3dadd;
  --diep: #0b2533;
  --diep-2: #123a4e;
  --blauw: #1283d6;
  --blauw-donker: #0c66a8;
  --blauw-fel: #4fb0f5;
  --blauw-licht: #ddeefb;

  --kop: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --tekst: 'Source Sans 3', system-ui, sans-serif;
  --maat: 42rem;
  --breed: 76rem;
  --rand: clamp(1.1rem, 5vw, 3rem);
  --touw-ruimte: clamp(1.1rem, 4vw, 2.75rem);
  --schuin: clamp(24px, 4vw, 64px);
  --hoogtelijnen: repeating-radial-gradient(ellipse 120% 90% at 85% 15%, transparent 0 26px, rgba(255, 255, 255, .055) 26px 27px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--kalk);
  color: var(--graniet);
  font-family: var(--tekst);
  font-size: 1.125rem;
  line-height: 1.6;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blauw-donker); text-underline-offset: .18em; }
a:hover { color: var(--blauw); }
:focus-visible { outline: 3px solid var(--blauw-fel); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 50; padding: .5rem 1rem; background: #fff; }

/* ---------- Knoppen: schuin, als een sportlabel ---------- */
.btn-hero, .btn-solid, .b-button a, .nav-cta, .btn-signup {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .55rem 1.5rem;
  color: #fff;
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .01em;
  text-decoration: none;
}
.btn-hero::before, .btn-solid::before, .b-button a::before, .nav-cta::before, .btn-signup::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--blauw);
  border-radius: 3px;
  transform: skewX(-12deg);
  transition: background .15s;
}
.btn-hero:hover, .btn-solid:hover, .b-button a:hover, .nav-cta:hover, .btn-signup:hover { color: #fff; }
.btn-hero:hover::before, .btn-solid:hover::before, .b-button a:hover::before, .nav-cta:hover::before, .btn-signup:hover::before { background: var(--blauw-donker); }
.btn-hero.is-ghost::before { background: transparent; border: 2px solid rgba(255, 255, 255, .85); }
.btn-hero.is-ghost:hover::before { background: rgba(255, 255, 255, .14); }

/* ---------- Kop (ligt altijd over de donkere paginakop) ---------- */
.site-head {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: calc(.9rem + env(safe-area-inset-top)) var(--rand) 2.5rem;
  color: #fff;
  background: linear-gradient(rgba(11, 37, 51, .72), rgba(11, 37, 51, 0));
}
.wordmark { display: grid; color: #fff; text-decoration: none; font-family: var(--kop); line-height: .92; }
.wordmark:hover { color: #fff; }
.wordmark-top { font-weight: 800; font-style: italic; font-size: 1.75rem; letter-spacing: -.01em; }
.wordmark-bottom { font-weight: 700; font-size: 1rem; color: var(--blauw-fel); }

.nav-toggle {
  display: none;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.js .nav-toggle { display: inline-flex; align-items: center; }
.nav-toggle[aria-expanded="true"] { background: #fff; color: var(--diep); }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.js .site-nav:not(.is-open) { display: none !important; }
.site-nav {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: -1.6rem;
  padding: .5rem var(--rand) 1.75rem;
  background: var(--diep);
  background-image: var(--hoogtelijnen);
  border-bottom: 4px solid var(--blauw);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}
html:not(.js) .site-head { flex-wrap: wrap; }
html:not(.js) .site-nav { position: static; flex-basis: 100%; margin: 0; background: none; box-shadow: none; border: 0; padding: 0; }
.site-nav li a {
  display: block;
  padding: .65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.55rem;
  text-decoration: none;
}
.site-nav .submenu li a { padding-left: 1rem; font-family: var(--tekst); font-weight: 400; font-size: 1.1rem; color: #cfe1ec; }
.site-nav a[aria-current="page"] { color: var(--blauw-fel); }
.site-nav { display: flex; flex-direction: column; }
/* Mobiel: Agenda, Lesmateriaal en taal bovenaan in het menu */
.nav-actions { order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: .75rem 0 1rem .4rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.nav-learn { color: #fff; font-weight: 600; }
.nav-learn:hover { color: var(--blauw-fel); }
.lang-link { display: inline-block; color: #fff; font-weight: 600; }
.lang-link:hover { color: var(--blauw-fel); }

.admin-strip {
  position: fixed;
  z-index: 40;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  gap: 1rem;
  padding: .5rem 1rem;
  background: var(--graniet);
  color: #fff;
  font-size: .9rem;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.admin-strip a { color: var(--blauw-fel); font-weight: 600; }

/* ---------- Paginakop met foto ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(22rem, 62svh, 40rem);
  background: var(--diep);
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schuin)), 0 100%);
  overflow: hidden;
}
.hero.is-plain { min-height: 0; background-image: var(--hoogtelijnen); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero.has-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 37, 51, .15) 30%, rgba(11, 37, 51, .82) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 7.5rem var(--rand) calc(var(--schuin) + 2.25rem);
}
.hero h1 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--kop);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2.7rem, 8.5vw, 5.6rem);
  line-height: .94;
  letter-spacing: -.015em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.hero-lede { max-width: 36rem; margin: 1rem 0 0; font-size: 1.2rem; line-height: 1.5; color: #e2eef5; }
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; font-size: .95rem; }
.crumbs a { color: #cfe1ec; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs a::after { content: '/'; margin-left: .4rem; color: rgba(255, 255, 255, .45); }

/* ---------- Startpagina ---------- */
.home-hero { min-height: clamp(34rem, 94svh, 60rem); }
.home-hero h1 { font-size: clamp(3.3rem, 12vw, 8rem); max-width: 12ch; }
.home-hero .hero-lede { font-size: 1.3rem; }
.hero-ctas, .band-ctas { display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; margin-top: 1.75rem; padding-left: .4rem; }
.hero-trust { margin: 1.5rem 0 0; font-size: .95rem; color: #b8d3e2; }
.hero-trust::before { content: ''; display: inline-block; width: 1.6rem; height: 3px; margin-right: .6rem; vertical-align: middle; background: var(--blauw-fel); }

.section { max-width: var(--breed); margin: 0 auto; padding: clamp(2.5rem, 7vw, 4.5rem) var(--rand) 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.4rem; }
.section-head h2, .band h2, .team-copy h2 {
  margin: 0;
  font-family: var(--kop);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.01em;
}
.more-link { font-weight: 700; white-space: nowrap; text-decoration: none; border-bottom: 2px solid var(--blauw); padding-bottom: .1rem; }
.empty-note { color: var(--schaduw); }

/* Evenementkaarten */
.ev-grid { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr); }
.ev-grid.is-scroller {
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: min(82%, 21rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rand);
  margin: 0 calc(-1 * var(--rand));
  padding: .25rem var(--rand) 1rem;
  scrollbar-width: thin;
}
.ev-grid.is-scroller > * { scroll-snap-align: start; }
.ev-card { background: var(--wit); border-radius: 4px; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 33, 42, .08); }
.ev-link { display: flex; flex-direction: column; height: 100%; color: var(--graniet); text-decoration: none; }
.ev-link:hover { color: var(--graniet); }
.ev-media { position: relative; aspect-ratio: 3 / 2; background: var(--diep); background-image: var(--hoogtelijnen); }
.ev-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ev-link:hover .ev-media img { transform: scale(1.04); }
.ev-badge {
  position: absolute;
  left: 1rem;
  bottom: -1.1rem;
  z-index: 1;
  display: grid;
  justify-items: center;
  min-width: 4.2rem;
  padding: .35rem .7rem .4rem;
  color: #fff;
  font-family: var(--kop);
  line-height: .95;
}
.ev-badge::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--blauw); transform: skewX(-12deg); border-radius: 3px; }
.ev-day { font-weight: 800; font-style: italic; font-size: 2rem; }
.ev-mon { font-weight: 700; font-size: 1rem; }
.ev-badge.is-flex .ev-day { font-size: 1.25rem; }
.ev-body { display: grid; gap: .15rem; padding: 1.7rem 1.1rem 1.2rem; }
.ev-body p { margin: 0; }
.ev-type { font-size: .9rem; font-weight: 700; color: var(--blauw-donker); }
.ev-title { margin: .1rem 0 .3rem; font-family: var(--kop); font-weight: 700; font-size: 1.55rem; line-height: 1.05; }
.ev-when, .ev-where { font-size: .98rem; color: var(--schaduw); }
.ev-price { margin-top: .4rem !important; font-weight: 700; }

/* Tegels met onderdelen */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
.tile a {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 15rem;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--diep);
  background-image: var(--hoogtelijnen);
  color: #fff;
  text-decoration: none;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tile a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 37, 51, 0) 35%, rgba(11, 37, 51, .88)); }
.tile a:hover img { transform: scale(1.05); }
.tile-text { position: relative; z-index: 1; display: grid; gap: .3rem; padding: 1.2rem 1.25rem; }
.tile-title { font-family: var(--kop); font-weight: 800; font-style: italic; font-size: 1.9rem; line-height: 1; }
.tile-title::after { content: ''; display: block; width: 2.2rem; height: 4px; margin-top: .5rem; background: var(--blauw-fel); transform: skewX(-12deg); transition: width .2s; }
.tile a:hover .tile-title::after { width: 4rem; }
.tile-sub { font-size: 1rem; line-height: 1.4; color: #dbe9f1; }

/* Donkere band (expedities) */
.band {
  margin-top: clamp(3rem, 8vw, 5rem);
  background: var(--diep);
  background-image: var(--hoogtelijnen);
  color: #e2eef5;
  clip-path: polygon(0 var(--schuin), 100% 0, 100% calc(100% - var(--schuin)), 0 100%);
}
.band-inner {
  max-width: var(--breed);
  margin: 0 auto;
  padding: calc(var(--schuin) + 3rem) var(--rand);
  display: grid;
  gap: 2rem;
  align-items: center;
}
.band h2 { color: #fff; }
.band p { max-width: 34rem; font-size: 1.15rem; }
.band-photo { margin: 0; }
.band-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }

/* Teamkaart */
.home-team { padding-bottom: clamp(3rem, 8vw, 5rem); }
.team-card { display: grid; background: var(--wit); border-radius: 4px; overflow: hidden; }
.team-card img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.team-copy { padding: 1.75rem 1.5rem 2rem; }
.team-copy p { margin: .9rem 0 1.5rem; max-width: 32rem; }
.team-copy .btn-solid { margin-left: .4rem; }

/* ---------- Inhoudspagina's ---------- */
.content {
  position: relative;
  max-width: calc(var(--maat) + var(--touw-ruimte));
  margin: clamp(2rem, 6vw, 3.5rem) var(--rand) 0;
  padding: .25rem 0 clamp(3rem, 10vw, 6rem) var(--touw-ruimte);
  border-left: 3px solid var(--blauw);
}
@media (min-width: 52rem) { .content { margin-left: auto; margin-right: auto; } }
.content > * + * { margin-top: 1.4rem; }
.content > :first-child { margin-top: 0; }

.b-heading { position: relative; margin: 2.75rem 0 0; font-family: var(--kop); line-height: 1.02; }
h2.b-heading { font-weight: 800; font-style: italic; font-size: clamp(2rem, 5vw, 2.7rem); letter-spacing: -.01em; }
h3.b-heading { font-weight: 700; font-size: 1.6rem; }
h2.b-heading::before {
  content: '';
  position: absolute;
  top: .5em;
  left: calc(-1 * var(--touw-ruimte) - 3px);
  width: calc(var(--touw-ruimte) - .5rem);
  height: 3px;
  background: var(--blauw);
}
.b-heading + * { margin-top: .75rem; }

.b-text p { margin: 0 0 1em; }
.b-text > :last-child { margin-bottom: 0; }
.b-text h3, .b-text h4 { font-family: var(--kop); font-weight: 700; font-size: 1.4rem; line-height: 1.15; margin: 1.5em 0 .4em; }
.b-text ul, .b-text ol { padding-left: 1.25em; margin: 0 0 1em; }
.b-text li + li { margin-top: .3em; }
.b-text li::marker { color: var(--blauw); }
.b-text blockquote { margin: 1.5em 0; padding: 1rem 1.25rem; background: var(--wit); border-left: 4px solid var(--blauw); font-size: 1.1rem; color: var(--schaduw); }
.b-text blockquote p:last-child { margin: 0; }

figure { margin: 0; }
figcaption { margin-top: .5rem; font-size: .95rem; color: var(--schaduw); }
.b-image img { width: 100%; border-radius: 3px; }
.b-image.is-wide { width: 100vw; max-width: none; margin-left: calc(50% - 50vw - (var(--touw-ruimte) + 3px) / 2); }
.b-image.is-wide img { max-height: 85vh; object-fit: cover; border-radius: 0; }
.b-image.is-wide figcaption { padding: 0 var(--rand); }

.b-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.b-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 40rem) { .b-gallery { grid-template-columns: repeat(3, 1fr); } }
.b-gallery.has-captions { gap: 1rem .6rem; }
.b-gallery.has-captions img { aspect-ratio: 1; object-position: 50% 30%; border-radius: 3px; }
.b-gallery.has-captions figcaption { margin-top: .35rem; font-family: var(--kop); font-weight: 700; font-size: 1.15rem; color: var(--graniet); }
@media (min-width: 40rem) { .b-gallery.has-captions { grid-template-columns: repeat(4, 1fr); } }

.b-video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--graniet); }
.b-video-frame iframe, .b-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.b-video-frame.is-file video { object-fit: contain; background: #000; }

.b-file a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--blauw);
  text-decoration: none;
  color: var(--graniet);
}
.b-file a:hover { border-color: var(--blauw); color: var(--graniet); }
.b-file-label { font-weight: 700; }
.b-file-meta { color: var(--schaduw); font-size: .9rem; white-space: nowrap; }
.b-button { padding-left: .4rem; }

.content .ev-grid { gap: 1rem; }
.b-events-empty { color: var(--schaduw); }
@media (min-width: 40rem) { .content .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Agenda en evenement ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.chips a {
  padding: .45rem 1rem;
  border: 2px solid var(--lijn);
  border-radius: 999px;
  color: var(--graniet);
  font-weight: 600;
  text-decoration: none;
  background: var(--wit);
}
.chips a:hover { border-color: var(--blauw); }
.chips a[aria-current="page"] { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.page > .section:last-child { padding-bottom: clamp(3rem, 8vw, 5rem); }

.event-layout { max-width: var(--breed); margin: 0 auto; padding: clamp(2rem, 6vw, 3.5rem) var(--rand) 0; display: grid; gap: 2rem; }
.event-layout .content { margin: 0; padding-bottom: 2rem; }
.facts { align-self: start; background: var(--wit); border-radius: 4px; padding: 1.4rem 1.4rem 1.6rem; border-top: 5px solid var(--blauw); }
.facts dl { margin: 0 0 1.5rem; display: grid; gap: .8rem; }
.facts dt { font-size: .9rem; font-weight: 700; color: var(--blauw-donker); }
.facts dd { margin: 0; font-size: 1.05rem; line-height: 1.4; }
.btn-signup { display: flex; width: calc(100% - .8rem); margin: 0 .4rem; font-size: 1.45rem; min-height: 54px; }
.facts-note { margin: .9rem 0 0; font-size: .9rem; color: var(--schaduw); }
.facts-closed { margin: 0; font-weight: 700; color: var(--schaduw); }

/* ---------- Voet ---------- */
.site-foot {
  flex-shrink: 0;
  margin-top: auto;
  background: var(--diep);
  background-image: var(--hoogtelijnen);
  color: #d5e5ee;
  clip-path: polygon(0 var(--schuin), 100% 0, 100% 100%, 0 100%);
}
.foot-inner {
  max-width: var(--breed);
  margin: 0 auto;
  padding: calc(var(--schuin) + 2.5rem) var(--rand) calc(2.5rem + env(safe-area-inset-bottom));
  display: grid;
  gap: 2rem;
}
.foot-inner p { margin: 0 0 .5rem; }
.foot-name { font-family: var(--kop); font-weight: 800; font-style: italic; font-size: 1.9rem; color: #fff; }
.foot-label { font-weight: 700; color: #fff; }
.site-foot a { color: var(--blauw-fel); }
.site-foot a:hover { color: #fff; }
.foot-partners ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.foot-partners img { width: 72px; height: 72px; object-fit: contain; border-radius: 4px; background: #fff; }

/* ---------- Groter scherm ---------- */
@media (min-width: 40rem) {
  .ev-grid:not(.is-scroller) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .js .nav-toggle { display: none; }
  .js .site-nav:not(.is-open), .site-nav {
    position: static;
    display: flex !important;
    align-items: center;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .menu { display: flex; gap: 1.4rem; }
  .menu > li { position: relative; }
  .menu > li > a { display: block; padding: .3rem 0; border: 0; font-size: 1.3rem; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); }
  .menu > li.is-active > a { box-shadow: 0 3px 0 var(--blauw-fel); }
  .submenu {
    position: absolute;
    top: 100%;
    left: -1rem;
    z-index: 30;
    min-width: 15rem;
    padding: .5rem 0;
    background: #fff;
    border-top: 4px solid var(--blauw);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 12px 28px rgba(11, 37, 51, .22);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .12s, transform .12s, visibility 0s .12s;
  }
  .has-sub:hover .submenu, .has-sub:focus-within .submenu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .site-nav .submenu li a { display: block; padding: .55rem 1rem; border: 0; color: var(--graniet); font-size: 1rem; }
  .site-nav .submenu li a:hover, .site-nav .submenu a[aria-current="page"] { background: var(--blauw-licht); color: var(--blauw-donker); }
  .site-nav { flex-direction: row; }
  .nav-actions { order: 0; padding: 0; border: 0; gap: 1.2rem; flex-wrap: nowrap; }
  .nav-cta { margin: 0 0 0 .5rem; min-height: 42px; padding: .35rem 1.2rem; font-size: 1.2rem; }
  .nav-learn { font-size: .95rem; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); }
  .lang-link { margin: 0; font-size: .95rem; }

  .ev-grid.is-scroller { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; }
  .ev-grid:not(.is-scroller) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .content .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Eerste twee tegels groot, de rest kleiner */
  .tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tile { grid-column: span 3; }
  .tile:nth-child(-n+2) { grid-column: span 6; }
  .tile:nth-child(-n+2) a { min-height: 22rem; }
  .tile:nth-child(-n+2) .tile-title { font-size: 2.5rem; }

  .band-inner { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .team-card { grid-template-columns: 1fr 1fr; }
  .team-copy { padding: 2.5rem; align-self: center; }

  .event-layout { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }
  .event-layout .content { grid-row: 1; grid-column: 1; max-width: none; }
  .facts { grid-column: 2; position: sticky; top: 1.5rem; }

  .foot-inner { grid-template-columns: 1fr auto; align-items: start; }
}

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

/* ---------- Formulieren (aanmelden, leeromgeving) ---------- */
.form-wrap { max-width: 40rem; margin: 0 auto; padding: clamp(2rem, 6vw, 3rem) var(--rand) clamp(3rem, 8vw, 5rem); }
.form-intro { margin: 0 0 1.5rem; color: var(--schaduw); }
.form-alert { margin: 0 0 1.5rem; padding: 1rem 1.2rem; background: #fde8e4; border-left: 4px solid #c0392b; color: #6f2117; }
.form-alert p { margin: 0; }
.form-alert p + p { margin-top: .4rem; }
.form-alert.is-info { background: var(--blauw-licht); border-color: var(--blauw); color: var(--diep); }
.form-alert.is-ok { background: #e2f3e6; border-color: #2d7a45; color: #1d4d2c; }
.signup, .form-stack { display: grid; gap: 1.5rem; }
.signup fieldset { margin: 0; padding: 1.25rem 1.25rem 1.4rem; border: 0; border-top: 4px solid var(--blauw); background: var(--wit); border-radius: 4px; display: grid; gap: 1rem; }
.signup legend { float: left; width: 100%; padding: 0; margin-bottom: .25rem; font-family: var(--kop); font-weight: 700; font-size: 1.5rem; }
.signup label, .form-stack label { display: grid; gap: .3rem; font-weight: 600; font-size: 1rem; }
.signup input:not([type="checkbox"]), .signup textarea, .form-stack input:not([type="checkbox"]), .form-stack textarea, .form-stack select {
  width: 100%;
  min-height: 48px;
  padding: .6rem .75rem;
  border: 1px solid #b9c4c9;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-weight: 400;
  color: var(--graniet);
}
.signup input:focus, .signup textarea:focus, .form-stack input:focus, .form-stack select:focus { outline: 3px solid var(--blauw-licht); border-color: var(--blauw); }
.signup .check, .form-stack .check { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; }
.signup .check input, .form-stack .check input { width: 22px; height: 22px; margin-top: .15rem; flex-shrink: 0; accent-color: var(--blauw); }
.opt { font-weight: 400; color: var(--schaduw); }
.row-2 { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .row-2 { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup .btn-signup, .form-stack .btn-signup { width: calc(100% - .8rem); margin: .5rem .4rem 0; border: 0; background: none; cursor: pointer; }

/* ---------- Leeromgeving ---------- */
.learn-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: calc(.8rem + env(safe-area-inset-top)) var(--rand) .8rem;
  background: var(--diep); color: #fff;
}
.learn-nav { display: flex; align-items: center; gap: 1rem; }
.learn-nav a { color: #fff; font-weight: 600; }
.learn-nav button { background: none; border: 0; padding: 0; color: #b8d3e2; font: inherit; text-decoration: underline; cursor: pointer; }
.learn-main { flex: 1 0 auto; }
.learn-hero { background: var(--diep); background-image: var(--hoogtelijnen); color: #e2eef5; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schuin)), 0 100%); }
.learn-hero .learn-wide { padding-top: 2.5rem; padding-bottom: calc(var(--schuin) + 2rem); }
.learn-hero h1, .learn-narrow h1 { margin: 0; font-family: var(--kop); font-weight: 800; font-style: italic; font-size: clamp(2.4rem, 8vw, 4.2rem); line-height: .95; color: #fff; }
.learn-narrow h1 { color: var(--graniet); margin-bottom: 1rem; }
.learn-hero p { max-width: 38rem; margin: .9rem 0 0; font-size: 1.15rem; }
.learn-hero.is-lesson h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); }
.learn-wide { max-width: 56rem; margin: 0 auto; padding: 2rem var(--rand) 3rem; }
.learn-narrow { max-width: 32rem; margin: 0 auto; padding: 2.5rem var(--rand) 3rem; }
.learn-back { margin: 0 0 .6rem !important; font-size: .95rem; }
.learn-back a { color: #b8d3e2; }
.learn-narrow .learn-back a { color: var(--blauw-donker); }
.learn-back span { margin-left: .5rem; color: #8fb0c2; }
.learn-links { margin: 1rem 0 0; }
.learn-h2 { margin: 2.5rem 0 1rem; font-family: var(--kop); font-weight: 700; font-size: 1.8rem; }
.request-box .learn-h2 { margin-top: 0; }
.request-box { margin-top: 2.5rem; padding: 1.4rem; background: var(--wit); border-top: 4px solid var(--blauw); border-radius: 4px; }
.form-stack .check.is-card, .choose .check { padding: .8rem 1rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: 4px; }
.choose { margin: 0; padding: 0; border: 0; display: grid; gap: .6rem; }
.choose legend { margin-bottom: .6rem; font-weight: 700; }
.small { font-size: .9rem; }

.mod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.mod a { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; background: var(--wit); border-radius: 4px; color: var(--graniet); text-decoration: none; border-left: 5px solid var(--lijn); }
.mod.is-open a { border-left-color: var(--blauw); }
.mod.is-pending a { border-left-color: #d9a520; }
.mod a:hover { box-shadow: 0 2px 10px rgba(20, 33, 42, .1); color: var(--graniet); }
.mod-code { flex-shrink: 0; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; font-family: var(--kop); font-weight: 800; font-style: italic; font-size: 1.35rem; color: #fff; background: var(--diep); clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
.mod.is-open .mod-code { background: var(--blauw); }
.mod-text { display: grid; flex: 1; min-width: 0; }
.mod-title { font-family: var(--kop); font-weight: 700; font-size: 1.45rem; line-height: 1.1; }
.mod-meta { font-size: .92rem; color: var(--schaduw); }
.mod-state { font-size: .85rem; font-weight: 700; white-space: nowrap; color: var(--schaduw); }
.mod.is-open .mod-state { color: var(--blauw-donker); }
.mod.is-pending .mod-state { color: #8a6a0f; }

.lesson-index { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.lesson-index a, .lesson-index .is-locked { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; background: var(--wit); border-radius: 4px; color: var(--graniet); text-decoration: none; font-weight: 600; }
.lesson-index a:hover { color: var(--blauw-donker); box-shadow: 0 2px 10px rgba(20, 33, 42, .1); }
.lesson-index .is-locked { color: var(--schaduw); font-weight: 400; }
.li-num { display: grid; place-items: center; flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--blauw-licht); color: var(--blauw-donker); font-family: var(--kop); font-weight: 700; font-size: 1.15rem; }
.is-locked .li-num { background: #e6eaec; color: var(--schaduw); }

.lesson-nav { max-width: calc(var(--maat) + var(--touw-ruimte)); margin: 0 auto 3rem; padding: 0 var(--rand); display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (min-width: 52rem) { .lesson-nav { padding: 0; } }
.lesson-nav a { display: grid; gap: .1rem; padding: .9rem 1rem; background: var(--wit); border-radius: 4px; color: var(--graniet); text-decoration: none; font-weight: 600; line-height: 1.3; }
.lesson-nav a span { font-size: .85rem; font-weight: 700; color: var(--blauw-donker); }
.lesson-nav .is-next { text-align: right; background: var(--blauw); color: #fff; }
.lesson-nav .is-next span { color: #d6ebfb; }
.learn-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; padding: 1.5rem var(--rand) calc(1.5rem + env(safe-area-inset-bottom)); background: var(--diep); font-size: .95rem; }
.learn-foot a { color: var(--blauw-fel); }

/* Plekken */
.spots { margin: .6rem 0 0; }
.facts .spots { margin: 0 0 1.4rem; }
.spots-bar { height: 8px; background: #e3e9ec; border-radius: 999px; overflow: hidden; }
.spots-bar span { display: block; height: 100%; background: var(--blauw); border-radius: 999px; }
.spots.is-low .spots-bar span { background: #e08a1e; }
.spots.is-full .spots-bar span { background: #c0392b; }
.spots-label { margin: .35rem 0 0 !important; font-size: .9rem; font-weight: 600; color: var(--schaduw); }
.spots.is-low .spots-label { color: #a8620f; }
.spots.is-full .spots-label { color: #a32d20; }

.signup .check.is-card { padding: .75rem .9rem; border: 1px solid var(--lijn); border-radius: 4px; line-height: 1.35; }
.signup .check.is-card:has(input:checked) { border-color: var(--blauw); background: var(--blauw-licht); }
.signup .check.is-fixed { opacity: .85; }
.also .opt { margin: 0; font-size: .95rem; }

/* First descents */
.topo-grade { min-width: 0; padding: .45rem .8rem; }
.topo-grade .ev-day { font-size: 1.15rem; letter-spacing: .01em; }
.topo-pdf { margin-top: .35rem !important; font-size: .9rem; font-weight: 700; color: var(--blauw-donker); }
.topo-pdf::before { content: ''; display: inline-block; width: .9rem; height: 2px; margin-right: .4rem; vertical-align: middle; background: var(--blauw); }
.event-content:empty { display: none; }

/* Leden */
.member-initials { display: grid; place-items: center; aspect-ratio: 1; width: 100%; border-radius: 3px; background: var(--diep); background-image: var(--hoogtelijnen); color: #fff; font-family: var(--kop); font-weight: 800; font-style: italic; font-size: 2.4rem; }

/* Account en winkel (leeromgeving) */
.btn-small-solid { display: inline-flex; align-items: center; min-height: 40px; padding: .3rem .9rem; border: 0; border-radius: 4px; background: var(--blauw); color: #fff; font: inherit; font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-small-solid:hover { background: var(--blauw-donker); color: #fff; }
.link-btn { background: none; border: 0; padding: .25rem 0; color: var(--blauw-donker); font: inherit; text-decoration: underline; cursor: pointer; }
.member-status { display: grid; gap: .5rem; }
.member-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1rem; background: var(--wit); border-radius: 4px; }
.profile-photo { display: flex; gap: 1.2rem; align-items: center; margin: 1rem 0 .5rem; }
.profile-photo img, .profile-photo .member-initials { width: 110px; height: 110px; flex-shrink: 0; object-fit: cover; border-radius: 50%; font-size: 2rem; }
.profile-form { margin-top: 1.2rem; }
.learn-back.is-dark a { color: var(--blauw-donker); }
.shop-wrap { padding-top: 1.5rem; }
.cat-tabs { display: flex; gap: .4rem; overflow-x: auto; margin: 0 calc(-1 * var(--rand)) .9rem; padding: 0 var(--rand) .3rem; scrollbar-width: none; }
.cat-tabs a { flex-shrink: 0; padding: .5rem .95rem; border-radius: 999px; background: var(--wit); border: 2px solid var(--lijn); color: var(--graniet); font-weight: 600; font-size: .95rem; text-decoration: none; }
.cat-tabs a[aria-current="page"] { background: var(--diep); border-color: var(--diep); color: #fff; }
.shop-tools { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.shop-tools input, .shop-tools select { min-height: 46px; padding: .45rem .7rem; border: 1px solid #b9c4c9; border-radius: 4px; background: #fff; font: inherit; }
.shop-count { margin: .8rem 0 1rem; color: var(--schaduw); font-weight: 600; font-size: .95rem; }
.pgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem .7rem; }
@media (min-width: 44rem) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } }
@media (min-width: 64rem) { .pgrid:not(.is-related) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pcard a { display: flex; flex-direction: column; height: 100%; color: var(--graniet); text-decoration: none; }
.pcard-img { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 33, 42, .08); }
.pcard-img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: transform .3s ease; }
.pcard a:hover .pcard-img img { transform: scale(1.05); }
.pcard-noimg { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, #e7eef2, #d5e1e7); color: #9fb3bd; font-family: var(--kop); font-weight: 800; font-style: italic; font-size: 3.5rem; }
.pcard-noimg.is-big { font-size: 7rem; }
.pcard-flag { position: absolute; left: .5rem; top: .5rem; padding: .2rem .55rem; border-radius: 3px; background: var(--blauw); color: #fff; font-size: .75rem; font-weight: 700; }
.pcard-flag.is-inline { position: static; display: inline-block; margin-left: .5rem; vertical-align: middle; }
.pcard-body { display: grid; gap: .2rem; padding: .7rem .15rem 0; }
.pcard-brand { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--blauw-donker); text-transform: uppercase; }
.pcard-name { font-weight: 700; line-height: 1.25; }
.pcard-desc { font-size: .88rem; color: var(--schaduw); line-height: 1.35; }
.pcard-price { font-family: var(--kop); font-weight: 700; font-size: 1.35rem; }
.pcard-price small { font-family: var(--tekst); font-size: .8rem; font-weight: 600; color: var(--schaduw); }
.pcard-price s { margin-left: .4rem; font-family: var(--tekst); font-size: .85rem; font-weight: 400; color: var(--schaduw); }
.pcard-sizes { display: flex; flex-wrap: wrap; gap: .25rem; }
.pcard-sizes span { min-width: 1.9rem; padding: .05rem .35rem; border: 1px solid var(--lijn); border-radius: 3px; background: #fff; font-size: .75rem; font-weight: 600; text-align: center; }
.pcard-sizes .is-out { color: #a9b5ba; text-decoration: line-through; }
.pcard-stock { font-size: .82rem; font-weight: 600; }
.pcard-stock.is-in { color: #2d7a45; }
.pcard-stock.is-low { color: #b36b12; }
.pcard-stock.is-out { color: #a32d20; }
.pcard.is-out .pcard-img img { opacity: .5; }
.crumb-bar { margin: .3rem 0 1rem; font-size: .95rem; color: var(--schaduw); }
.pdetail { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .pdetail { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: start; } }
.pgallery-main { display: grid; place-items: center; aspect-ratio: 1; background: #fff; border-radius: 6px; overflow: hidden; }
.pgallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 5%; }
.pgallery-thumbs { display: flex; gap: .5rem; margin-top: .6rem; overflow-x: auto; }
.pgallery-thumbs button { flex-shrink: 0; width: 68px; height: 68px; padding: 3px; border: 2px solid transparent; border-radius: 4px; background: #fff; cursor: pointer; }
.pgallery-thumbs button[aria-current="true"] { border-color: var(--blauw); }
.pgallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pinfo .shop-title { margin-top: .2rem; }
.pinfo-short { margin: .6rem 0 0; font-size: 1.1rem; color: var(--schaduw); }
.pprice { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; margin: 1rem 0 1.2rem; }
.pprice-now { font-family: var(--kop); font-weight: 800; font-style: italic; font-size: 2.4rem; line-height: 1; color: var(--blauw-donker); }
.pprice-unit { font-weight: 600; color: var(--schaduw); }
.pprice-was { color: var(--schaduw); text-decoration: line-through; }
.pbuy { display: grid; gap: 1rem; }
.size-pick { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.size-pick legend { width: 100%; margin-bottom: .4rem; font-weight: 700; }
.size-pick label { position: relative; }
.size-pick input { position: absolute; opacity: 0; }
.size-pick span { display: grid; place-items: center; min-width: 3rem; min-height: 46px; padding: 0 .8rem; border: 2px solid var(--lijn); border-radius: 4px; background: #fff; font-weight: 700; cursor: pointer; }
.size-pick input:checked + span { border-color: var(--blauw); background: var(--blauw-licht); color: var(--blauw-donker); }
.size-pick input:focus-visible + span { outline: 3px solid var(--blauw-fel); outline-offset: 2px; }
.size-pick .is-out span { color: #a9b5ba; text-decoration: line-through; cursor: not-allowed; background: var(--kalk); }
.qty { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.qty-label { font-weight: 700; }
.qty-box { display: flex; border: 2px solid var(--lijn); border-radius: 4px; overflow: hidden; background: #fff; }
.qty-box button { width: 46px; min-height: 46px; border: 0; background: var(--kalk); font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.qty-box input { width: 4rem; border: 0; text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.qty-box input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pstock { margin: 0; font-weight: 600; color: #2d7a45; }
.pstock.is-low { color: #b36b12; }
.pickup { margin-top: 1.4rem; padding: .9rem 1rem; background: var(--wit); border-left: 4px solid var(--blauw); border-radius: 4px; font-size: .95rem; }
.pdesc h2 { margin: 1.6rem 0 .4rem; font-family: var(--kop); font-weight: 700; font-size: 1.4rem; }
.pdesc p { white-space: pre-line; margin: 0; }
.cart-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .5rem; }
.cart-item { display: grid; grid-template-columns: 1fr auto auto; gap: .4rem .8rem; align-items: center; padding: .8rem 1rem; background: var(--wit); border-radius: 4px; }
.cart-item.is-error { box-shadow: inset 4px 0 0 #c0392b; }
.cart-item .link-btn { grid-column: 1 / -1; justify-self: start; font-size: .9rem; }
.cart-qty input { width: 4.5rem; min-height: 42px; padding: .3rem .5rem; border: 1px solid #b9c4c9; border-radius: 4px; font: inherit; }
.cart-line { font-weight: 700; }
.cart-total { margin: 1.2rem 0; font-size: 1.2rem; }
.sr { position: absolute; left: -9999px; }
.order-card { margin-top: 1rem; padding: 1rem 1.1rem; background: var(--wit); border-radius: 4px; }
.order-card ul { margin: .5rem 0; padding-left: 1.2rem; }
.order-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.order-status { font-size: .85rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; background: #eceeee; }
.order-status.is-klaar { background: #e2f3e6; color: #1d4d2c; }
.order-status.is-nieuw { background: var(--blauw-licht); color: var(--diep); }
.blog-intro { padding-bottom: 0; }
.post-card .ev-body { padding-top: 1.1rem; }

/* Filterbalk (blog) */
.filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: 1rem; background: var(--wit); border-radius: 4px; border-top: 4px solid var(--blauw); }
.filter-bar label { display: grid; gap: .25rem; font-size: .85rem; font-weight: 700; color: var(--schaduw); }
.filter-bar .filter-search { grid-column: 1 / -1; }
.filter-bar input, .filter-bar select { width: 100%; min-height: 44px; padding: .45rem .6rem; border: 1px solid #b9c4c9; border-radius: 4px; background: #fff; font: inherit; font-size: 1rem; font-weight: 400; color: var(--graniet); }
.filter-apply { grid-column: 1 / -1; min-height: 44px; border: 0; border-radius: 4px; background: var(--blauw); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.filters-js .filter-apply { display: none; }
.filters-js .filter-bar:focus-within .filter-apply { display: block; }
.filter-count { margin: .9rem 0 1.1rem; color: var(--schaduw); font-weight: 600; }
.filter-count a { margin-left: .6rem; }
@media (min-width: 52rem) {
  .filter-bar { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); align-items: end; }
  .filter-bar .filter-search { grid-column: auto; }
  .filters-js .filter-bar:focus-within .filter-apply, .filter-apply { grid-column: 1 / -1; justify-self: start; padding: 0 1.4rem; }
}
.post-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem !important; }
.post-tags span { padding: .1rem .55rem; border-radius: 999px; background: var(--kalk); font-size: .8rem; font-weight: 600; color: var(--schaduw); }
.post-tags .is-lang { background: var(--blauw-licht); color: var(--blauw-donker); }
.shop-title { margin: 0; font-family: var(--kop); font-weight: 800; font-style: italic; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1; }
.shop-tools { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
.shop-tools input, .shop-tools select { width: 100%; min-width: 0; }
.shop-tools select { max-width: 11rem; }
button.btn-signup { border: 0; background: none; cursor: pointer; width: calc(100% - .8rem); margin-left: .4rem; margin-right: .4rem; }
.pcard-brand { letter-spacing: .02em; }

/* Knop "Inloggen leden": witte tekst en witte rand */
.nav-learn { display: inline-flex; align-items: center; min-height: 40px; padding: .3rem .95rem; border: 2px solid #fff; border-radius: 4px; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.nav-learn:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.learn-who { color: #b8d3e2; font-weight: 600; }
.learn-tabs { position: sticky; top: 0; z-index: 10; display: flex; overflow-x: auto; gap: .2rem; padding: 0 var(--rand); background: var(--diep); border-top: 1px solid rgba(255, 255, 255, .1); scrollbar-width: none; }
.learn-tabs a { flex-shrink: 0; padding: .8rem .9rem .7rem; border-bottom: 3px solid transparent; color: #cfe1ec; font-weight: 700; text-decoration: none; }
.learn-tabs a:hover { color: #fff; }
.learn-tabs a[aria-current="page"] { color: #fff; border-bottom-color: var(--blauw-fel); }
@media (min-width: 56rem) { .learn-tabs { justify-content: center; } }

.member-choice .check.is-card { border-width: 2px; }
.member-choice .check.is-card:has(input:checked) { border-color: var(--blauw); background: var(--blauw-licht); }
.choice-price { display: inline-block; margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px; background: var(--diep); color: #fff; font-size: .8rem; font-weight: 700; }
.course-pick { margin-top: .3rem; }

.request-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.btn-small-ghost { display: inline-flex; align-items: center; min-height: 40px; padding: .3rem .9rem; border: 2px solid var(--blauw); border-radius: 4px; color: var(--blauw-donker); font-weight: 700; font-size: .95rem; text-decoration: none; }
.btn-small-ghost:hover { background: var(--blauw-licht); }

/* Balk naamswijziging en logo */
.rename-bar { position: relative; z-index: 31; display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .45rem 2.8rem; background: var(--blauw); color: #fff; font-size: .9rem; font-weight: 700; text-align: center; }
.rename-bar button { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.wordmark-logo { display: block; height: 44px; width: auto; max-width: 180px; }
@media (min-width: 64rem) { .wordmark-logo { height: 54px; } }

/* Productfoto's: altijd vierkant, ongeacht het formaat van de foto */
.pcard-img { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.pcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pgallery { min-width: 0; }
.pgallery-main { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.pgallery-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pgallery-thumbs button { aspect-ratio: 1 / 1; }
.pdetail > * { min-width: 0; }
.pdesc { margin-top: 2rem; padding: 1.4rem 1.2rem; background: var(--wit); border-radius: 6px; }
.pdesc h2 { margin-top: 0; }
@media (min-width: 46rem) { .pdesc { padding: 1.8rem 2rem; } .pdesc p { column-width: 26rem; column-gap: 2.5rem; } }

.filter-bar.is-compact { margin-bottom: 0; }
@media (min-width: 52rem) { .filter-bar.is-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.b-topos .filter-count { margin: .8rem 0 1rem; }

/* Reviews op de startpagina */
.review-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78%, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; margin: 0 calc(-1 * var(--rand)); padding-left: var(--rand); padding-right: var(--rand); scrollbar-width: thin; }
@media (min-width: 44rem) { .review-row { grid-auto-columns: minmax(40%, 1fr); } }
@media (min-width: 64rem) { .review-row { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; } }
.review-card { scroll-snap-align: start; display: flex; flex-direction: column; margin: 0; padding: 1.3rem 1.3rem 1.1rem; background: var(--wit); border-radius: 4px; border-top: 4px solid var(--blauw); }
.review-stars { color: #f0a500; font-size: 1.15rem; letter-spacing: .1em; }
.review-stars .is-off { color: #d5dde1; }
.review-card blockquote { flex: 1; margin: .6rem 0 1rem; font-size: 1.02rem; line-height: 1.55; }
.review-card figcaption { display: flex; flex-wrap: wrap; gap: .2rem .7rem; font-size: .9rem; color: var(--schaduw); }
.review-card figcaption strong { color: var(--graniet); }

/* Balk en kop liggen samen over de grote foto; de balk duwt de kop omlaag */
.top-wrap { position: absolute; z-index: 20; top: 0; left: 0; right: 0; }
.top-wrap .site-head { position: relative; }
.rename-bar { position: relative; }

/* Logo */
.wordmark { display: flex; align-items: center; gap: .55rem; }
.wordmark-text { display: grid; }
.wordmark-emblem { display: block; height: 46px; width: auto; flex-shrink: 0; }
@media (min-width: 64rem) { .wordmark-emblem { height: 56px; } }
.foot-logo { display: block; width: 200px; max-width: 70%; height: auto; margin-bottom: 1.25rem; }

.stop-member { margin: -.2rem 0 .3rem; padding: .2rem 1rem .8rem; background: var(--wit); border-radius: 0 0 4px 4px; }
.stop-member summary { cursor: pointer; font-size: .9rem; color: var(--schaduw); text-decoration: underline; }
.stop-member[open] summary { margin-bottom: .6rem; }

.ev-member-price { display: block; margin-top: .15rem; font-family: var(--tekst); font-size: .85rem; font-weight: 600; color: var(--blauw-donker); }

.wordmark-horizontal { display: block; height: 46px; width: auto; }
@media (min-width: 64rem) { .wordmark-horizontal { height: 58px; } }
.learn-login-logo { display: block; width: 220px; max-width: 70%; height: auto; margin: 0 auto 1.5rem; }