/* ==========================================================================
   Audirium ontwerpsysteem: COMPONENTLAAG voor de marketingsite
   Gebouwd uitsluitend op var(--au-*) uit au-tokens.css. Laad au-tokens.css
   eerst, deze daarna.

   Afgeleid uit wat er in home.html, tools.html, norm-nis2.html,
   tool-detail.html en hulp.html al stond. Componenten die op twee of meer
   van die schermen voorkwamen staan hier; wat echt bij een pagina hoort
   blijft in het eigen style-blok van die pagina.
   ========================================================================== */

/* ---------- 0. Basis: reset, body, koppen ----------
   Op alle vijf schermen identiek. Smal scherm: geen aanpassing nodig, dit
   is basisgedrag. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: var(--au-leading-base);
  background: var(--au-surface);
  color: var(--au-text);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--au-orange);
  outline-offset: 2px;
  border-radius: var(--au-radius-xs);
}
h1, h2, h3, h4 { color: var(--au-text-heading); margin: 0; letter-spacing: var(--au-tracking-tight); }
.icon { width: 1.5rem; height: 1.5rem; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Beelden hebben width/height-attributen; zonder height:auto drukt de
   schaling ze plat. Uitzondering: bewust bijgesneden thumbnails.

   Bewust GEEN kale img-selector. Dit bestand wordt naast de bestaande
   sitestijlen geladen, en een kale element-regel raakt dan ook de chrome van
   de host: een logo-img zonder width-attribuut in een flexcontainer valt met
   max-width:100% terug op breedte nul en verdwijnt. Daarom gescoped op de
   twee containers van het ontwerpsysteem. */
.container img, .container-wide img { max-width: 100%; }
/* .footer-logo hoort er ook niet bij: dat is een merkteken met een vaste
   hoogte uit het height-attribuut, geen inhoudsbeeld dat mee moet schalen.
   Zonder deze uitzondering won height:auto van dat attribuut en stond het
   logo op zijn eigen 498 bij 119 pixels in de voet van elke pagina. */
.container img:not(.raster-thumb img):not([data-crop]):not(.footer-logo),
.container-wide img:not(.raster-thumb img):not([data-crop]):not(.footer-logo) { height: auto; }

/* Plakkende header dekt een ankerdoel af zonder deze marge. */
[id] { scroll-margin-top: 5.5rem; }

/* ---------- 1. Paginakader en container ----------
   Twee breedtes: de leesbrede container voor tekst en gewone secties, de
   brede variant voor productschermen die verder mogen uitlopen. Smal
   scherm: padding blijft, breedte volgt de viewport. */
.container { max-width: var(--au-container); margin: 0 auto; padding: 0 var(--au-space-3); }
.container-wide { max-width: var(--au-container-wide); margin: 0 auto; padding: 0 var(--au-space-3); }
.overflow-guard { overflow-x: auto; }

/* ---------- 2. Sitekop met navigatie ----------
   Blijft plakken aan de bovenkant. Smal scherm: het menu met de losse
   links verdwijnt, logo en actieknop blijven staan. */
