/* ===========================================================================
 * KEYROL — design-v2
 * Overlay-laag bovenop style.css. Laadt NA style.css en overschrijft alleen
 * layout, typografie-maten, icoonbehandeling en achtergrondverlopen.
 * style.css blijft ongewijzigd, zodat teruggaan altijd kan door deze regel
 * uit de <head> te halen (of tools/apply-design.py --revert te draaien).
 *
 * Referentiemodel: datasidekick.nl — dieptewerking, tinted icon-tegels,
 * strakkere typografische ritmiek. Uitgevoerd in KEYROL-kleuren en met de
 * bestaande fonts (Poppins koppen, Roboto body). Er worden geen nieuwe
 * fontbestanden geladen.
 *
 * Let op: Poppins is zelf-gehost in 600 en 700. Waar het referentiemodel 800
 * gebruikt, halen we hetzelfde optische gewicht met 700 + negatieve
 * letterafstand. Geen extra webfontverzoek dus.
 * ========================================================================= */

:root {
  /* Navy-diepte: donkerder en lichter dan het merkblauw, uitsluitend als
     verloop-eindpunt. Het merkblauw zelf (#304a5e) blijft de vlakke kleur. */
  --navy-deep: #1e2f3c;
  --navy: #304a5e;
  --navy-soft: #3b5a70;

  --pistachio: #9ebfbd;
  --pistachio-tint: rgba(158, 191, 189, 0.16);
  --pistachio-edge: rgba(158, 191, 189, 0.42);

  --line: #e3e8ea;
  --line-soft: #edf1f2;
  --surface-soft: #f6f8f9;
  /* 5,5:1 op wit. Het lichtere grijs van het referentiemodel haalt met 13px
     tekst de WCAG-norm niet; dit is de donkerste variant die nog wegvalt
     tegen de kop eronder. */
  --ink-muted: #5a6b76;

  --r-card: 14px;
  --r-tile: 12px;
  --r-btn: 8px;

  --sh-1: 0 1px 2px rgba(30, 47, 60, 0.06);
  --sh-2: 0 10px 28px -14px rgba(30, 47, 60, 0.34);

  /* Verlopen op een plek, zodat ze overal identiek zijn. */
  --grad-hero: linear-gradient(160deg, #1e2f3c 0%, #304a5e 58%, #3b5a70 100%);
  --grad-accent: linear-gradient(90deg, #304a5e 0%, #9ebfbd 100%);
  --grad-light: linear-gradient(180deg, #f6f8f9 0%, #eef1f2 100%);
  --grad-white: linear-gradient(180deg, #ffffff 0%, #fbfcfc 100%);
  /* Twee extra lichte vlakken, zodat opeenvolgende hoofdstukken elk hun eigen
     achtergrond hebben zonder dat er donkere blokken aan te pas komen. De
     tinten liggen ver genoeg uit elkaar om de sectiegrens te laten zien en
     dicht genoeg bij elkaar om niet als kleurvlak te gaan schreeuwen. */
  --grad-tint-grey: linear-gradient(180deg, #f8fafa 0%, #f0f4f4 100%);
  --grad-tint-pistachio: linear-gradient(180deg, #eef5f3 0%, #e6efec 100%);
}

/* ---------------------------------------------------------------------------
 * Typografie — maatvoering van het referentiemodel, fonts van KEYROL
 * ------------------------------------------------------------------------- */
body {
  font-size: 17px;
  line-height: 1.6;
}

h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

.hero__title,
.hero--page .hero__title {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.section__title {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 0.75rem;
}

/* Eyebrow: kleiner, zwaarder, wijdere spatiëring — daardoor leest de kop
   eronder als het startpunt van de sectie in plaats van als tweede regel. */
.section-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 0.9rem;
}
.section-label::before {
  width: 1.5rem;
  background: var(--pistachio);
  height: 2px;
}
.section--navy .section-label {
  color: rgba(255, 255, 255, 0.72);
}

/* De kop staat nu dichter op het label; de introzin krijgt de ruimte terug. */
.section__title + .prose-cap,
.section-head--center .section__title + p {
  margin-top: 1rem;
}

.tile__title {
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.tile__text {
  font-size: 15px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * Knoppen
 * ------------------------------------------------------------------------- */
.btn {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--r-btn);
  padding: 13px 22px;
}
.btn-primary {
  box-shadow: 0 8px 20px -10px rgba(224, 31, 61, 0.65);
}
.btn-primary:hover {
  box-shadow: 0 10px 22px -10px rgba(224, 31, 61, 0.75);
}
.text-link {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Accentbalk — navy naar pistache
 * Niet bovenaan het scherm: daar zit de pistache topbar, waar een pistache
 * verloop tegen wegvalt. De balk hangt onder de header zodra die dichtloopt.
 * Zo markeert hij precies wat hij moet markeren: de rand tussen navigatie en
 * inhoud, tegen een navy vlak waarop het verloop wel leest.
 * ------------------------------------------------------------------------- */
.site-header.is-solid::after {
  content: "";
  position: absolute;
  inset: auto 0 -3px 0;
  height: 3px;
  background: var(--grad-accent);
  pointer-events: none;
}
/* De topbar krijgt dezelfde lijn aan de onderkant, zodat het motief ook
   bovenaan de pagina terugkomt zolang de melding open staat. */
.topbar {
  border-bottom: 3px solid transparent;
  border-image: var(--grad-accent) 1;
}

/* ---------------------------------------------------------------------------
 * Hero — verloop in plaats van vlak blauw
 * De bestaande plattegrond-SVG blijft eroverheen liggen; die tekent zich nu
 * af tegen een donkerder linkerbovenhoek, wat de kop losmaakt van de rand.
 * ------------------------------------------------------------------------- */
.hero,
.hero--page {
  background: var(--grad-hero);
}
/* Zachte lichtplek achter de kop, zodat het midden optilt zonder banding. */
.hero::after,
.hero--page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 55% at 50% 38%, rgba(158, 191, 189, 0.16) 0%, rgba(158, 191, 189, 0) 70%);
  pointer-events: none;
  z-index: 1;
}
.hero__content {
  z-index: 10;
}

/* ---------------------------------------------------------------------------
 * Secties — vlakke vlakken worden zachte verlopen
 * ------------------------------------------------------------------------- */
.section--white {
  background: var(--grad-white);
}
.section--grey {
  background: var(--grad-light);
}
/* Twee hoofdstukken achter elkaar op wit lazen als één blok. Een sectie die
   direct op een andere witte sectie volgt, krijgt daarom een lichte tint.
   Let op: dit werkt voor paren. Bij drie of meer witte secties op rij moet je
   de derde met de hand een klasse geven, anders lopen tint en wit uit de pas. */
.section--white + .section--white {
  background: var(--grad-tint-grey);
}

/* Navy keert na de hero niet meer terug: te donker, en het hakte de pagina in
   stukken. De secties blijven wel herkenbaar als apart hoofdstuk, nu in een
   lichte pistache-tint met navy koppen. Hero en footer blijven navy. */
.section--navy {
  background: var(--grad-tint-pistachio);
  color: var(--keyrol-text);
}
.section--navy h2,
.section--navy h3,
.section--navy h4,
.section--navy .section__title,
.section--navy .stat__number {
  color: var(--keyrol-blue);
}
.section--navy p,
.section--navy li,
.section--navy .regisseur__lead,
.section--navy .stat__label {
  color: var(--keyrol-text);
}
.section--navy .section-label {
  color: var(--ink-muted);
}
.section--navy .section-label::before {
  background: var(--pistachio);
}
.section--navy figcaption,
.section--navy .platform-figure figcaption,
.section--navy .bewijs-figure figcaption {
  color: var(--ink-muted);
}
/* Het plattegrondmotief is getekend in witte lijnen. Omkeren maakt er donkere
   lijnen van, die op de lichte tint dezelfde functie houden. */
.section--navy::before {
  filter: invert(1);
  opacity: 0.55;
}
/* Een lichte knop op een lichte ondergrond leest niet; op de overgebleven
   navy-secties elders in de site wordt dat de donkere variant. */
.section--navy .btn-secondary-light {
  color: var(--keyrol-blue);
  border-color: var(--keyrol-blue);
}
.section--navy .btn-secondary-light:hover {
  background: rgba(48, 74, 94, 0.06);
}

/* Volle pistache was het laatste grote kleurvlak. Zelfde lichte tint, tekst
   terug naar het gewone grijs (6,6:1) in plaats van blauw op volle sterkte. */
.section--pistachio {
  background: var(--grad-tint-pistachio);
}
.section--pistachio p,
.section--pistachio li,
.section--pistachio figcaption,
.section--pistachio .prose-cap {
  color: var(--keyrol-text);
}
.section--pistachio .section-label {
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------------------
 * Icoonsysteem — tegel van 44px, pistache-tint, navy icoon
 * Geldt voor alle drie de bestaande icoonhouders, zodat de behandeling overal
 * gelijk is. De SVG's zelf blijven staan; alleen maat, lijndikte en kleur
 * worden hier centraal gezet.
 * ------------------------------------------------------------------------- */
.tile__icon,
.sector-card__icon,
.step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--r-tile);
  background: var(--pistachio-tint);
  box-shadow: inset 0 0 0 1px var(--pistachio-edge);
  color: var(--navy);
  transition: background-color 0.18s, box-shadow 0.18s;
}
.tile__icon svg,
.sector-card__icon svg,
.step__icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}

/* Op de pistache-tint zou de tegel wegvallen tegen zijn eigen achtergrond;
   daar een halve tint sterker plus witte kern, zodat de tegel blijft staan. */
.section--navy .tile__icon,
.section--navy .sector-card__icon,
.section--navy .step__icon,
.section--pistachio .tile__icon,
.section--pistachio .sector-card__icon,
.section--pistachio .step__icon {
  background: var(--keyrol-white);
  box-shadow: inset 0 0 0 1px rgba(158, 191, 189, 0.55);
  color: var(--navy);
}

/* Tegel reageert mee als de kaart eromheen hover krijgt. */
.tile:hover .tile__icon,
.sector-card:hover .sector-card__icon {
  background: rgba(158, 191, 189, 0.28);
  box-shadow: inset 0 0 0 1px rgba(158, 191, 189, 0.6);
}

/* ---------------------------------------------------------------------------
 * Kaarten
 * ------------------------------------------------------------------------- */
.tile {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  padding: 1.75rem 1.5rem;
}
.tile:hover {
  transform: translateY(-3px);
  border-color: var(--pistachio-edge);
  box-shadow: var(--sh-2);
}
.tile__icon {
  margin-bottom: 1.15rem;
}

.sector-card {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  padding: 1.1rem 1.25rem;
  gap: 1rem;
}
.sector-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}
.sector-card__name {
  font-weight: 600;
  font-size: 1.02rem;
}
.sector-card__meta {
  color: var(--ink-muted);
}

/* "Waarom KEYROL": kolommen zonder kaart, maar met de nieuwe tegel. De harde
   navy bovenrand wordt een hairline met accent — minder streepjescode. */
.why-grid .tile {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 1.75rem 0 0;
  position: relative;
}
.why-grid .tile::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--grad-accent);
}
.why-grid .tile:hover {
  transform: none;
  box-shadow: none;
}
.why-grid .tile__icon {
  margin-bottom: 1.15rem;
}

/* ---------------------------------------------------------------------------
 * Stappen (werkwijze)
 * ------------------------------------------------------------------------- */
.step__number {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--pistachio);
}
.step__line {
  background: var(--line);
}

