/* Funnelpagina's — product, koppelingen, pricing, proefversie, demo, visie.
   Patronen die op de home nog niet voorkwamen. Leest alleen tokens. */

/* --- hero met eyebrow ----------------------------------------------------- */

.phero { padding-block: var(--space-8) var(--space-6); }
/* Alleen de homepage-hero krijgt de gradient (huisstijl primair 100), diagonaal
   vanuit de rechterbovenhoek — achter het visual, weg van de tekst. */
.phero--home { background: linear-gradient(to bottom left, #d9ebfa 0%, #ffffff 55%, #ffffff 100%); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.phero--narrow .phero__grid { grid-template-columns: minmax(0, 1fr); max-width: 62ch; }
.phero .label { display: block; margin-bottom: var(--space-3); }
/* Lange samenstellingen breken alleen op de ­-punten die _sections.php ($shy) in de kop
   zet ("reserverings-systeem"). Geen hyphens: auto: dan kiest de browser zelf een lettergreep
   ("reserve-ringssysteem"). overflow-wrap is het vangnet voor woorden die niet in de lijst
   staan: die breken zonder streepje af i.p.v. de hero breder te duwen dan het scherm. */
.phero h1 { margin-bottom: var(--space-4); overflow-wrap: break-word; hyphens: manual; }
.phero__intro { font-size: var(--text-md); color: var(--c-ink); margin-bottom: var(--space-5); }
.phero__counter { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--c-ink-muted); }
/* Functiepagina's: de hero-regel "TODO: in welk pakket zit deze functie …" voorlopig niet tonen (Jacq, 03-10-2026;
   checklist fase 2). Alleen als de regel een TODO bevat; zodra er een echte waarde staat, verschijnt hij weer. */
.phero__counter:has(.todo) { display: none; }
/* Gecentreerde hero (rd_options "center"), naar de pricing-pagina van de wireframe: kop over
   de volle breedte, intro smal (640px) eronder, knoppen in het midden. Eén kolom, ook als er
   geen beeld is; zonder dit bleef de tweede kolom leeg en kreeg de kop maar de helft. */
.phero--center { text-align: center; }
.phero--center .phero__grid { grid-template-columns: minmax(0, 1fr); max-width: none; }
.phero--center .phero__intro { max-width: 40rem; margin-inline: auto; }
.phero--center :is(.cluster, .hero__ticks, .hero__badges) { justify-content: center; }
/* minmax(0, …) i.p.v. 1fr: een 1fr-kolom wordt minstens zo breed als het langste woord. */
@media (max-width: 860px) { .phero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }

/* Gelaagd hero-beeld: het rooster is het doek, de widget zweeft erboven. Beide beelden
   hebben hetzelfde canvas (1392×800) als de oude samengestelde afbeelding, dus de
   percentages hieronder zetten de widget op exact dezelfde plek. De schaduw komt uit
   drop-shadow (volgt de transparante ronde hoeken, box-shadow zou een rechthoek geven). */
/* Eén foto in de hero (bijv. /demo/): heel in beeld, afgeronde hoeken. De homepage-hero met
   zwevend beeld is .phero__stage en regelt zichzelf hieronder. :where() = specificiteit 0, zodat
   longtail.css (sectorhero's: vaste hoogte + cover) daar gewoon wint. */
:where(.phero__figure:not(.phero__stage)) { margin: 0; }
/* Extra alinea in de hero (o.a. /demo/, artikelen): ingetogen grijs. */
.phero__para { color: var(--c-ink-muted); margin-bottom: var(--space-4); }
:where(.phero__figure:not(.phero__stage)) img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
/* rd_options shadow (/demo/): subtiele schaduw onder de herofoto. */
.phero__figure--shadow img { box-shadow: 0 1px 3px rgb(15 35 60 / 0.06), 0 12px 28px rgb(15 35 60 / 0.10); }
.phero__stage { position: relative; margin: 0; }
.phero__stage img { display: block; width: 100%; height: auto; }
.phero__stage .phero__float {
  position: absolute;
  left: 66.5%; top: 3.8%; width: 22.3%;
  filter:
    drop-shadow(0 2px 4px rgb(15 35 60 / 0.10))
    drop-shadow(0 18px 36px rgb(15 35 60 / 0.22));
}

/* --- ankernavigatie (vervangt het submenu met acht items) ----------------- */

.anchor-nav {
  position: sticky; top: var(--header-h); z-index: 20;
  background: var(--c-surface);
  border-block: 1px solid var(--c-line);
}
.anchor-nav ul { display: flex; gap: var(--space-1); overflow-x: auto; padding-block: var(--space-2); }
.anchor-nav a {
  display: block; white-space: nowrap;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--c-ink); text-decoration: none;
}
.anchor-nav a:hover { background: var(--c-surface-2); color: var(--c-accent-ink); }
/* Anker-doelen moeten vrij blijven van de twee sticky balken. */
[id]:where(.anchor-target) { scroll-margin-top: 130px; }