.site-header {
  position: sticky; top: 0; z-index: var(--au-layer-sticky);
  background: var(--au-surface);
  border-bottom: 1px solid var(--au-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 0; }
.logo {
  display: flex; align-items: center; gap: .6rem;
  font-weight: var(--au-weight-bold); font-size: 1.15rem; letter-spacing: var(--au-tracking-tight);
  color: var(--au-text-heading); text-decoration: none;
}
.logo-mark {
  width: 2rem; height: 2rem; border-radius: var(--au-radius-sm);
  background: var(--au-navy);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.logo-mark svg { width: 1.0625rem; height: 1.0625rem; color: var(--au-orange); }
.main-nav { display: flex; align-items: center; gap: var(--au-space-5); }
.main-nav ul { list-style: none; display: flex; gap: var(--au-space-4); margin: 0; padding: 0; }
.main-nav a:not(.btn) {
  text-decoration: none; color: var(--au-text-dim);
  font-size: var(--au-text-sm); font-weight: var(--au-weight-semi);
  transition: color var(--au-dur-base) var(--au-ease);
}
.main-nav a:not(.btn):hover { color: var(--au-orange); }
.main-nav a.current { color: var(--au-orange); }
.header-cta { display: flex; align-items: center; gap: var(--au-space-3); }
@media (max-width: 48.75em) { .main-nav ul { display: none; } }

/* ---------- 3. Knoppen, drie gewichten ----------
   Primair (opvallend, solide), outline (rand, voor op een donkere
   ondergrond) en outline-light (rand, voor op een lichte ondergrond).
   Plus de kleine maat voor in de kop. Smal scherm: geen aanpassing,
   knoppen breken vanzelf naar de volgende regel via flex-wrap op de
   ouder. */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .875rem 1.75rem; border-radius: .625rem;
  font-size: var(--au-text-sm); font-weight: var(--au-weight-semi);
  text-decoration: none; border: none; cursor: pointer;
  transition: transform var(--au-dur-base) var(--au-ease), box-shadow var(--au-dur-base) var(--au-ease),
    background var(--au-dur-base) var(--au-ease), border-color var(--au-dur-base) var(--au-ease), color var(--au-dur-base) var(--au-ease);
  white-space: nowrap;
}
.btn-primary { background: var(--au-orange); color: var(--au-text-op-deep); }
.btn-primary:hover { background: var(--au-orange-hot); transform: translateY(-2px); box-shadow: var(--au-shadow-cta); }
.btn-outline { background: transparent; color: var(--au-text-op-deep); border: 1.5px solid color-mix(in srgb, var(--au-text-op-deep) 28%, transparent); }
.btn-outline:hover { border-color: color-mix(in srgb, var(--au-text-op-deep) 50%, transparent); background: color-mix(in srgb, var(--au-text-op-deep) 6%, transparent); }
.btn-outline-light { background: transparent; color: var(--au-text-heading); border: 1.5px solid var(--au-border); }
.btn-outline-light:hover { border-color: var(--au-orange); color: var(--au-orange); background: var(--au-orange-soft); }
.btn-sm { padding: .625rem 1.25rem; font-size: var(--au-text-xs); }
.btn-block { width: 100%; justify-content: center; }

/* ---------- 4. Opschrift ----------
   Klein label boven een kop. De stip-variant is voor pagina's die het
   opschrift als los label met puntje tonen in plaats van gewone tekst. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--au-text-2xs); font-weight: var(--au-weight-bold); text-transform: uppercase;
  letter-spacing: var(--au-tracking-wide); color: var(--au-orange); margin: 0 0 var(--au-space-2);
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--au-orange); flex-shrink: 0; }

/* ---------- 5. Sectiekop, links en gecentreerd ----------
   Standaard links uitgelijnd. In .section-head staat hij gecentreerd met
   een vaste leesbreedte. Smal scherm: schaalt mee via clamp(). */
.section-title { font-size: var(--au-text-4xl); font-weight: var(--au-weight-bold); line-height: var(--au-leading-tight); }
.section-sub { font-size: 1.1rem; color: var(--au-text-dim); max-width: 39rem; margin: var(--au-space-2) 0 0; }
.section-head { text-align: center; margin: 0 auto var(--au-space-6); max-width: 45rem; }
.section-head .eyebrow { justify-content: center; }
/* Een blok met een leesbreedte dat gecentreerde tekst bevat, hoort ook zelf in
   het midden te staan. Stond alleen onder .section-head, terwijl de homepage
   .hp-section-header gebruikt: daar plakte de subtitel links terwijl label en
   titel netjes centreerden, 234px uit het hart op een breed scherm. Nu geldt de
   regel overal waar de tekst gecentreerd is, dus ook in markup die later komt. */
.section-sub { margin-left: auto; margin-right: auto; }
:where([style*="text-align:left"], .text-left, .section-head--left) > .section-sub {
  margin-left: 0; margin-right: 0;
}

/* ---------- 6. Inleidende alinea ----------
   De iets grotere alinea direct onder een hero-kop of sectiekop. */
.lead { font-size: var(--au-text-lg); color: var(--au-text-dim); max-width: 40rem; margin: 0; }

/* ---------- 6b. Generieke sectie ----------
   Standaard verticale ruimte tussen secties, met een lichte variant voor
   afwisseling en een dunne lijn tussen twee opeenvolgende secties. */
.page-section { padding: var(--au-space-7) 0; }
.page-section.alt { background: var(--au-surface-2); }
.page-section + .page-section { border-top: 1px solid var(--au-border); }

/* ---------- 7. Kruimelpad ----------
   Boven een hero op een detailpagina. Smal scherm: wrapt vanzelf. */
.breadcrumb {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: var(--au-text-2xs); color: var(--au-text-dim); margin-bottom: var(--au-space-4);
}
.breadcrumb a { text-decoration: none; color: var(--au-text-dim); }
.breadcrumb a:hover { color: var(--au-orange); }
.breadcrumb svg { width: .8125rem; height: .8125rem; color: var(--au-slate); }

/* ---------- 8. Hero met productscherm ----------
   Twee kolommen: tekst en scherm naast elkaar. Smal scherm: het scherm
   gaat boven de tekst staan (leesvolgorde: eerst het bewijs, dan de tekst
   die het uitlegt). */
.hero { background: var(--au-surface-2); border-bottom: 1px solid var(--au-border); padding: var(--au-space-6) 0 var(--au-space-6); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--au-space-6); align-items: center; }
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: var(--au-weight-bold); line-height: var(--au-leading-snug);
  letter-spacing: var(--au-tracking-tight); margin-bottom: var(--au-space-3);
}
.hero-lead { font-size: var(--au-text-lg); color: var(--au-text-dim); max-width: 40rem; margin: 0 0 var(--au-space-4); }
.hero-actions { display: flex; gap: var(--au-space-2); flex-wrap: wrap; align-items: center; }
.hero-help-link { color: var(--au-text-dim); font-size: var(--au-text-sm); font-weight: var(--au-weight-semi); text-decoration: underline; text-underline-offset: 3px; }
.hero-help-link:hover { color: var(--au-orange); }
@media (max-width: 53.75em) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid > *:last-child { order: -1; }
}