/* ---------------------------------------------------------------------------
 * Header — dekt af zodra er gescrold is, met hairline in plaats van rand
 * ------------------------------------------------------------------------- */
.site-header.is-solid {
  box-shadow: 0 1px 0 rgba(48, 74, 94, 0.1), 0 6px 20px -14px rgba(30, 47, 60, 0.4);
}

/* ---------------------------------------------------------------------------
 * Toegankelijkheid: wie beweging uitzet, krijgt geen liftende kaarten.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tile:hover,
  .sector-card:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * Documenttabellen — /documenten/ en de specificatieblokken op de
 * systeempagina's. Smalle schermen scrollen de tabel binnen zijn eigen kader,
 * zodat de pagina zelf nooit horizontaal meebeweegt.
 * ------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 2rem 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--sh-1);
}

.doc-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.55;
}

.doc-table th,
.doc-table td {
  padding: 0.9rem 1.15rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}

.doc-table thead th {
  background: var(--surface-soft);
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
}

.doc-table tbody th {
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

.doc-table tbody tr:last-child th,
.doc-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Teksttabellen (privacyverklaring, /noor/): de rijkop is een zin en geen korte
   specificatie. Die mag afbreken en krijgt een vaste breedte, zodat de tabel binnen
   de tekstkolom past en niet horizontaal scrolt. */
.doc-table.doc-table--tekst {
  min-width: 0;
  table-layout: fixed;
}

.doc-table--tekst tbody th {
  white-space: normal;
}

/* Bij table-layout: fixed bepaalt de eerste rij de kolombreedtes. */
.doc-table--tekst thead th:first-child {
  width: 36%;
}

.doc-table--tekst.doc-table--drie thead th:last-child {
  width: 28%;
}

/* Smal scherm: elke rij wordt een blok, de kolomkop staat als label voor de cel
   (data-label). Drie smalle kolommen braken woorden midden door. */
@media (max-width: 40rem) {
  .doc-table--tekst thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .doc-table--tekst,
  .doc-table--tekst tbody,
  .doc-table--tekst tr,
  .doc-table--tekst th,
  .doc-table--tekst td {
    display: block;
    width: auto;
  }

  .doc-table--tekst tr {
    padding: 0.85rem 0.95rem;
    border-bottom: 1px solid var(--line-soft);
  }

  .doc-table--tekst tbody tr:last-child {
    border-bottom: 0;
  }

  .doc-table.doc-table--tekst th,
  .doc-table.doc-table--tekst td {
    padding: 0;
    border-bottom: 0;
  }

  .doc-table--tekst td {
    margin-top: 0.35rem;
  }

  .doc-table--tekst td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--navy);
  }
}

@media (max-width: 40rem) {
  .doc-table {
    min-width: 24rem;
    font-size: 0.9rem;
  }

  .doc-table th,
  .doc-table td {
    padding: 0.75rem 0.9rem;
  }

  .doc-table tbody th {
    white-space: normal;
  }
}

/* Cilindervergelijking op /systemen/vergelijken/. De tabel staat op
   table-layout: fixed met vijf kolommen, zodat hij boven 60rem gelijk loopt met
   de vier kaarten erboven (zie de style in de pagina). Daaronder knepen die vijf
   kolommen zich in ruim 500 px en schoven de prijzen en balkjes over elkaar.
   - Onder 71,2rem (1139 px) is de tabel smaller dan zijn volle 1090 px. Daar mag
     het balkje onder het bedrag en mag een rijlabel afbreken. De kolombreedtes
     blijven gelijk, dus de uitlijning met de kaarten ook. Vanaf 1140 px blijft
     alles zoals het was.
   - Onder 60rem, waar de kaarten toch niet meer uitlijnen, krijgt de tabel een
     minimale breedte: dan scrolt het kader en blijven de kolommen leesbaar. */
