/* =========================================================================
   CONCEPT A — "Modern Sports"
   Energetic, competitive. Angular shapes, heavy condensed-feeling type,
   full-bleed photography, red as the action colour.
   ========================================================================= */

/* De inhoud (main) is wit, de body zelf donker: zie "doortrekken voorbij de
   rand" onderaan dit bestand. */
body { background: var(--blue-900); }
main { background: var(--white); }

.wrap { width: min(1280px, 100% - 3rem); margin-inline: auto; }

/* --- buttons ------------------------------------------------------------- */
/* Rechte knoppen zonder afgesneden hoeken (feedback bestuur, sept. 2026: "less
   is more"). Daardoor volstaat een gewone border voor de omlijnde knoppen. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.btn--lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-600); transform: translateY(-2px); }
.btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); background: rgba(2,27,54,.35); }
.btn--ghost:hover { background: #fff; border-color: #fff; color: var(--blue); }
.btn--outline { color: var(--blue); border-color: var(--blue); }
.btn--outline:hover { background: var(--blue); color: #fff; }
.btn--outline.btn--dark { color: #fff; border-color: rgba(255,255,255,.6); }
.btn--outline.btn--dark:hover { background: #fff; border-color: #fff; color: var(--blue); }

.kicker {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 .9rem;
  color: var(--grey-700);
}
.kicker--red { color: var(--red-600); }

.link-arrow {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 3px solid var(--red);
  padding-bottom: 2px;
}
.link-arrow::after { content: ' ›'; }
.link-arrow:hover { color: var(--red); }

.sec-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.75rem;
}
.sec-head h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin: 0;
}

/* --- header -------------------------------------------------------------- */
.hdr { position: sticky; top: 0; z-index: 100; }