/* ---------- 9. Productscherm-kader met bijschrift ----------
   Het scherm zelf, met optioneel een pulserende stip en tekstballon die
   naar een detail wijzen, en altijd een bijschrift eronder dat zegt wat
   je ziet. De volle-breedte-variant (.beeld-volledig) laat het beeld tot
   de brede container doorlopen. Smal scherm: de tekstballon verdwijnt
   omdat er geen ruimte is om hem leesbaar te tonen; de stip blijft. */
.schermlabel-wrap { position: relative; }
.schermlabel-wrap img {
  width: 100%; border-radius: var(--au-radius-sm);
  border: 1px solid var(--au-border-deep);
  box-shadow: var(--au-shadow-lg);
}
.schermlabel-stip {
  position: absolute; width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--au-orange); border: 2px solid var(--au-text-op-deep);
  transform: translate(-50%, -50%);
  animation: sl-pulse 2s var(--au-ease) infinite;
}
@keyframes sl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--au-orange) 45%, transparent); }
  50% { box-shadow: 0 0 0 .5625rem transparent; }
}
.schermlabel-bubble {
  position: absolute; max-width: 16rem;
  background: var(--au-text-op-deep); color: var(--au-navy);
  padding: .75rem 1rem; border-radius: var(--au-radius-sm);
  box-shadow: var(--au-shadow-md);
  font-size: .85rem; line-height: var(--au-leading-base);
}
@media (prefers-color-scheme: dark) { .schermlabel-bubble { background: var(--au-navy); color: var(--au-text-op-deep); } }
:root[data-theme="dark"] .schermlabel-bubble { background: var(--au-navy); color: var(--au-text-op-deep); }
:root[data-theme="light"] .schermlabel-bubble { background: var(--au-text-op-deep); color: var(--au-navy); }
@media (max-width: 39.9375rem) { .schermlabel-bubble { display: none; } }
.schermlabel-caption { font-size: var(--au-text-xs); opacity: .7; margin-top: .5rem; color: var(--au-text-dim); }
.beeld-volledig img { border-radius: var(--au-radius-lg); }

/* ---------- 10. Rolingang ----------
   Genummerde kolommen, elk voor een andere rol, met een eigen link naar
   waar die rol verder moet zijn. Smal scherm: kolommen worden rijen onder
   elkaar met een lijn ertussen in plaats van naast elkaar. */
.rolingang-grid { display: grid; grid-template-columns: 1.1fr 1fr .95fr; border-top: 1px solid var(--au-border); }
.rolingang-col { position: relative; padding: var(--au-space-4) var(--au-space-4) 0 0; border-right: 1px solid var(--au-border); }
.rolingang-col:nth-child(2) { padding-left: var(--au-space-4); }
.rolingang-col:nth-child(3) { padding-left: var(--au-space-4); border-right: none; }
.rolingang-num {
  display: block; font-size: 3.25rem; font-weight: var(--au-weight-bold); line-height: 1;
  color: var(--au-border); margin-bottom: var(--au-space-2); font-variant-numeric: tabular-nums;
}
.role-kicker { font-size: var(--au-text-2xs); font-weight: var(--au-weight-bold); text-transform: uppercase; letter-spacing: var(--au-tracking-wide); color: var(--au-orange); margin: 0 0 .5rem; }
.role-title { font-size: 1.5rem; font-weight: var(--au-weight-bold); margin: 0 0 .75rem; line-height: var(--au-leading-snug); }
.role-desc { margin: 0 0 var(--au-space-3); color: var(--au-text-dim); font-size: var(--au-text-sm); max-width: 20rem; }
.role-link { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--au-text-xs); font-weight: var(--au-weight-bold); color: var(--au-orange); text-decoration: none; padding-bottom: var(--au-space-3); }
.role-link:hover { text-decoration: underline; }
.role-link .icon { width: 1rem; height: 1rem; }
@media (max-width: 39.9375rem) {
  .rolingang-grid { grid-template-columns: 1fr; border-top: none; }
  .rolingang-col { border-right: none; border-top: 1px solid var(--au-border); padding: var(--au-space-4) 0 0 !important; }
  .rolingang-col:first-child { border-top: none; }
}

