/* =========================================================
   Judoclub Gent-Drongen — stylesheet
   tokens → basis → bouwstenen → secties → artikel → responsive
   ========================================================= */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root {
  --bg: #faf5ec;
  --surface: #fff;
  --surface-sunken: #faf5ec;
  --surface-warm: #f0e6d4;
  --border: #eee4d3;
  --border-strong: #eadfcb;
  --ink: #3d362c;
  --ink-muted: #6b6151;
  --ink-subtle: #9a8f7c;
  --primary: #c85a3e;
  --primary-dark: #b34e34;
  --primary-tint: #f3e3df;
  --gold: #b0804a;
  --gold-tint: #f6ecdc;
  --green: #7a8c5f;
  --green-tint: #eaeddf;
  --brown: #8c6f5f;
  --amber: #d9a03f;

  --gutter: 48px;
  --max: 1280px;

  --shadow-card: 0 2px 10px rgba(61, 54, 44, .06);
  --shadow-card-hover: 0 6px 18px rgba(61, 54, 44, .10);
  --shadow-float: 0 8px 24px rgba(61, 54, 44, .14);

  --font: 'Archivo', system-ui, -apple-system, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--font);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .expanded {
  font-family: var(--font);
  font-stretch: 100%;
  letter-spacing: -.02em;
  margin: 0;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.visueel-verborgen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- bouwstenen ---------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 700 16px var(--font);
  font-stretch: 100%;
  cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.knop--primair {
  background: var(--primary);
  color: #fff;
  padding: 12px 28px;
}
.knop--primair:hover { background: var(--primary-dark); }
.knop--secundair {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}
.knop--secundair:hover { border-color: var(--primary); color: var(--primary); }
/* Compacte pil voor een CTA naast een titel, zoals "Alle berichten" boven
   het nieuwsraster. Zelfde vorm als de grote knoppen, maar hij mag de
   sectietitel niet overstemmen. */
.knop--klein {
  min-height: 38px;
  padding: 8px 20px;
  font-size: 15px;
}

.tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font: 700 12px var(--font);
  font-stretch: 100%;
  background: var(--primary-tint);
  color: var(--primary);
  white-space: nowrap;
}
.tag--goud     { background: var(--gold-tint);  color: var(--gold); }
.tag--groen    { background: var(--green-tint); color: var(--green); }

.eyebrow {
  font: 700 12px var(--font);
  font-stretch: 100%;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
}

.meer {
  font: 600 14px var(--font);
  font-stretch: 100%;
  color: var(--primary);
}
.meer:hover { color: var(--primary-dark); }

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px var(--font);
  font-stretch: 100%;
  color: #fff;
  border: 2px solid var(--bg);
  background: var(--primary);
}
.avatar--goud   { background: var(--amber); }
.avatar--groen  { background: var(--green); }
.avatar--bruin  { background: var(--brown); }

/* ---------- header ---------- */
.kop {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.kop__binnen {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.merk {
  display: flex;
  align-items: center;
  gap: 14px;
}
.merk__teken {
  width: auto;
  height: 52px;
  flex: none;
  display: block;
}
.merk__naam {
  font: 800 15.5px/1.15 var(--font);
  font-stretch: 100%;
  color: var(--ink);
  white-space: nowrap;
}
/* Op desktop staat de naam op één regel. Zodra de hamburger en het
   account-icoon erbij komen is die ruimte er niet: bij 412px liep
   "Gent-Drongen" tegen het icoon aan. Onder dat breekpunt dus altijd twee
   regels — met twee spans in plaats van een harde <br>, zodat het per
   schermbreedte te sturen blijft. */
@media (max-width: 1080px) {
  .merk__naam { white-space: normal; }
  .merk__naam > span { display: block; }
}
.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font: 600 14.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}
/* Home hoort enkel in het uitklapmenu thuis: op desktop klik je het logo. */
.nav__home { display: none; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); }
.nav .knop { font-size: 15px; padding: 12px 24px; min-height: 0; }

.nav-knop {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.nav-knop svg { width: 24px; height: 24px; }
/* De knop is streepjes als het menu dicht is en een kruis als het open staat,
   zodat er een duidelijke sluitknop zichtbaar is in het schermvullende menu. */
.nav-knop__kruis,
.nav--open .nav-knop__streepjes { display: none; }
.nav--open .nav-knop__kruis { display: block; }
.nav-knop__dicht { display: none; }
.nav--open .nav-knop__dicht { display: inline; }
.nav--open .nav-knop__open { display: none; }

/* Snelkoppelingen naast de hamburger: inschrijven en je account blijven
   altijd binnen duimbereik, ook als het menu dicht is. Op desktop staan die
   al in het menu zelf, dus daar zijn ze verborgen. */
.nav__snel {
  display: none;
  align-items: center;
  gap: 6px;
}
.nav__icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: var(--ink-muted);
  border: 1px solid transparent;
  transition: color .15s ease-out, background-color .15s ease-out, border-color .15s ease-out;
}
.nav__icoon svg { width: 21px; height: 21px; }
.nav__icoon:hover { color: var(--ink); background: var(--surface-warm); }
.nav__icoon--cta {
  color: var(--primary);
  background: var(--primary-tint);
}
.nav__icoon--cta:hover { color: #fff; background: var(--primary); }
.nav__icoon--ik { padding: 0; overflow: hidden; }
.nav__icoon--ik img,
.nav__icoon--ik .initialen {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
/* De initialen kregen hun bolletje alleen via .nav__lid, en dat is de link in
   het desktopmenu — hier stond dus een kale letter met enkel een hover-vlak
   eromheen. Nu meteen een gevulde cirkel, met een donkerder hover. */
.nav__icoon--ik .initialen {
  background: var(--primary);
  color: #fff;
  font: 700 12.5px var(--font);
  font-stretch: 100%;
  letter-spacing: .02em;
  transition: background-color .15s ease-out;
}
.nav__icoon--ik:hover { background: none; }
.nav__icoon--ik:hover .initialen { background: var(--primary-dark); }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 44px;
  align-items: center;
  padding-block: 56px;
}
.hero__tekst {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
.hero__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 13px var(--font);
  font-stretch: 100%;
  color: var(--gold);
  background: var(--gold-tint);
  border-radius: 999px;
  padding: 8px 16px;
}
.hero h1 {
  font-size: 54px;
  font-weight: 800;
  line-height: 1.06;
  color: var(--ink);
}
.hero h1 .punt { color: var(--primary); }
.hero__intro {
  font: 400 18px/1.6 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
  max-width: 46ch;
}
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 16px; }
.hero__proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  font: 600 13.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.hero__avatars { display: flex; }
.hero__avatars .avatar + .avatar { margin-left: -10px; }

.hero__beeld { position: relative; }
.hero__beeld img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 24px;
}

