/* Transfer Nieuwsbrief — stijl per het Website UX-ontwerp ("De aanmeldmachine").
   Kalm, editorial, anti-clickbait: krant-van-record, veel wit, inkt op papier,
   groen alleen bij hardheid. Kleuren zijn merk-locks; wijzig ze niet. */

:root {
  --papier: #F7F5F0;
  --inkt: #1A1A1A;
  --groen: #1E5C3A;
  --oker: #C0883A;
  --meta: #6B6B6B;
  --lijn: #E5E1D8;
  --wit: #FFFFFF;
  --band: #F1E7D2;
  --serif: "Libre Baskerville", Georgia, serif;
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --st-rond: #20984F;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
}
a { color: inherit; }
.omvat { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.boventitel {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oker); font-weight: 600; margin-bottom: 10px;
}
.sectie-kop { font-family: var(--serif); font-size: 22px; margin: 0 0 16px; }

/* ---------- knoppen ---------- */
.knop {
  display: inline-block; padding: 9px 18px; font-family: var(--sans);
  font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer;
  border-radius: 3px; border: 1px solid transparent;
}
.knop-oker { background: var(--oker); color: var(--wit); border-color: var(--oker); }
.knop-oker:hover { filter: brightness(.95); }
.knop-omlijnd { background: transparent; color: var(--inkt); border-color: var(--inkt); }
.knop-omlijnd:hover { background: var(--inkt); color: var(--papier); }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--lijn); background: var(--papier); }
.header-binnen { display: flex; align-items: center; gap: 28px; height: 64px; }
.wordmark {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: var(--serif); font-size: 18px; letter-spacing: .01em; color: var(--inkt);
}
.hoofdnav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.hoofdnav a { text-decoration: none; font-size: 13.5px; color: var(--inkt); }
.hoofdnav a[aria-current="page"] { border-bottom: 2px solid var(--groen); padding-bottom: 2px; }
.hoofdnav a:hover:not(.knop) { color: var(--groen); }
.header-knop { white-space: nowrap; }
.menu-knop { display: none; background: none; border: 1px solid var(--lijn); border-radius: 3px; font-size: 17px; padding: 4px 10px; cursor: pointer; }

/* ---------- paginakop & filters ---------- */
.pagina-kop { padding: 44px 20px 8px; }
.pagina-kop h1 { font-family: var(--serif); font-size: clamp(30px, 4.6vw, 44px); line-height: 1.12; margin: 0 0 12px; font-weight: 700; }
.pagina-intro { color: var(--meta); max-width: 560px; margin: 0 0 8px; }
.pagina-intro a { color: var(--groen); }
.kruimel { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--meta); margin-bottom: 12px; }
.kruimel a { text-decoration: none; }