/* ---------- 11. Werkmoment-tijdlijn ----------
   Verticale lijn met stippen, tekst en scherm om en om gespiegeld. Smal
   scherm: de lijn schuift naar links, tekst en scherm komen onder elkaar
   te staan in plaats van naast elkaar. */
.tijdlijn { position: relative; }
.tijdlijn-rail { position: absolute; top: 0; bottom: 0; left: 8rem; width: 2px; background: var(--au-border-deep); }
.tijdlijn-row { position: relative; display: grid; grid-template-columns: 8rem 1fr; padding: var(--au-space-5) 0; }
.tijdlijn-row:first-child { padding-top: 0; }
.tijdlijn-row:last-child { padding-bottom: 0; }
.tijdlijn-punt {
  position: absolute; left: 8rem; top: .35rem; transform: translate(-50%, 0); z-index: var(--au-layer-base);
  width: .7rem; height: .7rem; border-radius: 50%; background: var(--au-orange); border: 2px solid var(--au-surface);
}
.tijdlijn-tijd { text-align: right; padding-right: var(--au-space-3); font-size: .8125rem; font-weight: var(--au-weight-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--au-orange); }
.tijdlijn-tijd span { display: block; font-weight: var(--au-weight-normal); text-transform: none; letter-spacing: normal; color: var(--au-text-dim); font-size: var(--au-text-2xs); margin-top: .15rem; }
.tijdlijn-content { display: flex; gap: var(--au-space-5); align-items: center; padding-left: var(--au-space-4); }
.tijdlijn-row:nth-child(even) .tijdlijn-content { flex-direction: row-reverse; }
.tijdlijn-tekst { flex: 1; min-width: 0; }
.tijdlijn-beeld { flex: 1.1; min-width: 0; }
.tijdlijn-beeld img { width: 100%; border-radius: var(--au-radius-sm); border: 1px solid var(--au-border-deep); box-shadow: var(--au-shadow-md); }
.tool-badge {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: var(--au-weight-bold);
  text-transform: uppercase; letter-spacing: .05em; color: var(--au-orange); background: var(--au-orange-soft);
  padding: .25rem .6rem; border-radius: var(--au-radius-full); margin-bottom: var(--au-space-2);
}
.tijdlijn-tekst h3 { font-size: 1.2rem; font-weight: var(--au-weight-bold); margin: .5rem 0 .5rem; }
.tijdlijn-tekst p { margin: 0; color: var(--au-text-dim); font-size: var(--au-text-sm); }
.tijdlijn-notitie { margin-top: var(--au-space-3); padding-top: var(--au-space-2); border-top: 1px solid var(--au-border); font-size: var(--au-text-xs); color: var(--au-text-dim); }
.tijdlijn-notitie a { color: var(--au-orange); font-weight: var(--au-weight-semi); text-decoration: none; }
.tijdlijn-notitie a:hover { text-decoration: underline; }
@media (max-width: 39.9375rem) {
  .tijdlijn-rail { left: .55rem; }
  .tijdlijn-row { grid-template-columns: 1fr; padding: var(--au-space-3) 0; }
  .tijdlijn-punt { left: .55rem; }
  .tijdlijn-tijd { font-size: var(--au-text-xs); text-transform: uppercase; color: var(--au-orange); margin-bottom: .25rem; padding-right: 0; text-align: left; padding-left: 1.75rem; }
  .tijdlijn-tijd span { display: inline; margin-top: 0; margin-left: .4rem; }
  .tijdlijn-row:nth-child(even) .tijdlijn-content,
  .tijdlijn-content { flex-direction: column; gap: var(--au-space-3); padding-left: 1.75rem; align-items: stretch; }
}