@media (max-width: 71.2rem) {
  .cil-tabel .cil-balk {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  .doc-table.cil-tabel tbody th {
    white-space: normal;
  }
}

@media (max-width: 60rem) {
  .doc-table.cil-tabel {
    min-width: 42rem;
  }
}

/* ---------------------------------------------------------------------------
 * Interactieve mini-plattegrond op /platform/dooratlas/
 * ------------------------------------------------------------------------- */
.atlas-demo {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  margin-top: 2rem;
}

@media (max-width: 52rem) {
  .atlas-demo {
    grid-template-columns: 1fr;
  }
}

.atlas-demo__plan {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #fff;
  padding: 1rem;
  box-shadow: var(--sh-1);
}

.atlas-demo__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* De deuren zijn SVG-cirkels met role="button" en tabindex, niet echte
   <button>-elementen: die mogen niet direct in een <svg> staan. */
.atlas-door {
  cursor: pointer;
  fill: #9ebfbd;
  stroke: #fff;
  stroke-width: 3;
  transition: r 0.15s ease, fill 0.15s ease, stroke 0.15s ease;
}

.atlas-door--let {
  fill: #c2703f;
}

.atlas-door:hover,
.atlas-door.is-actief {
  r: 14;
}

/* Chromium tekent op een SVG-vorm een rechthoekige focusring; die halen we weg
   en vervangen hem door een dikkere rand, zodat de focus wel zichtbaar blijft. */
.atlas-door:focus {
  outline: none;
}

.atlas-door:focus-visible {
  stroke: var(--navy);
  stroke-width: 4;
}

.atlas-door.is-actief {
  stroke: var(--navy);
}

.atlas-demo__legend {
  display: flex;
  gap: 1.25rem;
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.atlas-legend::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-right: 0.4rem;
}

.atlas-legend--ok::before {
  background: #9ebfbd;
}

.atlas-legend--let::before {
  background: #c2703f;
}

.atlas-demo__panel {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-soft);
  padding: 1.5rem;
  min-height: 14rem;
  box-shadow: var(--sh-1);
}

