/* ─────────────────────────────────────────────
   Universal GEO Components — base styles
   Werkt voor elk business-type. Gebruikt CSS custom properties
   zodat per project gemakkelijk te overschrijven via main.css.
   ───────────────────────────────────────────── */

:root {
  /* Gekoppeld aan de merk-tokens uit brand.css: de GEO-componenten
     staan zo automatisch in de huisstijl, zonder losse hex-waarden. */
  --geo-fg:           var(--ink, #232E1A);
  --geo-muted:        var(--muted, #6E7A61);
  --geo-bg:           var(--bg, #FFFDF7);
  --geo-bg-soft:      var(--bg-soft, #F2F0E4);
  --geo-border:       var(--line, #DDE3D3);
  --geo-accent:       var(--brand, #536E41);
  --geo-accent-soft:  var(--accent-soft, #FFF0BC);
  --geo-radius:       var(--radius-sm, 10px);
  --geo-radius-lg:    var(--radius-lg, 28px);
  --geo-gap:          1rem;
  --geo-gap-lg:       1.5rem;
  --geo-font-sm:      0.875rem;
  --geo-font-md:      1rem;
  --geo-font-lg:      1.125rem;
}

/* Common: hidden state respecteren (componenten verbergen zich bij lege data) */
[data-cms-component][hidden] { display: none !important; }

/* ─────────────── Quick Answer ───────────────
   De entity-definitie die AI-zoekmachines citeren. Staat er als gewone
   inleidende tekst, ZONDER gekleurd vlak: dat vroeg te veel aandacht en
   maakte van elke pagina een tweede kop. Dit gold al voor de homepage;
   nu overal hetzelfde. */
.quick-answer {
  margin: var(--geo-gap-lg) auto;
  padding: 0;
  background: none;
  max-width: var(--measure, 62ch);
}
.quick-answer__text {
  margin: 0;
  font-size: var(--geo-font-lg);
  line-height: 1.6;
  color: var(--body, var(--geo-fg));
}

/* ─────────────── FAQ ─────────────── */
.faq {
  margin: 3rem 0;
}
.faq__container {
  max-width: 56rem;
  margin: 0 auto;
}
.faq__title {
  font-size: 1.5rem;
  margin: 0 0 1.5rem 0;
  color: var(--geo-fg);
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq__item {
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-radius);
  background: var(--geo-bg);
  overflow: hidden;
}
/* Geen border-wissel bij openen: home.css doet dit met een vulling. */
.faq__question {
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: var(--geo-font-md);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
  color: var(--geo-fg);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--geo-muted);
  transition: transform 0.15s ease;
}
.faq__item[open] .faq__question::after {
  content: "−";
  transform: translateY(-50%) rotate(180deg);
}
.faq__answer {
  padding: 0 1.25rem 1rem 1.25rem;
  font-size: var(--geo-font-md);
  line-height: 1.6;
  color: var(--geo-muted);
}
.faq__answer p:first-child { margin-top: 0; }
.faq__answer p:last-child { margin-bottom: 0; }

/* ─────────────── Key Facts ─────────────── */
.key-facts {
  margin: var(--geo-gap-lg) 0;
}
.key-facts__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--geo-gap-lg);
  list-style: none;
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--geo-bg-soft);
  border-radius: var(--geo-radius);
}
.key-facts__item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.key-facts__label {
  font-size: var(--geo-font-sm);
  color: var(--geo-muted);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.key-facts__value {
  font-size: var(--geo-font-lg);
  font-weight: 600;
  color: var(--geo-fg);
}

/* ─────────────── Author Bio ─────────────── */
.author-bio {
  margin: 2.5rem 0;
  padding: 1.5rem;
  background: var(--geo-bg-soft);
  border-radius: var(--geo-radius-lg);
}
.author-bio__container {
  display: flex;
  gap: var(--geo-gap-lg);
  align-items: flex-start;
}
.author-bio__image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.author-bio__content {
  flex: 1;
  min-width: 0;
}
.author-bio__role {
  font-size: var(--geo-font-sm);
  color: var(--geo-muted);
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.author-bio__name {
  font-size: 1.25rem;
  margin: 0 0 0.25rem 0;
  color: var(--geo-fg);
}
.author-bio__job {
  font-size: var(--geo-font-sm);
  color: var(--geo-muted);
  margin: 0 0 0.75rem 0;
}
.author-bio__text {
  font-size: var(--geo-font-md);
  line-height: 1.55;
  color: var(--geo-fg);
  margin: 0 0 0.75rem 0;
}
.author-bio__links {
  display: flex;
  gap: var(--geo-gap);
  flex-wrap: wrap;
}
.author-bio__links a {
  font-size: var(--geo-font-sm);
  color: var(--geo-accent);
  text-decoration: none;
}
.author-bio__links a:hover {
  text-decoration: underline;
}

/* ─────────────── Comparison Table ─────────────── */
.comparison-table {
  margin: 2.5rem 0;
}
.comparison-table__container {
  max-width: 56rem;
  margin: 0 auto;
}
.comparison-table__title {
  font-size: 1.5rem;
  margin: 0 0 1rem 0;
  color: var(--geo-fg);
}
.comparison-table__wrap {
  overflow-x: auto;
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-radius);
}
.comparison-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--geo-font-md);
  background: var(--geo-bg);
}
.comparison-table__table th,
.comparison-table__table td {
  padding: 0.8rem 1rem;
  text-align: left;
}
/* Rijen worden gescheiden door om-en-om een vulling, niet door een lijn. */
.comparison-table__table tbody tr:nth-child(even) td,
.comparison-table__table tbody tr:nth-child(even) th {
  background: var(--geo-bg-soft);
}
.comparison-table__table thead th {
  background: var(--geo-bg-soft);
  font-weight: 600;
  color: var(--geo-fg);
}
.comparison-table__table tbody th {
  font-weight: 500;
  color: var(--geo-muted);
  background: var(--geo-bg-soft);
}


/* ─────────────── Breadcrumbs ─────────────── */
.breadcrumbs {
  margin: 0.75rem 0 var(--geo-gap) 0;
}
.breadcrumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: var(--geo-font-sm);
  color: var(--geo-muted);
}
.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.breadcrumbs__item:not(:last-child)::after {
  content: "/";
  color: var(--geo-border);
  margin-left: 0.375rem;
}
.breadcrumbs__link {
  color: var(--geo-muted);
  text-decoration: none;
}
.breadcrumbs__link:hover {
  color: var(--geo-accent);
  text-decoration: underline;
}
.breadcrumbs__item--current {
  color: var(--geo-fg);
  font-weight: 500;
}

/* ─────────────── Review Card ─────────────── */
.review-card {
  padding: 1.5rem;
  background: var(--geo-bg);
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.review-card__rating {
  color: #f59e0b;
  font-size: var(--geo-font-md);
  letter-spacing: 0.0625em;
}
.review-card__text {
  margin: 0;
  font-size: var(--geo-font-md);
  line-height: 1.55;
  color: var(--geo-fg);
  font-style: italic;
}
.review-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: var(--geo-font-sm);
  color: var(--geo-muted);
  align-items: baseline;
}
.review-card__author {
  font-style: normal;
  font-weight: 600;
  color: var(--geo-fg);
}
.review-card__location::before { content: "·"; margin-right: 0.5rem; }
.review-card__date::before { content: "·"; margin-right: 0.5rem; }

/* ─────────────── Responsive ─────────────── */
@media (max-width: 640px) {
  .author-bio__container {
    flex-direction: column;
    align-items: flex-start;
  }
  .key-facts__list {
    gap: var(--geo-gap);
  }
  .key-facts__item {
    flex: 1 1 calc(50% - var(--geo-gap));
  }
}

/* ─────────────────────────────────────────────
   CMS dynamische blokken (Fase 3) — door de klant/assistent toegevoegd
   via cms-sections.js. Gebruikt de merk-variabelen zodat ze meebewegen
   met de kleuren die de klant via de assistent instelt.
   ───────────────────────────────────────────── */
.cms-sections { display: flex; flex-direction: column; }
.cms-block {
  padding: clamp(2rem, 5vw, 3.5rem) 1.25rem;
}
.cms-block:nth-child(even) { background: var(--bg-soft, #f5f7fa); }
.cms-block > * { max-width: 68ch; margin-left: auto; margin-right: auto; }
.cms-block__heading {
  font-family: var(--font-head, sans-serif); color: var(--ink, #111827);
  font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; margin: 0 0 1rem;
}
.cms-block__body {
  color: var(--body, #374151); line-height: 1.7; margin: 0 0 1rem; font-size: 1.02rem;
}
.cms-block__body:last-child { margin-bottom: 0; }

/* FAQ-blok */
.cms-faq { display: flex; flex-direction: column; gap: 1rem; }
.cms-faq__item {
  border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius, 12px);
  padding: 1rem 1.2rem; background: var(--bg, #fff);
}
.cms-faq__q { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--ink, #111827); font-family: var(--font-head, sans-serif); }
.cms-faq__a { margin: 0; color: var(--body, #374151); line-height: 1.6; }

/* Feiten-strip */
.cms-facts { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; justify-content: center; }
.cms-facts__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cms-facts__value { font-family: var(--font-head, sans-serif); font-weight: 800; font-size: clamp(1.4rem, 3.5vw, 2rem); color: var(--brand, #2563eb); line-height: 1.1; }
.cms-facts__label { font-size: .9rem; color: var(--body, #374151); margin-top: .25rem; }

/* Citaat */
.cms-quote { margin: 0; }
.cms-quote__text {
  margin: 0; font-family: var(--font-head, sans-serif);
  font-size: clamp(1.2rem, 3vw, 1.6rem); line-height: 1.4; color: var(--ink, #111827);
  background: var(--bg-soft, #F2F0E4); border-radius: var(--radius-lg, 28px);
  padding: 1.4rem 1.6rem;
}
.cms-quote__author { margin-top: .8rem; color: var(--body, #374151); font-size: .95rem; }

/* ── Collecties (projecten / diensten) ──────────────────────────────────
   Gerenderd door cms-collections.js in <div data-cms-collection="...">.
   Bewust dezelfde tokens als de rest van de template, zodat een toegevoegd
   project meteen in de huisstijl van de klant staat. */
.cms-items {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.cms-item {
  display: flex; flex-direction: column;
  border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius, 12px);
  background: var(--bg, #fff); overflow: hidden;
}
.cms-item__media { margin: 0; }
.cms-item__img { display: block; width: 100%; height: 12rem; object-fit: cover; }
/* De body vult de rest van de kaart op. Zonder dit stopt hij bij de tekst, en
   dan hangt de knop van een kaart met een titel van twee regels achtentwintig
   pixels lager dan die van de buren. In een raster valt dat meteen op: de
   kaarten zijn even hoog, de knoppen niet. */
.cms-item__body {
  flex: 1 1 auto;
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem;
}
.cms-item__cat {
  align-self: flex-start; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand, #2563eb); font-weight: 600;
}
.cms-item__title {
  margin: 0; font-family: var(--font-head, sans-serif);
  font-size: 1.1rem; line-height: 1.3; color: var(--ink, #111827);
}
/* De titel is een link zodra het item er een heeft, maar hij hoort er niet
   uit te zien als een losse link in een alinea: hij is de kop van de kaart.
   Vandaar kleur en gewicht van de kop en pas onderstrepen bij hover. */
.cms-item__titellink {
  color: inherit; text-decoration: none;
  transition: color .18s ease;
}
.cms-item__titellink:hover,
.cms-item__titellink:focus-visible {
  color: var(--brand-dark, var(--brand, #2563eb));
  text-decoration: underline;
  text-underline-offset: .18em;
}
/* Het beeld is dezelfde link. display:block zodat er geen witruimte onder de
   afbeelding valt zoals bij een inline element. */
.cms-item__medialink { display: block; }
.cms-item__summary { margin: 0; color: var(--body, #374151); line-height: 1.6; font-size: .95rem; }
.cms-item__price { margin: 0; font-weight: 600; color: var(--ink, #111827); font-size: .95rem; }
.cms-item__date { margin: 0; color: var(--body, #374151); font-size: .85rem; }
/* En de knop zakt naar de onderkant. Zo staan ze op één lijn, hoe lang de
   titel erboven ook is. De marge erboven zorgt dat hij ook bij een korte tekst
   niet tegen de zin plakt. */
.cms-item__link {
  align-self: flex-start; margin-top: auto; padding-top: .35rem;
  color: var(--brand, #2563eb); font-weight: 600; font-size: .92rem;
}
/* Galerij: kleine strook onder de kaart, horizontaal scrollbaar op smal scherm. */
.cms-item__gallery {
  display: flex; gap: .4rem; padding: 0 1.2rem 1.1rem; overflow-x: auto;
}
.cms-item__thumb {
  flex: 0 0 auto; width: 4rem; height: 4rem; object-fit: cover;
  border-radius: calc(var(--radius, 12px) / 2); border: 1px solid var(--line, #e5e7eb);
}

/* ── Collectie-layouts: logos, agenda, personen ─────────────────────────
   Gerenderd door cms-collections.js. Deze regels zijn de neutrale basis; een
   pagina die er iets eigens van wil maken (zoals de sponsortegels op de
   homepage) zet er haar eigen regels overheen. Alles op merk-variabelen, zodat
   een toegevoegd item meteen in de huisstijl staat. */

/* Logos — een rij merken of partners. De container bepaalt het raster. */
.cms-logo {
  display: grid; place-items: center;
  padding: .6rem; overflow: hidden;
}
.cms-logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; min-width: 0; min-height: 0;
}

/* Agenda — datum links, de rest ernaast. Op smal scherm onder elkaar. */
/* Geen scheidingslijn onder elk item: eenzijdige borders bestaan niet in
   deze huisstijl (DESIGN-REGELS.md §5.1). De rijen worden gescheiden door
   ruimte en een zachte vulling, niet door een streep. */
.cms-agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.cms-agenda__item {
  display: flex; gap: 1rem; padding: .9rem 1.1rem;
  background: var(--bg-soft, #f2f0e4);
  border-radius: var(--radius, 18px);
}
.cms-agenda__datum {
  flex: 0 0 6.5rem;
  font-family: var(--font-head, sans-serif); font-weight: 600;
  color: var(--brand, #2563eb); font-size: 1.15rem;
  padding-top: .1rem; text-transform: lowercase;
}
.cms-agenda__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.cms-agenda__titel {
  margin: 0; font-family: var(--font-head, sans-serif); font-weight: 600;
  font-size: 1.3rem; line-height: 1.25; color: var(--ink, #111827);
}
.cms-agenda__uren, .cms-agenda__locatie {
  margin: 0; font-family: var(--font-head, sans-serif); font-weight: 600;
  font-size: 1.12rem; color: var(--muted, #6b7280);
}
/* Van wie is deze activiteit? Alleen zichtbaar in een agenda die meerdere
   takken door elkaar toont (de homepage). Op de pagina van één tak staat het
   al in de kop en zou het alleen maar herhalen. */
.cms-agenda__tak {
  align-self: flex-start;
  font-family: var(--font-display, sans-serif);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: .12rem .5rem; border-radius: 999px;
  color: var(--tak-kleur, var(--brand, #2563eb));
  background: color-mix(in srgb, var(--tak-kleur, var(--brand, #2563eb)) 15%, transparent);
}
.cms-agenda__tak.tak--kapoenen { color: var(--accent-dark, #8a6d00); }

.cms-agenda__tekst { margin: 0; color: var(--body, #374151); line-height: 1.6; font-size: 1.03rem; }

/* ── "Zet de activiteiten in je agenda" ──
   Eén knop onder de agenda die een venster opent waarin je zelf kiest
   welke activiteiten mee mogen. */
.agendaknop { display: flex; justify-content: center; margin-top: 1.5rem; }

.agendaknop__knop {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-head, sans-serif); font-weight: 600; font-size: 1rem;
  color: var(--brand-deep, #232e1a);
  background: var(--accent, #f8c200);
  border: 0; border-radius: var(--radius-pill, 999px);
  padding: .8rem 1.6rem; cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}

.agendaknop__knop::before {
  content: ''; width: 1.15rem; height: 1.15rem; flex: none;
  background: currentColor;
  -webkit-mask: var(--ico-agenda) center / contain no-repeat;
  mask: var(--ico-agenda) center / contain no-repeat;
}

.agendaknop__knop:hover { background: var(--accent-dark, #d9a800); transform: translateY(-2px); }

/* ── Het venster ── */
.agendavenster {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 1.2rem;
  background: rgba(22, 34, 14, .55);
}

.agendavenster__kaart {
  position: relative;
  width: min(100%, 34rem); max-height: min(90vh, 44rem);
  display: flex; flex-direction: column;
  background: var(--bg, #fffdf7);
  border-radius: var(--radius-lg, 28px);
  box-shadow: 0 24px 60px rgba(22, 34, 14, .35);
}

.agendavenster__kop { padding: 1.6rem 1.6rem .8rem; }

/* De twee agenda-knoppen onderaan, naast elkaar zolang er ruimte is. */
.agendavenster__abknoppen { display: flex; flex-wrap: wrap; gap: .6rem; }
.agendavenster__abknoppen .agendavenster__doen { flex: 1 1 12rem; }

/* Voor elke andere agenda: het bestand met wat je aanvinkte. Bewust een
   link en geen knop; het is de uitwijkmogelijkheid, niet de hoofdweg. */
.agendavenster__download {
  display: block; margin-top: .9rem; text-align: center;
  font-size: .88rem; color: var(--brand-dark, #3e5430); text-decoration: underline;
}

.agendavenster__download:hover { color: var(--brand-deep, #232e1a); }
.agendavenster__download[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.agendavenster__balk {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 1.6rem; background: var(--bg-soft, #f2f0e4);
}

.agendavenster__teller { font-size: .88rem; color: var(--muted, #6e7a61); }

.agendavenster__alles {
  background: none; border: 0; cursor: pointer; padding: .3rem .2rem;
  font-family: var(--font-head, sans-serif); font-weight: 600; font-size: .88rem;
  color: var(--brand-dark, #3e5430); text-decoration: underline;
}

.agendavenster__alles:hover { color: var(--brand-deep, #232e1a); }

.agendavenster__lijst {
  list-style: none; margin: 0; padding: .5rem .8rem;
  overflow-y: auto; flex: 1 1 auto;
}

.agendavenster__label {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .6rem .8rem; border-radius: var(--radius, 18px); cursor: pointer;
  transition: background-color .18s ease;
}

.agendavenster__label:hover { background: var(--accent-soft, #fff0bc); }

.agendavenster__vink { margin-top: .2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--brand, #536e41); flex: none; }

.agendavenster__tekst { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.agendavenster__wat {
  font-family: var(--font-head, sans-serif); font-weight: 600;
  font-size: 1rem; color: var(--ink, #232e1a);
}

.agendavenster__wanneer { font-size: .85rem; color: var(--muted, #6e7a61); }

.agendavenster__voet {
  display: flex; flex-direction: column; gap: .6rem;
  padding: 1rem 1.6rem 1.6rem;
}

.agendavenster__doen { justify-content: center; }
.agendavenster__doen[aria-disabled="true"] { opacity: .45; pointer-events: none; }


.agendavenster__sluit {
  position: absolute; top: .8rem; right: .9rem;
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  background: var(--bg-soft, #f2f0e4); border: 0; border-radius: 999px;
  font-size: 1.4rem; line-height: 1; color: var(--body, #414d36); cursor: pointer;
  transition: background-color .18s ease;
}

.agendavenster__sluit:hover { background: var(--accent-soft, #fff0bc); }

@media (max-width: 30rem) {
  .cms-agenda__item { flex-direction: column; gap: .35rem; }
  .cms-agenda__datum { flex: none; }
}

/* Personen — portret, naam, rol. Voor een leidingsploeg of een team. */
/* Flexbox, geen grid: een grid lijnt een niet-volle laatste rij links uit.
   Bij zes leiders in een rij van vijf blijft er dan eentje eenzaam links
   staan. Met flex-wrap + justify-content staat elke rij gecentreerd. */
.cms-personen {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem;
}
.cms-personen > .cms-persoon { flex: 0 0 9rem; }
@media (max-width: 420px) {
  .cms-personen > .cms-persoon { flex: 0 1 7.5rem; }
}
.cms-persoon { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; }
.cms-persoon__foto {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius, 12px); background: var(--bg-soft, #f5f7fa);
}
/* De totemnaam is het grootst. Dat is hoe de leiding bij de scouts heet en
   hoe de kinderen hen aanspreken; de voornaam staat er klein onder als
   verduidelijking voor de ouders. */
/* Nog geen pasfoto? Dan een vakje van dezelfde maat met het logo van de tak.

   Waarom niet gewoon niets: alle kaartjes in de lijst zijn even breed, dus wie
   geen foto had werd een kortere kolom en de namen kwamen los in het midden van
   de rij te hangen. Een vakje houdt het raster recht, en het maakt in één blik
   zichtbaar wie er nog een foto mist — dat is precies wat de leiding hier wil
   zien.

   LET OP het pad. Een relatieve url() in een custom property wordt opgelost
   vanuit het bestand waar de variabele GEBRUIKT wordt, niet waar hij staat.
   Daarom een eigen variabele (--geenfoto-logo) die hier ook gebruikt wordt:
   dan klopt ../../ vanuit assets/css/components/. Hergebruik van --tak-logo uit
   brand.css levert hier een pad op dat een map te hoog uitkomt. */
.cms-persoon__geenfoto {
  width: 100%; aspect-ratio: 1;
  border-radius: var(--radius, 12px);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tak-kleur, var(--brand, #2563eb)) 14%, var(--bg-soft, #f5f7fa));
  color: var(--tak-kleur, var(--brand, #2563eb));
}
/* Het logo als mask, zodat het de kleur van de tak aanneemt. */
.cms-persoon__geenfoto-logo {
  width: 52%; height: 52%;
  -webkit-mask: var(--geenfoto-logo) center / contain no-repeat;
  mask: var(--geenfoto-logo) center / contain no-repeat;
}
@supports (mask: url(#m)) or (-webkit-mask: url(#m)) {
  .cms-persoon__geenfoto-logo { background-color: currentColor; }
}

.cms-persoon__geenfoto.tak--kapoenen { --geenfoto-logo: url('../../images/static/takken/kapoenen.png'); }
.cms-persoon__geenfoto.tak--wouters { --geenfoto-logo: url('../../images/static/takken/wouters.png'); }
.cms-persoon__geenfoto.tak--woudlopers { --geenfoto-logo: url('../../images/static/takken/woudlopers.png'); }
.cms-persoon__geenfoto.tak--jonggivers { --geenfoto-logo: url('../../images/static/takken/jonggivers.png'); }
.cms-persoon__geenfoto.tak--givers { --geenfoto-logo: url('../../images/static/takken/givers.png'); }
.cms-persoon__geenfoto.tak--jins { --geenfoto-logo: url('../../images/static/takken/jins.png'); }
/* Groepsleiding heeft geen eigen logo: het groepslogo in het merkgroen. */
.cms-persoon__geenfoto:not([class*="tak--"]) { --geenfoto-logo: url('../../images/static/logo-scouts-beernem.png');
}

/* Kapoenengeel is op een lichte achtergrond nauwelijks te zien. */
.cms-persoon__geenfoto.tak--kapoenen { color: var(--accent-dark, #8a6d00); }

.cms-persoon__totem {
  font-family: var(--font-display, sans-serif); font-weight: 600;
  font-size: 1.02rem; line-height: 1.2;
  color: var(--ink, #111827);
}
.cms-persoon__naam {
  font-size: .98rem; line-height: 1.3; font-weight: 600;
  color: var(--body, #374151);
}
.cms-persoon__rol { font-size: .85rem; color: var(--muted, #6b7280); text-transform: capitalize; }
.cms-persoon__bio { margin: 0; font-size: .98rem; color: var(--body, #374151); line-height: 1.55; }
/* Het gsm-nummer als knop, niet als regeltje.
   Eén definitie voor de hele site: op de leidingpagina staat hij onder de naam
   in de kolom van de kaart, op de contactpagina naast de foto. Die twee
   verschillen alleen in waar ze staan, niet in hoe ze eruitzien, dus staat het
   uiterlijk hier en de plaatsing in contact.css.

   Een eigen achtergrond én een randje: de kaart staat op de ene pagina op een
   gekleurd vlak en op de andere op de paginakleur, en een knop hoort op allebei
   herkenbaar te zijn. Minstens 2.4rem hoog, want dit is een tel:-link en tikken
   belt. */
.cms-persoon__tel {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: .15rem;
  min-height: 2.4rem;
  padding: .4rem .85rem;
  background: var(--bg-soft, #f5f7fa);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: var(--radius-pill, 999px);
  color: var(--brand-dark, #2563eb);
  font-family: var(--font-display, inherit);
  font-size: .9rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.cms-persoon__tel:hover,
.cms-persoon__tel:active {
  background: var(--accent-soft, #eef2ff);
  color: var(--brand-deep, #1e3a8a);
}

/* Kop boven een groep, bij data-cms-groepeer (bv. de leiding per tak). */
.cms-groep__kop {
  margin: 1.5rem 0 .75rem;
  font-family: var(--font-head, sans-serif); font-size: 1.15rem;
  color: var(--ink, #111827);
}

/* ── Documentenlijst (collectie "downloads", layout "documenten") ──────
   Geen miniatuur: van een pdf zegt een beeldje niets, de naam wel. Elk
   document is een rij met de naam, waar het over gaat en een knop. */
.cms-documenten {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .75rem;
}
.cms-document {
  display: grid; gap: .25rem;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: var(--bg, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  padding: 1rem 1.15rem;
}
.cms-document__naam {
  grid-column: 1; font-family: var(--font-head, sans-serif);
  font-weight: 700; color: var(--ink, #111827); text-decoration: none;
}
a.cms-document__naam:hover { color: var(--brand, #2563eb); text-decoration: underline; }
.cms-document__uitleg { grid-column: 1; margin: 0; color: var(--muted, #6b7280); }
.cms-document__datum { grid-column: 1; font-size: .85rem; color: var(--muted, #6b7280); }
/* De knop staat rechts naast de tekst en overspant de rijen die er zijn. */
.cms-document__knop { grid-column: 2; grid-row: 1 / -1; justify-self: end; }

@media (max-width: 40rem) {
  .cms-document { grid-template-columns: 1fr; }
  .cms-document__knop { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .5rem; }
}