/* ---------- 12. Toolkaart en toolraster ----------
   Volledige, filterbare kaart met icoon, status, beloften en actieknop
   (gebruikt in de catalogus), plus een lichtere tegel-variant voor een
   raster van tools op andere pagina's. Smal scherm: raster wordt één
   kolom. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr)); gap: var(--au-space-3); }
.card {
  position: relative; background: var(--au-surface); border: 1px solid var(--au-border); border-radius: var(--au-radius-lg);
  box-shadow: var(--au-shadow-sm); overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--au-dur-base) var(--au-ease), box-shadow var(--au-dur-base) var(--au-ease), opacity var(--au-dur-fast) var(--au-ease);
}
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--au-orange); }
.card:hover { transform: translateY(-3px); box-shadow: var(--au-shadow-md); }
.card.is-hidden { display: none; }
.card-body { padding: var(--au-space-4); display: flex; flex-direction: column; gap: var(--au-space-2); flex: 1; }
.tool-icon { width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: var(--au-orange-soft); display: flex; align-items: center; justify-content: center; color: var(--au-orange); flex-shrink: 0; }
.card-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--au-space-2); }
.status-tag { font-size: .6875rem; font-weight: var(--au-weight-bold); text-transform: uppercase; letter-spacing: .05em; padding: .25rem .625rem; border-radius: var(--au-radius-full); white-space: nowrap; margin-top: 2px; }
.status-beschikbaar { background: var(--au-surface-3); color: var(--au-text-dim); }
.status-beta { background: var(--au-orange-soft); color: var(--au-orange); }
.card h3 { font-size: 1.25rem; font-weight: var(--au-weight-semi); color: var(--au-text-heading); margin: 0; }
.card p.promise { font-size: var(--au-text-sm); color: var(--au-text-dim); margin: 0; }
.card ul.bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.card ul.bullets li { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--au-text-xs); color: var(--au-text); }
.card ul.bullets svg { flex-shrink: 0; margin-top: 2px; color: var(--au-orange); }
.card-footer-role { font-size: var(--au-text-2xs); color: var(--au-text-dim); padding-top: var(--au-space-1); border-top: 1px solid var(--au-border); margin-top: auto; }
.card-cta { padding: 0 var(--au-space-4) var(--au-space-4); }
.card-cta .btn { width: 100%; justify-content: center; }

.raster-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--au-space-3); margin-top: var(--au-space-4); }
.raster-tile { background: var(--au-surface); border: 1px solid var(--au-border); border-radius: var(--au-radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.raster-thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--au-surface-2); }
.raster-thumb img { width: 100%; height: 100%; object-fit: cover; }
.raster-body { padding: var(--au-space-3) 1.375rem var(--au-space-3); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.raster-badge { font-size: .7rem; font-weight: var(--au-weight-bold); text-transform: uppercase; letter-spacing: .05em; color: var(--au-orange); }
.raster-body h3 { font-size: 1.0625rem; font-weight: var(--au-weight-bold); }
.raster-body p { margin: 0; font-size: var(--au-text-xs); color: var(--au-text-dim); flex: 1; }
.raster-body .schermlabel-caption { font-size: .7rem; margin: 0; }
.raster-body a { font-size: var(--au-text-2xs); font-weight: var(--au-weight-semi); color: var(--au-orange); text-decoration: none; margin-top: .25rem; }
.raster-body a:hover { text-decoration: underline; }
.raster-feature { margin-bottom: var(--au-space-3); }
.raster-feature-media img { width: 100%; border-radius: var(--au-radius-lg); border: 1px solid var(--au-border); }
.raster-feature-body { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--au-space-4); flex-wrap: wrap; padding-top: var(--au-space-3); }
.raster-feature-info h3 { font-size: 1.375rem; font-weight: var(--au-weight-bold); margin: .4rem 0 .4rem; }
.raster-feature-info p { margin: 0; color: var(--au-text-dim); font-size: var(--au-text-sm); max-width: 30rem; }
.raster-feature-body a { flex-shrink: 0; font-size: var(--au-text-xs); font-weight: var(--au-weight-bold); color: var(--au-orange); text-decoration: none; margin-top: .5rem; }
.raster-feature-body a:hover { text-decoration: underline; }
@media (max-width: 39.9375rem) { .raster-grid-3 { grid-template-columns: 1fr; } }

/* ---------- 13. Informatiekaart en -raster ----------
   Klein icoon, kop en tekst in een rasterig blok: gebruikt voor
   normvereisten, kernfuncties, uitkomsten en gekoppelde tools. Aantal
   kolommen via een modifier. Smal scherm: altijd een of twee kolommen. */
.info-grid { display: grid; gap: var(--au-space-3); }
.info-grid-4 { grid-template-columns: repeat(4, 1fr); }
.info-grid-3 { grid-template-columns: repeat(3, 1fr); }
.info-card { background: var(--au-surface); border: 1px solid var(--au-border); border-radius: var(--au-radius-md); padding: var(--au-space-3); }
.info-icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--au-surface-3); display: flex; align-items: center; justify-content: center; margin-bottom: var(--au-space-2); }
.info-icon svg { width: 1.25rem; height: 1.25rem; color: var(--au-navy); }
@media (prefers-color-scheme: dark) { .info-icon svg { color: var(--au-chalk); } }
.info-card h3, .info-card h4 { font-size: 1rem; font-weight: var(--au-weight-semi); margin: 0 0 4px; color: var(--au-text-heading); }
.info-card p { font-size: var(--au-text-xs); color: var(--au-text-dim); margin: 0; }
@media (max-width: 61.25em) { .info-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 35em) { .info-grid-4, .info-grid-3 { grid-template-columns: 1fr; } }