/* --- badge boven een blokkop ---------------------------------------------- */

.block-badge {
  display: inline-block; margin-bottom: var(--space-2);
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: var(--c-accent-soft); color: var(--c-accent-ink);
  font-size: var(--text-xs); font-weight: var(--fw-medium);
}

/* --- koppelingen: logogrid per categorie ---------------------------------- */

.int-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: var(--space-3); }
.int-card {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4); text-decoration: none;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-md);
}
.int-card:hover { border-color: var(--c-accent); }
.int-card b { font-family: var(--font-display); color: var(--c-ink-strong); font-weight: var(--fw-medium); }
.int-card span { font-size: var(--text-xs); color: var(--c-ink-muted); }

.how-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5); background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
}
.how-card__level {
  align-self: flex-start;
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: var(--c-surface-2); color: var(--c-ink-muted);
  font-size: var(--text-xs); font-weight: var(--fw-medium);
}
.how-card p { font-size: var(--text-sm); color: var(--c-ink-muted); }

/* --- pricing: pakketkaarten ----------------------------------------------- */

.plan__flag {
  align-self: flex-start; margin-bottom: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: var(--c-accent); color: var(--c-accent-on);
  font-size: var(--text-xs); font-weight: var(--fw-medium);
}
.plan__points { display: flex; flex-direction: column; gap: var(--space-2); margin-block: var(--space-3); }
.plan__points li { font-size: var(--text-sm); color: var(--c-ink-muted); padding-left: 1.3em; position: relative; }
.plan__points li::before { content: "✓"; position: absolute; left: 0; color: var(--c-success); }
.plan .btn { margin-top: auto; }

.managed {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-top: var(--space-5);
  padding: var(--space-5); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); background: var(--c-surface-2);
}
.managed p { font-size: var(--text-sm); color: var(--c-ink-muted); }
/* /prijzen/: de Managed-balk hoort bij de pakketten erboven: dicht onder de kaarten, en de gewone sectieruimte
   eronder (Jacq, 04-10-2026). */
.section:has(+ .section--managed) { padding-bottom: 0; }
.section--managed { padding-bottom: var(--section-gap); }
.section--managed .managed { margin-top: var(--space-7); }   /* meer lucht tussen de pakketkaarten en de balk */
/* De vertrouwensregel eronder op brede schermen op één regel (geen 68ch-maat); smal breekt hij gewoon af. */
.section--managed .assurance { max-width: none; }
/* Tussen 640 en 1100px staan de pakketten 2 × 2 in een gecentreerd blok; het Managed-blok dan even breed. */
@media (min-width: 640px) and (max-width: 1099.98px) {
  .section--managed .managed { max-width: var(--plans-2-max); margin-inline: auto; }
}
.assurance { margin: var(--space-4) auto 0; font-size: var(--text-xs); color: var(--c-ink-muted); text-align: center; }   /* auto: p heeft max-width 68ch (base.css), anders staat het blok links */

/* --- pricing: vergelijkingstabel (Cal.com-model, sticky kop) -------------- */