.filters { display: flex; flex-wrap: wrap; gap: 18px; padding: 18px 0 4px; align-items: flex-end; }
.filter { display: flex; flex-direction: column; gap: 6px; }
.filter-label { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--meta); font-weight: 600; }
.filter-select, .status-range-samenvatting {
  font-family: var(--sans); font-size: 13px; padding: 7px 10px; background: var(--wit);
  border: 1px solid var(--lijn); border-radius: 3px; min-width: 150px; color: var(--inkt);
}
.status-range, .club-kiezer { position: relative; }
.status-range summary, .club-kiezer summary { list-style: none; cursor: pointer; display: inline-block; }
.status-range summary::-webkit-details-marker, .club-kiezer summary::-webkit-details-marker { display: none; }
.club-kiezer-samenvatting { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; }
.kiezer-pijl { color: var(--meta); font-size: 10px; }
.club-kiezer-paneel {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; background: var(--wit);
  border: 1px solid var(--lijn); border-radius: 4px; box-shadow: 0 8px 24px rgba(26,26,26,.08);
  min-width: 240px; overflow: hidden;
}
.club-zoek {
  width: 100%; border: 0; border-bottom: 1px solid var(--lijn); padding: 10px 12px;
  font-family: var(--sans); font-size: 13px; background: var(--papier); outline: none;
}
.club-lijst { list-style: none; margin: 0; padding: 4px 0; max-height: 280px; overflow: auto; }
.club-groep {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--meta);
  font-weight: 600; padding: 9px 12px 4px;
}
.club-optie { padding: 7px 12px; font-size: 13px; cursor: pointer; }
.club-optie:hover { background: var(--papier); }
.club-optie.actief { color: var(--groen); font-weight: 600; }
.club-optie-alle { border-bottom: 1px solid var(--lijn); }
.club-lijst .leeg-melding { padding: 10px 12px; font-size: 12.5px; color: var(--meta); }
.status-range-samenvatting em { font-style: italic; color: var(--meta); }
.status-range-samenvatting strong { color: var(--groen); text-transform: uppercase; font-size: 11.5px; letter-spacing: .06em; }
.status-range-paneel {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; background: var(--wit);
  border: 1px solid var(--lijn); border-radius: 4px; padding: 14px; box-shadow: 0 8px 24px rgba(26,26,26,.08);
  display: flex; flex-direction: column; gap: 10px; min-width: 230px;
}
.status-range-paneel label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--meta); }
.status-range-paneel select { font-family: var(--sans); font-size: 13px; padding: 5px 8px; border: 1px solid var(--lijn); border-radius: 3px; background: var(--wit); }
.status-range-noot { font-size: 11.5px; color: var(--meta); margin: 0; }

.segmenten { display: inline-flex; border: 1px solid var(--lijn); border-radius: 3px; overflow: hidden; background: var(--wit); }
.segmenten button {
  font-family: var(--sans); font-size: 12.5px; padding: 8px 13px; border: 0; background: transparent;
  cursor: pointer; color: var(--inkt); border-right: 1px solid var(--lijn);
}
.segmenten button:last-child { border-right: 0; }
.segmenten button.actief { background: var(--inkt); color: var(--papier); font-weight: 600; }

/* ---------- feed ---------- */
.feed-omvat { padding-bottom: 40px; }
.feed { border-top: 2px solid var(--inkt); margin-top: 14px; padding-top: 26px; }
.feed-rij { display: grid; grid-template-columns: 96px 1fr; gap: 0; position: relative; }
.rail { position: relative; padding-right: 22px; }
.rail::after {
  content: ""; position: absolute; right: 10px; top: 4px; bottom: -26px; width: 1px; background: var(--lijn);
}
.feed-rij:last-of-type .rail::after { bottom: 12px; }
.rail-tijd { text-align: right; font-size: 11px; letter-spacing: .08em; color: var(--meta); text-transform: uppercase; line-height: 1.5; }
.rail-dag { display: block; font-weight: 600; }
.rail-klok { display: block; font-weight: 600; color: var(--inkt); }
.rail-live { display: block; color: var(--st-rond); font-weight: 700; }
.rail-gepind { display: block; color: var(--oker); font-weight: 700; }
.kaart-top-links { display: inline-flex; align-items: center; gap: 12px; }
.gepind-badge {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--oker); border: 1px solid var(--oker); border-radius: 3px; padding: 2px 7px;
}
.rail-dot {
  position: absolute; right: 5.5px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--meta); z-index: 2;
}
.rail-dot-groen { border-color: var(--st-rond); background: var(--st-rond); }

.kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 4px;
  padding: 18px 20px 14px; margin-bottom: 26px; box-shadow: 0 1px 2px rgba(26,26,26,.03);
}
.kaart-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kaart-kop { font-family: var(--serif); font-size: 20px; line-height: 1.3; margin: 0 0 8px; font-weight: 700; }
.kaart-kop a { text-decoration: none; }
.kaart-kop a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.kaart-meta { font-size: 12.5px; color: var(--meta); margin: 0 0 10px; }
.kaart-meta .meta-speler { font-weight: 600; color: var(--inkt); text-decoration: none; }
.club-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--lijn); }
.club-link:hover { color: var(--groen); border-bottom-color: var(--groen); }
.kaart-meta .meta-punt { color: var(--lijn); }
.kaart-samenvatting { margin: 0 0 10px; font-size: 14.5px; }