/* ---------- 14. Valkuilen ----------
   Rij van gemarkeerde probleemblokken, icoon links, tekst rechts. */
.pitfall-list { display: flex; flex-direction: column; gap: var(--au-space-2); }
.pitfall { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--au-space-3); padding: var(--au-space-3); background: var(--au-surface); border: 1px solid var(--au-border); border-left: 3px solid var(--au-orange); border-radius: var(--au-radius-md); }
.pitfall-icon { width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--au-orange-soft); display: flex; align-items: center; justify-content: center; }
.pitfall-icon svg { width: 1.375rem; height: 1.375rem; color: var(--au-orange); }
.pitfall h3 { font-size: 1rem; font-weight: var(--au-weight-semi); margin-bottom: 4px; }
.pitfall p { font-size: var(--au-text-xs); color: var(--au-text-dim); margin: 0; }

/* ---------- 15. Normchips ----------
   Losse pil (label of filter) en de interactieve variant met
   ingedrukt-status voor de normenbibliotheek-verkenner. Smal scherm: rij
   met chips scrollt horizontaal in plaats van te wrappen waar dat de
   layout anders zou breken. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: var(--au-text-xs); font-weight: var(--au-weight-semi);
  padding: 7px 14px; border-radius: var(--au-radius-full);
  border: 1.5px solid var(--au-border); background: var(--au-surface); color: var(--au-text);
  cursor: pointer; text-decoration: none; transition: all var(--au-dur-fast) var(--au-ease); line-height: 1.3;
}
.chip:hover { border-color: var(--au-orange); color: var(--au-orange); }
.chip.active.chip-norm, .chip.current { background: var(--au-orange); border-color: var(--au-orange); color: var(--au-text-op-deep); }
.chip.active.chip-rol { background: var(--au-navy); border-color: var(--au-navy); color: var(--au-text-op-deep); }
.coverage-chip {
  font-family: inherit; font-size: var(--au-text-xs); font-weight: var(--au-weight-semi);
  padding: 9px 16px; border-radius: var(--au-radius-full); border: 1px solid var(--au-border);
  background: var(--au-surface-2); color: var(--au-text); cursor: pointer; transition: all var(--au-dur-fast) var(--au-ease);
}
.coverage-chip:hover { border-color: var(--au-orange); color: var(--au-orange); }
.coverage-chip[aria-pressed="true"] { background: var(--au-orange); border-color: var(--au-orange); color: var(--au-text-op-deep); font-weight: var(--au-weight-semi); }
.coverage-chip.related { border-color: var(--au-orange); color: var(--au-orange); background: var(--au-orange-soft); }

/* ---------- 16. Cijferrij donker ----------
   Vier kerncijfers naast elkaar op navy-ondergrond, elk met een balkje
   dat de logaritmische verhouding toont. Smal scherm: twee kolommen. */
.cijferstrook { background: var(--au-navy); color: var(--au-text-op-deep); padding: var(--au-space-6) 0; }
.cijferstrook-kop { max-width: 46rem; margin: 0 0 var(--au-space-4); }
.cijferstrook-kop .eyebrow { color: var(--au-orange-hot); }
.cijferstrook-kop h2 { font-size: var(--au-text-4xl); font-weight: var(--au-weight-bold); margin: 0; color: var(--au-text-op-deep); }
.cijferstrook-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.cijferstrook-tile { padding: 0 var(--au-space-3); border-left: 1px solid var(--au-border-deep); }
.cijferstrook-tile:first-child { border-left: none; padding-left: 0; }
.cijferstrook-getal { font-size: var(--au-text-5xl); font-variant-numeric: tabular-nums; font-weight: var(--au-weight-bold); }
.cijferstrook-label { font-size: .85rem; opacity: .75; margin-top: .25rem; }
.cijferstrook-balk { height: 4px; background: var(--au-orange); border-radius: 2px; margin-top: var(--au-space-2); }
.cijferstrook-noot { grid-column: 1 / -1; font-size: var(--au-text-xs); opacity: .6; margin-top: var(--au-space-3); }
@media (max-width: 39.9375rem) {
  .cijferstrook-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--au-space-3); }
  .cijferstrook-tile { border-left: none; padding-left: 0; border-top: 1px solid var(--au-border-deep); padding-top: var(--au-space-3); }
  .cijferstrook-grid > .cijferstrook-tile:nth-child(1),
  .cijferstrook-grid > .cijferstrook-tile:nth-child(2) { border-top: none; padding-top: 0; }
}