.cmp-wrap { position: relative; /* anders ontsnappen de absolute .visually-hidden-spans aan de scroll en schuift de hele pagina op mobiel */ overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); }
table.cmp { border-collapse: collapse; width: 100%; min-width: 720px; font-size: var(--text-sm); }
table.cmp th, table.cmp td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--c-line-soft); }
table.cmp thead th {
  background: var(--c-surface-2); color: var(--c-ink-strong);
  font-family: var(--font-display); font-weight: var(--fw-semi);
  border-bottom: 1px solid var(--c-line);
}
table.cmp tbody th { font-weight: var(--fw-normal); color: var(--c-ink); }   /* rijkoppen: gewone tekst, geen vet */
table.cmp td:not(:first-child), table.cmp th:not(:first-child) { text-align: center; width: 15%; font-variant-numeric: tabular-nums; }
table.cmp tbody tr:last-child td { border-bottom: 0; }
/* Met cmp-picker.js past de tabel altijd (mobiel: één pakket), dus geen scrollkader nodig: clip i.p.v.
   auto. Pas dan plakt de kolomkop aan het scherm, net onder de header; binnen een scrollkader
   plakte hij aan dat kader en zakte hij --header-h ver de tabel in, over de eerste rijen. */
.cmp-wrap:has(> table.cmp[data-col]) { overflow: clip; }
table.cmp[data-col] { min-width: 0; }
table.cmp[data-col] thead tr:only-child th { position: sticky; top: var(--header-h); z-index: 10; }
/* Met de kaartenrij plakt die rij (wireframe); de gewone kopregel eronder scrolt mee. */
table.cmp[data-col] thead tr.cmp-plans > td { position: sticky; top: var(--header-h); z-index: 10; }
table.cmp .yes { color: var(--c-success); font-weight: var(--fw-bold); }
/* Compacte pakketkaarten boven de kopregel (wireframe Rins: "de plan-kaarten hierboven in compacte vorm, en
   die rij blijft sticky"): losse kaarten met afgeronde hoeken, naam, prijs en bestelknop; links het label
   "Pakket". Het uitgelichte pakket (Silver) krijgt de accentrand en de groene knop, net als de grote kaart. */
table.cmp tr.cmp-plans > td { padding: var(--space-3) var(--space-2) var(--space-2); background: var(--c-surface); border-bottom: 0; vertical-align: bottom; }
table.cmp tr.cmp-plans > .cmp-plans__label { padding-left: var(--space-4); font-family: var(--font-display); font-weight: var(--fw-semi); color: var(--c-ink-strong); }
/* Vast bovenin (is-vast, js/redesign/cmp-picker.js): de rij halftransparant wit met een lichte vervaging,
   zoals de pillenstrook op /koppelingen/; de kaarten zelf blijven dekkend (Jacq, 04-10-2026). */
table.cmp.is-vast tr.cmp-plans > td {
  background: color-mix(in srgb, var(--c-surface) 60%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.cmp-plan { padding: var(--space-3); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); text-align: left; }
.cmp-plan--hi { border: 2px solid var(--c-accent); }
.cmp-plan__name { display: block; font-family: var(--font-display); font-weight: var(--fw-semi); color: var(--c-ink-strong); }
.cmp-plan__price { display: block; margin: var(--space-1) 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-semi); color: var(--c-ink-strong); }
.cmp-plan__price small { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-normal); color: var(--c-ink-muted); }
.cmp-plan__btn { width: 100%; justify-content: center; padding: 0.45em 0.8em; font-size: var(--text-sm); }
table.cmp .no  { color: var(--c-ink-faint); }

/* Pakketkiezer (mobiel): functiekolom + één pakket, gekozen met cmp-picker.js. Boven 720px en
   zonder script blijft de kiezer weg en staat de volledige tabel er. */
.cmp-pick { display: none; }
@media (max-width: 720px) {
  .cmp-pick:not([hidden]) {
    display: flex; gap: var(--space-1); margin-bottom: var(--space-3); padding: var(--space-1);
    border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-surface-2);
  }
  .cmp-pick button {
    flex: 1; min-height: 40px; padding: 0 var(--space-2);
    border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer;
    font: inherit; font-family: var(--font-display); font-weight: var(--fw-semi); color: var(--c-ink);
  }
  .cmp-pick button[aria-pressed="true"] { background: var(--c-surface); color: var(--c-accent-ink); box-shadow: 0 1px 3px rgb(11 42 61 / .15); }
  .cmp-pick button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

  table.cmp[data-col] :is(th, td):not(:first-child) { display: none; width: 40%; }
  table.cmp[data-col="2"] :is(th, td):nth-child(2),
  table.cmp[data-col="3"] :is(th, td):nth-child(3),
  table.cmp[data-col="4"] :is(th, td):nth-child(4),
  table.cmp[data-col="5"] :is(th, td):nth-child(5),
  table.cmp[data-col="6"] :is(th, td):nth-child(6) { display: table-cell; }
}