.hdr__main { background: var(--blue); color: #fff; box-shadow: 0 2px 0 var(--red); }
.hdr__main-in { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; width: min(1600px, 100% - 3rem); }

.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: #fff; flex: 0 0 auto; }
.brand img { width: 52px; height: 52px; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand__txt strong { font-size: 1.32rem; font-style: italic; text-transform: uppercase; letter-spacing: .02em; }
.brand__txt em { font-style: normal; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-500); }

.burger { display: none; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.nav__l1 { display: flex; list-style: none; margin: 0; padding: 0; }
.nav__l1 > li { position: relative; }
.nav__l1 > li > a {
  display: block;
  padding: 1.6rem .72rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  position: relative;
}
.nav__l1 > li > a::after {
  content: '';
  position: absolute;
  left: .72rem; right: .72rem; bottom: 1.05rem;
  height: 3px;
  background: var(--red-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}
.nav__l1 > li > a:hover::after,
.nav__l1 > li.is-open > a::after,
.nav__l1 > li > a.is-current::after { transform: scaleX(1); }

.sub-toggle { display: none; }

.nav__l2 {
  position: absolute;
  top: 100%; left: 0;
  min-width: 250px;
  list-style: none;
  margin: 0;
  padding: .5rem 0;
  background: var(--blue-900);
  border-top: 3px solid var(--red);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .16s, transform .16s, visibility .16s;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.nav__l1 > li.is-open .nav__l2 { opacity: 1; visibility: visible; transform: none; }
/* Keep the right-hand dropdowns inside the viewport. */
.nav__l1 > li:nth-last-child(-n+3) .nav__l2 { left: auto; right: 0; }
.nav__l2 a {
  display: block;
  padding: .6rem 1.25rem;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--grey);
  border-left: 3px solid transparent;
}
.nav__l2 a:hover { background: var(--blue-700); border-left-color: var(--red-600); color: #fff; }

.nav__cta { flex: 0 0 auto; }

/* --- hero ---------------------------------------------------------------- */
.hero { position: relative; color: #fff; isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
/* Toegevoegd na fase 6 — de wazige minifoto onder de hero (home/hero.blade.php)
   tot de echte foto binnen is; die vloeit er dan overheen. */
.hero__voorvertoning { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: 60% 40%; filter: blur(24px); }
/* Donkere ondergrond: de vervaagde randen van de minifoto lopen daarin over. */
.hero { background-color: #021B36; }
.hero__media img { transition: opacity .35s ease-out; }
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, rgba(2,27,54,.96) 0%, rgba(2,27,54,.88) 38%, rgba(2,27,54,.25) 72%, rgba(2,27,54,.45) 100%);
}
.hero__in { padding: clamp(4rem, 9vw, 8rem) 0 clamp(7rem, 11vw, 10rem); max-width: 50rem; }
.hero__title {
  font-size: clamp(1.7rem, 5.6vw, 4rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: .98;
  margin: 0 0 .9rem;
  text-shadow: 0 6px 30px rgba(0,0,0,.45);
}
/* De naam van de club is de grote kop, de slogan staat kleiner eronder
   (feedback bestuur, sept. 2026). */
.hero__slogan {
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin: 0 0 1.25rem;
  text-shadow: 0 4px 20px rgba(0,0,0,.45);
}
.hero__slogan span { color: var(--red-600); }
.hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); max-width: 34rem; color: #e9edf2; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.hero__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.hero__stats li {
  padding: 1.35rem 1rem;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.25);
}
.hero__stats li:last-child { border-right: 0; }
.hero__stats strong { display: block; font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 900; font-style: italic; line-height: 1; }
.hero__stats span { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }

/* --- intro --------------------------------------------------------------- */
.intro { padding: clamp(4rem, 7vw, 6.5rem) 0; }
.intro__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.intro__text h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.intro__text p { color: var(--grey-700); }
.intro__pills { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.intro__pills li {
  position: relative;
  background: var(--grey-100);
  border-left: 5px solid var(--red);
  padding: 1.4rem 1.6rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.intro__pills h3 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.intro__pills p { margin: 0; font-size: .95rem; color: var(--grey-700); }

/* --- events -------------------------------------------------------------- */
.events { padding: clamp(3.5rem, 6vw, 5.5rem) 0; background: var(--grey-200); }
.ev-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ev-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  transition: transform .2s, box-shadow .2s;
}
.ev-card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px rgba(2,27,54,.18); }
.ev-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.ev-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Datum linksboven en categorie rechtsboven, allebei tegen de rand van de
   foto en in dezelfde rechte vorm (feedback bestuur, sept. 2026). De datum is
   rood, de categorie heeft de kleur uit de agenda (.day-ev__cat). */
.ev-card__date, .ev-card__tag {
  position: absolute; top: 0;
  margin: 0;
  background: var(--red);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5rem .8rem;
}
.ev-card__date { left: 0; display: flex; align-items: baseline; gap: .35rem; }
.ev-card__date b { font-weight: 700; }
/* De kleur per categorie komt uit het beheer (EventCategory::css). */
.ev-card__tag { right: 0; background: var(--blue-600); }
.ev-card__body { padding: 1.25rem 1.4rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.ev-card__body h3 { font-size: 1.22rem; text-transform: uppercase; font-style: italic; letter-spacing: -.01em; }
.ev-card__meta { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .9rem; color: var(--grey-700); }
.ev-card__meta li { display: flex; gap: .5rem; }
.ev-card__meta li::before { content: '▸'; color: var(--red); }
.ev-card__link { margin-top: auto; font-weight: 700; text-transform: uppercase; font-size: .82rem; letter-spacing: .1em; text-decoration: none; color: var(--red); }
.ev-card__link:hover { text-decoration: underline; }
.ev-note { margin: 1.75rem 0 0; font-size: .88rem; color: var(--grey-700); }
.ev-empty { grid-column: 1 / -1; background: #fff; padding: 2rem; text-align: center; color: var(--grey-700); }

/* --- news ---------------------------------------------------------------- */
/* Licht, want "Lid worden?" (donker) staat er nu direct boven (feedback bestuur). */
.news { padding: clamp(3.5rem, 6vw, 5.5rem) 0; background: var(--white); }
/* Het hoofdbericht met de tekst naast de foto, de andere drie in een rij
   eronder: geen lege ruimte naast de kleine berichten (feedback bestuur). */
.news-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.news-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-content: start; }
.n-card { text-decoration: none; color: inherit; display: block; }
.n-card__media { overflow: hidden; }
.n-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.n-card:hover .n-card__media img { transform: scale(1.05); }
.n-card time { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--red-600); margin: 1rem 0 .4rem; }
.n-card h3 { font-size: 1.35rem; font-style: italic; text-transform: uppercase; }
.n-card p { color: var(--grey-700); font-size: .95rem; }
.n-card--lead { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: center; }
.n-card--lead .n-card__media { aspect-ratio: 16 / 9; }
.n-card--lead time { margin-top: 0; }
.n-card--lead h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.n-card--lead p { font-size: 1.02rem; margin: 0; }
.n-card--sm { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: center; background: var(--grey-100); }
.n-card:hover h3 { color: var(--red); }
.n-card--sm .n-card__media { aspect-ratio: 1; height: 100%; }
.n-card--sm time { margin: 0 0 .25rem; }
.n-card--sm h3 { font-size: 1.05rem; margin: 0; padding-right: 1rem; }

/* --- pickleball ---------------------------------------------------------- */
.pb { display: grid; grid-template-columns: 1.1fr .9fr; align-items: stretch; }
.pb__media img { width: 100%; height: 100%; object-fit: cover; }
.pb__body { background: var(--grey-100); padding: clamp(2.5rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: center; }
.pb__body h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-style: italic; text-transform: uppercase; letter-spacing: -.02em; }
.pb__body p { color: var(--grey-700); max-width: 32rem; }
.pb__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .5rem 0 2rem; padding: 0; }
.pb__facts li { font-size: .95rem; }
.pb__facts strong { display: block; font-size: 1.4rem; font-style: italic; color: var(--red); }
.pb .btn { align-self: flex-start; }

/* --- cta ----------------------------------------------------------------- */
.cta {
  background: var(--blue-900) url('../media/tt-07-1920.jpg') center/cover;
  background-blend-mode: luminosity;
  color: #fff;
  position: relative;
}
.cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,27,54,.95), rgba(2,27,54,.6)); }
.cta__in { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 2.5rem; align-items: center; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-style: italic; text-transform: uppercase; margin: 0; }
.cta__text { margin: 0; color: #d7dee6; max-width: 32rem; }

/* --- footer -------------------------------------------------------------- */
.ftr { background: var(--blue); color: var(--grey); }
.ftr__in { display: grid; grid-template-columns: minmax(230px, 1fr) 2.4fr; gap: 3rem; padding: clamp(3rem, 5vw, 4.5rem) 0; }
.ftr__brand img { margin-bottom: 1.25rem; }
.ftr__brand strong { color: #fff; }
.ftr__brand a { color: var(--grey); }
.ftr__nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.ftr__nav h3 { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red-600); }
.ftr__nav ul { list-style: none; margin: 0; padding: 0; }
.ftr__nav li { margin-bottom: .45rem; }
.ftr__nav a { text-decoration: none; font-size: .93rem; }
.ftr__nav a:hover { color: #fff; text-decoration: underline; }
.ftr__bar { background: var(--blue-900); font-size: .85rem; }
.ftr__bar-in { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; padding: 1rem 0; }
.ftr__bar p { margin: 0; }
.ftr__bar ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.ftr__bar a { text-decoration: none; }
.ftr__bar a:hover { text-decoration: underline; color: #fff; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1500px) {
  .nav__l1 > li > a { padding: 1.6rem .55rem; font-size: .78rem; }
  .nav { gap: .75rem; }
  .nav__cta { padding: .7rem 1rem; font-size: .8rem; }
  .brand img { width: 44px; height: 44px; }
  .brand__txt strong { font-size: 1.12rem; }
  .brand__txt em { display: none; }
}

@media (max-width: 1260px) {
  .intro__in { grid-template-columns: 1fr; }
  .ev-grid { grid-template-columns: repeat(2, 1fr); }
  .pb { grid-template-columns: 1fr; }
  .pb__media img { aspect-ratio: 16 / 9; }
  .cta__in { grid-template-columns: 1fr; gap: 1.5rem; }
  .ftr__in { grid-template-columns: 1fr; }
  .ftr__nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1260px) {
  .burger {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-left: auto;
    background: var(--red);
    color: #fff;
    border: 0;
    padding: .7rem 1rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .8rem;
    cursor: pointer;
  }
  .burger__box { display: grid; gap: 4px; width: 20px; }
  .burger__box i { display: block; height: 2px; background: #fff; transition: transform .2s, opacity .2s; }
  .burger[aria-expanded="true"] .burger__box i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__box i:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] .burger__box i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(400px, 88vw);
    background: var(--blue-900);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.25rem 0 3rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s ease;
    box-shadow: -20px 0 50px rgba(0,0,0,.4);
  }
  .nav.is-open { transform: none; }
  .nav__l1 { flex-direction: column; }
  .nav__l1 > li { border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav__l1 > li > a { padding: .95rem 1.5rem; font-size: .95rem; }
  .nav__l1 > li > a::after { display: none; }
  .sub-toggle {
    display: block;
    position: absolute;
    right: 0; top: 0;
    width: 56px; height: 52px;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .sub-toggle::before,
  .sub-toggle::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 13px; height: 2px;
    background: var(--red-600);
    transform: translate(-50%, -50%);
    transition: transform .2s;
  }
  .sub-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
  .sub-toggle[aria-expanded="true"]::after { transform: translate(-50%, -50%) rotate(0); }
  .nav__l2 {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: 0;
    background: rgba(255,255,255,.04);
    display: none;
    padding: .25rem 0 .5rem;
  }
  .nav__l1 > li.is-open .nav__l2 { display: block; }
  .nav__cta { margin: 1.5rem 1.5rem 0; justify-content: center; }
  .nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(1,15,31,.6);
    z-index: 99;
    opacity: 0;
    transition: opacity .25s;
  }
  .nav-backdrop.is-on { opacity: 1; }
  body.nav-lock { overflow: hidden; }
}

@media (max-width: 1000px) {
  .news-side { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .wrap { width: min(1280px, 100% - 2rem); }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .hero__stats li:nth-child(2) { border-right: 0; }
  .hero__stats li:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.25); }
  .ev-grid { grid-template-columns: 1fr; }
  .ftr__nav { grid-template-columns: 1fr; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .n-card--sm { grid-template-columns: 90px 1fr; }
  .n-card--lead { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .n-card--lead time { margin-top: 1rem; }
  .mockup-bar { font-size: .68rem; padding: .4rem .6rem; }
}

@media (max-width: 480px) {
  .hero__cta .btn { width: 100%; justify-content: center; }
  .pb__facts { gap: 1rem; }
}

/* =========================================================================
   Content pages
   ========================================================================= */
.pagehead {
  background: var(--blue);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 4px solid var(--red);
}
.pagehead h1 {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .95;
  margin: 0 0 1rem;
}
.pagehead .kicker { color: var(--red-600); }
.pagehead__lead { max-width: 40rem; color: #d3dce5; font-size: 1.1rem; margin: 0; }

.pagehead--sm { padding: 1.25rem 0 clamp(2rem, 4vw, 2.75rem); }
.pagehead--sm h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }

/* --- breadcrumbs --------------------------------------------------------- */
.crumbs { margin-bottom: 1.25rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.crumbs li + li::before { content: '›'; margin-right: .45rem; color: #7d94ad; }
.crumbs a { color: #c3cedb; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: #fff; font-weight: 600; }

/* --- page layout --------------------------------------------------------- */
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
  align-items: start;
}
.page > * { min-width: 0; }
.page--wide { grid-template-columns: minmax(0, 1fr); }

/* --- prose --------------------------------------------------------------- */
.prose { font-size: 1.05rem; }
.prose > *:first-child { margin-top: 0; }
.prose h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin: 2.5rem 0 .85rem;
}
.prose h3 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .02em; margin: 1.75rem 0 .5rem; }
.prose p { color: var(--grey-700); }
.prose .lead { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.prose a:not(.btn):not(.link-arrow) { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose a:not(.btn):not(.link-arrow):hover { color: var(--red); }
.prose ul, .prose ol { color: var(--grey-700); padding-left: 1.3rem; margin: 0 0 1.25rem; }
.prose li { margin-bottom: .4rem; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { padding-left: 1.5rem; position: relative; }
.prose ul li::before { content: '▸'; position: absolute; left: .2rem; color: var(--red); }
.prose ol { padding-left: 1.4rem; }
.prose figure { margin: 1.75rem 0; }
.prose figure img { width: 100%; }
.prose figcaption { font-size: .9rem; color: var(--grey-700); margin-top: .5rem; }
.prose blockquote {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--grey-100);
  border-left: 5px solid var(--red);
  font-size: 1.1rem;
  font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--grey); margin: 2.5rem 0; }

/* --- tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  background: #fff;
  min-width: 34rem;
}
.table caption { text-align: left; font-weight: 700; padding-bottom: .5rem; }
.table th, .table td { text-align: left; padding: .65rem .85rem; border: 1px solid var(--grey); vertical-align: top; }
.table thead th {
  background: var(--blue);
  color: #fff;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-color: var(--blue-700);
}
.table tbody tr:nth-child(even) { background: var(--grey-100); }
.table tbody th { font-weight: 700; white-space: nowrap; }
.table--narrow { min-width: 0; }
.table td strong { color: var(--ink); }

/* --- callouts ------------------------------------------------------------ */
.callout {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--grey-100);
  border-left: 5px solid var(--blue-600);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.callout h3 { margin-top: 0; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout--red { border-left-color: var(--red); background: #fdf1f1; }
.callout--blue { background: var(--blue); color: #fff; border-left-color: var(--blue); }
.callout--blue h3, .callout--blue strong { color: #fff; }
.callout--blue p, .callout--blue li { color: #d3dce5; }
.callout--blue a { color: #fff !important; }

/* --- definition rows ----------------------------------------------------- */
.facts { display: grid; gap: 0; margin: 0 0 1.5rem; }
.facts > div {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--grey);
}
.facts dt { font-weight: 700; }
.facts dd { margin: 0; color: var(--grey-700); }

/* --- cards --------------------------------------------------------------- */
.tiles { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1.25rem; }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile {
  background: var(--grey-100);
  border-left: 5px solid var(--red);
  padding: 1.35rem 1.5rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.prose .tile h3 { margin-top: 0; font-size: 1.1rem; }
.tile p:last-child { margin-bottom: 0; }
.tile__no { display: block; font-size: 1.1rem; font-weight: 900; font-style: italic; color: var(--red); }

/* people */
.people { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.person { background: #fff; border: 1px solid var(--grey); }
.person__ph {
  aspect-ratio: 4 / 3;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-content: center;
  font-size: 2rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.03em;
}
/* Kaartroosters, tegels, de nieuwslijst en het nieuwsbriefarchief staan in .prose, maar zijn geen opsomming: haal het rode
   ▸-bolletje en de inspringing van .prose ul li er weer af. */
.prose .people > li, .prose .team__players > li, .prose .sponsors > li, .prose .downloads > li,
.prose .newslist > li { padding-left: 0; margin-bottom: 0; }
/* Een tegel houdt zijn eigen binnenruimte (.tile), alleen het pijltje gaat weg. */
.prose .people > li::before, .prose .team__players > li::before, .prose .sponsors > li::before, .prose .downloads > li::before,
.prose .tiles > li::before, .prose .newslist > li::before { content: none; }

.person__body { padding: 1rem 1.2rem 1.25rem; }
.prose .person h3 { margin: 0 0 .1rem; font-size: 1.05rem; }
.person__role { margin: 0 0 .5rem; font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.person p { font-size: .95rem; margin: 0; }

/* teams — één kaart per team, met een initialenblokje per speler */
.teams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin: 0 0 1.75rem;
}
.team {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--grey);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.team__head { padding: .85rem 1.1rem .7rem; border-bottom: 1px solid var(--grey-200); }
.prose .team__name {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.team__name span { color: var(--blue-600); }
.team--nttb .team__name span { color: var(--red); }
.team__klasse {
  margin: .1rem 0 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey-700);
}
/* "3e klasse" — de e blijft klein en verandert de regelhoogte niet. */
.team__klasse sup { font-size: .72em; line-height: 0; vertical-align: super; margin-right: .06em; }

/* Twee klassen, zodat de padding het wint van `.prose ul { padding-left: 0 }`. */
.team .team__players { list-style: none; margin: 0; padding: .85rem 1.1rem; display: grid; gap: .55rem; }
.ply { display: flex; align-items: center; gap: .7rem; }
.ply__ph {
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-content: center;
  font-size: .78rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.03em;
  color: #fff;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}
/* De kleur volgt de competitie: rood voor NTTB, blauw voor TTL. */
.team--nttb .ply__ph { background: var(--red); }
.team--ttl .ply__ph { background: var(--blue); }

.ply__name { font-size: .95rem; line-height: 1.25; }

/* sponsors */
.sponsors { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sponsors li { position: relative; }
.sponsors a {
  display: grid;
  place-content: center;
  aspect-ratio: 3 / 2;
  background: var(--grey-100);
  border: 1px solid var(--grey);
  text-align: center;
  padding: 1rem;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--ink) !important;
  text-decoration: none !important;
}
.sponsors a:hover { background: var(--blue); color: #fff !important; }
.sponsors span { display: block; font-size: .7rem; font-style: normal; font-weight: 600; letter-spacing: .14em; color: var(--red); margin-top: .35rem; }
.sponsors a:hover span { color: #fff; }

/* timeline */
.timeline { list-style: none; margin: 0 0 1.5rem; padding: 0; border-left: 3px solid var(--grey); }
.timeline li { padding: 0 0 1.5rem 1.75rem; position: relative; }
.timeline li::before {
  content: '';
  position: absolute;
  left: -9px; top: .45rem;
  width: 15px; height: 15px;
  background: var(--red);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.timeline b { display: block; font-size: 1.25rem; font-weight: 900; font-style: italic; color: var(--ink); letter-spacing: -.02em; }
.timeline p { margin: .15rem 0 0; }

/* --- forms --------------------------------------------------------------- */
.form { background: var(--grey-100); padding: clamp(1.25rem, 3vw, 2rem); margin: 0 0 1.5rem; border-top: 5px solid var(--red); }
.form__row { display: grid; gap: 1rem; margin-bottom: 1rem; }
.form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form label { display: block; font-weight: 700; margin-bottom: .3rem; font-size: .95rem; }
.form .hint { display: block; font-weight: 400; font-size: .85rem; color: var(--grey-700); }
.form input, .form select, .form textarea {
  font: inherit;
  width: 100%;
  padding: .7rem .8rem;
  border: 2px solid var(--grey-500);
  background: #fff;
  color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(2,27,54,.15); }
.form textarea { min-height: 8rem; resize: vertical; }
.form .check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.form .check input { width: auto; margin-top: .3rem; }
.form__radios { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding-top: .5rem; }
.form__radios .check { margin: 0; }
.form__done { margin: 1rem 0 0; padding: .85rem 1rem; background: var(--blue); color: #fff; font-weight: 600; }

/* --- news list ----------------------------------------------------------- */
.newslist { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.5rem; }
.newslist li { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.5rem; background: #fff; border-bottom: 1px solid var(--grey); padding-bottom: 1.5rem; }
.newslist li > * { min-width: 0; }
.newslist img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.newslist time { font-size: .82rem; font-weight: 700; letter-spacing: .12em; color: var(--red); text-transform: uppercase; }
.prose .newslist h3 { margin: .35rem 0 .4rem; font-size: 1.3rem; font-style: italic; text-transform: uppercase; }
.newslist h3 a { text-decoration: none !important; color: var(--ink) !important; }
.newslist h3 a:hover { color: var(--red) !important; }
.newslist p { margin: 0 0 .6rem; font-size: .98rem; }

.pager { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.pager a, .pager span {
  display: grid;
  place-content: center;
  min-width: 2.8rem;
  height: 2.8rem;
  padding: 0 .75rem;
  font-weight: 700;
  text-decoration: none !important;
  border: 2px solid var(--blue);
  color: var(--blue) !important;
}
.pager a:hover { background: var(--blue); color: #fff !important; }
.pager .is-current { background: var(--red); border-color: var(--red); color: #fff !important; }
.pager .is-off { border-color: var(--grey); color: var(--grey-500) !important; }

/* downloads */
.downloads { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.downloads li { border-bottom: 1px solid var(--grey); }
.downloads a {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: .85rem .5rem;
  text-decoration: none !important;
  color: var(--ink) !important;
}
.downloads a:hover { background: var(--grey-100); }
.downloads .ext {
  background: var(--red);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
  padding: .3rem 0;
}
.downloads b { font-weight: 700; }
.downloads span { font-size: .88rem; color: var(--grey-700); }

/* --- sidebar ------------------------------------------------------------- */
.side { display: grid; gap: 1.5rem; }
.side__nav, .side__box { background: var(--grey-100); }
.side__title {
  margin: 0;
  background: var(--blue);
  color: #fff;
  font-size: .95rem;
  font-style: italic;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .75rem 1.1rem;
}
.side__nav ul { list-style: none; margin: 0; padding: 0; }
.side__nav li { border-bottom: 1px solid var(--grey); }
.side__nav li:last-child { border-bottom: 0; }
.side__nav a {
  display: block;
  padding: .7rem 1.1rem;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  color: var(--ink);
  border-left: 4px solid transparent;
}
.side__nav a:hover { background: #fff; border-left-color: var(--red); }
.side__nav a.is-current { background: #fff; border-left-color: var(--red); color: var(--red); }

.side__box { padding-bottom: 1.25rem; }
.side__box .side__title { margin-bottom: 1rem; }
.side__box p, .side__box ul { margin: 0 1.1rem 1rem; font-size: .96rem; color: var(--grey-700); }
.side__box ul { list-style: none; padding: 0; }
.side__box li { margin-bottom: .35rem; padding-left: 1.1rem; position: relative; }
.side__box li::before { content: '▸'; position: absolute; left: 0; color: var(--red); }
.side__box a { color: var(--ink); font-weight: 600; }
.side__box .btn { margin: 0 1.1rem; }
.side__box strong { color: var(--ink); }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .page { grid-template-columns: minmax(0, 1fr); }
  .side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .tiles--3, .people, .sponsors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .side { grid-template-columns: minmax(0, 1fr); }
  .tiles--2, .tiles--3, .people, .sponsors { grid-template-columns: minmax(0, 1fr); }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; padding: .6rem 0; }
  .form__row--2 { grid-template-columns: minmax(0, 1fr); }
  .newslist li { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  .downloads a { grid-template-columns: 3rem minmax(0, 1fr); }
}

.agenda-page { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); background: var(--grey-200); }

/* Full month wall calendar, borrowed from concept E's layout and restyled
   to match this concept: blue/uppercase header row, coloured event chips,
   a red "today" ring. Clicking a day selects it (.cal__cell--selected)
   and lists that day's activities in #day-detail below (see agenda.js) —
   today is selected by default. */
.ag-title { font-style: italic; text-transform: uppercase; letter-spacing: -.02em; }

/* Swap the site-wide red focus-visible outline for a calmer blue ring on
   the category filter — the default red square read as an error state on
   a plain filter control. */
.ag-filter:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(2,27,54,.25); border-color: var(--blue); }
.ag-btn {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
}

.ag-hint { margin: 0 0 1rem; font-size: .9rem; color: var(--grey-700); }
.cal-wrap { background: #fff; overflow-x: auto; }
.cal { width: 100%; min-width: 46rem; border-collapse: collapse; table-layout: fixed; }
.cal th {
  background: var(--blue);
  color: #fff;
  text-align: left;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .65rem .7rem;
  border: 1px solid var(--blue-700);
}
.cal__cell {
  vertical-align: top;
  border: 1px solid var(--grey);
  padding: 0;
  height: 8rem;
  background: #fff;
}
.cal__cell--out { background: var(--grey-100); padding: 0; }
.cal__cell--out .cal__num { color: var(--grey-500); }
.cal__cell--out .cal__daybtn:hover, .cal__cell--out .cal__daybtn:focus-visible { background: rgba(2,27,54,.08); }
.cal__cell--selected { background: rgba(2,27,54,.1); box-shadow: inset 0 0 0 3px var(--blue); }

/* "Today" is marked on the number itself (a small red chip) rather than a
   cell-wide ring, so it never has to compete visually with the selected-day
   ring/background — both can be true for the same cell at once. */
.cal__cell--today .cal__num {
  display: inline-block;
  color: #fff;
  background: var(--red);
  padding: .15em .4em;
  margin: -.15em -.4em .3em 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
/* Closed days (single days or ranges — see CLOSURES in assets/js/data.js). */
.cal__cell--closed { background: repeating-linear-gradient(45deg, var(--grey-100), var(--grey-100) 8px, var(--grey-200) 8px, var(--grey-200) 16px); }
.cal__cell--closed.cal__cell--today .cal__num { color: #fff; }
.cal__cell--closed.cal__cell--selected {
  background: repeating-linear-gradient(45deg, rgba(2,27,54,.08), rgba(2,27,54,.08) 8px, rgba(2,27,54,.14) 8px, rgba(2,27,54,.14) 16px);
  box-shadow: inset 0 0 0 3px var(--blue);
}
.cal__closed-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grey-700);
  padding: .18rem .55rem;
}

.cal__daybtn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  padding: .5rem .55rem .6rem;
  cursor: pointer;
}
.cal__daybtn:hover, .cal__daybtn:focus-visible { background: rgba(2,27,54,.06); outline: none; }

.cal__num { display: block; text-align: left; font-weight: 900; font-style: italic; font-size: 1.2rem; line-height: 1; letter-spacing: -.02em; margin-bottom: .35rem; }

.cal__items { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: .22rem; width: 100%; }
.cal__item {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.3;
  padding: .22rem .4rem;
  color: var(--ink);
  background: var(--grey-100);
  border-left: 3px solid var(--blue-600);
}
.cal__item b { font-weight: 700; }
.cal__item--pickleball { border-left-color: #1d6b4f; }
.cal__item--competitie { border-left-color: var(--red); }
.cal__item--jeugd      { border-left-color: #8a5a00; }
.cal__item--training   { border-left-color: var(--blue-600); }
.cal__item--recreatief { border-left-color: #5a5f66; }
.cal__item--toernooi   { border-left-color: var(--red-700); }
.cal__item--vereniging { border-left-color: #4a2a86; }
/* Categoriestippen: alleen zichtbaar op smalle schermen, waar de titels
   in de cel niet passen. Eén stip per activiteit, in de kleur van de legenda. */
.cal__dots { display: none; }
.cal__dot { width: .4rem; height: .4rem; background: var(--grey-700); }
.cal__dot--pickleball { background: #1d6b4f; }
.cal__dot--competitie { background: var(--red); }
.cal__dot--jeugd      { background: #8a5a00; }
.cal__dot--training   { background: var(--blue-600); }
.cal__dot--recreatief { background: #5a5f66; }
.cal__dot--toernooi   { background: var(--red-700); }
.cal__dot--vereniging { background: #4a2a86; }

@media (max-width: 900px) {
  .cal__cell { height: 6.5rem; }
  .cal__item { font-size: .7rem; }
}

@media (max-width: 640px) {
  .cal-wrap { overflow-x: visible; }
  .cal { min-width: 0; }
  .cal__cell { height: 3.4rem; }
  .cal__daybtn { padding: .35rem .2rem; }
  .cal__num { font-size: 1rem; margin: 0; }
  .cal__items { display: none; }
  .cal__dots { display: flex; justify-content: center; gap: 3px; margin: .3rem auto 0; }

  /* Het label "Gesloten" past niet in een cel van deze grootte; het diagonale
     streepjespatroon van .cal__cell--closed blijft de sluiting aangeven en de
     dagdetails eronder benoemen hem voluit. */
  .cal__closed-tag { display: none; }
}

/* --- day detail (below the calendar; shows the selected day's activities) */
.day-detail { margin-top: 2rem; padding-top: 1.75rem; border-top: 3px solid var(--blue); }
.day-detail__title { margin: 0 0 1.25rem; font-size: 1.4rem; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; }
.day-detail__empty { color: var(--grey-700); }
.day-detail__list { display: grid; gap: 1.25rem; }

.day-detail__closed {
  background: var(--grey-100);
  border-left: 5px solid var(--grey-700);
  padding: 1.1rem 1.4rem 1.3rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.day-detail__closed p { margin: 0 0 .4rem; color: var(--grey-700); }
.day-detail__closed p:last-child { margin-bottom: 0; }
.day-detail__closed .day-detail__closed-tag {
  display: inline-block;
  margin: 0 0 .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grey-700);
  padding: .3rem .75rem;
}

.day-ev {
  background: #fff;
  border-left: 5px solid var(--blue);
  padding: 1.1rem 1.4rem 1.3rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.day-ev__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 .4rem; }
.day-ev__time { font-weight: 700; color: var(--ink); }
.day-ev__cat {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue-600);
  padding: .22rem .6rem;
}
.day-ev__cat--pickleball { background: #1d6b4f; }
.day-ev__cat--competitie { background: var(--red); }
.day-ev__cat--jeugd      { background: #8a5a00; }
.day-ev__cat--training   { background: var(--blue-600); }
.day-ev__cat--recreatief { background: #5a5f66; }
.day-ev__cat--toernooi   { background: var(--red-700); }
.day-ev__cat--vereniging { background: #4a2a86; }
.day-ev h3 { margin: 0 0 .25rem; font-size: 1.2rem; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; }
.day-ev__where { margin: 0; font-size: .92rem; color: var(--grey-700); }
.day-ev__desc { margin: .6rem 0 0; color: var(--grey-700); }

/* --- formulierfouten (fase 5, niet uit de mockup) ------------------------- */
/* De mockup kende alleen formulieren met data-demo: die versturen niets en
   kunnen dus ook niets afkeuren. Nu de vier formulieren echt naar de server
   gaan, is er opmaak nodig voor het foutenoverzicht, een afgekeurd veld en de
   melding onder zo'n veld. Alleen bestaande variabelen uit tokens.css. */
.form__fouten { background: var(--grey-100); border-left: 5px solid var(--red); padding: clamp(1rem, 2.5vw, 1.25rem); margin: 0 0 1.5rem; }
.form__fouten h2 { margin: 0 0 .3rem; font-size: 1.15rem; font-style: italic; text-transform: uppercase; color: var(--red); }
.form__fouten p { margin: 0 0 .6rem; font-size: .95rem; color: var(--grey-700); }
.form__fouten ul { margin: 0; padding-left: 1.2rem; }
.form__fouten li { margin: 0 0 .3rem; }
/* Dezelfde specificiteit als .prose a:not(.btn):not(.link-arrow) hierboven, en
   verderop in het bestand — anders wint die regel en blijven deze links blauw. */
.form__fouten a:not(.btn):not(.link-arrow) { color: var(--red-700); }
.form [aria-invalid="true"] { border-color: var(--red); }
.form [aria-invalid="true"]:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(177,8,11,.18); }
.form__fout { display: block; margin-top: .35rem; font-size: .85rem; font-weight: 700; color: var(--red-700); }
/* Honeypot: uit beeld halen met display:none werkt niet — juist verborgen
   velden vullen bots graag in. Daarom buiten het scherm schuiven. */
.form__val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* .hdr staat op position: sticky en is 78 px hoog, dus een sprong naar een
   anker — de bevestiging na het versturen, een melding in het foutenoverzicht,
   het zijmenu — zet het doel precies achter die balk. 8rem houdt ook het label
   boven een invoerveld vrij; 6rem laat daar nog een strookje achter de kop
   vallen. Geldt voor de hele site, want het probleem is dat ook. */
html { scroll-padding-top: 8rem; }
/* De bevestigingsbalk is een <p> binnen .prose, en `.prose p` (0,1,1) wint van
   `.form__done` (0,1,0) verderop in dit bestand. Gevolg: grijze tekst op
   donkerblauw, contrast 2,3:1 waar de WCAG er 4,5 vraagt. In de mockup viel dat
   niemand op, want daar werd de balk nooit echt getoond — de formulieren daar
   hadden data-demo en verstuurden niets. Twee klassen halen het wel. */
.prose .form__done { color: #fff; }
/* Omschrijvingen van activiteiten komen uit een tekstvak in het beheer. De
   agenda-JS (ongewijzigd uit de mockup) zet ze veilig ge-escaped in een <p>,
   waarin een enter normaal wegvalt. pre-line houdt de enters, maar voegt
   spaties aan het begin van een regel nog steeds samen. */
.day-ev__desc { white-space: pre-line; }
/* Team-popups (public/js/agenda-teams.js): een teamnaam in de omschrijving van
   een competitieavond toont bij aanwijzen de opstelling. De naam is een knop,
   opgemaakt als tekst met een stippellijn; de popup volgt de teamkaarten op
   /teams: rood voor de NTTB, blauw voor de TTL. */
.team-tip {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  border-bottom: 1px dotted currentColor; cursor: help; text-align: inherit;
}
.team-tip:hover, .team-tip[aria-expanded="true"] { color: var(--ink); border-bottom-style: solid; }
.team-tip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.team-pop {
  position: absolute; z-index: 60; width: 17.5rem; max-width: calc(100vw - 16px);
  /* De kaart zelf heeft een clip-path (schuine hoek); een box-shadow zou die
     wegknippen, een drop-shadow op de omhulling volgt de vorm wel. */
  filter: drop-shadow(0 8px 18px rgba(2, 27, 54, .25));
}
.team-pop .team { margin: 0; }
/* Op /teams staat de kaart binnen .prose, en alleen daar krijgt .team__name
   zijn opmaak (.prose .team__name). De popup staat erbuiten: zelfde regels. */
.team-pop .team__name {
  margin: 0; font-size: 1.3rem; font-weight: 900; font-style: italic;
  letter-spacing: -.02em; text-transform: uppercase; line-height: 1.1; color: var(--ink);
}
/* Sponsors: één per regel over de volle breedte van de kolom (wens van het
   bestuur; de mockup had een raster van vier tegels in de verhouding 3:2, en
   dat wordt over de volle breedte veel te hoog). Links het logo, daarnaast de
   naam en de titel die het bestuur per sponsor invult. Een tegel met logo
   blijft wit en krijgt bij aanwijzen een blauwe rand in plaats van de blauwe
   vulling: een kleurenlogo op donkerblauw is onleesbaar. */
.sponsors { grid-template-columns: minmax(0, 1fr); }
.sponsors a {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem;
  /* De oorspronkelijke tegel centreert met place-content; in een rij zou dat
     een logo dat op een smal scherm naar een eigen regel valt, centreren. */
  place-content: normal; justify-content: flex-start;
  aspect-ratio: auto; min-height: 5.5rem; padding: 1.1rem 1.5rem; text-align: left;
}
.sponsors__logo { flex: 0 0 auto; display: block; width: 11rem; max-width: 40%; height: 4.5rem; object-fit: contain; object-position: left center; }
.sponsors__tekst { flex: 1 1 8rem; min-width: 0; }
.sponsors__naam { display: block; font-size: 1.15rem; line-height: 1.2; }
.sponsors__tekst span { margin-top: .3rem; }
.sponsors a.sponsors__tegel--logo { background: var(--white); }
.sponsors a.sponsors__tegel--logo:hover { background: var(--white); border-color: var(--blue); color: var(--ink) !important; }
.sponsors a.sponsors__tegel--logo:hover span { color: var(--red); }
/* Footer: kaart en social media in plaats van de vier menukolommen (wens van
   het bestuur). De kaart is een vaste afbeelding met de routeplanner achter
   een klik; de schuine hoek volgt de knoppen en kaarten elders op de site. */
.ftr__kaart { min-width: 0; }
.ftr__kaartlink {
  position: relative; display: block; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.ftr__kaartlink img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; transition: transform .35s; }
.ftr__kaartlink:hover img { transform: scale(1.02); }
.ftr__kaartlink:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ftr__route {
  position: absolute; right: 1.25rem; bottom: 1.25rem;
  padding: .6rem 1.1rem; background: var(--red); color: #fff;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .18s;
}
.ftr__kaartlink:hover .ftr__route { background: var(--red-600); }
.ftr__bron { margin: .55rem 0 0; font-size: .75rem; color: var(--grey-500); }
.ftr__bron a { color: inherit; }
.ftr__bron a:hover { color: #fff; }
.ftr__social { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.ftr__social a {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  background: rgba(255, 255, 255, .08); color: #fff;
  transition: background-color .18s;
}
.ftr__social a:hover { background: var(--red); }
.ftr__social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ftr__social svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
/* Op een telefoon wat hoger, zodat de omgeving van de speld te zien blijft. */
@media (max-width: 600px) {
  /* Dezelfde verhouding als kaart-mobiel-*.jpg (4:3). */
  .ftr__kaartlink img { aspect-ratio: 4 / 3; }
  .ftr__route { right: .75rem; bottom: .75rem; }
}

/* ==========================================================================
   Toegevoegd na fase 6 — het programma op een agendakaart van de homepage.
   Bij een competitieavond staat de omschrijving (de thuiswedstrijden) op de
   kaart, met de team-popups (agenda-teams.js), net als in de dagdetails van
   de agenda (.day-ev__desc).
   ========================================================================== */
.ev-card__desc { margin: -.25rem 0 1rem; font-size: .9rem; color: var(--grey-700); white-space: pre-line; }
/* agenda-dag.js zet de focus op de kop van de gekozen dag (voor schermlezers
   en het toetsenbord); die kop is zelf niet aan te klikken, dus geen rand. */
.day-detail__title[tabindex="-1"]:focus { outline: none; }

/* Toegevoegd na fase 6 — doortrekken voorbij de rand op een telefoon.
   Trek je in Safari (iOS) of Chrome (Android) de pagina verder dan onderaan,
   dan toont de browser de achtergrond van <html>; die was wit en gaf een witte
   balk onder de donkere footer. Nu de kleur van de onderste footerbalk.
   Bovenaan past het ook, bij de donkere kop. Nieuwere Safari (iOS 26) kijkt
   voor de strook rond de doorzichtige werkbalk onderin naar de achtergrond
   van <body>, niet van <html>; daarom is ook de body donker en draagt <main>
   het wit (sept. 2026). */
html { background: var(--blue-900); }

/* Toegevoegd na fase 6 — een pagina in een venster (public/js/venster.js):
   bijv. de privacyverklaring, geopend vanuit de akkoordtekst van een
   formulier, zodat je het formulier niet verlaat. Zelfde schuine hoek en
   kleuren als de rest van de site. */
.venster {
  width: min(48rem, calc(100vw - 2rem));
  max-height: min(85vh, 60rem);
  padding: 0; border: 0;
  background: #fff; color: var(--grey-800, #1d2733);
  box-shadow: 0 24px 60px rgba(2, 27, 54, .35);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  overflow: hidden;
}
.venster[open] { display: flex; flex-direction: column; }
.venster::backdrop { background: rgba(2, 27, 54, .6); }
.venster__kop { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--blue); color: #fff; }
.venster__titel { margin: 0; font-size: 1.15rem; text-transform: uppercase; font-style: italic; color: #fff; flex: 1; }
.venster__sluit { flex: none; width: 2.5rem; height: 2.5rem; border: 0; background: var(--red); color: #fff; font-size: 1.1rem; cursor: pointer; }
.venster__sluit:hover, .venster__sluit:focus-visible { background: var(--red-700, #8c0609); outline: 2px solid #fff; outline-offset: -4px; }
.venster__inhoud { padding: 1.25rem 1.5rem 2rem; overflow-y: auto; }
.venster__inhoud:focus { outline: none; }
html.venster-open { overflow: hidden; }

/* Toegevoegd na fase 6 — dagen in het verleden gedimd in de agenda
   (.cal__cell--past, gezet door agenda.js). Nog aan te klikken; de
   geselecteerde dag en de muis erop tonen hem weer voluit. */
.cal__cell--past .cal__daybtn { opacity: .45; transition: opacity .15s; }
.cal__cell--past .cal__daybtn:hover,
.cal__cell--past .cal__daybtn:focus-visible,
.cal__cell--past.cal__cell--selected .cal__daybtn { opacity: 1; }

/* Toegevoegd na fase 6 — eigen tekst op de homepage (App\Services\HomeIndeling):
   tekst, een formulier of een blok tussen de vaste onderdelen, als een eigen
   witte band. Zo breed als een gewone pagina, zodat regels leesbaar blijven. */
.home-tekst { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--white); }
.home-tekst .prose { max-width: 56rem; }
.home-tekst + .home-tekst { padding-top: 0; }
/* Een terug-link ("‹ Terug naar nieuws") heeft zijn pijl al vooraan; zonder
   deze regel zet .link-arrow er achteraan nog een › bij. */
.link-arrow--terug::after { content: none; }
/* Toegevoegd na fase 6 — verplichte velden op de formulieren: een rood
   sterretje achter het label (<x-verplicht>) en de uitleg erboven
   (formvelden/rijen). Ter goedkeuring. */
.form__verplicht { color: var(--red); font-weight: 700; margin-left: .2em; }
.form__legenda { margin: 0 0 1rem; font-size: .85rem; color: var(--grey-700); }
.form__legenda .form__verplicht { margin: 0 .15em 0 0; }

/* Toegevoegd na de TTapp-import — de pagina Teams ([[teams]],
   resources/blokken/teams.mustache): per team een breed blok met de
   opstelling (met gespeeld/gewonnen/verloren/%), de stand en alle
   wedstrijden, alles direct zichtbaar. Kop en spelersbolletjes zoals de
   teamkaart uit de mockup; de tabellen zijn de gewone .table. Met
   [[teams]] staan NTTB en TTL in twee tabbladen (public/js/tabbladen.js;
   zonder JavaScript gewoon onder elkaar). Ter goedkeuring door het bestuur. */
.teamblok {
  margin: 0 0 2rem;
  background: #fff;
  border: 1px solid var(--grey);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.teamblok > .table-wrap, .teamblok__raster, .teamblok__bron { padding: 0 1.1rem; }
.teamblok__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 1.75rem; padding-top: 1rem; }
.teamblok .table-wrap { margin: 0 0 1.25rem; }
.teamblok .table { font-size: .92rem; min-width: 0; }
.teamblok .table th, .teamblok .table td { padding: .45rem .65rem; vertical-align: middle; }
.teamblok .table caption { font-size: .95rem; }
.teamblok .table tbody th { font-weight: 400; }
.teamblok .table .getal { text-align: right; white-space: nowrap; }
.teamblok .table abbr { text-decoration: none; }
/* Teamnamen voluit op één regel; bij weinig ruimte schuift de tabel. */
/* Datum, tijd en uitslag op één regel; de wedstrijd mag op een smal scherm
   over twee regels, zodat de tabel niet breder wordt dan het scherm. */
.teamblok__stand tbody th, .teamblok__wedstrijden td.kort, .teamblok__wedstrijden .ploeg { white-space: nowrap; }
/* Zwaarder dan de zebrastrepen (.table tbody tr:nth-child(even)), ook op een even rij. */
.teamblok .table tbody tr.is-eigen { background: #fdf0d9; }
.teamblok__spelers .ply__ph { width: 1.85rem; height: 1.85rem; font-size: .7rem; }
.teamblok__wedstrijden tr:not(.is-gespeeld) td { color: var(--ink); }
.teamblok__bron { margin: -.5rem 0 1rem; color: var(--grey-700); }
.teamblok__opmerking { margin: .35rem 0 0; color: var(--grey-700); }
.teamblok .teamblok__fase th { background: var(--grey-100); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.teamblok__standen .table-wrap + .table-wrap { margin-top: -.25rem; }
.teamblok__wedstrijden .tijd { color: var(--grey-700); }
.teamblok__wedstrijden .afgekort { display: none; text-decoration: none; }
.teamblok__invaller { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-700); }

.tabbladen__lijst { display: flex; gap: .25rem; margin: 0 0 1.5rem; border-bottom: 3px solid var(--blue); }
.tabbladen__lijst[hidden] { display: none; }
.tabbladen__tab {
  font: inherit;
  font-size: .85rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .7rem 1.4rem;
  border: 0;
  background: var(--grey-100);
  color: var(--ink);
  cursor: pointer;
}
.tabbladen__tab[aria-selected="true"] { background: var(--blue); color: #fff; }
.tabbladen__tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* Met tabbladen staat de bond al op de knop; de kop blijft voor schermlezers. */
.tabbladen.is-actief .tabbladen__kop {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Smal scherm: compacter, zodat de opstelling en de stand zonder schuiven
   passen (de wedstrijden mogen schuiven). */
@media (max-width: 480px) {
  .teamblok > .table-wrap, .teamblok__raster, .teamblok__bron { padding-left: .6rem; padding-right: .6rem; }
  .teamblok .table { font-size: .85rem; }
  .teamblok .table th, .teamblok .table td { padding: .4rem .4rem; }
  .teamblok .table thead th { letter-spacing: .06em; }
  .teamblok__spelers .ply__ph { display: none; }
  /* De tijd onder de datum; "Uitsl." in plaats van "Uitslag". */
  .teamblok__wedstrijden .tijd { display: block; }
  .teamblok__wedstrijden .lang { display: none; }
  .teamblok__wedstrijden .afgekort { display: inline; }
}

/* Toegevoegd na fase 6 — de foto van een bestuurslid in het blok Bestuur
   (Beheer → Bestuur → Foto). De mockup kende alleen initialen; de foto vult
   hetzelfde vlak (4:3), bijgesneden rond het focuspunt uit Beheer → Media. */
.person__ph--foto { display: block; padding: 0; overflow: hidden; }
.person__ph--foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* Toegevoegd oktober 2026 — de maandkalender van de agenda op een iPad staand
   (641–820 px): niet meer horizontaal schuiven. De mockup gaf de tabel een
   minimumbreedte van 46rem (736 px); hier past hij in het scherm en breken
   lange titels in de cel af. Onder 640 px blijft de stippenweergave. */
@media (min-width: 641px) and (max-width: 820px) {
  .cal { min-width: 0; }
  .cal th { padding: .55rem .4rem; letter-spacing: .08em; }
  .cal__daybtn { padding: .4rem .35rem .5rem; }
  .cal__item { overflow-wrap: anywhere; padding: .2rem .3rem; }
}

/* Toegevoegd oktober 2026 — posters op de homepage (Inhoud → Posters,
   [[home:posters]]): staande posters naast elkaar, elk klikbaar naar een
   pagina met meer informatie en een inschrijfformulier. Niet uit de mockup,
   ter goedkeuring. De poster houdt zijn eigen verhouding: er wordt niets van
   de tekst op de poster afgesneden. */
.posters { padding: clamp(3.5rem, 6vw, 5.5rem) 0; background: var(--grey-200); }
.posters__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 2rem 1.75rem; align-items: start; }
.poster__link { display: block; color: inherit; text-decoration: none; }
.poster__beeld { display: block; width: 100%; height: auto; background: var(--white); box-shadow: 0 10px 24px rgba(2, 27, 54, .14); transition: transform .2s, box-shadow .2s; }
.poster__link:hover .poster__beeld, .poster__link:focus-visible .poster__beeld { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(2, 27, 54, .22); }
.poster__link:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.poster__datum { display: block; margin: 1rem 0 .15rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.poster__datum + .poster__titel { margin-top: 0; }
.poster__titel { display: block; margin: 1rem 0 .4rem; font-size: 1.15rem; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.2; }
.poster__link:hover .link-arrow { color: var(--red); }
@media (max-width: 640px) {
  .posters__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .poster__titel { font-size: 1rem; }
}
/* De vergrote poster na een klik (public/js/posters.js): zo groot als het
   scherm toelaat, de hele poster zichtbaar, met de knop naar de pagina eronder.
   Nooit groter dan de afbeelding zelf: width/height auto (dus de echte maat van
   het bestand, de varianten worden nooit opgeblazen) met alleen een max-maat.
   Geen vaste breedte of hoogte zetten, ook niet via de attributen. */
.poster__beeld { cursor: zoom-in; }
.lichtbak { padding: 0; border: 0; background: transparent; max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); overflow: visible; }
.lichtbak[open] { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.lichtbak::backdrop { background: rgba(2, 27, 54, .9); }
.lichtbak__figuur { position: relative; }
.lichtbak__beeld { display: block; width: auto; height: auto; max-width: calc(100vw - 1rem); max-height: calc(100vh - 5.5rem); max-height: calc(100dvh - 5.5rem); background: var(--white); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.lichtbak__sluit { position: absolute; top: .5rem; right: .5rem; }
.lichtbak__knop[hidden] { display: none; }
/* Dezelfde poster in de zijbalk van de pagina van het evenement, onder "Vragen?". */
.side__poster { display: block; max-width: 24rem; }
.side__poster .poster__beeld:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(2, 27, 54, .22); }
.side__poster:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .poster__beeld { transition: none; }
  .poster__link:hover .poster__beeld, .poster__link:focus-visible .poster__beeld { transform: none; }
}

/* Toegevoegd oktober 2026 — de homepage-banden wisselen van achtergrond als
   twee lichte banden met dezelfde kleur onder elkaar komen te staan (een
   blok verplaatst in de pagina Home; HomeIndeling::banden()). Alleen de
   kleuren van de mockup; in de standaardvolgorde verandert er niets. */
.band--wit { background: var(--white); }
.band--grijs { background: var(--grey-200); }
/* Wisselt de band van kleur, dan wisselen de tegels erin mee: anders staan
   witte tegels op wit (de agenda) of grijze op grijs (welkomstblok, nieuws).
   Dezelfde twee kleuren als in de mockup, alleen omgedraaid. */
.events.band--wit .ev-card, .events.band--wit .ev-empty { background: var(--grey-200); }
.intro.band--grijs .intro__pills li { background: var(--white); }
.news.band--grijs .n-card--sm { background: var(--white); }

/* Toegevoegd oktober 2026 — onder de foto op de homepage alleen een rode
   lijn in plaats van de balk met kerngetallen (voorstel variant A, gekozen
   door het bestuur), zoals de rode streep onder de kop van de site. Zonder
   balk eronder mag de ruimte onder de knoppen wat kleiner. */
.hero--lijn { border-bottom: 6px solid var(--red); }
.hero--lijn .hero__in { padding-bottom: clamp(4rem, 8vw, 7rem); }

/* Toegevoegd oktober 2026 — lichter en rustiger (opmerkingen van het
   bestuur: "nogal donker", "veel verschillende tekstelementen", "kleinere
   koppen"). Gekozen uit het voorstel: de laag over de foto op de homepage
   lichter, de koppen ongeveer een derde kleiner, en geen nummers (01, 02 …)
   meer in tegels. De kleine kopjes boven de koppen zijn uit de sjablonen
   gehaald. De rest van de opmaak blijft zoals hij was. */
.hero::before { background: linear-gradient(105deg, rgba(2,27,54,.80) 0%, rgba(2,27,54,.55) 42%, rgba(2,27,54,0) 75%); }
.hero__title { font-size: clamp(1.6rem, 4vw, 2.8rem); }
.hero__slogan { font-size: clamp(1.1rem, 1.8vw, 1.45rem); }
.sec-head h2, .pb__body h2, .intro__text h2 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); }
.cta h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.pagehead h1, .pagehead--sm h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.prose h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.prose h3, .intro__pills h3, .prose .tile h3 { font-size: 1.08rem; }
/* Ook als een nummer nog in een paginatekst staat (of later wordt geplakt). */
.tile__no { display: none; }