/* ---------- 17. Coverage-teaser ----------
   Klein, gecentreerd kaartje dat naar de normenbibliotheek-verkenner
   linkt, met een paar voorbeeldchips. */
.coverage-teaser {
  max-width: 36rem; margin: 0 auto; text-align: center;
  background: var(--au-surface); border: 1px solid var(--au-border); border-radius: var(--au-radius-lg); padding: var(--au-space-4);
}
.coverage-teaser p.claim, .coverage-teaser h2 { font-size: var(--au-text-lg); font-weight: var(--au-weight-semi); color: var(--au-text-heading); margin: 0 0 .35rem; }
.coverage-static { color: var(--au-text-dim); font-size: .9rem; margin: 0 0 var(--au-space-3); font-weight: var(--au-weight-bold); }
.coverage-static strong { color: var(--au-orange); font-weight: var(--au-weight-bold); }
.coverage-chips { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin: 0 0 var(--au-space-3); }
.coverage-teaser-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: var(--au-weight-bold); color: var(--au-orange); text-decoration: none; }
.coverage-teaser-link:hover { text-decoration: underline; }
.coverage-teaser-link .icon { width: 1rem; height: 1rem; }
@media (max-width: 39.9375rem) { .coverage-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: .25rem; } }

/* ---------- 18. Twee-sporen-vergelijking ----------
   Twee panelen naast elkaar, elk een spoor van kwaliteitstoetsing, met
   een gedeeld bovenschot dat het onderscheid markeert (navy versus
   oranje). Smal scherm: panelen onder elkaar. */
.spoor-split { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--au-border); border-radius: var(--au-radius-lg); overflow: hidden; }
.spoor-panel { padding: var(--au-space-4); border-top: 4px solid var(--au-navy); background: var(--au-surface); }
.spoor-panel.full-eqa { border-top-color: var(--au-orange); }
.spoor-panel:first-child { border-right: 1px solid var(--au-border-deep); }
.spoor-panel .eyebrow { margin-bottom: .5rem; }
.spoor-panel h3 { font-size: 1.25rem; font-weight: var(--au-weight-bold); margin-bottom: var(--au-space-2); }
.spoor-panel p { color: var(--au-text-dim); font-size: var(--au-text-sm); margin: 0 0 var(--au-space-3); }
.spoor-panel img { width: 100%; border-radius: var(--au-radius-sm); border: 1px solid var(--au-border-deep); margin-bottom: .5rem; }
.spoor-panel .schermlabel-wrap { margin-top: var(--au-space-3); }
@media (max-width: 39.9375rem) {
  .spoor-split { grid-template-columns: 1fr; }
  .spoor-panel:first-child { border-right: none; border-bottom: 1px solid var(--au-border-deep); }
}

/* ---------- 19. Hulpstrook, ondergeschikt ----------
   Lage-nadruk strook die naar hulp van een auditor verwijst: nooit
   zwaarder dan de tool waar hij bij hoort. Smal scherm: tekst en link
   onder elkaar. */
.hulp-strip {
  display: flex; align-items: center; justify-content: space-between; gap: var(--au-space-4);
  flex-wrap: wrap; padding: var(--au-space-3) var(--au-space-4);
  background: var(--au-surface-2); border: 1px solid var(--au-border); border-radius: var(--au-radius-sm);
}
.hulp-strip-text { max-width: 40rem; }
.hulp-strip-text h3 { font-size: 1rem; font-weight: var(--au-weight-bold); margin-bottom: .35rem; }
.hulp-strip-eyebrow { font-size: .75rem; font-weight: var(--au-weight-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--au-text-dim); margin: 0 0 4px; }
.hulp-strip-text p.hulp-lead { margin: 0; font-size: var(--au-text-sm); color: var(--au-text); }
.hulp-strip-text p.hulp-lead strong { color: var(--au-text-heading); font-weight: var(--au-weight-semi); }
.hulp-lines { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--au-space-3); flex-wrap: wrap; }
.hulp-lines li { font-size: var(--au-text-2xs); color: var(--au-text-dim); font-weight: var(--au-weight-semi); padding-left: .8rem; position: relative; }
.hulp-lines li::before { content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: var(--au-orange); }
.hulp-strip-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--au-text-xs); font-weight: var(--au-weight-bold); color: var(--au-orange); text-decoration: none; white-space: nowrap; }
.hulp-strip-link:hover { text-decoration: underline; }
.hulp-strip-link .icon { width: 1rem; height: 1rem; }
@media (max-width: 39.9375rem) { .hulp-strip { flex-direction: column; align-items: flex-start; } }