/* --- modulegroepen -------------------------------------------------------- */

.mod-group + .mod-group { margin-top: var(--space-6); }
.mod-group h3 { margin-bottom: var(--space-3); }
.mod-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-3); }
.mod {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4); background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--radius-md);
}
.mod b { font-family: var(--font-display); color: var(--c-ink-strong); font-weight: var(--fw-medium); }
.mod span { font-size: var(--text-xs); color: var(--c-ink-muted); }
/* Met icoon (Tabler, _icons.php): groot blauw icoon links, naam en omschrijving samen ernaast, verticaal
   gecentreerd, zodat ook een omschrijving van één regel netjes bij de naam blijft (Jacq, 04-10-2026). */
.mod--ico { flex-direction: row; align-items: center; gap: var(--space-3); }
.mod--ico .ico { flex: none; width: 40px; height: 40px; stroke-width: 1.5; color: var(--c-accent); }
.mod__tekst { display: flex; flex-direction: column; gap: var(--space-1); }

/* --- FAQ ------------------------------------------------------------------ */

.faq { display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid var(--c-line-soft); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-4); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--c-ink-strong);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--c-accent); font-size: var(--text-lg); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding-bottom: var(--space-4); color: var(--c-ink-muted); font-size: var(--text-sm); }
/* boxed: elke vraag een los wit kader, smalle kolom in het midden — de vormgeving van de
   sectorpagina's (28-09-2026). Stond in longtail.css; hierheen zodat ook /prijzen/ (laadt geen
   longtail.css) hem krijgt. _sections.php zet de klasse op elke FAQ (Jacq, 03-10-2026). */
.faq--boxed { gap: var(--space-3); max-width: 46rem; margin-inline: auto; }
.faq--boxed details {
  border: 1px solid var(--c-line); border-radius: var(--radius-md);
  background: var(--c-surface); padding-inline: var(--space-4);
}

/* --- reviewkaarten -------------------------------------------------------- */

.review { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5);
          background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.review p { font-size: var(--text-sm); color: var(--c-ink-muted); }
/* Organisatie als subkop direct onder de naam (/prijzen/, Jacq, 30-09-2026). */
.review .review__org { margin-top: calc(-1 * var(--space-2)); font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--c-ink); }

/* --- proefversie: formulier ----------------------------------------------- */

.trial-form {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6); background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
}
.trial-form legend { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--c-ink-strong); margin-bottom: var(--space-3); }
.trial-form fieldset { border: 0; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center;
  padding: var(--space-2) var(--space-4); border: 1px solid var(--c-line);
  border-radius: var(--radius-pill); background: var(--c-surface);
  font-size: var(--text-sm); cursor: pointer;
}
.chip:hover { border-color: var(--c-accent); color: var(--c-accent-ink); }
/* De chip is een radio: het bolletje zelf is onzichtbaar, de pil is de knop. */
.chip__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip:has(.chip__input:checked) { border-color: var(--c-accent); color: var(--c-accent-ink); background: var(--c-accent-soft); }
.chip:has(.chip__input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-size: var(--text-xs); color: var(--c-ink-muted); }
.field input,
.field textarea,
.field select {
  padding: var(--space-3); border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-ink);
  font: inherit;
}
.field textarea { resize: vertical; min-height: 8rem; }

/* Landkeuze: een gewone <select>, want die opent op een telefoon het systeemwiel en werkt
   zonder JavaScript. Alleen het pijltje tekenen we zelf, zodat hij bij de andere velden
   past; daarom appearance:none plus ruimte rechts voor dat pijltje. */
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: calc(var(--space-3) * 2 + 0.5rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1.1rem 1.1rem;
  cursor: pointer;
}
.field select:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.form-small { font-size: var(--text-xs); color: var(--c-ink-muted); }
.form-alert { padding: var(--space-3) var(--space-4); border: 1px solid var(--c-warning);
              border-radius: var(--radius-sm); font-size: var(--text-sm); }