/* statusbadges — gewicht en positie doen het werk; groen alleen bij hardheid.
   Merkboek-codering: onderkast voor alles; ROND is de enige status in
   kapitalen (en officieel volgt die codering als T1-hardheid). */
.status-badge {
  font-size: 12px; letter-spacing: .03em; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; color: var(--meta);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st-rond); display: inline-block; }
.status-wild-gerucht { font-style: italic; font-size: 12px; }
.status-gerucht { color: var(--meta); }
.status-gesprekken { color: var(--inkt); }
.status-akkoord { color: var(--inkt); font-weight: 600; }
.status-medische-keuring { color: var(--inkt); font-weight: 700; }
.status-rond, .status-officieel {
  color: var(--st-rond); font-weight: 700;
  text-transform: uppercase; font-size: 11px; letter-spacing: .09em;
}
.status-afgeketst { color: var(--meta); text-decoration: line-through; }

/* bronregel + bronnenpaneel */
.bronnen-regel { font-size: 12px; color: var(--meta); margin: 0; }
.bron-label-inline { color: var(--meta); }
.bron-primair { color: var(--inkt); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--lijn); }
.bron-primair:hover { text-decoration-color: var(--groen); color: var(--groen); }
.bronnen summary { list-style: none; cursor: pointer; }
.bronnen summary::-webkit-details-marker { display: none; }
.bronnen-meer { font-size: 12px; color: var(--meta); }
.bronnen-nog:hover { color: var(--inkt); }
.bronnen-pijl { vertical-align: 1px; transition: transform .15s; }
.bronnen[open] .bronnen-pijl { transform: rotate(180deg); }
.bronnen-paneel { margin: 10px 0 2px; border-left: 2px solid var(--lijn); padding: 2px 0 2px 14px; }
.bron-rij { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 4px 0; font-size: 12.5px; }
.bron-rij-naam { display: flex; flex-direction: column; }
.bron-naam { font-weight: 600; color: var(--inkt); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--lijn); }
.bron-naam:hover { color: var(--groen); text-decoration-color: var(--groen); }
.bron-attributie { font-weight: 400; color: var(--meta); font-size: 11.5px; }
.bron-label { color: var(--meta); white-space: nowrap; font-size: 11px; letter-spacing: .04em; }

/* delen */
.deel { position: relative; }
.deel-knop { background: none; border: 0; color: var(--meta); cursor: pointer; padding: 4px; }
.deel-knop:hover { color: var(--inkt); }
.deel-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--wit);
  border: 1px solid var(--lijn); border-radius: 4px; box-shadow: 0 8px 24px rgba(26,26,26,.08);
  display: flex; flex-direction: column; min-width: 170px;
}
.deel-optie { font-family: var(--sans); font-size: 13px; text-align: left; padding: 9px 14px; background: none; border: 0; border-bottom: 1px solid var(--lijn); text-decoration: none; cursor: pointer; }
.deel-optie:last-child { border-bottom: 0; }
.deel-menu[hidden] { display: none; }
.deel-optie:hover { background: var(--papier); }

.feed-leeg { padding: 40px 0; color: var(--meta); }
.feed-leeg a { color: var(--groen); }
.laad-meer-houder { text-align: center; padding: 6px 0 10px; }

.club-doorverwijzing { font-size: 12.5px; color: var(--meta); padding: 12px 0 0; }
.club-doorverwijzing a { color: var(--groen); text-decoration: none; font-weight: 600; }
.club-doorverwijzing a:hover { text-decoration: underline; }

/* clubindex onder de hub-feed: de vaste ingang naar elke clubpagina */
.club-index { padding: 6px 20px 44px; }
.club-index .sectie-kop { border-top: 2px solid var(--inkt); padding-top: 18px; }
.club-index-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 24px; }
.club-index-lijst a {
  font-size: 13.5px; text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--lijn);
}
.club-index-lijst a:hover { color: var(--groen); }