/* ---------- 20. Aanhaling ----------
   Een korte, opvallende bewering met een streepje ervoor, zonder de
   zwaarte van een citaatblok. */
.aanhaling { max-width: 46rem; margin: 0; font-size: var(--au-text-sm); color: var(--au-text-dim); border-left: 3px solid var(--au-orange); padding: .1rem 0 .1rem 1.25rem; }

/* ---------- 21. Slotoproep, begrensd paneel ----------
   Navy, afgeronde kaart met een oproep om verder te gaan: optioneel een
   icoon bovenaan en een lijst met korte pluspunten. Smal scherm: knoppen
   worden volle breedte. */
.cta-panel { background: var(--au-navy); border-radius: var(--au-radius-lg); padding: var(--au-space-6) var(--au-space-4); text-align: center; color: var(--au-text-op-deep); max-width: 45rem; margin: 0 auto; }
.cta-panel-icon { width: 4rem; height: 4rem; border-radius: 1rem; background: var(--au-orange-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--au-space-3); }
.cta-panel-icon svg { width: 1.875rem; height: 1.875rem; color: var(--au-orange); }
.cta-panel h2 { color: var(--au-text-op-deep); font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: var(--au-weight-bold); margin-bottom: var(--au-space-2); }
.cta-panel p { color: var(--au-slate-light); font-size: var(--au-text-lg); max-width: 34rem; margin: 0 auto var(--au-space-4); }
.cta-panel-bullets { list-style: none; margin: 0 0 var(--au-space-4); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--au-space-2) var(--au-space-4); }
.cta-panel-bullets li { display: flex; align-items: center; gap: 8px; font-size: var(--au-text-sm); color: var(--au-slate-light); }
.cta-panel-bullets svg { width: 1rem; height: 1rem; color: var(--au-orange); flex-shrink: 0; }
.cta-panel-actions { display: flex; gap: var(--au-space-2); justify-content: center; flex-wrap: wrap; }
@media (max-width: 39.9375rem) { .cta-panel-actions .btn { width: 100%; justify-content: center; } }

/* ---------- 22. Sitevoet ----------
   Merk en payoff links, twee kolommen navigatie rechts (hoofdmenu en
   hulp-links), daaronder juridisch en copyright. Smal scherm: alles
   onder elkaar. */
.site-footer { background: var(--au-surface); border-top: 1px solid var(--au-border); padding: var(--au-space-5) 0 var(--au-space-4); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--au-space-4); flex-wrap: wrap; padding-bottom: var(--au-space-4); border-bottom: 1px solid var(--au-border); }
.footer-brand p { margin: .5rem 0 0; font-size: var(--au-text-xs); color: var(--au-text-dim); max-width: 18rem; }
.footer-cols { display: flex; gap: var(--au-space-6); flex-wrap: wrap; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.footer-col a { text-decoration: none; color: var(--au-text-dim); font-size: var(--au-text-xs); font-weight: var(--au-weight-semi); display: inline-block; }
/* inline-block klopt binnen de <ul><li>-markup waarvoor dit blok geschreven is,
   want de li is dan het flex-kolomitem. De templates zetten de links los in
   .footer-col, zonder ul: dan lopen ze als woorden achter elkaar door en breekt
   "Beta Programma" middenin af. Een link die direct kind is, staat op een regel. */
.footer-col > a { display: block; padding: .2rem 0; }
.footer-col a:hover { color: var(--au-orange); }
.footer-col-hulp a { color: var(--au-text-heading); opacity: .7; }
.footer-col-hulp a:hover { opacity: 1; color: var(--au-orange); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--au-space-2); flex-wrap: wrap; padding-top: var(--au-space-3); font-size: var(--au-text-2xs); color: var(--au-text-dim); }
/* De flexbalk is ontworpen voor twee kinderen (copyright links, juridische
   links rechts). De templates leveren er nog maar een: dan duwt
   space-between die ene naar links terwijl de tekst erin gecentreerd is, en
   staat de copyright-regel zichtbaar uit het midden. Een enig kind hoort in
   het midden. */
.footer-bottom > :only-child { margin-left: auto; margin-right: auto; }
.footer-legal { list-style: none; display: flex; gap: var(--au-space-3); margin: 0; padding: 0; }
.footer-legal a { text-decoration: none; color: var(--au-text-dim); }
.footer-legal a:hover { color: var(--au-orange); }
.footer-copy { margin: 0; }
@media (max-width: 39.9375rem) {
  .footer-top { flex-direction: column; }
  .footer-cols { gap: var(--au-space-3); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}