/* ---------- diareeks in de hero ---------- */
.diareeks {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 440px;
  background: var(--surface-warm);
}
.diareeks__dia {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateX(6%) scale(1.02);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.diareeks__dia.is-actief {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.diareeks__dia.gaat-weg {
  opacity: 0;
  transform: translateX(-6%) scale(1.02);
}
.diareeks__dia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.diareeks__bolletjes {
  position: absolute;
  right: 18px;
  top: 18px;
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(61, 54, 44, .32);
  backdrop-filter: blur(6px);
}
.diareeks__bol {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(250, 245, 236, .55);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.diareeks__bol.is-actief {
  background: #faf5ec;
  transform: scale(1.25);
}
.diareeks__bol:hover { background: #faf5ec; }

@media (prefers-reduced-motion: reduce) {
  .diareeks__dia { transition: opacity .3s linear; transform: none; }
  .diareeks__dia.gaat-weg { transform: none; }
}
.hero__kaart {
  position: absolute;
  left: 22px;
  bottom: 22px;
  max-width: 340px;
  background: var(--surface);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__kaart b {
  font: 700 16.5px/1.3 var(--font);
  font-stretch: 100%;
  color: var(--ink);
}
.hero__kaart span {
  font: 400 13px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}
.hero__kaart:hover b { color: var(--primary); }
.hero__kaart__lees {
  color: var(--primary);
  font-weight: 700;
}

/* ---------- sectiekop ---------- */
.sectiekop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.sectiekop h2 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ---------- nieuwsraster ---------- */
.nieuws { padding-block: 24px 8px; }

.raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.kaart {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow .15s ease-out, transform .15s ease-out;
}
.kaart:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.kaart:hover .kaart__titel { color: var(--primary); }
.kaart__beeld {
  width: 100%;
  height: 190px;
  object-fit: cover;
  background: var(--surface-warm);
}
.kaart__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.kaart__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font: 600 12px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}
.kaart__titel {
  font: 700 18px/1.35 var(--font);
  font-stretch: 100%;
  color: var(--ink);
  transition: color .15s ease-out;
}
.kaart__voet {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: auto;
  font: 600 12.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}
.kaart__lees { margin-left: auto; color: var(--primary); }

/* ---------- binnenkort + weten ---------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 26px;
  padding-block: 26px 48px;
}

.paneel {
  border-radius: 20px;
  padding: 26px 28px;
}
.paneel--warm { background: var(--surface-warm); }
.paneel--wit  { background: var(--surface); box-shadow: var(--shadow-card); }
.paneel__titel {
  font: 800 19px var(--font);
  font-stretch: 100%;
  color: var(--ink);
  letter-spacing: -.01em;
}

.agenda {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.agenda__item {
  display: flex;
  gap: 14px;
  align-items: center;
}
.datumchip {
  background: var(--surface);
  color: var(--ink);
  border-radius: 12px;
  padding: 8px 10px;
  min-width: 46px;
  text-align: center;
  font: 800 15px/1 var(--font);
  font-stretch: 100%;
  flex: none;
}
.datumchip--nu { background: var(--primary); color: #fff; }
.datumchip span {
  display: block;
  margin-top: 3px;
  font: 600 10px var(--font);
  font-stretch: 100%;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.agenda__titel {
  font: 600 14.5px/1.35 var(--font);
  font-stretch: 100%;
  color: var(--ink);
}

.tegels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.tegel {
  background: var(--surface-sunken);
  border-radius: 14px;
  padding: 16px 18px;
  font: 600 14.5px var(--font);
  font-stretch: 100%;
  color: var(--ink);
  transition: background-color .15s ease-out, color .15s ease-out;
}
.tegel:hover { background: var(--gold-tint); color: var(--primary); }

/* ---------- footer ---------- */
.voet {
  background: var(--surface-warm);
  padding-block: 32px;
  font: 400 13.5px/1.6 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.voet__binnen {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.voet strong { color: var(--ink); }
.voet a:hover { color: var(--primary); }
.voet__rechts { text-align: right; }

/* Regeltje onderaan: bescheiden, gescheiden van de clubgegevens erboven. */
.voet__onder {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.voet__onder p {
  margin: 0;
  font: 400 13px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}
.voet__onder a {
  color: var(--ink-muted);
  font-weight: 600;
  text-decoration: none;
}
.voet__onder a:hover { color: var(--primary); }

/* Nieuwsbrief bij de socials: ook een kanaal, maar eentje waarvoor je iets
   moet doen, dus een knopje. `.voet a` krijgt op mobiel een eigen display en
   padding (0,1,1) — vandaar de extra `a` in de selector. */
.voet a.voet__nieuwsbrief {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block: 10px 6px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  color: var(--ink);
}
.voet a.voet__nieuwsbrief:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- nieuwsbrief onder een bericht ---------- */
.nieuwsbriefcta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px 16px;
  margin: 24px 0 12px;
  padding: 18px 20px;
  background: var(--surface-warm);
  border-radius: 16px;
}
.nieuwsbriefcta__icoon { font-size: 26px; line-height: 1; }
.nieuwsbriefcta p {
  margin: 0;
  font: 400 15px/1.5 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.nieuwsbriefcta b { color: var(--ink); font-weight: 700; }
/* Smal: knop onder de tekst, op de lijn van de tekst. Staat bewust ná de
   basisregel hierboven. */
@media (max-width: 620px) {
  .nieuwsbriefcta { grid-template-columns: auto 1fr; }
  .nieuwsbriefcta .knop { grid-column: 2; justify-self: start; }
}

/* ---------- artikel ---------- */
.artikel {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 40px 56px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.artikel__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font: 600 13px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}
.artikel h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.015em;
}
.artikel__cover {
  /* nooit bijsnijden: volle kolombreedte, eigen verhouding */
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  background: var(--surface-warm);
}
.artikel__tekst { display: flex; flex-direction: column; gap: 22px; }
.artikel__tekst p,
.artikel__tekst ul,
.artikel__tekst ol {
  font: 400 17px/1.65 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
  margin: 0;
}
.artikel__tekst ul, .artikel__tekst ol { padding-left: 1.2em; }
.artikel__tekst li + li { margin-top: 6px; }
.artikel__tekst a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.artikel__tekst h2 { font-size: 26px; font-weight: 800; }
.artikel__tekst h3 { font-size: 20px; font-weight: 700; font-stretch: 100%; }
.artikel__tekst figure { margin: 0; }
.artikel__tekst figure img { border-radius: 20px; }
.artikel__tekst figcaption {
  margin-top: 8px;
  font: 400 13px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}
.artikel__tekst blockquote {
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid var(--primary);
  font: 400 18px/1.6 var(--font);
  font-stretch: 100%;
  color: var(--ink);
}

.reactiebalk {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font: 600 14px var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.reactiepil {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  padding: 8px 16px;
  border-radius: 999px;
  font: 600 14px var(--font);
  font-stretch: 100%;
  cursor: pointer;
  min-height: 40px;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.reactiepil:hover { border-color: var(--border-strong); }
.reactiepil[aria-pressed="true"] {
  background: var(--primary-tint);
  border-color: #ecd6d4;
  color: var(--primary);
}
/* Hartje: gedempt tot je het geeft, dan terracotta. Het glyph staat apart van
   de teller zodat alleen het hartje meekleurt. */
.reactiepil--hart { display: inline-flex; align-items: center; gap: 7px; }
.hart {
  font-size: 15px;
  line-height: 1;
  color: var(--ink-subtle);
  transition: color .15s ease-out, transform .12s ease-out;
}
.reactiepil--hart:hover .hart { color: var(--primary); }
.reactiepil--hart[aria-pressed="true"] .hart { color: var(--primary); }
.reactiepil--hart:active .hart { transform: scale(1.3); }
.kaart__voet .hart { font-size: 13px; }

.delen { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.delen a:hover { color: var(--primary); }

/* ---------- reacties ---------- */
.reacties {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
}
.reacties__titel {
  font: 800 22px var(--font);
  font-stretch: 100%;
  letter-spacing: -.01em;
}
.reacties__titel span {
  color: var(--ink-subtle);
  font: 600 16px var(--font);
  font-stretch: 100%;
}
.reactie { display: flex; gap: 14px; }
.reactie--antwoord { padding-left: 56px; }
.reactie__avatar {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px var(--font);
  font-stretch: 100%;
  color: #fff;
  background: var(--primary);
}
.reactie__avatar--goud  { background: var(--amber); }
.reactie__avatar--groen { background: var(--green); }
.reactie__avatar--bruin { background: var(--brown); }
.reactie__body { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.reactie__naam {
  font: 700 14.5px var(--font);
  font-stretch: 100%;
}
.reactie__naam .rol {
  background: var(--primary-tint);
  color: var(--primary);
  font: 700 11px var(--font);
  font-stretch: 100%;
  padding: 2px 8px;
  border-radius: 999px;
}
.reactie__naam .tijd {
  font: 400 12.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}
.reactie__tekst {
  font: 400 15px/1.55 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.reactie__acties {
  display: flex;
  gap: 16px;
  font: 600 12.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}
.reactie__acties button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.reactie__acties button:hover { color: var(--primary); }

.reactieformulier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}
.reactieformulier__titel {
  font: 700 16px var(--font);
  font-stretch: 100%;
}
.velden-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.reactieformulier input,
.reactieformulier textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 13px 15px;
  font: 400 14.5px var(--font);
  font-stretch: 100%;
  color: var(--ink);
  background: var(--bg);
}
.reactieformulier textarea { min-height: 74px; resize: vertical; }
.reactieformulier input::placeholder,
.reactieformulier textarea::placeholder { color: #a9a294; }
.reactieformulier input:focus,
.reactieformulier textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.reactieformulier__voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.reactieformulier__nota {
  font: 400 12.5px var(--font);
  font-stretch: 100%;
  color: #a9a294;
}
.reactieformulier .knop { font-size: 14.5px; padding: 12px 26px; }

/* ---------- infopagina / archief ---------- */
.paginakop { padding-block: 48px 26px; }
.paginakop h1 { font-size: 44px; font-weight: 800; line-height: 1.08; }
.paginakop p {
  margin-top: 16px;
  font: 400 18px/1.6 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
  max-width: 60ch;
}
.pagina-inhoud {
  max-width: 680px;
  padding-bottom: 56px;
}
.paginakop + .pagina-hoofd { padding-top: 10px; }
.archief { padding-bottom: 48px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero { gap: 32px; }
  .hero h1 { font-size: 46px; }
  .tegels { grid-template-columns: repeat(2, 1fr); }

  /* Het volledige menu heeft ruim 700px nodig naast het logo. Onder deze
     breedte wordt het te krap, dus dan naar de hamburger. De twee
     snelkoppelingen blijven wel buiten het menu staan. */
  .nav__links { display: none; }
  .nav__home { display: flex; }
  .nav-knop { display: flex; }
  .nav__snel { display: flex; }
  /* De kop plakt bovenaan zodra je scrolt. Zonder dit stond hij op
     position: relative en scrolde hij gewoon weg: het menu opende dan wel
     schermvullend, maar logo en sluitkruis hingen boven het scherm. En je
     moest helemaal terug naar boven om aan de nav te raken. */
  .kop {
    position: sticky;
    top: 0;
  }
  /* Zolang het menu open staat, staat de pagina op overflow: hidden — en dat
     breekt sticky: de kop valt terug naar zijn plaats in de tekst, dus buiten
     beeld als je gescrold had. Vandaar fixed zolang het menu open is. */
  html.menu-open .kop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  /* Met het menu open blijft enkel het embleem staan: de woordmerktekst
     ernaast maakt de balk onnodig druk als er al een sluitkruis bij komt.
     Via html.menu-open, want .merk staat vóór .nav in de opmaak — een
     siblingselector zou niet terugwerken. */
  /* Het menu ligt binnen .kop, en die maakt met z-index 40 een eigen
     stapelcontext. Daarbinnen wint het menu (z-index 30) van het logo en de
     knop, die op auto staan — ze waren dus wél aanwezig maar onzichtbaar en
     onaanklikbaar. Vandaar hier expliciet erboven. */
  html.menu-open .merk,
  html.menu-open .nav-knop {
    position: relative;
    z-index: 35;
  }
  html.menu-open .merk__naam { display: none; }
  html.menu-open .merk__teken { width: 42px; height: 40px; }
  html.menu-open .nav__snel { display: none; }

  /* Het menu neemt het hele scherm: een half doorschijnend paneel met de
     pagina eronder leidde af en je wist niet meer waar je zat. De kop blijft
     er bovenop staan, zodat het logo en de sluitknop bereikbaar blijven. */
  .kop { z-index: 40; }
  .nav--open .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Geen gap: de rijen raken elkaar en worden gescheiden door een lijntje. */
    gap: 0;
    position: fixed;
    inset: 0;
    /* ruimte voor de kop die erboven blijft staan */
    padding: 88px var(--gutter) 32px;
    background: var(--bg);
    font-size: 17px;
    z-index: 30;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* De pagina eronder mag niet meescrollen zolang het menu open is. */
  html.menu-open,
  html.menu-open body { overflow: hidden; }
  /* Elke rij even hoog, zodat het ritme klopt en alles met een duim te
     raken is. Het lijntje komt bovenaan elke rij behalve de eerste. */
  .nav--open .nav__links > * {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-top: 1px solid var(--border);
  }
  .nav--open .nav__links > *:first-child { border-top: 0; }
  /* De inschrijfknop is geen menuregel maar een actie: geen lijntje, wel
     ruimte erboven en over de volle breedte. */
  .nav--open .nav__links > .knop {
    justify-content: center;
    border-top: 0;
    margin-top: 16px;
    min-height: 46px;
  }
  /* De oude .kop { position: relative } is hier weg: die was nodig toen het
     menu absoluut gepositioneerd was en een gepositioneerde ouder zocht. Nu
     het menu fixed is, overschreef die regel enkel nog de sticky hierboven. */
}

@media (max-width: 900px) {
  :root { --gutter: 28px; }

  .hero {
    grid-template-columns: 1fr;
    padding-block: 32px 40px;
  }
  /* Titel en knoppen eerst, de foto eronder: op een klein scherm wil je
     meteen weten waar je bent en wat je kan doen. */
  .hero__beeld { order: 0; }
  /* De diareeks had een vaste hoogte van 440px terwijl de foto's kleiner
     werden — dat liet een leeg vlak onder de foto staan. Met een vaste
     verhouding schaalt de bak mee met de breedte. */
  .diareeks {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .diareeks__dia img { height: 100%; }
  .hero h1 { font-size: 38px; }

  .raster { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; }

  /* De 0 zette de zijkanten van .wrap op nul, waardoor foto en tekst op
     mobiel tegen de schermrand plakten. */
  .artikel { padding: 32px var(--gutter) 48px; }
  .artikel h1 { font-size: 32px; }


  .voet__binnen { flex-direction: column; gap: 24px; }
  .voet__rechts { text-align: left; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }

  .hero h1 { font-size: 34px; }
  .hero__intro { font-size: 17px; }
  /* Naast elkaar werd te krap: "Kom gratis proberen" brak over twee regels
     en de knoppen werden 68px hoog. Onder elkaar, over de volle breedte. */
  .hero__knoppen { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__knoppen .knop { flex: none; width: 100%; }
  /* Het kaartje wordt 34px over de foto getrokken. Op static schilderde de
     diareeks (position: relative) eroverheen en verdween het bijschrift.
     Relative met z-index zet het kaartje weer bovenaan. */
  .hero__kaart {
    position: relative;
    z-index: 1;
    /* De left/bottom van de absolute desktopvariant moeten hier uit: op een
       relatief element schuiven ze het kaartje gewoon op, waardoor het 44px
       scheef stond (56px links, 12px rechts). */
    left: auto;
    bottom: auto;
    max-width: none;
    margin-top: -34px;
    margin-inline: 14px;
  }

  .sectiekop h2 { font-size: 25px; }
  /* De knop naast de titel liet daar te weinig ruimte over: "Nieuws uit de
     club" brak dan midden in de zin af. Onder elkaar houdt de titel de volle
     breedte. */
  .sectiekop {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .raster { grid-template-columns: 1fr; }
  .tegels { grid-template-columns: 1fr; }

  .reactie--antwoord { padding-left: 24px; }
  .velden-duo { grid-template-columns: 1fr; }
  .reactieformulier__voet { flex-direction: column; align-items: stretch; gap: 12px; }
  .reactieformulier .knop { width: 100%; }
  .paginakop h1 { font-size: 32px; }
}

/* =========================================================
   Uitbreidingen: submenu, infopagina's, rooster, personen
   ========================================================= */

/* ---------- submenu ---------- */
.nav__groep { position: relative; }
.nav__groepknop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  /* de verticale padding maakt de groep even hoog als de kop, zodat er
     geen gat valt tussen de knop en het submenu — anders klapt het dicht
     zodra je muis ertussen komt */
  padding: 29px 0;
  font: inherit;
  color: var(--ink-muted);
  cursor: pointer;
}
.nav__groepknop:hover { color: var(--ink); }
.nav__groepknop svg { width: 16px; height: 16px; }
.nav__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 240px;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-float);
  z-index: 30;
}
.nav__sub a {
  padding: 9px 12px;
  border-radius: 10px;
  font: 600 14.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.nav__sub a:hover { background: var(--surface-sunken); color: var(--primary); }
.nav__groep:hover .nav__sub,
.nav__groep:focus-within .nav__sub,
.nav__groep--open .nav__sub { display: flex; }
.nav__groep:hover .nav__groepknop,
.nav__groep:focus-within .nav__groepknop { color: var(--ink); }

/* Submenu in het opengeklapte hamburgermenu. Dit blok moet ná de
   basisregels hierboven staan: media queries hebben geen extra gewicht, dus
   bij gelijke specificiteit wint wat later in het bestand komt. */
@media (max-width: 1080px) {
  /* Submenu's in het opengeklapte menu: gewoon ingesprongen regels in plaats
     van een zwevend kaartje, en hover uitgeschakeld — op een touchscreen
     blijft die anders plakken. */
  /* De groep bevat de knop en het submenu onder elkaar; de regel hierboven
     zet alle menurijen op flex, dus hier expliciet als kolom. De rijhoogte
     draagt de knop zelf, niet de groep. */
  .nav__groep {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  /* Deze twee moeten via .nav--open .nav__links > ... , anders wint de
     algemene rij-regel hierboven op specificiteit en krijgt de groep
     align-items: center — waardoor het submenu als een smal blokje in het
     midden kwam te staan in plaats van over de volle breedte. */
  .nav--open .nav__links > .nav__groep {
    min-height: 0;
    align-items: stretch;
  }
  .nav__groepknop {
    font-size: 17px;
    /* Was padding 0, waardoor de knop maar 19px hoog werd: met een duim
       nauwelijks te raken. Nu een volwaardig aanraakvlak. */
    padding: 0;
    width: 100%;
    justify-content: space-between;
    min-height: 52px;
  }
  .nav__groepknop svg { transition: transform .18s ease-out; }
  .nav__groep--open .nav__groepknop svg { transform: rotate(180deg); }
  /* Submenu in het opengeklapte menu: geen zwevend kaartje en geen inspringing.
     De items stonden 72px naar rechts en in een kleinere letter, waardoor ze
     als een apart, gecentreerd blokje oogden. Nu dezelfde beginlijn en
     dezelfde letter als het hoofdmenu; het verschil zit in de iets donkerdere
     band, die van rand tot rand loopt. */
  .nav__sub {
    position: static;
    min-width: 0;
    padding: 0;
    /* de negatieve marge trekt de band tot voorbij de padding van het menu,
       de padding op de links zet de tekst weer op dezelfde beginlijn */
    margin: 0 calc(var(--gutter) * -1);
    border: 0;
    box-shadow: none;
    background: var(--surface-warm);
    border-radius: 0;
  }
  .nav__sub a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--gutter);
    border-radius: 0;
    font: 600 17px var(--font);
    font-stretch: 100%;
    border-top: 1px solid var(--border);
  }
  .nav__sub a:first-child { border-top: 0; }
  .nav__sub a:hover { background: var(--border); color: var(--primary); }
  /* Hover en focus mogen het submenu hier niet sturen — op een touchscreen
     blijft hover plakken, en een tik op de knop geeft hem focus. Maar sluit
     de open groep expliciet uit: :focus-within telt drie selectoren en won
     anders van .nav__groep--open, waardoor het submenu dichtbleef zodra je
     het met een vinger aanraakte. */
  .nav__groep:not(.nav__groep--open):hover .nav__sub,
  .nav__groep:not(.nav__groep--open):focus-within .nav__sub { display: none; }
  .nav__groep.nav__groep--open .nav__sub { display: flex; }
}

/* ---------- secties op infopagina's ---------- */
.blok { padding-bottom: 26px; }
.sectietitel {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 18px;
}
.paneel__intro {
  margin-top: 10px;
  font: 400 15px/1.6 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.duo--gelijk { grid-template-columns: 1fr 1fr; }

.infokaart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
}
.infokaart b { font: 700 16px/1.35 var(--font); font-stretch: 100%; }
.infokaart span,
.infokaart p {
  font: 400 14.5px/1.6 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.infokaart .dojonummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font: 800 13px/1 var(--font);
  font-stretch: 100%;
}
.infokaart__bereikbaar strong { color: var(--ink); }
/* "❗ Bekijk het plannetje": moet opvallen, want zonder plannetje vind je de
   zaal op de campus moeilijk */
.infokaart__plan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--primary-tint);
  color: var(--primary);
  font: 700 14px var(--font);
  font-stretch: 100%;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.infokaart__plan:hover { background: var(--primary); color: #fff; }
.infokaart__links a,
.infokaart__bereikbaar a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- dojokaart (OpenStreetMap via Leaflet) ---------- */
/* position + z-index maken een eigen stapelcontext. Zonder die schoven de
   Leaflet-lagen (z-index tot 1000) over de plakkende kop en het menu. */
.dojokaart {
  position: relative;
  z-index: 0;
  height: 380px;
  margin: 18px 0 22px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--surface-warm);
}
/* leaflet.css laadt ná dit bestand: vandaar de dubbele klassen */
.dojokaart.leaflet-container { font: 400 14px/1.5 var(--font); font-stretch: 100%; }
.dojokaart .leaflet-popup-content { margin: 12px 16px; font: 400 14px/1.5 var(--font); font-stretch: 100%; color: var(--ink-muted); }
.dojokaart .leaflet-popup-content b { color: var(--ink); }
.dojokaart .leaflet-popup-content a { color: var(--primary); font-weight: 600; }
.dojopin span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 2px 8px rgba(61, 54, 44, .35);
  color: #fff;
  font: 800 15px/1 var(--font);
  font-stretch: 100%;
}
@media (max-width: 620px) {
  .dojokaart { height: 300px; }
}

/* ---------- lessenrooster ---------- */
.tabelhouder { overflow-x: auto; margin-top: 18px; }
.rooster {
  width: 100%;
  border-collapse: collapse;
  font: 400 15px var(--font);
  font-stretch: 100%;
}
.rooster th,
.rooster td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.rooster thead th {
  font: 700 13px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: normal;
}
.rooster tbody th {
  font: 700 15px var(--font);
  font-stretch: 100%;
  color: var(--ink);
}
.rooster tbody tr:last-child th,
.rooster tbody tr:last-child td { border-bottom: 0; }
.rooster td { color: var(--ink-muted); }

/* ---------- lidgeld ---------- */
.tarieven {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tarieven li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-strong);
  font: 400 15px var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.tarieven li:last-child { border-bottom: 0; padding-bottom: 0; }
.tarieven b {
  font: 800 17px var(--font);
  font-stretch: 100%;
  color: var(--primary);
  white-space: nowrap;
}

/* ---------- personen ---------- */
.persoon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border-radius: 20px;
  padding: 16px 16px 20px;
  box-shadow: var(--shadow-card);
  font: 400 13.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
  overflow-wrap: anywhere;
}
.persoon img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 10px;
}
.persoon__blob {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 16px;
  margin-bottom: 10px;
  background: var(--surface-warm);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 32px var(--font);
  font-stretch: 100%;
}
.persoon b { font: 700 16px var(--font); font-stretch: 100%; color: var(--ink); }
.persoon__functie { color: var(--ink-muted); }
.persoon a { color: var(--primary); }
.persoon a:hover { text-decoration: underline; }

/* ---------- downloads in blokken ---------- */
.artikel__tekst a[href$=".pdf"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.artikel__tekst a[href$=".pdf"]::before { content: "📄"; }

@media (max-width: 1080px) {
  .raster--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .raster--3 { grid-template-columns: 1fr; }
  .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .duo--gelijk { grid-template-columns: 1fr; }

}

@media (max-width: 620px) {
  .raster--4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sectietitel { font-size: 22px; }
  .rooster th, .rooster td { padding: 10px 12px; font-size: 14px; }
}

/* ---------- infopagina: tekst met downloadpaneel ---------- */
.pagina-hoofd {
  padding-bottom: 64px;
}
.pagina-hoofd > .artikel__tekst {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pagina-hoofd--duo {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(280px, 400px);
  justify-content: space-between;
  gap: 48px;
  align-items: start;
}

.downloadpaneel {
  background: var(--surface-warm);
  border-radius: 20px;
  padding: 24px 22px 26px;
  position: sticky;
  top: 24px;
}
.downloadpaneel__titel {
  font: 800 18px var(--font);
  font-stretch: 100%;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 16px;
}
.downloadlijst {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- downloads ---------- */
.download {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .15s ease-out, transform .15s ease-out;
}
.download:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.download__icoon { font-size: 20px; }
.download__tekst { flex: 1; min-width: 0; }
.download b {
  display: block;
  font: 700 15.5px var(--font);
  font-stretch: 100%;
  color: var(--ink);
}
.download__meta {
  display: block;
  margin-top: 2px;
  font: 600 12.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}
.download__pijl {
  font-size: 16px;
  color: var(--ink-subtle);
  flex: none;
}
.download:hover .download__pijl { color: var(--primary); }

/* de gordelkleuren: een bandje zoals een obi */
.download--gordel { position: relative; padding-left: 22px; overflow: hidden; }
.download__band {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: var(--gordel, var(--border-strong));
}
.download--gordel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gordel, transparent);
  opacity: .07;
  pointer-events: none;
}
[data-gordel="geel"]   { --gordel: #e3bf4c; }
[data-gordel="oranje"] { --gordel: #dd8536; }
[data-gordel="groen"]  { --gordel: #5f8f4a; }
[data-gordel="blauw"]  { --gordel: #3f76a6; }
[data-gordel="bruin"]  { --gordel: #7a5136; }
[data-gordel="zwart"]  { --gordel: #2e2a24; }

/* ---------- fotoblok in artikels ---------- */
.fotoblok { margin: 0; }
.fotoraster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.fotoraster--1 { grid-template-columns: 1fr; }
.fotoblok__enkel { display: block; }
.fotoblok__enkel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  background: var(--surface-warm);
}
.fotoraster--2 { grid-template-columns: repeat(2, 1fr); }
.fotoraster__item {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-warm);
}
.fotoraster--1 .fotoraster__item { border-radius: 20px; }
.fotoraster__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform .2s ease-out;
}
.fotoraster--1 .fotoraster__item img { aspect-ratio: 4 / 3; }
.fotoraster__item:hover img { transform: scale(1.03); }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(43, 38, 31, .92);
  padding: 24px;
}
.lightbox--open { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 16px;
  object-fit: contain;
}
.lightbox__bijschrift {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  text-align: center;
  color: #f6ecdc;
  font: 400 14px var(--font);
  font-stretch: 100%;
}
.lightbox__knop {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: rgba(250, 245, 236, .14);
  color: #faf5ec;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__knop:hover { background: rgba(250, 245, 236, .26); }
.lightbox__knop--vorige { left: 16px; }
.lightbox__knop--volgende { right: 16px; }
.lightbox__sluit {
  position: absolute;
  top: 16px;
  right: 16px;
  transform: none;
}

@media (max-width: 620px) {
  .fotoraster { gap: 8px; }
  .lightbox { padding: 12px; }
  .lightbox__knop { width: 42px; height: 42px; }
}

/* =========================================================
   Leden: formulieren, profiel, moderatie
   ========================================================= */
.smal {
  max-width: 560px;
  margin: 0 auto;
  padding-block: 48px 64px;
}
.smal--breed { max-width: 820px; }
.smal h1 { font-size: 38px; font-weight: 800; line-height: 1.1; }
.smal__intro {
  margin-top: 14px;
  font: 400 16.5px/1.6 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}

.formulier {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 26px;
  background: var(--surface);
  border-radius: 20px;
  padding: 26px 28px;
  box-shadow: var(--shadow-card);
}
.formulier label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font: 700 14.5px var(--font);
  font-stretch: 100%;
  color: var(--ink);
}
.formulier .hint {
  font: 400 13px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}
.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="password"],
.formulier select,
.formulier textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 15px;
  font: 400 15.5px var(--font);
  font-stretch: 100%;
  color: var(--ink);
  background: var(--bg);
}
.formulier textarea { min-height: 180px; resize: vertical; line-height: 1.55; }
.formulier input:focus,
.formulier select:focus,
.formulier textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.formulier input[type="file"] {
  font: 400 14px var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.formulier .knop { align-self: flex-start; }
.formulier__voet {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font: 400 14.5px/1.7 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.formulier__voet a:not(.knop) { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* Tekstvariant: lopende zinnen in plaats van knoppen. Flex maakt van een <br>
   en van losse tekstregels aparte flex-items, waardoor de regels uit elkaar
   drijven — hier dus gewoon blokregels, met een lijntje erboven om ze van het
   formulier te scheiden. */
.formulier__voet--tekst {
  display: block;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.formulier__voet--tekst p { margin: 0; }
.formulier__voet--tekst p + p { margin-top: 6px; }

.melding {
  margin-top: 20px;
  border-radius: 14px;
  padding: 14px 18px;
  font: 600 14.5px/1.55 var(--font);
  font-stretch: 100%;
}
.melding--ok   { background: var(--green-tint); color: #4d5b3a; }
.melding--fout { background: var(--primary-tint); color: var(--primary); }
/* p staat in de reset op margin 0 en .melding heeft alleen een margin-top,
   dus alles wat erop volgt zonder eigen marge plakte tegen de melding aan.
   .sectietitel heeft ook enkel een margin-bottom, vandaar de h2 erbij. */
.melding + p,
.melding + h2 { margin-top: 16px; }

/* ---------- nieuwsbrief-blok ---------- */
/* Staat midden in de lopende tekst van een infopagina (een blok in de Panel).
   Eén kaart voor titel én formulier: het formulier verliest daarom zijn eigen
   kaart, anders krijg je een kaart in een kaart. Moet ná .formulier staan. */
.nieuwsbriefblok {
  background: var(--surface);
  border-radius: 20px;
  padding: 26px 28px 28px;
  box-shadow: var(--shadow-card);
  scroll-margin-top: 110px;
}
.nieuwsbriefblok h2 { margin-bottom: 8px; }
.nieuwsbriefblok .melding { margin-top: 16px; }
.nieuwsbriefblok__formulier {
  margin-top: 20px;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* Rij knoppen onder een melding of een formulier. */
.acties {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 620px) {
  .acties { flex-direction: column; align-items: stretch; }
  .acties .knop { width: 100%; }
}

.profielkop {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 6px;
}
.profielkop__foto {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  object-fit: cover;
  flex: none;
}
.profielkop__foto--leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-warm);
  color: var(--primary);
  font: 800 26px var(--font);
  font-stretch: 100%;
}
.profielkop div { display: flex; flex-direction: column; gap: 2px; }
.profielkop b { font: 700 17px var(--font); font-stretch: 100%; }
.profielkop span {
  font: 400 13.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}

/* Keuzerondjes op het registratieformulier */
.keuzes {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.keuzes legend {
  padding: 0 6px;
  font: 700 14.5px var(--font);
  font-stretch: 100%;
  color: var(--ink);
}
.keuze {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font: 400 15.5px/1.4 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
  cursor: pointer;
}
.keuze input {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
  flex: none;
  margin: 0;
}
.keuze:hover { color: var(--ink); }

/* Wat iemand bij het registreren zelf opgaf, in de moderatiewachtrij */
.wachtrij__claim {
  display: block;
  margin-top: 2px;
  font: 400 13.5px/1.5 var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}

/* Balk bovenaan staging. Bewust lelijk en niet in de huisstijl: je moet in
   één oogopslag zien dat je niet op de echte site zit. */
.stagingbalk {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 10px 20px;
  background: repeating-linear-gradient(45deg, #1c1c1c, #1c1c1c 14px, #d9a03f 14px, #d9a03f 28px);
  color: #fff;
  font: 600 13px/1.3 var(--font);
  font-stretch: 100%;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.stagingbalk b {
  background: #1c1c1c;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .08em;
}
.stagingbalk span { background: rgba(28,28,28,.85); padding: 4px 10px; border-radius: 999px; }
.stagingbalk a {
  background: #fff;
  color: #1c1c1c;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
  text-shadow: none;
}
/* De kop plakt zelf ook; laat hem onder de balk beginnen. */
.is-staging .kop { top: 44px; }

/* ---------- agenda uit Google Calendar ---------- */
.agendafilter { padding-bottom: 56px; }
.agendamaand {
  font: 800 22px var(--font);
  font-stretch: 100%;
  color: var(--ink);
  margin: 34px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.agendamaand:first-of-type { margin-top: 26px; }

.agendadag {
  display: flex;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.agendadag__datum {
  flex: none;
  width: 54px;
  text-align: center;
  padding-top: 2px;
}
.agendadag__datum b {
  display: block;
  font: 800 24px/1 var(--font);
  font-stretch: 100%;
  color: var(--ink);
}
.agendadag__datum span {
  display: block;
  margin-top: 2px;
  font: 600 12px var(--font);
  font-stretch: 100%;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-subtle);
}
.agendadag__items { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.agenda-item { display: flex; gap: 14px; align-items: baseline; }
.agenda-item__tijd {
  flex: none;
  width: 62px;
  font: 600 13.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.agenda-item__body { min-width: 0; }
.agenda-item__body b {
  display: block;
  font: 600 15.5px/1.35 var(--font);
  font-stretch: 100%;
  color: var(--ink);
}
.agenda-item__waar {
  display: block;
  margin-top: 1px;
  font: 400 13px/1.4 var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}
/* Wedstrijden en evenementen springen eruit, trainingen zijn het ritme. */
.agenda-item--wedstrijd .agenda-item__body b,
.agenda-item--evenement .agenda-item__body b { color: var(--primary); }
.agenda-item--wedstrijd .agenda-item__tijd,
.agenda-item--evenement .agenda-item__tijd { color: var(--primary); }

/* Filter zonder JavaScript: de aangevinkte radio stuurt wat er zichtbaar is. */
.filterpil {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font: 600 14px var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
  cursor: pointer;
  min-height: 42px;
}
.filterpil span {
  font-size: 12px;
  color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
}
.filterpil:hover { border-color: var(--primary); color: var(--ink); }
#filter-alles:checked ~ [for="filter-alles"],
#filter-wedstrijden:checked ~ [for="filter-wedstrijden"],
#filter-trainingen:checked ~ [for="filter-trainingen"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
#filter-alles:checked ~ [for="filter-alles"] span,
#filter-wedstrijden:checked ~ [for="filter-wedstrijden"] span,
#filter-trainingen:checked ~ [for="filter-trainingen"] span { color: rgba(255,255,255,.75); }

/* Wedstrijden tonen: trainingsregels weg, en dagen zonder wedstrijd ook. */
.filterrij:has(#filter-wedstrijden:checked) ~ .agendalijst .agenda-item--training { display: none; }
.filterrij:has(#filter-wedstrijden:checked) ~ .agendalijst .agendadag:not(.heeft-wedstrijd) { display: none; }
/* Trainingen tonen: het omgekeerde. */
.filterrij:has(#filter-trainingen:checked) ~ .agendalijst .agenda-item:not(.agenda-item--training) { display: none; }
.filterrij:has(#filter-trainingen:checked) ~ .agendalijst .agendadag:not(.heeft-training) { display: none; }

.agendabron { margin-top: 26px; }

@media (max-width: 620px) {
  .agendadag { gap: 12px; }
  .agendadag__datum { width: 42px; }
  .agenda-item { flex-direction: column; gap: 1px; }
  .agenda-item__tijd { width: auto; }
}

/* Cijferblokken op het dashboard */
.cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 38px;
}
.cijfer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cijfer b {
  font: 800 32px/1 var(--font);
  font-stretch: 100%;
  color: var(--ink);
}
.cijfer span {
  font: 600 14px var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.cijfer em {
  font: 400 12.5px/1.4 var(--font);
  font-stretch: 100%;
  font-style: normal;
  color: var(--ink-subtle);
  margin-top: 4px;
}
.cijfer__let-op { color: var(--primary); font-weight: 600; }

/* Tabel met de leden. De wikkel laat hem apart scrollen op een smal scherm,
   zodat de pagina zelf niet horizontaal gaat schuiven. */
.tabelwikkel {
  overflow-x: auto;
  margin-bottom: 38px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.tabel {
  width: 100%;
  border-collapse: collapse;
  font: 400 14.5px var(--font);
  font-stretch: 100%;
  min-width: 620px;
}
.tabel th {
  text-align: left;
  padding: 14px 16px;
  font: 700 12.5px var(--font);
  font-stretch: 100%;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tabel td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--ink);
}
.tabel tr:last-child td { border-bottom: 0; }
.tabel--getal { text-align: right; font-variant-numeric: tabular-nums; }
.tabel__bij {
  font: 400 12.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}

/* Ledenoverzicht in /moderatie */
.ledenlijst { display: flex; flex-direction: column; margin-bottom: 34px; }
.ledenlijst__rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.ledenlijst__rij:first-child { border-top: 0; }
.ledenlijst__rij.is-geschorst { opacity: .62; }
.ledenlijst__wie { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ledenlijst__wie b { font: 700 15.5px var(--font); font-stretch: 100%; color: var(--ink); }
.ledenlijst__wie span { font: 400 13.5px var(--font); font-stretch: 100%; color: var(--ink-muted); }
.ledenlijst__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 3px; }
.ledenlijst__acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ledenlijst__acties .knop { font-size: 13.5px; padding: 8px 16px; min-height: 36px; }
.ledenlijst__nota {
  font: 400 13px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
  font-style: italic;
}
.pil {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font: 700 11.5px var(--font);
  font-stretch: 100%;
  letter-spacing: .02em;
}
.pil--lid        { background: var(--surface-warm); color: var(--ink-muted); }
.pil--clublid    { background: var(--green-tint);  color: #4d5b3a; }
.pil--moderator  { background: var(--gold-tint);   color: var(--gold); }
.pil--admin      { background: var(--primary-tint); color: var(--primary); }
.pil--geschorst  { background: #e9e3d8; color: #7a7061; }
.pil--onbevestigd { background: var(--gold-tint); color: var(--gold); }

/* Sprongknoppen bovenaan de moderatie: de geschorste accounts en de geweerde
   adressen staan onderaan, zodat je er niet telkens langs moet scrollen. */
.sprongen { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 10px; }
.sectietitel[id] { scroll-margin-top: 100px; }

/* Namen in de dashboardtabel openen het detail van die persoon */
.tabel td b a:hover,
.ledenlijst__wie b a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.persoon-detail .ledenlijst__meta { margin: -6px 0 18px; }
.persoon-detail__kop {
  margin: 30px 0 6px;
  font: 800 19px var(--font);
  font-stretch: 100%;
  color: var(--ink);
}
/* Door een moderator bevestigd, geen rol: ouder of fan */
.pil--ouder      { background: #f3e3d9; color: #8b4f38; }
.pil--fan        { background: var(--surface); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--border-strong); }
/* Uitdrukkelijk schrijfrecht voor clubnieuws, en een bericht dat met AI verfraaid werd */
.pil--schrijver  { background: var(--surface); color: var(--primary); box-shadow: inset 0 0 0 1px #e3bdb2; }
.pil--ai         { background: var(--gold-tint); color: var(--gold); }

/* "Verfraai met AI" onder het tekstvak op /schrijven */
.verfraai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: -4px; }
.verfraai__status {
  flex: 1 1 100%;
  font: 400 13.5px/1.5 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.verfraai__status:empty { display: none; }

/* Gekozen foto's onder een uploadveld, met × om er een weg te halen */
.fotokeuze {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  margin-top: -4px;
}
.fotokeuze__item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-warm);
}
.fotokeuze__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fotokeuze__naam {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 8px 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: linear-gradient(transparent, rgba(40, 34, 26, .7));
  color: #fff;
  font: 400 11px/1.3 var(--font);
  font-stretch: 100%;
}
/* HEIC en andere formaten die de browser niet kan tonen */
.fotokeuze__item.is-zonder-voorbeeld .fotokeuze__naam {
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  white-space: normal;
  text-align: center;
  background: none;
  color: var(--ink-muted);
}
.fotokeuze__weg {
  position: absolute;
  top: 6px; right: 6px;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(40, 34, 26, .72);
  color: #fff;
  font: 700 19px/1 var(--font);
  cursor: pointer;
}
.fotokeuze__weg:hover { background: var(--primary); }
.fotokeuze__omslag,
.fotokeuze__maakomslag {
  position: absolute;
  top: 6px; left: 6px;
  padding: 4px 9px;
  border: 0;
  border-radius: 999px;
  font: 700 11px/1.2 var(--font);
  font-stretch: 100%;
}
.fotokeuze__omslag { background: var(--primary); color: #fff; }
.fotokeuze__maakomslag { background: rgba(255, 255, 255, .88); color: var(--ink); cursor: pointer; }
.fotokeuze__maakomslag:hover { color: var(--primary); }
.lightbox--enkel .lightbox__knop--vorige,
.lightbox--enkel .lightbox__knop--volgende { display: none; }

/* Focuspunt van de omslagfoto kiezen op /schrijven. De tegel heeft dezelfde
   verhouding als .kaart__beeld (±377x190), zodat je ziet wat er straks
   zichtbaar blijft. Geen max-height op de grote foto: dan klopt de plek van
   een tik niet meer met het beeld. */
.fotofocus {
  padding: 16px;
  border-radius: 16px;
  background: var(--surface-warm);
}
.fotofocus__uitleg { margin: 0 0 12px; font: 400 14px/1.5 var(--font); font-stretch: 100%; color: var(--ink-muted); }
.fotofocus__uitleg b { color: var(--ink); }
.fotofocus__werk { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.fotofocus__kies { position: relative; max-width: 380px; overflow: hidden; border-radius: 10px; cursor: crosshair; line-height: 0; }
.fotofocus__kies:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.fotofocus__kies img { display: block; width: 100%; height: auto; }
.fotofocus__punt {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--primary), 0 2px 8px rgba(40, 34, 26, .45);
  pointer-events: none;
}
.fotofocus__voorbeeld span { display: block; margin-bottom: 6px; font: 600 12px var(--font); font-stretch: 100%; color: var(--ink-muted); }
.fotofocus__tegel { aspect-ratio: 377 / 190; overflow: hidden; border-radius: 10px; background: var(--surface); }
.fotofocus__tegel img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 620px) {
  .fotofocus__werk { grid-template-columns: 1fr; }
}
.formulier.is-bezig input[type="text"],
.formulier.is-bezig textarea { opacity: .55; }

/* Knop voor iets onomkeerbaars */
.knop--gevaar {
  background: var(--surface);
  border-color: #e3bdb2;
  color: var(--primary);
}
.knop--gevaar:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Verwijderknop bij een reactie, enkel zichtbaar voor moderatoren */
.reactie__moderatie { display: inline; margin: 0; }
.reactie__verwijder {
  background: none;
  border: 0;
  padding: 0;
  font: 600 13.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
  cursor: pointer;
}
.reactie__verwijder:hover { color: var(--primary); }

@media (max-width: 620px) {
  .ledenlijst__rij { flex-direction: column; align-items: stretch; }
  .ledenlijst__acties { width: 100%; }
  .ledenlijst__acties .knop { flex: 1 1 auto; }
}

/* ---------- moderatiewachtrij ---------- */
.wachtrij { display: flex; flex-direction: column; gap: 12px; margin-bottom: 34px; }
.wachtrij__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  background: var(--surface);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.wachtrij__item b { font: 700 16px var(--font); font-stretch: 100%; }
.wachtrij__item b a:hover { color: var(--primary); }
.wachtrij__item span {
  display: block;
  margin-top: 2px;
  font: 400 13px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}
.wachtrij__item p {
  margin-top: 8px;
  font: 400 14.5px/1.55 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
/* Vier knoppen (clublid, ouder, fan, schorsen) passen op een telefoon niet
   naast elkaar: laat ze doorlopen naar een volgende regel. */
.wachtrij__item form { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.wachtrij__item .knop { padding: 10px 18px; font-size: 14px; }
.leeg {
  font: 400 14.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
  margin-bottom: 30px;
}

/* Toelichting boven een moderatiesectie */
.uitleg {
  font: 400 14.5px/1.55 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
  max-width: 62ch;
  margin: -6px 0 22px;
}

/* ---------- lid in de nav ---------- */
.nav__lid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14.5px var(--font);
  font-stretch: 100%;
  color: var(--ink);
}
.nav__lid img,
.nav__lid span.initialen {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px var(--font);
  font-stretch: 100%;
  flex: none;
}

@media (max-width: 900px) {
  .smal { padding-block: 32px 48px; }
  .smal h1 { font-size: 30px; }
  .wachtrij__item { flex-direction: column; }
  .wachtrij__item form { width: 100%; }
}

/* ---------- reactieformulier voor leden ---------- */
.reactieformulier__wie {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 13.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}
.reactieformulier__wie img,
.reactieformulier__wie .reactie__avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  font-size: 14px;
}
.reactieformulier__wie b { color: var(--ink); }
.reactieformulier--gast { background: var(--surface-sunken); border-style: dashed; }
.reactieformulier--gast .reactieformulier__voet { justify-content: flex-start; gap: 10px; }
img.reactie__avatar { object-fit: cover; }
.paginakop__acties { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- filters op het nieuwsarchief ---------- */
.filters { padding-bottom: 22px; }
.filterrij { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  font: 700 13.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
  transition: border-color .15s ease-out, color .15s ease-out, background-color .15s ease-out;
}
.filter span {
  font-weight: 600;
  color: var(--ink-subtle);
}
.filter:hover { border-color: var(--primary); color: var(--primary); }
.filter--aan {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.filter--aan span { color: rgba(255, 255, 255, .75); }

.jaren { margin-top: 12px; }
.jaren summary {
  cursor: pointer;
  font: 700 13.5px var(--font);
  font-stretch: 100%;
  color: var(--primary);
  padding: 6px 0;
  list-style: none;
}
.jaren summary::-webkit-details-marker { display: none; }
.jaren summary::before { content: "▸ "; }
.jaren[open] summary::before { content: "▾ "; }
.jaren .filterrij { margin-top: 10px; }

.filters__telling {
  margin-top: 16px;
  font: 600 13.5px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}

.pagineren {
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font: 600 14px var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}

/* ---------- inschrijfpagina ---------- */
.inschrijfkop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding-block: 48px 34px;
}
.inschrijfkop h1 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.08;
}
.inschrijfkop__intro {
  margin-top: 16px;
  font: 400 18px/1.6 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
  max-width: 46ch;
}
.inschrijfkop__acties {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
/* Net als in de hero: naast elkaar wordt het te krap en breekt het label
   over twee regels. Onder elkaar over de volle breedte. */
@media (max-width: 620px) {
  .inschrijfkop__acties { flex-direction: column; align-items: stretch; gap: 12px; }
  .inschrijfkop__acties .knop { width: 100%; }
}

.blikvangers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.blikvangers li {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  background: var(--surface);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
}
.blikvangers__emoji {
  grid-row: span 2;
  font-size: 26px;
  text-align: center;
}
.blikvangers b {
  font: 700 16px var(--font);
  font-stretch: 100%;
  color: var(--ink);
}
.blikvangers span:not(.blikvangers__emoji) {
  font: 400 14px/1.5 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}

/* ---------- inschrijfformulier ---------- */
.inschrijfblok {
  max-width: none;
  margin: 0 0 56px;
  background: var(--surface-warm);
  border-radius: 24px;
  padding: 34px 36px 38px;
}
.inschrijfblok__kop { margin-bottom: 22px; }
.inschrijfblok h2 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.inschrijfblok__kop p {
  margin-top: 8px;
  font: 400 16px/1.6 var(--font);
  font-stretch: 100%;
  color: var(--ink-muted);
}
.formulier--breed {
  max-width: none;
  margin-top: 0;
  padding: 30px 32px 32px;
}
/* twee kolommen zodra er plaats is: de velden staan anders eindeloos onder elkaar */
.formulier--breed fieldset { gap: 16px; }
.formulier--breed .velden-duo { gap: 16px; }

.inschrijfinfo { padding-bottom: 64px; }
.inschrijfinfo__tekst {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.formulier input[type="date"],
.formulier input[type="tel"] {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 15px;
  font: 400 15.5px var(--font);
  font-stretch: 100%;
  color: var(--ink);
  background: var(--bg);
}

/* ---------- velden binnen het inschrijfformulier ---------- */
.formulier fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.formulier fieldset + fieldset {
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.formulier legend {
  font: 800 16px var(--font);
  font-stretch: 100%;
  letter-spacing: -.01em;
  color: var(--ink);
  padding: 0;
  margin-bottom: 2px;
}
.keuzes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.keuze {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto;
  padding: 13px 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  font: 600 15px var(--font) !important;
  font-stretch: 100% !important;
  color: var(--ink-muted) !important;
  transition: border-color .15s ease-out, color .15s ease-out, background-color .15s ease-out;
}
.keuze input {
  width: auto;
  margin: 0;
  accent-color: var(--primary);
}
.keuze:hover { border-color: var(--primary); }
.keuze:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-tint);
  color: var(--primary) !important;
}
.veldhulp {
  font: 400 13.5px/1.55 var(--font);
  font-stretch: 100%;
  color: var(--ink-subtle);
}
.kindrij {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--surface-sunken);
}
.kindrij + .kindrij { margin-top: 12px; }
#kindErbij {
  align-self: flex-start;
  font-size: 14px;
  padding: 11px 20px;
}


/* =========================================================
   Mobiele correcties
   ========================================================= */
.duo--vol { grid-template-columns: 1fr; }

/* aanraakvlakken: tekstlinks in kaarten en balken krijgen wat lucht */
.meer {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.delen a,
.persoon a,
.artikel__tekst a[href^="mailto:"] {
  display: inline-block;
  padding-block: 4px;
}

@media (max-width: 900px) {
  /* de kalender stond op twee kolommen vast en duwde de pagina breder dan het scherm */
  .duo--gelijk { grid-template-columns: 1fr; }

  /* inschrijfkop: titel boven, blikvangers eronder */
  .inschrijfkop {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-block: 32px 26px;
  }
  .inschrijfkop h1 { font-size: 34px; }
  .inschrijfkop__acties .knop { flex: 1; }
  .inschrijfblok { padding: 24px 20px 28px; border-radius: 20px; }
  .inschrijfblok h2 { font-size: 24px; }
  .formulier--breed { padding: 22px 20px 24px; }
}

@media (max-width: 620px) {
  /* het lessenrooster wordt een kaartje per dag in plaats van een brede tabel */
  .tabelhouder { overflow-x: visible; margin-top: 16px; }
  .rooster,
  .rooster tbody,
  .rooster tr,
  .rooster tbody th,
  .rooster td { display: block; width: 100%; }
  .rooster thead { display: none; }
  .rooster tr {
    background: var(--surface-sunken);
    border-radius: 14px;
    padding: 14px 16px;
  }
  .rooster tr + tr { margin-top: 10px; }
  .rooster tbody th {
    font: 800 16px var(--font);
    font-stretch: 100%;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }
  .rooster td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 5px 0;
    border: 0;
    white-space: normal;
    text-align: right;
  }
  .rooster td::before {
    content: attr(data-label);
    font: 600 13px var(--font);
    font-stretch: 100%;
    color: var(--ink-subtle);
    text-align: left;
  }

  /* filterpillen en deelknoppen groot genoeg om te tikken */
  .filter { min-height: 40px; display: inline-flex; align-items: center; }
  .delen { width: 100%; margin-left: 0; }
  .delen a { padding: 8px 0; }

  /* voetlinks (mail, telefoon, socials) met de duim aantikbaar */
  .voet a { display: inline-block; padding-block: 6px; }
  .voet__binnen { gap: 22px; }

  /* duimpje en beantwoorden zijn knopjes: die mogen niet piepklein zijn */
  .reactie__acties { gap: 20px; }
  .reactie__acties button { min-height: 36px; }

  /* metatekst niet kleiner dan 13px op een telefoon */
  .kaart__voet,
  .reactie__acties,
  .download__meta,
  .reactie__naam .tijd { font-size: 13px; }
}

@media (max-width: 900px) {
  .pagina-hoofd--duo {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .downloadpaneel { position: static; }
}

/* ---------- foto bovenaan een infopagina ---------- */
.paginabeeld {
  margin: 0 0 34px;
  border-radius: 24px;
  overflow: hidden;
}
.paginabeeld img {
  width: 100%;
  /* 3:1, gelijk aan de bijsnede in het snippet. Stond hier een vaste hoogte,
     dan sneed object-fit het beeld een tweede keer bij — en die tweede snede
     gaat van het midden uit, dus buiten het focuspunt om. */
  aspect-ratio: 3 / 1;
  height: auto;
  object-fit: cover;
  display: block;
}
.paginabeeld figcaption {
  padding: 10px 4px 0;
  font: 400 13.5px var(--font);
  color: var(--ink-subtle);
}
.paginabeeld--leeg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  /* Zelfde verhouding als een echte foto, zodat de pagina niet verspringt
     zodra er een beeld bij komt. */
  aspect-ratio: 3 / 1;
  min-height: 150px;
  padding: 20px;
  border: 2px dashed var(--border-strong);
  background-color: var(--surface-warm);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, .45) 0 14px,
    transparent 14px 28px
  );
}
.paginabeeld__ikoon { font-size: 26px; }
/* Op een telefoon is 3:1 maar 112px hoog — te smal om iets van een foto te
   zien. Wat er van het beeld behouden blijft, bepaalt het focuspunt op het
   bestand. Dit blok moet ná de regels hierboven staan: media queries hebben
   geen extra gewicht, dus bij gelijke specificiteit wint de laatste regel. */
@media (max-width: 620px) {
  .paginabeeld img,
  .paginabeeld--leeg { aspect-ratio: 16 / 10; }
}

.paginabeeld--leeg b {
  font: 800 17px var(--font);
  font-stretch: 100%;
  color: var(--ink);
}
.paginabeeld--leeg span:not(.paginabeeld__ikoon) {
  font: 400 14.5px/1.5 var(--font);
  color: var(--ink-muted);
  max-width: 42ch;
}

/* ---------- fotoalbums ---------- */
.album__terug { margin-bottom: 10px; }
.album__meta {
  margin-top: 10px !important;
  font: 600 14px var(--font) !important;
  color: var(--ink-subtle) !important;
}
.albumraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding-bottom: 64px;
}
.albumraster__item {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-warm);
}
.albumraster__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform .2s ease-out;
}
.albumraster__item:hover img { transform: scale(1.04); }

@media (max-width: 620px) {
  .albumraster { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ---------- bladeren door een album ---------- */
.bladeren {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-bottom: 64px;
}
.bladeren__stand {
  font: 600 14px var(--font);
  color: var(--ink-subtle);
}

/* ---------- geen inzoomen op iPhone ---------- */
/* iOS zoomt de hele pagina in zodra je een invoerveld aantikt met een letter
   kleiner dan 16px, en zoomt daarna niet vanzelf terug. De formulieren staan
   op 15,5px, het reactieveld op 14,5px. Alleen op aanraakschermen naar 16px:
   op desktop blijft de maat van het ontwerp. Moet helemaal onderaan staan,
   na alle basisregels van de velden. */
@media (hover: none) and (pointer: coarse) {
  .formulier input[type="text"],
  .formulier input[type="email"],
  .formulier input[type="password"],
  .formulier input[type="date"],
  .formulier input[type="tel"],
  .formulier select,
  .formulier textarea,
  .reactieformulier input,
  .reactieformulier textarea { font-size: 16px; }
}