/* ---------- CTA-band ---------- */
.cta-band { background: var(--band); border-top: 3px solid var(--oker); }
.cta-binnen { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; padding: 36px 20px; }
.cta-kop { font-family: var(--serif); font-size: 26px; margin: 0 0 8px; }
.cta-tekst { color: var(--meta); margin: 0; max-width: 420px; }
.cta-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
.cta-form input, .uitleg-cta input {
  font-family: var(--sans); font-size: 14px; padding: 10px 12px; border: 1px solid var(--lijn);
  border-radius: 3px; width: 100%; background: var(--wit);
}
.cta-micro { grid-column: 1 / -1; font-size: 11.5px; color: var(--meta); margin: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--inkt); color: var(--papier); margin-top: 0; }
.footer-boven { display: grid; grid-template-columns: 1.1fr 2fr; gap: 40px; padding: 40px 0 28px; }
.wordmark-donker { color: var(--papier); font-size: 17px; }
.footer-tagline { color: var(--oker); font-size: 13px; margin: 10px 0 0; }
.footer-kolommen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-kolomkop { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(247,245,240,.5); margin-bottom: 12px; font-weight: 600; }
.footer-kolommen a { display: block; color: var(--papier); text-decoration: none; font-size: 13.5px; padding: 3px 0; opacity: .9; }
.footer-kolommen a:hover { opacity: 1; text-decoration: underline; }
.footer-onder {
  border-top: 1px solid rgba(247,245,240,.15); padding: 16px 0 28px; display: flex;
  justify-content: space-between; font-size: 12px; color: rgba(247,245,240,.6);
}
.footer-onder a { color: inherit; }
.footer-onder em { font-style: normal; color: #63D083; }

/* ---------- uitleg status ---------- */
.uitleg-hero { background: #EFEDE6; border-bottom: 1px solid var(--lijn); padding: 48px 0 40px; }
.uitleg-hero h1 { font-family: var(--serif); font-size: clamp(32px, 5vw, 46px); line-height: 1.1; margin: 0 0 14px; }
.uitleg-lijst { padding: 10px 20px 50px; }
.uitleg-rij { display: grid; grid-template-columns: 200px 1fr; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--lijn); align-items: start; }
.uitleg-glyph { display: flex; flex-direction: column; gap: 8px; }
.uitleg-tekst p { margin: 0 0 6px; font-size: 15px; }
.uitleg-noot { color: var(--groen); font-size: 13px !important; }
.uitleg-regels { padding: 26px 0 6px; color: var(--meta); font-size: 13.5px; max-width: 640px; }
.uitleg-cta {
  margin-top: 30px; background: #EFEDE6; border: 1px solid var(--lijn); border-radius: 4px;
  padding: 26px 28px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center;
}
.uitleg-cta h2 { font-family: var(--serif); margin: 0 0 6px; font-size: 21px; }
.uitleg-cta p { margin: 0; color: var(--meta); font-size: 13px; }
.uitleg-cta form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }

/* ---------- spelerpagina / saga ---------- */
.saga-kop { padding-bottom: 4px; }
.saga-label { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--st-rond); font-weight: 700; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.saga-label-open { color: var(--meta); }
.saga-leeftijd { font-weight: 400; color: var(--meta); }
.saga-route { color: var(--meta); margin: 0; font-size: 14px; }
.saga-berichten { padding-top: 30px; }
.saga-berichten .sectie-kop { border-bottom: 2px solid var(--inkt); padding-bottom: 10px; }
.saga-tijdlijn { display: flex; flex-direction: column; }
.saga-stap { display: grid; grid-template-columns: 90px 1fr auto; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--lijn); align-items: start; }
.saga-stap-inhoud p { margin: 6px 0 0; font-size: 14px; }
.saga-bron { color: var(--meta); font-size: 12.5px; }
.saga-datum { font-size: 12px; color: var(--meta); white-space: nowrap; }
.feed-omvat .sectie-kop { margin-top: 26px; }