.atlas-demo__leeg {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.atlas-kaart__status {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.atlas-kaart__status--ok {
  background: var(--pistachio-tint);
  color: #2f5a56;
}

.atlas-kaart__status--let {
  background: rgba(194, 112, 63, 0.14);
  color: #8f4f26;
}

.atlas-kaart__titel {
  margin: 0 0 0.9rem;
  font-size: 1.15rem;
}

.atlas-kaart__lijst {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.9rem;
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
}

.atlas-kaart__lijst dt {
  color: var(--ink-muted);
}

.atlas-kaart__lijst dd {
  margin: 0;
}

.atlas-kaart__kop {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.atlas-kaart__groepen {
  margin: 0 0 1.1rem;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

.atlas-kaart__notitie {
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-muted);
}

/* Specificatieregels die nog geverifieerd moeten worden, zichtbaar gemarkeerd
   zodat ze niet ongemerkt live gaan. */
.spec-open {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(194, 112, 63, 0.14);
  color: #8f4f26;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Kruimelpad (breadcrumb) - staat direct onder de hero, boven de eerste sectie.
   Geeft Google de hierarchie en de bezoeker de weg terug naar het overzicht.
--------------------------------------------------------------------------- */
.breadcrumb {
  background: #ffffff;
  padding: 14px 0 0;
  font-family: var(--font-body, sans-serif);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-muted, #5a6b76);
}
.breadcrumb__list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.breadcrumb__list li + li::before {
  content: "/";
  color: var(--line, #e3e8ea);
}
.breadcrumb__list a {
  color: var(--ink-muted, #5a6b76);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.breadcrumb__list a:hover,
.breadcrumb__list a:focus-visible {
  color: var(--navy, #304a5e);
  border-bottom-color: var(--pistachio, #9ebfbd);
}
.breadcrumb__list [aria-current="page"] {
  color: var(--navy, #304a5e);
  font-weight: 500;
}
@media (max-width: 480px) {
  .breadcrumb { font-size: 0.75rem; padding-top: 10px; }
}

/* Overzichtslink bovenaan een uitklapmenu */
.nav-dropdown__all {
  font-weight: 600;
}
.nav-dropdown__list li:has(> .nav-dropdown__all) {
  border-bottom: 1px solid var(--line-soft, #edf1f2);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

/* .step--intro is bewust verwijderd: de Toegangsscan is een lead magnet, geen
   processtap in "Zo werken we". Niet opnieuw introduceren. */
.step__meta {
  display: block;
  font-family: var(--font-body, sans-serif);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-muted, #5a6b76);
  margin-top: 2px;
}

/* De eerste sectie na een kruimelpad hoeft niet nog eens de volle bovenmarge */
.breadcrumb + .section {
  padding-top: 32px;
}

/* Twee alinea's onder elkaar in dezelfde sectie hadden geen tussenruimte */
.prose-cap + .prose-cap {
  margin-top: 1rem;
}

/* ---------------------------------------------------------------------------
 * Klantquote-carrousel op de homepage.
 *
 * Zonder JavaScript (geen .is-actief op de wrapper) staan alle quotes gewoon
 * onder elkaar en is de navigatie verborgen. Pas als het script draait wordt
 * het een carrousel met één quote tegelijk.
 * ------------------------------------------------------------------------- */
.quote-carousel {
  margin-top: 2.5rem;
}

.quote-carousel__track,
.quote-carousel .quote-carousel__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.quote-carousel__nav {
  display: none;
}

.quote-slide__inner {
  margin: 0;
  display: grid;
  gap: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-2);
  overflow: hidden;
}

/* Het beeld nam met 5 van de 12 kolommen bijna de halve kaart. De quote is
   waar het om gaat, dus het beeld is teruggebracht tot ruim een kwart. */
@media (min-width: 48rem) {
  .quote-slide__inner {
    grid-template-columns: minmax(0, 3.5fr) minmax(0, 8.5fr);
    align-items: stretch;
  }
}

.quote-slide__media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

/* Het beeld vulde eerst de hele kaarthoogte en werd daardoor uit zijn 16:9
   gesneden: bij Vivare viel het logo half weg. Nu staat het op ware verhouding
   in het midden van zijn kolom, met lucht eromheen. */
@media (min-width: 48rem) {
  .quote-slide__media {
    aspect-ratio: 16 / 9;
    align-self: center;
    margin: clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: 8px;
  }
}

.quote-slide__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* De tekstkolom is verticaal gecentreerd. Daardoor zit de naam altijd direct
   onder de quote in plaats van weggedrukt naar de onderrand van de kaart. */
.quote-slide__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.quote-slide__text {
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--navy);
}

.quote-slide__text::before {
  content: "\201C";
  display: block;
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 0.5;
  margin-bottom: 0.75rem;
  color: var(--pistachio);
}

.quote-slide__author {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-style: normal;
}

.quote-slide__naam {
  display: block;
  font-weight: 600;
  color: var(--navy);
  font-size: 0.95rem;
}

.quote-slide__rol {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-muted);
  font-size: 0.88rem;
}

/* --- Vanaf hier: alleen als het script draait ---------------------------- */
.quote-carousel.is-actief .quote-carousel__viewport {
  position: relative;
}

/* Elke slide krijgt zijn eigen hoogte, zodat er geen leeg vlak onder een korte
   quote ontstaat. Het script animeert de hoogte van de viewport mee, waardoor
   de pagina niet hard verspringt bij het doorbladeren. */
.quote-carousel.is-actief .quote-carousel__viewport {
  overflow: hidden;
  transition: height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .quote-carousel.is-actief .quote-carousel__viewport {
    transition: none;
  }
}

.quote-carousel.is-actief .quote-carousel__track {
  display: block;
  gap: 0;
}

.quote-carousel.is-actief .quote-slide {
  display: none;
}

.quote-carousel.is-actief .quote-slide.is-actief {
  display: block;
  animation: quote-in 0.4s ease both;
}

@keyframes quote-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote-carousel.is-actief .quote-slide.is-actief {
    animation: none;
  }
}

.quote-carousel.is-actief .quote-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.quote-carousel__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.quote-carousel__knop:hover {
  background: var(--surface-soft);
  border-color: var(--navy);
}

.quote-carousel__knop:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.quote-carousel__stippen {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quote-carousel__stip {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(48, 74, 94, 0.25);
  cursor: pointer;
  transition: background 0.15s ease, width 0.15s ease;
}

.quote-carousel__stip.is-actief {
  width: 1.5rem;
  border-radius: 999px;
  background: var(--navy);
}

.quote-carousel__stip:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.quote-carousel__voet {
  margin-top: 1.75rem;
}

/* Certificaatnummer onder de documentnaam */
.spec-sub {
  color: var(--ink-muted, #5a6b76);
  font-size: 0.8125rem;
}

/* Juridische pagina's hebben geen hero. Zonder extra ruimte valt de vaste
   header over de eerste regels van de tekst heen. */
.container.legal {
  padding-top: 96px;
}
@media (max-width: 640px) {
  .container.legal { padding-top: 72px; }
}

/* --------------------------------------------------------------------------
   Systeempagina's: leveranciersbeeld

   De systeempagina's waren tekst van boven tot onder. Beeld naast de tekst
   maakt tastbaar waar het over gaat voor wie de systemen nog niet kent. Twee
   soorten beeld, elk met een eigen behandeling:

   - praktijkfoto's (deur, monteur, entree): vullen het kader, cover;
   - uitgesneden productrenders (transparante achtergrond): staan in het
     kader met lucht eromheen, contain, op de zachte tint zodat de uitsnede
     niet als een gat in de pagina leest.

   Er komt geen aparte donkere sectie voor de renders: navy is na de hero
   bewust verlaten (zie .section--navy hierboven) en de uitsneden staan
   schoon op de lichte ondergrond.
   -------------------------------------------------------------------------- */
.systeem-media {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--grad-white);
  box-shadow: var(--sh-1);
  cursor: zoom-in;
}
.systeem-media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}
.systeem-media:hover img {
  transform: scale(1.03);
}
.systeem-media:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* Uitgesneden render: lucht om het product, nooit afsnijden. */
.systeem-media--product {
  background: var(--surface-soft);
}
.systeem-media--product img {
  box-sizing: border-box;
  padding: 1.75rem;
}

/* Een portretfoto naast een tekstkolom wordt anders een torenkolom. */
.systeem-media--portrait img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

.systeem-figure figcaption {
  margin-top: 0.65rem;
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* Componentenrij onder de specificatietabel. De basis (.bewijs-figures) staat
   op drie kolommen; deze varianten dekken rijen van twee en vier. */
.bewijs-figures--tight {
  margin-top: 2.5rem;
}
@media (min-width: 48rem) {
  .bewijs-figures--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .bewijs-figures--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bewijs-figures--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* De basisregel snijdt links uit (bedoeld voor de rapportbeelden op de
   homepage). Productbeeld hoort gecentreerd en heel. */
.bewijs-figure__media--contain {
  background: var(--surface-soft);
}
.bewijs-figure__media--contain img {
  box-sizing: border-box;
  /* De renders hebben zelf al witruimte; meer padding maakt het product klein. */
  padding: 0.5rem;
  object-fit: contain;
  object-position: center;
}
.bewijs-figure__media--center img {
  object-position: center;
}

/* ---------------------------------------------------------------------------
 * Risico-inzet: een klein beeld naast een lopend tekstblok.
 *
 * Bewust klein gehouden. Het bronbeeld is 264 px breed, dus de kolom is even
 * breed als het bestand en wordt het beeld nooit opgeschaald. Onder 64rem
 * schuift het onder de tekst.
 * ------------------------------------------------------------------------- */
.risk-aside {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
.risk-aside__figure {
  margin: 0;
  max-width: 264px;
}
.risk-aside__media {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface-soft);
  box-shadow: var(--sh-1);
}
.risk-aside__media img {
  display: block;
  width: 100%;
  height: auto;
}
.risk-aside__figure figcaption {
  margin-top: 0.65rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}
@media (min-width: 64rem) {
  .risk-aside {
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: 3rem;
  }
}


/* ---------------------------------------------------------------------------
 * Hero, tweekoloms (4 augustus 2026)
 * Links de claim met drie bewijsregels en een enkele actie, rechts het product.
 * Reden: de abstracte plattegrond zei niets en DoorAtlas stond pas halverwege
 * de pagina. Onder 60rem stapelt alles; het beeld gaat dan onder de knop.
 * ------------------------------------------------------------------------- */
.hero__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
}
/* Verhouding overgenomen van de landingspagina van Alexander: de tekstkolom
   krijgt ruim een zesde meer breedte dan het beeld, zodat de kop en de drie
   bewijsregels minder vaak afbreken. */
@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.17fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}

/* De hero is niet langer een gecentreerd blok: linkslijnend leest een
   opsomming beter en de knop staat op een voorspelbare plek. */
.hero__content {
  align-items: stretch;
  text-align: left;
  /* 4 aug 2026: was 7rem. De menubalk is hier verborgen, dus die ruimte hoefde
     niet vrijgehouden te worden en leverde alleen een leeg blauw vlak op. */
  padding-top: 3.5rem;
  padding-bottom: 2rem;
}
.hero__copy .hero__title,
.hero__copy .hero__tagline {
  margin-inline: 0;
  max-width: 34ch;
}
.hero__title-soft {
  color: rgba(255, 255, 255, 0.62);
}
.hero__tagline {
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0;
}

.hero__points {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.55;
}
.hero__points li {
  position: relative;
  padding-left: 1.75rem;
}
/* Vinkje als achtergrond-SVG: geen extra markup per regel, en het blijft
   staan als de tekst over twee regels loopt. */
.hero__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1rem;
  height: 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='%23e2001a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.hero__cta {
  margin-top: 1.5rem;
}
.hero__cta-note,
.hero__cta-alt {
  text-align: left;
}
/* Homepage-hero: beide knoppen naast elkaar en linkslijnend. Op de andere
   pagina's blijft .hero__cta-row gecentreerd; die staan niet in .hero__copy. */
.hero__copy .hero__cta-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.75rem 1rem;
}
/* Elke knop heeft zijn eigen onderschrift. Kolom per actie, zodat de tekst
   onder de bijbehorende knop blijft hangen en niet onder allebei. */
.hero__cta-actie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Grijs blijft smaller dan rood, maar even hoog: anders staan de twee
   onderschriften op verschillende hoogte. */
.hero__copy .hero__cta-row .btn-grey {
  font-size: 15px;
  padding: 13px 20px;
}
.hero__copy .hero__cta-note {
  margin-top: 0.6rem;
  max-width: 30ch;
}
.hero__cta-alt {
  margin-top: 1.1rem;
  font-size: 14px;
}
.hero__cta-alt a:not(.btn) {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero__cta-alt a:not(.btn):hover {
  color: var(--keyrol-white);
}
/* De tweede actie is een knop, maar een maat kleiner dan de rode hoofdactie:
   zichtbaar als knop, niet even zwaar. */
.hero__cta-alt .btn {
  font-size: 15px;
  padding: 10px 20px;
}
/* De tijdsindicatie staat onder de knop, niet erin: het label blijft kort en
   de knop smal. */
.hero__cta-alt-note {
  display: block;
  margin-top: 0.6rem;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

/* Browserframe rond de schermafbeelding: zonder rand leest een screenshot als
   een foto, met rand als software. */
.hero__visual {
  margin: 0;
}
.browser-frame {
  border-radius: 10px;
  overflow: hidden;
  background: #0f1c26;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.browser-frame__bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.browser-frame__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}
.browser-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.hero__visual figcaption {
  margin-top: 0.75rem;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
}
.hero__visual figcaption a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Toegangsmodus in de hero (3 oktober 2026)
 * Vervangt de schermafbeelding: plattegrond plus vier sleutelgroepen, deuren
 * groen of rood per groep. Alleen plattegrond en knoppen; de rest van het
 * DoorAtlas-scherm was ruis voor een bezoeker. Gedrag in js/toegang-demo.js.
 * Groen en rood zijn dezelfde tinten als in DoorAtlas zelf.
 * ------------------------------------------------------------------------- */
.tm {
  --tm-open: #2f9e5f;
  --tm-dicht: #d9534f;
  background: var(--surface-soft);
  color: var(--navy);
}
.tm__plan {
  padding: 1rem 1rem 0.5rem;
}
.tm__plan svg {
  display: block;
  width: 100%;
  height: auto;
}
.tm__vloer rect {
  fill: #eef2f4;
}
.tm__wand {
  fill: none;
  stroke: #9aa9b3;
  stroke-width: 1.6;
}
.tm__detail {
  fill: none;
  stroke: #c4cdd3;
  stroke-width: 1.2;
}
.tm__buitenwand {
  fill: none;
  stroke: var(--navy);
  stroke-width: 6;
  stroke-linejoin: miter;
}
.tm-deur__stip {
  fill: var(--tm-open);
  stroke: #ffffff;
  stroke-width: 3;
  transition: fill 0.35s ease;
}
.tm-deur__halo {
  fill: var(--tm-open);
  opacity: 0.18;
  transition: fill 0.35s ease, opacity 0.35s ease;
}
.tm-deur.is-dicht .tm-deur__stip,
.tm-deur.is-dicht .tm-deur__halo {
  fill: var(--tm-dicht);
}
.tm-deur.is-dicht .tm-deur__halo {
  opacity: 0.12;
}
.tm__paneel {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--line);
  background: #ffffff;
}
/* Zonder JS doen de knoppen niets; dan blijft alleen de stand van de
   hoofdsleutel staan, met de status eronder. */
.tm__groepen {
  display: none;
}
.tm--actief .tm__groepen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
/* Vier naast elkaar alleen als het beeld de volle breedte heeft (gestapelde
   hero). In de tweekoloms hero is de beeldkolom te smal voor vier knoppen
   met teller. */
@media (min-width: 36rem) and (max-width: 59.99rem) {
  .tm--actief .tm__groepen {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Op een telefoon wordt de plattegrond zo klein dat de stippen wegvallen;
   r is als CSS-eigenschap te zetten in alle gangbare browsers. */
@media (max-width: 36rem) {
  .tm-deur__stip {
    r: 16px;
  }
  .tm-deur__halo {
    r: 25px;
  }
}
.tm-groep {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: var(--navy);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tm-groep:hover {
  border-color: var(--pistachio);
  background: var(--pistachio-tint);
}
/* Zwaarder dan .on-dark button:focus-visible, die de focusrand wit maakt:
   op het witte paneel zou die onzichtbaar zijn. */
.tm button.tm-groep:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.tm-groep.is-actief {
  color: #ffffff;
  background: var(--navy);
  border-color: var(--navy);
}
.tm__legenda {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.tm__sleutel {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.tm__sleutel--open {
  background: var(--tm-open);
}
.tm__sleutel--dicht {
  margin-left: 0.6rem;
  background: var(--tm-dicht);
}
.tm__status {
  margin: 0.35rem 0 0;
  font-size: 14px;
  color: var(--navy);
}
@media (prefers-reduced-motion: reduce) {
  .tm-deur__stip,
  .tm-deur__halo,
  .tm-groep {
    transition: none;
  }
}

/* Knop onder een tekstblok, met lucht naar de afbeelding eronder (AMS-pagina,
   blok DoorAtlas). */
.platform-cta {
  margin: 1.5rem 0 2.5rem;
}
/* Knop onder een klikbaar voorbeeld: alleen ruimte erboven, de sectie sluit
   zelf af. */
.platform-cta--na-demo {
  margin: 2rem 0 0;
}
/* Meerdere knoppen naast elkaar (7 okt 2026): zelfde knop, wel op één rij. */
.platform-cta--rij {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---------------------------------------------------------------------------
 * Demo aanvragen, onderaan /platform/ams/ en /platform/dooratlas/ (4 okt 2026)
 * Links de uitleg, rechts het korte formulier. Gedrag in js/demo-form.js.
 * ------------------------------------------------------------------------- */
.demo-blok {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 64rem) {
  .demo-blok {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}
.demo-blok__tekst .prose-cap {
  max-width: 46ch;
}
.demo-blok__bel {
  margin-top: 1.5rem;
  text-align: left;
}
.demo-blok__alt {
  margin-top: 0.5rem;
  font-size: 15px;
  color: var(--ink-muted);
}
.demo-form__grid {
  margin-top: 0;
  gap: 1.1rem 1.25rem;
}
.demo-form__grid .field-group--breed {
  grid-column: 1 / -1;
}
.demo-form .demo-form__hint {
  margin-top: -0.5rem;
}
.demo-form .btn {
  margin-top: 1.5rem;
}
.demo-form__privacy {
  margin-top: 1rem;
  font-size: 13px;
  color: var(--ink-muted);
}

/* Afbeelding die naar een andere pagina linkt in plaats van te vergroten. */
.platform-figure__link {
  cursor: pointer;
}
.platform-figure__link img {
  transition: transform 0.4s ease;
}
.platform-figure__link:hover img {
  transform: scale(1.02);
}
.platform-figure__link:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .platform-figure__link img {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 * Nagebouwd klantscherm uit AMS, /platform/ams/ (4 oktober 2026)
 * Nabouw van het relatiescherm in AMS: zijbalk, tabs Beheer en Locaties,
 * en binnen Locaties lijst of kaart. Verzonnen woonstichting. Vervangt de
 * schermafbeelding van het kruisjesformulier. Gedrag in js/ams-demo.js.
 * De kaart is een vaste uitsnede van de PDOK BRT-achtergrondkaart (grijs),
 * gemaakt met _build-scripts/kaart_amsterdam.py: geen externe kaartlaag.
 * Maten zijn bewust klein: het is een verkleind applicatiescherm.
 * ------------------------------------------------------------------------- */
.am-figuur {
  margin-top: 2rem;
}
.am {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #f6f8f9;
  color: #304a5e;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}
@media (min-width: 48rem) {
  .am {
    grid-template-columns: 150px minmax(0, 1fr);
  }
}
.am__zij {
  display: none;
}
@media (min-width: 48rem) {
  .am__zij {
    display: flex;
    flex-direction: column;
    padding: 14px 8px;
    background: #304a5e;
    color: #ffffff;
  }
}
.am__merk {
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.am__merk img {
  display: block;
  width: 84px;
  height: auto;
  margin: 2px 8px 4px;
}
.am__merk span {
  display: block;
  margin: 0 8px 12px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.7);
}
.am__menu {
  margin: 0;
  padding: 0 0 24px;
  list-style: none;
}
.am__menu li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.88);
}
.am__menu li.is-actief {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}
.am__menu svg {
  flex: none;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.am__bestel {
  margin-top: auto;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #ffffff;
  background: #e31e3c;
}
.am__hoofd {
  min-width: 0;
  padding: 14px 18px 18px;
}
.am__terug {
  margin: 0 0 6px;
  font-size: 11.5px;
  color: #5a6b76;
}
.am__titel {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  /* 8 okt 2026 (KEY-37): was #9aa6ae, 2,3:1. --ink-muted haalt 5,2:1 op
     #f6f8f9. Geldt ook voor de andere grijze tekst in dit scherm. */
  color: var(--ink-muted);
}
.am__titel strong {
  color: #304a5e;
}
.am__meta {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: #5a6b76;
}
.am__tabs {
  display: flex;
  gap: 2px;
  margin-top: 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.am-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: -1px;
  padding: 8px 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: #304a5e;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
}
button.am-tab {
  cursor: pointer;
}
button.am-tab:hover {
  background: var(--pistachio-tint);
}
.am-tab--uit {
  color: var(--ink-muted);
}
.am-tab.is-actief {
  font-weight: 600;
  border-bottom-color: #304a5e;
}
.am .am-tab:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}
.am-tab__teller {
  padding: 0 5px;
  font-size: 10.5px;
  border-radius: 999px;
  color: #5a6b76;
  background: #e8edf0;
}
.am-paneel {
  padding-top: 12px;
}
.am:not(.am--js) .am-paneel + .am-paneel {
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
.am-acties {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.am-knop {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  color: #304a5e;
  background: #ffffff;
  border: 1px solid #cfd8dd;
  border-radius: 5px;
}
.am-knop--donker {
  color: #ffffff;
  background: #304a5e;
  border-color: #304a5e;
}
.am-knop--rood {
  color: #ffffff;
  background: #e31e3c;
  border-color: #e31e3c;
}
.am-uitleg {
  margin: 10px 0 4px;
  font-size: 11px;
  color: #5a6b76;
}
.am-blok {
  margin-top: 14px;
}
.am-blok__kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 6px;
}
.am-blok__kop h3 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #304a5e;
}
.am-blok__kop h3 span {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
}
.am-blok__kop p {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--ink-muted);
}
.am-blok__kop .am-knop {
  flex: none;
}
@media (max-width: 36rem) {
  .am-blok__kop .am-knop {
    display: none;
  }
}
.am-scroll {
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.am-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  color: #304a5e;
}
.am-tabel th,
.am-tabel td {
  padding: 5px 10px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  border-bottom: 1px solid #edf1f2;
}
.am-tabel tbody tr:last-child td {
  border-bottom: 0;
}
.am-tabel th {
  font-size: 11px;
  font-weight: 600;
  background: #fafbfc;
}
.am-tabel .am-c {
  text-align: center;
}
.am-naam {
  font-weight: 600;
}
.am-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  font-size: 10px;
  font-weight: 700;
  /* was #1f8a4c, 3,75:1 op deze achtergrond; deze tint haalt 4,66:1 */
  color: #1b7942;
  background: #dcf3e4;
  border-radius: 50%;
}
.am-nee {
  color: var(--ink-muted);
}
.am-tabel--ruim td {
  padding: 8px 10px;
}
.am-tabel code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10.5px;
  color: #5a6b76;
}
.am-plan {
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10.5px;
  background: #e8edf0;
  border: 1px solid #dbe2e6;
  border-radius: 4px;
}
.am-balk {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.am-zoek {
  min-width: 180px;
  padding: 6px 10px;
  font-size: 11.5px;
  color: var(--ink-muted);
  background: #e8edf0;
  border-radius: 6px;
}
.am-balk__rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.am-wissel {
  display: inline-flex;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #cfd8dd;
  border-radius: 6px;
}
.am-wissel__knop {
  min-height: 32px;
  padding: 5px 12px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: #304a5e;
  background: #ffffff;
  border: 0;
  cursor: pointer;
}
.am-wissel__knop.is-actief {
  color: #ffffff;
  background: #304a5e;
}
.am .am-wissel__knop:focus-visible {
  outline: 2px solid var(--pistachio);
  outline-offset: -3px;
}
.am-link {
  font-size: 11.5px;
}
.am-kaart {
  position: relative;
  overflow: hidden;
  background: #f4f6f5;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.am-kaart img {
  display: block;
  width: 100%;
  height: auto;
}
.am-kaart__zoom {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.am-kaart__zoom i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  color: #333333;
}
.am-kaart__zoom i + i {
  border-top: 1px solid #cccccc;
}
.am-kaart__bron {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1px 6px;
  font-size: 10px;
  color: #333333;
  background: rgba(255, 255, 255, 0.8);
}
/* Speld in de vorm van de standaardmarkering op de AMS-kaart. De punt van
   het gedraaide vierkant valt op de coordinaat. */
.am-pin {
  position: absolute;
  width: 22px;
  height: 26px;
  margin: -25px 0 0 -11px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.am-pin::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #2a81cb;
  border: 1px solid #1d6aa8;
  border-radius: 50% 50% 50% 0;
  box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.35);
  transform: rotate(-45deg);
}
.am-pin::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
}
.am-pin span {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: #304a5e;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.15s ease;
}
.am-pin:hover,
.am-pin:focus-visible,
.am-pin[aria-expanded="true"] {
  z-index: 2;
}
.am-pin:hover span,
.am-pin:focus-visible span,
.am-pin[aria-expanded="true"] span {
  opacity: 1;
}
.am .am-pin:focus-visible {
  outline: none;
}
.am-pin:focus-visible::before {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #304a5e;
}

/* ---------------------------------------------------------------------------
 * Kruisjesformulier op de plattegrond, /platform/dooratlas/ (4 oktober 2026)
 * Vervangt de schermafbeelding "Zo ziet DoorAtlas eruit". Links het raster,
 * rechts de kaart; dezelfde groen- en roodtinten als de hero en DoorAtlas.
 * Gedrag in js/kruisjes-demo.js.
 * ------------------------------------------------------------------------- */
.kz {
  --kz-open: #2f9e5f;
  --kz-dicht: #d9534f;
  display: grid;
  /* minmax(0, 1fr): zonder die ondergrens rekt de spoorbreedte mee met de
     tabel en loopt alles op een telefoon buiten beeld. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
}
/* Telefoon: krapper raster. Met .kz ervoor, want de basisregels staan
   verderop in dit bestand en zouden deze anders overschrijven. */
@media (max-width: 30rem) {
  .kz .kz__blok {
    padding: 1rem 0.75rem;
  }
  .kz .kz-tabel td {
    min-width: 1.45rem;
    font-size: 14px;
  }
  .kz .kz-tabel thead th {
    font-size: 11px;
  }
  .kz .kz-tabel .kz-tabel__hoek {
    padding: 0 0.4rem;
    font-size: 0;
  }
  .kz .kz-groep {
    padding: 0.35rem 0.4rem;
    font-size: 13px;
  }
  .kz .kz-deur__stip {
    r: 11px;
  }
  .kz .kz-deur__halo {
    r: 19px;
  }
}
@media (min-width: 64rem) {
  .kz {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1.25rem;
  }
}
.kz__blok {
  align-self: stretch;
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
}
.kz__kop {
  margin: 0 0 0.75rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.kz__pijl {
  display: flex;
  justify-content: center;
  color: var(--pistachio);
  transform: rotate(90deg);
}
@media (min-width: 64rem) {
  .kz__pijl {
    transform: none;
  }
}
.kz__scroll {
  overflow-x: auto;
}
.kz-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--navy);
}
.kz-tabel th,
.kz-tabel td {
  padding: 0;
  border: 1px solid var(--line-soft);
  text-align: center;
}
.kz-tabel thead th {
  height: 2rem;
  font-weight: 600;
  background: var(--surface-soft);
}
.kz-tabel abbr {
  text-decoration: none;
}
.kz-tabel .kz-tabel__hoek {
  padding: 0 0.5rem;
  text-align: left;
  font-weight: 500;
  color: var(--ink-muted);
}
.kz-tabel tbody th {
  text-align: left;
  white-space: nowrap;
}
.kz-tabel td {
  min-width: 1.9rem;
  height: 2.4rem;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-soft);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.kz-groep {
  display: block;
  width: 100%;
  min-height: 2.4rem;
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: var(--navy);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.kz-groep:hover {
  background: var(--pistachio-tint);
}
.kz-groep:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}
.kz-tabel tr.is-actief .kz-groep {
  color: #ffffff;
  background: var(--navy);
}
.kz-tabel tr.is-actief td.is-x {
  color: #1f7a45;
  background: rgba(47, 158, 95, 0.16);
}
.kz-tabel tr.is-actief td:not(.is-x) {
  background: rgba(217, 83, 79, 0.1);
}
/* Deur aanwijzen op de kaart: kolom licht op. Een rand en geen vulling, zodat
   het groen en rood van de actieve rij blijft staan. */
.kz-tabel .is-kolom {
  box-shadow: inset 0 0 0 2px var(--pistachio);
}
.kz__hint {
  margin: 0.75rem 0 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.kz__svg {
  display: block;
  width: 100%;
  height: auto;
}
.kz__vloer {
  fill: #ffffff;
}
.kz__gang {
  fill: #eef2f4;
}
.kz__wand {
  fill: none;
  stroke: #9aa9b3;
  stroke-width: 1.6;
}
.kz__buitenwand {
  fill: none;
  stroke: var(--navy);
  stroke-width: 5;
}
.kz__ruimte text {
  font-size: 12px;
  fill: var(--ink-muted);
  text-anchor: middle;
}
.kz-deur text {
  font-size: 11px;
  font-weight: 700;
  fill: var(--navy);
}
.kz-deur__stip {
  fill: var(--kz-open);
  stroke: #ffffff;
  stroke-width: 3;
  transition: fill 0.35s ease;
}
.kz-deur__halo {
  fill: var(--kz-open);
  opacity: 0.18;
  transition: fill 0.35s ease, opacity 0.35s ease;
}
.kz-deur.is-dicht .kz-deur__stip,
.kz-deur.is-dicht .kz-deur__halo {
  fill: var(--kz-dicht);
}
.kz-deur.is-dicht .kz-deur__halo {
  opacity: 0.12;
}
.kz__legenda {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.kz__bol {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.kz__bol--open {
  background: var(--kz-open);
}
.kz__bol--dicht {
  margin-left: 0.6rem;
  background: var(--kz-dicht);
}
.kz__status {
  margin: 0.35rem 0 0;
  font-size: 14px;
  color: var(--navy);
}
.kz-uitleg {
  margin-top: 3rem;
}
.kz__voetnoot {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
}
@media (prefers-reduced-motion: reduce) {
  .kz-tabel td,
  .kz-groep,
  .kz-deur__stip,
  .kz-deur__halo {
    transition: none;
  }
}

/* Bewijsbalk onder de hero-kolommen: feiten links, klantlogo's rechts. */
.hero__proof {
  width: 100%;
  max-width: 78rem;
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 64rem) {
  .hero__proof {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2.5rem;
  }
}
.hero__proof-facts,
.hero__proof-clients ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__proof-facts li {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.hero__proof-clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
@media (min-width: 64rem) {
  .hero__proof-clients {
    justify-content: flex-end;
  }
}
.hero__proof-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.hero__proof-clients .client-logo {
  height: 26px;
  width: auto;
  opacity: 0.82;
  filter: brightness(0) invert(1);
}

/* ---------------------------------------------------------------------------
 * Verborgen menubalk op de homepage (4 augustus 2026)
 * De balk start onzichtbaar en schuift in beeld zodra het KEYROL-logo in de
 * hero uit beeld is gescrold. Op alle andere pagina's verandert er niets: die
 * krijgen de klasse is-hidden-top niet.
 * ------------------------------------------------------------------------- */
.site-header {
  transition: background-color 0.3s, box-shadow 0.3s, opacity 0.28s ease,
    transform 0.28s ease, visibility 0.28s;
}
.site-header.is-hidden-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  pointer-events: none;
}
/* Toetsenbordgebruikers moeten de navigatie kunnen bereiken zonder te scrollen. */
.site-header.is-hidden-top:focus-within {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: background-color 0.3s, box-shadow 0.3s;
  }
}

/* Het logo boven de hero-kop: op de homepage is dat het enige merkanker zolang
   de menubalk verborgen is. */
.hero__logo {
  display: block;
  /* 4 okt 2026: nog eens 1,5x (was 4,125rem / 4,5rem). Het logo draagt hier
     het merk in plaats van de menubalk, dus mag het groter dan in de header. */
  height: 6.1875rem;
  width: auto;
  margin: 0 0 1.5rem;
}
@media (min-width: 48rem) {
  .hero__logo {
    height: 6.75rem;
  }
}

/* ---------------------------------------------------------------------------
 * Auteursregel onder het kruimelpad van kennisbankartikelen (4 augustus 2026)
 * Vakinhoud met een naam en een datum weegt zwaarder bij Google en bij
 * taalmodellen dan tekst zonder afzender.
 * ------------------------------------------------------------------------- */
.article-byline {
  padding: 0.25rem 0 0.75rem;
}
.article-byline p {
  margin: 0;
  font-size: 13px;
  color: var(--keyrol-text-muted, #5b6b78);
}
.article-byline strong {
  font-weight: 600;
  color: inherit;
}

/* ---------------------------------------------------------------------------
 * Zo werken we — vier kolommen naast elkaar vanaf 64rem (15 september 2026)
 *
 * Onder 64rem blijft de verticale tijdlijn uit style.css staan: vier kolommen
 * van 255 px werken op een telefoon niet. Vanaf 64rem wordt de lijst een grid
 * van vier gelijke kolommen en verandert de rol van .step__line: die was de
 * verticale streep onder het icoon en wordt nu de horizontale verbinding van
 * het ene nummer naar het volgende. De negatieve marge rechts overbrugt de
 * kolomtussenruimte, zodat de lijn doorloopt in plaats van per kolom te
 * stoppen. Stap 4 heeft in de HTML geen .step__line, dus die eindigt vanzelf.
 * ------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .steps-list {
    --steps-gap: 2.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: var(--steps-gap);
    row-gap: 0;
    align-items: start;
  }

  /* Subgrid houdt nummerrij, kop en tekst over de vier kolommen op dezelfde
     hoogte. Zonder dit zakt kolom 2 tot 4 omhoog zodra kop 1 over twee regels
     loopt, en staan de teksten niet meer op een lijn. De kop en de tekst zijn
     daarvoor eigen rijen in het grid; .step__body is alleen nog een omhulsel
     en verdwijnt met display: contents. */
  .step {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
  }

  .step__body {
    display: contents;
  }

  .step__marker {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.75rem;
  }

  .step__number {
    grid-column: 1;
    grid-row: 1;
  }

  .step__line {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    height: 1px;
    flex: none;
    margin-top: 0;
    margin-right: calc(var(--steps-gap) * -1);
  }

  .step__icon {
    grid-column: 1;
    grid-row: 2;
    margin-top: 1rem;
  }

  .step__title {
    font-size: 1.15rem;
    line-height: 1.3;
    margin-top: 1.25rem;
    align-self: start;
  }

  .step__text {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }
}

/* ---------------------------------------------------------------------------
 * Vertrouwensregel in de subpagina-hero (15 september 2026)
 *
 * .hero__content staat hierboven op align-items: stretch, omdat de home-hero
 * linkslijnend is. Kop, subregel en knoppenrij centreren zichzelf met
 * margin-inline: auto of justify-content, maar .hero__trust is een flexrij die
 * over de volle breedte uitrekt; het slotje en de tekst landen dan links.
 * align-self trekt het blok terug naar het midden, net als de rest van de hero.
 * ------------------------------------------------------------------------- */
.hero--page .hero__trust {
  align-self: center;
}
/* 17 oktober 2026: de text-align: left van de home-hero gold ook hier. Kop
   (56rem) en subregel (620px) staan als blok in het midden, dus de tekst
   begon per blok op een andere plek en de knoppen stonden er los onder. */
.hero--page .hero__content {
  text-align: center;
}

/* -------------------------------------------------------------------------
 * Uitlegvideo (14 oktober 2026) op /platform/ams/ en /platform/dooratlas/.
 * Bouwt voort op .platform-figure; js/uitleg-video.js laadt en speelt.
 * ------------------------------------------------------------------------- */
.uitleg-video {
  margin-top: 2.5rem;
}
.uitleg-video__media {
  position: relative;
  cursor: default;
  aspect-ratio: 16 / 9;
  background: #e5e8e8;
}
.uitleg-video__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.uitleg-video__knop {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(48, 74, 94, 0.85);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.uitleg-video__knop:hover {
  background: var(--navy);
}
.uitleg-video__knop:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
.uitleg-video__knop .ico-speel {
  display: none;
}
.uitleg-video__knop.is-gepauzeerd .ico-speel {
  display: block;
}
.uitleg-video__knop.is-gepauzeerd .ico-pauze {
  display: none;
}
@media (max-width: 48rem) {
  .uitleg-video {
    margin-top: 1.75rem;
  }
  .uitleg-video__knop {
    right: 8px;
    bottom: 8px;
    width: 30px;
    height: 30px;
  }
  .uitleg-video__knop svg {
    width: 12px;
    height: 12px;
  }
}

/* -------------------------------------------------------------------------
 * Contactpagina, blok "Zo bereik je ons" (14 oktober 2026).
 * Een blok: de video is de achtergrond, de kanalen staan rechts over de lege
 * muur van het filmpje. De video is witter gemaakt (curves) en onderaan
 * bijgesneden (donkere band onder het tafelblad). Het grijs van .bereik is gemeten op die muur, zodat
 * poster, laadmoment en de mobiele tekstzone er naadloos op aansluiten.
 * Onder 60rem: bijgesneden video (16:9) boven, regels eronder op hetzelfde grijs.
 * Bouwt voort op .uitleg-video. Daaronder de twee klantadressen als kaarten.
 * ------------------------------------------------------------------------- */
.bereik {
  --bereik-muur: #f5f5f5;
  margin-top: 2rem;
  background: var(--bereik-muur);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.bereik__video {
  margin: 0;
}
.bereik__video .uitleg-video__media {
  background: var(--bereik-muur);
}
.bereik__kanalen {
  list-style: none;
  margin: 0;
  padding: 1.5rem 1.5rem 1.75rem;
  display: grid;
  gap: 1.35rem;
}
@media (min-width: 60rem) {
  .bereik {
    position: relative;
    aspect-ratio: 45 / 16;
  }
  .bereik__video,
  .bereik__video .uitleg-video__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
  /* Pauzeknop links onder: rechts staat de tekst. */
  .bereik__video .uitleg-video__knop {
    left: 14px;
    right: auto;
    bottom: 14px;
  }
  .bereik__kanalen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 37%;
    padding: 2rem 2rem 2rem 0;
    align-content: center;
    gap: 1.5rem;
  }
}
.bereik__kanaal {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.bereik__kanaal p {
  margin: 0;
}
.bereik__icoon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--keyrol-white);
  box-shadow: var(--sh-1), inset 0 0 0 1px var(--line);
  color: var(--navy);
}
.bereik__label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3e4d57;
  margin: 0 0 0.15rem;
}
.bereik__waarde {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy-deep);
  text-decoration: none;
}
a.bereik__waarde:hover,
a.bereik__waarde:focus-visible {
  color: var(--keyrol-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bereik__toelichting {
  font-size: 0.9rem;
  line-height: 1.45;
  color: #3e4d57;
  margin-top: 0.15rem;
}

.bereik-klant {
  margin-top: 3.5rem;
}
.bereik-klant__titel {
  font-size: 1.35rem;
  color: var(--navy);
  margin: 0;
}
.bereik-klant__intro {
  margin: 0.35rem 0 0;
  color: var(--ink-muted);
}
.bereik-klant__kaarten {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media (min-width: 48rem) {
  .bereik-klant__kaarten {
    grid-template-columns: 1fr 1fr;
  }
}
.bereik-kaart {
  background: var(--grad-white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--pistachio);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  padding: 1.5rem 1.5rem 1.6rem;
}
.bereik-kaart--storing {
  border-top-color: var(--keyrol-red);
}
.bereik-kaart__adres {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  word-break: break-word;
}
.bereik-kaart__adres:hover,
.bereik-kaart__adres:focus-visible {
  color: var(--keyrol-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bereik-kaart__tekst {
  margin: 0.6rem 0 0;
  font-size: 0.97rem;
  line-height: 1.6;
}
.bereik__gegevens {
  margin: 2rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------------------
 * Contactformulier met twee tabbladen (30 okt 2026)
 * Algemene vraag staat standaard open; main.js wisselt .is-actief en haalt
 * `hidden` van de tabbalk. Zonder JavaScript blijft de balk weg en staan beide
 * formulieren onder elkaar.
 * ------------------------------------------------------------------------- */
.contact-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 2rem 0 0;
  padding: 0.25rem;
  border-radius: 8px;
  background: var(--keyrol-grey);
}
.contact-tabs[hidden] {
  display: none;
}
.contact-tabs__tab {
  flex: 1 1 0;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--keyrol-blue);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-tabs__tab:hover {
  background: rgba(255, 255, 255, 0.6);
}
.contact-tabs__tab[aria-selected="true"] {
  background: var(--keyrol-white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.contact-tabs__tab:focus-visible {
  outline: 2px solid var(--keyrol-blue);
  outline-offset: 2px;
}
@media (min-width: 48rem) {
  .contact-tabs {
    display: inline-flex;
    min-width: 30rem;
  }
}
.contact-paneel {
  margin-top: 1.5rem;
}
.js .contact-paneel:not(.is-actief) {
  display: none;
}
/* Verwijzing naar Noor direct onder de kop van het vraagformulier. */
.voorstel-form__title + .form-melding {
  margin: 1rem 0 0;
}
/* Kopregel in een melding: twee stappen groter dan de 15px van .form-melding p. */
.form-melding .form-melding__kop {
  font-size: 17px;
}