/* ALTCHA-widget: dezelfde randen en radius als de invoervelden eromheen. */
.field--captcha altcha-widget {
  --altcha-border-width: 1px;
  --altcha-border-color: var(--c-line);
  --altcha-border-radius: var(--radius-sm);
  --altcha-color-base: var(--c-surface);
  --altcha-color-text: var(--c-ink);
  --altcha-max-width: 100%;
}
/* Honeypot: uit beeld, niet focusbaar — alleen bots vullen 'm in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.trial-form--done h2 { margin-bottom: var(--space-3); }
.trial-form--done p { color: var(--c-ink-muted); }

/* --- liever meteen een moment prikken ------------------------------------- *
 * Staat onder het contactformulier: een vraag en twee knoppen die de
 * boekingswidget openen. Bewust rustiger dan de kaart erboven — het formulier
 * blijft de hoofdweg, dit is het alternatief voor wie liever een tijd kiest. */

.booking { margin-top: var(--space-6); text-align: center; }
.booking__q { margin-inline: auto; font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--c-ink-strong); }
.booking__actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-4); margin-top: var(--space-4);
}
.booking__action { display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
                   width: min(20rem, 100%); }
.booking__note { font-size: var(--text-xs); color: var(--c-ink-muted); }
/* Het paneel tekent zichzelf in een shadow root en staat vast in beeld; hier hoeft
   alleen te staan dat het element zelf geen ruimte in de tekst inneemt. */
ires-native-widget { display: block; }
ires-native-widget[hidden] { display: none; }

/* --- keuzehulp proefversie / demo ----------------------------------------- */

.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-5); }
.choice__card { display: flex; flex-direction: column; padding: var(--space-5); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
/* Knop onderin de kaart: bij ongelijke tekstlengte staan beide knoppen toch op één lijn. */
.choice__cta { margin-top: auto; padding-top: var(--space-3); }
.choice__card h3 { margin-bottom: var(--space-2); }
.choice__card p { font-size: var(--text-sm); color: var(--c-ink-muted); }
.choice__note { margin: var(--space-4) auto 0; font-size: var(--text-sm); color: var(--c-ink-muted); text-align: center; }

/* --- demo: afsprakenplanner ----------------------------------------------- */

.planner { padding: var(--space-6); background: var(--c-surface); border: 1px solid var(--c-line);
           border-radius: var(--radius-xl); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-4); }
.planner__title { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--c-ink-strong); }
.planner__days, .planner__slots { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.slot {
  padding: var(--space-2) var(--space-4); border: 1px solid var(--c-line);
  border-radius: var(--radius-md); font-size: var(--text-sm);
  font-variant-numeric: tabular-nums; background: var(--c-surface);
}
.slot--on { border-color: var(--c-accent); color: var(--c-accent-ink); background: var(--c-accent-soft); }
.planner__note { font-size: var(--text-xs); color: var(--c-ink-muted); }

/* --- visie: drie beeldkaarten --------------------------------------------- */

.vision-card { display: flex; flex-direction: column; gap: var(--space-3);
               background: var(--c-surface); border: 1px solid var(--c-line);
               border-radius: var(--radius-lg); overflow: hidden; }
.vision-card .shot { border: 0; border-radius: 0; min-height: 140px; }
/* Echte foto in plaats van de plaatshouder (homepage "Alles is boekbaar"): 3:2, bijgesneden. */
.vision-card__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* Knoppenrij onder een raster (cards, plans), gecentreerd; _sections.php $ctaRij. */
.cta-rij { justify-content: center; margin-top: var(--space-6); }
.vision-card__body { padding: 0 var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.vision-card p { font-size: var(--text-sm); color: var(--c-ink-muted); }

/* --- Keuzelijst in de huisstijl (select.js) --------------------------------
   De `<select>` blijft de waarde dragen maar wordt onzichtbaar; de knop en de lijst
   eronder zijn van ons. Zonder JavaScript gebeurt hier niets en blijft de gewone
   `<select>` staan — daarom hangt alles aan .sel, dat het script zelf toevoegt. */

.sel { position: relative; }
.sel .sel__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.sel__button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  width: 100%; padding: var(--space-3);
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-ink);
  font: inherit; text-align: left; cursor: pointer;
}
.sel__button::after {
  content: ""; flex: 0 0 auto; width: 1.1rem; height: 1.1rem;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  transition: transform .15s ease;
}
.sel__button[aria-expanded="true"]::after { transform: rotate(180deg); }
.sel__button:hover { border-color: var(--c-accent); }
.sel__button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.sel__button--empty .sel__value { color: var(--c-ink-faint); }
.sel__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sel__list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 17rem; overflow-y: auto; margin: 0; padding: var(--space-1);
  list-style: none;
  border: 1px solid var(--c-line); border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: 0 12px 28px rgb(11 42 61 / 12%);
}
.sel__option {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); cursor: pointer;
  display: flex; align-items: center; gap: var(--space-2);
}
.sel__option.is-actief { background: var(--c-surface-2); }
.sel__option[aria-selected="true"] { color: var(--c-accent-ink); font-weight: 500; }
.sel__option[aria-selected="true"].is-actief { background: var(--c-accent-soft); }
.sel__option--empty { color: var(--c-ink-faint); }