.deel-saga { padding: 10px 20px 50px; }
.deel-saga-binnen { display: grid; grid-template-columns: 380px 1fr; gap: 30px; align-items: start; border-top: 2px solid var(--inkt); padding-top: 22px; }
.deel-kaart { background: var(--papier); border: 1px solid var(--lijn); border-top: 3px solid var(--groen); border-radius: 4px; padding: 20px 22px; box-shadow: 0 1px 3px rgba(26,26,26,.05); }
.deel-kaart-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.wordmark-klein { font-size: 13px; gap: 6px; }
.deel-kaart-naam { font-family: var(--serif); font-size: 24px; font-weight: 700; }
.deel-kaart-route { color: var(--meta); font-size: 13px; margin: 4px 0 16px; }
.deel-kaart-onder { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--meta); margin-top: 16px; }
.deel-kaart-onder span:first-child { color: var(--oker); }
.deel-saga-uitleg p { color: var(--meta); font-size: 13.5px; margin: 0 0 16px; max-width: 420px; }
.deel-saga-knoppen { display: flex; flex-direction: column; gap: 10px; max-width: 240px; }
.deel-saga-knoppen .knop { text-align: center; }

/* ---------- proza (over, privacy) ---------- */
.proza { max-width: 720px; padding-bottom: 56px; font-size: 15px; }
.proza h2 { font-family: var(--serif); font-size: 24px; margin: 34px 0 14px; }
.proza a { color: var(--groen); }
.proza em { font-style: normal; color: var(--groen); font-weight: 600; }
.beloften { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0; }
.belofte { background: var(--wit); border: 1px solid var(--lijn); border-radius: 4px; padding: 16px 18px; }
.belofte h3 { font-family: var(--serif); font-size: 16px; margin: 0 0 8px; }
.belofte p { font-size: 13px; color: var(--meta); margin: 0 0 8px; }
.belofte-garantie { color: var(--inkt) !important; border-top: 1px solid var(--lijn); padding-top: 8px; }
.faq { border-bottom: 1px solid var(--lijn); padding: 12px 0; }
.faq summary { font-weight: 600; cursor: pointer; font-size: 15px; }
.faq p { color: var(--meta); margin: 10px 0 4px; }

/* ---------- responsief ---------- */
@media (max-width: 860px) {
  .cta-binnen, .uitleg-cta, .deel-saga-binnen { grid-template-columns: 1fr; }
  .footer-boven { grid-template-columns: 1fr; gap: 26px; }
  .uitleg-rij { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 700px) {
  .menu-knop { display: block; margin-left: 0; padding: 5px 9px; }
  .header-binnen { gap: 10px; }
  .header-knop { padding: 8px 12px; font-size: 12.5px; }
  .wordmark { font-size: 15px; white-space: nowrap; }

  /* Filters compact: labels weg (aria-labels op de controls), kleine
     bedieningselementen, maximaal twee lage rijen — snel naar het nieuws. */
  .pagina-kop { padding-top: 30px; }
  .filters { gap: 8px; padding: 10px 0 2px; }
  .filter { flex-direction: row; }
  .filter-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .filter-select, .status-range-samenvatting { min-width: 0; font-size: 12.5px; padding: 7px 9px; }
  .segmenten button { font-size: 12px; padding: 7px 10px; }
  /* De Inschrijven-knop blijft zichtbaar naast de hamburger (de aanmeldmachine). */
  .header-knop { margin-left: auto; }
  .hoofdnav {
    display: none; position: absolute; top: 64px; left: 0; right: 0; z-index: 40;
    background: var(--papier); border-bottom: 1px solid var(--lijn);
    flex-direction: column; align-items: flex-start; padding: 14px 20px; gap: 14px;
  }
  .site-header { position: relative; }
  .hoofdnav.open { display: flex; }
  .feed-rij { grid-template-columns: 1fr; }
  .rail { display: flex; align-items: center; gap: 10px; padding: 0 0 8px; }
  .rail::after { display: none; }
  .rail-dot { position: static; }
  .rail-tijd { text-align: left; display: flex; gap: 8px; }
  .footer-kolommen { grid-template-columns: 1fr 1fr; }
  .saga-stap { grid-template-columns: 74px 1fr; }
  .saga-datum { grid-column: 2; }
}