/* Contactformulier: robotcheck en verzendknop niet over de volle breedte, wel even breed als elkaar: samen in een
   kolom die zo breed is als de breedste van de twee (Jacq, 04-10-2026). */
.trial-form__verstuur { display: grid; gap: var(--space-4); width: max-content; max-width: 100%; }
.trial-form__verstuur .field--captcha altcha-widget { --altcha-max-width: 100%; }

/* Contact: formulier links, contactgegevens rechts (Jacq, 04-10-2026). Op smalle schermen eronder. */
.contact-grid { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); align-items: start; } }
.contact-info { display: grid; gap: var(--space-5); padding: var(--space-6); border: 1px solid var(--c-line); border-radius: var(--radius-xl); background: linear-gradient(to bottom, #d9ebfa, #ffffff); }
.contact-info h3 { font-size: var(--text-base); margin: 0 0 var(--space-2); }
.contact-info p { margin: 0; color: var(--c-ink); line-height: 1.6; }
.contact-info a { color: var(--c-accent-ink); }
.contact-info__gegevens { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--text-sm); color: var(--c-ink-muted); }
.contact-info__gegevens dt { font-weight: 500; color: var(--c-ink); }
.contact-info__gegevens dd { margin: 0; }

/* --- /visie/ volgens de wireframe van Rins (Jacq & Claude, 04-10-2026) ------------------------------- */
/* Hero met het beeld links (vlag beeldlinks). */
@media (min-width: 861px) { .phero--flip .phero__grid > :first-child { order: 2; } }
/* Sectiekop gesplitst (vlag kopsplit): titel links, intro rechts. */
@media (min-width: 861px) {
  .sec-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .sec-head--split h2 { margin: 0; }
}
/* Kolommen met een icoon in een rondje (cards, item-meta icon:<naam>). */
.principe__icoon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--space-3); border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-surface); color: var(--c-accent); }
.principe__icoon .ico { width: 24px; height: 24px; }
/* Quote als brede kaart (vlag kaart): beeld of klantlogo links, quote rechts. */
.quote-kaart { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-xl); background: var(--c-surface); }
.quote-kaart--zonder { grid-template-columns: minmax(0, 1fr); }
.quote-kaart__beeld { width: 100%; height: 100%; object-fit: cover; }
.quote-kaart__logo { display: flex; align-items: center; justify-content: center; padding: var(--space-7); background: linear-gradient(to bottom, #d9ebfa, #ffffff); }
.quote-kaart__logo img { max-width: 60%; max-height: 120px; }
.quote-kaart__tekst { margin: 0; padding: var(--space-7); border-left: 0; justify-content: center; }   /* geen accentlijn: de kaart is zelf het kader */
.quote-kaart__tekst blockquote { font-size: var(--text-lg); }
.quote-kaart__tekst figcaption { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-4); }
.quote-kaart__knop { margin: var(--space-4) 0 0; }
@media (max-width: 760px) { .quote-kaart { grid-template-columns: minmax(0, 1fr); } .quote-kaart__logo { padding: var(--space-6); } }
/* Updates als tijdlijn (changelog, vlag tijdlijn): links kop + lijst met een lijn ervoor, rechts intro + knop. */
.changelog-tijdlijn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.changelog-tijdlijn h2 { margin-bottom: var(--space-5); }
.changelog-tijdlijn .lead + p { margin-top: var(--space-4); }
.changelog--tijdlijn { border-left: 2px solid var(--c-line); }
.changelog--tijdlijn li, .changelog--tijdlijn li:last-child { border: 0; padding-block: var(--space-3); padding-left: var(--space-4); }
@media (max-width: 860px) { .changelog-tijdlijn { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }